update

4 files changed, 29 insertions, 19 deletions

diff --git a/assets/scss/_components.scss b/assets/scss/_components.scss
index ebb28e4..7ee913a 100644
--- a/assets/scss/_components.scss
+++ b/assets/scss/_components.scss
@@ -219,8 +219,9 @@
   }
   &_choice {
     width: 3rem;
-    // background-color: rgba(255,255,255,0.06);
+    // background-color: rgba(255,255,255,0.16);
     background-color: var(--theme);
+    box-shadow: 0 1rem 2rem rgba(0,0,0,0.17);
     border-radius: 1rem;
     height: 1.5rem;
     outline: none;
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 09a38b3..142a097 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -25,6 +25,7 @@
     @include darkmode;
     .color {
       &_choice {
+        mix-blend-mode: color-dodge;
         &::after {
           background-image: url(/images/night-moon.jpg);
           transform: translateX(1.4rem);
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.content b/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.content
index 144476f..d13ba0c 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.content
@@ -3,42 +3,42 @@
   font-family: 'Metropolis';
   font-style: normal;
   font-weight: 400;
-  src: local("Metropolis Regular"), local("Metropolis-Regular"), url("http://localhost:54419/fonts/Metropolis-Regular.woff2") format("woff2"), url("http://localhost:54419/fonts/Metropolis-Regular.woff") format("woff");
+  src: local("Metropolis Regular"), local("Metropolis-Regular"), url("http://localhost:1313/fonts/Metropolis-Regular.woff2") format("woff2"), url("http://localhost:1313/fonts/Metropolis-Regular.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Metropolis';
   font-style: normal;
   font-weight: 300;
-  src: local("Metropolis Light"), local("Metropolis-Light"), url("http://localhost:54419/fonts/Metropolis-Light.woff2") format("woff2"), url("http://localhost:54419/fonts/Metropolis-Light.woff") format("woff");
+  src: local("Metropolis Light"), local("Metropolis-Light"), url("http://localhost:1313/fonts/Metropolis-Light.woff2") format("woff2"), url("http://localhost:1313/fonts/Metropolis-Light.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Metropolis';
   font-style: italic;
   font-weight: 300;
-  src: local("Metropolis Light Italic"), local("Metropolis-LightItalic"), url("http://localhost:54419/fonts/Metropolis-LightItalic.woff2") format("woff2"), url("http://localhost:54419/fonts/Metropolis-LightItalic.woff") format("woff");
+  src: local("Metropolis Light Italic"), local("Metropolis-LightItalic"), url("http://localhost:1313/fonts/Metropolis-LightItalic.woff2") format("woff2"), url("http://localhost:1313/fonts/Metropolis-LightItalic.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Metropolis';
   font-style: normal;
   font-weight: 500;
-  src: local("Metropolis Medium"), local("Metropolis-Medium"), url("http://localhost:54419/fonts/Metropolis-Medium.woff2") format("woff2"), url("http://localhost:54419/fonts/Metropolis-Medium.woff") format("woff");
+  src: local("Metropolis Medium"), local("Metropolis-Medium"), url("http://localhost:1313/fonts/Metropolis-Medium.woff2") format("woff2"), url("http://localhost:1313/fonts/Metropolis-Medium.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Metropolis';
   font-style: italic;
   font-weight: 500;
-  src: local("Metropolis Medium Italic"), local("Metropolis-MediumItalic"), url("http://localhost:54419/fonts/Metropolis-MediumItalic.woff2") format("woff2"), url("http://localhost:54419/fonts/Metropolis-MediumItalic.woff") format("woff");
+  src: local("Metropolis Medium Italic"), local("Metropolis-MediumItalic"), url("http://localhost:1313/fonts/Metropolis-MediumItalic.woff2") format("woff2"), url("http://localhost:1313/fonts/Metropolis-MediumItalic.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Cookie';
   font-style: normal;
   font-weight: 400;
-  src: local("Cookie-Regular"), url("http://localhost:54419/fonts/cookie-v10-latin-regular.woff2") format("woff2"), url("http://localhost:54419/fonts/cookie-v10-latin-regular.woff") format("woff");
+  src: local("Cookie-Regular"), url("http://localhost:1313/fonts/cookie-v10-latin-regular.woff2") format("woff2"), url("http://localhost:1313/fonts/cookie-v10-latin-regular.woff") format("woff");
 }
 
 :root {
@@ -66,6 +66,15 @@
   box-shadow: none !important;
 }
 
+:root[data-mode="dim"] .color_choice {
+  mix-blend-mode: color-dodge;
+}
+
+:root[data-mode="dim"] .color_choice::after {
+  background-image: url(/images/night-moon.jpg);
+  transform: translateX(1.4rem);
+}
+
 @media (prefers-color-scheme: dark) {
   :root:not([data-mode="lit"]) {
     --color-mode: 'dim';
@@ -447,7 +456,7 @@ aside h3 {
   position: relative;
   width: 1.5rem;
   height: 1.5rem;
-  background-image: url(http://localhost:54419/images/icons/copy.svg);
+  background-image: url(http://localhost:1313/images/icons/copy.svg);
   background-size: 100%;
   cursor: pointer;
 }
@@ -514,12 +523,13 @@ aside h3 {
   display: grid;
   grid-template-columns: 1fr 3rem;
   align-items: center;
-  margin: 5rem 1.5rem 0;
+  margin: 2rem 1.5rem 0;
 }
 
 .color_choice {
   width: 3rem;
   background-color: var(--theme);
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.17);
   border-radius: 1rem;
   height: 1.5rem;
   outline: none;
@@ -540,17 +550,15 @@ aside h3 {
   left: 0.1rem;
   width: 1.3rem;
   height: 1.3rem;
-  background: radial-gradient(var(--light), var(--gray));
+  background-image: url(/images/sun.svg);
+  background-position: center;
+  background-size: cover;
   border-radius: 50%;
   z-index: 2;
   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   will-change: transform;
 }
 
-.color_choice:checked::after {
-  transform: translateX(1.4rem);
-}
-
 .nav {
   position: absolute;
   top: 0;
@@ -909,7 +917,7 @@ aside h3 {
 
 .post_next::after {
   content: "";
-  background-image: url("http://localhost:54419/images/icons/next.svg");
+  background-image: url("http://localhost:1313/images/icons/next.svg");
   background-repeat: repeat no-repeat;
   background-size: 0.8rem;
   background-position: center right;
@@ -946,11 +954,11 @@ aside h3 {
 }
 
 .pager_prev {
-  background-image: url(http://localhost:54419/images/icons/previous.svg);
+  background-image: url(http://localhost:1313/images/icons/previous.svg);
 }
 
 .pager_next {
-  background-image: url(http://localhost:54419/images/icons/next.svg);
+  background-image: url(http://localhost:1313/images/icons/next.svg);
 }
 
 .pager span {
@@ -1081,7 +1089,7 @@ aside h3 {
 
 .never {
   min-height: 60vh;
-  background: url("http://localhost:54419/images/sitting.svg");
+  background: url("http://localhost:1313/images/sitting.svg");
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: contain;
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.json
index 4a4f678..f011ec3 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.json
+++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909.json
@@ -1 +1 @@
-{"Target":"css/main.e6a807c020ebaee8b22d78852c8be588542e069d1b24bc18995c1749b5e8e2c7f9db942d0699f6cac5e7db1a64ae72ddaec67dca83640b824dbb689144a2d9c5.css","MediaType":"text/css","Data":{"Integrity":"sha512-5qgHwCDrruiyLXiFLIvliFQuBp0bJLwYmVwXSbXo4sf525QtBpn2ysXn2xpkrnLdrsZ9yoNkC4JNu2iRRKLZxQ=="}}
\ No newline at end of file
+{"Target":"css/main.1bc5faf057cb8d204bfadafdf2f00778ae96f9a912317862d2af2510ab42d1342a342779befa80c09b4802295e822197df461af0350bc7250dba6aabc33736b5.css","MediaType":"text/css","Data":{"Integrity":"sha512-G8X68FfLjSBL+tr98vAHeK6W+akSMXhi0q8lEKtC0TQqNCd5vvqAwJtIAilegiGX30Ya8DULxyUNumqrwzc2tQ=="}}
\ No newline at end of file