/*** General - START */ html {
scroll-behavior: smooth; font-size: 62.5%; margin: 0;
}
-
{
font-family: $main-font; line-height: 1.6em; color: $text-dark; text-align: left; font-size: 1.6rem;
} .print {
display: none;
} /*** General - END */
/*** Body - START */ body {
margin: 0; min-width: 375px; display:flex; flex-direction:column; height:100vh; min-height: -webkit-fill-available; background-color: $background-light;
}
main#page-content {
margin: 0;
} article {
color: $text-dark; padding: 5rem 5rem;
} div#post-list-container article {
padding: 2.5rem 5rem;
} div#post-list-container {
margin-top: 2.5rem;
} article + article, div#categories-container, div#tags-container {
border-top: 0.5rem dotted $background-middle;
} /*** Body - END */
/*** Header - START */ header#site-header {
position: relative; top: 0; left: 0; right: 0; padding: 2.5rem 4.2rem; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; background-color: $primary-color; min-height: fit-content;
}
/* Logo */ div#site-logo-container {
display: flex; justify-items: flex-start; overflow: hidden; margin: 0 5rem 0 0; flex-grow: 0; flex-shrink: 0;
} a#site-logo {
font-size: 10rem; font-weight: normal; color: $text-light; text-decoration: none; line-height: 0.9em; height: 0.7em; overflow: hidden; font-family: $logo-font; margin-left: -0.035em; padding: 0 0.8rem;
}
/* Navigation */ nav#site-nav {
margin: 0;
} div#site-nav-page {
margin: 0 0 1rem 0;
} div#site-nav-section {
margin: 0;
}
/* Navigation links */ div#toc-pages ul {
margin: 0; padding: 0; display: flex; justify-content: flex-end; flex-wrap: wrap;
} div#toc-sections ul {
margin: 0; padding: 0; display: flex; justify-content: flex-end; flex-wrap: wrap;
} div#toc-pages li {
padding: 0 0.8rem; list-style: none; text-align: right;
} div#toc-sections li {
padding: 0 0.8rem; padding-bottom: 0.4em; list-style: none; line-height: 1em; text-align: right;
} toc-pages a.nav-link {
font-weight: bold; font-size: 2.2rem;
} toc-sections a.nav-link {
font-size: 1.4rem;
} a.nav-link {
color: $text-light; text-decoration: none; text-transform: lowercase;
} a.nav-link:hover, a.nav-link:active, a.nav-link:focus {
text-decoration: underline;
} /*** Header - END */
/*** Footer - START */ footer#site-footer {
margin-top: auto; position: relative; bottom: 0; background-color: $primary-color; color: $text-light; display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; flex-wrap: wrap; padding: 1rem 5rem; min-height: fit-content;
} div.footer-column {
color: $text-light; font-weight: normal; font-size: 1.4rem; text-decoration: none; padding: 0.5rem 0;
}
div.footer-column.footer-contact {
padding-left: 2.5rem; display: flex; flex-wrap: wrap;
}
a.footer-link {
color: $text-light; font-weight: bold; font-size: 1.4rem; text-decoration: none;
} a.footer-link:hover, a.footer-link:active {
text-decoration: underline;
} a.footer-image-link {
display: flex;
} img.footer-icon {
width: 2.8rem; height: 2.8rem; padding-left: 0.8rem;
} /*** Footer - END */
/*** Tall screens - START */ @media only screen and (max-width: 680px) {
header#site-header { display: flexbox; flex-direction: column; justify-content: center; text-align: center; } div#site-logo-container { float: none; margin: 0; width: 100%; min-height: 2.8rem; display: flex; justify-content: center; } a#site-logo { font-size: 6.2rem; line-height: 0.9em; margin-bottom: $margin-small; overflow: hidden; } nav#site-nav { width: 100%; } div#toc-pages ul { display: flex; justify-content: center; flex-wrap: wrap; text-align: center; } div#toc-sections ul { display: flex; justify-content: center; flex-wrap: wrap; text-align: center; } #toc-pages a.nav-link { font-weight: bold; font-size: 2.2rem; text-align: center; display: flex; justify-content: center; } #toc-sections a.nav-link { font-size: 1.4rem; text-align: center; display: flex; justify-content: center; }
} /* iPhone 10-ish */ @media only screen and (max-width: 450px) {
html { font-size: 50%; } article, div#post-list-container article.level-1, footer#site-footer { padding: 2.5rem 2.5rem; } header#site-header { padding: 2.5rem 1.7rem $margin 1.7rem; } div#post-list-container { margin: 0; }
} /*** Tall screens - END */