Skip to content

Commit

Permalink
design and layout updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@halfmage
halfmage committed Apr 7, 2021
1 parent b52471c commit 43990e0
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 29 deletions.
26 changes: 10 additions & 16 deletions _includes/header.njk
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="py-8 container mx-auto text-center px-4 flex flex-col items-center">
<h1 class="text-6xl font-extrabold tracking-tight">
<h1 class="text-6xl font-light tracking-wide uppercase">
<a href="/">{{ meta.title }}</a>
</h1>
<p class="text-lg mt-4 mb-3">
Expand All @@ -8,23 +8,17 @@
</p>

<div class="flex text-sm items-center">
<!-- figma button start -->
<a href="https://www.figma.com/community/file/937658831428627854/Majesticons" target="_blank" class="inline-flex flex-1 my-2 items-center justify-center px-3 py-2 transition-colors cursor-pointer rounded border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 hover:border-gray-400 mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6">
<path fill="currentColor" fill-rule="evenodd" d="M5 6a4 4 0 014-4h6a4 4 0 012.6 7 4 4 0 01-4.6 6.5V18a4 4 0 11-6.6-3 4 4 0 010-6A4 4 0 015 6zm4 8h2v-4H9a2 2 0 100 4zm2 2H9a2 2 0 102 2v-2zm6-10a2 2 0 01-2 2h-2V4h2a2 2 0 012 2zm-2 4a2 2 0 100 4 2 2 0 000-4zm-4-6H9a2 2 0 100 4h2V4z" clip-rule="evenodd"/>
</svg>
<span class="ml-2 font-semibold whitespace-nowrap">Open in Figma</span>
<a href="https://www.figma.com/community/file/937658831428627854/Majesticons" target="_blank" class="font-semibold inline-flex flex-1 my-2 items-center justify-center px-4 py-2 transition-colors cursor-pointer rounded border border-gray-300 dark:border-gray-800 hover:bg-gray-100 dark:bg-gray-800 hover:border-gray-400 mx-2">
v2.0.4
</a>
<!-- figma button end -->

<!-- github button start -->
<a href="https://github.com/halfmage/majesticons" target="_blank" class="inline-flex flex-1 my-2 items-center justify-center px-3 py-2 transition-colors cursor-pointer rounded border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 hover:border-gray-400 mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6">
<path fill="currentColor" fill-rule="evenodd" d="M4.4 2A1 1 0 003 3v3.5c-.6 1-1 2.2-1 3.5 0 1.8.8 3.3 2 4.3 1 .8 2.1 1.4 3.4 1.9l-.4.4c-.5.5-.8 1-1 1.7l-.4.1-.1-.2-.2-.3a31 31 0 00-.4-.7c-.4-.5-.9-1-1.7-1.2a1 1 0 10-.4 2c.2 0 .3.1.4.3l.3.4v.1l.3.5c.2.4.6.9 1.4 1 .2.1.5.1.8 0v.7a1 1 0 102 0v-2c0-.4.1-.7.4-1l1.3-1.3c.3-.2.3-.6.3-.9a1 1 0 00-.7-1.2c-1.7-.4-3-1-4-1.8A3.5 3.5 0 014 10c0-1 .3-1.8.8-2.7l.2-.5V4.5l1.6.6h.9a9.9 9.9 0 019 0h.9l1.6-.6v2.3c0 .2 0 .4.2.5.5.9.8 1.8.8 2.7 0 1.2-.5 2-1.3 2.8-1 .8-2.3 1.4-4 1.8a1 1 0 00-.7 1.2c0 .3 0 .7.3 1l.8.7c.6.6.9 1.4.9 2.2V21a1 1 0 102 0v-1.3a5 5 0 00-1.4-3.5c1.3-.5 2.4-1 3.4-1.9 1.2-1 2-2.5 2-4.3 0-1.3-.4-2.5-1-3.5V3a1 1 0 00-1.4-1L17 3A12 12 0 007 3L4.4 2z" clip-rule="evenodd"/>
</svg>
<span class="ml-2 font-semibold whitespace-nowrap">Open on Github</span>
<a href="https://www.figma.com/community/file/937658831428627854/Majesticons" target="_blank" class="font-semibold inline-flex flex-1 my-2 items-center justify-center px-4 py-2 transition-colors cursor-pointer rounded border border-gray-300 dark:border-gray-800 hover:bg-gray-100 dark:bg-gray-800 hover:border-gray-400 mx-2">
Figma
</a>
<a href="https://github.com/halfmage/majesticons" target="_blank" class="font-semibold inline-flex flex-1 my-2 items-center justify-center px-4 py-2 transition-colors cursor-pointer rounded border border-gray-300 dark:border-gray-800 hover:bg-gray-100 dark:bg-gray-800 hover:border-gray-400 mx-2">
Github
</a>
<!-- github button end -->
<button onclick="toggleDefaultTheme()" class="whitespace-nowrap theme-sun font-semibold inline-flex flex-1 my-2 items-center justify-center px-4 py-2 transition-colors cursor-pointer rounded border border-gray-300 dark:border-gray-800 hover:bg-gray-100 dark:bg-gray-800 hover:border-gray-400 mx-2">Light Mode</button>
<button onclick="toggleSecondTheme()" class="whitespace-nowrap theme-moon font-semibold inline-flex flex-1 my-2 items-center justify-center px-4 py-2 transition-colors cursor-pointer rounded border border-gray-300 dark:border-gray-800 hover:bg-gray-100 dark:bg-gray-800 hover:border-gray-400 mx-2">Dark Mode</button>
</div>

