142 lines
2.5 KiB
CSS
142 lines
2.5 KiB
CSS
@import url('./vars.css');
|
|
@import url('../fonts/fira_code.css');
|
|
|
|
body, html {
|
|
height: 100vh;
|
|
}
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 2fr 10fr;
|
|
background-color: var(--main-background);
|
|
}
|
|
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--sidebar-background);
|
|
color: var(--sidebar-text-color);
|
|
font-family: var(--sidebar-font);
|
|
height: 100%;
|
|
min-height: 100vh;
|
|
|
|
header {
|
|
padding: 15px;
|
|
text-align: center;
|
|
|
|
img {
|
|
border-radius: 50%;
|
|
width: 200px;
|
|
}
|
|
}
|
|
nav {
|
|
padding: 15px;
|
|
flex-grow: 1;
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
li {
|
|
padding: 15px 0;
|
|
a {
|
|
color: var(--sidebar-text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
footer {
|
|
text-align: center;
|
|
padding: 15px;
|
|
font-size: var(--sidebar-text-muted-size);
|
|
color: var(--sidebar-text-muted-color);
|
|
a {
|
|
color: var(--sidebar-text-muted-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
font-family: var(--main-font);
|
|
background-color: var(--main-background);
|
|
padding: 0 15px;
|
|
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: var(--main-h1-size);
|
|
margin: 5px 0;
|
|
}
|
|
h1:before {
|
|
color: var(--main-h1-before-color);
|
|
content: "# ";
|
|
}
|
|
|
|
h2 {
|
|
font-weight: normal;
|
|
margin: 5px 0;
|
|
}
|
|
h2:before {
|
|
content: "## ";
|
|
color: var(--main-h1-before-color);
|
|
font-size: var(--main-h2-size);
|
|
}
|
|
|
|
h3 {
|
|
font-weight: normal;
|
|
margin: 10px 0;
|
|
}
|
|
h3:before {
|
|
font-size: var(--main-h3-size);
|
|
}
|
|
p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--main-link-color);
|
|
}
|
|
img {
|
|
max-height: 250px;
|
|
}
|
|
ul {
|
|
padding: 0 15px;
|
|
margin: 5px;
|
|
|
|
li {
|
|
max-width: calc(100vw - 30px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* X-Small devices (portrait phones, less than 576px) */
|
|
@media (max-width: 575.98px) {
|
|
|
|
}
|
|
|
|
/* Small devices (landscape phones, less than 768px) */
|
|
@media (max-width: 767.98px) {
|
|
body {
|
|
grid-template-columns: 12fr;
|
|
}
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
/* Medium devices (tablets, less than 992px) */
|
|
@media (max-width: 991.98px) {
|
|
|
|
}
|
|
|
|
/* Large devices (desktops, less than 1200px) */
|
|
@media (max-width: 1199.98px) {
|
|
|
|
}
|
|
|
|
/* X-Large devices (large desktops, less than 1400px) */
|
|
@media (max-width: 1399.98px) {
|
|
|
|
}
|
|
|
|
|