First steps towards making this thing look good on mobile

1 year ago · 1d8fdef22c
parent 3cc5303f80
commit 1d8fdef22c
19 changed files with 109 additions and 42 deletions
--- a/about/index.php
+++ b/about/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About</title>
    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
--- a/about/music/index.php
+++ b/about/music/index.php
@ -3,6 +3,7 @@

 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Music</title>
  <link href="../../style.css" rel="stylesheet" type="text/css" media="all">
  <style type="text/css">
--- a/about/uses/index.php
+++ b/about/uses/index.php
@ -3,6 +3,7 @@

 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My setup</title>
  <link href="../../style.css" rel="stylesheet" type="text/css" media="all">
  <style type="text/css">
--- a/blog/index.php
+++ b/blog/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blog</title>
    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/blog/posts/deeptwistycom_2nd_anniversary_-_a_history_of_this_bullshit/index.html
+++ b/blog/posts/deeptwistycom_2nd_anniversary_-_a_history_of_this_bullshit/index.html
@ -3,6 +3,7 @@

 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>deeptwisty.com 2nd anniversary - A History of This Bullshit</title>
  <link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
  <style type="text/css">
--- a/blog/posts/guide_blocking_user_agents_nginx/index.html
+++ b/blog/posts/guide_blocking_user_agents_nginx/index.html
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guide - How to Block User Agents With Nginx</title>
    <link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/blog/posts/guide_self_host_safely_with_wireguard/index.html
+++ b/blog/posts/guide_self_host_safely_with_wireguard/index.html
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guide - Self-Host Safely with WireGuard</title>
    <link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/blog/posts/guide_things_i_keep_having_to_google/index.php
+++ b/blog/posts/guide_things_i_keep_having_to_google/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guide - Things I Keep Having to Google</title>
    <link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/etc/greenhouse/index.php
+++ b/etc/greenhouse/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Greenhouse</title>
    <link href="../../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/etc/index.php
+++ b/etc/index.php
@ -3,6 +3,7 @@

 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>More</title>
  <link href="../style.css" rel="stylesheet" type="text/css" media="all">
  <!--style type="text/css">
@ -69,7 +70,16 @@
    <a target="_blank" href="https://deeptwisty.com/"><img src="buttons/deeptwisty_button.png" /></a>
  </div>
  <h2>TODO</h2>
-  <iframe id="todowindow" class="embed" src="todo.html"></iframe>
+  <ul>
+    <li>Add a changelog to this page by parsing the atom feed</li>
+    <li>Make a cool 404 page</li> <!-- Line Item -->
+    <li>Add my CD collection to the music page</li>
+    <li>Optimize this thing for mobile displays</li>
+    <li>Make a page for games I like</li>
+    <li>Update the navigation on the landing page to a vertical layout</li>
+    <li>Write another blog post</li>
+    <li>Update privacy policy</li>
+  </ul>
  <div id="leftsidebg" style="background-image: url(bg.png); --distancefromcenter: -10%;"
    title="Pictured: A millipede, because I couldn't think of anything better to put here and I like them."></div>
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
--- a/etc/quotes/index.php
+++ b/etc/quotes/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>#quotes</title>
    <link href="../../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/etc/todo.html
