projects / styx.blog / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 9422a20)
Yak shave the design a bit
authorDavid Kerkeslager <kerkeslager@gmail.com>
Thu, 13 Aug 2020 17:32:30 +0000 (13:32 -0400)
committerDavid Kerkeslager <kerkeslager@gmail.com>
Thu, 13 Aug 2020 17:32:30 +0000 (13:32 -0400)
core/templates/core/base.html patch | blob | history
core/templates/core/post_detail.html patch | blob | history
core/templates/core/post_list.html patch | blob | history
core/templates/core/style.css patch | blob | history

diff --git a/core/templates/core/base.html b/core/templates/core/base.html
index ba5ab1f..b98ea1d 100644 (file)
--- a/core/templates/core/base.html
+++ b/core/templates/core/base.html
@@ -14,7 +14,7 @@
 
   <body>
     <header>
-      <h1>Styx</h1>
+      <h1>styx</h1>
     </header>
 
     <nav>
diff --git a/core/templates/core/post_detail.html b/core/templates/core/post_detail.html
index a539a14..c8bf49a 100644 (file)
--- a/core/templates/core/post_detail.html
+++ b/core/templates/core/post_detail.html
@@ -3,13 +3,15 @@
 {% block content %}
 
 <article>
-  <h1>{{ object.title }}</h1>
+  <header>
+    <h1>{{ object.title }}</h1>
 
-  <time>{{ post.publication_utc|date:'Y-m-d H:i' }}</time>
+    <time>{{ post.publication_utc|date:'l, F j, Y' }}</time>
+  </header>
 
-  <div class='body'>
+  <main class='body'>
     {{ object.body_html }}
-  </div>
+  </main>
 </article>
 
 {% endblock %}
diff --git a/core/templates/core/post_list.html b/core/templates/core/post_list.html
index 8d6561c..bca4c13 100644 (file)
--- a/core/templates/core/post_list.html
+++ b/core/templates/core/post_list.html
@@ -6,19 +6,25 @@
 
 {% for post in page_obj %}
 <article>
-  <h1>
-    <a href='{% url "post-detail" post.slug %}'>
-      {{ post.title }}
-    </a>
-  </h1>
+  <header>
+    <h1>
+      <a href='{% url "post-detail" post.slug %}'>
+        {{ post.title }}
+      </a>
+    </h1>
+
+    <time>{{ post.publication_utc|date:'l, F j, Y' }}</time>
+  </header>
 
-  <div class='teaser'>
+  <main class='teaser'>
     {{ post.teaser_html }}
-  </div>
+  </main>
 
-  <a class='read-more' href='{% url "post-detail" post.slug %}'>
-    Read more
-  </a>
+  <footer>
+    <a href='{% url "post-detail" post.slug %}'>
+      Read more
+    </a>
+  </footer>
 </article>
 {% endfor %}
 
diff --git a/core/templates/core/style.css b/core/templates/core/style.css
index d208566..a49d1bb 100644 (file)
--- a/core/templates/core/style.css
+++ b/core/templates/core/style.css
@@ -1,4 +1,11 @@
-html { height: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+html {
+  height: 100%;
+  font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+}
+
+header, main, footer, p {
+  margin: 0;
+  padding: 0;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -33,6 +40,8 @@ body > header {
 }
 
 body > header > h1 {
+  font-family: Geneva, sans-serif;
+  font-weight: 100;
   font-size: 5rem;
 }
 
@@ -77,25 +86,46 @@ article {
   display: flex;
   flex-direction: column;
 
-  margin: 2.5rem 0;
+  margin-top: 2.75rem;
+}
+
+article:first-of-type {
+  margin-top: 0;
+}
+
+article:not(:first-of-type) {
+  border-top: 1px solid black;
+  padding-top: 2rem;
 }
 
-article h1 a,
-article h1 a:visited {
+article > header h1 a,
+article > header h1 a:visited {
   text-decoration: none;
 }
 
-article h1 a:hover,
-article h1 a:active{
+article > header h1 a:hover,
+article > header h1 a:active{
   text-decoration: underline;
 }
 
-article h1 {
+article > header h1 {
   font-size: 2rem;
 }
 
-article a.read-more {
-  margin-top: 1rem;
+article > main {
+  margin: 1.6rem 0;
+}
+
+article > main:last-child {
+  margin-bottom: 0;
+}
+
+nav.pagination:first-child {
+  margin-bottom: 3rem;
+}
+
+nav.pagination:last-child {
+  margin-top: 3rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -108,7 +138,7 @@ article a.read-more {
     color: #dfdede;
   }
 
-  article.teaser:not(:first-of-type) {
+  article:not(:first-of-type) {
     border-top: 1px solid #dfdddd;
   }
 }
A simple custom blog written in Django for https://styx.blog/