Ability to edit Scroll-to-Top icon colors, for #75

1bl4z3r · Aug 24, 2024 · 294b1af · 294b1af
1 parent 9c4e70f
commit 294b1af
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
@@ -5,4 +5,10 @@ $light-grey: #494f5c;
 $dark-grey: #3B3E48;
 $highlight-grey: #7d828a;
 $midnightblue: #2c3e50;
-$typewriter: hsl(172, 100%, 36%);
+$typewriter: hsl(172, 100%, 36%);
+
+// Scroll to Top Default colors
+
+$stt-stroke:#CCC;
+$stt-circle:#3b3e48;
+$stt-arrow:#018574;
diff --git a/assets/scss/_scroll.scss b/assets/scss/_scroll.scss
@@ -1,16 +1,32 @@
-.scroll-up{
+.scroll-up {
+    .scroll {
+        #st-ring {
+            stroke: $stt-stroke;
+        }
+
+        #st-circle {
+            fill: $stt-circle;
+        }
+
+        #st-arrow {
+            fill: $stt-arrow;
+        }
+    }
+
     position: fixed;
     bottom: 10%;
     right: 2%;
     z-index: 1;
     opacity: 0;
     transition: all 0.5s ease;
 }
-.hide{
+
+.hide {
     opacity: 0;
     transform: translateY(20px);
 }
-.show{
+
+.show {
     opacity: 1;
     transform: translateY(0);
-  }
+}
diff --git a/layouts/partials/svg.html b/layouts/partials/svg.html
@@ -51,7 +51,7 @@
 {{- else if (eq .name "author") -}}
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-feather"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>
 {{- else if (eq .name "scrollup") -}}
-<svg xmlns="http://www.w3.org/2000/svg" fill="#3B3E48" width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" id="up-circle" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color" stroke="#3B3E48" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.9600000000000002"><circle id="primary" cx="12" cy="12" r="10" style="fill: #3B3E48;"></circle><path id="secondary" d="M15,14a1,1,0,0,1-.71-.29L12,11.41l-2.29,2.3a1,1,0,0,1-1.42-1.42l3-3a1,1,0,0,1,1.42,0l3,3a1,1,0,0,1,0,1.42A1,1,0,0,1,15,14Z" style="fill: #018574;"></path></g><g id="SVGRepo_iconCarrier"><circle id="primary" cx="12" cy="12" r="10" style="fill: #3B3E48;"></circle><path id="secondary" d="M15,14a1,1,0,0,1-.71-.29L12,11.41l-2.29,2.3a1,1,0,0,1-1.42-1.42l3-3a1,1,0,0,1,1.42,0l3,3a1,1,0,0,1,0,1.42A1,1,0,0,1,15,14Z" style="fill: #018574;"></path></g></svg>
+<svg class="scroll" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="-2.4 -2.4 28.8 28.8" stroke-width="0"><g id="st-ring" stroke-linecap="round" stroke-linejoin="round" stroke-width=".96"><circle cx="12" cy="12" r="10"/><path d="M15 14a1 1 0 0 1-.71-.29L12 11.41l-2.29 2.3a1 1 0 0 1-1.42-1.42l3-3a1 1 0 0 1 1.42 0l3 3a1 1 0 0 1 0 1.42A1 1 0 0 1 15 14"/></g><circle id="st-circle" cx="12" cy="12" r="10"/><path id="st-arrow" d="M15 14a1 1 0 0 1-.71-.29L12 11.41l-2.29 2.3a1 1 0 0 1-1.42-1.42l3-3a1 1 0 0 1 1.42 0l3 3a1 1 0 0 1 0 1.42A1 1 0 0 1 15 14Z"/></svg>
 {{- else if (eq .name "discord") -}}
 <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M8.82889 11.203C7.86239 11.203 7.09937 12.0508 7.09937 13.0852C7.09937 14.1195 7.87935 14.9673 8.82889 14.9673C9.79538 14.9673 10.5584 14.1195 10.5584 13.0852C10.5754 12.0508 9.79538 11.203 8.82889 11.203ZM15.0178 11.203C14.0514 11.203 13.2883 12.0508 13.2883 13.0852C13.2883 14.1195 14.0683 14.9673 15.0178 14.9673C15.9843 14.9673 16.7474 14.1195 16.7474 13.0852C16.7474 12.0508 15.9843 11.203 15.0178 11.203Z" fill="currentColor"/><path d="M14.8477 18.3649C14.8874 18.4483 14.9381 18.5296 15.0005 18.6075C15.3663 19.0644 15.7387 19.5135 15.8832 19.687C16.1242 19.9764 16.4855 20.1329 16.8553 20.117C20.6839 19.9522 22.4053 17.6063 22.7126 17.1342C22.8526 16.919 22.9029 16.6887 22.9023 16.4867C22.8862 11.0873 20.6126 6.69288 20.3618 6.22299C20.2686 6.04849 20.1448 5.9213 20.0223 5.83024C17.6324 4.05442 15.3398 3.89258 14.7987 3.87945C14.4248 3.87037 14.1018 4.039 13.8908 4.28019C13.7833 4.40298 13.7069 4.53817 13.659 4.67843C12.4808 4.5498 11.3488 4.5684 10.3271 4.681C10.2848 4.54257 10.2137 4.40813 10.1111 4.28494C9.90289 4.03513 9.58304 3.87239 9.22517 3.87894C8.72884 3.88801 6.40341 4.02781 3.9777 5.83024C3.85516 5.9213 3.73139 6.04849 3.63825 6.22299C3.38742 6.69289 1.11365 11.0876 1.09774 16.4873C1.09715 16.6871 1.14634 16.9155 1.28416 17.1296C1.58866 17.6027 3.29601 19.9515 7.12649 20.1169C7.50079 20.1331 7.86486 19.9726 8.10512 19.6794C8.2521 19.5 8.63516 19.0311 9.00416 18.5683C9.06865 18.4874 9.12057 18.4028 9.16075 18.316C9.32759 18.3546 9.49869 18.391 9.67405 18.4248L9.67405 18.4248L9.68004 18.426C11.0465 18.681 12.6626 18.7747 14.4312 18.4443C14.5698 18.4206 14.7086 18.3942 14.8477 18.3649Z" stroke="currentColor" stroke-width="2"/></svg>
 {{- else if (eq .name "etsy") -}}