diff --git a/public/img/avatars/arispacegirl.avif b/public/img/avatars/arispacegirl.avif deleted file mode 100644 index e512881..0000000 Binary files a/public/img/avatars/arispacegirl.avif and /dev/null differ diff --git a/public/img/avatars/arispacegirl.jpg b/public/img/avatars/arispacegirl.jpg new file mode 100644 index 0000000..bf18f15 Binary files /dev/null and b/public/img/avatars/arispacegirl.jpg differ diff --git a/public/img/avatars/karakara.avif b/public/img/avatars/karakara.avif deleted file mode 100644 index a5a7c74..0000000 Binary files a/public/img/avatars/karakara.avif and /dev/null differ diff --git a/public/img/avatars/karakara.png b/public/img/avatars/karakara.png new file mode 100644 index 0000000..d6f8053 Binary files /dev/null and b/public/img/avatars/karakara.png differ diff --git a/public/img/avatars/loudar.avif b/public/img/avatars/loudar.avif deleted file mode 100644 index 173d50c..0000000 Binary files a/public/img/avatars/loudar.avif and /dev/null differ diff --git a/public/img/avatars/loudar.jpg b/public/img/avatars/loudar.jpg new file mode 100644 index 0000000..a8be834 Binary files /dev/null and b/public/img/avatars/loudar.jpg differ diff --git a/public/img/avatars/vimae.avif b/public/img/avatars/vimae.avif deleted file mode 100644 index ef2d2af..0000000 Binary files a/public/img/avatars/vimae.avif and /dev/null differ diff --git a/public/img/avatars/vimae.jpg b/public/img/avatars/vimae.jpg new file mode 100644 index 0000000..385a7c9 Binary files /dev/null and b/public/img/avatars/vimae.jpg differ diff --git a/public/img/avatars/zaire.avif b/public/img/avatars/zaire.avif deleted file mode 100644 index 86f6325..0000000 Binary files a/public/img/avatars/zaire.avif and /dev/null differ diff --git a/public/img/avatars/zaire.jpg b/public/img/avatars/zaire.jpg new file mode 100644 index 0000000..bfde9fd Binary files /dev/null and b/public/img/avatars/zaire.jpg differ diff --git a/public/img/projects/campfire.avif b/public/img/projects/campfire.avif deleted file mode 100644 index 7f94722..0000000 Binary files a/public/img/projects/campfire.avif and /dev/null differ diff --git a/public/img/projects/campfire.png b/public/img/projects/campfire.png new file mode 100644 index 0000000..e3e81a3 Binary files /dev/null and b/public/img/projects/campfire.png differ diff --git a/public/index.html b/public/index.html index 25fac0a..b52fd80 100644 --- a/public/index.html +++ b/public/index.html @@ -16,6 +16,7 @@ +
@@ -51,63 +52,67 @@
-
- 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 +
@@ -121,15 +126,12 @@
- screenshot of the campfire timeline + screenshot of the campfire timeline
-

- - campfire - -

+

campfire

a pretty, modern web client for the fediverse!

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

- - diff --git a/public/script/index.js b/public/script/index.js index 9794e18..9480ea7 100644 --- a/public/script/index.js +++ b/public/script/index.js @@ -1,8 +1,13 @@ -import { hijackClickEvent } from "./main.js"; +import { hijackClickEvent } from './main.js'; -document.addEventListener("readystatechange", () => { - document.querySelectorAll(".project-item").forEach(container => { - const link = container.querySelector("a"); - hijackClickEvent(container, link); +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); }); }); diff --git a/public/script/main.js b/public/script/main.js index c1f3aea..9da5ed9 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 6fd88c0..b338886 100644 --- a/public/style/index.css +++ b/public/style/index.css @@ -8,113 +8,116 @@ border-radius: 8px; overflow: clip; background-color: var(--primary); - box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%); + transition: background-color .2s linear; + box-shadow: 2px 2px 2px #0004; cursor: pointer; +} +.project-item:hover { + outline: 1px solid var(--on-primary); +} - .project-item-banner { - width: 256px; - height: 128px; +.project-item-banner { + width: 256px; + height: 128px; +} +.project-item-banner img { + width: 100%; + height: 100%; + object-fit: cover; +} - 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); - } +.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; } #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; - flex-wrap: wrap; - justify-content: center; - gap: 2em 4em; - - .crew-item { - width: 10em; - display: grid; - grid-template-rows: 8em 4em; - gap: .5em; - text-align: center; - transform: rotate(2deg); - - &: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); - } + gap: .2em; } -@media screen and (max-width: 900px) { - #crew-list { - #grid-template-columns: repeat(2, 1fr); +.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); +} + +@media screen and (max-width: 500px) { + .crew-tags { + flex-wrap: wrap; } } diff --git a/public/style/main.css b/public/style/main.css index 68874c0..d6ab666 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -25,11 +25,8 @@ body { color: var(--on-background); background-color: var(--background); -} -*, *::before, *::after { - transition-property: background-color, color, box-shadow, border-color, opacity; - transition-duration: .2s; + transition: color .2s linear, background-color .2s linear; } header { @@ -41,6 +38,7 @@ 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 { @@ -80,10 +78,12 @@ main { .only-light { opacity: 1; + transition: opacity .2s linear; } .only-dark { opacity: 0; + transition: opacity .2s linear; } hr { @@ -99,12 +99,14 @@ 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 { @@ -121,6 +123,7 @@ button { border: none; border-radius: 2em; cursor: pointer; + transition: color .2s linear, background-color .2s linear, transform .1s ease-out; } button:hover { @@ -137,6 +140,7 @@ footer { padding: 1em 0; text-align: center; opacity: .5; + transition: opacity .1s ease-out; } footer:hover {