Move site title and random caption from landing page body to header

3 files changed, 252 insertions, 236 deletions

diff --git a/index.php b/index.php
index 42b6ff1..8b0f875 100644
--- a/index.php
+++ b/index.php
@@ -140,204 +140,13 @@
     <?php
       include($_SERVER['DOCUMENT_ROOT'] . '/common.php');
       include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php');
-      if(!preg_match('/(headless.*)/i', $_SERVER['HTTP_USER_AGENT'])) {
-        $captions = array();
-        $seasonal = false;
-        switch(date('m')) { 
-          case 6:
-            $captions = array(
-              'your gay',
-              'the fuck is a gender',
-              'trnasgener',
-              'This site uses $_GAY_COOKIE_EQUIVALENT',
-              'Supports LGBT!',
-              'Banned in Florida!',
-              'Are you cis or are you normal'
-            );
-            $seasonal = true;
-            break;
-          case 10:
-            $captions = array(
-              'Boo!',
-              'Happy Halloween!',
-              'World\'s ' . rand(1, 1000000) . 'th spookiest website',
-              '$spooky_captions[array_rand($spooky_captions)]',
-              'I thought I\'d be able to come up with more Halloween captions to be honest',
-              'It\'s the Spooky Month&trade;!',
-              'I vant to suck your blood! Just kidding... Unless...?',
-              'This site uses $_HALLOWEEN_THEMED_COOKIE_EQUIVALENT'
-            );
-            $seasonal = true;
-            break;
-          case 12:
-            $captions = array(
-              'hoe hoe hoe or some shit',
-              'Happy Holidays!',
-              'World\'s ' . rand(1, 1000000) . 'th most festive website',
-              'Like half of these captions are just lifted wholesale from the Halloween ones',
-              '$festive_captions[array_rand($festive_captions)]',
-              'Merry Capitalism!',
-              'It\'s winter! Nothing else special about this time of year, no siree!',
-              'This site uses $_CHRISTMAS_THEMED_COOKIE_EQUIVALENT... I guess that would just be normal cookies, huh?',
-              'Pretend I put Mariah Carey on autoplay here',
-              'MERRY SHITSCRAM',
-              'Merry consumerism!',
-              'Do people eat turkey on Christmas? Is that, like, a thing?',
-              'christmas isn\'t real'
-            );
-            $seasonal = true;
-            break;
-          default:
-            $captions = array(
-              'bruh moment',
-              'Try reloading!',
-              'Supports VPNs',
-              'I use arch btw',
-              'Stream deep twisty',
-              'MySite.html',
-              'Over Construction',
-              'Real isopod hours',
-              'Version 3.1: The Accent Borders Update',
-              'Version 3.1: The Tables Don\'t Look Like Shit Anymore Update',
-              'depytwisty',
-              '[object Object]',
-              '* You found the [Moss]!',
-              'Minceraft',
-              'Best viewed with Firefox',
-              'Isopod gaming',
-              'Website of some girl',
-              'your mom',
-              'Badly programmed',
-              'Oh, you know ;)',
-              'gamer (terminal)',
-              'This is not a place of honor',
-              'I can type interrobangs, watch‽',
-              'ඞ',
-              '127.0.0.1',
-              'assholes DNI',
-              'swag',
-              '\'\'',
-              '$captions[array_rand($captions)]',
-              'NFT bros don\'t FUCKING interact',
-              '<span class="minecraftsplash">Kind of dragon free!</span>',
-              'This site uses cookies (chocolate chip)',
-              'Now with reduced centralization!',
-              'your gay',
-              'the fuck is a gender',
-              'The Only Website',
-              '𝓘𝓷𝓪𝓬𝓬𝓮𝓼𝓼𝓲𝓫𝓵𝓮!',
-              'Follow me on Google+!',
-              '404: caption not found',
-              'Web π compliant!',
-              'If you\'re seeing this, something is seriously wrong.',
-              'cringe',
-              'don\'t smoke cigarettes kids they\'ll make your lungs sus',
-              'real life isopod',
-              'holy fucking bingle',
-              'AI (Aquatic Isopod) generated',
-              'crubge',
-              'Only unpickle data you trust.',
-              'Tested in prod!',
-              'pwetty epic B)',
-              'Known to the state of California to cause cancer',
-              'Semi-modular!',
-              'Did you know?',
-              'shrimps is bugs',
-              'Delicious!',
-              'trnasgener',
-              'Opinionated!',
-              'Eurorack compatible!',
-              'Hackable!',
-              'HiDPI!',
-              '&amp;mdash; addict',
-              '3D printed!',
-              'Federated!',
-              'Chitinous!',
-              'is this a bedbuge?',
-              'is this buge trans gener?',
-              'Now in HD!',
-              'Hard Disk Drive!',
-              '"Tablet or smartphone device"',
-              'Free Palestine!',
-              'COUNTER',
-              'TUEADAY',
-              'PLACEHIM',
-              'UPSIDEDOWN',
-              'RGB',
-              'BLAHAJ',
-              '@BEAT',
-              'HALO',
-              'LIKECARPET'
-            );
-            break;
-        }
-        $cap = $captions[array_rand($captions)];
-        if($_GET['caption']) {
-          $cap = $captions[$_GET['caption']];
-        }
-        $tit = $cap;
-        if(!$seasonal) {
-          switch($cap) {
-            case 'COUNTER':
-              $num = (int) filter_var(file_get_contents($datadir."caption_views.txt"), FILTER_SANITIZE_NUMBER_INT);
-              $num++;
-              file_put_contents($datadir."caption_views.txt", $num);
-              $cap = "This caption has been viewed $num times!";
-              $tit = "This title has been viewed $num times!";
-              break;
-            case 'TUEADAY':
-              $day = array("suday", "moday", "tueaday", "weaday", "thuday", "friaday", "satuaday")[date('w')];
-              $cap = "wait it's fucking $day. god.";
-              $tit = $cap;
-              echo "<style type='text/css'>:root{--h1-image:url('/old/1/images/$day.png');}</style>";
-              break;
-            case 'PLACEHIM':
-              $cap = 'place him on your site immediately';
-              $tit = $cap;
-              echo "<style type='text/css'>:root{--h1-image:url('images/place_him.png');}</style>";
-              break;
-            case 'BLAHAJ':
-              $cap = '<img id="blahaj" src="images/blahaj.png"> <a href="https://berrymot.github.io/">certified</a> Good Website by blåhaj';
-              $tit = "certified Good Website by blåhaj";
-              echo "<style type='text/css'>#blahaj { animation: spin 5s linear infinite; height: 1em; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion) { #blahaj { animation: none; } }</style>";
-              break;
-            case 'Kind of dragon free!':
-              $cap = '<span class="minecraftsplash">Kind of dragon free!</span>';
-              break;
-            case 'UPSIDEDOWN':
-              $cap = '<span class="flipped">Upside Down!</span>';
-              $tit = '¡uʍop ǝpısdn';
-              break;
-            case 'RGB':
-              $cap = '<span class="rainbowtext">RGB Gaming Webpage</span>';
-              $tit = 'RGB Gaming Webpage';
-              break;
-            case '@BEAT':
-              $cap = '<a href="/stuff/beat/">@'.date("B").'</a>';
-              $tit = '@'.date("B");
-              break;
-            case 'HALO':
-              $cap = '<a href="https://www.youtube.com/watch?v=N14uA0EhBAU">coke and fries halo</a>';
-              $tit = 'coke and fries halo';
-              break;
-            case 'LIKECARPET':
-              $cap = 'Check it out, I\'m in the <span class="house">house</span> like carpet';
-              $tit = 'Check it out, I\'m in the house like carpet';
-              break;
-          }
-        }
-      }
     ?>
