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()"
|
x-data="loadIcons()"
|
||||||
>
|
>
|
||||||
<main class="flex-grow">
|
<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
|
<input
|
||||||
onFocus="this.select()"
|
onFocus="this.select()"
|
||||||
autofocus="autofocus"
|
autofocus="autofocus"
|
||||||
|
@ -70,11 +118,11 @@
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
spellcheck="false"
|
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>
|
||||||
<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
|
<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"
|
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>
|
||||||
|
|
||||||
<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">
|
<template x-for="(item, index) in filteredIcons" :key="index">
|
||||||
<a
|
<a
|
||||||
|
|
Loading…
Reference in a new issue