hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Some more changes

Browse Source
This commit is contained in:
daudix-UFO
2023-10-15 23:39:24 +00:00
parent 44e9621d41
commit 6242b721f2
4 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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%); 0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
:root { :root {
--primary-color: #{$primary-color};
--primary-color-alpha: #{$primary-color-alpha};
--bg-color: #{$bg-color-l}; --bg-color: #{$bg-color-l};
--crt-bg: #{$crt-bg}; --crt-bg: #{$crt-bg};
--primary-color-alpha: #{$primary-color-alpha};
--primary-color: #{$primary-color};
--glow: #{$glow}; --glow: #{$glow};
} }

8
sass/_comments.scss
View File

@ -23,7 +23,7 @@ section#comments {
all: unset; all: unset;
display: block; display: block;
background-color: var(--fg05); background-color: var(--fg05);
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
box-shadow: var(--shadow); box-shadow: var(--shadow);
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -116,7 +116,7 @@ section#comments {
} }
figure { figure {
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
background-color: var(--fg05); background-color: var(--fg05);
box-shadow: var(--shadow); box-shadow: var(--shadow);
margin-left: 0; margin-left: 0;
@ -173,7 +173,7 @@ section#comments {
font-weight: 600; font-weight: 600;
font-size: 90%; font-size: 90%;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
background-color: var(--orange-bg); background-color: var(--orange-bg);
color: var(--orange-fg); color: var(--orange-fg);
@ -189,7 +189,7 @@ section#comments {
font-weight: 600; font-weight: 600;
font-size: 90%; font-size: 90%;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
background-color: var(--red-bg); background-color: var(--red-bg);
color: var(--red-fg); color: var(--red-fg);

28
sass/_main.scss
View File

@ -11,7 +11,7 @@ body {
padding: 0; padding: 0;
scroll-behavior: smooth; scroll-behavior: smooth;
scrollbar-color: var(--primary-color) transparent; scrollbar-color: var(--primary-color) transparent;
primary-color: var(--primary-color); accent-color: var(--primary-color);
} }
// smaller font size on mobile // smaller font size on mobile
@ -27,7 +27,7 @@ body {
font-weight: 400; font-weight: 400;
line-height: 1.6; line-height: 1.6;
color: var(--fg-color); 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 // put footer at the bottom for short pages, such as the 404
display: grid; display: grid;
min-height: 100vh; min-height: 100vh;
@ -42,7 +42,7 @@ body {
// style text selection to use primary color // style text selection to use primary color
::selection { ::selection {
color: var(--background); color: var(--bg-color);
background-color: var(--primary-color); background-color: var(--primary-color);
} }
@ -162,7 +162,7 @@ abbr {
kbd { kbd {
display: inline-block; display: inline-block;
padding: 2px 6px; padding: 2px 6px;
border-radius: var(--border-radius-small); border-radius: var(--rounded-corner-small);
background-color: var(--fg07); background-color: var(--fg07);
box-shadow: inset 0 -2px 0 var(--fg09); box-shadow: inset 0 -2px 0 var(--fg09);
font-size: medium; font-size: medium;
@ -180,7 +180,7 @@ kbd:active {
mark { mark {
padding: 2px 6px; padding: 2px 6px;
border-radius: var(--border-radius-small); border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha); background-color: var(--primary-color-alpha);
color: var(--primary-color); color: var(--primary-color);
} }
@ -196,7 +196,7 @@ figcaption {
details { details {
background-color: var(--fg05); background-color: var(--fg05);
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: 1rem; padding: 1rem;
@ -243,7 +243,7 @@ video {
display: block; display: block;
margin: 2rem auto; margin: 2rem auto;
max-width: 100%; max-width: 100%;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@ -287,7 +287,7 @@ img:not(.no-hover):hover {
max-width: var(--content-width); max-width: var(--content-width);
margin: 1rem auto; margin: 1rem auto;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: var(--border-radius-big); border-radius: var(--rounded-corner-big);
background-color: var(--fg05); background-color: var(--fg05);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
@ -308,7 +308,7 @@ img:not(.no-hover):hover {
display: inline-block; display: inline-block;
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
background-color: transparent; background-color: transparent;
color: var(--fg50); color: var(--fg50);
transition: var(--transition); transition: var(--transition);
@ -399,7 +399,7 @@ img:not(.no-hover):hover {
display: inline-block; display: inline-block;
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
background-color: var(--fg05); background-color: var(--fg05);
color: var(--fg-color); color: var(--fg-color);
} }
@ -408,7 +408,7 @@ img:not(.no-hover):hover {
code { code {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
padding: 2px 6px; padding: 2px 6px;
border-radius: var(--border-radius-small); border-radius: var(--rounded-corner-small);
background-color: var(--fg07); background-color: var(--fg07);
color: var(--red-fg); color: var(--red-fg);
} }
@ -429,7 +429,7 @@ pre {
line-height: normal; // unset line height line-height: normal; // unset line height
padding: 1rem; padding: 1rem;
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
max-width: 100vw; max-width: 100vw;
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: auto; overflow: auto;
@ -467,7 +467,7 @@ pre table {
// CRT // CRT
.crt { .crt {
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
box-shadow: var(--glow); box-shadow: var(--glow);
background: var(--crt-bg); background: var(--crt-bg);
@ -506,7 +506,7 @@ pre table {
.statement-container { .statement-container {
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
padding: 1rem 1rem; padding: 1rem 1rem;
border-radius: var(--border-radius); border-radius: var(--rounded-corner);
box-shadow: var(--shadow); box-shadow: var(--shadow);
h2 { h2 {

14
sass/_variables.scss
View File

@ -17,15 +17,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
:root { :root {
// GENERAL SETUP // GENERAL SETUP
--primary-color: #{$primary-color};
--primary-color-alpha: #{$primary-color-alpha};
--bg-color: #{$bg-color-l}; --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; --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 // CUSTOM COLOR PALETTE
--fg03: rgba(0, 0, 0, 0.03); --fg03: rgba(0, 0, 0, 0.03);