-    <title><?php if($tit) { echo "isopod.cool v3 - $tit"; } else { echo "isopod.cool v3"; } ?></title>
+    <title>isopod.cool v3</title>
     <meta name="description" content="real life isopod">
   </head>
   <body>
   <?php include('nav.php'); bg(true, 11, "Pictured: The eponymous Deep Twisty"); ?>
     <main>
-      <div>
-        <h1 style="margin-top: 0;">isopod dot cool<sup>v3.1</sup></h1>
-        <h2 id="caption"><?php echo $cap; ?></h2>
-      </div>
       <?php
         $username = "niceopod"; // Your username here!
         $ch = curl_init("https://status.cafe/users/$username/status.json");
diff --git a/nav.php b/nav.php
index 07d7ca8..3d2f1eb 100644
--- a/nav.php
+++ b/nav.php
@@ -1,35 +1,4 @@
 <?php
-
-
-$host = $_SERVER['HTTP_HOST'];
-
-function echolink($url, $name) {
-  global $host;
-  if("/$url/" != $_SERVER['REQUEST_URI']) {
-    echo "<a href='https://$host/$url/'>$name</a> ";
-  } else {
-    echo "<span>$name</span> ";
-  }
-}
-echo "<nav id='main-nav'>";
-echo "<a href='/neppy/' style='position: absolute; top: -500rem; left: -500rem; height: 0; width: 0; font-size: 0; opacity: 0;'>AI scrapers click here!</a>";
-if($_SERVER["DOCUMENT_ROOT"] !== getcwd()) {
-  echo "<a href='https://$host/'>home</a> ";
-} else {
-  echo("<a href='https://deeptwisty.com' style='text-decoration: none;' title='the website where i post my various art. i like to compartmentalize'><span style=' margin: 0; padding: 0; font-style: italic; background: linear-gradient(135deg, #2e1ae0 0%, #2e1ae0 35%, #00ff00 65%, #ffff00 90%); background-clip: text; -webkit-text-fill-color: transparent;'>deep twisty</span></a>");
-}
-echolink("about", "about");
-echolink("uses", "uses");
-echolink("music", "music");
-echolink("blog", "blog");
-echolink("links", "links");
-echolink("stuff", "stuff");
-echolink("guestbook", "guestbook");
-echolink("stats", "stats");
-echolink("greenhouse", "greenhouse");
-echolink("etc", "etc");
-echo("</nav>");
-
 function bg($rightside = false, $dfs = 1000, $title = null) {
   $cpath = preg_replace("/\/[^\/]*$/", "", $_SERVER['REQUEST_URI']);
   $output = "<div style='--bgimg: url(\"$cpath/bg.jxl\"), url(\"$cpath/bg.jpg\");";
@@ -49,4 +18,219 @@ function bg($rightside = false, $dfs = 1000, $title = null) {
   $output = $output."></div>";
   echo $output;
 }
-?>
\ No newline at end of file
+
+if(!preg_match('/(headless.*)/i', $_SERVER['HTTP_USER_AGENT'])) {
+  $captions = array();
+  $seasonal = false;
+  switch(date('m')) { 
+    case 6:
+      $captions = array(
+        'your gay',
+        'the fuck is a gender',
+        'trnasgener',
+        'This site uses $_GAY_COOKIE_EQUIVALENT',
+        'Supports LGBT!',
+        'Banned in Florida!',
+        'Are you cis or are you normal'
+      );
+      $seasonal = true;
+      break;
+    case 10:
+      $captions = array(
+        'Boo!',
+        'Happy Halloween!',
+        'World\'s ' . rand(1, 1000000) . 'th spookiest website',
+        '$spooky_captions[array_rand($spooky_captions)]',
+        'I thought I\'d be able to come up with more Halloween captions to be honest',
+        'It\'s the Spooky Month&trade;!',
+        'I vant to suck your blood! Just kidding... Unless...?',
+        'This site uses $_HALLOWEEN_THEMED_COOKIE_EQUIVALENT'
+      );
+      $seasonal = true;
+      break;
+    case 12:
+      $captions = array(
+        'hoe hoe hoe or some shit',
+        'Happy Holidays!',
+        'World\'s ' . rand(1, 1000000) . 'th most festive website',
+        'Like half of these captions are just lifted wholesale from the Halloween ones',
+        '$festive_captions[array_rand($festive_captions)]',
+        'Merry Capitalism!',
+        'It\'s winter! Nothing else special about this time of year, no siree!',
+        'This site uses $_CHRISTMAS_THEMED_COOKIE_EQUIVALENT... I guess that would just be normal cookies, huh?',
+        'Pretend I put Mariah Carey on autoplay here',
+        'MERRY SHITSCRAM',
+        'Merry consumerism!',
+        'Do people eat turkey on Christmas? Is that, like, a thing?',
+        'christmas isn\'t real'
+      );
+      $seasonal = true;
+      break;
+    default:
+      $captions = array(
+        'bruh moment',
+        'Try reloading!',
+        'Supports VPNs',
+        'I use arch btw',
+        'Stream deep twisty',
+        'MySite.html',
+        'Over Construction',
+        'Real isopod hours',
+        'Version 3.1: The Accent Borders Update',
+        'Version 3.1: The Tables Don\'t Look Like Shit Anymore Update',
+        'depytwisty',
+        '[object Object]',
+        '* You found the [Moss]!',
+        'Minceraft',
+        'Best viewed with Firefox',
+        'Isopod gaming',
+        'Website of some girl',
+        'your mom',
+        'Badly programmed',
+        'Oh, you know ;)',
+        'gamer (terminal)',
+        'This is not a place of honor',
+        'I can type interrobangs, watch‽',
+        'ඞ',
+        '127.0.0.1',
+        'assholes DNI',
+        'swag',
+        '\'\'',
+        '$captions[array_rand($captions)]',
+        'NFT bros don\'t FUCKING interact',
+        '<span class="minecraftsplash">Kind of dragon free!</span>',
+        'This site uses cookies (chocolate chip)',
+        'Now with reduced centralization!',
+        'your gay',
+        'the fuck is a gender',
+        'The Only Website',
+        '𝓘𝓷𝓪𝓬𝓬𝓮𝓼𝓼𝓲𝓫𝓵𝓮!',
+        'Follow me on Google+!',
+        '404: caption not found',
+        'Web π compliant!',
+        'If you\'re seeing this, something is seriously wrong.',
+        'cringe',
+        'don\'t smoke cigarettes kids they\'ll make your lungs sus',
+        'real life isopod',
+        'holy fucking bingle',
+        'AI (Aquatic Isopod) generated',
+        'crubge',
+        'Only unpickle data you trust.',
+        'Tested in prod!',
+        'pwetty epic B)',
+        'Known to the state of California to cause cancer',
+        'Semi-modular!',
+        'Did you know?',
+        'shrimps is bugs',
+        'Delicious!',
+        'trnasgener',
+        'Opinionated!',
+        'Eurorack compatible!',
+        'Hackable!',
+        'HiDPI!',
+        '&amp;mdash; addict',
+        '3D printed!',
+        'Federated!',
+        'Chitinous!',
+        'is this a bedbuge?',
+        'is this buge trans gener?',
+        'Now in HD!',
+        'Hard Disk Drive!',
+        '"Tablet or smartphone device"',
+        'Free Palestine!',
+        'COUNTER',
+        'TUEADAY',
+        'PLACEHIM',
+        'UPSIDEDOWN',
+        'RGB',
+        'BLAHAJ',
+        '@BEAT',
+        'HALO',
+        'LIKECARPET'
+      );
+      break;
+  }
+  $cap = $captions[array_rand($captions)];
+  if($_GET['caption']) {
+    $cap = $captions[$_GET['caption']];
+  }
+  if(!$seasonal) {
+    switch($cap) {
+      case 'COUNTER':
+        $num = (int) filter_var(file_get_contents($datadir."caption_views.txt"), FILTER_SANITIZE_NUMBER_INT);
+        $num++;
+        file_put_contents($datadir."caption_views.txt", $num);
+        $cap = "This caption has been viewed $num times!";
+        break;
+      case 'TUEADAY':
+        $day = array("suday", "moday", "tueaday", "weaday", "thuday", "friaday", "satuaday")[date('w')];
+        $cap = "wait it's fucking $day. god.";
+        echo "<style type='text/css'>:root{--h1-image:url('/old/1/images/$day.png');}</style>";
+        break;
+      case 'PLACEHIM':
+        $cap = 'place him on your site immediately';
+        echo "<style type='text/css'>:root{--h1-image:url('images/place_him.png');}</style>";
+        break;
+      case 'BLAHAJ':
+        $cap = '<img id="blahaj" src="images/blahaj.png"> <a href="https://berrymot.github.io/">certified</a> Good Website by blåhaj';
+        echo "<style type='text/css'>#blahaj { animation: spin 5s linear infinite; height: 1em; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion) { #blahaj { animation: none; } }</style>";
+        break;
+      case 'Kind of dragon free!':
+        $cap = '<span class="minecraftsplash">Kind of dragon free!</span>';
+        break;
+      case 'UPSIDEDOWN':
+        $cap = '<span class="flipped">Upside Down!</span>';
+        break;
+      case 'RGB':
+        $cap = '<span class="rainbowtext">RGB Gaming Webpage</span>';
+        break;
+      case '@BEAT':
+        $cap = '<a href="/stuff/beat/">@'.date("B").'</a>';
+        break;
+      case 'HALO':
+        $cap = '<a href="https://www.youtube.com/watch?v=N14uA0EhBAU">coke and fries halo</a>';
+        break;
+      case 'LIKECARPET':
+        $cap = 'Check it out, I\'m in the <span class="house">house</span> like carpet';
+        break;
+    }
+  }
+}
+
+$host = $_SERVER['HTTP_HOST'];
+
+function echolink($url, $name) {
+  global $host;
+  if("/$url/" != $_SERVER['REQUEST_URI']) {
+    echo "<a href='https://$host/$url/'>$name</a> ";
+  } else {
+    echo "<span>$name</span> ";
+  }
+} 
+?>
+<header>
+  <div id="header-content">
+    <h2>isopod dot cool<sup>v3.1</sup></h2>
+    <p><?php echo($cap); ?></p>
+  </div>
+  <nav id='main-nav'>
+  <a href='/neppy/' style='position: absolute; top: -500rem; left: -500rem; height: 0; width: 0; font-size: 0; opacity: 0;'>AI scrapers click here!</a>
+  <?php
+  if($_SERVER["DOCUMENT_ROOT"] !== getcwd()) {
+    echo "<a href='https://$host/'>home</a> ";
+  } else {
+    echo("<a href='https://deeptwisty.com' style='text-decoration: none;' title='the website where i post my various art. i like to compartmentalize'><span style=' margin: 0; padding: 0; font-style: italic; background: linear-gradient(135deg, #2e1ae0 0%, #2e1ae0 35%, #00ff00 65%, #ffff00 90%); background-clip: text; -webkit-text-fill-color: transparent;'>deep twisty</span></a>");
+  }
+  echolink("about", "about");
+  echolink("uses", "uses");
+  echolink("music", "music");
+  echolink("blog", "blog");
+  echolink("links", "links");
+  echolink("stuff", "stuff");
+  echolink("guestbook", "guestbook");
+  echolink("stats", "stats");
+  echolink("greenhouse", "greenhouse");
+  echolink("etc", "etc");
+  echo("</nav>"); 
+  ?>
+</header>
\ No newline at end of file
diff --git a/style.css b/style.css
index 8b42384..a481424 100644
--- a/style.css
+++ b/style.css
@@ -36,7 +36,7 @@
   --bodywidth: min(90vw, 80ch);
   --stddropshadow: 4px 4px 8px var(--stdshadow);
   --stdpadding: 1rem;
-  --navbarheight: calc(var(--stdpadding) * 2.5);
+  --navbarheight: calc(var(--stdpadding) * 4.5);
   --h1-image: url('images/isopod.php');
   --shadowsize: 3rem;
 }
