styling

app/blog/DjBlogRoot.tsx

@@ -28,42 +28,59 @@ export const routes: RouteRecordRaw[] = [
 ];
 
 const styles = css`
-.supercontainer {
+.dj-blog-root {
     width: 100vw;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 100px;
-}
+    height: 100vh;
 
-.container {
-    width: 800px;
-}
-
-footer {
-    color: gray;
-    font-style: italic;
-    margin-top: 40px;
-}
-
-a {
-    color: var(--dj-palette3);
-    text-decoration: solid line;
-
-    &:visited {
-        color: var(--dj-visited);
+    .container {
+        width: 800px;
     }
-}
 
-nav {
-    font-size: 40px;
-    margin-bottom: 40px;
-    text-decoration: none;
-    text-align: right;
-    width: 100%;
+    .spacer {
+        flex: 1;
+    }
 
-    a, a:visited {
+    footer {
+        color: gray;
+        width: calc(100% - 10px);
+        margin-bottom: 20px;
+        font-style: italic;
+        padding-left: 10px;
+    }
+
+    a {
         color: var(--dj-palette3);
+        text-decoration: solid line;
+
+        &:visited {
+            color: var(--dj-visited);
+        }
+    }
+
+    nav {
+        font-size: 40px;
+        margin-bottom: 40px;
+        text-decoration: none;
+        text-align: right;
+        width: 100%;
+
+        a, a:visited {
+            color: var(--dj-palette3);
+        }
+    }
+
+    @media only screen and (max-width: 1024px) {
+        .container {
+            width: calc(100% - 20px);
+            padding: 10px;
+        }
+
+        footer {
+            margin-bottom: 0;
+        }
     }
 }
 `;
@@ -80,7 +97,7 @@ export default defineComponent({
         return () => (
             <>
                 <div ref={carrier} class="tooltip-carrier" />
-                <div class="supercontainer">
+                <div class="dj-blog-root">
                     <div class="container">
                         <nav>
                             <DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
@@ -102,14 +119,15 @@ export default defineComponent({
                                     )),
                             }}
                         </RouterView>
-                        <footer>
-                            <div class="bottom">
-                                <div>
-                                    <a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
-                                </div>
-                            </div>
-                        </footer>
                     </div>
+                    <div class="spacer" />
+                    <footer>
+                        <div class="bottom">
+                            <div>
+                                <a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
+                            </div>
+                        </div>
+                    </footer>
                 </div>
             </>
         );