Improve readability, update CSS

Messing with font sizes and opacity to make the site more readable.
Changes across basically all templates.

Author: a-gavin

static/app.css

@@ -58,14 +58,6 @@
     @apply w-6 -translate-y-[5.5px] -rotate-45;
   }
 
-  .nav-wrapper {
-    @apply hidden lg:flex;
-  }
-
-  .open .nav-wrapper {
-    @apply flex;
-  }
-
   article {
     @apply text-lg;
   }
@@ -95,10 +87,10 @@
   }
 
   .primary-link {
-    @apply text-black bg-transparent border-none hover:underline hover:decoration-4 hover:decoration-[#BECA9A] 
+    @apply bg-transparent border-none hover:underline hover:decoration-4 hover:decoration-[#BECA9A]
   }
 
   .secondary-link {
-    @apply text-gray-600 bg-transparent border-none hover:underline hover:decoration-2 hover:decoration-[#BECA9A] 
+    @apply bg-transparent border-none hover:underline hover:decoration-2 hover:decoration-[#BECA9A]
   }
 }

static/main.css

@@ -1119,6 +1119,10 @@ body {
   --tw-prose-invert-td-borders: #404040;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .relative {
   position: relative;
 }
@@ -1131,12 +1135,20 @@ body {
   bottom: 1rem;
 }
 
+.right-0 {
+  right: 0px;
+}
+
 .top-0 {
   top: 0px;
 }
 
-.top-3 {
-  top: 0.75rem;
+.top-4 {
+  top: 1rem;
+}
+
+.z-10 {
+  z-index: 10;
 }
 
 .z-40 {
@@ -1178,6 +1190,19 @@ body {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .h-auto {
   height: auto;
 }
@@ -1186,8 +1211,12 @@ body {
   min-height: 3.5rem;
 }
 
-.w-1\/4 {
-  width: 25%;
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-auto {
+  width: auto;
 }
 
 .w-full {
@@ -1230,10 +1259,22 @@ body {
   justify-content: space-between;
 }
 
-.space-x-16 > :not([hidden]) ~ :not([hidden]) {
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(4rem * var(--tw-space-x-reverse));
-  margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
@@ -1246,71 +1287,53 @@ body {
   text-wrap: wrap;
 }
 
-.rounded-sm {
-  border-radius: 0.125rem;
+.rounded-md {
+  border-radius: 0.375rem;
 }
 
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .pl-6 {
   padding-left: 1.5rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
 
-.text-center {
-  text-align: center;
+.text-left {
+  text-align: left;
 }
 
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+.text-center {
+  text-align: center;
 }
 
 .text-2xl {
   font-size: 1.953rem;
 }
 
-.text-3xl {
-  font-size: 2.441rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1320,17 +1343,36 @@ body {
   font-size: 1.563rem;
 }
 
-.font-bold {
-  font-weight: 700;
+.font-semibold {
+  font-weight: 600;
 }
 
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.opacity-60 {
-  opacity: 0.6;
+.text-opacity-80 {
+  --tw-text-opacity: 0.8;
+}
+
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-gray-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
 }
 
 /*
@@ -1342,18 +1384,22 @@ body {
   transition-property: none !important;
 }
 
-.nav-wrapper {
-  display: none;
+.open {
+  overflow: hidden;
 }
 
-@media (min-width: 1024px) {
-  .nav-wrapper {
-    display: flex;
-  }
+.open .btn-menu::before {
+  width: 1.5rem;
+  --tw-translate-y: 5.5px;
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.open .nav-wrapper {
-  display: flex;
+.open .btn-menu::after {
+  width: 1.5rem;
+  --tw-translate-y: -5.5px;
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 article {
@@ -1372,8 +1418,6 @@ article {
 .primary-link {
   border-style: none;
   background-color: transparent;
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
 .primary-link:hover {
@@ -1382,50 +1426,60 @@ article {
   text-decoration-thickness: 4px;
 }
 
-.secondary-link {
-  border-style: none;
-  background-color: transparent;
+.focus-within\:block:focus-within {
+  display: block;
+}
+
+.focus\:block:focus {
+  display: block;
+}
+
+.active\:block:active {
+  display: block;
+}
+
+.active\:text-gray-300:active {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.secondary-link:hover {
-  text-decoration-line: underline;
-  text-decoration-color: #BECA9A;
-  text-decoration-thickness: 2px;
+.group:focus .group-focus\:block {
+  display: block;
 }
 
-@media (min-width: 1024px) {
-  .lg\:flex {
-    display: flex;
-  }
+.group:focus .group-focus\:hidden {
+  display: none;
+}
 
-  .lg\:w-auto {
-    width: auto;
-  }
+.peer:focus ~ .peer-focus\:block {
+  display: block;
+}
 
-  .lg\:flex-row {
-    flex-direction: row;
+@media (min-width: 640px) {
+  .sm\:flex {
+    display: flex;
   }
 
-  .lg\:justify-between {
-    justify-content: space-between;
+  .sm\:hidden {
+    display: none;
   }
 
-  .lg\:self-center {
-    align-self: center;
+  .sm\:w-1\/4 {
+    width: 25%;
   }
 
-  .lg\:px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+  .sm\:flex-row {
+    flex-direction: row;
   }
 
-  .lg\:py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .sm\:space-x-16 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(4rem * var(--tw-space-x-reverse));
+    margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
   }
+}
 
+@media (min-width: 1024px) {
   .lg\:text-base {
     font-size: 1.25rem;
   }

templates/404.html

@@ -1,3 +1,5 @@
 {% extends "index.html" %} {% block main %}
-<h1 class="relative flex items-center justify-center text-3xl font-bold">404: Page not found</h1>
+<h1 class="relative flex items-center justify-center text-2xl font-semibold">
+  404: Page not found
+</h1>
 {% endblock main %}

templates/blog.html

@@ -4,15 +4,15 @@
 {% set section = get_section(path=page.extra.section) %}<!---->
 
 {% for year, posts in section.pages | group_by(attribute="year") %}
-<h2>{{ year }}</h2>
+<div class="text-xl font-semibold">{{ year }}</div>
 
 <div class="not-prose pl-6">
   <ul>
     {% for post in posts %}
     <li>
       <div class="my-2 flex items-center justify-between">
-        <a class="secondary-link" href="{{ post.permalink }}">{{ post.title }}</a>
-        <time class="font-mono opacity-60">{{ post.date | date(format="%m-%d") }}</time>
+        <a class="primary-link text-lg" href="{{ post.permalink }}">{{ post.title }}</a>
+        <time>{{ post.date | date(format="%m-%d") }}</time>
       </div>
     </li>
     {% endfor %}