diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0a70d0..84fc1be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.0.0...main)
+### Changed
+
+- Scale up the blurred article banner in article list on hover.
+- Use decimals instead of percents (again).
+
## [5.0.0](https://codeberg.org/daudix/duckquill/compare/v4.8.0...v5.0.0)
### Added
diff --git a/content/demo/index.md b/content/demo/index.md
index c1acfe1..7dbb046 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -747,7 +747,7 @@ You know, Duckquill is a pretty dumb name. I
if (contrastColorLight) {
styles += `
:root {
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
}
`;
} else {
@@ -761,11 +761,11 @@ You know, Duckquill is a pretty dumb name. I
if (contrastColorDark) {
styles += `
[data-theme="dark"] {
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
}
}
`;
diff --git a/content/tricks/index.md b/content/tricks/index.md
index d94fa3c..fc37f47 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 / 90%), rgb(0 0 0 / 90%));
+ --bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
}
@else {
- --bg-overlay: linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%));
+ --bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
}
}
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 0412c3d..0cf6925 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -21,6 +21,10 @@
&:hover {
outline-color: var(--accent-color);
outline-offset: 0.5rem;
+
+ .blurnail {
+ transform: var(--hover);
+ }
}
.heading {
@@ -189,7 +193,6 @@
&.hot {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9a6.005 6.005 0 0 0 3.969 5.648c-.492-.84-.367-1.96.703-3.015 2.14-2.11 1.558-2.735 1.558-2.735 2.266 1.149-.32 3.137.418 3.88.563.558 1.758-1.391 1.77-2.184.848.96 1.246 1.676 1.246 2.75q0 .273-.035.52c2.512-1.805 3.273-5.41.46-8.184C8.095 1.742 9.185.973 9.185.973m0 0'/%3E%3C/svg%3E");
- // --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9c0 3.313 2.688 6 6 6 5 0 8-5.465 4.09-9.32C8.094 1.742 9.184.973 9.184.973m0 0'/%3E%3C/svg%3E");
background-color: var(--red-bg);
&::before {
@@ -326,6 +329,7 @@
opacity: var(--dim-opacity);
z-index: -2;
filter: var(--blurnail-blur);
+ transition: var(--transition-longer);
inset: 0;
background-image: var(--blurnail);
background-position: center;
diff --git a/sass/_article.scss b/sass/_article.scss
index 09fbcd8..86fe370 100644
--- a/sass/_article.scss
+++ b/sass/_article.scss
@@ -94,14 +94,14 @@
@keyframes toc-dropdown-open {
from {
- transform: scale(50%) translate(1rem, 1rem);
+ transform: scale(0.5) translate(1rem, 1rem);
opacity: 0;
}
}
@keyframes toc-dropdown-open-rtl {
from {
- transform: scale(50%) translate(-1rem, 1rem);
+ transform: scale(0.5) translate(-1rem, 1rem);
opacity: 0;
}
}
@@ -116,7 +116,7 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1ZM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1z'/%3E%3C/svg%3E");
:root[dir*="rtl"] & {
- transform: scaleX(-100%);
+ transform: scaleX(-1);
}
}
}
diff --git a/sass/_crt.scss b/sass/_crt.scss
index c278ab9..df5b0fc 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 / 50%);
+ --text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
--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 / 25%),
- rgb(0 0 0 / 25%) 0.125rem,
+ rgb(0 0 0 / 0.25),
+ rgb(0 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 / 5%);
+ --scanline-color: rgb(from var(--accent-color) r g b / 0.05);
display: block;
position: absolute;
animation: scanline 5s linear infinite;
diff --git a/sass/_external.scss b/sass/_external.scss
index db3b1f6..a0e7a9c 100644
--- a/sass/_external.scss
+++ b/sass/_external.scss
@@ -10,6 +10,6 @@ a.external::after {
content: "";
:root[dir*="rtl"] & {
- transform: scaleX(-100%);
+ transform: scaleX(-1);
}
}
diff --git a/sass/_input.scss b/sass/_input.scss
index 20c66c8..9aa20fb 100644
--- a/sass/_input.scss
+++ b/sass/_input.scss
@@ -20,6 +20,10 @@ input[type="color"] {
&:hover {
background-color: var(--fg-muted-1);
+
+ &:checked {
+ background-color: var(--accent-color);
+ }
}
}
}
@@ -29,7 +33,7 @@ input[type="checkbox"] {
&::before {
display: block;
position: absolute;
- transform: scale(50%);
+ transform: scale(0.5);
opacity: 0;
transition: var(--transition);
background-color: var(--contrast-color);
@@ -40,16 +44,6 @@ input[type="checkbox"] {
border: 0.15rem solid transparent;
background-color: var(--accent-color);
- &:disabled {
- border: 0.15rem solid transparent;
- background-color: var(--accent-color-alpha);
-
- &::before {
- opacity: 0.8;
- background-color: var(--fg-color);
- }
- }
-
&::before {
transform: scale(1);
opacity: 1;
diff --git a/sass/_media.scss b/sass/_media.scss
index 3861833..95423e8 100644
--- a/sass/_media.scss
+++ b/sass/_media.scss
@@ -76,7 +76,7 @@ video {
&.spoiler,
&[src*="#spoiler"] {
opacity: var(--dim-opacity);
- clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
+ clip-path: inset(0 0 0 0 round var(--rounded-corner));
filter: blur(1rem);
&:hover,
@@ -89,7 +89,7 @@ video {
&.solid,
&[src*="#solid"] {
clip-path: none;
- filter: brightness(0%) contrast(50%);
+ filter: brightness(0) contrast(0.5);
box-shadow: none;
&:hover,
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 52a4e90..ce2660b 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -241,7 +241,7 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E");
:root[dir*="rtl"] & {
- transform: scaleX(-100%);
+ transform: scaleX(-1);
}
}
@@ -249,7 +249,7 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
:root[dir*="rtl"] & {
- transform: scaleX(-100%);
+ transform: scaleX(-1);
}
}
@@ -269,6 +269,7 @@
}
.active {
+ box-shadow: var(--edge-highlight);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
@@ -283,7 +284,7 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.594 0 0 3.594 0 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8m0 1.941c3.36 0 6.059 2.7 6.059 6.059s-2.7 6.059-6.059 6.059zm0 0'/%3E%3C/svg%3E");
:root[dir*="rtl"] & {
- transform: scaleX(-100%);
+ transform: scaleX(-1);
}
}
@@ -297,7 +298,7 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M.918 8.004a7.072 7.072 0 0 0 14.102.793 1.01 1.01 0 0 0-.457-.957 1 1 0 0 0-1.063-.004 3.9 3.9 0 0 1-2.031.578 3.89 3.89 0 0 1-3.883-3.883c0-.715.203-1.422.578-2.031a1 1 0 0 0-.004-1.062c-.207-.32-.578-.5-.957-.458A7.07 7.07 0 0 0 .918 8.004M5.586 4.53a5.877 5.877 0 0 0 8.965 5.004l-1.52-.96a5.09 5.09 0 0 1-5.035 4.507 5.09 5.09 0 0 1-5.078-5.078 5.09 5.09 0 0 1 4.508-5.035l-.961-1.52a5.9 5.9 0 0 0-.88 3.082m0 0'/%3E%3C/svg%3E");
:root[dir*="rtl"] & {
- transform: scaleX(-100%);
+ transform: scaleX(-1);
}
}
}
diff --git a/sass/_tags.scss b/sass/_tags.scss
index 031a9c7..65cc639 100644
--- a/sass/_tags.scss
+++ b/sass/_tags.scss
@@ -55,18 +55,14 @@
.count {
display: inline-block;
transition: var(--transition);
- border-radius: 0 999px 999px 0;
+ border-start-end-radius: 999px;
+ border-end-end-radius: 999px;
background-color: var(--fg-muted-1);
padding-inline-start: 0.5rem;
padding-inline-end: 0.625rem;
padding-block-start: 0.375rem;
padding-block-end: 0.375rem;
-
font-variant-numeric: tabular-nums;
-
- :root[dir*="rtl"] & {
- border-radius: 999px 0 0 999px;
- }
}
}
}
diff --git a/sass/_typography.scss b/sass/_typography.scss
index 913b8c4..386a9a7 100644
--- a/sass/_typography.scss
+++ b/sass/_typography.scss
@@ -256,7 +256,7 @@ details {
&[open] summary {
&::before {
- transform: scaleY(-100%);
+ transform: scaleY(-1);
}
& ~ * {
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 0164e8e..d84dbfb 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 / 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%);
+ --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);
--blue-fg: rgb(153 193 241);
--brown-fg: rgb(205 171 143);
--green-fg: rgb(143 240 164);
@@ -34,7 +34,7 @@
--yellow-fg: rgb(248 228 92);
// FILTERS
- --blurnail-blur: brightness(25%) blur(1rem);
+ --blurnail-blur: brightness(0.25) blur(1rem);
color-scheme: dark;
}
@@ -46,16 +46,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 / 80%);
+ --fg-color: rgb(0 0 0 / 0.8);
--fg-contrast: rgb(255 255 255);
- --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%);
+ --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);
--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 / 70%);
+ --nav-bg: rgb(242 242 242 / 0.7);
--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);
@@ -72,8 +72,8 @@
--rounded-corner-small: 0.5rem;
// FILTERS
- --blur: saturate(180%) blur(0.75rem);
- --blurnail-blur: contrast(25%) brightness(175%) blur(1rem);
+ --blur: saturate(1.8) blur(0.75rem);
+ --blurnail-blur: contrast(0.25) brightness(1.75) blur(1rem);
// FONT SIZES
--font-size-xx-small: 0.625rem;
@@ -114,19 +114,19 @@
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
// OPACITY
- --color-opacity: 10%;
- --dim-opacity: 80%;
- --disabled-opacity: 60%;
+ --color-opacity: 0.1;
+ --dim-opacity: 0.8;
+ --disabled-opacity: 0.6;
// SHADOWS
- --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 10%);
- --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%);
- --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%);
+ --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
+ --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);
+ --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);
// STATES
- --hover: scale(110%);
- --active: scale(90%);
+ --hover: scale(1.1);
+ --active: scale(0.9);
// TRANSITIONS
--transition: 0.2s;
diff --git a/templates/partials/variables.html b/templates/partials/variables.html
index 7380d2e..2bf2de3 100644
--- a/templates/partials/variables.html
+++ b/templates/partials/variables.html
@@ -9,11 +9,11 @@
{%- endif -%}
{%- if page.extra.fix_contrast -%}
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
{%- elif section.extra.fix_contrast -%}
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
{%- elif config.extra.fix_contrast -%}
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
{%- else -%}
--contrast-color: #fff;
{%- endif -%}
@@ -53,12 +53,12 @@
{%- if page.extra.fix_contrast_dark or section.extra.fix_contrast_dark or config.extra.fix_contrast_dark -%}
[data-theme="dark"] {
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
- --contrast-color: rgb(0 0 0 / 80%);
+ --contrast-color: rgb(0 0 0 / 0.8);
}
}
{%- endif -%}