Redesign!

source/js/listenbrainz.js

@@ -66,7 +66,6 @@ function insertHtml(listen, image) {
 
   const existing = document.querySelector('.listenbrainz') ?? undefined;
   if (existing !== undefined) {
-    existing.previousElementSibling.remove();
     existing.remove();
   }
 
@@ -77,7 +76,6 @@ function insertHtml(listen, image) {
   image = image.startsWith('http://') ? 'https' + image.slice(4) : image;
 
   const listenHtml = `
-  <div class="divider"></div>
   <p class="listenbrainz">
     <img alt="${alt}" title="${alt}" src="${image}">
     <span class="byline">Currently listening to</span>
@@ -86,5 +84,5 @@ function insertHtml(listen, image) {
     </a>
 </p>`;
 
-  document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml);
+  document.querySelector('.page-header').insertAdjacentHTML('beforeend', listenHtml);
 }

source/main.rs

@@ -18,7 +18,6 @@ fn main() -> Result<()> {
 
   build_userstyles(&build_dir)?;
   templates::Index::write(&public_dir)?;
-  templates::Userstyles::write(&public_dir)?;
   scss::Scss::write(&public_dir, &source_dir)?;
   copy::Copy::write(&build_dir, &public_dir, &source_dir)?;
 

source/scss/components/_errors.scss

@@ -1,7 +0,0 @@
-.error-404 {
-  align-items: center;
-  display: flex;
-  height: 100vh;
-  justify-content: center;
-  padding: 1rem;
-}

source/scss/components/_listenbrainz.scss

@@ -1,15 +1,11 @@
 @use 'mixins';
 
 .listenbrainz {
-  @include mixins.patterned-shadow(0.5rem);
-
   align-items: center;
-  background-color: var(--background-2);
+  background-color: #0002;
-  border: 2px solid var(--foreground-1);
   display: grid;
   grid-template-columns: min-content auto;
-  margin-top: 1rem;
+  padding: 8px;
-  padding: 1rem;
   width: fit-content;
 
   @media (max-width: mixins.$medium-breakpoint) {
@@ -22,7 +18,7 @@
 
   img {
     grid-row: 1 / 3;
-    margin-right: 1rem;
+    margin-right: 8px;
-    width: 4rem;
+    width: 48px;
   }
 }

source/scss/components/_page-header.scss

@@ -1,8 +1,28 @@
 @use 'mixins';
 
 .page-header {
-  @include mixins.responsive-container;
+  --anchor-color: #000;
+  --anchor-hover: #fff;
 
-  border-bottom: 2px dotted var(--foreground-1);
+  background: linear-gradient(to right, #5bc2e7, #b7cf81);
-  margin-bottom: 2rem;
+  height: 256px;
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  justify-content: center;
+
+  @media (max-width: mixins.$medium-breakpoint) {
+    height: 50vh;
+  }
+
+  h1 {
+    border-bottom: 2px dotted;
+    padding-left: 64px;
+  }
+
+  .subtitle {
+    display: flex;
+    gap: 16px;
+    margin-left: 64px;
+  }
 }

source/scss/components/_page-main.scss

@@ -1,63 +1,41 @@
 @use 'mixins';
 
 .page-main {
-  @include mixins.responsive-container;
+  a {
-
+    align-items: center;
-  margin-bottom: 2rem;
+    display: flex;
-
+    height: calc(50vh - 128px);
-  .contact-links {
+    justify-content: center;
-    display: grid;
+    padding: 64px;
-    gap: 2rem;
+    text-decoration: none;
-    grid-template-columns: repeat(2, 1fr);
 
     @media (max-width: mixins.$medium-breakpoint) {
-      grid-template-columns: repeat(1, 1fr);
+      height: 50vh;
     }
 
-    a {
+    &.driftingnebula {
-      @include mixins.patterned-shadow(0.5rem);
+      background: url('/assets/driftingnebula 2022-03-09.jpeg');
-
+      background-position: center center;
-      background-color: var(--background-2);
+      background-repeat: no-repeat;
-      border: 2px solid var(--foreground-1);
-      padding: 1rem;
-      position: relative;
 
       &:hover {
-        background-color: var(--foreground-1);
+        filter: hue-rotate(180deg);
       }
+    }
 
-      &::before {
+    &.holllo {
-        content: attr(data-label);
+      background: url('/assets/holllo-mark-square-pattern.png');
-        font-size: 50%;
+      background-color: #1f1731;
-        position: absolute;
+      background-repeat: repeat;
-        right: 4px;
+      background-size: 48px;
-        top: 4px;
+
+      &:hover {
+        filter: grayscale(100%);
       }
     }
+
+    img {
+      max-width: 256px;
+    }
   }
 }
-
-.driftingnebula {
-  background: url('/assets/driftingnebula 2022-03-07.jpeg');
-  background-repeat: no-repeat;
-  background-position: center center;
-  display: block;
-  font-size: 3rem;
-  height: 10rem;
-  padding: 1rem;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: 0 0 4px var(--background-1);
-
-  &:hover {
-    color: var(--foreground-1);
-    filter: hue-rotate(180deg);
-    outline: 2px dotted var(--foreground-1);
-    outline-offset: 4px;
-  }
-
-  img {
-    height: 100%;
-  }
-}

source/scss/components/_userstyles.scss

@@ -1,37 +0,0 @@
-.userstyles {
-  background-color: transparent;
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(2, 1fr);
-  padding: 0;
-
-  .style {
-    background-color: var(--background-2);
-    border: 2px solid var(--foreground-1);
-    padding: 1rem;
-
-    .header {
-      align-items: center;
-      display: flex;
-      margin-bottom: 0.5rem;
-
-      img {
-        height: 4rem;
-        margin-right: 0.5rem;
-      }
-
-      a {
-        border: 2px solid;
-        margin-left: auto;
-        padding: 0.5rem;
-        text-decoration: none;
-
-        &:hover {
-          background-color: var(--foreground-1);
-          border-color: var(--foreground-1);
-          color: var(--background-2);
-        }
-      }
-    }
-  }
-}

source/scss/index.scss

@@ -5,25 +5,23 @@ html {
 }
 
 body {
-  --background-1: #52d168;
+  --anchor-color: #f0f;
-  --background-2: #60f079;
+  --anchor-hover: #000;
-  --foreground-1: #1d2623;
 
-  background-color: var(--background-1);
+  background-color: #000;
-  color: var(--foreground-1);
+  color: #000;
   font-family: sans-serif;
   font-size: 2rem;
-  padding: 2rem;
 }
 
 a {
-  color: var(--foreground-1);
+  color: var(--anchor-color);
   font-weight: bold;
-  text-decoration: 1px dotted underline;
+  text-decoration: 2px dotted underline;
 
   &:hover {
-    background-color: var(--foreground-1);
+    background-color: var(--anchor-color);
-    color: var(--background-2);
+    color: var(--anchor-hover);
   }
 }
 
@@ -32,7 +30,7 @@ button {
 }
 
 :focus {
-  outline: 2px dotted var(--foreground-1);
+  outline: 2px dotted #f0f;
 }
 
 .monospace {
@@ -45,9 +43,7 @@ button {
   margin-top: 2rem;
 }
 
-@use 'components/errors';
 @use 'components/page-footer';
 @use 'components/page-header';
 @use 'components/page-main';
 @use 'components/listenbrainz';
-@use 'components/userstyles';

source/scss/mixins.scss

@@ -10,20 +10,3 @@ $large-breakpoint: 1200px;
     width: 100%;
   }
 }
-
-@mixin patterned-shadow($size) {
-  position: relative;
-
-  &::after {
-    --shadow-size: #{$size};
-
-    background: url('/assets/shadow-pattern.png') repeat;
-    content: '';
-    height: 100%;
-    left: var(--shadow-size);
-    position: absolute;
-    top: var(--shadow-size);
-    width: 100%;
-    z-index: -1;
-  }
-}

source/templates/index.html

@@ -7,31 +7,28 @@
 {% block body %}
 <header class="page-header">
   <h1>Bauke</h1>
+
+  <p class="subtitle">
+    <a href="mailto:me@bauke.xyz" title="me@bauke.xyz">
+      Email
+    </a>
+    <a href="https://social.holllo.org/@Bauke" title="@bauke@social.holllo.org">
+      Fediverse
+    </a>
+    <a href="https://git.bauke.xyz/explore/repos">
+      Software
+    </a>
+  </p>
 </header>
 
 <main class="page-main">
-  <div class="contact-links">
+  <a class="driftingnebula" href="https://driftingnebula.com">
-    <a target="_blank" href="mailto:me@bauke.xyz" title="Email"
-      data-label="email">
-      me@bauke.xyz
-    </a>
-
-    <a target="_blank" href="https://social.holllo.org/@Bauke"
-      title="Fediverse Profile" data-label="fediverse">
-      @bauke@social.holllo.org
-    </a>
-
-    <a target="_blank" href="https://git.bauke.xyz/Bauke" title="Gitea Profile"
-      data-label="bauke">
-      Gitea
-    </a>
-  </div>
-
-  <div class="divider"></div>
-
-  <a class="driftingnebula" href="https://www.deviantart.com/driftingnebula">
     <img alt="driftingnebula" src="/assets/driftingnebula.png">
   </a>
+
+  <a class="holllo" href="https://holllo.org">
+    <img alt="Holllo" src="/assets/holllo-text.png">
+  </a>
 </main>
 
 <script src="/js/listenbrainz.js"></script>

source/templates/mod.rs

@@ -26,32 +26,3 @@ impl Index {
     Ok(())
   }
 }
-
-#[derive(Debug, Template)]
-#[template(path = "userstyles.html")]
-pub struct Userstyles {
-  pub page_title: String,
-  pub styles: Vec<userstyles::Userstyle>,
-}
-
-impl Userstyles {
-  pub fn write(public_dir: &Path) -> Result<()> {
-    let destination = public_dir.join("userstyles/index.html");
-    create_dir_all(destination.parent().unwrap())?;
-
-    let styles = userstyles::ALL_USERSTYLES
-      .iter()
-      .map(|target| userstyles::Userstyle::load(target))
-      .flatten()
-      .collect();
-
-    let template = Self {
-      page_title: "Bauke".to_string(),
-      styles,
-    };
-
-    write(destination, template.render()?)?;
-
-    Ok(())
-  }
-}

source/templates/userstyles.html

@@ -1,25 +0,0 @@
-{% extends "base.html" %}
-
-{% block head %}
-<link rel="stylesheet" href="/css/index.css">
-{% endblock %}
-
-{% block body %}
-<header class="page-header">
-  <h1>bauke.xyz</h1>
-</header>
-
-<main class="page-main userstyles">
-  {% for style in styles %}
-  <div class="style">
-    <div class="header">
-      <img src="{{ format!("/userstyles/{}.png", style.metadata.name.to_lowercase().replace(" ", "-"))|safe }}" />
-      <h2>{{ style.metadata.name }}</h2>
-      <a target="_blank" href="{{ style.metadata.update_url|safe }}">Install</a>
-    </div>
-
-    <p>{{ style.metadata.description }}</p>
-  </div>
-  {% endfor %}
-</main>
-{% endblock %}