From 6242b721f25f9f10faf2dba9870bb611c80471cb Mon Sep 17 00:00:00 2001 From: daudix-UFO Date: Sun, 15 Oct 2023 23:39:24 +0000 Subject: [PATCH] feat: Some more changes --- README.md | 4 ++-- sass/_comments.scss | 8 ++++---- sass/_main.scss | 28 ++++++++++++++-------------- sass/_variables.scss | 14 +++++++------- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 2ae8837..f261fcd 100644 --- a/README.md +++ b/README.md @@ -70,10 +70,10 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), 0 4px 24px 4px color.scale($primary-color, $alpha: -90%); :root { - --primary-color: #{$primary-color}; - --primary-color-alpha: #{$primary-color-alpha}; --bg-color: #{$bg-color-l}; --crt-bg: #{$crt-bg}; + --primary-color-alpha: #{$primary-color-alpha}; + --primary-color: #{$primary-color}; --glow: #{$glow}; } diff --git a/sass/_comments.scss b/sass/_comments.scss index cd69daa..db51789 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -23,7 +23,7 @@ section#comments { all: unset; display: block; background-color: var(--fg05); - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); box-shadow: var(--shadow); height: 100%; width: 100%; @@ -116,7 +116,7 @@ section#comments { } figure { - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); background-color: var(--fg05); box-shadow: var(--shadow); margin-left: 0; @@ -173,7 +173,7 @@ section#comments { font-weight: 600; font-size: 90%; padding: 0.4rem 1rem; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); background-color: var(--orange-bg); color: var(--orange-fg); @@ -189,7 +189,7 @@ section#comments { font-weight: 600; font-size: 90%; padding: 0.4rem 1rem; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); background-color: var(--red-bg); color: var(--red-fg); diff --git a/sass/_main.scss b/sass/_main.scss index 010448f..fe542b1 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -11,7 +11,7 @@ body { padding: 0; scroll-behavior: smooth; scrollbar-color: var(--primary-color) transparent; - primary-color: var(--primary-color); + accent-color: var(--primary-color); } // smaller font size on mobile @@ -27,7 +27,7 @@ body { font-weight: 400; line-height: 1.6; color: var(--fg-color); - background-color: var(--background); + background-color: var(--bg-color); // put footer at the bottom for short pages, such as the 404 display: grid; min-height: 100vh; @@ -42,7 +42,7 @@ body { // style text selection to use primary color ::selection { - color: var(--background); + color: var(--bg-color); background-color: var(--primary-color); } @@ -162,7 +162,7 @@ abbr { kbd { display: inline-block; padding: 2px 6px; - border-radius: var(--border-radius-small); + border-radius: var(--rounded-corner-small); background-color: var(--fg07); box-shadow: inset 0 -2px 0 var(--fg09); font-size: medium; @@ -180,7 +180,7 @@ kbd:active { mark { padding: 2px 6px; - border-radius: var(--border-radius-small); + border-radius: var(--rounded-corner-small); background-color: var(--primary-color-alpha); color: var(--primary-color); } @@ -196,7 +196,7 @@ figcaption { details { background-color: var(--fg05); - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); box-shadow: var(--shadow); padding: 1rem; @@ -243,7 +243,7 @@ video { display: block; margin: 2rem auto; max-width: 100%; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); box-shadow: var(--shadow); } @@ -287,7 +287,7 @@ img:not(.no-hover):hover { max-width: var(--content-width); margin: 1rem auto; box-shadow: var(--shadow); - border-radius: var(--border-radius-big); + border-radius: var(--rounded-corner-big); background-color: var(--fg05); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); @@ -308,7 +308,7 @@ img:not(.no-hover):hover { display: inline-block; font-size: 0.9rem; padding: 0.4rem 1rem; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); background-color: transparent; color: var(--fg50); transition: var(--transition); @@ -399,7 +399,7 @@ img:not(.no-hover):hover { display: inline-block; font-size: 0.9rem; padding: 0.4rem 1rem; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); background-color: var(--fg05); color: var(--fg-color); } @@ -408,7 +408,7 @@ img:not(.no-hover):hover { code { font-family: "JetBrains Mono", monospace; padding: 2px 6px; - border-radius: var(--border-radius-small); + border-radius: var(--rounded-corner-small); background-color: var(--fg07); color: var(--red-fg); } @@ -429,7 +429,7 @@ pre { line-height: normal; // unset line height padding: 1rem; margin: 1rem 0 1rem; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); max-width: 100vw; box-shadow: var(--shadow); overflow: auto; @@ -467,7 +467,7 @@ pre table { // CRT .crt { margin: 1rem 0 1rem; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); box-shadow: var(--glow); background: var(--crt-bg); @@ -506,7 +506,7 @@ pre table { .statement-container { margin: 1rem 0 1rem; padding: 1rem 1rem; - border-radius: var(--border-radius); + border-radius: var(--rounded-corner); box-shadow: var(--shadow); h2 { diff --git a/sass/_variables.scss b/sass/_variables.scss index af07ffa..d87cec2 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -17,15 +17,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), :root { // GENERAL SETUP - --primary-color: #{$primary-color}; - --primary-color-alpha: #{$primary-color-alpha}; --bg-color: #{$bg-color-l}; - --fg-color: var(--dark4); - --crt-bg: #{$crt-bg}; - --border-radius-big: 1.2rem; - --border-radius-small: 0.5rem; - --border-radius: 0.75rem; --content-width: 720px; + --crt-bg: #{$crt-bg}; + --fg-color: var(--dark4); + --primary-color-alpha: #{$primary-color-alpha}; + --primary-color: #{$primary-color}; + --rounded-corner-big: 1.2rem; + --rounded-corner-small: 0.5rem; + --rounded-corner: 0.75rem; // CUSTOM COLOR PALETTE --fg03: rgba(0, 0, 0, 0.03);