responsive about

src/inc_css/nav.css

@@ -20,6 +20,10 @@
     padding-left:0;
     width: 80%;
 }
+ul.nav-links {
+    margin-top: 0;
+    list-style-type: none;
+}
 
 .nav .nav-links li {
     display: block;

src/inc_css/page.css

@@ -0,0 +1,78 @@
+.page {
+    position: absolute;
+    width: max(30vmax,500px);
+    left:50%;
+    top:0;
+    padding: 0px 0 50px;
+    padding-top: 5vh;
+
+    transform: translate(-50%, 0);
+}
+
+.page .text-panel .separator {
+    position: relative;
+    background-color: var(--foreground-inactive);
+
+    width: .35em;
+    height: .35em;
+    left: 50%;
+
+    border-radius: 100%;
+
+    transform: translateX(-50%);
+}
+
+.page a {
+    text-decoration: none;
+    color: var(--accent);
+    transition: all 0.1s;
+}
+.page a:hover {
+    color: var(--foreground);
+}
+
+.page .text-panel {
+    margin: 0;
+    margin-left: -2em;
+    padding: .6em 2em;
+    color: var(--foreground-inactive);
+
+    font-size: 1.1em;
+    /*font-weight: bold;*/
+
+    line-height: 1.25em;
+
+    background-color: var(--background);
+    border-radius: 2em;
+
+    width: 100%;
+    border-color: var(--background-alt);
+    border-width: 3px;
+    border-style: solid;
+}
+
+
+.page h1 {
+    color: var(--foreground-inactive);
+
+    font-size: 1.7em;
+
+    margin: .5em;
+
+    text-align: center;
+}
+
+@media only screen and (max-width: 600px) {
+    .page {
+        margin-top: 2em;
+        width: 100%;
+        padding: 0;
+
+        overflow: hidden;
+    }
+
+    .page .text-panel p {
+        padding: 0 .5em;
+        margin-right: .5em;
+    }
+}

src/inc_css/title.css

@@ -2,6 +2,12 @@
     font-size: 1em;
 }
 
+.title h1 {
+    padding-bottom: 0;
+    margin-bottom:0;
+    margin-top:0;
+}
+
 .title a {
     transition: all 0.1s ease-in;
     color: var(--foreground-active);
@@ -11,3 +17,8 @@
     color: var(--accent);
     transform: translateY(50%);
 }
+
+.pageTitle {
+    margin-left: -0.15em;
+    color: var(--foreground-inactive);
+}

src/root/about.html

@@ -19,7 +19,7 @@
 
 <h1>hi!</h1>
 
-<div class="textPanel">
+<div class="text-panel">
 <p>
 hello! im cat. i like the arts, sciences, philosophy, languages and everything in between.
 </p>

src/root/styles.css

@@ -14,26 +14,10 @@ body {
 
 #include title.css
 #include nav.css
+#include page.css
 #include landing.css
 #include blog.css
 
-.pageTitle {
-    margin-left: -0.15em;
-    color: var(--foreground-inactive);
-}
-
-h1 {
-    color: var(--color1);
-    padding-bottom: 0;
-    margin-bottom:0;
-    margin-top:0;
-}
-
-ul {
-    margin-top: 0;
-    list-style-type: none;
-}
-
 li {
     display:inline;
 }
@@ -56,74 +40,6 @@ a.fsText {
     color: var(--foreground);
 }
 
-.page {
-    position: absolute;
-    width: max(30vmax,500px);
-    left:50%;
-    top:0;
-    padding: 0px 0 50px;
-    padding-top: 5vh;
-
-    transform: translate(-50%, 0);
-}
-@media only screen and (max-width: 600px) {
-    .page {
-        width: 100%;
-        padding: 0;
-    }
-}
-
-.page .textPanel .separator {
-    position: relative;
-    background-color: var(--foreground-inactive);
-
-    width: .35em;
-    height: .35em;
-    left: 50%;
-
-    border-radius: 100%;
-
-    transform: translateX(-50%);
-}
-
-.page a {
-    text-decoration: none;
-    color: var(--accent);
-    transition: all 0.1s;
-}
-.page a:hover {
-    color: var(--foreground);
-}
-
-.page .textPanel {
-    margin: 0;
-    margin-left: -2em;
-    padding: .6em 2em;
-    color: var(--foreground-inactive);
-
-    font-size: 1.1em;
-    /*font-weight: bold;*/
-
-    line-height: 1.25em;
-
-    background-color: var(--background);
-    border-radius: 2em;
-
-    width: 100%;
-    border-color: var(--background-alt);
-    border-width: 3px;
-    border-style: solid;
-}
-
-.page h1 {
-    color: var(--foreground-inactive);
-
-    font-size: 1.7em;
-
-    margin: .5em;
-
-    text-align: center;
-}
 
 #include socials.css
 #include gallery.css

todo.md

@@ -9,8 +9,8 @@
     * [-] landing page
         * [x] central
         * [ ] smaller
-    * [ ] about
+    * [-] about
-        * [ ] narrow text
+        * [x] narrow text
         * [ ] hope -> use
     * [x] solar system
         * [x] smaller