small styling changes

- make article use section styling
- remove bottom margin from h2
- add hover to timestamp
- fix indentation in terminal.css

2 files changed, 59 insertions, 56 deletions

diff --git a/css/terminal.css b/css/terminal.css
index d8dc3bd..3cdd138 100644
--- a/css/terminal.css
+++ b/css/terminal.css
@@ -1,28 +1,28 @@
 @font-face {
-    font-family: "DejaVu Sans Mono";
-    src: url("../files/fonts/dejavu/ttf/DejaVuSansMono.ttf");
+	font-family: "DejaVu Sans Mono";
+	src: url("../files/fonts/dejavu/ttf/DejaVuSansMono.ttf");
 }
 :root {
-    --fg: #90ff90;
+	--fg: #90ff90;
 	--shadow: 0 0 3px #80ffc066, 0 0 5px #0f63;
-    --link: #3e3;
-    --visited: #b9ffb0;
+	--link: #3e3;
+	--visited: #b9ffb0;
 
-    --bg: #1d2021;
+	--bg: #1d2021;
 	--bg2: black;
 	--selection: #466639;
 
-    --font-body: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif;
-    --font-mono: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Menlo", monospace;
-    --font-accent: var(--font-mono);
+	--font-body: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif;
+	--font-mono: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Menlo", monospace;
+	--font-accent: var(--font-mono);
 }
 .green {
-    --fg: #86ff86; /* hue 120, contrast 13:1 */
+	--fg: #86ff86; /* hue 120, contrast 13:1 */
 	--shadow: 0 0 3px #80ffc066, 0 0 5px #0f63;
-    --link: #42f042; /* hue 120, contrast 10.75:1 */
-    --visited: #b7ffaf; /* hue 114, contrast 14:1 */
+	--link: #42f042; /* hue 120, contrast 10.75:1 */
+	--visited: #b7ffaf; /* hue 114, contrast 14:1 */
 
-    --bg: #1d2021;
+	--bg: #1d2021;
 	--selection: #466639;
 }
 .purple {
@@ -40,29 +40,29 @@
 	--link: #00f5f5; /* hue 180, contrast 12:1 */
 	--visited: #83baf1; /* hue 210, contrast 8:1 */
 
-    --bg: #1d2021;
+	--bg: #1d2021;
 	--selection: #466639;
 }
 
 /* UTILITY CLASSES */
-.clearfix::after, section::after { clear:both; display:block; content: ""; }
+.clearfix::after, section::after, article::after { clear:both; display:block; content: ""; }
 .inline { display:inline }
 /* MAIN STYLES*/
 html {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
 }
 body {
-    background-color: var(--bg);
-    background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%);
-    background-size: 100% 3px;
-    color: var(--fg);
-    text-shadow: var(--shadow);
-    font: 100%/1.6 var(--font-body);
-    margin: auto;
-    max-width: 75ch;
-    word-spacing: .05em;
+	background-color: var(--bg);
+	background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%);
+	background-size: 100% 3px;
+	color: var(--fg);
+	text-shadow: var(--shadow);
+	font: 100%/1.6 var(--font-body);
+	margin: auto;
+	max-width: 75ch;
+	word-spacing: .05em;
 }
 ::selection {
 	background: var(--selection);
@@ -70,36 +70,36 @@ body {
 	text-shadow: none;
 }
 a {
-    color: var(--link);
+	color: var(--link);
 }
 a:visited {
-    color: var(--visited);
+	color: var(--visited);
 }
 a:hover,
 a:focus {
-    text-decoration: none;
+	text-decoration: none;
 }
 code,
 pre {
-    font: 100%/1.25 var(--font-mono);
+	font: 100%/1.25 var(--font-mono);
 }
 footer {
-    font: 75%/1.25 var(--font-accent);
+	font: 75%/1.25 var(--font-accent);
 }
 h1 {
-    font: bold 200%/1 var(--font-accent);
-    margin: 0.5em 0 0 0;
-    border-bottom: 0.25em solid;
+	font: bold 200%/1 var(--font-accent);
+	margin: 0.5em 0 0 0;
+	border-bottom: 0.25em solid;
 }
 h1::after {
-    content: "█";
-    display: inline-block;
-    animation: blink 2.4s steps(2) infinite;
+	content: "█";
+	display: inline-block;
+	animation: blink 2.4s steps(2) infinite;
 }
 @keyframes blink {
-    0% {
-        opacity: 0;
-    }
+	0% {
+		opacity: 0;
+	}
 }
 @media(prefers-reduced-motion: reduce) {
 	h1::after {
@@ -108,32 +108,33 @@ h1::after {
 	}
 }
 h2 {
-    font: bold 141%/1 var(--font-accent);
-    margin: 0.4em 0;
+	font: bold 141%/1 var(--font-accent);
+	margin: 0.4em 0 0 0;
 }
 h3 {
 	font: bold 117%/1 var(--font-accent);
 }
 /* NAVIGATION */
 header > nav > ul {
-    font: 100%/1.5 var(--font-accent);
-    list-style-type: none;
-    margin: 0 0 0.4em 0;
-    padding: 0;
+	font: 100%/1.5 var(--font-accent);
+	list-style-type: none;
+	margin: 0 0 0.4em 0;
+	padding: 0;
 }
 header > nav > ul > li {
-    display: inline;
+	display: inline;
 }
 header > nav > ul > li > a {
-    padding: 0.4em;
+	padding: 0.4em;
 }
 header > nav a.active {
-    background: var(--fg);
-    color: var(--bg);
+	background: var(--fg);
+	color: var(--bg);
 }
 /* SECTION */
-section {
-    border-bottom: 1px solid;
+section,
+article {
+	border-bottom: 1px solid;
 }
 /* IMAGES */
 figure {
@@ -165,7 +166,7 @@ tr:nth-of-type(even) {
 	background: var(--bg2);
 }
 tr td:first-child {
-    white-space: nowrap;
+	white-space: nowrap;
 }
 td {
 	padding: 0 0.4em;
diff --git a/src/blog.njk b/src/blog.njk
index a8ec510..84c6f03 100644
--- a/src/blog.njk
+++ b/src/blog.njk
@@ -7,9 +7,11 @@ size = 20
 reverse = true
 ---
 {% for post in posts %}
-<article>
+<article class=blogpost>
 	<h2><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
-	<time datetime="{{ post.date | rfc3339_datetime }}">{{ post.date | local_date }}</time>
+	<time datetime="{{ post.date | rfc3339_datetime }}" title="{{ post.date | rfc3339_datetime}}">
+		{{ post.date | local_date }}
+	</time>
 	{%- if post.data.page.excerpt -%}
 		<p>{{ post.data.page.excerpt | safe }}
 	{%- endif -%}