refactor: improve contrast ratio

HEIGE-PCloud · Mar 28, 2024 · 5a82b8f · 5a82b8f
1 parent e780356
commit 5a82b8f
Show file tree

Hide file tree

Showing 3 changed files with 474 additions and 236 deletions.
diff --git a/assets/css/_partial/_single/_related.scss b/assets/css/_partial/_single/_related.scss
@@ -2,7 +2,7 @@
     --related-background-color: #f8f8f8;
     --related-background-color-dark: #252627;
     --related-background-color-black: #111111;
-    --related-color: #2d96bd;
+    --related-color: #2D809A;
     --related-color-dark: #a9a9b3;
     --related-color-black: #d9d9d9;
     --related-hover-color: #ef3982;
@@ -23,26 +23,30 @@
         margin-right: 20px;
         background: var(--related-background-color);
         position: relative;
+
         [theme="dark"] & {
             background: var(--related-background-color-dark);
         }
+
         [theme="black"] & {
             background: var(--related-background-color-black);
         }
     }
-    
+
     .related-image {
         @include transition(transform 0.4s ease);
+
         img {
             width: 100%;
             height: 200px;
             object-fit: cover;
         }
+
         &:hover {
             @include transform(scale(1.01));
         }
     }
-    
+
     .related-title {
         position: absolute;
         text-overflow: ellipsis;
@@ -54,23 +58,28 @@
         font-size: 1.25rem;
         line-height: 140%;
     }
-    
+
     .related-title a {
         color: black;
+
         &:hover {
             color: var(--related-hover-color);
         }
+
         [theme="dark"] & {
             color: var(--related-color-dark);
+
             &:hover {
                 color: var(--related-hover-color-dark);
             }
         }
+
         [theme="black"] & {
             color: var(--related-color-black);
+
             &:hover {
                 color: var(--related-hover-color-black);
             }
         }
     }
-}
+}
diff --git a/assets/css/_partial/_single/_showcase.scss b/assets/css/_partial/_single/_showcase.scss
@@ -2,7 +2,7 @@ $showcase-background-color: #f8f8f8;
 $showcase-background-color-dark: #252627;
 $showcase-background-color-black: #111111;
 
-$showcase-color: #2d96bd;
+$showcase-color: #2D809A;
 $showcase-color-dark: #a9a9b3;
 $showcase-color-black: #d9d9d9;
 
@@ -17,9 +17,11 @@ $showcase-hover-color-black: #ffffff;
     display: inline-block !important;
     background: $showcase-background-color;
     position: relative;
+
     [theme="dark"] & {
         background: $showcase-background-color-dark;
     }
+
     [theme="black"] & {
         background: $showcase-background-color-black;
     }
@@ -29,9 +31,11 @@ $showcase-hover-color-black: #ffffff;
     width: 100%;
     margin: 1% 0% 0% 0%;
 }
+
 .column-2 {
     width: 48%;
 }
+
 .column-3 {
     width: 32%;
 }
@@ -66,17 +70,22 @@ $showcase-hover-color-black: #ffffff;
 
 .showcase-title a {
     color: black;
+
     &:hover {
         color: $showcase-hover-color;
     }
+
     [theme="dark"] & {
         color: $showcase-color-dark;
+
         &:hover {
             color: $showcase-hover-color-dark;
         }
     }
+
     [theme="black"] & {
         color: $showcase-color-black;
+
         &:hover {
             color: $showcase-hover-color-black;
         }
@@ -111,8 +120,9 @@ $showcase-hover-color-black: #ffffff;
         margin: 1% 0% 0% 0%;
     }
 }
+
 @media screen and (max-width: 1000px) {
     .column-3 {
         width: 48%;
     }
-}
+}