aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/base/_base.scss4
-rw-r--r--src/styles/base/_colors.scss13
-rw-r--r--src/styles/base/_helpers.scss2
-rw-r--r--src/styles/base/_typography.scss4
-rw-r--r--src/styles/components/_wp-blocks.scss38
-rw-r--r--src/styles/pages/Home.module.scss2
-rw-r--r--src/styles/pages/Page.module.scss4
-rw-r--r--src/styles/vendors/_prism.scss26
8 files changed, 46 insertions, 47 deletions
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 8e3c2ab..890acd8 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -30,7 +30,7 @@ summary {
}
* {
- scrollbar-color: var(--color-shadow) var(--color-bg-tertiary);
+ scrollbar-color: var(--color-shadow-dark) var(--color-bg-tertiary);
scrollbar-width: auto;
}
@@ -44,7 +44,7 @@ summary {
}
*::-webkit-scrollbar-thumb {
- background-color: var(--color-shadow);
+ background-color: var(--color-shadow-dark);
border-radius: fun.convert-px(6);
border: fun.convert-px(3) solid var(--color-bg-tertiary);
}
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 28c017c..4b11e64 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -15,13 +15,12 @@
--color-primary-dark: #{var.$color_blue-dark};
--color-primary-darker: #{var.$color_blue-darker};
--color-secondary: #{var.$color_orange};
- --color-border: #{var.$color_grey-dark};
- --color-border-light: #{var.$color_grey};
- --color-border-lighter: #{var.$color_grey-bright};
- --color-shadow: #{var.$color_grey-dark-o70};
- --color-shadow-light: #{var.$color_grey-dark-o40};
- --color-shadow-lighter: #{var.$color_grey-dark-o20};
- --color-shadow-dark: #{var.$color_grey-dark};
+ --color-border: #{var.$color_grey};
+ --color-border-dark: #{var.$color_grey-dark};
+ --color-border-light: #{var.$color_grey-bright};
+ --color-shadow: #{var.$color_grey-dark-o40};
+ --color-shadow-dark: #{var.$color_grey-dark-o70};
+ --color-shadow-light: #{var.$color_grey-dark-o20};
--color-token-red: #{var.$color_red};
--color-token-green: #{var.$color_green};
--color-token-purple: #{var.$color_purple};
diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss
index 0c3b617..9fe2bd4 100644
--- a/src/styles/base/_helpers.scss
+++ b/src/styles/base/_helpers.scss
@@ -34,7 +34,7 @@
z-index: 100000;
background: var(--color-primary);
box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
- var(--color-shadow);
+ var(--color-shadow-dark);
clip: auto !important;
color: var(--color-fg-inverted);
font-size: var(--font-size-md);
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 0aea717..b94f67d 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -14,7 +14,7 @@ h2 {
)
0 0 / 3rem 100% no-repeat;
font-size: var(--font-size-2xl);
- text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-lighter);
+ text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
}
h3 {
@@ -208,7 +208,7 @@ var {
:not(pre) > code {
background: var(--color-bg-secondary);
- border: fun.convert-px(1) solid var(--color-border-lighter);
+ border: fun.convert-px(1) solid var(--color-border-light);
border-radius: fun.convert-px(3);
color: var(--color-primary-darker);
padding: fun.convert-px(2) fun.convert-px(5) fun.convert-px(1)
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
index 7d23008..7b32f09 100644
--- a/src/styles/components/_wp-blocks.scss
+++ b/src/styles/components/_wp-blocks.scss
@@ -8,11 +8,11 @@
position: relative;
border: fun.convert-px(1) solid var(--color-primary-lighter);
border-left: fun.convert-px(5) solid var(--color-primary-lighter);
- box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+ box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
- var(--color-shadow-lighter);
+ var(--color-shadow-light);
font-style: italic;
> *:last-child {
@@ -31,7 +31,7 @@
margin: 0 auto var(--spacing-md);
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--color-bg-secondary);
- border: fun.convert-px(1) solid var(--color-border-lighter);
+ border: fun.convert-px(1) solid var(--color-border-light);
color: var(--color-primary-darker);
}
@@ -78,20 +78,20 @@
a {
display: block;
- box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+ box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
- var(--color-shadow-lighter);
+ var(--color-shadow-light);
&:hover,
&:focus {
transform: scale(1.05);
- box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+ box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
- var(--color-shadow-lighter);
+ var(--color-shadow-light);
}
&:focus {
@@ -100,10 +100,10 @@
&:active {
transform: scale(0.95);
- box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+ box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
- var(--color-shadow-lighter),
- 0 0 0 0 var(--color-shadow-lighter);
+ var(--color-shadow-light),
+ 0 0 0 0 var(--color-shadow-light);
outline: none;
}
}
@@ -136,19 +136,19 @@
img {
display: block;
margin: auto;
- box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+ box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
- var(--color-shadow-lighter);
+ var(--color-shadow-light);
text-align: center;
}
}
.wp-block-video {
- box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+ box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
- var(--color-shadow-lighter);
+ var(--color-shadow-light);
}
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index b966b36..b6050d7 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -14,7 +14,7 @@
background: var(--color-bg-secondary);
&:not(:last-child) {
- border-bottom: fun.convert-px(1) solid var(--color-border-light);
+ border-bottom: fun.convert-px(1) solid var(--color-border);
}
&:nth-child(2n) {
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index ac6646b..69a1526 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -26,7 +26,7 @@
li.item {
margin: 0 0 var(--spacing-md) 0;
- border-bottom: fun.convert-px(1) solid var(--color-border-light);
+ border-bottom: fun.convert-px(1) solid var(--color-border);
}
.comments {
@@ -35,7 +35,7 @@ li.item {
margin: var(--spacing-md) 0 0;
padding: var(--spacing-md) 0 var(--spacing-lg);
background: var(--color-bg-secondary);
- border-top: fun.convert-px(3) solid var(--color-border-lighter);
+ border-top: fun.convert-px(3) solid var(--color-border-light);
> * {
grid-column: 2;
diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss
index 5086e08..e6627df 100644
--- a/src/styles/vendors/_prism.scss
+++ b/src/styles/vendors/_prism.scss
@@ -20,7 +20,7 @@
left: 0;
right: 0;
background: var(--color-bg-tertiary);
- border: fun.convert-px(1) solid var(--color-border-light);
+ border: fun.convert-px(1) solid var(--color-border);
}
.toolbar-item {
@@ -37,7 +37,7 @@
margin-right: auto;
padding: 0 var(--spacing-xs);
background: var(--color-bg-secondary);
- border-right: fun.convert-px(1) solid var(--color-border-light);
+ border-right: fun.convert-px(1) solid var(--color-border);
color: var(--color-primary-darker);
font-size: var(--font-size-sm);
font-weight: 600;
@@ -56,7 +56,7 @@ pre[class*="language-"] {
margin: var(--spacing-md) 0;
padding: 0;
position: relative;
- border: fun.convert-px(1) solid var(--color-border-light);
+ border: fun.convert-px(1) solid var(--color-border);
> code {
display: block;
@@ -75,7 +75,7 @@ pre[class*="language-"] {
pointer-events: none;
user-select: none;
background: var(--color-bg);
- border-right: fun.convert-px(1) solid var(--color-border-light);
+ border-right: fun.convert-px(1) solid var(--color-border);
}
.token {
@@ -169,7 +169,7 @@ pre[class*="language-"] {
width: 1.1ch;
margin: 0 0.5ch 0 0;
border: fun.convert-px(1) solid var(--color-bg);
- outline: fun.convert-px(1) solid var(--color-border);
+ outline: fun.convert-px(1) solid var(--color-border-dark);
overflow: hidden;
}
@@ -237,11 +237,11 @@ pre.command-line {
border: 0.4ex solid var(--color-primary);
border-radius: fun.convert-px(30);
box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow-light),
+ var(--color-shadow),
fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
- var(--color-shadow-light),
+ var(--color-shadow),
fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
- var(--color-shadow-light);
+ var(--color-shadow);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: 600;
@@ -252,13 +252,13 @@ pre.command-line {
transform: translateX(#{fun.convert-px(-2)})
translateY(#{fun.convert-px(-2)});
box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
- var(--color-shadow-lighter),
+ var(--color-shadow-light),
fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
- var(--color-shadow-lighter);
+ var(--color-shadow-light);
}
&:focus {
@@ -268,6 +268,6 @@ pre.command-line {
&:active {
text-decoration: none;
transform: translateY(#{fun.convert-px(2)});
- box-shadow: 0 0 0 0 var(--color-shadow-light);
+ box-shadow: 0 0 0 0 var(--color-shadow);
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-31 16:32:44 +0000