make links more visible

assets/scss/colors.scss

@@ -46,11 +46,9 @@ a.footer-nav-item:hover {
   &.light {
     color: $light-bg-alt;
     background-color: $light-bg;
-    border-color: $light-bg;
   }
   color: $dark-bg-alt;
   background-color: $dark-bg;
-  border-color: $dark-bg;
   transition: $trans-short;
 }
 

assets/scss/font.scss

@@ -19,6 +19,12 @@ $small: 12pt;
   font-size: $small;
 }
 
+p,
+.postdescription,
+ul {
+  line-height: 2em;
+}
+
 h1{
   font-size: $huge;
 }

assets/scss/layout.scss

@@ -93,6 +93,10 @@ p code{
   align-items: center;
 }
 
+.postinfo {
+  text-align: right;
+}
+
 h1,
 h2,
 h3,
@@ -106,6 +110,7 @@ h6 {
   justify-content: right;
   display: flex;
   align-items: center;
+  text-align: right;
 }
 
 h2,
@@ -121,6 +126,7 @@ article {
   margin-inline: auto;
 }
 
+
 .titlecontainer,
 header{
   width: 100%;

assets/scss/style.scss

@@ -4,7 +4,6 @@ $toggle-height: 24pt;
 
 * {
   border-width: 2pt;
-  transition: ease-in-out;
 }
 
 input[type="checkbox"] {
@@ -93,3 +92,10 @@ h6 {
   border-width: 0.24em;
   padding-left: 2em;
 }
+
+p a,
+.postdescription a,
+ul a{
+  border-style: solid;
+  padding: 0.12em;
+}

layouts/_default/list.html

@@ -12,7 +12,8 @@
     {{ range .Pages }}
     <div id="postlist">
     <h2 class="colorswitch posttitle">
-        <a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2><div class="postdescription">{{.Description}}<br>{{.WordCount}} words</a>
+        <a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2><div class="postdescription">{{.Description}}</a><br>
+        <a class="postinfo" href="{{.Permalink}}">{{.WordCount}} words | read more...</a>
     </div>
     {{ end }}
     </div>

layouts/index.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
-<div>
-  <h1 class="title">{{ .Site.Title }}</h1>
-</div>
-<div>
+<header>
+  <h1 id="title" class="colorswitch">{{ .Site.Title }}</h1>
+</header>
+<article id="content" class="colorswitch">
   <p>
     {{ .Content }}
   </p>
-</div>
+</article>
 {{ end }}