From 97f7f9e7fa22858057b9b3246faf8f1d654e12d0 Mon Sep 17 00:00:00 2001 From: Shuqi Date: Mon, 4 Dec 2023 15:54:37 +0800 Subject: [PATCH] Moved php to /php folder, and some style updates --- index.html | 22 ++- download.php => php/download.php | 0 php/index.php | 94 ++++++++++ public/fonts/OpenSansPX.ttf | Bin 0 -> 38040 bytes src/App.css | 81 +++++---- src/App.jsx | 4 +- src/IconList.jsx | 6 - src/index.css | 303 +++++++++++++++++++++++-------- 8 files changed, 393 insertions(+), 117 deletions(-) rename download.php => php/download.php (100%) create mode 100644 php/index.php create mode 100755 public/fonts/OpenSansPX.ttf 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 0000000000000000000000000000000000000000..264e28ccd8dc0e6cd46bfe94a467fc47e4613c4a GIT binary patch literal 38040 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 { - 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) {