add mobile design rules

author Arthur Taft <[email protected]>

Wed, 26 Nov 2025 20:48:04 +0000 (13:48 -0700)

committer Arthur Taft <[email protected]>

Wed, 26 Nov 2025 20:48:04 +0000 (13:48 -0700)
author Arthur Taft <[email protected]>
Wed, 26 Nov 2025 20:48:04 +0000 (13:48 -0700)
committer Arthur Taft <[email protected]>
Wed, 26 Nov 2025 20:48:04 +0000 (13:48 -0700)
diff --git a/static/index.html b/static/index.html

index ec3f11948062d9b6ca9cfbbb16c727332426d40d..e0b3253a3d5e86d3736aa78fe7da2d3e36d19a01 100644 (file)
--- a/static/index.html
+++ b/static/index.html
@@ -9,6 +9,7 @@
      <head>
          <title>home | arthurtaft.net</title>
          <meta charset="UTF-8">
      <head>
          <title>home | arthurtaft.net</title>
          <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
          <link rel="stylesheet" href="/static/styles.css">
          <link rel="icon" href="/favicon.ico" />
      </head>
          <link rel="stylesheet" href="/static/styles.css">
          <link rel="icon" href="/favicon.ico" />
      </head>
@@ -34,7 +35,7 @@
              </div>
              <div id="footer">
                  <p class="footer-text">source: <a class="footer-link" href="https://github.com/arthur-taft/website" target="_blank">github.com/arthur-taft/website</a></p>
              </div>
              <div id="footer">
                  <p class="footer-text">source: <a class="footer-link" href="https://github.com/arthur-taft/website" target="_blank">github.com/arthur-taft/website</a></p>
-                <p class="footer-text">&copy; arthur taft - 2025</p>
+                <p class="copy-text">&copy; arthur taft - 2025</p>
              </div>
          </div>
      </body>
              </div>
          </div>
      </body>
diff --git a/static/styles.css b/static/styles.css

index 20b5794453eb969e2b1f00b81d27bb1e51731fa7..0c98877447a955a8292af9ed4e3f146968debab2 100644 (file)
--- a/static/styles.css
+++ b/static/styles.css
@@ -156,12 +156,20 @@ body {
  #footer {
      margin-top: 3%;
      margin-bottom: 1%;
  #footer {
      margin-top: 3%;
      margin-bottom: 1%;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
  }
  
  #footer .footer-text {
      color: var(--subtext-0);
  }
  
  }
  
  #footer .footer-text {
      color: var(--subtext-0);
  }
  
+#footer .copy-text {
+    color: var(--subtext-0);
+    align-self: center;
+}
+
  #footer .footer-link {
      font-size: 1rem;
      padding: 0.15rem 0.25rem;
  #footer .footer-link {
      font-size: 1rem;
      padding: 0.15rem 0.25rem;
@@ -183,3 +191,36 @@ a:link {
  a:visited {
      color: var(--blue);
  }
  a:visited {
      color: var(--blue);
  }
+
+@media (min-width:300px) {
+    #top-nav {
+        margin-left: 0%;
+        margin-right: 0%;
+    }
+    
+    #title-div {
+        margin-left: 0%;
+        margin-right: 0%;
+    }
+
+    #container .main-text {
+        margin-left: 1%;
+        margin-right: 1%;
+    }
+}
+
+@media (min-width:900px) {
+    #top-nav {
+        margin-left: 25%;
+        margin-right: 25%;
+    }
+    
+    #title-div {
+        margin-left: 25%;
+    }
+
+    #container .main-text {
+        margin-left: 25%;
+        margin-right: 25%;
+    }
+}
author	Arthur Taft <[email protected]>
	Wed, 26 Nov 2025 20:48:04 +0000 (13:48 -0700)
committer	Arthur Taft <[email protected]>
	Wed, 26 Nov 2025 20:48:04 +0000 (13:48 -0700)
static/index.html		patch \| blob \| blame \| history
static/styles.css		patch \| blob \| blame \| history