154 lines
2.8 KiB
SCSS
154 lines
2.8 KiB
SCSS
// Note: Some things are broken out into smaller files
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
|
|
// @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
|
|
|
|
$content-max-width: 800px;
|
|
|
|
@import "elements/header.scss";
|
|
|
|
body {
|
|
margin: 1em;
|
|
// font-family: serif;
|
|
font-family: "Overlock", sans-serif;
|
|
font-optical-sizing: auto;
|
|
background-color: #f7f4f4;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: blue !important;
|
|
&:visited {
|
|
color: blue;
|
|
}
|
|
&:hover {
|
|
color: blueviolet;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
max-width: $content-max-width;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
|
|
font-family: "IBM Plex Serif", serif;
|
|
font-weight: 500;
|
|
|
|
ul {
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: max-content;
|
|
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
|
|
&:not(:first-child)::before {
|
|
content: " · ";
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
hr:not(:first-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
main {
|
|
max-width: $content-max-width;
|
|
margin: auto;
|
|
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
color: #24292f;
|
|
|
|
.title {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
|
|
@import "elements/code.scss";
|
|
@import "elements/headings.scss";
|
|
@import "elements/list.scss";
|
|
@import "elements/quote.scss";
|
|
@import "elements/table.scss";
|
|
@import "elements/text.scss";
|
|
@import "elements/image.scss";
|
|
@import "elements/details.scss";
|
|
@import "elements/music-info-card.scss";
|
|
}
|
|
|
|
footer {
|
|
max-width: $content-max-width;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
#sponsor-notice {
|
|
background-color: rgb(253, 204, 173);
|
|
width: max-content;
|
|
margin: auto;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gray {
|
|
color: gray;
|
|
}
|
|
|
|
.hover-help {
|
|
&:hover {
|
|
cursor: help;
|
|
}
|
|
border-bottom: 1px double rgb(171, 167, 167);
|
|
}
|
|
|
|
.mobile-hidden {
|
|
@media only screen and (max-width: 650px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.small {
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
.hover-shadow {
|
|
&:hover {
|
|
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
|
}
|
|
}
|
|
|
|
.announcement {
|
|
max-width: $content-max-width - 40px;
|
|
margin: auto;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
background-color: rgb(239, 239, 239);
|
|
margin-top: 0;
|
|
padding: 0.25em;
|
|
border: 2px dashed grey;
|
|
border-top: none;
|
|
color: dimgray;
|
|
}
|
|
|
|
.blog-post-list {
|
|
span {
|
|
font-variant-numeric: tabular-nums;
|
|
color: gray;
|
|
|
|
&[data-draft="true"] {
|
|
color: red !important;
|
|
}
|
|
}
|
|
}
|