style: 일부 syntax 색상 변경

changed syntax: inline code block color, hr margin & color, code block header(traffic light color), heading 2 margin
lja3723 · Apr 7, 2024 · 4031984 · 4031984
1 parent 8fa9d8e
commit 4031984
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 10 deletions.
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -53,6 +53,10 @@ body {
         $factor: 0.23rem;
       }
 
+      @if $i == 2 {
+        padding-top: 2.8rem;
+      }
+
       font-size: 1rem + (5 - $i) * $factor;
     } @else {
       font-size: 1rem;

diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
@@ -42,8 +42,7 @@ html {
 
 .highlighter-rouge {
   color: var(--highlighter-rouge-color);
-  margin-top: 0.5rem;
-  margin-bottom: 1.2em; /* Override BS Inline-code style */
+  margin: 0.5rem 0.2rem 0.9em; /* Override BS Inline-code style */
 }
 
 .highlight {
@@ -276,11 +275,11 @@ div {
         width: $code-dot-size;
         height: $code-dot-size;
         border-radius: 50%;
-        background-color: var(--code-header-muted-color);
+        background-color: var(--code-header-muted-color-1);
         box-shadow: ($code-dot-size + $code-dot-gap) 0 0
-            var(--code-header-muted-color),
+            var(--code-header-muted-color-2),
           ($code-dot-size + $code-dot-gap) * 2 0 0
-            var(--code-header-muted-color);
+            var(--code-header-muted-color-3);
       }
 
       span {

diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
@@ -18,6 +18,7 @@ $footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
 $base-radius: 0.625rem !default;
 $back2top-size: 2.75rem !default;
+$hr-margin-size: 2.5rem !default;
 
 /* syntax highlight */
 

diff --git a/_sass/colors/syntax-dark.scss b/_sass/colors/syntax-dark.scss
@@ -3,14 +3,17 @@
  */
 
 @mixin dark-syntax {
+  /* --- custom dark colors --- */
   --language-border-color: #2d2d2d;
   --highlight-bg-color: #181819;
-  --highlighter-rouge-color: #c9def1;
+  --highlighter-rouge-color: #e87871;
   --highlight-lineno-color: #808080;
   --inline-code-bg: #323238;
   --code-color: #b0b0b0;
   --code-header-text-color: #6a6a6a;
-  --code-header-muted-color: #353535;
+  --code-header-muted-color-1: #EC6A5E;
+  --code-header-muted-color-2: #F4BE4F;
+  --code-header-muted-color-3: #61C454;
   --code-header-icon-color: #565656;
   --clipboard-checked-color: #2bcc2b;
   --filepath-text-color: #cacaca;

diff --git a/_sass/colors/syntax-light.scss b/_sass/colors/syntax-light.scss
@@ -6,12 +6,14 @@
   /* --- custom light colors --- */
   --language-border-color: #ececec;
   --highlight-bg-color: #f6f8fa;
-  --highlighter-rouge-color: #3f596f;
+  --highlighter-rouge-color: #da5950;
   --highlight-lineno-color: #9e9e9e;
-  --inline-code-bg: #f6f6f7;
+  --inline-code-bg: #efeff2;
   --code-color: #3a3a3a;
   --code-header-text-color: #a3a3a3;
-  --code-header-muted-color: #e5e5e5;
+  --code-header-muted-color-1: #EC6A5E;
+  --code-header-muted-color-2: #F4BF4F;
+  --code-header-muted-color-3: #61C554;
   --code-header-icon-color: #c9c8c8;
   --clipboard-checked-color: #43c743;
 

diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
@@ -106,6 +106,11 @@
 
   hr {
     border-color: var(--main-border-color);
+    opacity: .12;
+    border-top: 2px solid;
+    border-radius: 2px;
+    margin-left: $hr-margin-size;
+    margin-right: $hr-margin-size;
   }
 
   /* categories */

diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
@@ -100,6 +100,15 @@
     display: none;
   }
 
+  hr {
+    border-color: var(--main-border-color);
+    opacity: .095;
+    border-top: 2px solid;
+    border-radius: 2px;
+    margin-left: $hr-margin-size;
+    margin-right: $hr-margin-size;
+  }
+
   /* Categories */
   --categories-border: rgba(0, 0, 0, 0.125);
   --categories-hover-bg: var(--btn-border-color);