diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index 7bb2d64..0682933 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -11,6 +11,12 @@
// layouts
@import './layouts/main';
+@import './layouts/list';
+
+// navigators
+@import './navigators/navbar';
+@import './navigators/sidebar';
+
// sections
@import './sections/home';
@@ -25,9 +31,6 @@
@import './sections/publications';
-// navigators
-@import './navigators/navbar';
-
// override
@import './override';
diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
new file mode 100644
index 0000000..4b1512a
--- /dev/null
+++ b/assets/styles/layouts/list.scss
@@ -0,0 +1,251 @@
+// in Hugo, Page kind can be either "section" or "page".
+// if it is section, then it's a page with a list of items, for example /posts
+// if it is page, then it is a single page.
+body.kind-section {
+ .wrapper {
+ display: flex;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ }
+
+ .content-section {
+ flex: 80%;
+ order: 2;
+ /* background-color: lightseagreen; */
+ padding: 0;
+ position: relative;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .content {
+ padding: 0;
+ position: relative;
+ padding-top: 2rem;
+ min-height: 130vh;
+ }
+
+ .post-card-holder {
+ margin-top: 32px;
+ margin-left: auto;
+ padding: 0;
+ display: flex;
+ flex-flow: wrap;
+ }
+
+ .post-card-holder .post-card {
+ width: calc(100% / 3);
+ display: inline-flex;
+ }
+
+ .post-card-holder .card {
+ margin: 5px;
+ position: relative;
+ }
+
+ .post-card-holder .card .card-footer span {
+ font-size: 10pt;
+ color: #6c757d !important;
+ padding-top: 5px;
+ }
+
+ .post-card-holder .card .card-footer {
+ background: #fff;
+ margin-top: auto;
+ }
+
+ .post-summary {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ max-height: 144px;
+ /* fallback */
+ -webkit-line-clamp: 5;
+ /* number of lines to show */
+ -webkit-box-orient: vertical;
+ }
+
+ .post-card-holder .post-card-link {
+ text-decoration: none;
+ }
+
+ .paginator {
+ width: -moz-fit-content;
+ width: fit-content;
+ margin: auto;
+ }
+
+ .paginator .page-item > a {
+ color: #248aaa;
+ }
+
+ .paginator .page-item.active > a {
+ background-color: #248aaa;
+ color: #f9fafc;
+ }
+
+ .navbar-toggler {
+ display: none;
+ }
+
+ .pagination {
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ width: -moz-fit-content;
+ width: fit-content;
+ }
+
+ /* ============= Device specific fixes ======= */
+
+ /* Large screens such as TV */
+ @media only screen and (min-width: 1824px) {
+ .content-section {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ flex: 85%;
+ max-width: 85%;
+ }
+ .post-card-holder .post-card {
+ width: calc(100% / 5);
+ }
+ }
+
+ /* Extra large devices (large desktops, 1200px and up) */
+
+ @media (max-width: 1400px) {
+ .post-card-holder {
+ margin-left: 0px;
+ }
+ .post-card-holder .post-card {
+ width: calc(100% / 3);
+ }
+ }
+
+ @media (max-width: 1200px) {
+ }
+
+ /* IPad Pro */
+ @media (max-width: 1024px) {
+ .wrapper {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ .content-section {
+ padding: 0;
+ flex: 60%;
+ order: 2;
+ padding-bottom: 0.5rem;
+ }
+
+ .content {
+ overflow: hidden;
+ }
+ .container {
+ max-width: 100%;
+ }
+ .navbar-toggler {
+ display: block;
+ }
+
+ #toc-toggler {
+ visibility: hidden;
+ }
+
+ .navbar-collapse.lang-selector {
+ display: block !important;
+ position: absolute;
+ right: 0;
+ top: 0.5rem;
+ }
+
+ .post-card-holder {
+ margin: 0;
+ margin-top: 1.5rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ position: relative;
+ transition: all ease-out 0.3s;
+ }
+
+ .post-card-holder .post-card {
+ width: calc(100% / 3);
+ }
+
+ .content-section.hide .post-card-holder .post-card {
+ width: 50%;
+ }
+ }
+
+ /* Large devices (desktops, 992px and up) */
+
+ @media (max-width: 992px) {
+ .post-card-holder .post-card {
+ width: 50%;
+ }
+
+ .content-section.hide .post-card-holder .post-card {
+ width: 100%;
+ }
+ }
+
+ /* Medium devices (tablets, 768px and up) */
+
+ @media only screen and (max-width: 768px) {
+ }
+
+ /* Small devices (landscape phones, 576px and up) */
+
+ @media only screen and (max-width: 576px) {
+ .wrapper {
+ padding-left: 0px;
+ padding-right: 0px;
+ flex-flow: column;
+ overflow: hidden;
+ }
+ .content-section {
+ flex: 100%;
+ max-width: 100%;
+ padding-left: 0;
+ width: 100%;
+ }
+
+ .content {
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ transition: all ease-out 0.3s;
+ }
+
+ .content-section.hide .content {
+ margin-top: 0;
+ padding-top: 0;
+ transition: all ease-out 0.3s;
+ }
+
+ .content-section.hide .post-card-holder {
+ margin-top: 0.5rem;
+ transition: all ease-out 0.3s;
+ }
+
+ .post-card-holder .post-card {
+ margin-left: 1%;
+ margin-right: 1%;
+ width: 98%;
+ }
+ }
+
+ /* iPhoneX, iPhone 6,7,8 */
+ @media only screen and (max-width: 375px) {
+ }
+
+ /* Galaxy S5, Moto G4 */
+ @media only screen and (max-width: 360px) {
+ }
+
+ /* iPhone 5 or before */
+ @media only screen and (max-width: 320px) {
+ }
+}
diff --git a/assets/styles/navigators/navbar.css b/assets/styles/navigators/navbar.scss
similarity index 75%
rename from assets/styles/navigators/navbar.css
rename to assets/styles/navigators/navbar.scss
index 29284da..50b42a6 100644
--- a/assets/styles/navigators/navbar.css
+++ b/assets/styles/navigators/navbar.scss
@@ -1,33 +1,31 @@
.top-navbar {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 50px;
- z-index: 99999;
- transition: all 0.4s ease-out;
- margin: 0px;
- padding-top: 0.4rem;
- text-align: center;
- }
-
- /* --- initial state start ------ */
-
- .initial-navbar {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 50px;
+ z-index: 99999;
+ transition: all 0.4s ease-out;
+ margin: 0px;
+ padding-top: 0.4rem;
+ text-align: center;
+
+ /* --- initial state start ------ */
+ &.initial-navbar {
background-color: transparent;
}
- .initial-navbar .navbar-brand {
+ &.initial-navbar .navbar-brand {
color: #c0ccda;
font-weight: 600;
}
- .initial-navbar li a {
+ &.initial-navbar li a {
color: #c0ccda;
}
- .initial-navbar .navbar-nav .active,
- .initial-navbar li a:hover {
+ &.initial-navbar .navbar-nav .active,
+ &.initial-navbar li a:hover {
color: #f9fafc;
transition: all 0.3s ease-out;
transform: translateY(-2px);
@@ -47,26 +45,26 @@
/* --- state after scroll start --- */
- .final-navbar {
+ &.final-navbar {
background-color: #f9fafc;
color: #1c2d41;
transition: all 0.3s ease-out;
}
- .final-navbar .navbar-brand {
+ &.final-navbar .navbar-brand {
color: #1c2d41;
font-weight: 600;
}
- .final-navbar li a {
+ &.final-navbar li a {
color: #1c2d41;
font-weight: 500;
transition: all 0.3s ease-out;
border-bottom: 2px solid#F9FAFC;
}
- .final-navbar .navbar-nav .active,
- .final-navbar li a:hover {
+ &.final-navbar .navbar-nav .active,
+ &.final-navbar li a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
border-bottom: 2px solid #2098d1;
@@ -102,7 +100,7 @@
width: 2px;
}
- .final-navbar #top-navbar-divider {
+ &.final-navbar #top-navbar-divider {
background: rgba(0, 0, 0, 0.6);
}
@@ -117,7 +115,7 @@
margin-left: -10px;
}
- .top-navbar .dropdown-menu {
+ .dropdown-menu {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
border: 1px solid #fff;
max-height: 0vh;
@@ -127,18 +125,18 @@
transition: all 0.3s ease-out;
}
- .top-navbar .dropdown-menu.show {
+ .dropdown-menu.show {
max-height: 100vh;
visibility: visible;
transition: all 0.3s ease-in;
}
- .top-navbar .dropdown-menu a {
+ .dropdown-menu a {
color: #1c2d41;
border-bottom: none;
}
- .top-navbar .dropdown-menu a:hover {
+ .dropdown-menu a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
border-bottom: none;
@@ -166,25 +164,23 @@
/* IPad Pro */
@media (max-width: 1024px) {
- .top-navbar {
- height: -moz-fit-content;
- height: fit-content;
- padding-bottom: 0px;
- padding-top: 0px;
- }
+ height: -moz-fit-content;
+ height: fit-content;
+ padding-bottom: 0px;
+ padding-top: 0px;
- .top-navbar .container {
+ .container {
max-width: 100%;
}
- .initial-navbar .navbar-nav .active,
- .initial-navbar li a:hover {
+ &.initial-navbar .navbar-nav .active,
+ &.initial-navbar li a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
}
- .final-navbar .navbar-nav .active,
- .final-navbar li a:hover {
+ &.final-navbar .navbar-nav .active,
+ &.final-navbar li a:hover {
color: #2098d1;
transition: none;
@@ -192,7 +188,7 @@
background: transparent;
}
- .final-navbar li a {
+ &.final-navbar li a {
border-bottom: none;
}
@@ -205,7 +201,7 @@
width: auto;
margin-right: 15px;
}
- .top-navbar .dropdown-menu {
+ .dropdown-menu {
text-align: center;
margin-bottom: 0.5rem;
margin-right: 1rem;
@@ -216,14 +212,14 @@
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
- .initial-navbar .navbar-nav .active,
- .initial-navbar li a:hover {
+ &.initial-navbar .navbar-nav .active,
+ &.initial-navbar li a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
}
- .final-navbar .navbar-nav .active,
- .final-navbar li a:hover {
+ &.final-navbar .navbar-nav .active,
+ &.final-navbar li a:hover {
color: #2098d1;
transition: none;
@@ -231,7 +227,7 @@
background: transparent;
}
- .final-navbar li a {
+ &.final-navbar li a {
border-bottom: none;
}
@@ -249,14 +245,14 @@
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
- .initial-navbar .navbar-nav .active,
- .initial-navbar li a:hover {
+ &.initial-navbar .navbar-nav .active,
+ &.initial-navbar li a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
}
- .final-navbar .navbar-nav .active,
- .final-navbar li a:hover {
+ &.final-navbar .navbar-nav .active,
+ &.final-navbar li a:hover {
color: #2098d1;
transition: none;
@@ -264,7 +260,7 @@
background: transparent;
}
- .final-navbar li a {
+ &.final-navbar li a {
border-bottom: none;
}
@@ -282,7 +278,7 @@
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
- .top-navbar .dropdown-menu {
+ .dropdown-menu {
margin-left: -1rem;
margin-right: 0rem;
}
@@ -298,5 +294,5 @@
/* iPhone 5 or before */
@media only screen and (max-width: 320px) {
- }
-
\ No newline at end of file
+ }
+}
\ No newline at end of file
diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss
new file mode 100644
index 0000000..d392b58
--- /dev/null
+++ b/assets/styles/navigators/sidebar.scss
@@ -0,0 +1,299 @@
+.sidebar-section {
+ order: 1;
+ flex: 20%;
+ max-width: 20%;
+ /* background-color: lightsalmon; */
+ transition: all ease-out 0.5s;
+
+ .sidebar-holder {
+ top: 2.5rem;
+ position: sticky;
+ background-color: #f9fafc;
+ height: 100vh;
+ overflow: auto;
+ box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+ transition: all ease-out 0.3s;
+ }
+
+ .sidebar {
+ background: #f9fafc;
+ height: 100vh;
+ transition: all ease-out 0.3s;
+ }
+
+ .sidebar-tree {
+ padding-left: 1rem;
+ position: relative;
+ width: -moz-max-content;
+ width: max-content;
+ }
+
+ #search-box {
+ margin-left: 5%;
+ margin-right: 5%;
+ width: -webkit-fill-available;
+ height: 35px;
+ padding-left: 15px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ border-radius: 5px;
+ background-color: #e5e9f2;
+ transition: all 0.3s ease-out;
+ border: 1px solid #c0ccda;
+ }
+
+ #search-box:focus {
+ border: 1pt solid #248aaa;
+ outline: none;
+ }
+
+ #list-heading {
+ padding-left: 0px !important;
+ }
+
+ .tree,
+ .tree ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ .tree li {
+ margin: 0;
+ padding: 0 1em;
+ line-height: 2em;
+ color: #3c4858;
+ position: relative;
+ }
+
+ .tree li a {
+ text-decoration: none;
+ color: #131313;
+ transition: all 0.3s ease-out;
+ }
+
+ .tree li a.active {
+ display: inline;
+ color: #2098d1;
+ }
+
+ .tree li a:hover {
+ margin-left: 3px;
+ color: #2098d1;
+ transition: all 0.3s ease-out;
+ }
+
+ .tree i {
+ color: #3c4858;
+ font-size: 12px;
+ margin-right: 5px;
+ }
+
+ .tree .shift-right {
+ margin-left: 5px;
+ }
+
+ .tree .active,
+ .tree .active > ul {
+ display: block;
+ }
+
+ .subtree {
+ padding-left: 0.7rem;
+ }
+
+ .subtree:before {
+ content: "";
+ display: block;
+ width: 0;
+ position: absolute;
+ top: 2.5rem;
+ left: 1.5rem;
+ bottom: 0.9rem;
+ border-left: 1px solid;
+ }
+
+ .subtree ul,
+ ul > ul {
+ position: relative;
+ padding-left: 0.5rem;
+ display: none;
+ }
+
+ .subtree ul:before {
+ content: "";
+ display: block;
+ width: 0;
+ position: absolute;
+ top: -10px;
+ left: 0.3rem;
+ bottom: 0.9rem;
+ border-left: 1px solid;
+ }
+
+ .subtree li:before {
+ content: "";
+ display: block;
+ width: 20px;
+ height: 0;
+ border-top: 1px solid;
+ margin-top: -1px;
+ position: absolute;
+ top: 18px;
+ left: -3px;
+ }
+
+ .subtree li:last-child:before {
+ background: #f9fafc;
+ height: auto;
+ top: 1.1rem;
+ bottom: 0;
+ }
+
+ a.focused {
+ color: #2098d1 !important;
+ }
+
+ /* ============= Device specific fixes ======= */
+
+ /* Large screens such as TV */
+ @media only screen and (min-width: 1824px) {
+ flex: 15%;
+ max-width: 15%;
+
+ .sidebar-holder {
+ max-width: 100%;
+ }
+ }
+ /* Extra large devices (large desktops, 1200px and up) */
+
+ @media (max-width: 1400px) {
+ .sidebar-holder {
+ max-width: 20rem;
+ }
+ }
+
+ @media (max-width: 1200px) {
+ .sidebar-tree {
+ margin-left: 1rem;
+ }
+ }
+
+ /* IPad Pro */
+ @media (max-width: 1024px) {
+ flex: 0%;
+ max-width: 0%;
+ min-height: 100vh;
+ transition: all ease-out 0.3s;
+
+ .sidebar-holder {
+ position: sticky;
+ top: 2.5rem;
+ width: 100%;
+ max-height: calc(100vh - 2.5rem);
+ }
+
+ &.hide {
+ flex: 30%;
+ max-width: 30%;
+ margin-right: 0.5rem;
+ transition: all ease-out 0.3s;
+ }
+ }
+
+ /* Large devices (desktops, 992px and up) */
+
+ @media (max-width: 992px) {
+ }
+
+ /* Medium devices (tablets, 768px and up) */
+
+ @media only screen and (max-width: 768px) {
+ flex: 0%;
+ max-width: 0%;
+ min-height: 100vh;
+ transition: all ease-out 0.3s;
+
+ .sidebar-holder {
+ position: sticky;
+ top: 2.5rem;
+ width: 100%;
+ }
+
+ &.hide {
+ flex: 40%;
+ max-width: 40%;
+ margin-right: 0.5rem;
+ transition: all ease-out 0.3s;
+ }
+ }
+
+ /* Small devices (landscape phones, 576px and up) */
+
+ @media only screen and (max-width: 576px) {
+ width: 100%;
+ min-height: 0;
+ max-height: 0;
+ max-width: 100%;
+ transition: all ease-out 0.5s;
+
+ &.hide {
+ margin-top: 2rem;
+ position: relative;
+ height: -moz-fit-content;
+ height: fit-content;
+ flex: none;
+ max-height: 300vh;
+ max-width: 100%;
+ transition: all ease-out 0.5s;
+ }
+
+ .sidebar-holder {
+ max-height: 0;
+ height: -moz-fit-content;
+ height: fit-content;
+ overflow: hidden;
+ max-width: 100%;
+ transition: all ease-out 0.5s;
+ }
+
+ &.hide .sidebar-holder {
+ max-height: 200vh;
+ transition: all ease-out 0.5s;
+ }
+
+ .sidebar {
+ position: relative;
+ height: -moz-fit-content;
+ height: fit-content;
+ max-height: -moz-fit-content;
+ max-height: fit-content;
+ width: 100vw;
+ min-height: 0;
+ overflow: hidden;
+ transition: all ease-out 0.5s;
+ }
+
+ .sidebar-tree {
+ margin-left: 0rem;
+ max-height: 0;
+ transition: all 0.5s ease-out;
+ }
+ &.hide .sidebar-tree {
+ max-height: 200vh;
+ transition: all 0.5s ease-out;
+ }
+ }
+
+ /* iPhoneX, iPhone 6,7,8 */
+ @media only screen and (max-width: 375px) {
+ }
+
+ /* Galaxy S5, Moto G4 */
+ @media only screen and (max-width: 360px) {
+ }
+
+ /* iPhone 5 or before */
+ @media only screen and (max-width: 320px) {
+ }
+}
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 782cd3e..84874dc 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
-
+
{{ .Page.Title }}
@@ -14,7 +14,7 @@
-
+
{{ block "navbar" . }} {{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 07a0f00..fd126ef 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,11 +1,3 @@
-{{ define "header" }}
-
-
-
-
-
-{{ end }}
-
{{ define "navbar" }}
{{ partial "navigators/navbar-2.html" . }}
{{ end }}
diff --git a/static/css/layouts/list.css b/static/css/layouts/list.css
deleted file mode 100644
index 9eff7c0..0000000
--- a/static/css/layouts/list.css
+++ /dev/null
@@ -1,246 +0,0 @@
-.wrapper {
- display: flex;
- padding: 0;
- margin: 0;
- width: 100%;
-}
-
-.content-section {
- flex: 80%;
- order: 2;
- /* background-color: lightseagreen; */
- padding: 0;
- position: relative;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
-}
-
-.content {
- padding: 0;
- position: relative;
- padding-top: 2rem;
- min-height: 130vh;
-}
-
-.post-card-holder {
- margin-top: 32px;
- margin-left: auto;
- padding: 0;
- display: flex;
- flex-flow: wrap;
-}
-
-.post-card-holder .post-card {
- width: calc(100% / 3);
- display: inline-flex;
-}
-
-.post-card-holder .card {
- margin: 5px;
- position: relative;
-}
-
-.post-card-holder .card .card-footer span {
- font-size: 10pt;
- color: #6c757d !important;
- padding-top: 5px;
-}
-
-.post-card-holder .card .card-footer {
- background: #fff;
- margin-top: auto;
-}
-
-.post-summary {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- max-height: 144px;
- /* fallback */
- -webkit-line-clamp: 5;
- /* number of lines to show */
- -webkit-box-orient: vertical;
-}
-
-.post-card-holder .post-card-link {
- text-decoration: none;
-}
-
-.paginator {
- width: -moz-fit-content;
- width: fit-content;
- margin: auto;
-}
-
-.paginator .page-item > a {
- color: #248aaa;
-}
-
-.paginator .page-item.active > a {
- background-color: #248aaa;
- color: #f9fafc;
-}
-
-.navbar-toggler {
- display: none;
-}
-
-.pagination {
- margin-left: auto;
- margin-right: auto;
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- width: -moz-fit-content;
- width: fit-content;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
- .content-section {
- padding-left: 1rem;
- padding-right: 1rem;
- flex: 85%;
- max-width: 85%;
- }
- .post-card-holder .post-card {
- width: calc(100% / 5);
- }
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
- .post-card-holder {
- margin-left: 0px;
- }
- .post-card-holder .post-card {
- width: calc(100% / 3);
- }
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
- .wrapper {
- padding-left: 0px;
- padding-right: 0px;
- }
- .content-section {
- padding: 0;
- flex: 60%;
- order: 2;
- padding-bottom: 0.5rem;
- }
-
- .content {
- overflow: hidden;
- }
- .container {
- max-width: 100%;
- }
- .navbar-toggler {
- display: block;
- }
-
- #toc-toggler {
- visibility: hidden;
- }
-
- .navbar-collapse.lang-selector {
- display: block !important;
- position: absolute;
- right: 0;
- top: 0.5rem;
- }
-
- .post-card-holder {
- margin: 0;
- margin-top: 1.5rem;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- position: relative;
- transition: all ease-out 0.3s;
- }
-
- .post-card-holder .post-card {
- width: calc(100% / 3);
- }
-
- .content-section.hide .post-card-holder .post-card {
- width: 50%;
- }
-}
-
-/* Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
- .post-card-holder .post-card {
- width: 50%;
- }
-
- .content-section.hide .post-card-holder .post-card {
- width: 100%;
- }
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
- .wrapper {
- padding-left: 0px;
- padding-right: 0px;
- flex-flow: column;
- overflow: hidden;
- }
- .content-section {
- flex: 100%;
- max-width: 100%;
- padding-left: 0;
- width: 100%;
- }
-
- .content {
- width: 100%;
- padding-left: 0;
- padding-right: 0;
- transition: all ease-out 0.3s;
- }
-
- .content-section.hide .content {
- margin-top: 0;
- padding-top: 0;
- transition: all ease-out 0.3s;
- }
-
- .content-section.hide .post-card-holder {
- margin-top: 0.5rem;
- transition: all ease-out 0.3s;
- }
-
- .post-card-holder .post-card {
- margin-left: 1%;
- margin-right: 1%;
- width: 98%;
- }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/navigators/sidebar.css b/static/css/navigators/sidebar.css
deleted file mode 100644
index d25305e..0000000
--- a/static/css/navigators/sidebar.css
+++ /dev/null
@@ -1,304 +0,0 @@
-.sidebar-section {
- order: 1;
- flex: 20%;
- max-width: 20%;
- /* background-color: lightsalmon; */
- transition: all ease-out 0.5s;
-}
-
-.sidebar-holder {
- top: 2.5rem;
- position: sticky;
- background-color: #f9fafc;
- height: 100vh;
- overflow: auto;
- box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
- transition: all ease-out 0.3s;
-}
-
-.sidebar {
- background: #f9fafc;
- height: 100vh;
- transition: all ease-out 0.3s;
-}
-
-.sidebar-tree {
- padding-left: 1rem;
- position: relative;
- width: -moz-max-content;
- width: max-content;
-}
-
-#search-box {
- margin-left: 5%;
- margin-right: 5%;
- width: -webkit-fill-available;
- height: 35px;
- padding-left: 15px;
- margin-top: 30px;
- margin-bottom: 10px;
- border-radius: 5px;
- background-color: #e5e9f2;
- transition: all 0.3s ease-out;
- border: 1px solid #c0ccda;
-}
-
-#search-box:focus {
- border: 1pt solid #248aaa;
- outline: none;
-}
-
-#list-heading {
- padding-left: 0px !important;
-}
-
-.tree,
-.tree ul {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.tree li {
- margin: 0;
- padding: 0 1em;
- line-height: 2em;
- color: #3c4858;
- position: relative;
-}
-
-.tree li a {
- text-decoration: none;
- color: #131313;
- transition: all 0.3s ease-out;
-}
-
-.tree li a.active {
- display: inline;
- color: #2098d1;
-}
-
-.tree li a:hover {
- margin-left: 3px;
- color: #2098d1;
- transition: all 0.3s ease-out;
-}
-
-.tree i {
- color: #3c4858;
- font-size: 12px;
- margin-right: 5px;
-}
-
-.tree .shift-right {
- margin-left: 5px;
-}
-
-.tree .active,
-.tree .active > ul {
- display: block;
-}
-
-.subtree {
- padding-left: 0.7rem;
-}
-
-.subtree:before {
- content: "";
- display: block;
- width: 0;
- position: absolute;
- top: 2.5rem;
- left: 1.5rem;
- bottom: 0.9rem;
- border-left: 1px solid;
-}
-
-.subtree ul,
-ul > ul {
- position: relative;
- padding-left: 0.5rem;
- display: none;
-}
-
-.subtree ul:before {
- content: "";
- display: block;
- width: 0;
- position: absolute;
- top: -10px;
- left: 0.3rem;
- bottom: 0.9rem;
- border-left: 1px solid;
-}
-
-.subtree li:before {
- content: "";
- display: block;
- width: 20px;
- height: 0;
- border-top: 1px solid;
- margin-top: -1px;
- position: absolute;
- top: 18px;
- left: -3px;
-}
-
-.subtree li:last-child:before {
- background: #f9fafc;
- height: auto;
- top: 1.1rem;
- bottom: 0;
-}
-
-a.focused {
- color: #2098d1 !important;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
- .sidebar-section {
- flex: 15%;
- max-width: 15%;
- }
- .sidebar-holder {
- max-width: 100%;
- }
-}
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
- .sidebar-holder {
- max-width: 20rem;
- }
-}
-
-@media (max-width: 1200px) {
- .sidebar-tree {
- margin-left: 1rem;
- }
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
- .sidebar-section {
- flex: 0%;
- max-width: 0%;
- min-height: 100vh;
- transition: all ease-out 0.3s;
- }
- .sidebar-holder {
- position: sticky;
- top: 2.5rem;
- width: 100%;
- max-height: calc(100vh - 2.5rem);
- }
-
- .sidebar-section.hide {
- flex: 30%;
- max-width: 30%;
- margin-right: 0.5rem;
- transition: all ease-out 0.3s;
- }
-}
-
-/* Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
- .sidebar-section {
- flex: 0%;
- max-width: 0%;
- min-height: 100vh;
- transition: all ease-out 0.3s;
- }
- .sidebar-holder {
- position: sticky;
- top: 2.5rem;
- width: 100%;
- }
-
- .sidebar-section.hide {
- flex: 40%;
- max-width: 40%;
- margin-right: 0.5rem;
- transition: all ease-out 0.3s;
- }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
- .sidebar-section {
- width: 100%;
- min-height: 0;
- max-height: 0;
- max-width: 100%;
- transition: all ease-out 0.5s;
- }
-
- .sidebar-section.hide {
- margin-top: 2rem;
- position: relative;
- height: -moz-fit-content;
- height: fit-content;
- flex: none;
- max-height: 300vh;
- max-width: 100%;
- transition: all ease-out 0.5s;
- }
-
- .sidebar-holder {
- max-height: 0;
- height: -moz-fit-content;
- height: fit-content;
- overflow: hidden;
- max-width: 100%;
- transition: all ease-out 0.5s;
- }
-
- .sidebar-section.hide .sidebar-holder {
- max-height: 200vh;
- transition: all ease-out 0.5s;
- }
-
- .sidebar {
- position: relative;
- height: -moz-fit-content;
- height: fit-content;
- max-height: -moz-fit-content;
- max-height: fit-content;
- width: 100vw;
- min-height: 0;
- overflow: hidden;
- transition: all ease-out 0.5s;
- }
-
- .sidebar-tree {
- margin-left: 0rem;
- max-height: 0;
- transition: all 0.5s ease-out;
- }
- .sidebar-section.hide .sidebar-tree {
- max-height: 200vh;
- transition: all 0.5s ease-out;
- }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}