Merge pull request #43 from welpo/style/redesign-posts

💄 style: narrower blog layout, smaller and thinner text, and more

sass/main.scss

@@ -44,11 +44,11 @@
 
   --code-font: 'Cascadia Code';
 
+  --background-color: white;
   --bg-0: #f0f0f0;
   --bg-1: #e7e7e7;
   --bg-2: #fefefe;
   --hover-color: white;
-  --background-color: white;
   --primary-color: #91D8E4;
   --secondary-color: rgb(158, 158, 158);
   --links: #78cfcb;
@@ -56,17 +56,17 @@
   --quote-color: #355f62;
   --border-color: rgb(114, 114, 114);
   --light-border-color: rgba(255, 255, 255, 0.1);
-  --meta-color: rgb(53, 53, 53);
+  --meta-color: #757575;
   --accent-color: #087E96;
   --table-header-color: #BFEAF5;
 }
 [data-theme='dark'] {
+  --background-color: #1f1f1f;
   --bg-0: #2f2f2f;
   --bg-1: rgba(133, 133, 133, 0.5);
   --bg-2: rgba(23, 23, 23, 100%);
   --primary-color: #7cc4d1;
   --hover-color: white;
-  --background-color: #1f1f1f;
   --secondary-color: #696969;
   --links: #8fdfe5;
   --text-color: #eae9e9;
@@ -74,7 +74,7 @@
   --code: #ef476f;
   --border-color: rgb(0, 0, 0);
   --light-border-color: rgba(255, 255, 255, 0.1);
-  --meta-color: rgb(198, 197, 197);
+  --meta-color: #BBBBBB;
   --accent-color: #91e0ee;
   --table-header-color: #b7e4e4;
 
@@ -106,6 +106,11 @@ justify-content:center;
   min-height: 80vh;
 }
 
+article{
+  max-width: calc(var(--max-layout-width) - 14rem);
+  margin: 0 auto;
+}
+
 .section-title {
   display: block;
   font-size: 2.2em;
@@ -113,47 +118,48 @@ justify-content:center;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
-  font-weight: 650;
+  font-weight: 550;
 }
 
 h1 {
   display: block;
   font-size: 2em;
+  font-size: 1.375em;
   margin-top: 0.67em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
-  font-weight: 650;
+  font-weight: 550;
 }
 
 h2 {
   display: block;
-  font-size: 1.7em;
+  font-size: 1.2em;
   margin-top: 0.83em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
-  font-weight: bold;
+  font-weight: 550;
 }
 
 h3 {
   display: block;
-  font-size: 1.5em;
+  font-size: 1.15em;
   margin-top: 0.83em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
-  font-weight: bold;
+  font-weight: 550;
 }
 
 h4 {
   display: block;
-  font-size: 1.2em;
+  font-size: 1em;
   margin-top: 0.83em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
-  font-weight: bold;
+  font-weight: 550;
 }
 
 h5 {
@@ -163,15 +169,14 @@ h5 {
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
-  font-weight: bold;
+  font-weight: 550;
 }
 
 p {
   font-family: 'Source Serif Pro', serif;
-  max-width: 730px;
+  margin-top: 0.4rem;
-  margin-top: 0.5rem;
+  margin-bottom: 2.3vmin;
-  margin-bottom: 1.4rem;
+  font-size: 1em;
-  font-size: 1.2em;
 }
 
 @media only screen and (max-width: 1000px) {

sass/parts/_code.scss

@@ -17,7 +17,6 @@ pre {
 pre code {
   background-color: transparent;
   color: inherit;
-  font-size: 100%;
   padding: 0;
 
   // We only want a border around `code` and not `pre code` blocks.

sass/parts/_header.scss

@@ -62,7 +62,7 @@ header {
 
 .home-title {
   font-size: 1.7em;
-  font-weight: 600;
+  font-weight: 450;
   padding-right: 0.33rem;
   border: none;
   color: var(--accent-color);
@@ -72,6 +72,13 @@ header {
 .meta {
   color: var(--meta-color);
   letter-spacing: -0.5px;
+  font-size: 0.8rem;
+  font-weight: 300;
+  padding-bottom: 1vmin;
+}
+
+.card-meta {
+  color: var(--meta-color);
 }
 
 @media only screen and (max-width: 1000px) {

sass/parts/_home-banner.scss

@@ -21,6 +21,13 @@
     color: var(--accent-color);
 }
 
+.home-banner-header {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 2.8rem;
+    font-weight: 600;
+}
+
 #banner-home-subtitle {
     width: 95%;
     padding-right: 5%;

sass/parts/_misc.scss

@@ -10,6 +10,17 @@
   background-color: var(--primary-color);
 }
 
+.article-title {
+  padding-bottom: 1.2vmin;
+  display: block;
+  font-size: 2.2em;
+  margin-top: 0.67em;
+  margin-bottom: 0em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: 550;
+}
+
 .title-container {
   border-bottom: var(--secondary-color) solid 0.5px;
   padding-bottom: 15px;
@@ -46,7 +57,7 @@ blockquote {
 a {
   color: var(--text-color);
   text-decoration-color: var(--links);
-  font-weight: 600;
+  font-weight: 580;
 }
 
 a:hover {

templates/macros/macros.html

@@ -6,7 +6,7 @@
             <a href={{ page.permalink }}>{{page.title}}</a>
         </div>
 
-        <div class="meta">
+        <div class="card-meta">
             {%- if page.date %}
             {{ page.date | date(format=config.extra.timeformat) }}
             {% endif -%}
@@ -66,9 +66,7 @@
 {% macro page_desc(desc, page) %}
 <div id="banner-container-home">
     <div id="home-banner-text">
-        <h3>
+            <div class="home-banner-header">{{ desc.title }}</div>
-            {{ desc.title }}
-        </h3>
         <section id="banner-home-subtitle">
 					{{ page.content | safe }}
         </section>
@@ -84,13 +82,13 @@
 <main>
     <article>
         <div>
-            {#<h1 class="title">{{ page.title }}</h1>#}
+            <div class="article-title">
-            {{ post_macros::page_header(title=page.title) }}
+                {{ page.title }}
-
+            </div>
             <div class="meta">
                 {% if page.date %}
                 Posted on {{ page.date | date(format=config.extra.timeformat) }}
-                ~
+                •
                 {% endif %}
                 <span> {{ page.reading_time }} minute read</span>
                 {% if page.draft %}