Style changes
This commit is contained in:
Corey Ginnivan
parent
bc905d3ca2
commit
2dfd68e09f
|
|
@ -38,10 +38,7 @@
|
|||
property="twitter:image"
|
||||
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"
|
||||
defer
|
||||
></script>
|
||||
<script src="//unpkg.com/alpinejs" defer></script>
|
||||
<link rel="icon" type="image/svg+xml" href="/images/favicons/favicon.svg" />
|
||||
<link
|
||||
rel="mask-icon"
|
||||
|
|
@ -52,7 +49,7 @@
|
|||
</head>
|
||||
<body
|
||||
class="flex flex-col min-h-screen font-mono leading-normal tracking-normal bg-white"
|
||||
x-data="loadIcons()"
|
||||
x-data="loadIcons(), showBar"
|
||||
>
|
||||
<main class="flex-grow">
|
||||
<nav class="flex justify-between p-4 text-sm md:p-6 lg:p-8 md:text-base">
|
||||
|
|
@ -122,13 +119,15 @@
|
|||
/>
|
||||
</div>
|
||||
<div
|
||||
class="sticky top-0 z-10 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-100 md:space-y-0 md:flex-row md:px-6 lg:px-8"
|
||||
class="sticky top-0 z-50 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-100 md:space-y-0 md:flex-row md:px-6 lg:px-8"
|
||||
:class="{ 'shadow-xl duration-100' : showBar }"
|
||||
@scroll.window="showBar = (window.pageYOffset > 20) ? true : false"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col p-1 space-x-0 space-y-1 bg-gray-200 rounded md:flex-row md:space-x-1 md:space-y-0"
|
||||
>
|
||||
<label
|
||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm transition duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||
:class="downloadType === 'copy-svg' ? 'bg-white shadow' : 'text-gray-600'"
|
||||
>
|
||||
<input
|
||||
|
|
@ -169,7 +168,7 @@
|
|||
<span class="whitespace-no-wrap">Copy SVG Code</span>
|
||||
</label>
|
||||
<label
|
||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm transition duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||
:class="downloadType === 'copy-cdn' ? 'bg-white shadow' : 'text-gray-600'"
|
||||
>
|
||||
<input
|
||||
|
|
@ -278,7 +277,7 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 p-4 md:p-6 lg:p-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 divide-x divide-y divide-gray-300"
|
||||
class="grid grid-cols-2 m-4 md:m-6 lg:m-8 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 divide-x divide-y divide-gray-200 border-r border-b border-solid border-gray-200"
|
||||
>
|
||||
<template x-for="(item, index) in filteredIcons" :key="index">
|
||||
<a
|
||||
|
|
@ -290,55 +289,53 @@
|
|||
item.icon_path +
|
||||
`.svg`"
|
||||
x-bind:download="downloadType === 'download-svg' && item.icon_name"
|
||||
class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 transition duration-150 ease-in-out bg-white cursor-pointer group hover:shadow-xl hover:z-10 md:h-40"
|
||||
class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 duration-150 ease-in-out bg-white cursor-pointer group hover:z-10 hover:shadow-xl md:h-40"
|
||||
@click="handleClick(item, downloadType, $event, $dispatch)"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
role="alert"
|
||||
x-show="copied === item.icon_name"
|
||||
x-on:show:toast.document="copied = $event.detail"
|
||||
x-cloak
|
||||
class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded hover:border hover:border-black"
|
||||
style="width: fit-content"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-500 "
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90"
|
||||
<div
|
||||
role="alert"
|
||||
x-show="copied === item.icon_name"
|
||||
x-on:show:toast.document="copied = $event.detail"
|
||||
x-cloak
|
||||
class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded hover:border-gray-900"
|
||||
style="width: fit-content"
|
||||
x-transition:enter="ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="ease-in duration-500 "
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90"
|
||||
>
|
||||
<template x-if="downloadType == 'download-svg'"
|
||||
><span>Downloading!</span></template
|
||||
>
|
||||
<template x-if="downloadType == 'copy-cdn'"
|
||||
><span>Copied URL</span></template
|
||||
>
|
||||
<template x-if="downloadType == 'copy-svg'"
|
||||
><span>Copied SVG Code</span></template
|
||||
>
|
||||
<template x-if="downloadType == 'download-svg'"
|
||||
><span>Downloading!</span></template
|
||||
>
|
||||
<template x-if="downloadType == 'copy-cdn'"
|
||||
><span>Copied URL</span></template
|
||||
>
|
||||
<template x-if="downloadType == 'copy-svg'"
|
||||
><span>Copied SVG Code</span></template
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
:src="`images/icons/` + item.icon_path + `.svg`"
|
||||
:alt="item.icon_name"
|
||||
class="transition duration-200 group-hover:scale-200"
|
||||
class="duration-200 group-hover:scale-200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span class="hidden" x-cloak x-text="item.icon_keywords"></span>
|
||||
<p
|
||||
class="mt-4 text-xs leading-none tracking-tight text-center text-gray-600 md:mt-8"
|
||||
class=" absolute text-[11px] leading-snug text-left bottom-2 left-2 tracking-tight text-gray-400"
|
||||
x-text="item.icon_name"
|
||||
></p>
|
||||
<span class="hidden" x-text="item.icon_keywords"></span>
|
||||
</a>
|
||||
</template>
|
||||
<div x-show="filteredIcons.length === 0" class="col-span-2">
|
||||
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="filteredIcons.length === 0" class="w-full m-4 md:m-6 lg:m-8">
|
||||
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
||||
</div>
|
||||
</main>
|
||||
<footer
|
||||
class="flex flex-col py-8 mx-8 space-y-4 text-gray-700 border-t border-gray-300 md:space-y-0 md:flex-row"
|
||||
class="flex flex-col py-8 mx-8 space-y-4 text-gray-700 md:space-y-0 md:flex-row"
|
||||
>
|
||||
<span>
|
||||
Project by
|
||||
|
|
@ -411,6 +408,7 @@
|
|||
},
|
||||
};
|
||||
}
|
||||
var showBar = false;
|
||||
</script>
|
||||
<!-- Fathom - beautiful, simple website analytics -->
|
||||
<script
|
||||
|
|
|
|||
Loading…
Reference in New Issue