porcellis.com

diff --git a/assets/style.scss b/assets/style.scss
index f53744737b64858bc3f54d7479f5e19f0d6abae5..de530155e9bdce9777f7a1ea8ceb3b787c0339ce 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -1,15 +1,12 @@
 :root {
   --bg: #fff;
-  --cyan: #1e9191;
-  --light-gray: #eee;
   --gray: #6a6a6a;
   --code: #666;
   --dark: #444;
-  --darker: #222;
   --code-bg: #0000000a;
 }
 
-main {
+.header, main, footer {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   min-width: 0;
@@ -19,7 +16,7 @@
 html {
   background: var(--bg);
   font-size: 16px;
-  font-family: sans-serif;
+  font-family: serif;
   line-height: 1.5;
 }
 
@@ -27,18 +24,51 @@ a {
   color: var(--black);
 }
 
-.article-list {
-  margin: auto 5% auto 5%;
+.inner-article-title, footer > div, .article-list, article {
+	grid-column: 1/12;
+}
+
+blockquote {
+
+	border-left: .25rem solid var(--gray);
+	color: var(--dark);
+	font-style: italic;
+	margin: .8rem 0;
+	padding: .5rem 1rem;
 }
 
-.article-date {
+.inner-article-title h1 {
+  margin: 0;
+}
+
+.inner-article-date, .article-date, footer > div {
   color: #888383;
 }
 
+.inner-article-date {
+  font-style: italic;
+}
+
+hr {
+  width: 20%;
+}
+
 @media only screen and (min-width: 800px) {
+  .header-nav, .article-list {
+    grid-column: 5/9;
+    grid-row: 1;
+  }
+
   .article-list {
-    grid-column: 3/12;
-    grid-row: 1;
+    grid-row: 3;
+  }
+
+  .languages {
+    grid-row: 2;
+  }
+
+  article, .translations, .languages, .inner-article-title, footer > div {
+    grid-column: 5/9;
   }
 
   content {