css

layout/archive.ejs

@@ -19,7 +19,7 @@ if (page.menu_id == undefined) {
   	<% }); %>
   	<% years.forEach((year, i) => { %>
   		<article class='post-card<%- scrollreveal() %>' id='archive'>
-  			<div class='list-title h4'><%= year %></div>
+  			<div class='archive-year h4'><%= year %></div>
   			<% site.posts.sort('date', -1).filter(function (post) { %>
   				<% post.year = date(post.date, 'YYYY'); %>
   		    <% return post.year == year; %>

source/css/_common/title.styl

@@ -24,14 +24,6 @@ h6
   font-size: $fs-12
 
 .post-list
-  .list-title
-    color: var(--text-p3)
-    font-family: $ff-code
-    font-weight: 700
-    line-height: 1.2
-    padding-bottom: 0.5rem
-  >.list-title
-    margin: 2rem 1rem 0rem
   .post-title
     font-weight: 500
     margin: 0.5rem 0

source/css/_layout/pages/archives.styl

@@ -1,10 +1,17 @@
 .post-list .post-card#archive
+  .archive-year
+    color: $color-theme
+    opacity: .4
+    font-family: $ff-code
+    font-weight: 700
+    line-height: 1.2
+    padding-bottom: 0.5rem
+    trans1 opacity
   a.post
     display: inline-flex
     align-items: baseline
     margin: 0.25rem 0
-    font-weight: 500
-    color: var(--text-p2)
+    color: var(--text-p1)
     &:hover
       color: $color-hover
     time
@@ -12,40 +19,55 @@
       margin-right: 1em
       font-weight: 700
       flex-shrink: 0
-      opacity 0.5
+      opacity .65
+  &:hover .archive-year
+    opacity: 1
 
 .post-list .post-card#cats
   a.cat
     display: flex
     &.child
       padding-left: 2rem
-    font-weight: 500
     padding: 0.5rem 1rem
     border-radius: $border-block
     color: var(--text-p2)
     align-items: center
+    justify-content: space-between
+    border: 1px solid transparent
+    .badge
+      color: $color-theme
+      font-weight: 700
+      font-family: $ff-code
+      opacity: .5
     &:hover
       background: var(--block)
-      color: var(--text-p1)
+      color: var(--text-p0)
+      border-color: var(--block-border)
       .badge
-      opacity 0.5
-      font-size: $fs-13
-      margin-left: .5em
+        opacity: 1
 
 .post-list .post-card#tags
+  display: flex
+  flex-wrap: wrap
   a.tag
     display: inline-flex
     align-items: center
     position: relative
-    font-weight: 500
     color: var(--text-p2)
-    padding: .5rem
+    padding: 8px
     border-radius: $border-block
-    &:hover
-      color: var(--text-p1)
-      background: var(--block)
+    border: 1px solid transparent
     span
       margin: 0 0.25rem
     .badge
-      opacity 0.5
+      color: $color-theme
       font-weight: 700
+      font-family: $ff-code
+      opacity: .5
+      align-self: flex-start
+    &:hover
+      color: var(--text-p0)
+      background: var(--block)
+      border-color: var(--block-border)
+      .badge
+        opacity: 1

source/css/_layout/sidebar/sidebar.styl

@@ -1,6 +1,8 @@
 .l_left
   display: flex
   flex-direction: column
+  word-break: break-all
+  text-align: justify
   padding: var(--gap-l)
   padding-top: "calc(2 * %s)" % var(--gap-l)
   height: "calc(100vh - 3 * %s)" % var(--gap-l)