Further update article style.

assets/css/main.css

@@ -1,22 +0,0 @@
-body {
-  color: #222;
-  font-family: sans-serif;
-  line-height: 1.5;
-  margin: 1rem;
-  max-width: 768px;
-}
-
-header {
-  border-bottom: 1px solid #222;
-  margin-bottom: 1rem;
-}
-
-footer {
-  border-top: 1px solid #222;
-  margin-top: 1rem;
-}
-
-a {
-  color: #00e;
-  text-decoration: none;
-}

assets/css/styles.css

@@ -7,30 +7,6 @@ body {
   margin: auto;
 }
 
-.date {
-  font-style: italic;
-}
-
-img {
-  max-width: 100%;
-  max-height: 500px;
-}
-
-.center-img img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-figcaption {
-  text-align: center;
-  font-style: italic;
-}
-
-h2 {
-  border-bottom: 1px solid #000;
-}
-
 header {
   display: flex;
   align-items: center;
@@ -57,3 +33,36 @@ nav li {
 nav li:hover {
   background-color: #eee;
 }
+
+main {
+  margin-top: 50px;
+}
+
+h1 {
+  margin-bottom: 5px;
+}
+
+.date {
+  font-style: italic;
+}
+
+img {
+  max-width: 100%;
+  max-height: 500px;
+}
+
+.center-img img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+figcaption {
+  text-align: center;
+  font-style: italic;
+}
+
+h2 {
+  border-bottom: 1px solid #000;
+}
+

layouts/_default/single.html

@@ -3,7 +3,7 @@
 
   {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
   {{ $dateHuman := .Date | time.Format ":date_long" }}
-  <time datetime="{{ $dateMachine }}" class="date">{{ $dateHuman }}</time>
+  <span class="date">Published on <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span>
 
   {{ .Content }}
   {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}