Lots of CSS changes to headers content structure and logo

src/routes/$layout.svelte

@@ -43,9 +43,44 @@
 
   main {
     position: relative;
-    max-width: 34em;
-    padding: 2em;
-    margin: 0 auto;
-    box-sizing: border-box;
+    max-width: calc(100vw - 1em);
+    padding: 1.4em;
+
+    @media (min-width: @media-l) {
+      /* max-width: 34em; */
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ul,
+    ol,
+    figure,
+    img,
+    blockquote {
+      max-width: 42rem;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    h1 {
+      max-width: 52rem;
+    }
+    h2 {
+      max-width: 46rem;
+    }
+    pre,
+    pre[class*='language-'] {
+      max-width: 48rem;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    figure {
+      max-width: @max-image-size;
+    }
   }
 </style>

src/routes/blog/index.svelte

@@ -1,48 +1,30 @@
 <script context="module" lang="typescript">
   /**
-	 * @type {import('@sveltejs/kit').Load}
-	 */
-  export function load({ fetch, page: { params, query }}) {
+   * @type {import('@sveltejs/kit').Load}
+   */
+  export function load({ fetch, page: { params, query } }) {
     const blogQuery = query
       ? '?' +
         Object.entries(query)
-          .map(q => q.join('='))
+          .map((q) => q.join('='))
           .join('&')
       : ''
     return fetch(`blog.json${blogQuery}`)
-      .then(r => r.json())
-      .then(posts => {
-        return {props: { posts, query }}
+      .then((r) => r.json())
+      .then((posts) => {
+        return { props: { posts, query } }
       })
   }
 </script>
 
-<script lang="typescript"> 
+<script lang="typescript">
   import ArticleFooter from '../../components/blog/article-footer.svelte'
-  import type { PostContent } from './_content';
+  import type { PostContent } from './_content'
 
   export let posts: PostContent[]
-  export let query 
+  export let query
 </script>
 
-<style>
-  .post-list {
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    list-style: none;
-  }
-
-  .post-list > li:not(:last-child) {
-    margin-bottom: 2em;
-  }
-
-  .see-all {
-    text-align: end;
-    margin-top: -1.5em;
-  }
-</style>
-
 <svelte:head>
   <title>My blog @michalvankodev</title>
 </svelte:head>
@@ -78,7 +60,24 @@
         </header>
         {@html post.preview}
       </article>
-      <ArticleFooter post={post} />
+      <ArticleFooter {post} />
     </li>
   {/each}
 </ul>
+
+<style>
+  .post-list {
+    padding: 0;
+    line-height: 1.5;
+    list-style: none;
+  }
+
+  .post-list > li:not(:last-child) {
+    margin-bottom: 2em;
+  }
+
+  .see-all {
+    text-align: end;
+    margin-top: -1.5em;
+  }
+</style>

src/routes/index.svelte

@@ -35,10 +35,6 @@
     margin: 0 auto;
   }
 
-  figure {
-    margin: 0 0 1em 0;
-  }
-
   img {
     width: 100%;
     margin: 0 0 1em 0;

src/routes/portfolio/index.svelte

@@ -1,14 +1,14 @@
 <script context="module">
   /**
-	 * @type {import('@sveltejs/kit').Load}
-	 */
+   * @type {import('@sveltejs/kit').Load}
+   */
   export async function load({ fetch }) {
     const res = await fetch('portfolio.json')
     const content = await res.json()
     return {
       props: {
         content,
-      }
+      },
     }
   }
 </script>
@@ -20,41 +20,13 @@
   export let content
 </script>
 
-<style>
-  :global([id])::before {
-    content: '';
-    display: block;
-    height: 5em;
-    margin-top: -5em;
-    visibility: hidden;
-  }
-
-  section[id] {
-    margin-top: 2em;
-  }
-
-  h1 {
-    text-shadow: 2px 2px 1px #c8c4b7;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    margin: 1.5em 0;
-  }
-</style>
-
 <svelte:head>
   <title>{content.title}</title>
 </svelte:head>
 
-<h1>Michal Vanko</h1>
+<h1 class="name-tag">Michal Vanko</h1>
 
-<h2>Software Developer</h2>
+<h2 class="name-tag">Software Architect and Consultant</h2>
 
 <section id="personal-information">
   {@html content.body}
@@ -95,3 +67,34 @@
     {/each}
   </ul>
 </section>
+
+<style>
+  :global([id])::before {
+    content: '';
+    display: block;
+    height: 5em;
+    margin-top: -5em;
+    visibility: hidden;
+  }
+
+  section[id] {
+    margin-top: 2em;
+  }
+
+  h1 {
+    text-shadow: 2px 2px 1px #c8c4b7; // TODO
+  }
+
+  .name-tag {
+    text-align: center;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    margin: 1.5em 0;
+  }
+</style>