better htmx, better css
This commit is contained in:
parent
6260715057
commit
f7f6254016
GPG key ID:
CF99829C92678188
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue