edit styles

5 files changed, 66 insertions, 78 deletions

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 5207f70..2b667fc 100644
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -48,7 +48,7 @@ blockquote {
     top: 0;
     bottom: 0;
     left: 0;
-    background: $theme;
+    background: var(--theme);
   }
   p{
     padding-left: 0.5rem 0 !important;
diff --git a/assets/scss/_components.scss b/assets/scss/_components.scss
index d17ecd2..92f43a0 100644
--- a/assets/scss/_components.scss
+++ b/assets/scss/_components.scss
@@ -17,7 +17,7 @@
     transform-origin: bottom;
   }
   &_meta{
-    padding: 10px 20px 20px;
+    padding: 10px 1.25rem 1.25rem;
     background: var(--bg);
     color: var(--text);
     position: relative;
@@ -85,6 +85,8 @@
     @media screen and (min-width: 769px) {
       &.center_y{
         transform: translateX(-1rem);
+        padding-left: 1.25rem;
+        padding-right: 0;
       }
     }
   }
@@ -105,9 +107,9 @@
   margin: 1rem 0 1.5rem;
   display: inline-block;
   padding: 7.5px 12.5px;
-  background-color: $theme;
-  box-shadow: 0 1rem 4rem rgba($dark,0.5);
-  color: $light;
+  background-color:var(--theme);
+  box-shadow: 0 1rem 4rem rgba(0,0,0,0.5);
+  color: var(--light);
   text-align: center;
   cursor: pointer;
   border-radius: 0.25rem;
