Refactor CSS

README.md

@@ -5,7 +5,7 @@ An insanely fast and performance-based Zola theme, ported from [Light Speed Jeky
 Some fun facts about the theme:
 
 * Perfect score on Google's Lighthouse audit
-* Only ~600 bytes of CSS
+* Only ~700 bytes of CSS
 * No JavaScript
 * Now with SEO!
 

sass/style.scss

@@ -3,8 +3,8 @@ body {
 	background: #fffaf7;
 	color: #2d2d2d;
 	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-		Helvetica, Arial, sans-serif, "Apple Color Emoji",
-		"Segoe UI Emoji", "Segoe UI Symbol";
+		Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol";
 }
 a,
 a:visited {
@@ -32,6 +32,17 @@ img {
 	height: auto;
 	max-width: 100%;
 }
+.homepage-list {
+	list-style: none;
+	padding: 1rem 0;
+}
+.homepage-list li {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-bottom: 10px;
+}
 @media (max-width: 38rem) {
 	.homepage-list li a {
 		width: 100%;

templates/index.html

@@ -62,7 +62,7 @@
       {% endblock header %}
 
       {% block content %}
-      <ul class="homepage-list" style="list-style:none;padding:1rem 0;">
+      <ul class="homepage-list">
         {% for post in section.pages %}
           {{ macros::post_in_list(post=post) }}
         {% endfor %}

templates/macros.html

@@ -1,5 +1,5 @@
 {% macro post_in_list(post) %}
-<li style="align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:10px;">
+<li>
   <a href="{{ post.permalink | safe }}">{{ post.title }}</a>
   <time style="font-size:90%;" datetime="{{ post.date | date(format="%+") }}">{{ post.date | date(format="%B %d, %Y") }}</time>
 </li>