diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37a7934..4bf9acf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,7 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- **[BREAKING]** Rename `config.extra.nav.links.sublinks` to `config.extra.nav.links.menu`
- **[BREAKING]** Rename `config.extra.primary_color` and `config.extra.primary_color_dark` config variables to `config.extra.accent_color` and `config.extra.accent_color_dark`.
- **[BREAKING]** Rename `config.extra.stylesheets` to `config.extra.styles`. Front matter variables are renamed as well.
-- Add font size variables for consistent typography.
+- Add font size variables for consistent typography. Like [absolute sizes](https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size) but better.
- Allow enabling table of contents on all pages and sections except for the homepage.
- Allow opening original comment attachment by clicking on it.
- Allow overriding the `body` block of `base.html.
@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Tweak `kbd` styling.
- Tweak padding of verified instance badge.
- Use more fitting cursors in some contexts.
+- Use percents instead of decimals for color opacity.
- Use PNG instead of GIF for comments QR code to reduce download size.
- Use relative colors for `-bg` color variants.
- Use separator `div` instead of `::after` on the home button.
diff --git a/content/demo/index.md b/content/demo/index.md
index 2c4c01a..44ce3fc 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -749,7 +749,7 @@ You know, Duckquill is a pretty dumb name. I
if (contrastColorLight) {
styles += `
:root {
- --contrast-color: rgb(0 0 0 / 0.8);
+ --contrast-color: rgb(0 0 0 / 80%);
}
`;
} else {
@@ -763,11 +763,11 @@ You know, Duckquill is a pretty dumb name. I
if (contrastColorDark) {
styles += `
[data-theme="dark"] {
- --contrast-color: rgb(0 0 0 / 0.8);
+ --contrast-color: rgb(0 0 0 / 80%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
- --contrast-color: rgb(0 0 0 / 0.8);
+ --contrast-color: rgb(0 0 0 / 80%);
}
}
`;
diff --git a/content/tricks/index.md b/content/tricks/index.md
index a021d1f..e22d5a0 100644
--- a/content/tricks/index.md
+++ b/content/tricks/index.md
@@ -174,11 +174,11 @@ Want to set some nice image as a background? We got you covered:
@include theme-variables using ($theme) {
@if $theme == "dark" {
- --bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
+ --bg-overlay: linear-gradient(rgb(0 0 0 / 90%), rgb(0 0 0 / 90%));
}
@else {
- --bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
+ --bg-overlay: linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%));
}
}
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index d402c7f..acb2b81 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -58,7 +58,7 @@
a {
background-color: var(--accent-color-alpha);
color: var(--accent-color);
-
+
&:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
diff --git a/sass/_crt.scss b/sass/_crt.scss
index df5b0fc..c278ab9 100644
--- a/sass/_crt.scss
+++ b/sass/_crt.scss
@@ -11,7 +11,7 @@
color-mix(in srgb, var(--accent-color) 5%, black));
pre {
- --text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
+ --text-shadow-1: hsl(from var(--accent-color) h s l / 50%);
--text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l);
animation: flicker 0.25s alternate infinite;
margin: 0;
@@ -54,8 +54,8 @@
animation: scanlines 0.1s linear infinite;
inset: 0;
background-image: repeating-linear-gradient(to bottom,
- rgb(0 0 0 / 0.25),
- rgb(0 0 0 / 0.25) 0.125rem,
+ rgb(0 0 0 / 25%),
+ rgb(0 0 0 / 25%) 0.125rem,
transparent 0.125rem,
transparent 0.25rem);
pointer-events: none;
@@ -69,7 +69,7 @@
}
&::after {
- --scanline-color: rgb(from var(--accent-color) r g b / 0.05);
+ --scanline-color: rgb(from var(--accent-color) r g b / 5%);
display: block;
position: absolute;
animation: scanline 5s linear infinite;
diff --git a/sass/_variables.scss b/sass/_variables.scss
index c4a5f4b..5246761 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -19,13 +19,13 @@
// COLORS
--bg-color: color-mix(in srgb, var(--accent-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);
- --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);
- --fg-contrast: rgb(0 0 0 / 0.8);
- --nav-bg: rgb(25 25 25 / 0.7);
+ --fg-muted-1: rgb(255 255 255 / 5%);
+ --fg-muted-2: rgb(255 255 255 / 10%);
+ --fg-muted-3: rgb(255 255 255 / 20%);
+ --fg-muted-4: rgb(255 255 255 / 50%);
+ --fg-muted-5: rgb(255 255 255 / 60%);
+ --fg-contrast: rgb(0 0 0 / 80%);
+ --nav-bg: rgb(25 25 25 / 70%);
--blue-fg: rgb(153 193 241);
--brown-fg: rgb(205 171 143);
--green-fg: rgb(143 240 164);
@@ -42,16 +42,16 @@
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
--brown-fg: rgb(99 69 44);
- --fg-color: rgb(0 0 0 / 0.8);
+ --fg-color: rgb(0 0 0 / 80%);
--fg-contrast: rgb(255 255 255);
- --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);
+ --fg-muted-1: rgb(0 0 0 / 5%);
+ --fg-muted-2: rgb(0 0 0 / 10%);
+ --fg-muted-3: rgb(0 0 0 / 20%);
+ --fg-muted-4: rgb(0 0 0 / 50%);
+ --fg-muted-5: rgb(0 0 0 / 60%);
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
--green-fg: rgb(38 162 105);
- --nav-bg: rgb(242 242 242 / 0.7);
+ --nav-bg: rgb(242 242 242 / 70%);
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
--purple-fg: rgb(145 65 172);
@@ -109,19 +109,19 @@
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
// OPACITY
- --disabled-opacity: 0.6;
- --dim-opacity: 0.8;
- --color-opacity: 0.1;
+ --disabled-opacity: 60%;
+ --dim-opacity: 80%;
+ --color-opacity: 10%;
// SHADOWS
- --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
- --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-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
- --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);
+ --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 10%);
+ --shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 6%), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 14%), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 6%);
+ --shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 50%);
+ --shadow: 0 0 0 0.0625rem rgb(0 0 0 / 3%), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 7%), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 3%);
// STATES
- --hover: scale(1.1);
- --active: scale(0.9);
+ --hover: scale(110%);
+ --active: scale(90%);
// TRANSITIONS
--transition-long: 0.8s;
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 070a140..2fbcfb9 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -41,7 +41,7 @@