Jake Vanderwerf
3 hours ago 748c931c827c09bc59b776e41d27643af9cac332
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);
}