better htmx, better css

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

View file

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<header> <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> <a href="/">home</a>
<span aria-hidden="true">-</span> <span aria-hidden="true">-</span>
<a href="/links">links</a> <a href="/links">links</a>
@ -26,7 +26,7 @@
<a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a> <a href="https://git.arimelody.me/ari/bliss.town" target="_blank">source</a>
</nav> </nav>
</header> </header>
<main> <main class="center-content">
<div class="title-icon"> <div class="title-icon">
<img src="/img/icon-light.svg" class="icon-light" width=64 height=64 /> <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 /> <img src="/img/icon-dark.svg" class="icon-dark" width=64 height=64 />
@ -38,6 +38,20 @@
<br> <br>
check back later for updates! check back later for updates!
</p> </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> </main>
<footer> <footer>
<p> <p>

View file

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

View file

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

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