</div>
22 changes: 13 additions & 9 deletions index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,23 @@ layout: default
</script>
<div class="container mx-auto px-4" x-data="loadIconData()">

<div class="flex mb-4 ">
<input x-ref="searchField" x-model="search" x-on:keydown.window.prevent.slash="$refs.searchField.focus()" placeholder="Search for icons" type="search" class="block w-full border border-gray-300 focus:outline-none bg-gray-100 dark:bg-gray-800 focus:bg-white dark:focus:bg-gray-700 focus:shadow text-gray-700 rounded-lg px-4 py-3 mr-2" />
<button onclick="toggleDefaultTheme()" class="theme-sun bg-white text-black px-4 py-3 flex-shrink-0 rounded-lg">Light Mode</button>
<button onclick="toggleSecondTheme()" class="theme-moon bg-black text-white px-4 py-3 flex-shrink-0 rounded-lg">Dark Mode</button>
<div class="flex mb-4">
<input
x-ref="searchField"
x-model="search"
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
placeholder="Search for icon names e.g. 'cloud-code, book-music or textbox-clock'"
type="search"
class="block w-full bg-white shadow rounded px-4 py-3 dark:bg-gray-800" />
</div>

<div class="grid gap-1" style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))">
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))">
<template x-for="item in filteredIcons" :key="item">
<div class="relative inline-flex flex-col items-center group py-4 px-2 text-sm">
<div class="w-6 h-6" x-html="item.source"></div>
<div class="truncate w-full mt-2" x-text="item.namePlain"></div>
<div class="relative inline-flex flex-col items-center group py-4 px-2 text-sm bg-white shadow rounded dark:bg-gray-800">
<div class="w-6 h-6 my-6" x-html="item.source"></div>
<div class="truncate w-full mt-2 text-xs text-gray-600 dark:text-gray-400" x-text="item.namePlain"></div>
<div class="sr-only" x-bind:id="item.namePlain" x-text="item.source"></div>
<div x-bind:data-clipboard-target="'#' + item.namePlain" class="icon-copy-trigger hover:underline cursor-pointer font-bold transition-opacity group-hover:opacity-100 opacity-0 ">Copy SVG</div>
<!-- <div x-bind:data-clipboard-target="'#' + item.namePlain" class="icon-copy-trigger hover:underline cursor-pointer font-bold transition-opacity group-hover:opacity-100 opacity-0 ">Copy SVG</div> -->
</div>
</template>
</div>
Expand Down
5 changes: 1 addition & 4 deletions styles/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,9 @@ module.exports = {
white: white,
black: black,
gray: trueGray,
primary: colors.red,
primary: colors.emerald,
secondary: colors.green,
},
fontFamily: {
sans: ["Manrope", "sans-serif"],
},
extend: {
typography(theme) {
return {
Expand Down

0 comments on commit 43990e0

Please # to comment.