summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/News.vue25
-rw-r--r--src/views/News.vue10
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";