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

Use modern RGB format (fixes #54)

Browse Source
This commit is contained in:
daudix
2024-08-23 23:18:59 +03:00
parent 8411000de7
commit 7808d906f1
8 changed files with 162 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
config.toml
View File

@ -60,11 +60,11 @@ taxonomies = [{ name = "tags", feed = true }]
# 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 = "rgba(255, 120, 0, 0.2)"
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 = "rgba(255, 163, 72, 0.2)"
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.
# fix_contrast = true

4
content/_index.md
View File

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

4
content/demo/index.md
View File

@ -558,9 +558,9 @@ Blah blah <q>Inline Quote</q> hmm.
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
return "rgb(" + r + " " + g + " " + b + " / " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
return "rgb(" + r + " " + g + " " + b + ")";
}
}

8
content/tricks/index.md
View File

@ -32,7 +32,7 @@ You can make navbar have more classic look:
#site-nav {
top: 0;
margin-top: 0;
box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 0;
width: 100%;
max-width: 100%;
@ -69,7 +69,7 @@ Or you can make it sticked to top but not full-width:
#site-nav {
top: 0;
margin-top: 0;
box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
nav ul li {
@ -192,10 +192,10 @@ Most of the time contrast should be okay, but what if it's not? Simply adjust th
```scss
:root {
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
--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(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
}
}
```

28
sass/_crt.scss
View File

@ -1,8 +1,13 @@
.crt {
margin: 1rem 0 1rem;
box-shadow: var(--edge-highlight), 0 0 0 0.0625rem var(--primary-color-alpha), 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
box-shadow:
var(--edge-highlight),
0 0 0 0.0625rem var(--primary-color-alpha),
0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
border-radius: var(--rounded-corner);
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
background: radial-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.85)),
var(--primary-color);
pre {
animation: flicker 0.25s alternate infinite;
@ -11,7 +16,9 @@
background-color: transparent !important;
padding: 1rem 1rem;
color: var(--primary-color) !important;
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
text-shadow:
var(--primary-color-alpha) 0 0 0.25rem,
var(--primary-color) 0 0 0.75rem;
@keyframes flicker {
25% {
@ -43,7 +50,13 @@
z-index: 1;
animation: scanlines 0.1s linear infinite;
inset: 0;
background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.125rem, transparent 0.125rem, transparent 0.25rem);
background-image: repeating-linear-gradient(
to bottom,
rgb(0 0 0 / 0.25),
rgb(0 0 0 / 0.25) 0.125rem,
transparent 0.125rem,
transparent 0.25rem
);
pointer-events: none;
content: "";
@ -59,7 +72,12 @@
position: absolute;
animation: scanline 5s linear infinite;
inset: 0;
background-image: linear-gradient(to bottom, transparent, var(--primary-color-alpha) 7rem, transparent 8rem);
background-image: linear-gradient(
to bottom,
transparent,
var(--primary-color-alpha) 7rem,
transparent 8rem
);
background-size: auto 8rem;
background-repeat: no-repeat;
background-position-y: -8rem;

35
sass/_nav.scss
View File

@ -5,7 +5,9 @@
z-index: 999;
backdrop-filter: var(--blur);
margin: 1rem auto;
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 1.625rem;
background-color: var(--nav-bg);
max-width: 90%;
@ -27,7 +29,9 @@
z-index: 999;
backdrop-filter: var(--blur);
transition: var(--transition);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: 999px;
background-color: var(--nav-bg);
padding: 0.5rem 0.75rem;
@ -56,7 +60,14 @@
list-style: none;
@media only screen and (max-width: 480px) {
&:not(#search, #language-switcher, #theme-switcher, #theme-switcher li, #feed, #repo) {
&:not(
#search,
#language-switcher,
#theme-switcher,
#theme-switcher li,
#feed,
#repo
) {
flex: 0 0 100%;
}
}
@ -190,7 +201,8 @@
right: unset;
bottom: 0.25rem;
left: -0.5rem;
border-inline-end: 0.25rem solid var(--fg-muted-2);
border-inline-end: 0.25rem solid
var(--fg-muted-2);
border-block-end: none;
border-start-end-radius: 0.25rem;
border-end-start-radius: 0;
@ -213,7 +225,8 @@
right: unset;
bottom: 0;
left: -0.5rem;
border-inline-end: 0.25rem solid var(--primary-color);
border-inline-end: 0.25rem solid
var(--primary-color);
border-block-end: none;
content: "";
@ -329,7 +342,9 @@
transform: translate(-50%, 1rem);
z-index: 1;
backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
background-color: var(--nav-bg);
padding: 0.25rem;
@ -355,7 +370,9 @@
}
ul {
border-radius: calc(var(--rounded-corner) + 0.25rem);
border-radius: calc(
var(--rounded-corner) + 0.25rem
);
}
}
}
@ -473,7 +490,9 @@
flex-direction: column;
gap: 0.5rem;
backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: calc(var(--rounded-corner) + 0.5rem);
background-color: var(--nav-bg);
padding: 0.5rem;

138
sass/_variables.scss
View File

