htmlroc/static-src/stylesheets/default.scss

115 lines
1.4 KiB
SCSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:400,500&display=swap");
body {
font-family: "Open Sans", sans-serif;
display: flex;
justify-content: center;
font-size: 11pt;
line-height: 160%;
}
main {
flex: 1;
width: 100%;
max-width: 800px;
}
h1,
h2 {
font-family: "Roboto", sans-serif;
color: #4b5b69;
font-weight: 400;
line-height: 1.5em;
}
p {
margin: 0;
padding: 2pt 0;
}
.rules {
ul {
padding-left: 10pt;
}
li {
font-family: "Open Sans", sans-serif;
font-weight: 400;
margin: 10pt 0;
list-style-type: none;
}
li.depth-0 {
font-family: "Open Sans", sans-serif;
font-weight: 600;
}
li.depth-2 {
padding-left: 20pt;
}
li.depth-4 {
padding-left: 40pt;
}
li.depth-6 {
padding-left: 60pt;
}
}
.glossary {
dt {
font-weight: 600;
}
dd {
margin-inline-start: 10pt;
margin-bottom: 1rem;
}
}
.toc {
font-family: "Roboto", sans-serif;
font-weight: 300;
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 700pt;
}
& > ul > li {
margin-bottom: 1rem;
}
a {
color: #0d85ce;
text-decoration: none;
&:hover {
color: #87c7ff;
}
}
}
@media screen and (max-width: 700px) {
.toc ul {
max-height: none;
}
body {
padding: 10pt;
}
.rules {
.depth-2 {
padding-left: 10pt;
}
.depth-4 {
padding-left: 20pt;
}
.depth-6 {
padding-left: 30pt;
}
}
}