✨ color upgraded

yuancong-liu · May 7, 2024 · 57f986a · 57f986a
1 parent d8acb7c
commit 57f986a
Show file tree

Hide file tree

Showing 28 changed files with 131 additions and 80 deletions.
diff --git a/next.config.js b/next.config.js
@@ -26,6 +26,7 @@ const nextConfig = {
     prependData: `
       @use '~/styles/utils.scss';
       @use '~/styles/mixins' as *;
+      @use '~/styles/func' as *;
       @use '~/styles/placeholders' as *;
     `,
   },

diff --git a/src/app/blog/[slug]/index.module.scss b/src/app/blog/[slug]/index.module.scss
@@ -9,7 +9,7 @@
 
     &::before {
       margin-right: 3px;
-      color: utils.$color-pink;
+      color: utils.$color-strawberry-foam;
       content: '#';
     }
 
@@ -60,14 +60,14 @@
     flex-shrink: 0;
     width: fit-content;
     padding-left: 30px;
-    border-left: 1px solid utils.$color-pink-light;
+    border-left: 1px solid utils.$color-siesta-sands;
 
     @include sp {
       padding-top: 4px;
       padding-right: 10px;
       padding-left: 0;
       border: 0;
-      border-top: 1px solid utils.$color-pink-light;
+      border-top: 1px solid utils.$color-siesta-sands;
     }
   }
 }

diff --git a/src/app/blog/tags/[tag]/index.module.scss b/src/app/blog/tags/[tag]/index.module.scss
@@ -17,7 +17,7 @@
   //     font-size: 8rem;
   //     font-weight: 600;
   //     line-height: 1;
-  //     color: utils.$color-pink;
+  //     color: utils.$color-strawberry-foam;
   //   }
 
   //   &::before {

diff --git a/src/app/portfolio/index.module.scss b/src/app/portfolio/index.module.scss
@@ -25,10 +25,10 @@
   grid-column: span 4;
   background: linear-gradient(
     30deg,
-    utils.$color-pink,
-    utils.$color-pink-light
+    utils.$color-strawberry-foam,
+    utils.$color-siesta-sands
   );
-  box-shadow: 0 0 20px 0 utils.$color-pink-bd;
+  box-shadow: 0 0 20px 0 utils.$color-strawberry-foam-10;
 
   @include sp {
     grid-column: span 6;
@@ -118,7 +118,7 @@
     font-size: 1.6rem;
     font-weight: 800;
     color: #fff;
-    text-shadow: 0 0 16px utils.$color-navy;
+    text-shadow: 0 0 16px utils.$color-abyssal-night;
     letter-spacing: 0.2rem;
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
   }
@@ -139,9 +139,9 @@
   flex-direction: column;
   grid-column: span 7;
   justify-content: end;
-  color: utils.$color-navy;
+  color: utils.$color-abyssal-night;
   text-align: right;
