Finish color and styling settings

src/routes/$layout.svelte

@@ -43,12 +43,8 @@
 
   main {
     position: relative;
-    max-width: calc(100vw - 1em);
-    padding: 1.4em;
-
-    @media (min-width: @media-l) {
-      /* max-width: 34em; */
-    }
+    max-width: 100vw;
+    padding: 1.2em;
 
     h1,
     h2,
@@ -61,7 +57,9 @@
     ol,
     figure,
     img,
-    blockquote {
+    blockquote,
+    iframe,
+    footer {
       max-width: 42rem;
       margin-left: auto;
       margin-right: auto;
@@ -82,5 +80,19 @@
     figure {
       max-width: @max-image-size;
     }
+    iframe {
+      max-width: 46rem;
+      display: block;
+    }
+    footer {
+      max-width: 52rem;
+    }
+
+    img {
+      width: 100%;
+      margin: 0 0 1em 0;
+      border-radius: 5px;
+      box-shadow: @content-box-shadow;
+    }
   }
 </style>

src/routes/blog/[slug].svelte

@@ -33,7 +33,6 @@
 
 <svelte:head>
   <title>{post.title}</title>
-  <link rel="stylesheet" href="/prism.css" />
 </svelte:head>
 
 <h1>{post.title}</h1>
@@ -44,6 +43,8 @@
 <ArticleFooter {post} />
 
 <style>
+  @import '../../styles/variables.module.less';
+
   /*
 		By default, CSS is locally scoped to the component,
 		and any unused styles are dead-code-eliminated.
@@ -52,18 +53,6 @@
 		so we have to use the :global(...) modifier to target
 		all elements inside .content
 	*/
-  .content :global(pre) {
-    background-color: #f9f9f9;
-    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
-    padding: 0.5em;
-    border-radius: 4px;
-    overflow-x: auto;
-  }
-
-  .content :global(pre) :global(code) {
-    background-color: transparent;
-    /* padding: 0; */
-  }
 
   .content :global(ul) {
     line-height: 1.5;
@@ -74,10 +63,7 @@
   }
 
   .content :global(img) {
-    max-width: 100%;
     max-height: 640px;
-    border-radius: 5px;
-    box-shadow: 0px 0px 8px 1px #2d3935;
   }
 
   .content :global(img:only-child) {

src/routes/blog/index.svelte

@@ -73,7 +73,7 @@
   }
 
   .post-list > li:not(:last-child) {
-    margin-bottom: 2em;
+    margin-bottom: 3em;
   }
 
   .see-all {

src/routes/index.svelte

@@ -35,13 +35,6 @@
     margin: 0 auto;
   }
 
-  img {
-    width: 100%;
-    margin: 0 0 1em 0;
-    border-radius: 5px;
-    box-shadow: 0px 0px 8px 1px #2d3935;
-  }
-
   p {
     margin: 1em auto;
   }

src/routes/portfolio/index.svelte

@@ -81,10 +81,6 @@
     margin-top: 2em;
   }
 
-  h1 {
-    text-shadow: 2px 2px 1px #c8c4b7; // TODO
-  }
-
   .name-tag {
     text-align: center;
   }