html,
body {
margin: 0;
padding: 0;
width: 100vw;
min-height: 100vh;
font-family: "JetBrains Mono", monospace;
}
// * {
// font-family: "JetBrains Mono", monospace;
// }
h1,
h2,
h3 {
text-align: center;
}
h2 {
text-decoration: underline;
}
h3 {
font-style: italic;
}
h4,
h5,
h6 {
font-weight: bold;
}
a {
text-decoration: none;
}
hr {
border: none;
border-top: medium solid black;
}
ul.dashed {
list-style-type: none;
li:before {
content: "-";
position: absolute;
// margin-left: -20px;
margin-left: -1rem;
}
}
table.border-rows {
border-collapse: collapse;
tr:first-child,
tr:not(:last-child) {
border-bottom: thin solid black;
}
th,
td {
padding: 1em;
}
th:not(:last-child),
td:not(:last-child) {
// border: thin solid black;
border-right: thin solid black;
}
}
#wrapper {
margin: 0 auto;
overflow: auto;
min-height: 100vh;
display: flex;
flex-direction: column;
}
#navbar {
display: flex;
}
#navbar-brand {
width: 50%;
a {
float: left;
text-decoration: underline;
}
}
.navbar-link a,
#navbar-links ul li a {
display: block;
text-align: center;
}
#navbar-links {
width: 50%;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
li {
float: left;
&:not(:first-of-type) a {
padding-left: 1rem;
}
}
}
}
#main-wrapper {
flex: 1;
padding: 1.5% 3%;
}
#footer {
font-size: small;
text-align: center;
}
#status-code {
text-align: center;
}
#status-code-message {
font-size: small;
}
#post-index {
li:not(:last-child) {
margin-bottom: 1rem;
}
}
.double-border {
border: 5px double black;
}
.section-margin {
margin-top: 1%;
}
.section-light-padding {
padding: 1%;
}
.breadcrumb {
padding: 1% 0;
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
li:not(:last-child)::after {
display: inline-block;
margin: 0 0.5rem;
content: ">";
}
}
.wysiwyg {
hr {
width: 50%;
}
ul {
@extend ul.dashed;
}
table {
@extend table.border-rows;
margin: 0 auto;
}
p > code,
li > code,
dd > code,
td > code {
word-wrap: break-word;
box-decoration-break: clone;
padding: 0.1rem 0.3rem 0.2rem;
border: thin solid black;
}
pre {
padding: 0 1rem;
border: thin solid black;
overflow-x: scroll;
}
}
@media only screen and (max-width: 600px) {
#wrapper {
width: 100%;
}
}
@media only screen and (min-width: 600px) {
#wrapper {
width: 75%;
}
}
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 992px) {
}
@media only screen and (min-width: 1200px) {
#wrapper {
width: 50%;
}
}