tdehaeze/org-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Better TOC on mobile

Browse Source
This commit is contained in:
Thomas Dehaeze 2020-12-02 12:04:03 +01:00
parent f7d3c02b3c
commit fb97c2d813
4 changed files with 61 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/style.css vendored
View File

File diff suppressed because one or more lines are too long

49
scss/partials/_media.scss
View File

@ -55,52 +55,3 @@
width:100%; width:100%;
} }
} }
@media screen and (max-width: 768px) {
#table-of-contents {
display: none;
width: 60%;
}
#table-of-contents h2 a {
display: block;
}
#table-of-contents:target {
display: block;
}
#copyright, #postamble {
display: none;
}
#toggle-sidebar {
display: block;
margin-bottom: 1.6em;
padding: 0.6em;
text-align: center;
}
#toggle-sidebar h2 {
background-color:#2980B9;
width:100%;
height:50px;
left:0;
top:0;
color: white;
font-size: 100%;
line-height: 50px;
position:fixed;
margin: 0;
padding: 0;
opacity:0.7;
}
#table-of-contents .close-sidebar {
color: rgba(255, 255, 255, 0.3);
display: inline-block;
margin: 0px 10px 0px 45px;
padding: 10px;
}
}

12
scss/partials/_nagivation.scss
View File

@ -1,7 +1,7 @@
#org-div-home-and-up { #org-div-home-and-up {
position: absolute; position: absolute;
right: 0; right: 0;
z-index: 10; z-index: 100;
padding: 10px; padding: 10px;
// Large Screens // Large Screens
@ -10,4 +10,14 @@
width: $content-max-width+$toc-width; width: $content-max-width+$toc-width;
text-align: right; text-align: right;
} }
// Small screens
@media screen and (max-width: 768px) {
position: fixed;
padding: 1em;
color: $color-primary-background;
a {
color: $color-text-invert;
}
}
} }

50
scss/partials/_toc.scss
View File

@ -14,7 +14,7 @@
color: $color-text-invert; color: $color-text-invert;
background-color: $color-primary; background-color: $color-primary;
text-align: center; text-align: center;
padding: 0.8em; padding: 1em;
display: block; display: block;
font-size: 100%; font-size: 100%;
z-index: 200; z-index: 200;
@ -70,6 +70,26 @@
.tag { .tag {
display: none; display: none;
} }
@media screen and (max-width: 768px) {
display: none;
width: 60%;
box-shadow: -25px 0px 10px 32px $black;
&:target {
display: block;
}
.close-sidebar {
color: $color-text-invert;
display: block;
margin-left: 10px;
float: right;
&:hover {
background-color: $color-primary;
}
}
}
} }
@ -209,3 +229,31 @@ li ul li a{
color:#b3b3b3; color:#b3b3b3;
font-weight:normal; font-weight:normal;
} }
@media screen and (max-width: 768px) {
#copyright, #postamble {
display: none;
}
#toggle-sidebar {
display: block;
margin-bottom: 1.6em;
padding: 1.0em;
text-align: center;
h2 {
position:fixed;
width:100%;
left:0;
top:0;
color: $color-text-invert;
background-color: $color-primary;
text-align: center;
padding: 1em;
display: block;
font-size: 100%;
z-index: 20;
}
}
}