update new article

app/blog/DjBlogRoot.tsx

@@ -28,27 +28,32 @@ export const routes: RouteRecordRaw[] = [
 ];
 
 const styles = css`
+body {
+    height: 100svh;
+}
+
 .dj-blog-root {
-    width: 100vw;
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 100vh;
+    margin: auto;
+    width: 800px;
 
-    .container {
-        width: 800px;
+    .dot {
+        margin-left: 10px;
+        margin-right: 10px;
     }
 
-    .spacer {
-        flex: 1;
+    .container {
+        width: 100%;
     }
 
     footer {
-        color: gray;
-        width: calc(100% - 10px);
-        margin-bottom: 20px;
+        width: 800px;
         font-style: italic;
-        padding-left: 10px;
+        margin-left: 10px;
+        margin-bottom: 25px;
+        text-align: left;
     }
 
     a {
@@ -61,11 +66,12 @@ const styles = css`
     }
 
     nav {
+        width: 100%;
         font-size: 40px;
-        margin-bottom: 40px;
+        margin-top: 10px;
+        margin-bottom: 10px;
         text-decoration: none;
         text-align: right;
-        width: 100%;
 
         a, a:visited {
             color: var(--dj-palette3);
@@ -73,11 +79,16 @@ const styles = css`
     }
 
     @media only screen and (max-width: 1024px) {
+        width: 100%;
+
         .container {
-            width: calc(100% - 20px);
             padding: 10px;
         }
 
+        .dj-title {
+            margin-right: 30px;
+        }
+
         footer {
             margin-bottom: 0;
         }
@@ -98,14 +109,14 @@ export default defineComponent({
             <>
                 <div ref={carrier} class="tooltip-carrier" />
                 <div class="dj-blog-root">
+                    <nav>
+                        <DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
+                            <RouterLink to={{ name: 'DjBlogMain' }}>
+                                dj blog
+                            </RouterLink>
+                        </DjTooltip>
+                    </nav>
                     <div class="container">
-                        <nav>
-                            <DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
-                                <RouterLink to={{ name: 'DjBlogMain' }}>
-                                    dj blog
-                                </RouterLink>
-                            </DjTooltip>
-                        </nav>
                         <RouterView>
                             {{
                                 default: ({ Component }: { Component: VNode }) => (Component &&
@@ -120,11 +131,11 @@ export default defineComponent({
                             }}
                         </RouterView>
                     </div>
-                    <div class="spacer" />
+                    <hr />
                     <footer>
                         <div class="bottom">
                             <div>
-                                <a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
+                                <a href="/">djledda.net</a> {new Date().getFullYear()}<span class="dot">·</span><DjEmail>{() => "Contact"}</DjEmail><span class="dot">·</span><a href="/blog/djblog.rss">RSS Feed</a>
                             </div>
                         </div>
                     </footer>