diff --git a/index.html b/index.html index ea94409..671cf59 100644 --- a/index.html +++ b/index.html @@ -61,15 +61,25 @@
- Download All - GitHub - +
Download All
+
GitHub
+
+ +
+
+

180 pixel-perfect icons, free to use for all your projects!

+

These pixel-art icons are all carefully crafted in 9x9 pixel grids, then saved in SVG vector format.

+

To download, please click the icons you want, or click the [Download All] button above.

+
+ + + + + + + +
+
+ + +
+
Download All
+
GitHub
+
+ +
+
+
+
+

pixel-perfect icons, free to use for all your projects!

+

These pixel-art icons are all carefully crafted in 9x9 pixel grids, then saved in SVG vector format.

+

To download, please click the icons you want, or click the [Download All] button above.

+
+
+ +
+ + <?= str_replace("> + + +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/public/fonts/OpenSansPX.ttf b/public/fonts/OpenSansPX.ttf new file mode 100755 index 0000000..264e28c Binary files /dev/null and b/public/fonts/OpenSansPX.ttf differ diff --git a/src/App.css b/src/App.css index 044594b..a40785e 100644 --- a/src/App.css +++ b/src/App.css @@ -1,58 +1,73 @@ +@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap'); + +@font-face { + font-family: 'Open Sans PX'; + src: url('../fonts/OpenSansPX.ttf') format('truetype') +} + #root { - width: 100%; + width: 100%; } input#search { - width: 100%; + width: 100%; } #display-options { - margin-top: 18px; - font-size: 1em; - line-height: 18px; - display: flex; - gap: 0.5em; + margin-top: 18px; + font-size: 1em; + line-height: 18px; + display: flex; + gap: 0.5em; } ul.icon-list { - list-style: none; - margin: 36px 0 0; - padding: 0; - display: flex; - flex-wrap: wrap; - /* display: grid; - grid-template-columns: repeat( auto-fit, minmax( 54px, 1fr ) ); */ - gap: 18px; + list-style: none; + margin: 36px 0 0; + padding: 0; + display: flex; + flex-wrap: wrap; + /* display: grid; + grid-template-columns: repeat( auto-fit, minmax( 54px, 1fr ) ); */ + gap: 18px; } ul.icon-list.show-name { - /* grid-template-columns: repeat( auto-fit, minmax( 99px, 1fr ) ); */ + /* grid-template-columns: repeat( auto-fit, minmax( 99px, 1fr ) ); */ } ul.icon-list>li { - box-sizing: border-box; - width: 54px; - padding: 9px; - text-align: center; - display: flex; - flex-direction: column; - align-items: center; + box-sizing: border-box; + width: 54px; + padding: 9px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; } ul.icon-list.show-name>li { - padding: 9px; - width: 90px; - height: 99px; - /* border: 1px solid #ccc; */ + padding: 9px; + width: 99px; + height: 126px; + /* border: 1px solid #ccc; */ } -ul.icon-list img { - width: 36px; - height: auto; +ul.icon-list img.icon { + width: 36px; + height: auto; + cursor: pointer; } ul.icon-list .name { - font-size: 9pt; - line-height: 18px; - margin-top: 9px; + font-size: 20px; + line-height: 24px; + margin-top: 9px; + font-family: "Open Sans PX"; +} + +@media (hover:hover) { + ul.icon-list>li:hover img.icon { + transform: translateY(-6px); + } } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index d55005d..514e5d7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -24,7 +24,9 @@ function App() { return ( <> - +
+ +
diff --git a/src/IconList.jsx b/src/IconList.jsx index 3f900c1..6249893 100644 --- a/src/IconList.jsx +++ b/src/IconList.jsx @@ -21,12 +21,6 @@ export const IconList = function () { if (tag.indexOf(keyword.toLowerCase()) != -1) return true } }) - // const matched = iconData[filename].filter(tag => { - // for (const keyword of keywords) { - // if (tag.indexOf(keyword.toLowerCase()) != -1) return true - // } - // return false - // }) if (matched.length == keywords.length) filtered.push(filename) } diff --git a/src/index.css b/src/index.css index 8945818..5732569 100644 --- a/src/index.css +++ b/src/index.css @@ -1,113 +1,274 @@ +/* @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap'); */ +/* @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Silkscreen&display=swap'); */ +@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap'); + +@font-face { + font-family: 'Open Sans PX'; + src: url('../fonts/OpenSansPX.ttf') format('truetype') +} + :root { - font-size: 9px; - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; + font-size: 14px; + font-family: 'Silkscreen', sans-serif; + line-height: 1.5; + font-weight: 400; - --font-color: rgba(255, 255, 255, 0.87); - --background-color: #242424; + --font-color: #ecebf7; + --grey-color: #a2a1b3; + --background-color: #111111; + --link-color: #99ccff; + --link-color-hover: #4236f7; - color-scheme: light dark; + color-scheme: light dark; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; } [data-theme="light"] { - --font-color: #213547; - --background-color: #ffffff; + --font-color: #343340; + --grey-color: #6f6d80; + --background-color: #ffffff; + --link-color: #99ccff; + --link-color-hover: #4236f7; } body { - margin: 0; - /* display: flex; */ - padding: 0; - /* min-width: 320px; */ - min-height: 100vh; - color: var(--font-color); - background-color: var(--background-color); + margin: 0; + /* display: flex; */ + padding: 0; + /* min-width: 320px; */ + min-height: 100vh; + color: var(--font-color); + background-color: var(--background-color); +} + +#introduction { + margin-bottom: 2rem; + text-align: center; + padding: 2rem; +} + +a { + color: var(--link-color); + text-decoration: none; +} + +@media (hover:hover) { + a:hover { + color: var(--link-color-hover); + } +} + +p { + font-family: "Open Sans PX", sans-serif; + font-size: 20px; } input[type="text"] { - padding: 9px 18px; - color: var(--font-color); - border: 1px solid var(--font-color); - border-radius: 18px; - box-sizing: border-box; -} - -input { - background-color: var(--background-color); + font-family: 'Silkscreen', sans-serif; + padding: 9px; + color: var(--font-color); + border: 2px solid var(--grey-color); + box-sizing: border-box; } input[type="text"]:focus { - outline: 0; + outline: 0; + border-color: var(--font-color) +} + +.pixel-input { + box-sizing: border-box; + padding: 2px; + background: var(--grey-color); + clip-path: polygon( + 0 4px, + 2px 4px, + 2px 2px, + 4px 2px, + 4px 0, + + calc(100% - 4px) 0, + calc(100% - 4px) 2px, + calc(100% - 2px) 2px, + calc(100% - 2px) 4px, + 100% 4px, + + 100% calc(100% - 4px), + calc(100% - 2px) calc(100% - 4px), + calc(100% - 2px) calc(100% - 2px), + calc(100% - 4px) calc(100% - 2px), + calc(100% - 4px) 100%, + + 4px 100%, + 4px calc(100% - 2px), + 2px calc(100% - 2px), + 2px calc(100% - 4px), + 0 calc(100% - 4px) + ); +} + +.pixel-input input[type="text"] { + background: var(--background-color); + border: 0; + box-sizing: border-box; + clip-path: polygon( + 2px 0, + calc(100% - 2px) 0, + calc(100% - 2px) 2px, + 100% 2px, + 100% calc(100% - 2px), + calc(100% - 2px) calc(100% - 2px), + calc(100% - 2px) 100%, + 2px 100%, + 2px calc(100% - 2px), + 0 calc(100% - 2px), + 0 2px, + 2px 2px + ); +} + +.pixel-input:focus-within { + background-color: var(--font-color) } #wrapper { - width: 100%; - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-size: 9pt; - box-sizing: border-box; + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + font-size: 13.5px; + box-sizing: border-box; } header { - display: flex; - justify-content: flex-start; - align-items: center; - gap: 18px; - flex-wrap: wrap; - margin: 36px 0 54px; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 18px; + flex-wrap: wrap; + margin: 36px 0 54px; +} + +footer { + margin-top: 36px; + text-align: center; } header .buttons { - display: flex; - gap: 18px; - justify-content: flex-start; - align-items: center; + display: flex; + gap: 18px; + justify-content: flex-start; + align-items: center; } #site-title { - height: 30px; - width: auto; - fill: currentColor; - margin-right: auto; + height: 30px; + width: auto; + fill: currentColor; + margin-right: auto; } h1 { - font-size: 3.2em; - line-height: 1; + font-size: 3.2em; + line-height: 1; } -a.pill, -button.pill { - font-size: 1em; - line-height: 1.5em; - padding: 4px 9px; - border-radius: 27px; - border: 1px solid var(--font-color); - color: var(--font-color); - background-color: var(--background-color); - /* background: #ffffff; */ - /* color: #213547; */ - text-decoration: none; - appearance: none; - -webkit-appearance: none; + + +a.button, +button.button { + display: inline-block; + font-size: 1em; + line-height: 1.5em; + padding: 4px 9px; + border: 2px solid var(--grey-color); + color: var(--font-color); + background-color: var(--background-color); + text-decoration: none; + appearance: none; + -webkit-appearance: none; + cursor: pointer; +} + +.pill { + display: inline-block; + cursor: pointer; + box-sizing: border-box; + padding: 2px; + background: var(--grey-color); + clip-path: polygon( + 0 4px, + 2px 4px, + 2px 2px, + 4px 2px, + 4px 0, + + calc(100% - 4px) 0, + calc(100% - 4px) 2px, + calc(100% - 2px) 2px, + calc(100% - 2px) 4px, + 100% 4px, + + 100% calc(100% - 4px), + calc(100% - 2px) calc(100% - 4px), + calc(100% - 2px) calc(100% - 2px), + calc(100% - 4px) calc(100% - 2px), + calc(100% - 4px) 100%, + + 4px 100%, + 4px calc(100% - 2px), + 2px calc(100% - 2px), + 2px calc(100% - 4px), + 0 calc(100% - 4px) + ); +} + +.pill a.button, +.pill button.button { + background: var(--background-color); + border: 0; + box-sizing: border-box; + clip-path: polygon( + 2px 0, + calc(100% - 2px) 0, + calc(100% - 2px) 2px, + 100% 2px, + 100% calc(100% - 2px), + calc(100% - 2px) calc(100% - 2px), + calc(100% - 2px) 100%, + 2px 100%, + 2px calc(100% - 2px), + 0 calc(100% - 2px), + 0 2px, + 2px 2px + ); +} + +@media (hover: hover) { + a.button:hover, + button.button:hover { + border-color: var(--font-color); + } + + .pill:hover, + .pill:hover { + background-color: var(--font-color); + } } img.theme-icon { - width: 1em; - height: 1em; - vertical-align: middle; + width: 1em; + height: 1em; + vertical-align: middle; } .ms-auto { - margin-left: auto + margin-left: auto } @media (prefers-color-scheme: light) {