Layout fixes

assets/css/buttons.scss

@@ -26,7 +26,7 @@ a.button {
   outline: none;
 
   &:hover {
-    background: opacify($accent, .9);
+    background: transparentize($accent, .1);
   }
 
   /* variants */

assets/css/form.scss

@@ -26,5 +26,5 @@ select {
 }
 
 ::placeholder {
-  color: color-mod($accent) a(50%);
+  color: transparentize($accent, .5);
 }

assets/css/main.scss

@@ -130,7 +130,7 @@ figure {
 code, kbd {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
-  background: color-mod($accent) a(20%);
+  background: transparentize($accent, .8);
   color: $accent;
   padding: 1px 6px;
   margin: 0 2px;
@@ -203,7 +203,7 @@ blockquote {
 
   &.twitter-tweet {
     position: relative;
-    background: color-mod($accent) a(10%);
+    background: transparentize($accent, .9);
     font: inherit;
     color: inherit;
     border: 1px solid $accent;

assets/css/menu.scss

@@ -1,7 +1,7 @@
 @mixin menu {
   display: none;
   flex-direction: column;
-  $shadow-color: opacify($background, .8);
+  $shadow-color: transparentize($background, .2);
   $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
   position: absolute;
   background: $background;

assets/css/pagination.scss

@@ -15,7 +15,8 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: mix($accent, #1D1E28, 98%);
+      background: $background;
+      color: transparentize($color, .7);
       font-size: .8rem;
       text-transform: uppercase;
       text-decoration: none;
@@ -37,6 +38,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-flow: row wrap;
+    gap: 10px;
 
     a {
       text-decoration: none;
@@ -50,20 +53,13 @@
   align-items: center;
   justify-content: center;
   font-size: 1rem;
-  border-radius: 8px;
   padding: 0;
-  cursor: pointer;
   appearance: none;
-  overflow: hidden;
 
   @media($phone) {
     flex: 1;
   }
 
-  + .button {
-    margin-left: 10px;
-  }
-
   a {
     display: flex;
     justify-content: center;

assets/css/post.scss

@@ -32,7 +32,7 @@
   &-meta {
     font-size: 1rem;
     margin-bottom: 10px;
-    color: opcift($accent, 70%);
+    color: transparentize($accent, .3);
   }
 
   &-title {
@@ -113,7 +113,7 @@
 }
 
 .hanchor {
-  color: opacify($accent, .9);
+  color: transparentize($accent, .1);
   text-decoration: none;
   margin-left: 10px;
   visibility: hidden;
@@ -124,5 +124,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }
 
 .footnotes {
-  color: opacify($color, .5);
+  color: transparentize($color, .5);
 }

assets/css/syntax.scss

@@ -34,7 +34,7 @@ code.language-scss,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: opacify($accent, .7) !important;
+  color: transparentize($accent, .3) !important;
 }
 
 .token.property,
@@ -80,7 +80,7 @@ pre[class*="language-"] {
   right: 0;
   padding: 0;
   margin: 0;
-  background: opacify(mix($accent, #999, 90%), .08);
+  background: transparentize(mix($accent, #999, 90%), .92);
   pointer-events: none;
   line-height: inherit;
   white-space: pre;

postcss.config.js

@@ -1,21 +0,0 @@
-const url = require("postcss-url");
-const imports = require("postcss-import");
-const nested = require("postcss-nested");
-const postcssCustomMedia = require("postcss-custom-media");
-const cssnano = require("cssnano");
-const color = require("postcss-color-mod-function");
-const mixins = require("postcss-mixins");
-
-module.exports = () => ({
-  plugins: [
-    url,
-    imports,
-    mixins,
-    nested,
-    postcssCustomMedia,
-    cssnano({
-      preset: "default",
-    }),
-    color,
-  ],
-});