From ed5892ac941b8465a133344ebe1141124cffa9f2 Mon Sep 17 00:00:00 2001 From: SamTheKorean Date: Sat, 13 Jul 2024 12:32:19 -0400 Subject: [PATCH] feat : implemented styling for each state and refactor the code for better readibility --- components/header.js | 158 ++++++++++++++++++++++++++++++++----------- images/Logo.png | Bin 1316 -> 0 bytes images/close.svg | 3 + images/logo.png | Bin 1316 -> 0 bytes images/logo.svg | 9 +++ images/menu.png | Bin 168 -> 0 bytes images/menu.svg | 3 + 7 files changed, 133 insertions(+), 40 deletions(-) delete mode 100644 images/Logo.png create mode 100644 images/close.svg delete mode 100644 images/logo.png create mode 100644 images/logo.svg delete mode 100644 images/menu.png create mode 100644 images/menu.svg diff --git a/components/header.js b/components/header.js index 2bc418c..976a8f8 100644 --- a/components/header.js +++ b/components/header.js @@ -44,7 +44,7 @@ class Header extends HTMLElement { border-bottom: 1px solid var(--bg-300); background-color: var(--bg-200); - @media only screen and (min-width: 1024px) { + @media only screen and (min-width: 1024px) { z-index: 1000; } } @@ -53,25 +53,17 @@ class Header extends HTMLElement { background-color: var(--bg-100); } - *:focus { - border: 1px solid black; - } - header { display: flex; - margin: 0 27px 0; + margin: 0 27px; justify-content: space-between; align-items: center; @media only screen and (min-width: 768px) { - flex-direction: row !important; - } - - @media only screen and (min-width: 1024px) { width: 80%; margin: 0 auto; + flex-direction: row !important; } - } header.vertical { @@ -80,8 +72,6 @@ class Header extends HTMLElement { .buttons-container { display: none; - align-items: center; - column-gap: 40px; @media only screen and (min-width: 768px) { display: flex !important; @@ -98,6 +88,14 @@ class Header extends HTMLElement { align-items: center; row-gap: 18px; margin-top: 30px; + + @media only screen and (min-width: 768px) { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 40px; + margin-top: 0; + } } a { @@ -105,10 +103,11 @@ class Header extends HTMLElement { gap: 10px; align-items: center; text-decoration: none; + padding: 10px 20px; span { display: none; - + @media only screen and (min-width: 768px) { display: inline; font-size: 16px; @@ -119,15 +118,39 @@ class Header extends HTMLElement { } } - img { + svg { width: 41px; height: 20.5px; - + @media only screen and (min-width: 1024px) { width: 45px; height: 22.5px; } } + + &:focus { + outline: 3px solid #846de9; + outline-offset: 2px; + border-radius: 10px; + } + + &:focus-visible { + outline: 3px solid #24eaca; + outline-offset: 2px; + border-radius: 10px; + } + + &:hover { + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + } + + &:active svg path { + fill: #160b46; + } + + &:active span { + color: #846de9; + } } button { @@ -137,24 +160,45 @@ class Header extends HTMLElement { display: flex; align-items: center; cursor: pointer; - padding: 0; - width: 18px; - height: 18px; + width: 48px; + height: 40px; + + &:focus { + outline: 3px solid #846de9; + outline-offset: 2px; + border-radius: 10px; + } + + &:focus-visible { + outline: 3px solid #24eaca; + outline-offset: 2px; + border-radius: 10px; + } + + &:hover { + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + } + + &:active svg path { + fill: #846de9; + } @media only screen and (min-width: 768px) { display: none; } } - button > img { + button > svg { + width: 18px; + height: 17px; + top: 12px; + left: 14px; position: absolute; - top: 0; - left: 0; opacity: 1; transition: opacity 200ms ease-in-out; } - button > img.hide { + button > svg.hide { opacity: 0; } @@ -171,33 +215,67 @@ class Header extends HTMLElement {
- logo + 달레 스터디
- 참여방법 안내 5?GP)K~#7FwO3te z990xP=iWpLedyHZY9`M&Bl0*~~L?!zm&L^ZYW+ck#vpwM%ht7C5+^4hz+G4QQxl76aZr;46 zKqcyp9i1(h1T?H!=7YTgi%zU(E_}HI4F1o)@tNnnIk_|r?Er1%^TyK`E+y6N|2-l| z@uS^XX0Mj0pmT_!YBvtYDI|Bp016M@7-Zj?Sn}RJ{dd#g>w>ntym8>-#pEpz*H~?e z0UNlk@ZWlKiO1_R`vxOt&I2{M)i~Z0|Hz~uaN-{=dx;O1ZD=4^3+#7SYIef-5l@BR?H^l3A zNrfmlE%H6_{gMPoef;j8Ttm?P3>JKd3q=W5wyU%dE7gky=yv#+b_e&n&_E8Jy^`g* zHiiHI1yOA3)m~?-v4PQd>A3C z0iix?u&C6r^8*7eG${vXuXw@-22%n6;6FA!)>mvaFL7eo#t^)o8xjS)d0+yI!Vl8N zPnE!9?>`rk(#Mp3S!NXU1W@D%U*vw>-#l0?(b=muGn*}&8hG38^k~m;D{H)SY}sb! z$JsrH*gebEX7&k|a7~T~zOX8hRZRy(M;7~@jI|0_i;xsq_qnhFI?$q=e*aNtr&=2k zhzsja+46*4LInLG)9kCM(El_u9BdVnaE;Hf()sg!1I1>PML9QvK(87H3W{I7vbP&r zkfSI5vLL_+Di~)UH$){sOKh(&@{y2~eeBaxs3b?bt%0KtP<5BkF9o{_=6-pqeh@~# zDcD>FwQG>F_S zI$bY%2!p;fe>*F?plDj0M(LJ(5PvLV4EsPfyO@OAe&$rF ze!tzYpDyQT*E*L^laxtTz|{`AHrq&%E)eS?WiVfF-AYfwe@i4GBT?ltN4uKpvzz`1 za0kN-5@YZt;6n^tRU4cazW*aaicF}qpos4DNW)^Xz)eZ|i+HySEegT|kmrB6Jj?D9 z;nc}hlv!q1Ivd%WgEq;wK|l9%!4$X1E0tZLgX;QRWZ%QkM%nh~me46O+oDT@0E&+Q0000 + + diff --git a/images/logo.png b/images/logo.png deleted file mode 100644 index bc55df2f1baf2da3f5e1a2a609cfa69318c713e8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1316 zcmV+<1>5?GP)K~#7FwO3te z990xP=iWpLedyHZY9`M&Bl0*~~L?!zm&L^ZYW+ck#vpwM%ht7C5+^4hz+G4QQxl76aZr;46 zKqcyp9i1(h1T?H!=7YTgi%zU(E_}HI4F1o)@tNnnIk_|r?Er1%^TyK`E+y6N|2-l| z@uS^XX0Mj0pmT_!YBvtYDI|Bp016M@7-Zj?Sn}RJ{dd#g>w>ntym8>-#pEpz*H~?e z0UNlk@ZWlKiO1_R`vxOt&I2{M)i~Z0|Hz~uaN-{=dx;O1ZD=4^3+#7SYIef-5l@BR?H^l3A zNrfmlE%H6_{gMPoef;j8Ttm?P3>JKd3q=W5wyU%dE7gky=yv#+b_e&n&_E8Jy^`g* zHiiHI1yOA3)m~?-v4PQd>A3C z0iix?u&C6r^8*7eG${vXuXw@-22%n6;6FA!)>mvaFL7eo#t^)o8xjS)d0+yI!Vl8N zPnE!9?>`rk(#Mp3S!NXU1W@D%U*vw>-#l0?(b=muGn*}&8hG38^k~m;D{H)SY}sb! z$JsrH*gebEX7&k|a7~T~zOX8hRZRy(M;7~@jI|0_i;xsq_qnhFI?$q=e*aNtr&=2k zhzsja+46*4LInLG)9kCM(El_u9BdVnaE;Hf()sg!1I1>PML9QvK(87H3W{I7vbP&r zkfSI5vLL_+Di~)UH$){sOKh(&@{y2~eeBaxs3b?bt%0KtP<5BkF9o{_=6-pqeh@~# zDcD>FwQG>F_S zI$bY%2!p;fe>*F?plDj0M(LJ(5PvLV4EsPfyO@OAe&$rF ze!tzYpDyQT*E*L^laxtTz|{`AHrq&%E)eS?WiVfF-AYfwe@i4GBT?ltN4uKpvzz`1 za0kN-5@YZt;6n^tRU4cazW*aaicF}qpos4DNW)^Xz)eZ|i+HySEegT|kmrB6Jj?D9 z;nc}hlv!q1Ivd%WgEq;wK|l9%!4$X1E0tZLgX;QRWZ%QkM%nh~me46O+oDT@0E&+Q0000 + + + + + + + + diff --git a/images/menu.png b/images/menu.png deleted file mode 100644 index 292ddb7a79fce7bb908f67db7d8a637c784ce8ec..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 168 zcmeAS@N?(olHy`uVBq!ia0vp^LO?9Y!3HERME&^*q&N#aB8wRqxP?KOkzv*x37{Zj zage(c!@6@aFM%AEbVpxD28NCO+w_2$>TeBht( z0kuR&xHy4LVhs43|Nlk~pH#V>)IW734{!4# + +