nixfox-reborn/sass/style.scss

117 lines
1.7 KiB
SCSS

// Setup stuff
* {
font-family: 'IBM Plex Mono', monospace;
transition: 0.3s;
top: 0;
}
[data-theme="light"] {
--bg-color: #DDE1E9;
--elm-bg-color: #EFF1F5;
--elm-inv-bg-color: #1F2223;
--text-color: #141414;
--text-inv-color: #DBD8D4;
--subtext-color: #6c7387;
--link-color: #b7162e;
}
[data-theme="dark"] {
--bg-color: #181A1B;
--elm-bg-color: #1F2223;
--elm-inv-bg-color: #EFF1F5;
--text-color: #DBD8D4;
--text-inv-color: #141414;
--subtext-color: #8991a5;
--link-color: #DB4E63;
}
.preload {
transition: none !important;
animation-duration: 0.001s !important;
}
body {
color: var(--text-color);
background-color: var(--bg-color);
padding-bottom: 5em;
min-height: 100%;
}
img {
image-rendering: pixelated;
}
.subtitle {
color: var(--subtext-color);
font-size: 14px;
}
a {
color: var(--link-color);
cursor: crosshair;
outline: 1px solid transparent;
margin: 0;
text-decoration: none;
}
a:hover {
outline: 3px solid;
}
#main {
background-color: var(--elm-bg-color);
position: relative;
width: 60%;
max-width: 45em;
margin: auto;
top: 2em;
left: 6.5em;
padding: 3em;
font-size: 16px;
}
.blocktitle {
font-weight: bold;
background-color: var(--elm-inv-bg-color);
color: var(--text-inv-color);
}
@media (max-width: 1200px) {
body {
margin: 0;
padding-bottom: 1.2em;
}
#main {
width: 70%;
padding: 0;
top: 0;
font-size: 15px;
}
.container {
max-width: 35em;
}
[data-theme="light"] {
--bg-color: #EFF1F5;
}
[data-theme="dark"] {
--bg-color: #1F2223;
}
}
li {
list-style-type: square;
padding-bottom: 0.5em;
}
.postlist-item {
padding-bottom: 2em;
}