Make --color-opacity variable "private", tweak switch style

2024-09-02 01:53:02 +03:00
parent 2c110393c3
commit b6b2639373
8 changed files with 44 additions and 97 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,9 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Added

+- Add `--color-opacity` CSS variable for setting global color opacity.
 - Add `--disabled` CSS variable for setting opacity of disabled elements.
 - Add `--hover` CSS variable for setting zoom on hover.
- Add `config.extra.color_opacity` and `config.extra.color_opacity_dark` config variables to set global color opacity used by `-bg` colors and `--primary-color-alpha`.
 - Add `external` class to comment timestamp.
 - Add active state to footer's "Powered by" links.
 - Add active state to footnotes' go back button.
@ -24,7 +24,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed

 - **[BREAKING]** Change the `--active` CSS variable to include `scale()` as well.
+- **[BREAKING]** Change the way `--bg-color` works. See [Tricks](https://duckquill.daudix.one/tricks/#background-image) page to see how to make background images work.
 - Add margin between comment author name and timestamp.
+- Add missing edge highlight to active footer navbar links.
 - Make comment timestamp more subtle.
 - Reduce the target heading transition time.
 - Reduce top margin of the target heading.
--- a/content/demo/index.md
+++ b/content/demo/index.md
@ -586,16 +586,6 @@ Blah blah <q>Inline Quote</q> hmm.
  <input id="color-picker-dark" type="color" value="#ffa348" />
  <label for="color-picker-dark">Dark theme</label>
  <br />
-  <small>Color opacity:</small>
-  <br />
-  <small id="opacity-light-value">0.1</small>
-  <input type="range" id="opacity-light" min="0.1" max="0.9" step="0.1" value="0.1">
-  <label for="opacity-light">Light theme</label>
-  <br />
-  <small id="opacity-dark-value">0.1</small>
-  <input type="range" id="opacity-dark" min="0.1" max="0.9" step="0.1" value="0.1">
-  <label for="opacity-dark">Dark theme</label>
-  <br />
  <small>Fix contrast:</small>
  <br />
  <input id="contrast-color-light" type="checkbox" />
@ -645,23 +635,9 @@ Blah blah <q>Inline Quote</q> hmm.
  #color-picker-light,
  #color-picker-dark,
  #contrast-color-light,
-  #contrast-color-dark,
-  #opacity-light-value,
-  #opacity-dark-value,
-  #opacity-light,
-  #opacity-dark {
+  #contrast-color-dark {
    margin-inline-end: 0.25rem;
  }
-
-  #opacity-light,
-  #opacity-dark {
-    width: 8rem;
-  }
-
-  #opacity-light-value,
-  #opacity-dark-value {
-    font-variant-numeric: tabular-nums;
-  }
 </style>

 <script type="text/javascript">
@ -669,25 +645,14 @@ Blah blah <q>Inline Quote</q> hmm.
  const colorPickerDark = document.querySelector("#color-picker-dark");
  const contrastCheckboxLight = document.querySelector("#contrast-color-light");
  const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
-  const opacityInputLight = document.querySelector("#opacity-light");
-  const opacityInputDark = document.querySelector("#opacity-dark");
-  const opacityValueLight = document.querySelector("#opacity-light-value");
-  const opacityValueDark = document.querySelector("#opacity-dark-value");

  let primaryColorLight = colorPickerLight.value;
  let primaryColorDark = colorPickerDark.value;
-  let opacityLight = opacityInputLight.value;
-  let opacityDark = opacityInputDark.value;
-
-  opacityValueLight.textContent = opacityLight;
-  opacityValueDark.textContent = opacityDark;

  colorPickerLight.addEventListener("input", updatePrimaryColorLight);
  colorPickerDark.addEventListener("input", updatePrimaryColorDark);
  contrastCheckboxLight.addEventListener("change", updateStyles);
  contrastCheckboxDark.addEventListener("change", updateStyles);
-  opacityInputLight.addEventListener("input", updateOpacityLight);
-  opacityInputDark.addEventListener("input", updateOpacityDark);

  function updatePrimaryColorLight() {
    primaryColorLight = colorPickerLight.value;
@ -699,18 +664,6 @@ Blah blah <q>Inline Quote</q> hmm.
    updateStyles();
  }

