Allow docs navigation to scroll on shorter screens

This commit is contained in:
Onyeka Aghanenu 2021-06-05 15:21:17 +01:00
parent 265c9ca608
commit e497789c76
No known key found for this signature in database
GPG Key ID: 8E73FA161BA92BBF

View File

@ -101,11 +101,11 @@ p {
pre[class*="language-"] { pre[class*="language-"] {
font-size: 16px; font-size: 16px;
margin-top: 24px !important; margin-top: 24px !important;
margin-bottom: 24px !important; margin-bottom: 24px !important;
} }
@media(min-width:45rem) { @media(min-width:45rem) {
pre[class*="language-"] { pre[class*="language-"] {
margin-left: 48px !important; margin-left: 48px !important;
margin-right: 48px !important; margin-right: 48px !important;
} }
@ -143,6 +143,7 @@ a {
list-style: none; list-style: none;
padding-left: 12px; padding-left: 12px;
} }
margin-bottom: 1em;
} }
.hamburger { .hamburger {
@ -195,7 +196,7 @@ h4 {
display: none !important; display: none !important;
} }
.hamburger { .hamburger {
display: inline-block; // display: inline-block;
float: right; float: right;
} }
.nav { .nav {
@ -329,25 +330,25 @@ h1,h2,h3,h4{
.nav ul{ .nav ul{
padding-left: 0; padding-left: 0;
li ul { li ul {
padding-left:12px; padding-left:12px;
} }
} }
@media(min-width:45em) { @media(min-width:45em) {
// Menu // Menu
.menu, .menu,
.navigation > div{ .navigation > div{
display:flex; display:flex;
align-items:center; align-items:center;
} }
.navigation{ .navigation{
flex:1; flex:1;
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
padding-left: calc(1em + 1.5vw); padding-left: calc(1em + 1.5vw);
} }
.navigation-items > *:not(:last-child){ .navigation-items > *:not(:last-child){
margin-right: calc(.5em + .7vw); margin-right: calc(.5em + .7vw);
} }
@ -357,9 +358,9 @@ h1,h2,h3,h4{
a{ a{
margin:0 calc(.5em + .7vw); margin:0 calc(.5em + .7vw);
} }
} }
// Content // Content
.content .col:not(.nav) { .content .col:not(.nav) {
padding-left: calc(1em + 1.5vw); padding-left: calc(1em + 1.5vw);
@ -367,18 +368,23 @@ h1,h2,h3,h4{
.content .nav > p, .content .nav > p,
.content .nav #contents{ .content .nav #contents{
position: sticky; position: sticky;
} }
.content .nav #contents{ .content .nav #contents{
top: 3.5em; top: 3.5em;
} }
.content .nav #contents > ul {
max-height: calc(100vh - 5rem);
overflow-y: scroll;
}
.content .nav > p .content .nav > p
{ {
position: sticky; position: sticky;
top: 2vh; top: 2vh;
} }
} }
@media(max-width:45rem) { @media(max-width:45rem) {