feat(css): page layout

also added some whitespace
2020-12-03 16:24:34 -05:00 · 2020-12-03 16:24:34 -05:00 · 68dd51bb5b
parent b80313ffc5
commit 68dd51bb5b
1 changed files with 31 additions and 1 deletions
--- a/public/index.php
+++ b/public/index.php
@ -9,6 +9,7 @@
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ee0000">
  <meta name="msapplication-TileColor" content="#00aba9">
  <meta name="theme-color" content="#ffffff">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <?php
  function getByteString($bytes) {
    $symbols = array('B', 'KB', 'MB', 'GB', 'TB');
@ -55,6 +56,19 @@
    getPercentageUsed($sonozaki_total, $sonozaki_used);
 ?>
  <style type="text/css">
+    /* layout */
+    header, #homes, #services, footer {
+      width: 30%;
+      float: left;  
+    }
+    header {
+      word-spacing: 100vw;
+    }
+
+    /* homes */
+    .home {
+      width: 50%;
+    }
    .pie {
      background: #bbb;
      border-radius: 100%;
@ -130,13 +144,27 @@
      --value: <?php echo ($sonozaki_percent ? $sonozaki_percent : 0); ?>;
      --over50: <?php echo ($sonozaki_percent > 50 ? '1' : '0'); ?>
    }
+
+    /* services */
+    .service {
+      width: 50%;
+    }
+
+    /* 700px breakpoint */
+    @media screen and (max-width: 700px) {
+      footer, #homes, #services, footer {
+        width: 100%;
+      }
+    }
  </style>
 </head>
 <body>
+
 <header>
  <h1>homo.casa</h1>
  <p>Gods and dice are both best when silent.</p>
 </header>
+
 <div id="homes">
  <h2>homes</h2>
    <div class="home">
@ -205,6 +233,7 @@
      ?></em></h4>
    </div>
  </div>
+
  <div id="services">
    <h2>services</h2>
    <p>note: authentication required for access.</p>
@ -222,5 +251,6 @@
  <footer>
    <p>Child of Man. What is it you seek from this World?</p>
  </footer>
+
 </body>
-</html>
+</html>