98 lines
1.6 KiB
CSS
98 lines
1.6 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans:wght@400;700&display=swap");
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--site-color: hsl(0, 0%, 94%);
|
|
--font-color: rgb(28, 27, 27);
|
|
--codeblock-background-color: hsl(300, 1%, 33%);
|
|
--codeblock-font-color: rgb(255, 255, 255);
|
|
|
|
--left-column-width: 320px;
|
|
--right-column-width: calc(100vw-320px);
|
|
}
|
|
|
|
/* Layout */
|
|
#navbar {
|
|
position: fixed;
|
|
width: var(--left-column-width);
|
|
}
|
|
|
|
#main-doc {
|
|
width: var(--right-column-width);
|
|
margin-left: var(--left-column-width);
|
|
padding: 1rem;
|
|
border-left: 2px solid black;
|
|
}
|
|
|
|
/* Styling */
|
|
body {
|
|
font-family: "Open Sans";
|
|
background-color: var(--site-color);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
header {
|
|
font-size: x-large;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
section li {
|
|
width: 85%;
|
|
}
|
|
|
|
#navbar ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#navbar a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#navbar header {
|
|
text-align: center;
|
|
}
|
|
#navbar li:first-child {
|
|
border-top: 1px solid;
|
|
}
|
|
|
|
#navbar li {
|
|
padding: 0.3125rem 0;
|
|
border-bottom: 1px dashed;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media screen and (max-width: 550px) {
|
|
#navbar {
|
|
position: unset;
|
|
width: unset;
|
|
}
|
|
|
|
#main-doc {
|
|
width: unset;
|
|
margin-left: unset;
|
|
padding: 0 1rem;
|
|
border-left: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
:root {
|
|
--left-column-width: 40%;
|
|
--right-column-width: 60%;
|
|
}
|
|
}
|