summaryrefslogtreecommitdiffstats
path: root/src/styles/base
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles/base')
-rw-r--r--src/styles/base/_base.scss16
-rw-r--r--src/styles/base/_fonts.scss12
-rw-r--r--src/styles/base/_helpers.scss6
-rw-r--r--src/styles/base/_spacings.scss10
-rw-r--r--src/styles/base/_typography.scss64
5 files changed, 22 insertions, 86 deletions
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 25ef393..1ec5494 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -70,14 +70,6 @@ body {
flex-flow: column nowrap;
min-height: 100vh;
background: var(--color-bg);
- border-top: max(0.4vw, fun.convert-px(6)) solid;
- border-bottom: max(0.4vw, fun.convert-px(6)) solid;
- border-image: radial-gradient(
- ellipse at center,
- var(--color-primary-lighter) 20%,
- var(--color-primary) 100%
- )
- 1;
color: var(--color-fg);
font-family: var(--font-family-primary);
font-size: var(--font-size-md);
@@ -89,4 +81,12 @@ body {
display: flex;
flex-flow: column nowrap;
height: 100%;
+ border-top: max(0.4vw, fun.convert-px(6)) solid;
+ border-bottom: max(0.4vw, fun.convert-px(6)) solid;
+ border-image: radial-gradient(
+ ellipse at center,
+ var(--color-primary-lighter) 20%,
+ var(--color-primary) 100%
+ )
+ 1;
}
diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss
index 88850bb..c8695d4 100644
--- a/src/styles/base/_fonts.scss
+++ b/src/styles/base/_fonts.scss
@@ -139,32 +139,32 @@
--font-family-mono: #{var.$font-family_mono};
--font-size-sm: clamp(
#{math.div(var.font-size("sm"), 1.2)},
- 1ex + 1vw,
+ 2ex + 1vmin,
#{var.font-size("sm")}
);
--font-size-md: clamp(
#{var.font-size("sm")},
- 1ex + 2vw,
+ 2ex + 2vmin,
#{var.font-size("md")}
);
--font-size-lg: clamp(
#{var.font-size("md")},
- 1ex + 3vw,
+ 2ex + 3vmin,
#{var.font-size("lg")}
);
--font-size-xl: clamp(
#{var.font-size("lg")},
- 1ex + 4vw,
+ 2ex + 4vmin,
#{var.font-size("xl")}
);
--font-size-2xl: clamp(
#{var.font-size("xl")},
- 1ex + 5vw,
+ 2ex + 5vmin,
#{var.font-size("2xl")}
);
--font-size-3xl: clamp(
#{var.font-size("2xl")},
- 1ex + 6vw,
+ 2ex + 6vmin,
#{var.font-size("3xl")}
);
--line-height: #{var.$line-height};
diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss
index d28811c..3879643 100644
--- a/src/styles/base/_helpers.scss
+++ b/src/styles/base/_helpers.scss
@@ -28,17 +28,11 @@
display: block;
width: auto;
height: auto;
- padding: var(--spacing-xs) var(--spacing-sm);
left: var(--spacing-2xs);
top: var(--spacing-xs);
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-dark);
clip: auto !important;
color: var(--color-fg-inverted);
- font-size: var(--font-size-md);
- font-weight: 600;
}
}
diff --git a/src/styles/base/_spacings.scss b/src/styles/base/_spacings.scss
index 08c3c3f..7c8b210 100644
--- a/src/styles/base/_spacings.scss
+++ b/src/styles/base/_spacings.scss
@@ -24,13 +24,5 @@
--spacing-xl: clamp(#{var.spacing("lg")}, 1ex + 4vw, #{var.spacing("xl")});
--spacing-2xl: clamp(#{var.spacing("xl")}, 1ex + 5vw, #{var.spacing("2xl")});
--spacing-3xl: clamp(#{var.spacing("2xl")}, 1ex + 6vw, #{var.spacing("3xl")});
- --toolbar-size: #{fun.convert-px(65)};
-}
-
-@include mix.media("screen") {
- @include mix.dimensions("sm") {
- :root {
- --toolbar-size: 0px;
- }
- }
+ --toolbar-size: #{fun.convert-px(80)};
}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index f1cb38a..2c3c8cc 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -1,5 +1,4 @@
@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/variables" as var;
h1 {
font-size: var(--font-size-3xl);
@@ -116,34 +115,28 @@ dl {
ul,
ol,
dl {
- margin: var(--spacing-md) 0;
+ margin: var(--spacing-sm) 0;
& & {
margin: var(--spacing-2xs) 0 0;
}
-}
-
-dt {
- flex: 0 0 max-content;
- font-weight: 600;
-}
-dd {
- flex: 0 0 auto;
- margin: 0;
+ ::marker {
+ color: var(--color-primary-dark);
+ }
}
a {
background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
- 0 0 / 100% 200% no-repeat;
+ 0 0 / 100% 201% no-repeat;
color: var(--color-primary);
- text-decoration-thickness: 13%;
+ text-decoration-thickness: 0.15em;
text-underline-offset: 20%;
transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;
&:hover {
color: var(--color-primary-light);
- text-decoration-thickness: 23%;
+ text-decoration-thickness: 0.25em;
}
&:focus {
@@ -156,39 +149,6 @@ a {
color: var(--color-primary-dark);
text-decoration-thickness: 18%;
}
-
- &.external {
- &::after {
- display: inline-block;
- content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
- }
-
- &:focus:not(:active)::after {
- content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
- }
- }
-
- &[hreflang] {
- &::after {
- display: inline-block;
- content: "\0000a0["attr(hreflang) "]";
- font-size: var(--font-size-sm);
- }
-
- &.external {
- &::after {
- content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
- '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
- ));
- }
-
- &:focus:not(:active)::after {
- content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
- '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
- ));
- }
- }
- }
}
button,
@@ -233,13 +193,3 @@ pre {
word-break: normal;
word-wrap: normal;
}
-
-figure {
- margin: var(--spacing-md) 0;
-}
-
-figcaption {
- margin-top: var(--spacing-xs);
- font-size: var(--font-size-sm);
- text-align: center;
-}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 18:31:06 +0000