Tortellini/duckling
1
0
Fork 0
forked from david-swift/duckling
Code Pull Requests Activity

Simplify article list theme #1

Browse Source
This commit is contained in:
david-swift 2025-02-25 15:16:36 +01:00
parent 8c73f86269
commit 13d648511c
2 changed files with 9 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
sass/_article-list.scss
View File

@ -8,16 +8,11 @@
--bg-overlay: var(--accent-color-alpha);
position: relative;
transition: var(--transition);
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: var(--rounded-corner);
border-start-end-radius: 2.125rem;
border-end-end-radius: 1.8125rem;
background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
background-position: center;
background-size: cover;
background-color: var(--bg-overlay);
padding: 1rem;
background-color: var(--fg-contrast-soft);
padding: 1.5rem;
overflow: hidden;
&:hover {
@ -59,7 +54,6 @@
h3 {
margin: 0;
color: var(--accent-color);
font-weight: bold;
line-height: 1;
font-family: var(--font-system-ui);
@ -92,12 +86,11 @@
margin: 0;
a {
background-color: var(--accent-color-alpha);
color: var(--accent-color);
margin-top: 10px;
&:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
}
}
}
@ -166,16 +159,6 @@
&.archive {
--bg-overlay: var(--purple-bg);
&::before {
-webkit-mask-image: var(--icon-archive);
mask-image: var(--icon-archive);
background-color: var(--purple-bg);
}
h3 {
color: var(--purple-fg);
}
.badge {
background-color: var(--purple-bg);
color: var(--purple-fg);
@ -185,27 +168,11 @@
mask-image: var(--icon-archive);
}
}
.tags a {
background-color: var(--purple-bg);
color: var(--purple-fg);
&:hover {
background-color: var(--purple-fg);
color: var(--fg-contrast);
}
}
}
&.featured {
--bg-overlay: var(--yellow-bg);
&::before {
-webkit-mask-image: var(--icon-star);
mask-image: var(--icon-star);
background-color: var(--yellow-bg);
}
&:hover {
&::before {
transform: translateY(-50%) rotate(62deg) scale(1.5);
@ -216,44 +183,20 @@
}
}
h3 {
color: var(--yellow-fg);
}
.badge {
background-color: var(--yellow-bg);
color: var(--yellow-fg);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
.icon {
-webkit-mask-image: var(--icon-star);
mask-image: var(--icon-star);
}
}
.tags a {
background-color: var(--yellow-bg);
color: var(--yellow-fg);
&:hover {
background-color: var(--yellow-fg);
color: var(--fg-contrast);
}
}
}
&.hot {
--bg-overlay: var(--red-bg);
&::before {
-webkit-mask-image: var(--icon-fire);
mask-image: var(--icon-fire);
background-color: var(--red-bg);
}
h3 {
color: var(--red-fg);
}
.badge {
background-color: var(--red-bg);
color: var(--red-fg);
@ -263,31 +206,11 @@
mask-image: var(--icon-fire);
}
}
.tags a {
background-color: var(--red-bg);
color: var(--red-fg);
&:hover {
background-color: var(--red-fg);
color: var(--fg-contrast);
}
}
}
&.poor {
--bg-overlay: var(--brown-bg);
&::before {
-webkit-mask-image: var(--icon-poop);
mask-image: var(--icon-poop);
background-color: var(--brown-bg);
}
h3 {
color: var(--brown-fg);
}
.badge {
background-color: var(--brown-bg);
color: var(--brown-fg);
@ -297,16 +220,6 @@
mask-image: var(--icon-poop);
}
}
.tags a {
background-color: var(--brown-bg);
color: var(--brown-fg);
&:hover {
background-color: var(--brown-fg);
color: var(--fg-contrast);
}
}
}
.badge {

2
sass/_variables.scss
View File

@ -26,6 +26,7 @@
--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-soft: var(--fg-muted-1);
--glass-bg: rgb(25 25 25 / 0.7);
--blue-fg: rgb(153 193 241);
--brown-fg: rgb(205 171 143);
@ -43,6 +44,7 @@
--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
--fg-color: rgb(0 0 0 / 0.8);
--fg-contrast: rgb(255 255 255);
--fg-contrast-soft: 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);