-  background-color: utils.$color-pink-light;
+  background-color: utils.$color-siesta-sands;
 
   @include sp {
     grid-column: span 6;
@@ -168,7 +168,7 @@
   @extend %glass-effect;
 
   font-size: 2rem;
-  color: utils.$color-navy;
+  color: utils.$color-abyssal-night;
 
   > .numbering {
     padding-inline-end: 16px;
@@ -182,7 +182,7 @@
 
   &.aas {
     grid-column: span 8;
-    background-color: utils.$color-pink;
+    background-color: utils.$color-strawberry-foam;
 
     @include sp {
       grid-column: span 4;
@@ -191,7 +191,7 @@
 
   &.shp {
     grid-column: span 4;
-    background-color: utils.$color-pink-light;
+    background-color: utils.$color-siesta-sands;
 
     @include sp {
       grid-column: span 2;
@@ -200,7 +200,7 @@
 
   &.ksk {
     grid-column: span 4;
-    background-color: utils.$color-pink-light;
+    background-color: utils.$color-siesta-sands;
 
     @include sp {
       grid-column: span 2;
@@ -209,7 +209,7 @@
 
   &.akb {
     grid-column: span 8;
-    background-color: utils.$color-pink;
+    background-color: utils.$color-strawberry-foam;
 
     @include sp {
       grid-column: span 4;

diff --git a/src/components/common/footer/index.module.scss b/src/components/common/footer/index.module.scss
@@ -19,7 +19,7 @@
     font-family: utils.$font-serif;
     font-size: 1.4rem;
     font-weight: 600;
-    color: utils.$color-pink-light;
+    color: utils.$color-siesta-sands;
   }
 
   @include sp {

diff --git a/src/components/common/image/imageWithLoading/index.module.scss b/src/components/common/image/imageWithLoading/index.module.scss
@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   user-select: none;
-  background-color: utils.$color-pink-bd;
+  background-color: utils.$color-strawberry-foam-10;
   backdrop-filter: blur(10px);
 
   > img {

diff --git a/src/components/common/navBar/index.module.scss b/src/components/common/navBar/index.module.scss
@@ -14,11 +14,11 @@
   font-size: 16px;
   font-weight: 600;
   color: #fff;
-  background: utils.$color-pink-bd;
+  background: utils.$color-strawberry-foam-10;
   backdrop-filter: blur(10px);
   border: 1px solid #fff2;
   border-radius: 100px;
-  box-shadow: 0 0 20px 0 utils.$color-pink-bd;
+  box-shadow: 0 0 20px 0 utils.$color-strawberry-foam-10;
   transition: box-shadow 0.3s ease-in-out;
 
   @include sp {
@@ -38,7 +38,7 @@
     width: 40px;
     height: 40px;
     content: '';
-    background: color.adjust(utils.$color-pink, $alpha: 0.5);
+    background: utils.$color-strawberry-foam-60;
     filter: blur(16px);
     opacity: 0;
     transition:
@@ -48,7 +48,7 @@
   }
 
   @include hover {
-    box-shadow: 0 0 30px 0 color.adjust(utils.$color-pink-bd, $alpha: 0.05);
+    box-shadow: 0 0 30px 0 utils.$color-strawberry-foam-30;
 
     &::after {
       opacity: 0.8;
@@ -121,7 +121,7 @@
   }
 
   .nav-item:hover & {
-    text-shadow: 0 0 10px utils.$color-navy;
+    text-shadow: 0 0 10px utils.$color-abyssal-night;
   }
 }
 

diff --git a/src/components/pages/about-me/experienceCard/index.module.scss b/src/components/pages/about-me/experienceCard/index.module.scss
@@ -8,14 +8,14 @@
   background: linear-gradient(
     to right,
     transparent 40%,
-    utils.$color-navy-overlay-50 100%
+    utils.$color-abyssal-night-50 100%
   );
   background-position: 100%;
   background-size: 300%;
   transition: all 0.3s ease-in-out;
 
   > * {
-    text-shadow: 0 0 10px utils.$color-navy-overlay-50;
+    text-shadow: 0 0 10px utils.$color-abyssal-night-50;
     user-select: none;
   }
 

diff --git a/src/components/pages/about-me/introduction/index.module.scss b/src/components/pages/about-me/introduction/index.module.scss
@@ -121,7 +121,7 @@
 
 @layer company {
   .company {
-    box-shadow: inset 0 -1px 0 0 utils.$color-pink;
+    box-shadow: inset 0 -1px 0 0 utils.$color-strawberry-foam;
     transition: all 0.4s ease-in-out;
 
     @include hover {
@@ -131,19 +131,19 @@
 
   @keyframes company-shadow {
     0% {
-      box-shadow: inset 0 -1px 0 0 utils.$color-pink;
+      box-shadow: inset 0 -1px 0 0 utils.$color-strawberry-foam;
     }
 
     50% {
-      box-shadow: inset 0 40px 0 0 utils.$color-pink;
+      box-shadow: inset 0 40px 0 0 utils.$color-strawberry-foam;
     }
 
     51% {
-      box-shadow: inset 0 -40px 0 0 utils.$color-pink;
+      box-shadow: inset 0 -40px 0 0 utils.$color-strawberry-foam;
     }
 
     100% {
-      box-shadow: inset 0 1px 0 0 utils.$color-pink;
+      box-shadow: inset 0 1px 0 0 utils.$color-strawberry-foam;
     }
   }
 }
diff --git a/src/components/pages/blog/blogPageContent/index.module.scss b/src/components/pages/blog/blogPageContent/index.module.scss
@@ -31,7 +31,7 @@
 
     @include sp {
       height: 40px;
-      border-bottom: 1px solid utils.$color-pink;
+      border-bottom: 1px solid utils.$color-strawberry-foam;
     }
 
     &.-checked {

diff --git a/src/components/pages/blog/pageHeader/index.module.scss b/src/components/pages/blog/pageHeader/index.module.scss
@@ -25,7 +25,7 @@
     //   font-size: 8rem;
     //   font-weight: 600;
     //   line-height: 1;
-    //   color: utils.$color-pink;
+    //   color: utils.$color-strawberry-foam;
     // }
 
     // &::before {

diff --git a/src/components/pages/blog/postCard/index.module.scss b/src/components/pages/blog/postCard/index.module.scss
@@ -21,7 +21,7 @@
     transform: rotate(-45deg);
 
     @include sp {
-      text-shadow: -8px -6px utils.$color-pink;
+      text-shadow: -8px -6px utils.$color-strawberry-foam;
       opacity: 1;
     }
   }
@@ -47,12 +47,12 @@
 
     @include hover {
       z-index: 100;
-      background: utils.$color-pink-bd;
+      background: utils.$color-strawberry-foam-10;
       backdrop-filter: blur(2px);
       border: 1px solid #fff2;
       border-radius: 8px;
       box-shadow:
-        -10px 10px 0 0 utils.$color-pink,
+        -10px 10px 0 0 utils.$color-strawberry-foam,
         0 0 20px 0 #fff2;
       transform: translate(10px, -10px);
     }
@@ -84,9 +84,9 @@
       padding: 0 0.5rem;
       margin: 0.3rem 0;
       font-size: 1.2rem;
-      color: utils.$color-navy;
+      color: utils.$color-abyssal-night;
       white-space: nowrap;
-      background-color: utils.$color-pink;
+      background-color: utils.$color-strawberry-foam;
     }
 
     .title {

diff --git a/src/components/pages/blog/postContent/index.module.scss b/src/components/pages/blog/postContent/index.module.scss
@@ -23,7 +23,7 @@
       left: -20px;
       z-index: -1;
       font-family: monospace;
-      color: utils.$color-pink;
+      color: utils.$color-strawberry-foam;
       content: '<h2>';
     }
   }
@@ -39,7 +39,7 @@
       left: -20px;
       z-index: -1;
       font-family: monospace;
-      color: utils.$color-pink;
+      color: utils.$color-strawberry-foam;
       content: '<h3>';
     }
   }
@@ -54,7 +54,7 @@
       left: -20px;
       z-index: -100;
       font-family: monospace;
-      color: utils.$color-pink;
+      color: utils.$color-strawberry-foam;
       content: '<h4>';
     }
   }

diff --git a/src/components/pages/blog/postParts/postBlockquote/index.module.scss b/src/components/pages/blog/postParts/postBlockquote/index.module.scss
@@ -3,7 +3,7 @@
   padding: 0 0 0 60px;
   margin: 20px 0;
   font-style: italic;
-  color: utils.$color-pink-light;
+  color: utils.$color-siesta-sands;
 
   &::before {
     position: absolute;
@@ -14,7 +14,7 @@
     font-style: normal;
     font-weight: 900;
     line-height: 1;
-    color: utils.$color-pink;
+    color: utils.$color-strawberry-foam;
     content: '\“';
   }
 

diff --git a/src/components/pages/blog/postParts/postCode/index.module.scss b/src/components/pages/blog/postParts/postCode/index.module.scss
@@ -9,15 +9,18 @@
 }
 
 .code {
-  background-color: utils.$color-navy-light !important;
+  background-color: transparent !important;
 
   &.-block {
     padding: 20px;
   }
 
   &.-inline {
+    @extend %glass-effect;
+
     padding-inline: 5px;
     font-size: 85%;
+    border-radius: 4px;
   }
 
   @include remove-scrollbar;
@@ -56,7 +59,7 @@
   position: absolute;
   right: 60px;
   padding: 4px 8px;
-  background: utils.$color-navy-overlay-50;
+  background: utils.$color-abyssal-night-50;
   border-radius: 4px;
   opacity: 0;
   translate: 0;

diff --git a/src/components/pages/blog/postParts/postDivider/index.module.scss b/src/components/pages/blog/postParts/postDivider/index.module.scss
@@ -4,7 +4,7 @@
   height: 6px;
   margin: 50px auto;
   overflow: visible;
-  background-color: utils.$color-pink;
+  background-color: utils.$color-strawberry-foam;
   border: 0;
   border-radius: 50%;
 
@@ -15,7 +15,7 @@
     width: 30px;
     height: 2px;
     content: '';
-    background-color: utils.$color-pink;
+    background-color: utils.$color-strawberry-foam;
   }
 
   &::before {

diff --git a/src/components/pages/blog/postParts/postH2/index.module.scss b/src/components/pages/blog/postParts/postH2/index.module.scss
@@ -13,7 +13,7 @@
     margin: auto;
 
     path {
-      fill: utils.$color-pink;
+      fill: utils.$color-strawberry-foam;
     }
   }
 

diff --git a/src/components/pages/blog/postParts/postImage/index.module.scss b/src/components/pages/blog/postParts/postImage/index.module.scss
@@ -17,7 +17,7 @@
     width: 300px;
     height: 300px;
     content: '';
-    background-color: utils.$color-navy-light;
+    background-color: utils.$color-indie-go;
     border-radius: 50%;
     opacity: 0.5;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ @@
         margin: auto;
         path {
-          fill: utils.$color-pink;
+          fill: utils.$color-strawberry-foam;
         }
       }
@@ Expand Down @@