Style comments using color variables

mhdzli · Jan 19, 2021 · 78e351e · 78e351e
1 parent 355e85c
commit 78e351e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/src/_sass/main.scss b/src/_sass/main.scss
@@ -16,6 +16,7 @@ $bold-weight: 700;
 $text-base-color: #434648;
 $text-link-blue: #003fff;
 $text-link-blue-active: #0036c7;
+$box: #c6f0e4;
 
 $black: #0d122b;
 $light: #ececec;
@@ -27,6 +28,7 @@ $white: #fff;
 $dark-text-base-color: #c7bebe;
 $dark-text-link-blue: #ff5277;
 $dark-text-link-blue-active: #ff2957;
+$dark-box: #303030;
 
 $dark-black: #131418;
 $dark-white: #eaeaea;

diff --git a/src/_sass/simorq/_base.scss b/src/_sass/simorq/_base.scss
@@ -134,6 +134,15 @@ figcaption {
   text-align: center;
 }
 
+.button,
+button {
+  padding: 1rem;
+  border-radius: 10px;
+  border-width: 0;
+  color: $text-base-color;
+  background-color: $box;
+}
+
 // List
 ul {
   list-style: none;

diff --git a/src/_sass/simorq/_dark.scss b/src/_sass/simorq/_dark.scss
@@ -67,6 +67,12 @@ body[data-theme="dark"] {
     text-shadow: 0 1px 0 $dark-black;
   }
 
+  .button,
+  button {
+    color: $dark-text-base-color;
+    background-color: $dark-box;
+  }
+
   // horizontal rule
   hr {
     border-color: $dark-light;

diff --git a/src/_sass/simorq/_mastodon.scss b/src/_sass/simorq/_mastodon.scss
@@ -1,17 +1,9 @@
 .mastodon-comment {
-  background-color: #c6f0e4;
+  background-color: $box;
   border-radius: 10px;
   padding: 15px;
   margin-bottom: 1rem;
   display: flex;
-  .article-content {
-    .button {
-      padding: 1rem;
-      border-radius: 4px;
-      border-width: 0;
-      color: #c6f0e4
-    }
-  }
   .author {
     padding-top: 0;
     display: flex;