@ -1,47 +1,48 @@
@mixin theme-variables($theme) {
@if $theme =="dark" {
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
--fg-color: rgb(255, 255, 255);
--fg-muted-1: rgba(255, 255, 255, 0.05);
--fg-muted-2: rgba(255, 255, 255, 0.1);
--fg-muted-3: rgba(255, 255, 255, 0.2);
--fg-muted-4: rgba(255, 255, 255, 0.5);
--fg-muted-5: rgba(255, 255, 255, 0.6);
--nav-bg: rgba(25, 25, 25, 0.7);
--blue-bg: rgba(153, 193, 241, 0.1);
--blue-fg: rgb(153, 193, 241);
--green-bg: rgba(143, 240, 164, 0.1);
--green-fg: rgb(143, 240, 164);
--purple-bg: rgba(220, 138, 221, 0.1);
--purple-fg: rgb(220, 138, 221);
--red-bg: rgba(226, 97, 81, 0.1);
--red-fg: rgb(246, 97, 81);
--yellow-bg: rgba(248, 228, 92, 0.1);
--yellow-fg: rgb(248, 228, 92);
--star-featured: rgba(248, 228, 92, 0.05);
@if $theme == "dark" {
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
--fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1);
--fg-muted-3: rgb(255 255 255 / 0.2);
--fg-muted-4: rgb(255 255 255 / 0.5);
--fg-muted-5: rgb(255 255 255 / 0.6);
--nav-bg: rgb(25 25 25 / 0.7);
--blue-bg: rgb(153 193 241 / 0.1);
--blue-fg: rgb(153 193 241);
--green-bg: rgb(143 240 164 / 0.1);
--green-fg: rgb(143 240 164);
--purple-bg: rgb(220 138 221 / 0.1);
--purple-fg: rgb(220 138 221);
--red-bg: rgb(226 97 81 / 0.1);
--red-fg: rgb(246 97 81);
--yellow-bg: rgb(248 228 92 / 0.1);
--yellow-fg: rgb(248 228 92);
--star-featured: rgb(248 228 92 / 0.05);
color-scheme: dark;
}
@else {
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
--fg-color: rgba(0, 0, 0, 0.8);
--fg-muted-1: rgba(0, 0, 0, 0.05);
--fg-muted-2: rgba(0, 0, 0, 0.1);
--fg-muted-3: rgba(0, 0, 0, 0.2);
--fg-muted-4: rgba(0, 0, 0, 0.5);
--fg-muted-5: rgba(0, 0, 0, 0.6);
--nav-bg: rgba(242, 242, 242, 0.7);
--blue-bg: rgba(53, 132, 228, 0.1);
--blue-fg: rgb(53, 132, 228);
--green-bg: rgba(38, 162, 105, 0.1);
--green-fg: rgb(38, 162, 105);
--purple-bg: rgba(145, 65, 172, 0.1);
--purple-fg: rgb(145, 65, 172);
--red-bg: rgba(224, 27, 36, 0.1);
--red-fg: rgb(224, 27, 36);
--yellow-bg: rgba(156, 110, 3, 0.1);
--yellow-fg: rgb(156, 110, 3);
--star-featured: rgba(156, 110, 3, 0.15);
} @else {
--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);
--fg-muted-2: rgb(0 0 0 / 0.1);
--fg-muted-3: rgb(0 0 0 / 0.2);
--fg-muted-4: rgb(0 0 0 / 0.5);
--fg-muted-5: rgb(0 0 0 / 0.6);
--nav-bg: rgb(242 242 242 / 0.7);
--blue-bg: rgb(53 132 228 / 0.1);
--blue-fg: rgb(53 132 228);
--green-bg: rgb(38 162 105 / 0.1);
--green-fg: rgb(38 162 105);
--purple-bg: rgb(145 65 172 / 0.1);
--purple-fg: rgb(145 65 172);
--red-bg: rgb(224 27 36 / 0.1);
--red-fg: rgb(224 27 36);
--yellow-bg: rgb(156 110 3 / 0.1);
--yellow-fg: rgb(156 110 3);
--star-featured: rgb(156 110 3 / 0.15);
}
}
@ -52,32 +53,51 @@
--active: 0.9;
--blur: saturate(180%) blur(0.75rem);
--container-width: 720px;
--edge-highlight: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1);
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--rounded-corner-small: 0.5rem;
--rounded-corner: 0.75rem;
--shadow-raised: 0 0 0 0.0625rem rgba(0, 0, 0, 0.06), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.14), 0 0.25rem 0.75rem 0.25rem rgba(0, 0, 0, 0.06);
--shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.07), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.03);
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
--transition-long: 0.8s;
--transition-longer: 0.4s;
--transition: 0.2s;
// FONTS
--font-system-ui: system-ui, sans-serif;
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
serif;
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
P052, serif;
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
source-sans-pro, sans-serif;
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
source-sans-pro, sans-serif;
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
sans-serif;
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
"Nimbus Sans", Arial, sans-serif;
--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif;
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
"Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
source-sans-pro, sans-serif;
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
"Sitka Small", serif;
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
"URW Bookman L", "Georgia Pro", Georgia, serif;
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
P052, Sylfaen, serif;
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
casual, cursive;
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
[data-theme="dark"] {

22
templates/partials/head.html
View File

@ -3,9 +3,9 @@
<meta charset="UTF-8" />
<meta name="description" content="{{ config.description }}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996') }}" />
<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996' | safe) | safe }}" />
{%- if config.extra.primary_color_dark %}
<meta name="theme-color" content="{{ config.extra.primary_color_dark }}" media="(prefers-color-scheme:dark)" />
<meta name="theme-color" content="{{ config.extra.primary_color_dark | safe }}" media="(prefers-color-scheme:dark)" />
{%- endif %}
<title>{% include "partials/title.html" %}</title>
<link rel="canonical" href="{{ current_url | default(value='/') | safe }}" />
@ -40,23 +40,23 @@
<style type="text/css">
:root {
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") }};
--primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgba(111, 131, 150, 0.2)") }};
--contrast-color: {% if config.extra.fix_contrast %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
--primary-color: {{ config.extra.primary_color | default(value="#6f8396" | safe) | 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 }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
--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 }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
--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 %};
}
}
{%- endif %}