mirror of
https://github.com/CoreyGinnivan/system-uicons.git
synced 2024-05-19 13:56:34 +02:00
Added initial navigation and intro
This commit is contained in:
parent
53a7811705
commit
495ff52cb5
|
@ -55,7 +55,55 @@
|
|||
x-data="loadIcons()"
|
||||
>
|
||||
<main class="flex-grow">
|
||||
<div class="bg-white px-8 py-4">
|
||||
<nav class="flex p-4 md:p-6 lg:p-8 justify-between">
|
||||
<a class="font-extrabold" href="/">System UIcons</a>
|
||||
<div class="space-x-8">
|
||||
<a class="hover:underline" href="/about">Behind the design</a>
|
||||
<a class="hover:underline" href="/changelog">Changelog</a>
|
||||
<a
|
||||
class="hover:underline"
|
||||
href="https://github.com/CoreyGinnivan/system-uicons"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>GitHub</a
|
||||
>
|
||||
<a
|
||||
class="hover:underline"
|
||||
href="https://github.com/sponsors/CoreyGinnivan"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>Sponsor</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 md:p-6 lg:p-8">
|
||||
<p class="text-xl lg:text-3xl xl:text-5xl text-black leading-tight">
|
||||
A growing collection of simple and consistent icons specifically
|
||||
designed for systems and products.
|
||||
<strong class="italic underline"
|
||||
>Use how you want, without attribution.</strong
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white text-gray-400 px-4 md:px-6 lg:px-8 py-4 flex flex-row items-center mt-4 md:mt-6 lg:mt-8"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 21 21"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 md:w-7 lg:w-12 h-6 md:h-7 lg:h-12 mr-4"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
stroke="currentcolor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="8.5" cy="8.5" r="5" />
|
||||
<path d="m17.571 17.5-5.571-5.5" />
|
||||
</g>
|
||||
</svg>
|
||||
<input
|
||||
onFocus="this.select()"
|
||||
autofocus="autofocus"
|
||||
|
@ -70,11 +118,11 @@
|
|||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
|
||||
class="flex flex-1 w-full focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col space-y-2 md:space-y-0 md:flex-row border-t border-gray-300 bg-white py-4 px-2 lg:px-8 sticky top-0 z-10"
|
||||
class="flex flex-col space-y-2 md:space-y-0 md:flex-row border-t border-gray-300 bg-white py-4 px-4 md:px-6 lg:px-8 sticky top-0 z-10"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col md:flex-row bg-gray-200 p-1 rounded space-x-0 md:space-x-1 space-y-1 md:space-y-0"
|
||||
|
@ -230,7 +278,7 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 lg:p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-4"
|
||||
class="p-4 md:p-6 lg:p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-4"
|
||||
>
|
||||
<template x-for="(item, index) in filteredIcons" :key="index">
|
||||
<a
|
||||
|
|
Loading…
Reference in a new issue