From 748c931c827c09bc59b776e41d27643af9cac332 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 28 May 2026 19:15:07 +0000
Subject: [PATCH] =gitblit setup
---
feed.css | 159 ++++++++++++++++++++++++++---------------------------
1 files changed, 78 insertions(+), 81 deletions(-)
diff --git a/feed.css b/feed.css
index 20f1d7f..56009af 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"] {
@@ -54,10 +54,10 @@
position: relative;
border-radius: 0.5rem;
overflow: hidden;
- background: var(--base-50);
+ background: rgb(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 {
@@ -160,7 +160,7 @@
}
.label a:hover {
- color: var(--action-0);
+ color: rgb(var(--action-0));
}
/* Favorite Button */
@@ -169,7 +169,7 @@
top: .5rem;
right: .5rem;
z-index: 10;
- background: var(--overlay-medium);
+ background: rgba(var(--base),var(--op-4));
border-radius: 50%;
box-shadow: var(--subtle);
border: none;
@@ -180,13 +180,13 @@
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
}
button.favourite:hover {
transform: scale(1.1);
- color: var(--action-0);
- background: var(--base);
+ color: rgb(var(--action-0));
+ background: rgb(var(--base));
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
@@ -219,10 +219,10 @@
/* 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);
+ background-color: rgb(var(--base-50));
}
.feed-filters summary:after {
position:absolute;
@@ -240,19 +240,19 @@
width: fit-content;
height: fit-content;
cursor: pointer;
- border: 1px solid var(--base-200);
+ border: 1px solid rgb(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 {
margin-right: .5rem;
}
.type-filter:hover {
- color: var(--action-0);
- border-color: var(--action-0);
- transition: var(--transition-color);
+ color: rgb(var(--action-0));
+ border-color: rgb(var(--action-0));
+ 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 {
@@ -329,7 +329,7 @@
background-color: transparent;
}
.has-filters.filters {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
.filter-group {
display: flex;
@@ -355,7 +355,7 @@
max-width: none!important;
width: 100%;
height: 100%;
- background: var(--overlay-medium);
+ background: rgba(var(--base),var(--op-4));
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
@@ -367,10 +367,10 @@
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.feed-overlay-content {
- background: var(--base);
+ background: rgb(var(--base));
padding: 2rem;
border-radius: 1rem;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base),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;
}
@@ -406,7 +403,7 @@
}
.loading .loading-dots {
- color: var(--action-0);
+ color: rgb(var(--action-0));
width: 4px;
aspect-ratio: 1;
border-radius: 50%;
@@ -421,7 +418,7 @@
grid-column-end: 2;
text-align: center;
padding: 2rem;
- background: var(--base);
+ background: rgb(var(--base));
border-radius: 1rem;
margin: 0 auto;
max-width: 600px;
@@ -432,7 +429,7 @@
font-family: var(--heading);
font-size: clamp(1.5rem, 3vw, 2.5rem);
margin: 0 0 2rem 0;
- color: var(--action-0);
+ color: rgb(var(--action-0));
}
.feed-empty-state p {
@@ -443,7 +440,7 @@
}
.feed-empty-state p:last-child {
- color: var(--action-0);
+ color: rgb(var(--action-0));
margin-top: 2rem;
}
@@ -453,7 +450,7 @@
box-shadow: none;
}
50% {
- box-shadow: 0 0 0 4px var(--action-0);
+ box-shadow: 0 0 0 4px rgb(var(--action-0));
}
}
@@ -483,7 +480,7 @@
.artist-tattoos a:has(img) {
overflow: hidden;
- background-color: var(--base-100);
+ background-color: rgb(var(--base-100));
}
.artist-tattoos a:not(.feed-image) img{
width: 100%;
@@ -506,9 +503,9 @@
bottom: 0;
left: 0;
right: 0;
- background-color: var(--overlay-light);
+ background-color: rgba(var(--base),var(--op-3));
backdrop-filter: blur(5px);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
z-index: 1;
padding: .25rem .25rem .25rem 1.1rem;
}
@@ -533,8 +530,8 @@
width: fit-content;
margin: 1rem auto!important;
color: transparent;
- -webkit-text-stroke: 1px var(--contrast);
- --g: conic-gradient(var(--action-0) 0 0) no-repeat text;
+ -webkit-text-stroke: 1px rgb(var(--contrast));
+ --g: conic-gradient(rgb(var(--action-0)) 0 0) no-repeat text;
background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
animation: l17-0 1s linear infinite alternate,
l17-1 2s linear infinite;
@@ -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 {
@@ -634,26 +631,26 @@
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
- background: var(--base-200);
- color: var(--contrast-200);
+ background: rgb(var(--base-200));
+ color: rgb(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 {
- background: var(--action-0);
+ background: rgb(var(--action-0));
transform: translateY(-2px);
}
.load-more:focus-visible {
- outline: 2px solid var(--action-0);
+ outline: 2px solid rgb(var(--action-0));
outline-offset: 2px;
}
@@ -904,21 +901,21 @@
position: relative;
text-align: center;
margin: 1rem 0;
- border-bottom: 1px solid var(--base-200);
+ border-bottom: 1px solid rgb(var(--base-200));
}
.term-divider span {
- background: var(--base);
+ background: rgb(var(--base));
padding: 0 1rem;
- color: var(--contrast);
+ color: rgb(var(--contrast));
font-size: 0.9rem;
position: relative;
top: 0.5em;
}
.common-term {
- background: var(--base-50);
- border-radius: var(--innerRadius);
+ background: rgb(var(--base-50));
+ border-radius: var(--radius);
}
.loading-indicator {
@@ -927,11 +924,11 @@
justify-content: center;
gap: 0.5rem;
padding: 1rem;
- color: var(--contrast-100);
+ color: rgb(var(--contrast-100));
font-size: 0.9rem;
}
-.loading-indicator svg {
+.loading-indicator .icon {
animation: spin 1s linear infinite;
}
@@ -939,8 +936,8 @@
text-align: center;
padding: 0.5rem;
font-size: 0.9rem;
- color: var(--contrast-100);
- border-top: 1px solid var(--base-100);
+ color: rgb(var(--contrast-100));
+ border-top: 1px solid rgb(var(--base-100));
}
@keyframes spin {
@@ -952,7 +949,7 @@
.term-breadcrumb {
margin-bottom: 1rem;
padding: 0.5rem;
- background: var(--base-50);
+ background: rgb(var(--base-50));
border-radius: 4px;
}
@@ -962,15 +959,15 @@
gap: 0.5rem;
border: none;
background: none;
- color: var(--contrast);
+ color: rgb(var(--contrast));
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.back-to-parent:hover {
- background: var(--base-100);
+ background: rgb(var(--base-100));
}
.term-row {
@@ -986,7 +983,7 @@
background: none;
padding: 0.25rem;
cursor: pointer;
- color: var(--contrast);
+ color: rgb(var(--contrast));
display: flex;
align-items: center;
justify-content: center;
@@ -995,7 +992,7 @@
}
.toggle-children:hover {
- background: var(--base-50);
+ background: rgb(var(--base-50));
}
.loading-indicator {
@@ -1009,8 +1006,8 @@
.loading-indicator .loading {
width: 16px;
height: 16px;
- border: 2px solid var(--base-100);
- border-top-color: var(--contrast);
+ border: 2px solid rgb(var(--base-100));
+ border-top-color: rgb(var(--contrast));
border-radius: 50%;
animation: spin 1s linear infinite;
}
@@ -1025,7 +1022,7 @@
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.5rem;
- background: var(--base-50);
+ background: rgb(var(--base-50));
border-radius: 4px;
}
@@ -1042,16 +1039,16 @@
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
- color: var(--contrast);
- font-size: var(--small);
+ color: rgb(var(--contrast));
+ font-size: var(--txt-small);
}
.term-breadcrumb button:hover {
- background: var(--base-100);
+ background: rgb(var(--base-100));
}
.path-separator {
- color: var(--contrast-50);
+ color: rgb(var(--contrast-50));
}
.path-level {
@@ -1061,12 +1058,12 @@
.create-term-section {
margin-top: 2rem;
padding-top: 1rem;
- border-top: 1px solid var(--base-100);
+ border-top: 1px solid rgb(var(--base-100));
}
.suggestion-prompt {
- font-size: var(--small);
- color: var(--contrast-50);
+ font-size: var(--txt-small);
+ color: rgb(var(--contrast-50));
margin-bottom: 1rem;
}
@@ -1089,19 +1086,19 @@
.name-row input {
width: 100%;
padding: 0.5rem;
- border: 2px solid var(--base-100);
+ border: 2px solid rgb(var(--base-100));
border-radius: 4px;
- background: var(--base);
- color: var(--contrast);
+ background: rgb(var(--base));
+ color: rgb(var(--contrast));
}
.name-row input:focus {
- border-color: var(--action-0);
+ border-color: rgb(var(--action-0));
outline: none;
}
.parent-row {
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.parent-row label {
@@ -1114,7 +1111,7 @@
dialog[open].gallery-modal {
width: calc(100vw - var(--padding) * 2);
height: 99vh;
- background: var(--base);
+ background: rgb(var(--base));
display: flex;
align-items: center;
justify-content: center;
@@ -1165,7 +1162,7 @@
z-index: 5;
transform: translateY(-50%);
border: none;
- color: var(--contrast);
+ color: rgb(var(--contrast));
cursor: pointer;
padding: 1rem;
transition: color 0.3s ease;
@@ -1174,7 +1171,7 @@
align-items: center;
}
.gallery-nav:hover {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base),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),var(--op-3));
padding: 0;
}
.gallery-content details:hover,
.gallery-content details[open] {
- background-color: var(--overlay-heavy);
+ background-color: rgba(var(--base),var(--op-6));
backdrop-filter: blur(5px);
}
--
Gitblit v1.10.0