Improve archive and categories page layouts

5 files changed, 77 insertions, 39 deletions

diff --git a/_includes/index.liquid b/_includes/index.liquid
index fe7567f..1fa5954 100644
--- a/_includes/index.liquid
+++ b/_includes/index.liquid
@@ -1,19 +1,19 @@
 <div class="column">
     {% for post in paginator.posts %}
-
-    <h1>
-	<a href="{{ site.baseurl }}{{post.url }}">
-	    {{ post.title }}
-	</a>
-    </h1>
-    <h2>
-	{% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}
-	{{ site.data[site.active_lang].strings.date[month]}} {{ post.date | date: "%e, %Y" }}
-    </h2>
-    <span>
-	{{ post.excerpt }}
-    </span>
+	<div class="columns">
+	    <div class="column date is-one-third">
+		{% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}
+		{{ site.data[site.active_lang].strings.date[month]}} {{ post.date | date: "%e, %Y" }}
+	    </div>
+	    <div class="column">
+		<a class="index-content" href="{{ site.baseurl }}{{post.url }}">
+		    {{ post.title }}
+		</a>
+		{{ post.excerpt }}
+	    </div>
+	</div>
     {% endfor %}
 </div>
 
 {% include pagination.liquid %}
+
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
index fa459bc..016b610 100644
--- a/_layouts/post.liquid
+++ b/_layouts/post.liquid
@@ -4,7 +4,7 @@
     {% include banner.liquid %}
 
     <div class="columns">
-	<div class="column mt-6 ml-18 is-two-thirds">
+	<div class="column mt-6 is-offset-2 is-6">
 	    <div class="column mb-2 content">
 		<h1>
 		    <a href="{{ site.baseurl}}{{ page.url }}">
@@ -19,8 +19,12 @@
 	    </div>
 	    {% include navigation_buttons.liquid %}
 	</div>
-	<div class="column mr-18">
+	<div class="column is-2">
 	    {% include sidenav.liquid %}
 	</div>
     </div>
+
+    <div class="column">
+	{% include footer.liquid %}
+    </div>
 </body>
diff --git a/archive.liquid b/archive.liquid
index 74a8372..71ca8a9 100644
--- a/archive.liquid
+++ b/archive.liquid
@@ -9,22 +9,28 @@ permalink: /archive.html
     </h1>
 
     {% for post in site.posts %}
-    {% unless post.next %}
-        <h2>{{ post.date | date: '%Y' }}</h2>
-	<ul>
-	    {% else %}
-	    {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
-            {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
-            {% if year != nyear %}
-        </ul>
-        <h2>{{ post.date | date: '%Y' }}</h2>
-        <ul>
-            {% endif %}
-	    {% endunless %}
-	    <li>
+	{% unless post.next %}
+	    <h2>{{ post.date | date: '%Y' }}</h2>
+	    <ul>
+    {% else %}
+		{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
+		{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
+		{% if year != nyear %}
+	    </ul>
+	    <h2>{{ post.date | date: '%Y' }}</h2>
+	    <ul>
+		{% endif %}
+	{% endunless %}
+	<div class="columns">
+	    <div class="column archive-date is-3">
+		{% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}
+		{{ site.data[site.active_lang].strings.date[month]}} {{ post.date | date: "%e, %Y" }}
+	    </div>
+	    <div class="column pull-left">
 		<a href="{{ site.baseurl}}{{ post.url }}">
-		    {{ post.date | date: "%b %-d" }} - {{ post.title }}
+		    {{ post.title }}
 		</a>
-	    </li>
-	    {% endfor %}
+	    </div>
+	</div>
+    {% endfor %}
 </div>
diff --git a/assets/css/styles.css b/assets/css/styles.css
index dea2080..c98f3fe 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -14,7 +14,7 @@
     }
 
     p {
-	font-size: 22px;
+	font-size: 20px;
     }
 }
 
@@ -99,7 +99,7 @@
     }
     
     body {
-	font-family: Roboto, Helvetica, Arial, sans-serif !important;
+	font-family: "Inter", sans-serif !important;
 	margin: 0;
     }
 }
@@ -143,6 +143,23 @@
 	color: #113f67;
     }
 
+    .date {
+	color: #7b8894;
+	text-align: right;
+	font-style: italic;
+    }
+
+    .archive-date {
+	color: #7b8894;
+	text-align: left;
+	font-style: italic;
+	font-size: 21px;
+    }
+
+    .index-content {
+	font-size: 20px;
+    }
+
     a {
 	color: #38598b;
     }
@@ -178,7 +195,7 @@
 
     
     body {
-	font-family: Roboto, Helvetica, Arial, sans-serif !important;
+	font-family: "Inter", sans-serif !important;
 	margin: 0;
 	background: #f3f3f3;
     }
@@ -193,6 +210,11 @@
     font-weight: bold;
 }
 
+.pull-left {
+    text-align: left;
+    font-size: 21px;
+}
+
 :not(.sidebar-element) li {
     list-style-type: disc;
     margin-top: .7em;
diff --git a/categories.liquid b/categories.liquid
index c4cccbf..23b31a1 100644
--- a/categories.liquid
+++ b/categories.liquid
@@ -6,10 +6,16 @@ permalink: /categories.html
 <div class="column">
     {% for tag in site.tags %}
         <h1>{{ tag[0] }}</h1>
-        <ul>
         {% for post in tag[1] %}
-	    <li><a href="{{ site.baseurl}}{{ post.url }}">{{ post.date | date: "%b %-d" }} - {{ post.title }}</a></li>  
-            {% endfor %}
-        </ul>
-	{% endfor %}
+	    <div class="columns">
+		<div class="column archive-date is-3">
+		    {% capture month%}{{ post.date |  date: "%b" }}{% endcapture %}
+		    {{ site.data[site.active_lang].strings.date[month]}} {{ post.date | date: "%e, %Y" }}
+		</div>
+		<div class="column pull-left">
+		    <a href="{{ site.baseurl}}{{ post.url }}">{{ post.title }}</a>
+		</div>
+	    </div>
+        {% endfor %}
+    {% endfor %}
 </div>