From 6e5aad77ddc20478b97f4ac690d362ca8baeb784 Mon Sep 17 00:00:00 2001 From: ari melody Date: Mon, 23 Mar 2026 21:32:25 +0000 Subject: [PATCH] css refactor :] --- public/index.html | 74 +++++++-------- public/script/index.js | 15 +-- public/script/main.js | 2 +- public/style/index.css | 201 ++++++++++++++++++++--------------------- public/style/main.css | 12 +-- 5 files changed, 146 insertions(+), 158 deletions(-) diff --git a/public/index.html b/public/index.html index ce51703..25fac0a 100644 --- a/public/index.html +++ b/public/index.html @@ -16,7 +16,6 @@ -
@@ -52,67 +51,63 @@
- ari melody photo +
+ ari melody photo +

ari

@arispacegirl

-
- she/her - developer - musician - artist -
- vimae photo +
+ vimae photo +

mae

@vimae

-
- she/they - musician - artist - developer -
- claire photo +
+ claire photo +

claire

@zaire

-
- she/her - musician - artist - developer -
- julia photo +
+ julia photo +

julia

@karakara

-
- she/her - developer - artist -
- alex photo +
+ alex photo +

alex

@loudar

-
- he/they - developer - musician - artist -
@@ -129,9 +124,12 @@ screenshot of the campfire timeline
-

campfire

+

+ + campfire + +

a pretty, modern web client for the fediverse!

- campfire.bliss.town
@@ -142,5 +140,7 @@ made with ♥ by ari, 2025.

