-
+
{{ site.Params.author.name }}
{{ if .designation }}
@@ -34,10 +34,10 @@
{{ end }}
-
+
{{ range .softSkills }}
- {{ partial "progress/soft-skills" . }}
+ {{ partial "misc/soft-skills.html" . }}
{{ end }}
diff --git a/layouts/partials/achievements.html b/layouts/partials/sections/achievements.html
similarity index 88%
rename from layouts/partials/achievements.html
rename to layouts/partials/sections/achievements.html
index 75995a9..bd9a192 100644
--- a/layouts/partials/achievements.html
+++ b/layouts/partials/sections/achievements.html
@@ -9,7 +9,7 @@
{{ range .achievements }}
- {{ partial "misc/achievement.html" . }}
+ {{ partial "sections/achievements/entry.html" . }}
{{ end }}
diff --git a/layouts/partials/misc/achievement.html b/layouts/partials/sections/achievements/entry.html
similarity index 100%
rename from layouts/partials/misc/achievement.html
rename to layouts/partials/sections/achievements/entry.html
diff --git a/layouts/partials/experiences.html b/layouts/partials/sections/experiences.html
similarity index 63%
rename from layouts/partials/experiences.html
rename to layouts/partials/sections/experiences.html
index d63b319..8d6b72f 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/sections/experiences.html
@@ -8,17 +8,17 @@
{{ range $index,$experience:= .experiences }}
{{ if eq (mod $index 2) 0 }}
- {{ partial "experiences/vertical-line.html" $index }}
- {{ partial "experiences/experience-info.html" $experience }}
+ {{ partial "sections/experiences/vertical-line.html" $index }}
+ {{ partial "sections/experiences/experience-info.html" $experience }}
{{else}}
- {{ partial "experiences/experience-info.html" $experience }}
- {{ partial "experiences/vertical-line.html" $index }}
+ {{ partial "sections/experiences/experience-info.html" $experience }}
+ {{ partial "sections/experiences/vertical-line.html" $index }}
{{ end }}
{{ if lt $index (sub $totalExperiences 1) }}
- {{ partial "experiences/horizontal-line.html" $index }}
+ {{ partial "sections/experiences/horizontal-line.html" $index }}
{{ end }}
{{ end }}
diff --git a/layouts/partials/sections/experiences/experience-info.html b/layouts/partials/sections/experiences/experience-info.html
new file mode 100644
index 0000000..d49932c
--- /dev/null
+++ b/layouts/partials/sections/experiences/experience-info.html
@@ -0,0 +1,5 @@
+{{ if gt (len .positions) 1 }}
+ {{ partial "sections/experiences/multiple-positions" . }}
+{{ else }}
+ {{ partial "sections/experiences/single-position.html" . }}
+{{ end }}
diff --git a/layouts/partials/experiences/horizontal-line.html b/layouts/partials/sections/experiences/horizontal-line.html
similarity index 100%
rename from layouts/partials/experiences/horizontal-line.html
rename to layouts/partials/sections/experiences/horizontal-line.html
diff --git a/layouts/partials/experiences/multiple-positions.html b/layouts/partials/sections/experiences/multiple-positions.html
similarity index 100%
rename from layouts/partials/experiences/multiple-positions.html
rename to layouts/partials/sections/experiences/multiple-positions.html
diff --git a/layouts/partials/experiences/single-position.html b/layouts/partials/sections/experiences/single-position.html
similarity index 100%
rename from layouts/partials/experiences/single-position.html
rename to layouts/partials/sections/experiences/single-position.html
diff --git a/layouts/partials/experiences/vertical-line.html b/layouts/partials/sections/experiences/vertical-line.html
similarity index 100%
rename from layouts/partials/experiences/vertical-line.html
rename to layouts/partials/sections/experiences/vertical-line.html
diff --git a/layouts/partials/home.html b/layouts/partials/sections/home.html
similarity index 100%
rename from layouts/partials/home.html
rename to layouts/partials/sections/home.html
diff --git a/layouts/partials/projects.html b/layouts/partials/sections/projects.html
similarity index 100%
rename from layouts/partials/projects.html
rename to layouts/partials/sections/projects.html
diff --git a/layouts/partials/recent-posts.html b/layouts/partials/sections/recent-posts.html
similarity index 100%
rename from layouts/partials/recent-posts.html
rename to layouts/partials/sections/recent-posts.html
diff --git a/layouts/partials/skills.html b/layouts/partials/sections/skills.html
similarity index 100%
rename from layouts/partials/skills.html
rename to layouts/partials/sections/skills.html
diff --git a/static/assets/css/404.css b/static/assets/css/404.css
index ce1dea0..4ccb97c 100644
--- a/static/assets/css/404.css
+++ b/static/assets/css/404.css
@@ -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) {
+}
diff --git a/static/assets/css/list.css b/static/assets/css/list.css
index eba46fa..9a4fc50 100644
--- a/static/assets/css/list.css
+++ b/static/assets/css/list.css
@@ -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) {
+}
diff --git a/static/assets/css/main.css b/static/assets/css/main.css
index e3fcd43..30ee2ee 100644
--- a/static/assets/css/main.css
+++ b/static/assets/css/main.css
@@ -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) {
+}
diff --git a/static/assets/css/navbar.css b/static/assets/css/navigators/navbar.css
similarity index 62%
rename from static/assets/css/navbar.css
rename to static/assets/css/navigators/navbar.css
index 7894d22..5e58058 100644
--- a/static/assets/css/navbar.css
+++ b/static/assets/css/navigators/navbar.css
@@ -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) {
}
diff --git a/static/assets/css/navigators/sidebar.css b/static/assets/css/navigators/sidebar.css
new file mode 100644
index 0000000..102c089
--- /dev/null
+++ b/static/assets/css/navigators/sidebar.css
@@ -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) {
+}
diff --git a/static/assets/css/projects.css b/static/assets/css/projects.css
deleted file mode 100644
index b9ae172..0000000
--- a/static/assets/css/projects.css
+++ /dev/null
@@ -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;
- }
-}
diff --git a/static/assets/css/recent-posts.css b/static/assets/css/recent-posts.css
deleted file mode 100644
index ee969d0..0000000
--- a/static/assets/css/recent-posts.css
+++ /dev/null
@@ -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;
-}
diff --git a/static/assets/css/about.css b/static/assets/css/sections/about.css
similarity index 94%
rename from static/assets/css/about.css
rename to static/assets/css/sections/about.css
index 96ce207..1bcdcfa 100644
--- a/static/assets/css/about.css
+++ b/static/assets/css/sections/about.css
@@ -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) {
+}
diff --git a/static/assets/css/achievements.css b/static/assets/css/sections/achievements.css
similarity index 85%
rename from static/assets/css/achievements.css
rename to static/assets/css/sections/achievements.css
index 083ea74..f0a5b76 100644
--- a/static/assets/css/achievements.css
+++ b/static/assets/css/sections/achievements.css
@@ -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) {
+}
diff --git a/static/assets/css/experiences.css b/static/assets/css/sections/experiences.css
similarity index 90%
rename from static/assets/css/experiences.css
rename to static/assets/css/sections/experiences.css
index 977a28e..43b2e32 100644
--- a/static/assets/css/experiences.css
+++ b/static/assets/css/sections/experiences.css
@@ -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%;
diff --git a/static/assets/css/home.css b/static/assets/css/sections/home.css
similarity index 82%
rename from static/assets/css/home.css
rename to static/assets/css/sections/home.css
index 78c0373..5d3d5c0 100644
--- a/static/assets/css/home.css
+++ b/static/assets/css/sections/home.css
@@ -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) {
+}
diff --git a/static/assets/css/sections/projects.css b/static/assets/css/sections/projects.css
new file mode 100644
index 0000000..13359ba
--- /dev/null
+++ b/static/assets/css/sections/projects.css
@@ -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) {
+}
diff --git a/static/assets/css/sections/recent-posts.css b/static/assets/css/sections/recent-posts.css
new file mode 100644
index 0000000..bd6faed
--- /dev/null
+++ b/static/assets/css/sections/recent-posts.css
@@ -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) {
+}
diff --git a/static/assets/css/skills.css b/static/assets/css/sections/skills.css
similarity index 64%
rename from static/assets/css/skills.css
rename to static/assets/css/sections/skills.css
index 532d8ea..2e43d6c 100644
--- a/static/assets/css/skills.css
+++ b/static/assets/css/sections/skills.css
@@ -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) {
+}
diff --git a/static/assets/css/single.css b/static/assets/css/single.css
index 747684d..fce8afe 100644
--- a/static/assets/css/single.css
+++ b/static/assets/css/single.css
@@ -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) {
+}
diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index d9209ef..3776d67 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -1,2 +1,46 @@
-/* Add custom css styling here to override the theme */
-
\ No newline at end of file
+/* 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) {
+}
diff --git a/static/assets/js/home.js b/static/assets/js/home.js
index cf800d2..5ad0bf2 100644
--- a/static/assets/js/home.js
+++ b/static/assets/js/home.js
@@ -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);
diff --git a/static/assets/js/list.js b/static/assets/js/list.js
index 5ca2b52..2cfafc3 100644
--- a/static/assets/js/list.js
+++ b/static/assets/js/list.js
@@ -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('
');
- 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);
-}
diff --git a/static/assets/js/main.js b/static/assets/js/main.js
new file mode 100644
index 0000000..d825d32
--- /dev/null
+++ b/static/assets/js/main.js
@@ -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");
+ }
+}
+
diff --git a/static/assets/js/single.js b/static/assets/js/single.js
index 31c8ec2..0699dd2 100644
--- a/static/assets/js/single.js
+++ b/static/assets/js/single.js
@@ -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);