2 changed files with 21 additions and 8 deletions
--- a/public/@brooke/index.html
+++ b/public/@brooke/index.html
@ -6,7 +6,7 @@
    <title>@Brooke</title>
    <style>
      @font-face {
-        font-family: PixelifySans;
+        font-family: FreePixel;
        font-weight: 700;
        src: url(/@brooke/font/static/PixelifySans-Regular.ttf)
          format("truetype");
@ -16,8 +16,10 @@
        --background: #242424e5;
        --accent-1: #d182ff;
        --accent-2: #eb53d3;
+        --content-spacing: 5px;
        --background-img: url("/@brooke/bg.webp");
        --banner: url("/@brooke/fractal.webp");
+        --titleBars: url("/@brooke/title-bar.webp");
        --text-color: white;
        --link-color: var(--accent-1);
        --border: 1px solid black;
@ -26,7 +28,7 @@
      html {
        margin: 0;
        box-sizing: border-box;
-        font-family: PixelifySans;
+        font-family: FreePixel;
      }
      body {
        background-image: var(--background-img);
@ -34,15 +36,16 @@
        background-attachment: fixed;
        background-size: auto 300px;
      }
-      .bar {
+      .topbar {
        background-image: var(--banner);
        height: 150px;
        background-size: cover;
        background-position: 60%;
+        margin-bottom: var(--content-spacing);
        border: var(--border);
      }
      #container {
-        max-width: 550px;
+        max-width: 850px;
        margin: 0 auto;
      }
      #container a {
@ -53,6 +56,15 @@
      }
      #flex {
        display: flex;
+        max-width: 850px;
+      }
+      .sidebar-title,
+      .title {
+        background-image: var(--titleBars);
+        border: var(--border);
+        font-size: 20px;
+        background-size: auto 100%;
+        background-repeat: repeat-x;
      }
      main {
        width: 100%;
@ -73,9 +85,10 @@
  </head>
  <body>
    <div id="container">
-      <div class="bar"></div>
+      <div class="topbar"></div>
      <div id="flex">
        <main>
+          <div class="sidebar-title">&nbsp;</div>
          <div style="padding: 1rem; padding-top: 0">
            <p>Hi! My name is Brooke.</p>
            <p>
@ -113,9 +126,11 @@
                <img
                  loading="lazy"
                  src="/@brooke/flag10kb.webp"
+                  alt="The words '10kB' split in half by a black cross, on a blue background."
                  height="32"
                  width="88"
-                  alt="The words '10kB' split in half by a black cross, on a blue background."
+                  title="The 10kB Gallery!"
+                  style="image-rendering: crisp-edges"
                />
              </a>
              <img
@ -141,7 +156,6 @@
              />
              <a target="_blank" href="https://besties.house/"
                ><img
-                  loading="lazy"
                  src="/@brooke/besties.webp"
                  height="31"
                  width="88"
@ -151,7 +165,6 @@
          </div>
        </main>
      </div>
-      <div class="bar"></div>
    </div>
  </body>
 </html>
--- a/public/@brooke/title-bar.webp
+++ b/public/@brooke/title-bar.webp