blisstown/bliss.town
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: blisstown:6e5aad77ddc20478b97f4ac690d362ca8baeb784
Branches Tags
blisstown:main
blisstown:v2
..
compare: blisstown:04951a75d5766b5cca2e2ed38755fa6f10daf7b3
Branches Tags
blisstown:main
blisstown:v2

No commits in common. "6e5aad77ddc20478b97f4ac690d362ca8baeb784" and "04951a75d5766b5cca2e2ed38755fa6f10daf7b3" have entirely different histories.
6e5aad77dd ... 04951a75d5

17 changed files with 159 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/avatars/arispacegirl.avif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 101 KiB

BIN
public/img/avatars/arispacegirl.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
public/img/avatars/karakara.avif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 97 KiB

BIN
public/img/avatars/karakara.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
public/img/avatars/loudar.avif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 78 KiB

BIN
public/img/avatars/loudar.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
public/img/avatars/vimae.avif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
public/img/avatars/vimae.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/img/avatars/zaire.avif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
public/img/avatars/zaire.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/img/projects/campfire.avif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/img/projects/campfire.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

76
public/index.html
View file

@ -16,6 +16,7 @@
<link rel="stylesheet" type="text/css" href="/style/main.css">
<link rel="stylesheet" type="text/css" href="/style/index.css">
<script type="module" src="/script/index.js" defer></script>
</head>
<body>
<header>
@ -51,63 +52,67 @@
<div id="crew-list">
<div class="crew-item">
<div class="crew-avatar">
<img src="/img/avatars/arispacegirl.avif"
alt="ari melody photo"
class="avatar"
width=128 height=128>
</div>
<img src="/img/avatars/arispacegirl.jpg" alt="ari melody photo" class="avatar" width=64 height=64>
<div class="crew-info">
<h3>ari</h3>
<p><a href="https://arimelody.space" class="handle">@arispacegirl</a></p>
<div class="crew-tags">
<span class="crew-tag">she/her</span>
<span class="crew-tag">developer</span>
<span class="crew-tag">musician</span>
<span class="crew-tag">artist</span>
</div>
</div>
</div>
<div class="crew-item">
<div class="crew-avatar">
<img src="/img/avatars/vimae.avif"
alt="vimae photo"
class="avatar"
width=128 height=128>
</div>
<img src="/img/avatars/vimae.jpg" alt="vimae photo" class="avatar" width=64 height=64>
<div class="crew-info">
<h3>mae</h3>
<p><a href="https://mae.wtf" class="handle">@vimae</a></p>
<div class="crew-tags">
<span class="crew-tag">she/they</span>
<span class="crew-tag">musician</span>
<span class="crew-tag">artist</span>
<span class="crew-tag">developer</span>
</div>
</div>
</div>
<div class="crew-item">
<div class="crew-avatar">
<img src="/img/avatars/zaire.avif"
alt="claire photo"
class="avatar"
width=128 height=128>
</div>
<img src="/img/avatars/zaire.jpg" alt="claire photo" class="avatar" width=64 height=64>
<div class="crew-info">
<h3>claire</h3>
<p><a href="https://supitszaire.com" class="handle">@zaire</a></p>
<div class="crew-tags">
<span class="crew-tag">she/her</span>
<span class="crew-tag">musician</span>
<span class="crew-tag">artist</span>
<span class="crew-tag">developer</span>
</div>
</div>
</div>
<div class="crew-item">
<div class="crew-avatar">
<img src="/img/avatars/karakara.avif"
alt="julia photo"
class="avatar"
width=128 height=128>
</div>
<img src="/img/avatars/karakara.png" alt="julia photo" class="avatar" width=64 height=64>
<div class="crew-info">
<h3>julia</h3>
<p><a href="https://insertdomain.name" class="handle">@karakara</a></p>
<div class="crew-tags">
<span class="crew-tag">she/her</span>
<span class="crew-tag">developer</span>
<span class="crew-tag">artist</span>
</div>
</div>
</div>
<div class="crew-item">
<div class="crew-avatar">
<img src="/img/avatars/loudar.avif"
alt="alex photo"
class="avatar"
width=128 height=128>
</div>
<img src="/img/avatars/loudar.jpg" alt="alex photo" class="avatar" width=64 height=64>
<div class="crew-info">
<h3>alex</h3>
<p><a href="https://illegal.trading" class="handle">@loudar</a></p>
<div class="crew-tags">
<span class="crew-tag">he/they</span>
<span class="crew-tag">developer</span>
<span class="crew-tag">musician</span>
<span class="crew-tag">artist</span>
</div>
</div>
</div>
</div>
@ -121,15 +126,12 @@
<div id="project-list">
<div class="project-item">
<div class="project-item-banner">
<img src="/img/projects/campfire.avif" alt="screenshot of the campfire timeline" width=256>
<img src="/img/projects/campfire.png" alt="screenshot of the campfire timeline" width=256>
</div>
<div class="project-info">
<h3>
<a href="https://campfire.bliss.town" class="col-on-primary">
campfire
</a>
</h3>
<h3>campfire</h3>
<p>a pretty, modern web client for the fediverse!</p>
<a href="https://campfire.bliss.town" class="col-on-primary">campfire.bliss.town</a>
</div>
</div>
</div>
@ -140,7 +142,5 @@
made with <span role="img" aria-label="love">♥</span> by <a href="https://arimelody.space">ari</a>, 2025.
</p>
</footer>
<script type="module" src="/script/index.js" defer></script>
</body>
</html>

15
public/script/index.js
View file

@ -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);
});
});

2
public/script/main.js
View file

@ -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();

201
public/style/index.css
View file

@ -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;
}
}

12
public/style/main.css
View file

@ -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 {