diff --git a/config.toml b/config.toml index 5f0c86f..97774ac 100644 --- a/config.toml +++ b/config.toml @@ -61,12 +61,9 @@ taxonomies = [{ name = "tags", feed = true }] # Sets theme and browser theme color. # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color primary_color = "#ff7800" -# Same as primary_color, but with 20% opacity -primary_color_alpha = "rgb(255 120 0 / 0.2)" # Ditto but for the dark mode. # If not set regular variant will be used. primary_color_dark = "#ffa348" -primary_color_dark_alpha = "rgb(255 163 72 / 0.2)" # Whether to fix low contrast in text selection, checkboxes, etc. # Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow. # diff --git a/content/_index.md b/content/_index.md index bae3e18..c928048 100644 --- a/content/_index.md +++ b/content/_index.md @@ -123,7 +123,6 @@ Duckquill respects chosen primary color everywhere. To use your own, simply chan ```toml [extra] primary_color = "#3584e4" -primary_color_alpha = "rgb(53 132 228 / 0.2)" ``` Additionally, you can set a separate color for dark mode: @@ -131,7 +130,6 @@ Additionally, you can set a separate color for dark mode: ```toml [extra] primary_color_dark = "#ff7800" -primary_color_dark_alpha = "rgb(255 120 0 / 0.2)" ``` ### Favicon diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 185b59d..9fc9bac 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -29,7 +29,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } &.colored { diff --git a/sass/_comments.scss b/sass/_comments.scss index 2d23649..94ab209 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -98,12 +98,12 @@ height: 100%; &:hover { - transform: rotate(10deg) scale(1.1); + transform: rotate(10deg) var(--hover); border-radius: var(--rounded-corner); } &:active { - transform: scale(var(--active)); + transform: var(--active); } } } @@ -133,7 +133,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } &.op { @@ -204,7 +204,7 @@ &:active { - transform: scale(var(--active)); + transform: var(--active); } &.hashtag { @@ -288,7 +288,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } } diff --git a/sass/_external.scss b/sass/_external.scss index 246305c..9343484 100644 --- a/sass/_external.scss +++ b/sass/_external.scss @@ -3,7 +3,7 @@ -webkit-mask-image: var(--icon); -webkit-mask-size: cover; display: inline-block; - opacity: 0.6; + opacity: var(--disabled); mask-image: var(--icon); mask-size: cover; margin-inline-start: 0.25rem; diff --git a/sass/_footer.scss b/sass/_footer.scss index 86b13fb..2244830 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -59,7 +59,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } } } @@ -93,7 +93,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } .icon { @@ -131,7 +131,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } } } diff --git a/sass/_footnotes-list.scss b/sass/_footnotes-list.scss index 9450a40..5dbfdf5 100644 --- a/sass/_footnotes-list.scss +++ b/sass/_footnotes-list.scss @@ -27,7 +27,7 @@ a + a[href*="#fr-"], li:target a[href*="#fr-"] { - opacity: 0.6; + opacity: var(--disabled); background-color: var(--primary-color); &:hover { @@ -35,7 +35,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } } diff --git a/sass/_input.scss b/sass/_input.scss index 7a0ebac..a9c0e98 100644 --- a/sass/_input.scss +++ b/sass/_input.scss @@ -47,9 +47,12 @@ input[type="color"] { } &:disabled { + opacity: var(--disabled); cursor: not-allowed; - border: 0.15rem solid var(--fg-muted-1); - background-color: var(--fg-muted-1); + + &:hover { + background-color: var(--fg-muted-1); + } } } @@ -118,7 +121,6 @@ input[type="checkbox"] { &:disabled { &::before { - opacity: 0.6; box-shadow: none; } } @@ -134,11 +136,6 @@ input[type="color"] { width: 3rem; height: 2rem; - &:disabled { - opacity: 0.6; - border: none; - } - &::-moz-color-swatch { border: none; border-radius: calc(var(--rounded-corner-small) - 0.25rem); @@ -177,7 +174,7 @@ input[type="range"] { height: 1.5rem; &:active { - transform: scale(var(--active)); + transform: var(--active); cursor: grabbing; } } @@ -194,7 +191,7 @@ input[type="range"] { height: 1.5rem; &:active { - transform: scale(var(--active)); + transform: var(--active); cursor: grabbing; } } diff --git a/sass/_media.scss b/sass/_media.scss index 3a871c9..a31e85a 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -83,7 +83,7 @@ img { cursor: zoom-in; &:hover { - transform: scale(1.1); + transform: var(--hover); z-index: 1; box-shadow: var(--edge-highlight), var(--shadow-raised); border-radius: 0; @@ -101,7 +101,7 @@ img { transform-origin: center; &:hover { - transform: scale(1.1); + transform: var(--hover); } } } diff --git a/sass/_nav.scss b/sass/_nav.scss index 00898a0..087aa30 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -187,7 +187,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } } diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss index d8b0d7e..618f061 100644 --- a/sass/_post-nav.scss +++ b/sass/_post-nav.scss @@ -22,7 +22,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } &.post-nav-prev .nav-arrow::before { diff --git a/sass/_pre-container.scss b/sass/_pre-container.scss index 34c1fdc..23b4c55 100644 --- a/sass/_pre-container.scss +++ b/sass/_pre-container.scss @@ -45,7 +45,7 @@ } &:active { - transform: scale(var(--active)); + transform: var(--active); } .icon { diff --git a/sass/_tags.scss b/sass/_tags.scss index b9e7c0c..0e15fef 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -12,7 +12,7 @@ line-height: 1; &:active { - transform: scale(var(--active)); + transform: var(--active); } } diff --git a/sass/_variables.scss b/sass/_variables.scss index 3260c88..70c57b8 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -43,6 +43,7 @@ @else { // COLORS + --primary-color-alpha: rgb(from var(--primary-color) r g b / 0.1); --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8)); --fg-color: rgb(0 0 0 / 0.8); --fg-muted-1: rgb(0 0 0 / 0.05); @@ -66,7 +67,9 @@ --yellow-fg: rgb(156 110 3); // VARIABLES - --active: 0.9; + --disabled: 0.6; + --hover: scale(1.1); + --active: scale(0.9); --blur: saturate(180%) blur(0.75rem); --container-width: 720px; --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1); diff --git a/sass/_zola-anchor.scss b/sass/_zola-anchor.scss index c6753e5..1ddef6a 100644 --- a/sass/_zola-anchor.scss +++ b/sass/_zola-anchor.scss @@ -20,7 +20,7 @@ h6 { } &:active { - transform: scale(var(--active)); + transform: var(--active); } &:focus-visible { diff --git a/templates/partials/head.html b/templates/partials/head.html index f5154c9..52d2bc8 100644 --- a/templates/partials/head.html +++ b/templates/partials/head.html @@ -41,21 +41,18 @@