From 5749093818c5d3d073d6c80d4fed6380a4be2a7c Mon Sep 17 00:00:00 2001 From: Shuqi Date: Wed, 8 Nov 2023 04:08:33 +0800 Subject: [PATCH] Updated page layout --- index.html | 67 +++++++++++++++++++++++++++++- package.json | 2 +- public/cover.png | Bin 0 -> 4887 bytes public/favicon.png | Bin 0 -> 1923 bytes public/title.svg | 37 +++++++++++++++++ public/vite.svg | 1 - src/App.css | 7 ---- src/App.jsx | 12 +++--- src/IconList.jsx | 2 +- src/assets/react.svg | 1 - src/icons.json | 4 +- src/index.css | 96 +++++++++++++++++++++++++++++++++++-------- 12 files changed, 192 insertions(+), 37 deletions(-) create mode 100644 public/cover.png create mode 100644 public/favicon.png create mode 100644 public/title.svg delete mode 100644 public/vite.svg delete mode 100644 src/assets/react.svg diff --git a/index.html b/index.html index 4e2cbfd..f362142 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,74 @@ + + Pixel Icons - -
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GitHub + +
+
+
+ diff --git a/package.json b/package.json index 6dc6f42..dddffa8 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vite build", + "build": "vite build --base=./", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, diff --git a/public/cover.png b/public/cover.png new file mode 100644 index 0000000000000000000000000000000000000000..2aba3377ea9b2507e79863fd7477bd5527673e87 GIT binary patch literal 4887 zcmeHLX;ji#6#uI=Qkqyz8Kq%)#%e4yu`HD=hsvU8ogCXJ7f20ADTzRI%0vrw+Dt^~ zl$qmk%j1HCXvKu7AU3pULTDzmkV@o&NY39mXFk-KZ}VZk@Zp_z&Rg!g@4er>_jhl` zPVD9x)8|hI0AR+JQ1os9m~s~YY!e~2;K=>OdIzwZb|N&K0ss!PCY#NlYUVfq%xd0( z-mv#{{zr8%`R5V06ocK2bTsX!f z?Qs*){IoDm;COzX^PJ_G=%>M$_o2~{nRB<_Pw16aYw{l?qPoI_nGo?pvL~h3IJ^ z;I5_C#n#ubV#8`FR##wkjQ>4MplZ670Kna7viEWXVtHFsacdX?cQ1kFiLueI1!GSK zeXh&g9XtlX6T?IKLqgnJR}_2`mS}0tr!Vu?)K)VX?+jVu!OllUFBf=xpMf`$>L$9i zWT31hoV(z;w!fUbaKD;*?34?(_x>IMpEf4lmJ?9q4d#S6Gjf2Jl+aUkk+8aAyc4zK!FHs7G^U9Z6Wey!RpTph zP&JIiGWuYMRq__)FM*#LYjpjkj4{i|Cj5!mnR9J7xv zeMzB`#s`O`!&UaH?R#FT)HT9Pa{qHSC+6V21e0DETu$Z(nEH#a43tjZFQ`-H3lf~K z7y|)fv#@FO?e&aHNXc79o>`ZkZ|auF1GDS<|7e4*N|>*isXW-7B@R1qh?a&Su8tQY zt5^G%%89ZJ;m~LGB_6Abn%2eL+@^ZCj9Vk3G@5yd&M~MS6eEJbZeCyJ0xDS8Pln|^do!;U1s<$Ul z@pzQYIePMftWJGzF~0BSjm!)lRadDvXJ!$gD&sY-=2ex@B(k@Z!H#&(OkMx@Q)OXa zBnGM>KVRq@i3dMGbaJDtWt0&4uv~5vP&dJsiA*20%X}qO_GuC(59lZvhe5vqj=#n3 zAK>IRk)ofsrp|84$;s9jZ)+xZiYe$?zco>U@^oUt1e-H0+p-HbQeX;m(c%th>Q_;z zM3OSxVjeR+`>>#^0Ex%epFU|SEcn1>F@1tijRv?9Crq?dylBX6UaM&Da=6I4&a5Q;j-aUcr+Nb9$y?Yo5N%KAz^e?#JFleW~Yig}63I zu=3o=2&wE7W^>b>$H%!PC9H~a5?bvu(N|#K^Q^)tnL+gMWX0WpN_0q6UXZh^AiQMxRh!HSh%Q{A!~Fh!f_VJiP9sc^awtTHFiPj)kXmjb%)OTN))L15 cP|$flp)Q0{>)7i#U_1i0Y{a6=LynyN3*isG*#H0l literal 0 HcmV?d00001 diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..6e230f5394e533376fde3cb7c66582db5db5b433 GIT binary patch literal 1923 zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2I0V&B6*NBqf{Irtt#G+IN$CUh} zR0Yr6#Prml)Wnp^!jq{s3=Hh5o-U3d6}R5p*qD3UL8Rf~WJmE=S3E+Q(is^)u{~jt zQ=F-w9dJiQ@}O{svP41lf#+daF)9HoW8QkTI(~@T$FC5vznuLaLogH2LQ+A361Vn> z>n|(vnESu)yQedMPSMowMWJ!K4=6t?GT%HoEl)~&#Vy4TImwk)?lDVaKkT-glKy_i z%-Pb~3=EF!3@ow?0woL%7Z`yE!G{Pz`EVs5KFzcMt;A_-L&2;Qhv)V^mw)=z_Cv@1 zQ=i33w#od-lVj@Nu616ZVqc(@z?YY`+WyiN`||ci{@QUx^V43Rr*ZeJlV(hdf5)Kk zf}vpnGeZ*}1BVp|A@~p>2p^#Y$VVulvKEjlu-p2SG=Ki#+e)#mORb9Z+hQjImkwO)T^ys4u`k9c&# zH2G=l_r+$+8Zt!_FewW7152mZYskxbYG3^u7#X@Z22XLWQuG3u;pyt=@W B(D?uW literal 0 HcmV?d00001 diff --git a/public/title.svg b/public/title.svg new file mode 100644 index 0000000..4b0627e --- /dev/null +++ b/public/title.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.css b/src/App.css index 610b6f7..044594b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,16 +1,9 @@ #root { width: 100%; - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-size: 9pt; } input#search { - font-size: 1em; - padding: 0.5em; width: 100%; - box-sizing: border-box; } #display-options { diff --git a/src/App.jsx b/src/App.jsx index f6e4a2d..d55005d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,5 @@ -import { useRef, useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import { useSelector, useDispatch } from 'react-redux' +import { useEffect, useRef } from 'react' +import { useDispatch } from 'react-redux' import { setQuery } from './app/searchSlice' import { setShowName } from './app/displaySlice' import { IconList } from './IconList' @@ -20,9 +18,13 @@ function App() { dispatch(setShowName(checkShowName.current.checked)) } + useEffect(() => { + inputSearch.current.focus() + }) + return ( <> - +
diff --git a/src/IconList.jsx b/src/IconList.jsx index 046e6b4..10acedb 100644 --- a/src/IconList.jsx +++ b/src/IconList.jsx @@ -38,7 +38,7 @@ export const IconList = function () {
    { icons.map( (filename, index) => (
  • launchDownload(filename) }> - +
    { showName ? filename.replace('.svg', '') : '' }
    • ) ) } diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons.json b/src/icons.json index 745d33e..8e36208 100644 --- a/src/icons.json +++ b/src/icons.json @@ -65,7 +65,7 @@ "instagram.svg": [ "instagram", "logo", "purple", "magenta" ], "key.svg": [ "key", "ui-icon", "yellow" ], "lock.svg": [ "lock", "ui-icon", "yellow", "orange" ], - "moon.svg": [ "moon", "ui-icon", "yellow" ], + "moon.svg": [ "moon", "ui-icon", "yellow", "dark" ], "nasilemak.svg": [ "nasilemak", "food", "green" ], "paper-bag.svg": [ "paper-bag", "ui-icon", "pink" ], "paste.svg": [ "paste", "ui-icon", "cut", "copy" ], @@ -84,7 +84,7 @@ "sound-low.svg": [ "sound-low", "ui-icon", "yellow" ], "sound-mute.svg": [ "sound-mute", "ui-icon", "yellow" ], "spotify.svg": [ "spotify", "logo", "green" ], - "sun.svg": [ "sun", "ui-icon", "yellow" ], + "sun.svg": [ "sun", "ui-icon", "yellow", "light" ], "tehtarik.svg": [ "tehtarik", "teh tarik","drink", "beverage", "brown" ], "tiktok.svg": [ "tiktok", "logo", "douyin", "cyan", "magenta" ], "twitter-detailed.svg": [ "twitter-detailed", "logo", "bird", "blue" ], diff --git a/src/index.css b/src/index.css index 42ac5f3..fbd0adb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,11 +1,13 @@ :root { + font-size: 9px; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; + --font-color: rgba(255, 255, 255, 0.87); + --background-color: #242424; + color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; @@ -14,27 +16,87 @@ -webkit-text-size-adjust: 100%; } +[data-theme="light"] { + --font-color: #213547; + --background-color: #ffffff; +} + body { margin: 0; - display: flex; - min-width: 320px; + /* display: flex; */ + padding: 0; + /* min-width: 320px; */ min-height: 100vh; + color: var(--font-color); + background-color: var(--background-color); +} + +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); +} + +#wrapper { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + font-size: 9pt; +} + +header { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 1rem; + /* line-height: 3.2rem; */ +} + +#site-title { + height: 30px; + width: auto; + fill: currentColor; + margin: 36px 0; } h1 { font-size: 3.2em; - line-height: 1.1; + line-height: 1; } -/* @media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} */ +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; +} + +img.theme-icon { + width: 1em; + height: 1em; + vertical-align: middle; +} + +.ms-auto { + margin-left: auto +} + +@media (prefers-color-scheme: light) { + +}