Merge pull request #10 from CoreyGinnivan/feature/intro-addition

Feature/intro addition
This commit is contained in:
Corey 2020-08-11 15:19:23 +08:00 committed by GitHub
commit e861b50ca7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 4 deletions

View File

@ -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 text-sm md:text-base">
<a class="font-extrabold" href="/">System UIcons</a>
<div class="space-x-3 md: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