@@ -117,7 +119,7 @@
 }
 .point{
   margin-right:15px;
-  color:$theme;
+  color: var(--theme);
 }
 @media screen and (min-width: 769px){
   .nav-menu a{
@@ -138,7 +140,7 @@
   margin: 1.5rem 0;
   border-radius: 1rem;
   background-color: var(--bg);
-  box-shadow: 0 1rem 4rem rgba($dark,0.17);
+  box-shadow: 0 1rem 4rem rgba(0,0,0,0.17);
   iframe{
     left:0;
     top:0;
@@ -159,8 +161,8 @@
   &::before, &::after {
     content: "";
     position: absolute;
-    background: $theme;
-    color: $light;
+    background:var(--theme);
+    color: var(--light);
     opacity: 0;
     transition: opacity 0.25s ease-in;
   }
@@ -196,7 +198,7 @@
     flex-direction: column;
   }
   a {
-    color: $theme;
+    color:var(--theme);
     opacity: 0.8;
     transition: opacity 0.3s ease-in-out;
     &:hover {
@@ -208,48 +210,45 @@
 
 .color {
   &_mode {
-    width: 3rem;
+    // width: 3rem;
     height: 1.5rem;
-    background-color: var(--theme);
-    border-radius: 1rem;
     display: grid;
+    grid-template-columns: 1fr 3rem;
     align-items: center;
-    cursor: pointer;
     margin: 5rem 1.5rem 0;
+  }
+  &_choice {
+    width: 3rem;
+    background-color: var(--theme);
+    border-radius: 1rem;
+    height: 1.5rem;
+    cursor: pointer;
+    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); 
+    position: relative;
     position: relative;
     overflow: hidden;
     box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.15);
-    &::before, &::after {
+    &::after {
       content: "";
-      z-index: 1;
       position: absolute;
       height: 1rem;
       width: 2rem;
       background-size: contain;
       background-repeat: no-repeat;
-      // background-position: center;
     }
-    &::before {
+    &::after {
+      width: 1.5rem;
+      height: 1.5rem;
+      background-color: var(--light);
+      border-radius: 50%;
       background-image: url($night-icon-path);
-      left: 0.25rem;
+      z-index: 2;
     }
-    &::after {
-      background-image: url($day-icon-path);
-      right: 0.25rem;
-      background-position: right;
+    &:checked {
+      &::after {
+        background-image: url($day-icon-path);
+        transform: translateX(1.5rem);
+      }
     }
   }
-  &_choice {
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-    background-color: var(--light);
-    // opacity: 0.3;
-    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); 
-    position: relative;
-    z-index: 3;
-  }
-  &_live &_choice { 
-    transform: translateX(1.5rem);
-  }
 }
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 9ed80ab..8337712 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -59,10 +59,10 @@
       display:block;
       padding:12.5px 25px;
       margin-bottom:2px;
-      border-bottom:1px solid rgba($dark, 0.04);
+      border-bottom:1px solid rgba(0,0,0,0.04);
       transition:color 0.25s ease-in-out;
       &:hover{
-        color: $theme;
+        color: var(--theme);
       }
     }
   }
diff --git a/assets/scss/_posts.scss b/assets/scss/_posts.scss
index 3f7c819..a5fdd82 100644
--- a/assets/scss/_posts.scss
+++ b/assets/scss/_posts.scss
@@ -42,7 +42,7 @@
   }
   &_inner {
     a{
-      color: $theme;
+      color: var(--theme);
       transition: all 0.3s;
       &:hover {
         opacity: 0.8;
@@ -95,15 +95,15 @@
     font-weight: 500;
     display: inline-grid;
     grid-template-columns: auto 1fr;
-    background-color: $light;
+    background-color: var(--light);
     padding: 0;
     align-items: center;
     border-radius: 0.3rem;
-    color: $dark;
+    color: var(--dark);
     text-transform: capitalize;
     a {
       &:hover {
-        color: $theme;
+        color: var(--theme);
         text-decoration: underline;
         opacity: 0.9;
       }
@@ -116,8 +116,8 @@
   &_tag {
     font-size: 0.75rem !important;
     font-weight: 500;
-    background: $theme;
-    color: $light;
+    background: var(--theme);
+    color: var(--light);
     padding: 0.25rem 0.67rem !important;
     text-transform: uppercase;
     display: inline-flex;
@@ -127,10 +127,10 @@
     margin:5px 0;;
   }
   &_time {
-    background: $theme;
+    background: var(--theme);
     display: inline-grid;
     padding: 0.2rem 0.75rem;
-    color: $light;
+    color: var(--light);
   }
   &_thumbnail {
     width: 100%;
@@ -141,7 +141,7 @@
     display: grid;
     margin: 2.25rem auto 1rem;
     text-align: center;
-    color: $theme;
+    color: var(--theme);
     box-shadow: 0 1rem 3rem -1rem rgba(0,0,0,0.15);
     text-transform: uppercase;
     &, span {
@@ -190,7 +190,7 @@
     margin-left: 5px;
     margin-right: 5px;
     background-color: var(--accent);
-    color: $light;
+    color: var(--light);
     border-radius: 50%;
     background-size: 50%;
     background-position: center;
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index b23ddf0..8b6ab3b 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -1,12 +1,5 @@
-$padding: 10px;
-$margin: 25px;
-$theme: #04a763;
-$light: #fff;
-$dark: #000;
-$text: #343434;
-$linear: linear-gradient(to right bottom, darken($theme, 10%), $theme);
-html {
-  --color-mode: 'light';
+:root {
+  --color-mode: 'lit';
   --light: #fff;
   --dark: #000;
   --gray: #f5f5f5;
@@ -16,27 +9,23 @@ html {
   --text: var(--dark);
   --font: 'Metropolis', sans-serif;
   --theme: #04a763;
-}
-@media (prefers-color-scheme: dark) { 
-  html {
-    &:not(.light) {
-      --color-mode: 'dark';
-      --bg: var(--dark);
-      --text: var(--light);
-      --accent: var(--bubble);
-      *{
-        box-shadow: none !important;
-      }
-    }
-  }
-}
 
-html.dark {
-  --color-mode: 'dark';
-  --bg: var(--dark);
-  --text: var(--light);
-  --accent: var(--bubble);
-  *{
-    box-shadow: none !important;
+  @mixin darkmode {
+    --color-mode: 'dim';
+    --bg: var(--dark);
+    --text: var(--light);
+    --accent: var(--bubble);
+    *{
+      box-shadow: none !important;
+    } 
+  }
+  
+  &[data-mode="dark"] {
+    @include darkmode;
+  }
+  @media (prefers-color-scheme: dark) { 
+    &:not([data-mode="lit"]) {
+      @include darkmode;
+    }
   }
 }