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.
# 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.
#

2
content/_index.md
View File

@ -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

2
sass/_buttons.scss
View File

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

10
sass/_comments.scss
View File

@ -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);
}
}

2
sass/_external.scss
View File

@ -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;

6
sass/_footer.scss
View File

@ -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);
}
}
}

4
sass/_footnotes-list.scss
View File

@ -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);
}
}

15
sass/_input.scss
View File

@ -47,10 +47,13 @@ input[type="color"] {
}
&:disabled {
opacity: var(--disabled);
cursor: not-allowed;
border: 0.15rem solid var(--fg-muted-1);
&:hover {
background-color: var(--fg-muted-1);
}
}
}
input[type="radio"] {
@ -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;
}
}

4
sass/_media.scss
View File

@ -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);
}
}
}

2
sass/_nav.scss
View File

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

2
sass/_post-nav.scss
View File

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

2
sass/_pre-container.scss
View File

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

2
sass/_tags.scss
View File

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

5
sass/_variables.scss
View File

@ -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);

2
sass/_zola-anchor.scss
View File

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

3
templates/partials/head.html
View File

@ -41,21 +41,18 @@
<style type="text/css">
:root {
--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 %};
}
{%- if config.extra.primary_color_dark %}
[data-theme="dark"] {
--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 %};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--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 %};
}
}