lewisdale.dev/src/css/globals.css

101 lines
2.0 KiB
CSS
Raw Normal View History

:root {
--color-primary: var(--color-neutral-200);
--color-secondary: var(--color-neutral-800);
--color-decoration: var(--color-amber-200);
--color-subtle: var(--color-zinc-400);
}
@media (prefers-color-scheme: light) {
:root {
--color-secondary: var(--color-neutral-100);
--color-primary: var(--color-neutral-800);
--color-decoration: var(--color-amber-800);
--color-subtle: var(--color-zinc-500);
}
}
body {
background-color: var(--color-secondary);
color: var(--color-primary);
font-family: var(--font-family-mono);
font-size: var(--text-size-s);
text-underline-offset: var(--space-size-4xs);
2023-02-05 19:53:49 +00:00
}
2023-02-06 10:22:59 +00:00
h1,
h2,
h3,
h4,
h5 {
font-weight: bold;
line-height: 1.2;
margin: 0;
2023-02-05 19:53:49 +00:00
}
h1 {
font-size: var(--text-size-xl);
word-wrap: normal;
text-underline-offset: var(--space-size-3xs);
text-align: center;
line-height: 1.3;
2023-02-05 20:05:54 +00:00
}
2023-02-05 19:53:49 +00:00
h2 {
font-size: var(--text-size-l);
text-underline-offset: var(--space-size-3xs);
2023-02-05 19:53:49 +00:00
}
2023-02-06 10:22:59 +00:00
h3 {
font-size: var(--text-size-m);
text-underline-offset: var(--space-size-3xs);
2023-02-05 20:05:54 +00:00
}
2023-02-06 10:22:59 +00:00
a {
color: inherit;
text-decoration: underline;
2023-02-06 10:22:59 +00:00
&:hover {
text-decoration-color: var(--color-decoration);
}
2023-02-06 10:22:59 +00:00
&:visited {
color: inherit;
}
&[target="_blank"]::after {
content: " \f08e";
font-family: "font awesome 6 free";
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;
-webkit-font-smoothing: antialiased;
font-size: var(--text-size-xs);
vertical-align: super;
}
2023-02-05 19:53:49 +00:00
}
2023-02-06 10:22:59 +00:00
nav {
--vertical-spacing: var(--space-size-m);
font-size: var(--text-size-s);
2023-02-05 20:05:54 +00:00
}
2023-02-06 10:22:59 +00:00
header {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s);
2023-02-05 19:53:49 +00:00
}
p {
line-height: 1.6;
max-width: 60ch;
}
footer {
padding: var(--space-size-l) 0 var(--space-size-s);
width: 100%;
2023-02-25 14:11:27 +00:00
}