diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss index 160ab84..2adc317 100644 --- a/assets/css/buttons.scss +++ b/assets/css/buttons.scss @@ -26,7 +26,7 @@ a.button { outline: none; &:hover { - background: opacify($accent, .9); + background: transparentize($accent, .1); } /* variants */ diff --git a/assets/css/form.scss b/assets/css/form.scss index 13132c9..5ce8a04 100644 --- a/assets/css/form.scss +++ b/assets/css/form.scss @@ -26,5 +26,5 @@ select { } ::placeholder { - color: color-mod($accent) a(50%); + color: transparentize($accent, .5); } diff --git a/assets/css/main.scss b/assets/css/main.scss index 56ab5be..dac8283 100644 --- a/assets/css/main.scss +++ b/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; diff --git a/assets/css/menu.scss b/assets/css/menu.scss index e0cd156..1758dbb 100644 --- a/assets/css/menu.scss +++ b/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; diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss index 1db306b..c65efcb 100644 --- a/assets/css/pagination.scss +++ b/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; diff --git a/assets/css/post.scss b/assets/css/post.scss index 106fa21..223139b 100644 --- a/assets/css/post.scss +++ b/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); } diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index f5576e8..27aecc7 100644 --- a/assets/css/syntax.scss +++ b/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; diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 151d878..0000000 --- a/postcss.config.js +++ /dev/null @@ -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, - ], -});