From 015a46c0862719fa4f5dbef581a38ea53520b519 Mon Sep 17 00:00:00 2001 From: dudleycu Date: Mon, 30 Aug 2021 07:01:52 +0000 Subject: [PATCH] made responsive header --- src/TestHeader.js | 9 +++++--- src/icons/MEL.png | Bin 312 -> 0 bytes src/icons/RNG.png | Bin 157 -> 0 bytes src/icons/TEC.png | Bin 157 -> 0 bytes src/style.css | 57 +++++++++++++++++++++++++--------------------- 5 files changed, 37 insertions(+), 29 deletions(-) delete mode 100644 src/icons/MEL.png delete mode 100644 src/icons/RNG.png delete mode 100644 src/icons/TEC.png diff --git a/src/TestHeader.js b/src/TestHeader.js index d9b4c22..3167a67 100644 --- a/src/TestHeader.js +++ b/src/TestHeader.js @@ -5,13 +5,16 @@ function TestHeader() {
 NGSplanner.com
-
) diff --git a/src/icons/MEL.png b/src/icons/MEL.png deleted file mode 100644 index ec0e19b1f425662b36d736fe9ea0a498b3b9ea28..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 312 zcmV-80muG{P)~=2B*6Bp5OW2^E>y3yc_36@reiQg(N%IFru;bES8Yw-FV|KfbUrR4J5+L6v$>1 zKnH^gNWTsepb({4DA5ei4oP-a3HT2rjBoO8yoLT0NGBxOX`$W6dYDu-fnXJfcnf8| z3P_6ilJp1W@QU3~HQgG>s5r@vqRQtPd2M4@lD@^|k0Dlc(!w!jCQ?_}i5mRYxF~+c z_1O6e(ol2z0eW~WrhkJIEEkgZx(?QGhgL|ki;!gZ*e?7(VfY0ZB~*|4q1g`r0000< KMNUMnLSTXupNg&k diff --git a/src/icons/RNG.png b/src/icons/RNG.png deleted file mode 100644 index a8e048f5708f65477fd1a1799ed9153578814bb6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 157 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!P=HT}E0Ffs@*f%1=Z9?vin5jj z`2{mL)HfVhW~wa(6fpI4aSV~Ty!VVDAA^DbljD;+|LboanlVRY+9g9p52LXDheFOA q_Dh`t-i8V{SUytCdwp@~=J@AvjN7aK*)IVaz~JfX=d#Wzp$Pzt2Q(l6 diff --git a/src/icons/TEC.png b/src/icons/TEC.png deleted file mode 100644 index 8581141c64787707ba3becfba841c99919305155..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 157 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJPk>K|E0F&GcL@Z2F4?dY$Y(AI z@(X6DZ`hxybR5XF^>lFzk+{6|>_*-L20Y9M)$9MyjkVxR`JSl!!okrYp00i_>zopr0EB%v2mk;8 diff --git a/src/style.css b/src/style.css index 13085c0..b41e9c1 100644 --- a/src/style.css +++ b/src/style.css @@ -76,30 +76,21 @@ header a:hover { background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); text-decoration: none; } -@media screen and (min-width:390px) and (max-width:860px) { -.headerMenuItem { - display:none; -} -} -@media screen and (max-width:390px) { -.headerMenuItem { - display:none; -} -} .main, header { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,450px)); justify-content: center; + gap: 10px; } .main { margin: 0 10px; - gap: 10px; } header { background-color: rgba(0,0,0,0.5); backdrop-filter: blur(10px); text-align: left; margin: 0; + padding: 0 10px; } .headerWrapper { grid-area: 1 / span 3; @@ -123,11 +114,15 @@ header a { .logo img { height: 40px; } +.logo a { + padding: 0 15px; +} .navigation { text-align: left; font-size: 17px; font-family: "ngs2"; margin-left: 30px; + line-height: 50px; } .navigation a { padding: 0 15px; @@ -136,19 +131,21 @@ header a { display: inline-block; border-color: rgba(255,255,255,0.13); border-style: solid; - border-width: 0 1px 0 0; - line-height: 50px; + border-left-width: 1px; +} +.navigation li:last-child { + border-right-width: 1px; } .rightNav { text-align: right; - line-height: 45px; + line-height: 43px; } .rightNav a { padding: 0 15px; } .rightNav img { height: 40px; - margin-bottom: 4px; + margin-bottom: 5px; clip-path: circle(44%); } .dotMenu { @@ -156,6 +153,25 @@ header a { font-family: "Segoe UI Symbol"; font-size: 24px; } +.miniNav { + display: none; + grid-area: 2 / span 2; + line-height: 45px; + text-align: right; +} +.miniNav span { + display: inline-block; + font-family: "Segoe UI Symbol"; + font-size: 24px; +} +@media screen and (max-width:860px) { + .navigation > ul, .loginNav { + display: none; + } + .miniNav { + display: initial; + } +} .box { /*color: #97e2fc;*/ color:white; @@ -626,12 +642,7 @@ li.selected:hover { overflow-x: hidden; margin: 10px 5px 0 0; padding: 2px; -}/* -@media screen and (min-width:390px) and (max-width:860px) { -.itemlistcontainer { - max-height: 300px; } -}*/ .itemWrapper:hover, .treeList li:hover { background-color: rgba(113,169,189,0.33); outline: 2px solid rgba(54,255,255,0.66); @@ -843,12 +854,6 @@ li.treeListSub:after { max-height: calc(90vh - 150px); min-width: 0; } - -/*@media screen and (min-width:390px) and (max-width:860px) { -.skillTreeContainer { - max-height: 300px; -} -}*/ .skillTreeGrid { display: grid; grid-template-columns: repeat(6, 181px);