ari/bliss.town
ari/bliss.town
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

full page redesign; improved light theme

Browse source
This commit is contained in:
ari melody 2025-07-10 16:05:21 +01:00
parent b58290b4e5
commit 2e5ddc8dc4
Signed by: ari
GPG key ID: CF99829C92678188
9 changed files with 379 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

178
public/index.html
View file

@ -1,70 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" value="width=device-width, initial-scale=1">
<title>bliss town</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.png">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" value="width=device-width, initial-scale=1">
<title>bliss town</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.png">
<meta property="og:site_name" content="bliss town" />
<meta property="og:title" content="welcome to bliss town!" />
<meta property="og:image" content="https://bliss.town/img/og-icon.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://bliss.town" />
<meta property="og:site_name" content="bliss town" />
<meta property="og:title" content="welcome to bliss town!" />
<meta property="og:image" content="https://bliss.town/img/og-icon.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://bliss.town" />
<link rel="stylesheet" type="text/css" href="/style/main.css">
<script type="application/javascript" src="/script/vendor/htmx.min.js"></script>
</head>
<body>
<header>
<nav hx-boost="true" hx-target="body" hx-swap="outerHTML show:window:top">
<a href="/">home</a>
<span aria-hidden="true">-</span>
<a href="/links">links</a>
<span aria-hidden="true">-</span>
<a href="/paste">paste</a>
<span aria-hidden="true">-</span>
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav>
</header>
<main class="center-content">
<div class="title-icon">
<img src="/img/icon-light.svg" class="icon-light" width=64 height=64 />
<img src="/img/icon-dark.svg" class="icon-dark" width=64 height=64 />
<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>
<nav>
<span class="nav-title">
<span class="title-icon">
<img src="/img/icon-light.svg" class="only-light" width=26 height=26 />
<img src="/img/icon-dark.svg" class="only-dark" width=26 height=26 />
</span>
<strong>bliss<span class="col-on-primary">.</span>town</strong>
</span>
<a href="/">home</a>
<a href="https://git.arimelody.me/ari/bliss.town">source</a>
</nav>
</header>
<main>
<h1>
<span class="title-icon">
<img src="/img/icon-light.svg" class="only-light" width=64 height=64 />
<img src="/img/icon-dark.svg" class="only-dark" width=64 height=64 />
</span>
welcome to bliss<span class="col-on-primary">.</span>town!
</h1>
<p>
we're a collective of online creatives.
</p>
<hr/>
<div id="crew">
<h2>check us out!</h2>
<div id="crew-list">
<div class="crew-item">
<img src="https://arimelody.space/img/favicon.png" 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>
<h1>welcome to bliss<span class="col-primary-bg">.</span>town!</h1>
<hr>
<p>
we're not hosting much at this domain just yet.
<br>
check back later for updates!
</p>
<button id="friendly-button">friendly button</button>
<script>
function hook_button() {
const button = document.getElementById("friendly-button");
if (!button) return;
let clicks = 0;
let saved_clicks = window.localStorage.getItem("friendly-button-clicks");
if (saved_clicks) {
clicks = saved_clicks;
button.innerText = `clicked ${clicks} times!`;
}
button.addEventListener("click", () => {
button.innerText = `clicked ${++clicks} times!`;
window.localStorage.setItem("friendly-button-clicks", clicks);
});
}
document.addEventListener("ready", hook_button);
document.addEventListener("htmx:load", hook_button);
</script>
</main>
<footer>
<p>
made with <span role="img" aria-label="love">♥</span> by <a href="https://arimelody.me">ari</a>, 2024.
</p>
</footer>
</body>
</div>
<div class="crew-item">
<img src="https://media.wetdry.world/accounts/avatars/107/412/233/663/540/779/original/9e4353266869a4cd.jpeg" 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">
<img src="https://44.media.tumblr.com/feb33c9c0151a46d09a55a6e0d7fa0f3/34631bc4c40620ff-2c/s128x128u_c1_f1/b06e02240d23dacddf257fe50cfe3a9c6dbee537.gif" 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>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div id="projects">
<h2>stuff we make</h2>
<div id="project-list">
<div class="project-item">
<div class="project-item-banner">
<img src="/img/projects/campfire.png" alt="screenshot of the campfire timeline" width=256>
</div>
<div class="project-info">
<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>
</div>
</main>
<footer>
<p>
made with <span role="img" aria-label="love">♥</span> by <a href="https://arimelody.space">ari</a>, 2025.
</p>
</footer>
</body>
</html>