diff options
| -rw-r--r-- | public/blog.html | 2 | ||||
| -rw-r--r-- | public/components/footer.html | 2 | ||||
| -rw-r--r-- | public/components/nav.html | 4 | ||||
| -rw-r--r-- | public/fonts/open-sans-v44-latin-regular.woff2 | bin | 0 -> 18640 bytes | |||
| -rw-r--r-- | public/music.html | 20 | ||||
| -rw-r--r-- | public/site.css | 59 |
6 files changed, 73 insertions, 14 deletions
diff --git a/public/blog.html b/public/blog.html index 5738796..586e19a 100644 --- a/public/blog.html +++ b/public/blog.html @@ -2,7 +2,7 @@ <html lang="en">
<body>
<main style="min-height: 100vh;">
- <p>Come back later once I get around to writing something.</p>
+ <p style="text-align: center;">Come back later once I get around to writing something.</p>
</main>
</body>
</html>
diff --git a/public/components/footer.html b/public/components/footer.html index b1ca9d8..6159297 100644 --- a/public/components/footer.html +++ b/public/components/footer.html @@ -1 +1 @@ -<footer class="center" style="top: 100%; position: sticky; padding: 20px 0px 20px 0px;"><span style="font-size: 0.75rem;">copyleft (ɔ) 2023-2026<a href="/" class="link"> haemolacriaa</a>. all wrongs reserved.</span></footer> +<footer class="center" style="top: 100%; position: sticky; padding: 20px 0px 20px 0px;"><span style="font-size: 0.75rem; color: dimgray;">copyleft (ɔ) 2023-2026 <a href="/" class="footer-link">haemolacriaa</a>. all wrongs reserved.</span></footer> diff --git a/public/components/nav.html b/public/components/nav.html index 447bc12..5a00e39 100644 --- a/public/components/nav.html +++ b/public/components/nav.html @@ -1,5 +1,5 @@ -<nav style="padding: 20px 30px 20px 30px;">
- <div class="center" style="max-width: 1280px; justify-content: space-between; flex-wrap: wrap;">
+<nav>
+ <div class="center" style="max-width: 1280px; justify-content: space-between; flex-wrap: wrap; padding: 28px 32px 28px 32px;">
<a href="/" class="link">haemolacriaa</a>
<button id="link-button" class="rm-l">
<svg id="link-button-open" width="24" height="24" viewBox="0 0 16 16" fill="currentColor" role="graphics-symbol"><g><g><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path></g></g></svg>
diff --git a/public/fonts/open-sans-v44-latin-regular.woff2 b/public/fonts/open-sans-v44-latin-regular.woff2 Binary files differnew file mode 100644 index 0000000..e2d3fa4 --- /dev/null +++ b/public/fonts/open-sans-v44-latin-regular.woff2 diff --git a/public/music.html b/public/music.html index dbe6cfc..04073fa 100644 --- a/public/music.html +++ b/public/music.html @@ -3,32 +3,32 @@ <body>
<main style="min-height: 100vh;">
<div style="display: grid; justify-content: center;">
- <a href="/releases/phosphenes" class="link">
- <img src="/assets/bunny.webp" width="400" height="400" alt="Phosphenes album art">
+ <a href="/releases/phosphenes" class="link-text">
+ <img src="/assets/bunny.webp" width="400" height="400" alt="Phosphenes album art" class="album-image">
<p>haemolacriaa</p>
<p>Phosphenes</p>
<p>3.13.2026</p>
</a>
- <a href="/releases/christmas" class="link">
- <img src="/assets/bunny.webp" width="400" height="400" alt="Christmas album art">
+ <a href="/releases/christmas" class="link-text">
+ <img src="/assets/bunny.webp" width="400" height="400" alt="Christmas album art" class="album-image">
<p>haemolacriaa</p>
<p>Christmas</p>
<p>12.12.2025</p>
</a>
- <a href="/releases/waxing-and-waning" class="link">
- <img src="/assets/bunny.webp" width="400" height="400" alt="Waxing and Waning album art">
+ <a href="/releases/waxing-and-waning" class="link-text">
+ <img src="/assets/bunny.webp" width="400" height="400" alt="Waxing and Waning album art" class="album-image">
<p>haemolacriaa</p>
<p>Waxing and Waning</p>
<p>10.10.2025</p>
</a>
- <a href="/releases/hhaemolacria" class="link">
- <img src="/assets/hhaemolacria.webp" width="400" height="400" alt="hhaemolacria album art">
+ <a href="/releases/hhaemolacria" class="link-text">
+ <img src="/assets/hhaemolacria.webp" width="400" height="400" alt="hhaemolacria album art" class="album-image">
<p>haemolacriaa</p>
<p>hhaemolacria</p>
<p>5.2.2025</p>
</a>
- <a href="/releases/haemolacriaa" class="link">
- <img src="/assets/haemolacriaa.webp" width="400" height="400" alt="haemolacriaa album art">
+ <a href="/releases/haemolacriaa" class="link-text">
+ <img src="/assets/haemolacriaa.webp" width="400" height="400" alt="haemolacriaa album art" class="album-image">
<p>haemolacriaa</p>
<p>haemolacriaa</p>
<p>4.19.2024</p>
diff --git a/public/site.css b/public/site.css index 231988f..a90fe93 100644 --- a/public/site.css +++ b/public/site.css @@ -1,3 +1,31 @@ +@font-face {
+ font-display: swap;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('/fonts/open-sans-v44-latin-regular.woff2') format('woff2');
+}
+
+h1, h2, h3, span, p {
+ color: white;
+}
+
+a {
+ color: lightskyblue;
+ text-decoration: none;
+}
+
+a:hover {
+ color: deepskyblue;
+}
+
+body {
+ font-family: 'Open Sans';
+ background-color: black;
+ margin: 0px;
+ padding: 0px;
+}
+
pre {
background-color: ghostwhite;
padding: 12px;
@@ -24,10 +52,22 @@ pre { .link {
text-decoration: none;
+ color: white;
+}
+
+.link:hover {
+ text-decoration: none;
+ color: lightskyblue;
+}
+
+.footer-link {
+ text-decoration: none;
+ color: dimgray;
}
.nav-link {
text-decoration: none;
+ color: white;
@media (width <= 768px) {
padding: 20px 0px 0px 10px;
@@ -38,6 +78,11 @@ pre { }
}
+.nav-link:hover {
+ text-decoration: none;
+ color: lightskyblue;
+}
+
.nav-list {
@media (width <= 768px) {
width: 100%;
@@ -80,9 +125,23 @@ pre { padding-bottom: 1.25rem;
padding-top: 1.25rem;
background-color: black;
+ color: white;
width: 20rem;
}
+.link-text:hover {
+ text-decoration: none;
+ color: white;
+}
+
.button:hover {
background-color: rgb(0, 0, 0, 0);
}
+
+.album-image {
+ transition: transform 0.1s ease;
+}
+
+.album-image:hover {
+ transform: scale(1.025);
+}
|