396 lines
6.7 KiB
SCSS
396 lines
6.7 KiB
SCSS
@use "../abstracts/functions" as *;
|
|
@use "../abstracts/mixins" as *;
|
|
|
|
p,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
blockquote,
|
|
pre {
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
ul ul,
|
|
ul ol,
|
|
ol ul,
|
|
ol ol {
|
|
margin-block: 0;
|
|
}
|
|
|
|
p {
|
|
text-wrap: pretty;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
:disabled,
|
|
[aria-disabled="true"] {
|
|
opacity: var(--disabled-opacity);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
transition-duration: var(--transition);
|
|
transition-property: text-shadow, font-weight;
|
|
margin-block: 2rem 1rem;
|
|
color: var(--accent-color);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: 1;
|
|
font-variation-settings: "FLAR" 100;
|
|
letter-spacing: -0.05em;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--bg-muted-1);
|
|
text-decoration-thickness: 0.125em;
|
|
text-wrap: balance;
|
|
overflow-wrap: break-word;
|
|
|
|
&:target {
|
|
animation: none !important;
|
|
outline: none !important;
|
|
font-weight: var(--font-weight-light);
|
|
text-shadow: var(--text-shadow-glow);
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-xxx-large);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-xx-large);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-x-large);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--font-size-large);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--font-size-medium);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
h1 {
|
|
font-size: var(--font-size-xx-large);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-x-large);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-large);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--font-size-medium);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--font-size-x-small);
|
|
}
|
|
}
|
|
|
|
small {
|
|
color: var(--fg-muted-2);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
abbr[title] {
|
|
cursor: help;
|
|
text-decoration: underline;
|
|
text-decoration-style: dotted;
|
|
text-decoration-thickness: rpx(1);
|
|
}
|
|
|
|
figcaption {
|
|
color: var(--fg-muted-2);
|
|
font-size: var(--font-size-small);
|
|
text-align: center;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 1rem 0;
|
|
border-inline-start: 0.25rem solid var(--accent-color);
|
|
border-start-start-radius: 0.25rem;
|
|
border-end-start-radius: 0.25rem;
|
|
padding-inline-start: 0.75rem;
|
|
color: var(--fg-muted-2);
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: var(--font-monospace), var(--font-ui-monospace);
|
|
}
|
|
|
|
pre {
|
|
margin: 1rem 0;
|
|
box-shadow: var(--edge-highlight), var(--shadow);
|
|
border-radius: var(--rounded-corner);
|
|
background-color: var(--bg-muted-1);
|
|
padding: 0.75rem 1rem;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
code:not(pre code),
|
|
mark,
|
|
samp,
|
|
q {
|
|
@include chip;
|
|
}
|
|
|
|
code:not(pre code) {
|
|
background-color: var(--red-bg-1);
|
|
padding-block: rpx(3);
|
|
color: var(--red-fg);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
mark {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
del {
|
|
color: var(--red-fg);
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: rpx(1);
|
|
}
|
|
|
|
ins {
|
|
color: var(--green-fg);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: rpx(1);
|
|
}
|
|
|
|
samp {
|
|
color: var(--fg-muted-2);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
q {
|
|
color: var(--fg-muted-2);
|
|
font-style: italic;
|
|
}
|
|
|
|
u {
|
|
text-decoration: underline;
|
|
text-decoration-style: wavy;
|
|
text-decoration-color: var(--red-fg);
|
|
text-decoration-thickness: rpx(1);
|
|
}
|
|
|
|
progress {
|
|
appearance: none;
|
|
box-shadow: var(--edge-highlight);
|
|
border: none;
|
|
border-radius: 9999px;
|
|
background-color: var(--bg-muted-1);
|
|
padding: 0.25rem;
|
|
width: 100%;
|
|
height: 1rem;
|
|
color: var(--accent-color);
|
|
|
|
&:indeterminate {
|
|
background-color: var(--bg-muted-1);
|
|
}
|
|
|
|
&:indeterminate::-moz-progress-bar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&::-webkit-progress-bar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&::-moz-progress-bar {
|
|
border-radius: 9999px;
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
&::-webkit-progress-value {
|
|
border-radius: 9999px;
|
|
background-color: var(--accent-color);
|
|
}
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
transition-duration: var(--transition);
|
|
transition-property: transform, box-shadow, background-color;
|
|
cursor: pointer;
|
|
box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--bg-muted-2);
|
|
border-radius: var(--rounded-corner-small);
|
|
background-color: var(--bg-muted-1);
|
|
padding: 0 0.375rem;
|
|
font-size: var(--font-size-small);
|
|
|
|
// Small nice thingy, keys can be pressed!
|
|
&:active {
|
|
transform: translateY(0.125rem);
|
|
box-shadow: inset 0 rpx(1) 0 var(--bg-muted-2);
|
|
background-color: var(--bg-muted-2);
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--accent-color);
|
|
font-weight: var(--font-weight-semi-bold);
|
|
text-decoration-color: var(--accent-highlight);
|
|
text-decoration-thickness: rpx(1);
|
|
|
|
&:hover {
|
|
text-decoration-style: wavy;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 2rem auto;
|
|
border: 0.125rem solid var(--bg-muted-2);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
dt {
|
|
font-weight: var(--font-weight-semi-bold);
|
|
}
|
|
|
|
dd {
|
|
margin-inline-start: 1.5rem;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
aside {
|
|
float: inline-end;
|
|
margin-inline-start: 1rem;
|
|
margin-block-end: 1rem;
|
|
box-shadow: var(--edge-highlight), var(--shadow);
|
|
border-radius: var(--rounded-corner);
|
|
background-color: var(--bg-muted-1);
|
|
padding: 1rem;
|
|
width: calc(var(--content-width) / 3);
|
|
|
|
@media only screen and (max-width: 720px) {
|
|
float: none;
|
|
margin-inline-start: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
|
|
details {
|
|
display: flow-root;
|
|
transition: padding-block-end var(--transition);
|
|
margin-block-end: 1rem;
|
|
box-shadow: var(--edge-highlight), var(--shadow);
|
|
border-radius: var(--rounded-corner);
|
|
background-color: var(--bg-muted-1);
|
|
padding: 0.75rem 1rem;
|
|
|
|
&::details-content {
|
|
display: block;
|
|
opacity: 0;
|
|
transition-behavior: allow-discrete;
|
|
transition-duration: var(--transition);
|
|
transition-property: opacity, block-size, content-visibility;
|
|
block-size: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&[open] {
|
|
padding-block-end: 1rem;
|
|
|
|
&::details-content {
|
|
opacity: 1;
|
|
block-size: auto;
|
|
block-size: calc-size(auto, size);
|
|
}
|
|
|
|
summary {
|
|
color: var(--accent-color);
|
|
|
|
&::before {
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
@supports not (block-size: calc-size(auto, size)) {
|
|
& ~ * {
|
|
animation: slide-in-up var(--transition-bezier);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
summary {
|
|
transition: var(--transition);
|
|
color: var(--fg-muted-1);
|
|
font-weight: var(--font-weight-semi-bold);
|
|
list-style: none;
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
&::before {
|
|
@include icon(pseudo);
|
|
--icon: var(--icon-caret-down);
|
|
display: inline-block;
|
|
vertical-align: rpx(-2);
|
|
transition: all var(--transition), transform var(--transition-bezier);
|
|
margin-inline-end: 0.25rem;
|
|
}
|
|
}
|
|
|
|
& > :last-child,
|
|
& > :last-child img {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
|
|
figure {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding-inline-start: 1.5rem;
|
|
}
|
|
|
|
li {
|
|
margin-block: 0.25rem;
|
|
padding-inline-start: 0.25rem;
|
|
|
|
&::marker {
|
|
color: var(--accent-color);
|
|
font-weight: var(--font-weight-semi-bold);
|
|
}
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: var(--font-weight-semi-bold);
|
|
}
|