/* Import Google Fonts */ @import url('fonts.googleapis.com/css2?family=Fira+Code&family=Roboto&family=Playfair+Display&display=swap');
:root {
--main-theme-color: #454545; --text-color: #6c757d;
}
-
{
-webkit-box-sizing: border-box; box-sizing: border-box;
}
/*
* Basic setup for body */
body, html {
font-family: "Roboto", sans-serif; margin: 0; padding: 0; min-height: 100vh;
}
img {
max-width: 100%;
}
/*
* Basic typography setup */
a {
color: #454545; font-size: 0.995rem; margin: 5px 0; text-decoration: none; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s;
} a:hover {
opacity: 0.8;
}
code {
font-family: "Fira Code", monospace;
}
.display-1 {
font-family: "Playfair Display", sans-serif; margin-top: 4rem;
} .display-1 a {
color: white; display: block; font-size: 5rem; word-wrap: break-word;
}
.text-muted {
color: #6c757d;
}
/*
* Flex layout */ .row { display: -webkit-box; display: -ms-flexbox; display: flex;
}
/*
* Styles for menu */
.menu {
background-color: var(--main-theme-color); -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.menu .menu-content {
-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.2rem; padding: 45px; position: -webkit-sticky; position: sticky; top: 0; left: 0; height: 100vh;
}
/* Navigation links */ .menu .nav-link {
color: white; font-size: 0.995rem; display: block;
}
/*
* Styles for content */
.content-container {
-webkit-box-flex: 3; -ms-flex: 3; flex: 3; padding: 30px 60px;
}
.content {
color: #808080; line-height: 1.5;
}
.content a {font-size: 0.995rem;}
.content blockquote {
background-color: #f1f1f1; color: var(--text-color); margin: 0; padding: 15px 30px;
}
.content dt {font-weight: 800;}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
border-bottom: 1px solid #f1f1f1; color: gray; font-weight: 400; margin: 15px 0; padding: 5px 0;
}
.content h1 {
font-size: 2.5rem;
} .content h2 {
font-size: 2.4rem;
} .content h3 {
font-size: 2.3rem;
} .content h4 {
font-size: 2.2rem;
} .content h5 {
font-size: 2.1rem;
} .content h6 {
font-size: 2rem;
}
.content h1:before, .content h2:before, .content h3:before, .content h4:before, .content h5:before, .content h6:before {
color: #ccc; margin-right: 10px;
} .content h1:before {
content: "#"; font-size: 2.2rem;
} .content h2:before {
content: "##"; font-size: 2.1rem;
} .content h3:before {
content: "###"; font-size: 2rem;
} .content h4:before {
content: "####"; font-size: 1.9rem;
} .content h5:before {
content: "#####"; font-size: 1.8rem;
} .content h6:before {
content: "######"; font-size: 1.7rem;
}
.content :not(pre) > code {
font-size: 0.98rem; font-style: italic; word-wrap: break-word;
}
.content pre > code {
border-radius: 15px; font-size: 0.95rem; padding: 15px 30px; white-space: pre-wrap;
}
.content table {
border: 1px solid #f1f1f1; border-collapse: collapse; overflow-x: scroll; min-width: 100%;
}
.content thead > tr, .content tr:nth-child(even) {
background-color: #f1f1f1;
}
.content th {
font-weight: 700;
} .content th, .content td {
padding: 14px 28px; text-align: left !important;
}
.content ul {
margin: 0;
}
/*
* Styles for footer */
.footer {
border-top: 1px solid #dee2e6; color: #808080; margin: 45px 0 15px 0; padding: 15px; text-align: center;
}
/* Styling for desktop */ @media screen and (min-width: 1200px) {
.content-container { padding: 60px 120px; }
}
@media screen and (min-width: 992px) {
.menu { min-height: 100vh; } .content-container { -webkit-box-shadow: 0 4px 8px 0 var(--main-theme-color); box-shadow: 0 4px 8px 0 var(--main-theme-color); }
}
/* Styling for mobile */ @media screen and (max-width: 991px) {
.display-1 { margin: 2rem 0; } .row { display: block; } .menu .menu-content { padding: 25px; height: 100%; } .content-container { padding: 25px; } .content h1 { font-size: 2rem; } .content h2 { font-size: 1.95rem; } .content h3 { font-size: 1.9rem; } .content h4 { font-size: 1.85rem; } .content h5 { font-size: 1.8rem; } .content h6 { font-size: 1.75rem; }
}