-  function updateOpacityLight() {
-    opacityLight = opacityInputLight.value;
-    opacityValueLight.textContent = opacityLight;
-    updateStyles();
-  }
-
-  function updateOpacityDark() {
-    opacityDark = opacityInputDark.value;
-    opacityValueDark.textContent = opacityDark;
-    updateStyles();
-  }
-
  function updateStyles() {
    const contrastColorLight = contrastCheckboxLight.checked;
    const contrastColorDark = contrastCheckboxDark.checked;
@ -726,16 +679,13 @@ Blah blah <q>Inline Quote</q> hmm.
    let styles = `
      :root {
        --primary-color: ${primaryColorLight};
-        --color-opacity: ${opacityLight};
      }
      [data-theme="dark"] {
        --primary-color: ${primaryColorDark};
-        --color-opacity: ${opacityDark};
      }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          --primary-color: ${primaryColorDark};
-          --color-opacity: ${opacityDark};
        }
      }
    `;
--- a/content/tricks/index.md
+++ b/content/tricks/index.md
@ -24,7 +24,7 @@ Duckquill is pretty easy to restyle with just a few lines of SCSS in the [approp

 ### Navbar

-You can make navbar have more classic look:
+You can make navbar have more traditional look:

 ![classic navabr](https://files.catbox.moe/wd9nal.png)

@ -94,7 +94,7 @@ Or you can make it sticked to top but not full-width:

 ### Headings

-Default headings might not fit your taste, that's understandable. Good thing that we can ~~make them boring~~ fix them:
+Default headings might not fit your taste, that's understandable. Good thing is that we can ~~make them boring~~ fix them:

 ![boring headings](https://files.catbox.moe/6ok740.png)

@ -111,33 +111,33 @@ h6 {

 h1 {
    font-weight: 900;
-	font-size: 3rem;
+    font-size: 3rem;
 }

 h2 {
-	font-size: 2.5rem;
+    font-size: 2.5rem;
 }

 h3 {
-	font-size: 2rem;
+    font-size: 2rem;
 }

 h4 {
-	font-size: 1.5rem;
+    font-size: 1.5rem;
 }

 h5 {
-	font-size: 1rem;
+    font-size: 1rem;
 }

 h6 {
-	font-size: 0.75rem;
+    font-size: 0.75rem;
 }
 ```

 ### Strikethrough

-The default strikethrough style is too much for you? Let's sort this out:
+The default strikethrough style is too much? Let's sort this out:

 ![plain strikethrough](https://files.catbox.moe/y2tbwm.png)

@ -153,11 +153,15 @@ del {

 ### Edge Highlights

-Hate the skeuomorphic edge highlight on all semi-transparent elements? It's easy to get rid of them:
+Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of them:

 ```scss
-:root {
-    --edge-highlight: 0 0 0 transparent;
+@import "../themes/duckquill/sass/_variables.scss";
+
+@include theme-variables using ($theme) {
+    @else {
+        --edge-highlight: 0 0 0 transparent;
+    }
 }
 ```

@ -180,24 +184,26 @@ hr {

 ### Background Image

-Want to set some nice image as a background? I got you covered:
+Want to set some nice image as a background? We got you covered:

 ![background image](https://files.catbox.moe/kgrgqr.png)

 ```scss
+@import "../themes/duckquill/sass/_variables.scss";
+
+@include theme-variables using ($theme) {
+    @if $theme =="dark" {
+        --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
+    }
+
+    @else {
+        --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
+    }
+}
+
 body {
    background: var(--bg-color), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }
 ```

-Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` to your needs:
-
-```scss
-:root {
-    --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
-
-    @media (prefers-color-scheme: dark) {
-        --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
-    }
-}
-```
+Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` based on your needs.
--- a/sass/_footer.scss
+++ b/sass/_footer.scss
@ -43,6 +43,7 @@
 			text-decoration: none;

 			&.active {
+				box-shadow: var(--edge-highlight);
 				background-color: var(--primary-color-alpha);
 				color: var(--primary-color);

--- a/sass/_general.scss
+++ b/sass/_general.scss
@ -33,7 +33,7 @@ body {
 	display: grid; // Put footer at the bottom for short pages, such as the 404
 	grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
 	margin: 0;
-	background: var(--bg-color), var(--primary-color);
+	background-color: var(--bg-color);
 	min-height: 100vh;
 	color: var(--fg-color);
 	line-height: 1.6;
--- a/sass/_input.scss
+++ b/sass/_input.scss
@ -87,12 +87,12 @@ input[type="checkbox"] {
 	}

 	&.switch {
-		vertical-align: -0.625rem;
+		vertical-align: -0.375rem;
 		box-shadow: var(--edge-highlight);
 		border: none;
 		border-radius: 999px;
-		width: 3rem;
-		height: 2rem;
+		width: 2.5rem;
+		height: 1.5rem;

 		&::before {
 			-webkit-mask-image: none;
@ -106,8 +106,8 @@ input[type="checkbox"] {
 			box-shadow: var(--shadow);
 			border-radius: 50%;
 			background-color: white;
-			width: 1.5rem;
-			height: 1.5rem;
+			width: 1rem;
+			height: 1rem;
 		}

 		&:checked {
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@ -17,7 +17,7 @@
@include theme-variables using ($theme) {
 	@if $theme =="dark" {
 		// COLORS
-		--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
+		--bg-color: color-mix(in srgb, var(--primary-color) 10%, black);
 		--fg-color: rgb(255 255 255);
 		--fg-muted-1: rgb(255 255 255 / 0.05);
 		--fg-muted-2: rgb(255 255 255 / 0.1);
@ -37,7 +37,7 @@

 	@else {
 		// COLORS
-		--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
+		--bg-color: color-mix(in srgb, var(--primary-color) 20%, white);
 		--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
 		--blue-fg: rgb(53 132 228);
 		--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@ -63,6 +63,7 @@
 		// VARIABLES
 		--active: scale(0.9);
 		--blur: saturate(180%) blur(0.75rem);
+		--color-opacity: 0.1;
 		--container-width: 720px;
 		--disabled: 0.6;
 		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@ -42,7 +42,6 @@
 		:root {
 			--primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }};
 			--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
-			--color-opacity: {{ config.extra.color_opacity | default(value="0.1") }};
 		}

 		{%- if config.extra.primary_color_dark %}
@ -68,18 +67,6 @@
 				}
 			}
 		{%- endif %}
-
-		{%- if config.extra.color_opacity_dark %}
-			[data-theme="dark"] {
-				--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
-			}
-
-			@media (prefers-color-scheme: dark) {
-				:root:not([data-theme="light"]) {
-					--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
-				}
-			}
-		{%- endif %}
 	</style>

 	{%- set stylesheets = [ "style.css" ] %}