From 111705ccc4fd68dc325c2bbed34ba51011c100a0 Mon Sep 17 00:00:00 2001
From: Ted Pier <ted@miningtcup.me>
Date: Sat, 9 Aug 2025 15:19:55 -0700
Subject: [PATCH] finally a solution im happy with

---
 index.html |  8 ++++----
 style.css  | 18 ++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 1f1f43b..ca34ea4 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,6 @@
         <div class="centerer">
             <div id="content">
                 <div id="title-1">
-                    <img src="lulu.webp" alt="Lulu the dog" />
                     <div class="h1-container">
                         <h1>
                             Ted Pier<span class="subtitle">
@@ -24,6 +23,7 @@
                             </span>
                         </h1>
                     </div>
+                    <img src="lulu.webp" alt="Lulu the dog" />
                 </div>
                 <hr />
                 <section>
@@ -98,9 +98,9 @@
                     >
                     <p>
                         That's what you're using right now- my website! It's a
-                        classic Nginx webserver. Notice how fast it loaded? My
-                        website is written without any libraries, tracking, or
-                        external fonts because ew, bloat.
+                        classic Nginx webserver. Notice how fast it loaded?
+                        That's what happens when a website is written without
+                        any libraries, tracking, or external fonts.
                     </p>
                     <h3>DNS Servers</h3>
                     <p>
diff --git a/style.css b/style.css
index 9e92b73..628d8b4 100644
--- a/style.css
+++ b/style.css
@@ -91,18 +91,15 @@ p {
 #title-1 {
     color: light-dark(white, black);
     overflow: hidden;
-    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 }
 
 #title-1 > .h1-container {
-    margin: 0;
     padding: 16px;
     background: light-dark(black, whitesmoke);
     width: max-content;
-    height: max-content;
     z-index: 1;
-    display: block;
-    position: relative;
 }
 
 #title-1 > div > h1 {
@@ -110,13 +107,9 @@ p {
 }
 
 #title-1 > img {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
     z-index: 0;
     display: block;
-    height: 100%;
+    max-height: 71px;
 }
 
 .disabled {
@@ -135,9 +128,10 @@ body {
 #click-to-reveal-prompt {
     color: grey;
     position: absolute;
+    left: 0;
+    right: 0;
     top: 8px;
-    left: 8px;
-    font-size: 12px;
+    text-align: center;
 }
 
 section {