+ + diff --git a/public/script/index.js b/public/script/index.js index 9480ea7..9794e18 100644 --- a/public/script/index.js +++ b/public/script/index.js @@ -1,13 +1,8 @@ -import { hijackClickEvent } from './main.js'; +import { hijackClickEvent } from "./main.js"; -document.addEventListener('readystatechange', () => { - document.querySelectorAll("#project-list .project-item").forEach(projectItem => { - const link = projectItem.querySelector('a'); - hijackClickEvent(projectItem, link); - }); - - document.querySelectorAll("#crew-list .crew-item .crew-info").forEach(crewItem => { - const link = crewItem.querySelector('a.handle'); - hijackClickEvent(crewItem, link); +document.addEventListener("readystatechange", () => { + document.querySelectorAll(".project-item").forEach(container => { + const link = container.querySelector("a"); + hijackClickEvent(container, link); }); }); diff --git a/public/script/main.js b/public/script/main.js index 9da5ed9..c1f3aea 100644 --- a/public/script/main.js +++ b/public/script/main.js @@ -1,4 +1,4 @@ - export function hijackClickEvent(container, link) { +export function hijackClickEvent(container, link) { container.addEventListener('click', event => { if (event.target.tagName.toLowerCase() === 'a') return; event.preventDefault(); diff --git a/public/style/index.css b/public/style/index.css index b338886..6fd88c0 100644 --- a/public/style/index.css +++ b/public/style/index.css @@ -8,116 +8,113 @@ border-radius: 8px; overflow: clip; background-color: var(--primary); - transition: background-color .2s linear; - box-shadow: 2px 2px 2px #0004; + box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%); cursor: pointer; -} -.project-item:hover { - outline: 1px solid var(--on-primary); -} -.project-item-banner { - width: 256px; - height: 128px; -} -.project-item-banner img { - width: 100%; - height: 100%; - object-fit: cover; -} + .project-item-banner { + width: 256px; + height: 128px; -.project-info { - padding: .4em .5em; -} -.project-info h3 { - margin: 0; -} -.project-info p { - font-size: .8em; - margin: 0; -} -.project-info a { - font-style: italic; - font-size: .8em; - color: var(--on-background); - opacity: .75; - transition: color .2s linear; - text-decoration: none; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .project-info { + padding: .4em .5em; + + h3 { + margin: 0 0 .2em 0; + + a { + color: var(--on-background); + } + } + + p { + font-size: .8em; + margin: 0; + } + } + + &:hover { + outline: 1px solid var(--on-primary); + } } #crew-list { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1em; -} - -.crew-item { - display: grid; - grid-template-columns: 64px 1fr; - gap: .5em; -} - -.crew-item img.avatar { - width: 64px; - height: 64px; - object-fit: cover; - border-radius: 8px; - background-color: #101010; -} - -.crew-item .crew-info { - padding: .5em; - background-color: var(--primary); - border-radius: 8px; - box-shadow: 2px 2px 2px #0004; - transition: background-color .2s linear; - cursor: pointer; -} -.crew-info:hover { - outline: 1px solid var(--on-primary); -} - -.crew-item h3 { - display: block; - margin: 0 0 -.2em 0; - transition: inherit; -} -.crew-item h3 a { - display: block; - color: inherit; -} - -.crew-item a.handle { - display: block; - font-style: italic; - font-size: .8em; - color: var(--on-background); - opacity: .75; - transition: color .2s linear; - text-decoration: none; -} - -.crew-item p { - margin: .2em 0; -} - -.crew-item .crew-tags { - margin: .5em 0 0 0; display: flex; - gap: .2em; -} + flex-wrap: wrap; + justify-content: center; + gap: 2em 4em; -.crew-item .crew-tag { - font-size: .75em; - padding: .2em .5em; - border-radius: 4px; - text-wrap: nowrap; - color: var(--on-primary); - border: 1px solid var(--on-primary); -} + .crew-item { + width: 10em; + display: grid; + grid-template-rows: 8em 4em; + gap: .5em; + text-align: center; + transform: rotate(2deg); -@media screen and (max-width: 500px) { - .crew-tags { - flex-wrap: wrap; + &:nth-child(even) { + transform: rotate(-2deg); + + &:hover .crew-avatar img.avatar { + transform: rotate(-4deg); + } + } + + .crew-avatar img.avatar, .crew-info { + box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%); + } + + &:hover .crew-avatar img.avatar { + transform: rotate(2deg); + } + } + + .crew-avatar { + img.avatar { + width: 8em; + height: 8em; + aspect-ratio: 1; + object-fit: cover; + border-radius: 8px; + background-color: var(--primary); + } + } + .crew-item:nth-child(even) .crew-avatar img.avatar { + transform: rotate(-2deg); + } + + .crew-info { + padding: .5em; + display: flex; + flex-direction: column; + background-color: var(--primary); + border-radius: 8px; + + h3, p { + margin: 0; + } + + h3 { + font-size: 1.5em; + } + + p { + font-size: .8em; + } + } + .crew-item:nth-child(odd) .crew-info:before { + transform: skew(0, 2deg) translate(1.3em, -.2em); + } +} + +@media screen and (max-width: 900px) { + #crew-list { + #grid-template-columns: repeat(2, 1fr); } } diff --git a/public/style/main.css b/public/style/main.css index d6ab666..68874c0 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -25,8 +25,11 @@ body { color: var(--on-background); background-color: var(--background); +} - transition: color .2s linear, background-color .2s linear; +*, *::before, *::after { + transition-property: background-color, color, box-shadow, border-color, opacity; + transition-duration: .2s; } header { @@ -38,7 +41,6 @@ header { border-bottom: 1px solid var(--primary); background-color: var(--background); z-index: 1000; - transition: background-color .2s linear, box-shadow .2s linear, border-color .2s linear; } header nav { @@ -78,12 +80,10 @@ main { .only-light { opacity: 1; - transition: opacity .2s linear; } .only-dark { opacity: 0; - transition: opacity .2s linear; } hr { @@ -99,14 +99,12 @@ hr::after { padding: 5px; color: var(--on-background); background: var(--background); - transition: color .2s linear, background-color .2s linear; } a { color: var(--on-primary); text-decoration: none; font-weight: bold; - transition: color .2s linear; } a:hover { @@ -123,7 +121,6 @@ button { border: none; border-radius: 2em; cursor: pointer; - transition: color .2s linear, background-color .2s linear, transform .1s ease-out; } button:hover { @@ -140,7 +137,6 @@ footer { padding: 1em 0; text-align: center; opacity: .5; - transition: opacity .1s ease-out; } footer:hover {