From bb7fe0cbd69fc854d3fc863b5a70254a78271537 Mon Sep 17 00:00:00 2001
From: padosum <makalu171@gmail.com>
Date: Sun, 1 Jan 2023 19:56:49 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20css=20=EA=B3=B5=ED=86=B5?=
 =?UTF-8?q?=EB=90=9C=20=EC=86=8D=EC=84=B1=20variables=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/styles/global.css | 186 +++++++++++++++++++----------------
 1 file changed, 99 insertions(+), 87 deletions(-)

diff --git a/src/client/styles/global.css b/src/client/styles/global.css
index 929391a..63e5e6d 100644
--- a/src/client/styles/global.css
+++ b/src/client/styles/global.css
@@ -8,7 +8,14 @@
   --shadow-color-7: #404080;
   --shadow-color-8: #888888;
 
+  --color-black-1: #000;
+  --color-white-1: #fff;
+  --color-gray-1: #ccc;
+  --color-gray-2: #f1f5f8;
+  --color-gray-3: #606f7b;
+
   --header-height: 12rem;
+  --sub-header-height: 4.375rem;
   --expand-side-bar-with: 15.625rem;
 }
 
@@ -19,12 +26,13 @@
 }
 
 #app {
-  background-image: linear-gradient(90deg, #ccc 5%, transparent 0), linear-gradient(#ccc 5%, transparent 0);
+  background-image: linear-gradient(90deg, var(--color-gray-1) 5%, transparent 0),
+    linear-gradient(var(--color-gray-1) 5%, transparent 0);
   background-size: 20px 20px;
   background-repeat: repeat;
   overflow: auto;
   display: grid;
-  grid-template-rows: var(--header-height) 4rem auto;
+  grid-template-rows: var(--header-height) var(--sub-header-height) auto;
   grid-template-columns: 0 auto;
   grid-template-areas: 'header header' 'side-bar sub-header' 'side-bar content';
 }
@@ -40,8 +48,8 @@ header {
   justify-content: flex-start;
   width: 100%;
   padding: 0.5rem 4rem 0.5rem 1rem;
-  border-bottom: 1px solid #606f7b;
-  background-color: #fff;
+  border-bottom: 1px solid var(--color-gray-3);
+  background-color: var(--color-white-1);
   min-height: var(--header-height);
 }
 
@@ -66,7 +74,7 @@ header .theme-switcher {
   padding: 0.75rem;
   margin-right: 1rem;
   margin-top: 1rem;
-  background-color: rgba(241, 245, 248, 1);
+  background-color: var(--color-gray-2);
   border-radius: 9999px;
 }
 
