nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-30 11:13:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

toc: animation improvements #209

Browse source
This commit is contained in:
Sören Weber 2022-03-13 11:49:26 +01:00
parent 4e2a7f1248
commit 17964b9b8d
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
1 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
static/css/theme.css
View file

@ -43,6 +43,11 @@
font-display: swap; font-display: swap;
} }
html {
width: 100vw;
height: 100vh;
}
body { body {
background-color: #ffffff; /* var(--MAIN-BG-color) */ background-color: #ffffff; /* var(--MAIN-BG-color) */
color: #101010; /* var(--MAIN-TEXT-color) */ color: #101010; /* var(--MAIN-TEXT-color) */
@ -51,8 +56,11 @@ body {
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-size: 16.25px; font-size: 16.25px;
font-weight: 300; font-weight: 300;
height: 100vh;
justify-content: flex-end;
line-height: 1.574; line-height: 1.574;
overflow: hidden; /* to avoid browser scrollbar to flicker before we create our own */ overflow: hidden; /* to avoid browser scrollbar to flicker before we create our own */
width: 100vw;
} }
body #body-inner.chapter h1 { body #body-inner.chapter h1 {
@ -97,7 +105,10 @@ th {
#sidebar { #sidebar {
background: #282828; /* var(--MENU-SECTIONS-BG-color) */ background: #282828; /* var(--MENU-SECTIONS-BG-color) */
display: flex; display: flex;
flex-basis: auto;
flex-direction: column; flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
font-size: 15.25px; font-size: 15.25px;
height: 100vh; height: 100vh;
left: 0; left: 0;
@ -339,7 +350,10 @@ th {
#body { #body {
display: flex; display: flex;
flex-basis: 100%;
flex-direction: column; flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
height: 100vh; height: 100vh;
margin-left: 300px; margin-left: 300px;
min-height: 100vh; min-height: 100vh;
@ -944,6 +958,9 @@ span.nav i{
transform: translateY(-50%); transform: translateY(-50%);
} }
#toc-menu{
cursor: pointer;
}
#toc-menu, #toc-menu,
#sidebar-toggle-span { #sidebar-toggle-span {
border-right: thin solid rgba( 134, 134, 134, .333 ); border-right: thin solid rgba( 134, 134, 134, .333 );
@ -975,7 +992,6 @@ span.nav i{
display: none; display: none;
} }
.progress { .progress {
display: none;
left: 1rem; left: 1rem;
top: 1rem; top: 1rem;
} }
@ -1266,16 +1282,25 @@ option {
z-index: 470; z-index: 470;
} }
.toc-flyout .progress { .progress {
background-color: #ffffff; /* var(--MAIN-BG-color) */ background-color: #ffffff; /* var(--MAIN-BG-color) */
border: thin solid rgba( 134, 134, 134, .166 ); border: 0px solid rgba( 134, 134, 134, .166 );
box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 ); box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
display: block; height: 0;
opacity: 0;
overflow: hidden;
position: absolute; position: absolute;
width: auto; width: 0;
z-index: 490; z-index: 490;
} }
.toc-flyout .progress {
border-width: 1px;
height: auto;
opacity: 1;
width: auto;
}
.progress .wrapper { .progress .wrapper {
background-color: rgba( 134, 134, 134, .066 ); background-color: rgba( 134, 134, 134, .066 );
} }
@ -1523,11 +1548,6 @@ h6 a {
.showFooter { .showFooter {
display: block; display: block;
} }
/* IE can not display the topbar as sticky, so revert the style */
#body-inner{
display: block;
}
} }
/* clears the 'X' from Chrome's search input */ /* clears the 'X' from Chrome's search input */