hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Attempt to switch to relative colors for primary-color-alpha, simplify --active variable, add --hover and --disabled variables

Browse Source
This commit is contained in:
daudix
2024-09-01 16:54:39 +03:00
parent 82d82cc811
commit db499a9363
16 changed files with 30 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config.toml
View File

@ -61,12 +61,9 @@ taxonomies = [{ name = "tags", feed = true }]
# Sets theme and browser theme color. # Sets theme and browser theme color.
# See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
primary_color = "#ff7800" 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. # Ditto but for the dark mode.
# If not set regular variant will be used. # If not set regular variant will be used.
primary_color_dark = "#ffa348" primary_color_dark = "#ffa348"
primary_color_dark_alpha = "rgb(255 163 72 / 0.2)"
# Whether to fix low contrast in text selection, checkboxes, etc. # 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. # Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow.
# #

2
content/_index.md
View File

@ -123,7 +123,6 @@ Duckquill respects chosen primary color everywhere. To use your own, simply chan
```toml ```toml
[extra] [extra]
primary_color = "#3584e4" primary_color = "#3584e4"
primary_color_alpha = "rgb(53 132 228 / 0.2)"
``` ```
Additionally, you can set a separate color for dark mode: 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 ```toml
[extra] [extra]
primary_color_dark = "#ff7800" primary_color_dark = "#ff7800"
primary_color_dark_alpha = "rgb(255 120 0 / 0.2)"
``` ```
### Favicon ### Favicon

2
sass/_buttons.scss
View File

@ -29,7 +29,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
&.colored { &.colored {

10
sass/_comments.scss
View File

@ -98,12 +98,12 @@
height: 100%; height: 100%;
&:hover { &:hover {
transform: rotate(10deg) scale(1.1); transform: rotate(10deg) var(--hover);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
} }
} }
@ -133,7 +133,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
&.op { &.op {
@ -204,7 +204,7 @@
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
&.hashtag { &.hashtag {
@ -288,7 +288,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
} }

2
sass/_external.scss
View File

@ -3,7 +3,7 @@
-webkit-mask-image: var(--icon); -webkit-mask-image: var(--icon);
-webkit-mask-size: cover; -webkit-mask-size: cover;
display: inline-block; display: inline-block;
opacity: 0.6; opacity: var(--disabled);
mask-image: var(--icon); mask-image: var(--icon);
mask-size: cover; mask-size: cover;
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;

6
sass/_footer.scss
View File

@ -59,7 +59,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
} }
} }
@ -93,7 +93,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
.icon { .icon {
@ -131,7 +131,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
} }
} }

4
sass/_footnotes-list.scss
View File

@ -27,7 +27,7 @@
a + a[href*="#fr-"], a + a[href*="#fr-"],
li:target a[href*="#fr-"] { li:target a[href*="#fr-"] {
opacity: 0.6; opacity: var(--disabled);
background-color: var(--primary-color); background-color: var(--primary-color);
&:hover { &:hover {
@ -35,7 +35,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
} }

15
sass/_input.scss
View File

@ -47,10 +47,13 @@ input[type="color"] {
} }
&:disabled { &:disabled {
opacity: var(--disabled);
cursor: not-allowed; cursor: not-allowed;
border: 0.15rem solid var(--fg-muted-1);
&:hover {
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
} }
}
} }
input[type="radio"] { input[type="radio"] {
@ -118,7 +121,6 @@ input[type="checkbox"] {
&:disabled { &:disabled {
&::before { &::before {
opacity: 0.6;
box-shadow: none; box-shadow: none;
} }
} }
@ -134,11 +136,6 @@ input[type="color"] {
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
&:disabled {
opacity: 0.6;
border: none;
}
&::-moz-color-swatch { &::-moz-color-swatch {
border: none; border: none;
border-radius: calc(var(--rounded-corner-small) - 0.25rem); border-radius: calc(var(--rounded-corner-small) - 0.25rem);
@ -177,7 +174,7 @@ input[type="range"] {
height: 1.5rem; height: 1.5rem;
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
cursor: grabbing; cursor: grabbing;
} }
} }
@ -194,7 +191,7 @@ input[type="range"] {
height: 1.5rem; height: 1.5rem;
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
cursor: grabbing; cursor: grabbing;
} }
} }

4
sass/_media.scss
View File

@ -83,7 +83,7 @@ img {
cursor: zoom-in; cursor: zoom-in;
&:hover { &:hover {
transform: scale(1.1); transform: var(--hover);
z-index: 1; z-index: 1;
box-shadow: var(--edge-highlight), var(--shadow-raised); box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: 0; border-radius: 0;
@ -101,7 +101,7 @@ img {
transform-origin: center; transform-origin: center;
&:hover { &:hover {
transform: scale(1.1); transform: var(--hover);
} }
} }
} }

2
sass/_nav.scss
View File

@ -187,7 +187,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
} }

2
sass/_post-nav.scss
View File

@ -22,7 +22,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
&.post-nav-prev .nav-arrow::before { &.post-nav-prev .nav-arrow::before {

2
sass/_pre-container.scss
View File

@ -45,7 +45,7 @@
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
.icon { .icon {

2
sass/_tags.scss
View File

@ -12,7 +12,7 @@
line-height: 1; line-height: 1;
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
} }

5
sass/_variables.scss
View File

@ -43,6 +43,7 @@
@else { @else {
// COLORS // 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)); --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-color: rgb(0 0 0 / 0.8);
--fg-muted-1: rgb(0 0 0 / 0.05); --fg-muted-1: rgb(0 0 0 / 0.05);
@ -66,7 +67,9 @@
--yellow-fg: rgb(156 110 3); --yellow-fg: rgb(156 110 3);
// VARIABLES // VARIABLES
--active: 0.9; --disabled: 0.6;
--hover: scale(1.1);
--active: scale(0.9);
--blur: saturate(180%) blur(0.75rem); --blur: saturate(180%) blur(0.75rem);
--container-width: 720px; --container-width: 720px;
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1); --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);

2
sass/_zola-anchor.scss
View File

@ -20,7 +20,7 @@ h6 {
} }
&:active { &:active {
transform: scale(var(--active)); transform: var(--active);
} }
&:focus-visible { &:focus-visible {

3
templates/partials/head.html
View File

@ -41,21 +41,18 @@
<style type="text/css"> <style type="text/css">
:root { :root {
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }}; --primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }};
--primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgb(111 131 150 / 0.2)" | safe) | safe }};
--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %}; --contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
} }
{%- if config.extra.primary_color_dark %} {%- if config.extra.primary_color_dark %}
[data-theme="dark"] { [data-theme="dark"] {
--primary-color: {{ config.extra.primary_color_dark | safe }}; --primary-color: {{ config.extra.primary_color_dark | safe }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha | safe }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %}; --contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--primary-color: {{ config.extra.primary_color_dark | safe }}; --primary-color: {{ config.extra.primary_color_dark | safe }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha | safe }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %}; --contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
} }
} }