Useful Links
About this site
This site is made with the Quartz static site generator
I have had to make several changes to get the site looking the way I want. for the convenience of others I have provided the changes below:
/quartz/styles/custom.scss
@use "./variables.scss" as *;
// load custom font
@font-face {
font-family: Bad Script;
font-style: normal;
font-weight: 400;
font-display: swap;
font-feature-settings: 'liga' 1, 'calt' 1, 'ss02' 1;
/* fix for Chrome */
src: url("/static/fonts/BadScript.woff2") format("woff2");
}
// typography improvements
h1 {
font-size: 250%;
text-align: center;
color: #ea6962;
}
h2 {
font-size: 200%;
color: #e78a4e;
}
h3 {
font-size: 150%;
color: #d8a657;
}
h4 {
font-size: 100%;
color: #a9b665;
}
body {
font-size: 20px;
}
p {
font-size: 18px;
line-height: 25px;
margin-bottom: 25px;
margin-top: 25px;
width: 100%;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
}
code {
font-size: 15px;
}
// style internal links
a.internal {
/* set internal links to have no background color */
background-color: rgba(0, 0, 0, 0);
border-radius: 5px;
padding: 0 .1rem;
line-height: 1.4rem;
text-decoration: none;
color: #89b482;
}
// Change style for external links
a {
&.external {
text-decoration: underline;
color: #7daea3;
background-color: var(--light);
}
}
// explorer folder
.explorer h2 {
color: #ffffff;
}
// active explorer link
.explorer-content ul li>a.active {
opacity: 1;
color: #89b482;
}
// link on hover
a:hover {
text-decoration: underline;
}
// add logo
.page-title a::before {
content: "";
background-image: url(/static/logo.png);
background-position: 50%;
background-size: cover;
border-radius: 50%;
flex-shrink: 0;
width: 120px;
height: 120px;
transition: transform .2s;
display: block;
}
// page title style
h2.page-title a {
margin: -20px -40px;
padding: 20px 40px;
color: #ffffff !important;
font-family: Bad Script !important;
font-weight: 500 !important;
overflow: visible !important;
text-align: center !important;
text-align: -moz-center !important;
text-align: -ms-center !important;
text-align: -o-center !important;
text-align: -webkit-center !important;
display: block;
}
.page-title a:hover {
text-decoration: none !important;
}
.page-title {
text-align: center !important;
}
// search box style
.search {
background-color: #1d2021;
border-radius: 2px;
border-style: solid;
border-color: #384f56;
border-width: 1px;
}
// code block background
pre {
--shiki-light-bg: #1d2021 !important;
--shiki-dark-bg: #1d2021 !important;
}
// Adding some spacing between entries in the explorer
div.explorer {
.overflow {
li {
li {
margin-bottom: 0.3rem;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
// selection color
::selection {
color: #ffffff;
background-color: #393639;
}
// mobile view
@media screen and (max-width: 800px) {
.page-title a::before {
width: 45px;
height: 45px;
//display: none;
}
.explorer {
height: initial;
flex-shrink: 0;
order: -1;
align-self: flex-start;
margin-top: initial;
margin-bottom: auto;
overflow: hidden;
}
.page>#quartz-body .sidebar.left {
position: initial;
height: unset;
flex-direction: row;
align-items: flex-start;
display: flex;
justify-content: space-between;
}
.search p {
font-size: 0px;
}
.search {
background-color: #141516;
border-radius: 0px;
border-style: solid;
border-width: 0px;
}
}