From d4dd4ccfdceaaff4e5cb409a96b3c802d762d8d8 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sat, 14 Feb 2026 19:16:38 +0000
Subject: [PATCH] =minor changes to css, mainly the item-grid in the feedblock extending past the body width
---
feed.css | 63 +++++++++++++++----------------
1 files changed, 30 insertions(+), 33 deletions(-)
diff --git a/feed.css b/feed.css
index 20f1d7f..97057b1 100644
--- a/feed.css
+++ b/feed.css
@@ -5,11 +5,11 @@
}
.feed-block > *:not(.feed-grid, h2) {
- max-width: var(--alignWide);
+ max-width: var(--wide);
margin: 1rem var(--mr) 1rem var(--ml);
}
.feed-block > h2 {
- max-width: var(--maxWidth);
+ max-width: var(--content);
}
.feed-block[data-loading="true"] {
@@ -57,7 +57,7 @@
background: var(--base-50);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
opacity: 0;
- transition: opacity var(--transition-base) var(--delay);
+ transition: opacity var(--trans-base) var(--delay);
height: fit-content;
padding: 0;
}
@@ -91,7 +91,7 @@
width: 100%;
height: 100%;
object-fit: cover;
- transition: transform var(--timing) var(--function);
+ transition: transform var(--trans-t) var(--trans-fn);
}
.artist-tattoos a:hover img,
@@ -108,7 +108,7 @@
margin: 0!important;
font-size: 1.1rem;
font-family: var(--body);
- font-weight: var(--bWeight);
+ font-weight: var(--fw-b);
text-align: center;
}
.item-info span {
@@ -169,7 +169,7 @@
top: .5rem;
right: .5rem;
z-index: 10;
- background: var(--overlay-medium);
+ background: rgba(var(--base-rgb),var(--op-4));
border-radius: 50%;
box-shadow: var(--subtle);
border: none;
@@ -180,7 +180,7 @@
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
}
button.favourite:hover {
@@ -219,7 +219,7 @@
/* position: relative;*/
/* justify-content: flex-start;*/
/* gap: .5rem;*/
- /* border-radius: var(--innerRadius);*/
+ /* border-radius: var(--radius);*/
}
.feed-filters details[open] summary {
background-color: var(--base-50);
@@ -243,7 +243,7 @@
border: 1px solid var(--base-200);
border-radius: 4px;
font-size: .875rem;
- transition: border-color var(--transition-base);
+ transition: border-color var(--trans-base);
margin-bottom: .5rem;
}
.filter-toggle .icon {
@@ -252,7 +252,7 @@
.type-filter:hover {
color: var(--action-0);
border-color: var(--action-0);
- transition: var(--transition-color);
+ transition: var(--trans-color);
}
.feed-filters .type-filter > label {
flex-direction: column;
@@ -316,7 +316,7 @@
top: .5rem;
right: 4rem;
opacity: 0;
- transition: transform var(--timing) var(--function);
+ transition: transform var(--trans-t) var(--trans-fn);
transition-property: max-width, transform;
}
.feed-filters input:checked + label .label {
@@ -355,7 +355,7 @@
max-width: none!important;
width: 100%;
height: 100%;
- background: var(--overlay-medium);
+ background: rgba(var(--base-rgb),var(--op-4));
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
@@ -370,7 +370,7 @@
background: var(--base);
padding: 2rem;
border-radius: 1rem;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
text-align: center;
width: min(400px, 60vw);
}
@@ -385,10 +385,7 @@
width: 3em;
height: 3em;
}
-.loading .loading-message .icon svg {
- width: 100%;
- height: 100%;
- margin-right: 1rem;
+.loading .loading-message .icon {
animation: dance 2s ease-in-out infinite;
transition: color 0.3s ease;
}
@@ -506,9 +503,9 @@
bottom: 0;
left: 0;
right: 0;
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base-rgb),var(--op-3));
backdrop-filter: blur(5px);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
z-index: 1;
padding: .25rem .25rem .25rem 1.1rem;
}
@@ -569,8 +566,8 @@
opacity: 1;
transform: scaleY(1);
transform-origin: bottom;
- transition: opacity var(--transition-base),
- transform var(--transition-base);
+ transition: opacity var(--trans-base),
+ transform var(--trans-base);
}
.loading .changing .loading-message p {
@@ -638,13 +635,13 @@
color: var(--contrast-200);
border: none;
border-radius: 4px;
- font-size: var(--medium);
+ font-size: var(--txt-medium);
cursor: pointer;
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
}
.load-more[hidden]{
opacity: 0;
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
}
.load-more:hover {
@@ -918,7 +915,7 @@
.common-term {
background: var(--base-50);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
}
.loading-indicator {
@@ -931,7 +928,7 @@
font-size: 0.9rem;
}
-.loading-indicator svg {
+.loading-indicator .icon {
animation: spin 1s linear infinite;
}
@@ -966,7 +963,7 @@
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.back-to-parent:hover {
@@ -1043,7 +1040,7 @@
border-radius: 4px;
cursor: pointer;
color: var(--contrast);
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.term-breadcrumb button:hover {
@@ -1065,7 +1062,7 @@
}
.suggestion-prompt {
- font-size: var(--small);
+ font-size: var(--txt-small);
color: var(--contrast-50);
margin-bottom: 1rem;
}
@@ -1101,7 +1098,7 @@
}
.parent-row {
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.parent-row label {
@@ -1174,7 +1171,7 @@
align-items: center;
}
.gallery-nav:hover {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
}
.gallery-nav:hover {
@@ -1202,11 +1199,11 @@
bottom: 1rem;
left: 2rem;
width: calc(100% - 4rem);
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base-rgb),var(--op-3));
padding: 0;
}
.gallery-content details:hover,
.gallery-content details[open] {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base-rgb),var(--op-6));
backdrop-filter: blur(5px);
}
--
Gitblit v1.10.0