diff options
| author | gumi <git@gumi.ca> | 2019-07-25 21:14:09 -0400 |
|---|---|---|
| committer | gumi <git@gumi.ca> | 2019-07-25 21:14:09 -0400 |
| commit | 310c70c0a5b11a95ed85ae63e4fb2cf1d3441880 (patch) | |
| tree | d551efe63eae4469e0dbefb0ca11496a55d7a094 | |
| parent | 0f01df5c4d4a75bd75cb9de2d55e8e254b01c3c7 (diff) | |
| download | website-310c70c0a5b11a95ed85ae63e4fb2cf1d3441880.tar.gz website-310c70c0a5b11a95ed85ae63e4fb2cf1d3441880.tar.bz2 website-310c70c0a5b11a95ed85ae63e4fb2cf1d3441880.tar.xz website-310c70c0a5b11a95ed85ae63e4fb2cf1d3441880.zip | |
further improve the readability of News
| -rw-r--r-- | src/components/News.vue | 25 | ||||
| -rw-r--r-- | 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"; |