1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-11-23 00:24:25 +00:00
glassflame/style/base.css

117 lines
2.2 KiB
CSS

:root {
--color-background: #ffffff;
--color-foreground: #000000;
--color-accent: initial;
--color-gray: #7E7E7E;
--color-red: #FB464C;
--color-orange: #E9973F;
--color-yellow: #E0DE71;
--color-green: #44CF6E;
--color-blue: #53DFDD;
--color-purple: #A882FF;
--margins: 0;
--color-node: var(--color-gray);
--node-group-border-width: 2px;
--node-file-border-width: 2px;
--edge-width: 2px;
--font-text: sans-serif;
--font-mono: monospace;
--math-border-width: 1px;
--blockquote-border-width: 2px;
}
@media screen {
:root {
--margins: 32px;
}
}
@media screen and (min-width: 768px) {
:root {
--margins: 64px;
}
}
body {
margin: 0;
width: max-content;
min-width: 100svw;
height: max-content;
background-color: var(--color-background);
color: var(--color-foreground);
}
body > h1 {
margin-left: var(--margins);
margin-right: var(--margins);
font-size: 4em;
}
* {
font-family: var(--font-text);
}
code {
font-family: var(--font-mono);
}
a {
color: var(--color-accent);
}
svg line {
stroke: var(--color-node);
stroke-width: var(--edge-width);
}
blockquote {
border-left: var(--blockquote-border-width) solid var(--color-accent);
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-left: 1.5ex;
}
.math {
overflow-x: auto;
overflow-y: hidden;
}
.math-inline {
}
.math-block {
margin: 1em 0;
text-align: center;
}
a, .wikilink {
color: color-mix(in srgb, var(--color-accent) 50%, transparent);
text-decoration: underline 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
}
a[href], .wikilink[href] {
color: var(--color-accent);
text-decoration: underline 1px solid var(--color-accent);
cursor: pointer;
}
a[href]:hover, .wikilink[href]:hover {
color: color-mix(in srgb, var(--color-accent) 50%, var(--color-foreground));
text-decoration: underline 1px solid color-mix(in srgb, var(--color-accent) 50%, var(--color-foreground));
}
h1 a, .wikilink.wikilink-heading {
color: var(--color-foreground);
}
h1 a:hover, .wikilink.wikilink-heading:hover {
color: var(--color-foreground);
}