changed color of share icon

royalfig · Jul 27, 2021 · 4e3a74a · 4e3a74a
1 parent f7fbcdd
commit 4e3a74a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 24 deletions.
diff --git a/assets/built/app.css b/assets/built/app.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smart",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "An elegant Ghost theme",
   "main": "index.js",
   "engines": {

diff --git a/src/scss/components/_share.scss b/src/scss/components/_share.scss
@@ -4,6 +4,28 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins';
 
+%svg {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.5rem;
+  border-radius: variables.$radius;
+  @include mixins.transition(background-color);
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: transparent;
+    @include mixins.color-map(stroke, text2);
+    @include mixins.transition(stroke);
+  }
+
+  @media (min-width: variables.$laptop) {
+    width: 1.8rem;
+    height: 1.8rem;
+    padding: 0.36rem;
+  }
+}
+
 .sm-post-share-bar {
   position: fixed;
   bottom: 0;
@@ -27,29 +49,14 @@
   }
 
   &__link {
-    width: 2.5rem;
-    height: 2.5rem;
-    padding: 0.5rem;
-    border-radius: variables.$radius;
-    @include mixins.transition(background-color);
-
+    @extend %svg;
     svg {
-      width: 100%;
-      height: 100%;
-      fill: transparent;
-      @include mixins.color-map(stroke, text2);
-      @include mixins.transition(stroke);
-    }
-
-    @media (min-width: variables.$laptop) {
-      width: 1.8rem;
-      height: 1.8rem;
-      padding: 0.36rem;
+      stroke: var(--secondary);
     }
   }
 
   &__link--twitter {
-    @extend .sm-post-share-bar__link;
+    @extend %svg;
 
     &:hover,
     &:active {
@@ -61,7 +68,7 @@
   }
 
   &__link--facebook {
-    @extend .sm-post-share-bar__link;
+    @extend %svg;
 
     &:hover,
     &:active {
@@ -73,7 +80,7 @@
   }
 
   &__link--linkedin {
-    @extend .sm-post-share-bar__link;
+    @extend %svg;
 
     &:hover,
     &:active {
@@ -85,7 +92,7 @@
   }
 
   &__link--copy {
-    @extend .sm-post-share-bar__link;
+    @extend %svg;
     &:hover,
     &:active {
       @include mixins.color-map(background-color, primary);

diff --git a/src/scss/themes/_dracula_theme.scss b/src/scss/themes/_dracula_theme.scss
@@ -20,6 +20,8 @@
   --four: #61740c;
   --five: #c99618;
   --gradient: linear-gradient(to right top, #02677e, hsl(201, 97%, 15%));
+  --title: var(--surface3);
+  --subtitle: var(--surface2);
 }
 
 // Dark Mode
@@ -40,6 +42,7 @@
   --secondary: #ffb86c;
   --four: #50fa7b;
   --five: #f1fa8c;
-
   --gradient: linear-gradient(to right top, #6272a4, hsl(201, 27%, 71%));
+  --title: var(--text);
+  --subtitle: var(--text4);
 }