FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor sidebar logic + Add Table of Contents in reading page (#33)

Browse source 
* Refactor sidebar logic + fix responsiveness

* Add TOC

* Add Pagination

* Update exampleSite

* Update README.md
This commit is contained in:
Md. Emruz Hossain 2020-07-22 04:14:08 +06:00 • committed by GitHub
parent 647578e88b
commit fa4d474974
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
59 changed files with 1735 additions and 679 deletions
Download patch file Download diff file Expand all files Collapse all files

192
static/assets/css/navbar.css
View file

@ -1,192 +0,0 @@
.top-navbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
z-index: 99999;
transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
margin: 0;
padding-top: 0.1rem;
text-align: center;
}
/* --- initial state start ------ */
.initial-navbar {
background-color: transparent;
}
.initial-navbar .navbar-brand {
color: #c0ccda;
font-weight: 600;
}
.initial-navbar li a {
color: #c0ccda;
}
.initial-navbar .navbar-nav .active,
.initial-navbar li a:hover {
color: #f9fafc;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.navbar-collapse {
margin-top: -5px;
}
.navbar-collapse.show,
.navbar-collapse.collapsing {
background-color: #f9fafc;
padding-left: 1rem;
}
/* --- initial state end ------ */
/* --- state after scroll start --- */
.final-navbar {
background-color: #f9fafc;
color: #1c2d41;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.final-navbar .navbar-brand {
color: #1c2d41;
font-weight: 600;
}
.final-navbar li a {
color: #1c2d41;
font-weight: 500;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
border-bottom: 2px solid#F9FAFC;
}
.final-navbar .navbar-nav .active,
.final-navbar li a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
border-bottom: 2px solid #2098d1;
background: rgb(2, 0, 36);
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(34, 136, 168, 0.1) 0%
);
}
.navbar-collapse.show li a,
.navbar-collapse.collapsing li a {
color: #1c2d41;
font-weight: 500;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.navbar-collapse.show .navbar-nav .active,
.navbar-collapse.show .navbar-nav a:hover {
color: #2098d1;
}
#top-navbar-divider {
margin-top: 10px;
}
/* --- state after scroll end --- */
#top-navbar-divider {
background: rgba(192, 204, 218, 0.8);
height: 20px;
width: 2px;
}
.final-navbar #top-navbar-divider {
background: rgba(0, 0, 0, 0.6);
}
#top-navbar-divider {
height: 20px;
width: 2px;
}
.navbar-brand img {
width: 42px;
padding: 5px;
margin-left: -10px;
}
/* ============= Device specific fixes ======= */
/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
}
@media (max-width: 1200px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
.top-navbar .container {
max-width: 100%;
padding: 0;
}
.initial-navbar .navbar-nav .active,
.initial-navbar li a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.final-navbar .navbar-nav .active,
.final-navbar li a:hover {
color: #2098d1;
transition: none;
-webkit-transition: none;
border-bottom: none;
background: transparent;
}
.final-navbar li a {
border-bottom: none;
}
.final-navbar .navbar-collapse.show {
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.dropdown-divider {
border-top: 1px solid #c0ccda;
}
#top-navbar-divider {
background: rgba(0, 0, 0, 0.6);
height: auto;
width: auto;
margin-right: 15px;
}
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
}