+++ b/etc/todo.html
@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Changelog</title>
-    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
-    <link href="../embedded.css" rel="stylesheet" type="text/css" media="all">
-    <style type="text/css">
-      ul {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <ul>
-      <li>Add a changelog to this page by parsing the atom feed</li>
-      <li>Make a cool 404 page</li> <!-- Line Item -->
-      <li>Add my CD collection to the music page</li>
-      <li>Optimize this thing for mobile displays</li>
-      <li>Make a page for games I like</li>
-      <li>Update the navigation on the landing page to a vertical layout</li>
-      <li>Write another blog post</li>
-      <li>Update privacy policy</li>
-    </ul>
-  </body>
-</html>
--- a/guestbook/index.php
+++ b/guestbook/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guestbook</title>
    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
@ -83,6 +84,32 @@
      .message {
        padding-top: 1.5rem;
      }
+      @media only screen and (hover: none) {
+        td {
+          display: block;
+        }
+        form td:first-child {
+          text-align: left;
+        }
+        input[type="text"], input[type="email"], textarea {
+          background: none;
+          border: 2px solid #00000033;
+          border-bottom: 2px solid #888888;
+        }
+        article {
+          width: 100%;
+          margin: 2rem auto;
+        }
+        article td:nth-child(2) {
+          text-align: left;
+        }
+        article td:last-child {
+          text-align: left;
+        }
+        article td:first-child {
+          text-align: left;
+        }
+      }
    </style>
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
  </head>
@ -136,8 +163,7 @@

        <?php if($return == "success") { echo "<td></td><td><span class='success'>Successfully posted!</span></td>"; } ?>
        <tr>
-          <td></td>
-          <td><input type="reset"><input type="submit" value="Post"></td>
+          <td colspan="2"><input type="reset"><input type="submit" value="Post"></td>
        </tr>

      </table>
--- a/index.php
+++ b/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css" media="all"/>
    <style type="text/css">
      body {
--- a/links/index.php
+++ b/links/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Links</title>
    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/stats/index.php
+++ b/stats/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Stats</title>
    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
--- a/stuff/index.php
+++ b/stuff/index.php
@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Items</title>
    <style type="text/css">
        @font-face {
--- a/stuff/rssfilter.php
+++ b/stuff/rssfilter.php
@ -142,6 +142,7 @@ if($feed                                                   // A basic check to m
 <html lang="en">
  <head>
    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RSS Filter</title>
    <style type="text/css">
      html, body {
--- a/style.css
+++ b/style.css
@ -7,6 +7,7 @@
 html, body {
  height: 100%;
 }
+
 body {
  font-family: var(--stdfont);
  background-color: var(--bgcolor);
@ -52,7 +53,7 @@ nav {
  box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
 }
 h1 {
-  font-size: 4.4rem;
+  font-size: 4.4em;
  margin: 0;
  padding: 0 3rem 3rem 3rem;
  background-image: url(images/isopod.php);
@ -60,6 +61,19 @@ h1 {
  background-size: contain;
  text-shadow: 2px 2px 5px black;
  text-align: center;
+  font-weight: bold;
+}
+h2 {
+  font-size: 1.5em;
+}
+h3 {
+  font-size: 1.2em;
+}
+h4 {
+  font-size: 1em;
+}
+h5 {
+  font-size: 0.85em;
 }
 h1 > a {
  color: inherit;
@ -73,7 +87,7 @@ h1 + h2#caption {
  margin-top: -4.2rem;
  margin-right: -20rem;
  text-align: center;
-  font-size: 1.2rem;
+  font-size: 1.2em;
  z-index: 2;
  text-shadow: 1px 1px 3px black;
 }
@ -87,7 +101,11 @@ h2 + h5, h3 + h5 {
  margin-top: -1.5rem;
 }
 nav {
-  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 100%;
+  align-items: center;
+  justify-content: center;
 }
 nav a, nav span {
  margin: 0 0.7rem;
@ -141,7 +159,7 @@ code {
 }
 :is(main,body) > code {
  display: block;
-  width: 32rem;
+  width: 75%;
  margin: auto;
  margin-bottom: 1rem;
  padding: 0.7rem;
@ -181,15 +199,6 @@ blockquote .attr {
  margin-top: 1rem;
 }

-@media(max-width: 650px) {
-  body {
-    padding: 0 1.5rem;
-  }
-  h1 + h2#caption {
-    margin-right: initial;
-  }
-}
-
 .CboxOpenBtn img {
  opacity: 0;
  transition-duration: 0.2s;
@ -246,4 +255,37 @@ blockquote .attr {
  75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);}
  83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);}
  91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
+}
+@media only screen and (hover: none) {
+  body {
+    font-size: 1.65vh;
+    --bodywidth: 90vw;
+  }
+  h1 {
+    padding-left: unset;
+    padding-right: unset;
+  }
+  h1 + h2#caption {
+    margin-right: unset;
+    margin-top: -3.5rem;
+  }
+  :is(main,body) > code {
+    border-width: .1rem;
+  }
+  .buttons > * {
+    width: 19%;
+  }
+  .buttons > a > img {
+    width: 100%;
+  }
+  code {
+    font-size: 0.8em;
+  }
+  #leftsidebg, #rightsidebg {
+    top: 0; left: 0; right: 0; bottom: 0;
+    box-shadow: 100vw 0 0 #00000088 inset;
+  }
+  tr:hover {
+    background-color: initial;
+  }
 }