@@ -86,24 +86,38 @@ a:hover {
   color: var(--linkhover);
 }
 
-/* Nav */
+/* Nav & Header */
+header {
+  position: absolute;
+  top: 0;
+  width: fit-content;
+  height: var(--navbarheight);
+  padding-top: 0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#header-content {
+  display: flex;
+  align-items: center;
+}
+#header-content > * {
+  margin: 0;
+}
+#header-content > :last-child {
+  flex: 1;
+  text-align: right;
+}
 nav {
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
   align-items: center;
   justify-content: center;
-}
-nav#main-nav {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: var(--navbarheight);
+  gap: calc(var(--stdpadding / 2));
 }
 nav a, nav span, body > a{
   padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3);
-  margin: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4);
+  margin: calc(var(--stdpadding) / 2) 0;
 }
 nav a, body > a {
   border-left: var(--stdaccentborder);
@@ -334,13 +348,22 @@ hr {
 
 /* If user is on mobile */
 @media only screen and (hover: none) {
-  nav#main-nav {
+  header {
     position: initial;
     top: initial;
     left: initial;
     right: initial;
     height: initial;
-    margin-top: calc(var(--stdpadding) / 2);
+    transform: initial;
+  }
+  #header-content {
+    padding-bottom: calc(var(--stdpadding) / 2);
+  }
+  #header-content > * {
+    flex: 1;
+  }
+  #header-content > :last-child {
+    word-break: break-word;
   }
   body > h1:first-of-type {
     margin-top: var(--stdpadding);