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

better htmx, better css

Browse source
This commit is contained in:
ari melody 2024-04-07 00:26:03 +01:00
parent 6260715057
commit f7f6254016
Signed by: ari
GPG key ID: CF99829C92678188
4 changed files with 55 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/index.html
View file

@ -16,7 +16,7 @@
</head>
<body>
<header>
<nav hx-boost="true" hx-target="body">
<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>
@ -26,7 +26,7 @@
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav>
</header>
<main>
<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 />
@ -38,6 +38,20 @@
<br>
check back later for updates!
</p>
<button id="friendly-button">friendly button</button>
<script>
const button = document.getElementById("friendly-button");
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);
});
</script>
</main>
<footer>
<p>

6
public/links.html
View file

@ -12,11 +12,11 @@
<meta property="og:url" content="https://bliss.town/links" />
<link rel="stylesheet" type="text/css" href="/style/main.css">
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
<script type="application/javascript" src="/script/vendor/htmx.min.js"></script>
</head>
<body>
<header>
<nav hx-boost="true" hx-target="body">
<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>
@ -26,7 +26,7 @@
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav>
</header>
<main>
<main class="center-content">
<h1><span aria-hidden="true">🔗</span><br>bliss<span class="col-primary-bg">.</span>town shortlinks</h1>
<hr>
<p>

6
public/paste.html
View file

@ -12,11 +12,11 @@
<meta property="og:url" content="https://bliss.town/paste" />
<link rel="stylesheet" type="text/css" href="/style/main.css">
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
<script type="application/javascript" src="/script/vendor/htmx.min.js"></script>
</head>
<body>
<header>
<nav hx-boost="true" hx-target="body">
<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>
@ -26,7 +26,7 @@
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav>
</header>
<main>
<main class="center-content">
<h1><span aria-hidden="true">📝</span><br>bliss<span class="col-primary-bg">.</span>town pastebin</h1>
<hr>
<p>

57
public/style/main.css
View file

@ -16,10 +16,31 @@
}
}
body {
margin: 0;
padding: 0;
font-family: "Lora", serif;
font-size: 20px;
color: var(--foreground);
background-color: var(--background);
transition: color .2s linear, background-color .2s linear;
}
header {
position: fixed;
top: 1em;
left: 50%;
transform: translateX(-50%);
width: min(900px, calc(100vw - 4rem));
margin: 0 auto;
padding: .5em 0;
border-radius: 2em;
text-align: center;
backdrop-filter: blur(1em);
z-index: 100;
}
header nav {
@ -31,31 +52,10 @@ header nav span {
color: var(--primary-fg);
}
body {
position: absolute;
top: 0;
left: 0;
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Lora", serif;
font-size: 1.5rem;
color: var(--foreground);
background-color: var(--background);
transition: color .2s linear, background-color .2s linear;
}
main {
width: min(720px, calc(100vw - 4rem));
min-height: calc(100vh - 8.3em);
margin: 3em auto 0 auto;
text-align: center;
}
@ -84,8 +84,16 @@ main {
}
}
.center-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
hr {
margin: 2rem 0;
width: 100%;
margin: 1em 0;
border-width: 1px 0 0 0;
}
hr::after {
@ -133,6 +141,7 @@ button:active {
footer {
width: min(900px, calc(100vw - 4rem));
margin: 0 auto;
padding: 1em 0;
text-align: center;
opacity: .5;
transition: opacity .1s ease-out;