vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 2 Pull requests Activity

add default.scss

Browse source
This commit is contained in:
Vri 🌈 2023-01-15 00:24:10 +01:00
parent 190c0acf7f
commit aa106280af
Signed by: vrifox
GPG key ID: D40098E5B60B2197
7 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

148
assets/scss/main.scss Normal file
View file

@ -0,0 +1,148 @@
* {
box-sizing: border-box;
scrollbar-color: var(--vriish-rose) var(--background);
scrollbar-width: thin;
&::-webkit-scrollbar {
background: var(--background);
width: 6px;
}
&::-webkit-scrollbar-thumb { background: var(--vriish-rose); }
}
html {
margin: 0;
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
body {
background: var(--background);
color: var(--text);
display: grid;
font-family: system-ui, sans-serif;
font-size: 1.2em;
grid-template-areas:
"header header"
"sidebar content"
"sidebar footer";
grid-template-columns: 250px 1fr;
grid-template-rows: min-content;
line-height: 1.7;
margin: 0;
min-height: 100vh;
@media (max-width: 920px) {
font-size: 1em;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
margin: .8em 0;
}
a {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--vriish-rose);
text-underline-offset: 3px;
transition: text-decoration-color .2s;
&:hover { text-decoration-color: var(--text); }
}
pre {
border: 1px solid var(--vriish-rose);
border-radius: 4px;
overflow: auto;
padding: 10px 15px;
}
p {
hyphens: auto;
img {
border-radius: 1rem;
display: block;
margin: 0 auto;
}
}
hr {
border: 1px solid var(--border);
color: var(--border);
margin: 60px 0;
}
}
}
.global-header {
align-items: center;
grid-area: header;
position: relative;
display: flex;
flex-direction: column;
gap: .5em;
justify-content: center;
padding: 3em 0;
z-index: 2;
h1, p {
margin: 0;
}
}
// ------------------------
// - header / nav; footer -
// ------------------------
/*header, footer {
align-items: center;
display: flex;
overflow: auto;
white-space: nowrap;
width: 100%;
a {
padding: 17.6px 15px;
text-decoration-color: var(--background);
text-decoration-thickness: 2px !important;
text-underline-offset: 6px;
margin: 0 15px;
&:hover { text-decoration-color: var(--vriish-rose); }
}
}
header {
a {
color: var(--text-2);
}
h1 {
display: flex;
font-size: 1em;
margin: 0;
a {
color: var(--vriish-rose);
}
}
nav {
display: flex;
margin-left: auto;
}
aside {
margin-left: auto;
}
}*/
// --------
// - main -
// --------
main {
grid-area: content;
margin: 20px auto;
max-width: 1000px;
overflow: hidden;
padding: 30px;
width: 100%;
span { font-size: .8em; }
}
p.date-published {
margin-bottom: -1.5em;
font-size: smaller;
font-style: italic;
}