From 310c70c0a5b11a95ed85ae63e4fb2cf1d3441880 Mon Sep 17 00:00:00 2001
From: gumi <git@gumi.ca>
Date: Thu, 25 Jul 2019 21:14:09 -0400
Subject: further improve the readability of News

---
 src/components/News.vue | 25 ++++++++++++++++++++++---
 src/views/News.vue      | 10 +++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/News.vue b/src/components/News.vue
index a24209a..473c9a1 100644
--- a/src/components/News.vue
+++ b/src/components/News.vue
@@ -13,15 +13,35 @@
 
 <style scoped>
 .news .entry {
-	margin-bottom: 1em;
+	margin-bottom: 0;
+	padding-bottom: 1em;
 	hyphens: auto;
 
+	&:not(:last-of-type) {
+		padding-bottom: 3em;
+	}
+
 	&:nth-of-type(1n + 2) {
-		margin-top: 3em;
 		padding-top: 1em;
 		border-top: solid 0.4ex rgba(0, 0, 0, 0.1);
 	}
 
+	&:first-child:not(:only-child) {
+		padding-top: 1em;
+		border-top: solid 0.4ex transparent;
+	}
+
+	&:nth-of-type(1n + 2), &:not(:only-child) {
+		&:hover, &:target {
+			border-color: #0000FF;
+			background-color: rgba(220,220,220,0.5);
+
+			& > .date, & > a {
+				color: #0000FF;
+			}
+		}
+	}
+
 	& > a {
 		text-decoration: none;
 		color: inherit;
@@ -30,7 +50,6 @@
 
 	& > .date {
 		float: right;
-		color: #0000FF;
 	}
 
 	& .body {
diff --git a/src/views/News.vue b/src/views/News.vue
index 24aa689..58f3e4c 100644
--- a/src/views/News.vue
+++ b/src/views/News.vue
@@ -1,10 +1,18 @@
 <template>
 	<main class="main-content">
-		<h1>News</h1>
+		<h1>News archive</h1>
 		<News count="Infinity"/>
 	</main>
 </template>
 
+<style scoped>
+.main-content {
+	& h1 {
+		margin-bottom: 0;
+	}
+}
+</style>
+
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import News from "@/components/News.vue";
-- 
cgit v1.2.3-60-g2f50