website/assets/scss/main.scss

107 lines
1.9 KiB
SCSS
Raw Normal View History

* {
2022-04-07 22:34:28 +02:00
box-sizing: border-box;
2022-11-28 18:32:29 +01:00
scrollbar-color: var(--vriish-rose) var(--background);
2022-04-07 22:34:28 +02:00
scrollbar-width: thin;
2023-03-15 11:42:08 +01:00
scroll-behavior: smooth;
2022-04-07 22:34:28 +02:00
&::-webkit-scrollbar {
background: var(--background);
width: 6px;
}
2022-11-28 18:32:29 +01:00
&::-webkit-scrollbar-thumb { background: var(--vriish-rose); }
2023-03-09 22:08:09 +01:00
&::selection {
2023-03-09 23:00:52 +01:00
color: var(--text);
2023-03-09 22:08:09 +01:00
background-color: var(--vriish-rose);
}
}
html {
2022-11-28 18:32:29 +01:00
margin: 0;
2022-04-07 22:34:28 +02:00
overflow-x: hidden;
overflow-y: scroll;
2022-11-28 18:32:29 +01:00
padding: 0;
body {
background: var(--background);
color: var(--text);
2023-03-09 20:47:10 +01:00
display: flex;
2022-11-28 18:32:29 +01:00
font-family: system-ui, sans-serif;
2023-03-09 22:00:22 +01:00
font-size: 1.2rem;
2023-03-09 20:47:10 +01:00
flex-direction: column;
2023-03-09 22:00:22 +01:00
line-height: 1.5;
2022-11-28 18:32:29 +01:00
margin: 0;
2022-12-24 14:59:52 +01:00
min-height: 100vh;
2022-11-28 18:32:29 +01:00
@media (max-width: 920px) {
2022-12-24 14:59:52 +01:00
font-size: 1em;
2022-11-28 18:32:29 +01:00
grid-template-areas:
2022-12-24 14:59:52 +01:00
"header"
2022-11-28 18:32:29 +01:00
"content"
"footer";
2022-12-24 14:59:52 +01:00
grid-template-columns: 1fr;
2022-11-28 18:32:29 +01:00
}
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
margin: .8em 0;
}
a {
color: var(--text);
text-decoration: underline;
2023-03-09 23:00:52 +01:00
text-decoration-color: var(--link-underline);
text-decoration-thickness: 3px;
text-underline-offset: 2px;
2022-11-28 18:32:29 +01:00
transition: text-decoration-color .2s;
2023-03-09 23:00:52 +01:00
&:hover { text-decoration-color: var(--link-underline-hover); }
2022-11-28 18:32:29 +01:00
}
pre {
border: 1px solid var(--vriish-rose);
border-radius: 4px;
overflow: auto;
padding: 10px 15px;
}
p {
hyphens: auto;
img {
2023-01-13 23:05:34 +01:00
border-radius: 1rem;
2022-11-28 18:32:29 +01:00
display: block;
margin: 0 auto;
}
}
hr {
border: 1px solid var(--border);
color: var(--border);
margin: 60px 0;
}
2022-04-07 22:34:28 +02:00
}
2021-05-15 20:55:56 +02:00
}
2022-11-28 18:32:29 +01:00
.global-header {
2023-01-06 22:44:54 +01:00
align-items: center;
2022-11-28 18:32:29 +01:00
grid-area: header;
2023-01-06 22:44:54 +01:00
position: relative;
display: flex;
flex-direction: column;
gap: .5em;
justify-content: center;
padding: 3em 0;
z-index: 2;
h1, p {
margin: 0;
}
}
main {
2022-11-28 18:32:29 +01:00
grid-area: content;
2022-04-07 22:34:28 +02:00
margin: 20px auto;
2022-11-28 18:32:29 +01:00
max-width: 1000px;
2022-04-07 22:34:28 +02:00
overflow: hidden;
padding: 30px;
width: 100%;
2023-03-05 23:03:10 +01:00
min-height: 85.6vh;
2022-04-07 22:34:28 +02:00
span { font-size: .8em; }
}
p.date-published {
2022-04-07 22:34:28 +02:00
margin-bottom: -1.5em;
font-size: smaller;
font-style: italic;
}