@@ -104,8 +112,8 @@ header nav ul > li {
   display: flex;
   flex-direction: column;
   width: var(--expand-side-bar-with);
-  border-right: 1px solid #606f7b;
-  background-color: #fff;
+  border-right: 1px solid var(--color-gray-3);
+  background-color: var(--color-white-1);
 
   transform: translateX(calc(var(--expand-side-bar-with) * -1));
   transition: all 0.7s ease;
@@ -115,11 +123,6 @@ header nav ul > li {
   transform: translateX(0);
 }
 
-.open + .side-bar-dark {
-  opacity: 1;
-  pointer-events: all;
-}
-
 .side-bar-dark {
   position: fixed;
   background-color: rgba(0, 0, 0, 0.2);
@@ -133,23 +136,14 @@ header nav ul > li {
   pointer-events: none;
 }
 
-.side-bar.open .side-bar-close-btn {
+.side-bar.open + .side-bar-dark {
   opacity: 1;
   pointer-events: all;
 }
 
-.side-bar-header {
-  display: grid;
-  grid-template-areas: 'close . collapse';
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid #000;
-  margin-bottom: 2rem;
-}
-
 .side-bar-close-btn {
   font-size: 2rem;
-  border: 1px solid #000;
+  border: 1px solid var(--color-black-1);
   line-height: 1.2rem;
   grid-area: close;
   transition: all 0.7s ease;
@@ -157,12 +151,27 @@ header nav ul > li {
   pointer-events: none;
 }
 
+.side-bar.open .side-bar-close-btn {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.side-bar-header {
+  display: grid;
+  grid-template-areas: 'close . collapse';
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-gray-3);
+  margin-bottom: 2rem;
+  height: var(--sub-header-height);
+  padding: 1.2rem;
+}
+
 .side-bar-header-btn {
   font-size: 1.8rem;
   background-color: transparent;
   display: block;
-  transition: all 0.1s;
-  border: 1px solid #000;
+  transition: all 0.7s ease;
+  border: 1px solid var(--color-black-1);
   line-height: 1.2rem;
   grid-area: collapse;
   opacity: 0;
@@ -196,19 +205,18 @@ header nav ul > li {
   position: relative;
   padding: 0.5rem 2rem;
   margin-bottom: 1.1rem;
-  color: #ccc;
+  color: var(--color-gray-1);
   transition: 0.5s ease;
   height: 100%;
 }
 
 .sub-category-item > a.active {
-  color: var(--shadow-color-7);
+  color: var(--color-gray-3);
 }
 
 .sub-category-item:hover a {
-  color: #000;
-  transition: 0.5s ease;
-  border-left: 2px solid #000;
+  color: var(--color-gray-3);
+  border-left: 2px solid var(--color-gray-3);
 }
 
 .sub-category-item a span {
@@ -221,7 +229,7 @@ header nav ul > li {
 
 .sub-category-item-text {
   margin-left: 1.5rem;
-  transition: opacity 0.6s ease;
+  transition: opacity 0.5s ease;
   opacity: 1;
 }
 
@@ -244,7 +252,7 @@ header nav ul > li {
 }
 
 .side-bar.collapse .main-category > li {
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--color-gray-1);
 }
 
 @media (min-width: 992px) {
@@ -267,34 +275,32 @@ header nav ul > li {
   position: fixed;
   display: flex;
   justify-content: space-between;
-  transition: 0.5s;
+  transition: all 0.7s ease;
   top: var(--header-height);
   left: 0;
   z-index: 1;
-  background-color: rgba(241, 245, 248, 1);
+  background-color: var(--color-gray-2);
   width: 100%;
+  height: var(--sub-header-height);
   font-size: 1.5rem;
+  border-bottom: 1px solid var(--color-gray-3);
 }
 
-.filter-list-item:hover {
-  transition: 0.3s ease;
-  border-bottom: 2px solid #000;
-}
-
-.filter-list-item:hover > * {
-  color: #000;
-}
-
-.filter-list-item:not(:first-child) {
-  color: #ccc;
-}
+@media (min-width: 992px) {
+  .side-bar.collapse ~ .sub-header {
+    width: calc(100% - 6.4rem);
+  }
 
-.filter-list-item.active {
-  color: rgba(4, 13, 44, 0.8);
-}
+  .sub-header {
+    width: calc(100% - var(--expand-side-bar-with));
+  }
+  .side-bar.collapse ~ .sub-header {
+    left: 6.4rem;
+  }
 
-.filter-list-item:first-child {
-  display: flex;
+  .side-bar ~ .sub-header {
+    left: var(--expand-side-bar-with);
+  }
 }
 
 .filter-list {
@@ -311,6 +317,27 @@ header nav ul > li {
   min-width: 2rem;
 }
 
+.filter-list-item.active {
+  color: var(--color-gray-3);
+}
+
+.filter-list-item:first-child {
+  display: flex;
+}
+
+.filter-list-item:hover {
+  transition: 0.3s ease;
+  border-bottom: 2px solid var(--color-gray-3);
+}
+
+.filter-list-item:hover > * {
+  color: var(--color-gray-3);
+}
+
+.filter-list-item:not(.active) {
+  color: var(--color-gray-1);
+}
+
 .filter-list-item-text {
   margin-left: 1.5rem;
   display: none;
@@ -321,21 +348,6 @@ header nav ul > li {
 }
 
 @media (min-width: 992px) {
-  .side-bar.collapse ~ .sub-header {
-    width: calc(100% - 6.4rem);
-  }
-
-  .sub-header {
-    width: calc(100% - var(--expand-side-bar-with));
-  }
-  .side-bar.collapse ~ .sub-header {
-    left: 6.4rem;
-  }
-
-  .side-bar ~ .sub-header {
-    left: var(--expand-side-bar-with);
-  }
-
   .filter-list-item {
     padding: 1rem 2rem;
     min-width: 12rem;
@@ -350,6 +362,18 @@ header nav ul > li {
   }
 }
 
+.achievements-wrapper {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3rem;
+}
+
+.achievements-content {
+  width: 100%;
+}
+
 h1.category-title {
   font-size: 1.8rem;
   font-style: italic;
@@ -368,16 +392,11 @@ h2.category-title {
   margin-top: -180px;
 }
 
-.achievements-wrapper {
-  grid-area: content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 3rem;
-}
-
-.achievements-content {
-  width: 100%;
+.achievement-wrapper {
+  transition-duration: 0.7s, 0.7s;
+  transition-property: transform, opacity;
+  transform: rotateX(0);
+  opacity: 1;
 }
 
 .achievement-wrapper.tilt {
@@ -385,12 +404,6 @@ h2.category-title {
   opacity: 0;
 }
 
-.achievement-wrapper {
-  transition-duration: 0.7s, 0.7s;
-  transition-property: transform, opacity;
-  transform: rotateX(0);
-  opacity: 1;
-}
 .achievement-wrapper dd {
   margin-top: 0.5rem;
   margin-left: 1rem;
@@ -435,7 +448,7 @@ h2.category-title {
 .back {
   padding: 2rem 1rem;
   border: 1px solid rgba(4, 13, 44, 0.8);
-  background-color: #fff;
+  background-color: var(--color-white-1);
   backface-visibility: hidden;
   transition: transform 0.75s, box-shadow 0.5s, background-color 0.5s;
   grid-area: card;
@@ -496,7 +509,7 @@ h2.category-title {
   margin-bottom: 2rem;
   padding: 1rem;
   border: 1px solid rgba(4, 13, 44, 0.8);
-  background-color: #fff;
+  background-color: var(--color-white-1);
   transition: box-shadow 0.5s;
 }
 
@@ -559,7 +572,7 @@ h2.category-title {
   justify-content: space-evenly;
   gap: 1rem;
   border: 1px solid rgba(4, 13, 44, 0.8);
-  background-color: #fff;
+  background-color: var(--color-white-1);
   flex-basis: 13rem;
   flex: 1 1 40%;
 }
@@ -579,10 +592,9 @@ h2.category-title {
 }
 
 .year-status-item-type {
-  font-size: 0.8rem;
   border-radius: 0.25rem;
   padding: 0.125em 0.4em;
-  background-color: rgba(241, 245, 248, 1);
+  background-color: var(--color-gray-2);
   word-break: keep-all;
 }