Refactor sidebar logic + Add Table of Contents in reading page (#33)
* Refactor sidebar logic + fix responsiveness * Add TOC * Add Pagination * Update exampleSite * Update README.md
This commit is contained in:
Md. Emruz Hossain
GitHub
parent
647578e88b
commit
fa4d474974
59 changed files with 1735 additions and 679 deletions
|
|
@ -25,9 +25,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -41,6 +41,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -75,3 +79,15 @@
|
|||
left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,193 +3,50 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 400px;
|
||||
background: #f9fafc;
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
width: 0;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
z-index: -1001;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 250px;
|
||||
height: 35px;
|
||||
padding-left: 15px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5e9f2;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
border: 1px solid #c0ccda;
|
||||
}
|
||||
|
||||
#search-box:focus {
|
||||
border: 1pt solid #248aaa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 2rem;
|
||||
margin-top: 2.5rem;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#list-heading {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.tree,
|
||||
.tree ul {
|
||||
margin: 0;
|
||||
.content-section {
|
||||
flex: 80%;
|
||||
order: 2;
|
||||
/* background-color: lightseagreen; */
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
margin-left: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree ul ul {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.tree ul:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -3px;
|
||||
bottom: 16px;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.subtree {
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
|
||||
.subtree:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 6.5rem;
|
||||
left: 0.5rem;
|
||||
bottom: 16px;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.tree li {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
line-height: 2em;
|
||||
color: #3c4858;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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: 1em;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tree li a {
|
||||
text-decoration: none;
|
||||
color: #131313;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
.tree li a:hover {
|
||||
margin-left: 3px;
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tree i {
|
||||
color: #3c4858;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tree .shift-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree .expand,
|
||||
.tree .expand > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a.focused {
|
||||
color: #2098d1 !important;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #e5e9f2;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-top: 2rem;
|
||||
min-height: 130vh;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 30px;
|
||||
width: 100%;
|
||||
padding-left: 28px;
|
||||
padding-bottom: 20px;
|
||||
.post-card-holder {
|
||||
margin-top: 32px;
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
margin: 32px;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
width: 23rem !important;
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
.post-card-holder .card {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-cards .card .card-footer span {
|
||||
.post-card-holder .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.post-cards .card .card-footer {
|
||||
.post-card-holder .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -205,20 +62,20 @@ a.focused {
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.post-cards .post-card-link{
|
||||
.post-card-holder .post-card-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content-cards .paginator{
|
||||
.content-cards .paginator {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content-cards .paginator .page-item>a{
|
||||
.content-cards .paginator .page-item > a {
|
||||
color: #248aaa;
|
||||
}
|
||||
|
||||
.content-cards .paginator .page-item.active>a{
|
||||
.content-cards .paginator .page-item.active > a {
|
||||
background-color: #248aaa;
|
||||
color: #f9fafc;
|
||||
}
|
||||
|
|
@ -227,60 +84,70 @@ a.focused {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/*-------------- Media Queries ---------- */
|
||||
.pagination {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.sidebar-tree {
|
||||
margin-left: 1rem;
|
||||
/* ============= 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%;
|
||||
}
|
||||
.content-cards {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.post-cards {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.post-cards .filtr-item {
|
||||
width: 22rem !important;
|
||||
padding: 3px;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 5);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.content {
|
||||
width: 100vw;
|
||||
padding-left: 15px;
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.content-cards {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.content.overley {
|
||||
width: 60vw;
|
||||
padding-left: 3px;
|
||||
.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;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar nav {
|
||||
display: none;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: -20rem;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar.hide .sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
|
|
@ -289,85 +156,153 @@ a.focused {
|
|||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 32px;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
margin: 10px;
|
||||
width: 47vw !important;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
max-width: 47vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .filtr-item {
|
||||
margin: 10px;
|
||||
width: 55vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .card {
|
||||
max-width: 55vw !important;
|
||||
.content-section.hide .post-card-holder .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.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;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-card-holder .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.content-section.hide .post-card-holder .post-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.wrapper {
|
||||
display: block;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-section {
|
||||
flex: 100%;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 85vw;
|
||||
height: 35px;
|
||||
padding-left: 5px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.content {
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding-left: 2vw;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.content.overley {
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
padding-left: 2vw;
|
||||
.content-section.hide .content {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
width: 100vw;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar.hide .sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
|
|
@ -377,41 +312,34 @@ a.focused {
|
|||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.content.overley .content-cards {
|
||||
padding-top: 0px;
|
||||
padding-left: 0px;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 32px;
|
||||
margin-top: 1.5rem;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.content.overley .post-cards {
|
||||
margin: 0;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
.post-card-holder.hide {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
margin: 0px;
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
max-width: 90vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .filtr-item {
|
||||
margin: 0px;
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .card {
|
||||
max-width: 95vw !important;
|
||||
.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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ h5 {
|
|||
color: #1c2d41;
|
||||
}
|
||||
|
||||
strong{
|
||||
color: #1c2d41!important;
|
||||
strong {
|
||||
color: #1c2d41 !important;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -42,6 +42,13 @@ a:hover {
|
|||
color: #207089;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
color: #8392a5;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background-color: #3c4858;
|
||||
border-color: #3c4858;
|
||||
|
|
@ -90,18 +97,18 @@ a:hover {
|
|||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
img.center{
|
||||
img.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.left{
|
||||
img.left {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.right{
|
||||
img.right {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -220,9 +227,9 @@ img.right{
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -232,6 +239,10 @@ img.right{
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -245,6 +256,12 @@ img.right{
|
|||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.skills-section .container,
|
||||
.projects-section .container {
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
.section-holder {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
|
@ -253,8 +270,20 @@ img.right{
|
|||
.skills-section,
|
||||
.projects-section,
|
||||
.recent-posts-section,
|
||||
.achievements-section{
|
||||
.achievements-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,9 +124,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -136,9 +136,93 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
|
@ -189,4 +273,19 @@
|
|||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.final-navbar {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
315
static/assets/css/navigators/sidebar.css
Normal file
315
static/assets/css/navigators/sidebar.css
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
.sidebar-section {
|
||||
order: 1;
|
||||
flex: 20%;
|
||||
max-width: 20%;
|
||||
/* background-color: lightsalmon; */
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-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;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: #f9fafc;
|
||||
height: 100vh;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
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;
|
||||
-webkit-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,
|
||||
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;
|
||||
-webkit-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;
|
||||
-webkit-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;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar-holder {
|
||||
position: sticky;
|
||||
top: 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
flex: 30%;
|
||||
max-width: 30%;
|
||||
margin-right: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-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;
|
||||
-webkit-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;
|
||||
-webkit-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;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
flex: none;
|
||||
max-height: 300vh;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-holder {
|
||||
max-height: 0;
|
||||
height: fit-content;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-section.hide .sidebar-holder {
|
||||
max-height: 200vh;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
max-height: fit-content;
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 0rem;
|
||||
max-height: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
}
|
||||
.sidebar-section.hide .sidebar-tree {
|
||||
max-height: 200vh;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-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) {
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.projects-section .card .card-header {
|
||||
background-color: #f9fafc;
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card .card-header .sub-title span:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
.card .card-header .sub-title span:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.projects-section .card .card-body {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-header .sub-title {
|
||||
color: #8392a5;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.filtr-projects {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
/* ============= 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) {
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.projects-section .btn {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.recent-posts-section .container{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.recent-posts-section .post-card-link{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
/* line-height: 24px; fallback */
|
||||
max-height: 144px; /* fallback */
|
||||
-webkit-line-clamp: 5; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
|
@ -347,9 +347,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -359,6 +359,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -367,9 +371,24 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.about-section.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -126,9 +126,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -138,6 +138,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -146,6 +150,13 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.achievements-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.achievements-section .col-md-6 {
|
||||
flex: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
|
@ -155,3 +166,15 @@
|
|||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
color: #3c4858;
|
||||
}
|
||||
|
||||
.experiences-section .designation{
|
||||
font-weight: 600;
|
||||
.experiences-section .designation {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -103,6 +103,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -111,6 +115,9 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.experiences-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
|
@ -118,14 +125,13 @@
|
|||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
.top-left {
|
||||
left: -52%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 52%;
|
||||
top: -50%;
|
||||
|
|
@ -138,7 +144,7 @@
|
|||
left: -56%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 56%;
|
||||
top: -50%;
|
||||
|
|
@ -151,7 +157,7 @@
|
|||
left: -64%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 64%;
|
||||
top: -50%;
|
||||
|
|
@ -75,9 +75,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -87,6 +87,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -116,3 +120,15 @@
|
|||
font-size: 24pt;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
113
static/assets/css/sections/projects.css
Normal file
113
static/assets/css/sections/projects.css
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
.projects-section .card .card-header {
|
||||
background-color: #f9fafc;
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card .card-header .sub-title span:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
.card .card-header .sub-title span:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.projects-section .card .card-body {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-header .sub-title {
|
||||
color: #8392a5;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.filtr-projects {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.projects-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.projects-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.projects-section .filtr-projects {
|
||||
padding: 0;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.projects-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.projects-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.projects-section .filtr-projects {
|
||||
padding: 0;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
flex: 50%;
|
||||
max-width: calc(100% / 2 - 0.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.projects-section .btn {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
82
static/assets/css/sections/recent-posts.css
Normal file
82
static/assets/css/sections/recent-posts.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
.recent-posts-section .container {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.recent-posts-section .post-card-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
/* line-height: 24px; fallback */
|
||||
max-height: 144px; /* fallback */
|
||||
-webkit-line-clamp: 5; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.recent-posts-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.recent-posts-section .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.recent-posts-section .post-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -34,6 +34,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -42,9 +46,28 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.skills-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.skills-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -1,12 +1,93 @@
|
|||
body {
|
||||
background-color: #e5e9f2;
|
||||
position: relative;
|
||||
}
|
||||
.read-area {
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
/* background-color: lightseagreen; */
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.content {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.toc-section {
|
||||
flex: 20%;
|
||||
order: 3;
|
||||
max-width: 20%;
|
||||
/* background-color: lightpink; */
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
position: sticky;
|
||||
top: 4.5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #f9fafc;
|
||||
margin-right: 0.5rem;
|
||||
max-height: 100vh;
|
||||
/* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: relative;
|
||||
padding-top: 0px;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc nav {
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
padding-left: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc .nav-link {
|
||||
padding: 0;
|
||||
padding-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
color: #1c2d41;
|
||||
}
|
||||
|
||||
.toc .nav-link:hover,
|
||||
.toc .nav-link:focus,
|
||||
.toc .nav-link.active {
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
background-color: #248aaa;
|
||||
color: #f9f9f9;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
|
|
@ -132,25 +213,25 @@ pre {
|
|||
margin: 5px;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
pre > code {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
a.header-anchor{
|
||||
a.header-anchor {
|
||||
text-decoration: none;
|
||||
color: #1c2d41;
|
||||
}
|
||||
|
||||
a.header-anchor i{
|
||||
a.header-anchor i {
|
||||
font-size: 10pt;
|
||||
color: #3c4858;
|
||||
display: none;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
a.header-anchor:hover i{
|
||||
a.header-anchor:hover i {
|
||||
display: inline-block;
|
||||
}
|
||||
a.header-anchor code{
|
||||
a.header-anchor code {
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
|
|
@ -158,13 +239,13 @@ a.header-anchor code{
|
|||
display: none;
|
||||
}
|
||||
|
||||
ul > ol,
|
||||
ol > ul,
|
||||
ul > ul,
|
||||
ol > ol,
|
||||
li > ol,
|
||||
li > ul {
|
||||
padding-inline-start: 25px;
|
||||
.content ul > ol,
|
||||
.content ol > ul,
|
||||
.content ul > ul,
|
||||
.content ol > ol,
|
||||
.content li > ol,
|
||||
.content li > ul {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
|
|
@ -226,29 +307,239 @@ mark {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn-improve-page{
|
||||
.btn-improve-page {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.content-section {
|
||||
flex: 65%;
|
||||
}
|
||||
.content-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@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;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 3;
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.toc-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 300px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0px;
|
||||
}
|
||||
code {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btn-improve-page {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#disqus_thread,
|
||||
.dsq-brlink {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 3;
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.toc-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 300px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0px;
|
||||
}
|
||||
code {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btn-improve-page {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#disqus_thread,
|
||||
.dsq-brlink {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.wrapper {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 100%;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-section.hide {
|
||||
margin-top: 2.5rem;
|
||||
position: relative;
|
||||
/* height: fit-content; */
|
||||
flex: 100%;
|
||||
height: fit-content;
|
||||
max-height: 200vh;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
max-height: 0;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
.toc-section.hide .toc-holder {
|
||||
max-height: 200vh;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 200px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.hero-area.hide {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -277,3 +568,15 @@ mark {
|
|||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,46 @@
|
|||
/* Add custom css styling here to override the theme */
|
||||
|
||||
/* This is empty CSS file intended to be overwritten by user's custom CSS file */
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,30 +43,6 @@ var projectCards;
|
|||
}
|
||||
}
|
||||
|
||||
// ================= Smooth Scroll ===================
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function (event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function () {
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
|
||||
// ============== Fix Timelines Horizontal Lines =========
|
||||
var hLines = document.getElementsByClassName("horizontal-line");
|
||||
for (let i = 0; i < hLines.length; i++) {
|
||||
|
|
@ -263,14 +239,14 @@ var projectCards;
|
|||
}
|
||||
function twoColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry1.classList.add("col-6", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry2.classList.add("col-6", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
|
|
@ -279,7 +255,7 @@ var projectCards;
|
|||
|
||||
function singleColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry1.classList.add("col-12", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
"use strict";
|
||||
|
||||
var filterizd;
|
||||
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
|
|
@ -25,7 +23,7 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
// ======= Adjust height of the post cards =============
|
||||
function adjustPostCardsHeight() {
|
||||
if (!isMobile) { // no need to adjust height for mobile devices
|
||||
let postCardHolder = document.getElementById("post-cards");
|
||||
let postCardHolder = document.getElementById("post-card-holder");
|
||||
if (postCardHolder == null ){
|
||||
return
|
||||
}
|
||||
|
|
@ -42,69 +40,5 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
}
|
||||
}
|
||||
adjustPostCardsHeight();
|
||||
|
||||
// ============= Sidebar Tree ================
|
||||
function buildSidebarMenu() {
|
||||
var openedClass = "fa-minus-circle";
|
||||
var closedClass = "fa-plus-circle";
|
||||
// initialize top level
|
||||
var tree = $("#tree");
|
||||
// add expand icon to those li who has ul as children
|
||||
tree.find("li").has("ul").each(function () {
|
||||
var branch = $(this);
|
||||
branch.prepend('<i class="fas ' + closedClass + '"></i>');
|
||||
branch.on('click', function (e) {
|
||||
if (this.children[1] == e.target) {
|
||||
// toggle "expand" class and icon
|
||||
branch.toggleClass("expand");
|
||||
var icon = $(this).children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// remove "expnad" class from siblings of the clicked item
|
||||
tree.find("li").on("click", function () {
|
||||
var item = $(this);
|
||||
var shiblings = item.siblings().each(function () {
|
||||
var sibling = $(this);
|
||||
if (sibling.hasClass("expand")) {
|
||||
sibling.removeClass("expand");
|
||||
var icon = sibling.children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// focus the cliked item
|
||||
tree.find("a").on("click", function () {
|
||||
// clear other focused link
|
||||
tree.find("a.focused").each(function () {
|
||||
$(this).removeClass("focused");
|
||||
});
|
||||
// focus cliked link
|
||||
$(this).addClass("focused");
|
||||
});
|
||||
}
|
||||
|
||||
buildSidebarMenu();
|
||||
// initialize filterizr
|
||||
filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
// toggle sidebar on click
|
||||
function toggleSidebar() {
|
||||
document.getElementById("sidebar").classList.toggle("hide");
|
||||
document.getElementById("content").classList.toggle("overley");
|
||||
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && $("#sidebar").hasClass("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
filterizd.filterizr('sort');
|
||||
}, 300);
|
||||
}
|
||||
|
|
|
|||
122
static/assets/js/main.js
Normal file
122
static/assets/js/main.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
"use strict";
|
||||
|
||||
var projectCards;
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
function detectDevice() {
|
||||
if (window.innerWidth <= 425) {
|
||||
isMobile = true;
|
||||
isTablet = false;
|
||||
isLaptop = false;
|
||||
} else if (window.innerWidth <= 768) {
|
||||
isMobile = false;
|
||||
isTablet = true;
|
||||
isLaptop = false;
|
||||
} else {
|
||||
isMobile = false;
|
||||
isTablet = false;
|
||||
isLaptop = true;
|
||||
}
|
||||
}
|
||||
detectDevice();
|
||||
|
||||
// ================= Smooth Scroll ===================
|
||||
function addSmoothScroll() {
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function (event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
let offset = 60;
|
||||
if (isMobile) {
|
||||
offset = 760;
|
||||
} else if (isTablet) {
|
||||
offset = 60;
|
||||
}
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top - offset
|
||||
}, 800, function () {
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash - offset;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
}
|
||||
addSmoothScroll();
|
||||
|
||||
// re-render custom functions on window resize
|
||||
window.onresize = function () {
|
||||
detectDevice();
|
||||
addSmoothScroll();
|
||||
};
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
|
||||
// Toggle sidebar on click. Here, class "hide" open the sidebar
|
||||
function toggleSidebar() {
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
if (sidebar == null) {
|
||||
return
|
||||
}
|
||||
if (sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide")
|
||||
} else {
|
||||
// if toc-section is open, then close it first
|
||||
let toc = document.getElementById("toc-section");
|
||||
if (toc != null && toc.classList.contains("hide")) {
|
||||
toc.classList.remove("hide");
|
||||
}
|
||||
// add "hide" class
|
||||
sidebar.classList.add("hide")
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && sidebar.classList.contains("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
if (document.getElementById("hero-area") != null) {
|
||||
document.getElementById("hero-area").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
if (document.getElementById("content-section") != null) {
|
||||
document.getElementById("content-section").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle Table of Contents on click. Here, class "hide" open the toc
|
||||
function toggleTOC() {
|
||||
let toc = document.getElementById("toc-section");
|
||||
if (toc == null) {
|
||||
return
|
||||
}
|
||||
if (toc.classList.contains("hide")) {
|
||||
toc.classList.remove("hide");
|
||||
} else {
|
||||
// if sidebar-section is open, then close it first
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
if (sidebar != null && sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide");
|
||||
}
|
||||
// add "hide" class
|
||||
toc.classList.add("hide")
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && toc.classList.contains("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
if (document.getElementById("hero-area") != null) {
|
||||
document.getElementById("hero-area").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,5 +36,28 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
}
|
||||
}
|
||||
|
||||
// =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
|
||||
// add "navbar" class to the "nav" element
|
||||
let toc = document.getElementById("TableOfContents");
|
||||
toc.classList.add("navbar");
|
||||
// add "nav-pills" class to the "ul" elements
|
||||
let elems = toc.getElementsByTagName("ul");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-pills");
|
||||
}
|
||||
// add "nav-item" class to the "li" elements
|
||||
elems = toc.getElementsByTagName("li");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-item");
|
||||
if (isMobile) {
|
||||
elems[i].setAttribute("onclick", "toggleTOC()");
|
||||
}
|
||||
}
|
||||
// add "nav-link" class to the "a" elements
|
||||
elems = toc.getElementsByTagName("a");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-link");
|
||||
}
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue