{{ .Page.Content }} diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html index e313d027d..4d2e9f86a 100644 --- a/layouts/partials/cards/post.html +++ b/layouts/partials/cards/post.html @@ -7,18 +7,11 @@
{{ .Title }}

{{ .Summary }}

-
-
{{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }} -
-
    - {{ range .Params.tags }} - {{ $url:= printf "tags/%s/" . }} -
  • {{ . }}
    • - {{ end }} -
-
+ {{ partial "misc/tags.html" .Params.tags }} {{ end }} +
+
{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }} - -
-
- Card image cap -
-
-
{{ .Title }}
-

{{ .Summary }}

-
-
- {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }} -
- -
- {{ end }} - {{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }} - {{ i18n "read" }} -
-
- -
diff --git a/layouts/partials/misc/tags.html b/layouts/partials/misc/tags.html new file mode 100644 index 000000000..166fde563 --- /dev/null +++ b/layouts/partials/misc/tags.html @@ -0,0 +1,8 @@ +
+
    + {{ range . }} + {{ $url:= printf "tags/%s/" . }} +
  • {{ . }}
    • + {{ end }} +
+
diff --git a/layouts/partials/sections/recent-posts.html b/layouts/partials/sections/recent-posts.html index bb1bc40a0..87792b48f 100644 --- a/layouts/partials/sections/recent-posts.html +++ b/layouts/partials/sections/recent-posts.html @@ -20,7 +20,7 @@

{{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }} - {{ partial "cards/recent-post.html" . }} + {{ partial "cards/post.html" . }} {{ end }}
diff --git a/package.hugo.json b/package.hugo.json index c000e5245..3ae562b4e 100644 --- a/package.hugo.json +++ b/package.hugo.json @@ -43,6 +43,7 @@ "mark.js": "^8.11.1", "mermaid": "^9.2.1", "plyr": "^3.7.2", - "popper.js": "^1.16.1" + "popper.js": "^1.16.1", + "include-media": "^1.4.10" } } From 6eb8bf43ddaa17eba0176aab72aa83c51e1a9e2b Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Thu, 3 Aug 2023 13:34:12 +0600 Subject: [PATCH 02/17] Refactor about section Signed-off-by: hossainemruz --- assets/styles/components/buttons.scss | 53 ++ assets/styles/components/cards.scss | 59 +- assets/styles/layouts/list.scss | 8 +- assets/styles/layouts/main.scss | 103 +--- assets/styles/sections/about.scss | 663 +++++++++++------------ assets/styles/sections/recent-posts.scss | 11 +- assets/styles/variables.scss | 1 + exampleSite/package-lock.json | 13 + exampleSite/package.hugo.json | 4 + exampleSite/package.json | 10 + layouts/partials/misc/badge.html | 2 +- 11 files changed, 454 insertions(+), 473 deletions(-) create mode 100644 exampleSite/package-lock.json create mode 100644 exampleSite/package.hugo.json create mode 100644 exampleSite/package.json diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss index ff723ca2d..689e122e3 100644 --- a/assets/styles/components/buttons.scss +++ b/assets/styles/components/buttons.scss @@ -1,3 +1,56 @@ +.btn-dark { + background-color: #3c4858 !important; + border-color: #3c4858 !important; + color: #e5e9f2 !important; + transition: all 0.3s ease-out !important; + + &:hover, + &:focus { + background-color: #248aaa !important; + border-color: #248aaa !important; + transition: all 0.3s ease-out !important; + } +} + +.btn-info { + background-color: #248aaa !important; + color: #e5e9f2 !important; + + &:hover, + &:focus { + background-color: #2098d1 !important; + color: #e5e9f2 !important; + } +} + +.btn-outline-info { + color: #2098d1 !important; + border-color: #2098d1 !important; + + &:hover, + &:focus { + background-color: #2098d1 !important; + color: #e5e9f2 !important; + } +} + +.btn-link { + color: #248aaa; + + &:hover, + &:focus { + color: #207089; + } +} + +.nav-button { + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; + color: #8392a5; +} + + .tags { text-align: left; diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss index b493a1fa1..d1363e229 100644 --- a/assets/styles/components/cards.scss +++ b/assets/styles/components/cards.scss @@ -1,5 +1,43 @@ +.card { + box-shadow: none; + transition: all 0.3s ease-out; + overflow: hidden; + + &:hover,&:focus { + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + border: 1px solid #fff; + transition: all 0.3s ease-out; + } + + .card-head{ + height: 172px; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .card-body { + text-align: justify; + } + + .card-img-top { + transition: all 0.3s ease-out !important; + } + + .card-img-sm { + width: 32px; + height: 32px; + } + + .card-img-xs { + width: 24px; + height: 24px; + } +} + .post-card { - width: calc(100% / 3); + width: 24rem; display: inline-flex; .post-card-link { @@ -9,35 +47,16 @@ .card { margin: 5px; position: relative; - box-shadow: none; - transition: all 0.3s ease-out; - overflow: hidden; &:hover, &:focus { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; - transition: all 0.3s ease-out; - .card-img-top { transform: scale(1.2); transition: all 0.3s ease-out; } } - .card-head { - height: 172px; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - - .card-img-top { - transition: all 0.3s ease-out !important; - } - } .card-body { - text-align: justify; padding: 1.25rem !important; padding-bottom: 0 !important; diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss index da1758e2d..4e3b18e1b 100644 --- a/assets/styles/layouts/list.scss +++ b/assets/styles/layouts/list.scss @@ -166,24 +166,24 @@ body.kind-page { } } - @include media('<=small') { + @include media('=medium') { + @include media('>=medium','=large') { + @include media('>=large','=very-large') { + @include media('>=very-large','=medium','=large','=very-large','=extra-large') { +} /* Large screens such as TV */ @media only screen and (min-width: 1824px) { diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss index ee292459e..201e50021 100644 --- a/assets/styles/sections/about.scss +++ b/assets/styles/sections/about.scss @@ -1,20 +1,20 @@ -#about { +.about-section { .social-link { list-style: none; padding: 0.2rem; - } - - .social-link a { - font-size: 1.5rem; - color: #3c4858; - padding: 0.5rem; - } - - .social-link a:hover { - color: #248aaa; - transition: all 0.3s ease-in; - } - + + a { + font-size: 1.5rem; + color: #3c4858; + padding: 0.5rem; + + &:hover { + color: #248aaa; + transition: all 0.3s ease-in; + } + } + } + .circular-progress { width: 150px; height: 150px; @@ -23,365 +23,330 @@ margin: 0 auto; box-shadow: none; position: relative; - } - - .circular-progress:after { - content: ""; - width: 100%; - height: 100%; - border-radius: 50%; - border: 12px solid #f9fafc; - position: absolute; - top: 0; - left: 0; - } - - .circular-progress > span { - width: 50%; - height: 100%; - overflow: hidden; - position: absolute; - top: 0; - z-index: 1; - } - - .circular-progress .circular-progress-left { - left: 0; - } - - .circular-progress .circular-progress-bar { - width: 100%; - height: 100%; - background: none; - border-width: 12px; - border-style: solid; - position: absolute; - top: 0; - } - - .circular-progress .circular-progress-left .circular-progress-bar { - left: 100%; - border-top-right-radius: 80px; - border-bottom-right-radius: 80px; - border-left: 0; - transform-origin: center left; - } - - .circular-progress .circular-progress-right { - right: 0; - } - - .circular-progress .circular-progress-right .circular-progress-bar { - left: -100%; - border-top-left-radius: 80px; - border-bottom-left-radius: 80px; - border-right: 0; - transform-origin: center right; - animation: circular-loading-1 1.8s linear forwards; - } - - .circular-progress .circular-progress-value { - width: 90%; - height: 90%; - padding: 1rem; - border-radius: 50%; - background: #3c4858; - font-size: 1rem; - color: #f9fafc; - line-height: initial; - text-align: center; - position: absolute; - top: 5%; - left: 5%; - display: flex; - justify-content: center; - align-items: center; - } - - .circular-progress.blue .circular-progress-bar { - border-color: #048dff; - } - - .circular-progress.yellow .circular-progress-bar { - border-color: #eebb4d; - } - - .circular-progress.pink .circular-progress-bar { - border-color: #ed63d2; - } - - .circular-progress.green .circular-progress-bar { - border-color: #2dca73; - } - - .circular-progress.sky .circular-progress-bar { - border-color: #00c9e3; - } - - .circular-progress.orange .circular-progress-bar { - border-color: #ff7c7c; - } - - .circular-progress-percentage-50 { - animation: circular-loading-50 0s linear forwards 1.8s; - } - - .circular-progress-percentage-55 { - animation: circular-loading-55 0.18s linear forwards 1.8s; - } - - .circular-progress-percentage-60 { - animation: circular-loading-60 0.36s linear forwards 1.8s; - } - - .circular-progress-percentage-65 { - animation: circular-loading-65 0.54s linear forwards 1.8s; - } - - .circular-progress-percentage-70 { - animation: circular-loading-70 0.72s linear forwards 1.8s; - } - - .circular-progress-percentage-75 { - animation: circular-loading-75 0.9s linear forwards 1.8s; - } - - .circular-progress-percentage-80 { - animation: circular-loading-80 1.08s linear forwards 1.8s; - } - - .circular-progress-percentage-85 { - animation: circular-loading-85 1.26s linear forwards 1.8s; - } - - .circular-progress-percentage-90 { - animation: circular-loading-90 1.44s linear forwards 1.8s; - } - - .circular-progress-percentage-95 { - animation: circular-loading-95 1.62s linear forwards 1.8s; - } - - .circular-progress-percentage-100 { - animation: circular-loading-100 1.8s linear forwards 1.8s; - } - - @keyframes circular-loading-50 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(0deg); - } - } - - @keyframes circular-loading-55 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(18deg); - } - } - - @keyframes circular-loading-60 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(36deg); - } - } - - @keyframes circular-loading-65 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(54deg); - } - } - - @keyframes circular-loading-70 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(72deg); - } - } - - @keyframes circular-loading-75 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(90deg); - } - } - - @keyframes circular-loading-80 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(108deg); - } - } - - @keyframes circular-loading-85 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(126deg); - } - } - - @keyframes circular-loading-90 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(144deg); - } - } - - @keyframes circular-loading-95 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(162deg); - } - } - - @keyframes circular-loading-100 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(180deg); - } - } - - @keyframes circular-loading-1 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(180deg); - } - } - - @keyframes circular-loading-2 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(144deg); - } - } - - @keyframes circular-loading-3 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(90deg); - } - } - - @keyframes circular-loading-4 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(36deg); - } - } - - @keyframes circular-loading-5 { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(126deg); - } - } - - @media only screen and (max-width: 990px) { + + &::after { + content: ''; + width: 100%; + height: 100%; + border-radius: 50%; + border: 12px solid #f9fafc; + position: absolute; + top: 0; + left: 0; + } + span { + width: 50%; + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + z-index: 1; + } + .circular-progress-left { + left: 0; + } + .circular-progress-bar { + width: 100%; + height: 100%; + background: none; + border-width: 12px; + border-style: solid; + position: absolute; + top: 0; + } + .circular-progress-left .circular-progress-bar { + left: 100%; + border-top-right-radius: 80px; + border-bottom-right-radius: 80px; + border-left: 0; + transform-origin: center left; + } + .circular-progress-right { + right: 0; + } + .circular-progress-right .circular-progress-bar { + left: -100%; + border-top-left-radius: 80px; + border-bottom-left-radius: 80px; + border-right: 0; + transform-origin: center right; + animation: circular-loading-1 1.8s linear forwards; + } + .circular-progress-value { + width: 90%; + height: 90%; + padding: 1rem; + border-radius: 50%; + background: #3c4858; + font-size: 1rem; + color: #f9fafc; + line-height: initial; + text-align: center; + position: absolute; + top: 5%; + left: 5%; + display: flex; + justify-content: center; + align-items: center; + } + &.blue .circular-progress-bar { + border-color: #048dff; + } + &.yellow .circular-progress-bar { + border-color: #eebb4d; + } + &.pink .circular-progress-bar { + border-color: #ed63d2; + } + &.green .circular-progress-bar { + border-color: #2dca73; + } + &.sky .circular-progress-bar { + border-color: #00c9e3; + } + &.orange .circular-progress-bar { + border-color: #ff7c7c; + } + .circular-progress-percentage-50 { + animation: circular-loading-50 0s linear forwards 1.8s; + } + + .circular-progress-percentage-55 { + animation: circular-loading-55 0.18s linear forwards 1.8s; + } + + .circular-progress-percentage-60 { + animation: circular-loading-60 0.36s linear forwards 1.8s; + } + + .circular-progress-percentage-65 { + animation: circular-loading-65 0.54s linear forwards 1.8s; + } + + .circular-progress-percentage-70 { + animation: circular-loading-70 0.72s linear forwards 1.8s; + } + + .circular-progress-percentage-75 { + animation: circular-loading-75 0.9s linear forwards 1.8s; + } + + .circular-progress-percentage-80 { + animation: circular-loading-80 1.08s linear forwards 1.8s; + } + + .circular-progress-percentage-85 { + animation: circular-loading-85 1.26s linear forwards 1.8s; + } + + .circular-progress-percentage-90 { + animation: circular-loading-90 1.44s linear forwards 1.8s; + } + + .circular-progress-percentage-95 { + animation: circular-loading-95 1.62s linear forwards 1.8s; + } + + .circular-progress-percentage-100 { + animation: circular-loading-100 1.8s linear forwards 1.8s; + } + + @keyframes circular-loading-50 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(0deg); + } + } + + @keyframes circular-loading-55 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(18deg); + } + } + + @keyframes circular-loading-60 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(36deg); + } + } + + @keyframes circular-loading-65 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(54deg); + } + } + + @keyframes circular-loading-70 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(72deg); + } + } + + @keyframes circular-loading-75 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(90deg); + } + } + + @keyframes circular-loading-80 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(108deg); + } + } + + @keyframes circular-loading-85 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(126deg); + } + } + + @keyframes circular-loading-90 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(144deg); + } + } + + @keyframes circular-loading-95 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(162deg); + } + } + + @keyframes circular-loading-100 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(180deg); + } + } + + @keyframes circular-loading-1 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(180deg); + } + } + + @keyframes circular-loading-2 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(144deg); + } + } + + @keyframes circular-loading-3 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(90deg); + } + } + + @keyframes circular-loading-4 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(36deg); + } + } + + @keyframes circular-loading-5 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(126deg); + } + } + } + + @include media('<=large') { .circular-progress { margin-bottom: 20px; } } - - /* ============= 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) { + + @include media('<=medium') { .about-section.container { max-width: 100%; } - + .circular-progress { width: 135px; height: 135px; } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + @include media('<=small') { .circular-progress { width: 150px; height: 150px; } - + .circular-progress .circular-progress-value { font-size: 1rem; } } - - /* 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) { + @include media('<=tiny') { .col-6 { flex: auto; max-width: 100%; } - + .social-link { flex-wrap: wrap; } - } -} \ No newline at end of file + .certificate-badge { + padding-left: 2rem; + padding-right: 2rem; + } + .circular-progress { + width: 200px; + height: 200px; + + .circular-progress-left .circular-progress-bar { + border-top-right-radius: 100px; + border-bottom-right-radius: 100px; + } + .circular-progress-right .circular-progress-bar { + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; + } + } + } +} diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss index e8bb92b59..dde264a00 100644 --- a/assets/styles/sections/recent-posts.scss +++ b/assets/styles/sections/recent-posts.scss @@ -8,14 +8,15 @@ padding-bottom: 55px; display: block; } - @include media('<=small') { + + @include media('=medium','=large') { .post-card { width: calc(100% / 3); } } - @include media('<=very-large') { - } - @include media('<=extra-large') { - } } diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss index cd9e12fc6..6a6dda587 100644 --- a/assets/styles/variables.scss +++ b/assets/styles/variables.scss @@ -1,4 +1,5 @@ $breakpoints: ( + tiny: 320px, small: 640px, medium: 768px, large: 1024px, diff --git a/exampleSite/package-lock.json b/exampleSite/package-lock.json new file mode 100644 index 000000000..e03e0b1ba --- /dev/null +++ b/exampleSite/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "exampleSite", + "version": "0.1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "exampleSite", + "version": "0.1.0", + "devDependencies": {} + } + } +} diff --git a/exampleSite/package.hugo.json b/exampleSite/package.hugo.json new file mode 100644 index 000000000..a0ab5218f --- /dev/null +++ b/exampleSite/package.hugo.json @@ -0,0 +1,4 @@ +{ + "name": "exampleSite", + "version": "0.1.0" +} \ No newline at end of file diff --git a/exampleSite/package.json b/exampleSite/package.json new file mode 100644 index 000000000..37bcf1690 --- /dev/null +++ b/exampleSite/package.json @@ -0,0 +1,10 @@ +{ + "comments": { + "dependencies": {}, + "devDependencies": {} + }, + "dependencies": {}, + "devDependencies": {}, + "name": "exampleSite", + "version": "0.1.0" +} diff --git a/layouts/partials/misc/badge.html b/layouts/partials/misc/badge.html index e78b42c7e..cfd8eeb78 100644 --- a/layouts/partials/misc/badge.html +++ b/layouts/partials/misc/badge.html @@ -1,7 +1,7 @@
{{ if eq .type "certification" }} {{/* Verifiable certificate badge from https://www.credly.com */}} -
+
{{ .name }} From 81cdb970fcbf446e81115599b4c8f14530838f90 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Fri, 4 Aug 2023 08:02:29 +0600 Subject: [PATCH 03/17] Refactor CSS for experiences section Signed-off-by: hossainemruz --- assets/styles/sections/experiences.scss | 234 +++++++++--------------- assets/styles/sections/skills.scss | 99 +++------- layouts/partials/cards/skill.html | 2 +- 3 files changed, 118 insertions(+), 217 deletions(-) diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss index 1d1afef96..1df94fa63 100644 --- a/assets/styles/sections/experiences.scss +++ b/assets/styles/sections/experiences.scss @@ -1,29 +1,24 @@ .experiences-section { padding-bottom: 1rem; - .timeline { - margin-top: 1.5rem !important; - } - - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - + ul { padding-left: 1rem; + & > li { + margin-left: 0; + color: #3c4858; + } } - - ul > li { - margin-left: 0; - color: #3c4858; - } - + .designation { font-weight: 600; } - + .circle { padding: 13px 20px; border-radius: 50%; @@ -32,140 +27,93 @@ max-height: 50px; z-index: 2; } - - .timeline .vertical-line { - align-self: stretch; - } - - .timeline .vertical-line::after { - content: ""; - position: absolute; - border-left: 3px solid #248aaa; - z-index: 1; - height: 100%; - left: 50%; - } - - .timeline .vertical-line:nth-child(even)::after { - left: calc(50% - 3px) !important; - } - - .timeline .horizontal-line div { - padding: 0; - height: 40px; - } - - .timeline .horizontal-line hr { - border-top: 3px solid #248aaa; - margin: 0; - top: 17px; - position: relative; - } - - .timeline .horizontal-line .timeline-side-div { - display: flex; - overflow: hidden; - } - - .timeline .horizontal-line .corner { - border: 3px solid #248aaa; - width: 100%; - position: relative; - border-radius: 15px; - } - - .timeline .row:nth-child(2n) div:nth-child(1) .corner { - left: 50%; - top: -50%; - } - - .timeline .row:nth-child(2n) div:nth-child(3) .corner { - left: -50%; - top: calc(50% - 3px); - } - - .timeline .row:nth-child(4n) div:nth-child(1) .corner { - left: 50%; - top: calc(50% - 3px); - } - - .timeline .row:nth-child(4n) div:nth-child(3) .corner { - left: -50%; - top: -50%; - } - - /* ============= 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) { - .container { - max-width: 100%; + + .timeline { + margin-top: 1.5rem !important; + + .vertical-line { + align-self: stretch; + + &::after { + content: ''; + position: absolute; + border-left: 3px solid #248aaa; + z-index: 1; + height: 100%; + left: 50%; + } + &:nth-child(even)::after { + left: calc(50% - 3px) !important; + } } - } - - /* 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) { - .timeline .row:nth-child(4n) div:nth-child(3) .corner { - left: -55%; - top: -50%; + .horizontal-line { + div { + padding: 0; + height: 40px; + } + hr { + border-top: 3px solid #248aaa; + margin: 0; + top: 17px; + position: relative; + } + .timeline-side-div { + display: flex; + overflow: hidden; + } + .corner { + border: 3px solid #248aaa; + width: 100%; + position: relative; + border-radius: 15px; + } } - - .timeline .row:nth-child(2n) div:nth-child(1) .corner { - left: 55%; - top: -50%; + .row { + &:nth-child(2n) { + div { + &:nth-child(1) .corner { + left: 50%; + top: -50%; + } + &:nth-child(3) .corner { + left: -50%; + top: calc(50% - 3px); + } + } + } + &:nth-child(4n) { + div { + &:nth-child(1) .corner { + left: 50%; + top: calc(50% - 3px); + } + &:nth-child(3) .corner { + left: -50%; + top: -50%; + } + } + } } } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - .timeline .row:nth-child(4n) div:nth-child(3) .corner { - left: -60%; - top: -50%; - } - .timeline .row:nth-child(2n) div:nth-child(1) .corner { - left: 60%; - top: -50%; + @include media('<=medium') { + .container { + max-width: 100%; } } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - .timeline .row:nth-child(4n) div:nth-child(3) .corner { - left: -64%; - top: -50%; - } - .timeline .row:nth-child(2n) div:nth-child(1) .corner { - left: 64%; - top: -50%; + @include media('<=small') { + .container { + padding-left: 0px; + padding-right: 0px; } - } + .timeline { + .vertical-line { + visibility: hidden; + } + .horizontal-line { + visibility: hidden; + } + } + } } diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss index a2176dc99..1310668a8 100644 --- a/assets/styles/sections/skills.scss +++ b/assets/styles/sections/skills.scss @@ -1,87 +1,40 @@ .skills-section { - .card .card-head { - background-color: #f9fafc; - height: -moz-fit-content; - height: fit-content; - padding: 0.7rem; - padding-bottom: 0rem; - border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125); - } - - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; - } - - .skill-card-link { - text-decoration: none; - } - - .card .card-img-xs { - margin-right: 0.5rem; - margin-bottom: 0.75rem; - } - .card { margin-top: 0.5rem; margin-bottom: 0.5rem; height: 100%; + + .card-head { + background-color: #f9fafc; + height: -moz-fit-content; + height: fit-content; + padding: 0.7rem; + padding-bottom: 0rem; + border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125); + } + + .card-body { + padding-top: 0.2rem; + padding-left: 0.7rem; + } + .card-img-xs { + margin-right: 0.5rem; + margin-bottom: 0.75rem; + } } - - .card .card-body { - padding-top: 0.2rem; - padding-left: 0.7rem; - } - - /* ============= 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) { + + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { + + @include media('<=medium') { padding-left: 0; padding-right: 0; - + .container { max-width: 95%; } } - - /* 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/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html index c8e6e1c1e..86f47c973 100644 --- a/layouts/partials/cards/skill.html +++ b/layouts/partials/cards/skill.html @@ -1,5 +1,5 @@
- +
{{ if .logo }} From a0a50736de5c68e45b7ebe90c3746103d83cdb0f Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Sun, 6 Aug 2023 23:36:18 +0600 Subject: [PATCH 04/17] Update education section Signed-off-by: hossainemruz --- assets/styles/sections/education.scss | 315 ++++++++++++-------------- 1 file changed, 144 insertions(+), 171 deletions(-) diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss index 2c841324c..a7683c0e8 100644 --- a/assets/styles/sections/education.scss +++ b/assets/styles/sections/education.scss @@ -1,203 +1,176 @@ .education-section { - .education-info-table { - width: 100%; - border: none; - background: none; - } - - .education-info-table tr:hover { - background: none; - } - - .education-info-table tr, - .education-info-table th, - .education-info-table td { - border: none; - padding: 0; - background: none; - } - - .timeframe { - color: #8392a5; - text-align: right; - } - - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; display: block; } - - .icon { - width: 2rem; - padding-left: 0; - padding-right: 0; - position: relative; - } - - .icon .hline { - position: absolute; - left: 1rem; - top: 0; - background-color: #248aaa; - height: 100%; - width: 2px; - } - - .education-info-table tr:first-child .hline { - height: 65%; - top: auto; - } - - .education-info-table tr:last-child .hline { - height: 50%; - } - - .icon-holder { - background-color: #248aaa; - border-radius: 50%; - height: 2rem; - width: 2rem; - padding: 0.2rem; - text-align: center; - color: #e5e9f2; - position: relative; - } - - .line { - width: 5%; - padding-left: 0; - padding-right: 0; - } - - .line div { - height: 2px; - /* width: 100%; */ - margin-right: -1px; - background-color: #248aaa; - } - - .degree-info { - padding: 1rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - border-left: 2px solid #248aaa; - border-top: 1px solid #c0ccda; - border-bottom: 1px solid #c0ccda; - border-right: 1px solid #c0ccda; - border-radius: 5px; - } - - .degree-info h5 { - margin-bottom: 0.3rem; + + .card { + &:hover, + &:focus { + border-left: 2px solid #248aaa; + } } - - .taken-courses table { - margin-left: 1rem; + + .education-info-table { width: 100%; - transition: all 0.3s ease-out; - background: none; border: none; - } - - .taken-courses tr { - height: auto !important; - } - - .taken-courses tr, - .taken-courses td, - .taken-courses th { background: none; - border: none; - color: #212529; - } - .taken-courses th.course-name-header{ - width: 50%; - } - .taken-courses .hidden-course { - display: none; - transition: all 1s ease-out; - } - - .taken-courses ul { - margin-bottom: 0; + + .icon { + width: 2rem; + padding-left: 0; + padding-right: 0; + position: relative; + + .hline { + position: absolute; + left: 1rem; + top: 0; + background-color: #248aaa; + height: 100%; + width: 2px; + } + + .icon-holder { + background-color: #248aaa; + border-radius: 50%; + height: 2rem; + width: 2rem; + padding: 0.2rem; + text-align: center; + color: #e5e9f2; + position: relative; + } + } + + tr, + th, + td { + border: none; + padding: 0; + background: none; + } + + tr { + &:hover { + background: none; + } + &:first-child { + .hline { + height: 65%; + top: auto; + } + } + &:last-child { + .hline { + height: 50%; + } + } + + .line { + width: 5%; + padding-left: 0; + padding-right: 0; + + div { + height: 2px; + /* width: 100%; */ + margin-right: -1px; + background-color: #248aaa; + } + } + + .details { + .degree-info { + padding: 1rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-left: 2px solid #248aaa; + border-top: 1px solid #c0ccda; + border-bottom: 1px solid #c0ccda; + border-right: 1px solid #c0ccda; + border-radius: 5px; + + h5 { + margin-bottom: 0.3rem; + } + + .timeframe { + color: #8392a5; + text-align: right; + } + + .taken-courses { + table { + margin-left: 1rem; + width: 100%; + transition: all 0.3s ease-out; + background: none; + border: none; + + tr, + td, + th { + background: none; + border: none; + color: #212529; + } + + tr { + height: auto !important; + } + th { + .course-name-header { + width: 50%; + } + } + .hidden-course { + display: none; + transition: all 1s ease-out; + } + ul { + margin-bottom: 0; + } + } + } + } + } + } } .hidden { display: none; } - - /*============ Education Alter Template =============*/ - .education-alt .degree-info { - border-right: 2px solid #248aaa; - } - - /* ============= 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) { + + @include media('<=large') { .container { padding-left: 0; } } - - /* 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) { + + @include media('<=small') { padding-left: 0.5rem; padding-right: 0.5rem; .container { padding-right: 0; } - + .icon { display: none; } + .line { display: none; } + .timeframe { text-align: left; } } - - /* iPhoneX, iPhone 6,7,8 */ - - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - - @media only screen and (max-width: 360px) { - } - - /* iPhone 5 or before */ - - @media only screen and (max-width: 320px) { - } -} \ No newline at end of file +} + +.education-alt .degree-info { + border-right: 2px solid #248aaa; +} From 9bfbcfca44219d35f4a0e78fbd2e0c419c2fdc10 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Mon, 7 Aug 2023 00:09:39 +0600 Subject: [PATCH 05/17] Update projects section Signed-off-by: hossainemruz --- assets/styles/components/cards.scss | 12 ++- assets/styles/sections/projects.scss | 133 +++++++++------------------ assets/styles/sections/skills.scss | 15 +-- 3 files changed, 53 insertions(+), 107 deletions(-) diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss index d1363e229..e14b4b0e0 100644 --- a/assets/styles/components/cards.scss +++ b/assets/styles/components/cards.scss @@ -3,17 +3,16 @@ transition: all 0.3s ease-out; overflow: hidden; - &:hover,&:focus { + &:hover, + &:focus { box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); border: 1px solid #fff; transition: all 0.3s ease-out; } - .card-head{ + .card-head { height: 172px; display: flex; - justify-content: center; - align-items: center; overflow: hidden; } @@ -34,6 +33,10 @@ width: 24px; height: 24px; } + + .card-footer { + background: #fff; + } } .post-card { @@ -72,7 +75,6 @@ } } .card-footer { - background: #fff; margin-top: auto; span { diff --git a/assets/styles/sections/projects.scss b/assets/styles/sections/projects.scss index de5a614a6..2724bac29 100644 --- a/assets/styles/sections/projects.scss +++ b/assets/styles/sections/projects.scss @@ -1,95 +1,59 @@ .projects-section { - .card .card-header { - background-color: #f9fafc; - padding: 0.7rem; - padding-bottom: 0rem; - text-decoration: none; - } - - .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; - } - - .card .card-body { - padding: 0.7rem; - } - - .card .card-header .sub-title { - color: #8392a5; - margin-top: 0.4rem; + .card { + .card-header { + background-color: #f9fafc; + padding: 0.7rem; + padding-bottom: 0rem; + text-decoration: none; + + .card-img-xs { + margin-right: 0.5rem; + } + .sub-title { + color: #8392a5; + margin-top: 0.4rem; + + span { + &:nth-child(1) { + float: left; + } + &:nth-child(2) { + float: right; + } + } + } + } + + .card-body { + padding: 0.7rem; + } } - + .filtr-projects { padding: 1rem !important; } - + .project-card-footer { display: flex; } - + .project-tags-holder { width: 70%; } - + .project-btn-holder { width: 30%; display: flex; justify-content: flex-end; flex-direction: column; - } - - .project-btn-holder span { - justify-content: flex-end; - display: flex; - } - - /* ============= 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) { - padding-left: 0; - padding-right: 0; - width: 100%; - .container { - max-width: 100%; - } - .filtr-projects { - padding: 0; - } - .filtr-item { - padding-left: 0.2rem; - padding-right: 0.2rem; + span { + display: flex; + justify-content: flex-end; } } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { + + @include media('<=large') { padding-left: 0; padding-right: 0; width: 100%; @@ -101,34 +65,19 @@ padding: 0; } .filtr-item { + flex: 50%; 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) { + + @include media('<=small') { .btn { margin-top: 0.3125rem; } .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) { - } -} \ No newline at end of file +} diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss index 1310668a8..42d4fce8d 100644 --- a/assets/styles/sections/skills.scss +++ b/assets/styles/sections/skills.scss @@ -11,22 +11,17 @@ padding: 0.7rem; padding-bottom: 0rem; border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125); + + .card-img-xs { + margin-right: 0.5rem; + margin-bottom: 0.75rem; + } } .card-body { padding-top: 0.2rem; padding-left: 0.7rem; } - .card-img-xs { - margin-right: 0.5rem; - margin-bottom: 0.75rem; - } - } - - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; } @include media('<=medium') { From b36d258104bf2ecc6655dd1ab7187b218144cc7e Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Mon, 7 Aug 2023 01:22:21 +0600 Subject: [PATCH 06/17] Update publication + accomplishment section Signed-off-by: hossainemruz --- assets/styles/sections/accomplishments.scss | 118 +++++------- assets/styles/sections/publications.scss | 187 ++++++++------------ 2 files changed, 115 insertions(+), 190 deletions(-) diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss index 77449f74e..b922cae37 100644 --- a/assets/styles/sections/accomplishments.scss +++ b/assets/styles/sections/accomplishments.scss @@ -1,97 +1,59 @@ .accomplishments-section { - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - + .card { background: #fff; border-top: 2px solid #248aaa; height: 100%; + + &:hover, + &:focus { + border-top: 2px solid #248aaa; + } + + .card-header { + background: none; + border: none; + + .sub-title { + color: #8392a5; + margin-top: 0.4rem; + } + } + + .card-body { + padding: 0; + padding-left: 1rem; + padding-right: 1rem; + } + + .card-footer { + background: #fff; + border: none; + padding: 0; + padding-left: 0.7rem; + padding-bottom: 0.3rem; + } } - .card .card-header { - background: none; - border: none; - } - - .card .card-header .sub-title { - color: #8392a5; - margin-top: 0.4rem; - } - - .card .sub-title :nth-child(2) { - float: none !important; - } - - .card .card-body { - padding: 0; - padding-left: 1rem; - padding-right: 1rem; - } - - .card .card-footer { - background: #fff; - border: none; - padding: 0; - padding-left: 0.7rem; - padding-bottom: 0.3rem; - } - - /* ============= 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) { + + @include media('<=large') { width: 100%; padding: 0; padding-left: 0.2rem; padding-right: 0.2rem; + margin-top: 2rem; .container { max-width: 100%; } } - - /* 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) { + + @include media('<=small') { flex: 100%; max-width: 100%; - margin-top: 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) { - } -} \ No newline at end of file +} diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss index 85baedcf8..675ceb292 100644 --- a/assets/styles/sections/publications.scss +++ b/assets/styles/sections/publications.scss @@ -1,82 +1,63 @@ .publications-section { - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - + .card { background: #fff; border-top: 2px solid #248aaa; + + &:hover, + &:focus { + border-top: 2px solid #248aaa; + } + + .card-header { + background: none; + border: none; + display: flex; + flex-direction: column; + + .sub-title { + color: #8392a5; + margin-top: 0.4rem; + + span:nth-child(2) { + float: right !important; + } + } + } + + .card-body { + padding: 0; + padding-left: 1rem; + padding-right: 1rem; + } + + .card-footer { + background: #fff; + border: none; + padding: 0; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 0.3rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } } - .card .card-header { - background: none; - border: none; - display: flex; - flex-direction: column; - } - - .card .card-header .sub-title { - color: #8392a5; - margin-top: 0.4rem; - } - - .card .sub-title :nth-child(2) { - float: right !important; - } - - .card .card-body { - padding: 0; - padding-left: 1rem; - padding-right: 1rem; - } - - .card .card-footer { - background: #fff; - border: none; - padding: 0; - padding-left: 1rem; - padding-right: 1rem; - padding-bottom: 0.3rem; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - .card .card-footer .tags { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - } - .card .card-footer .tags .badge { - cursor: auto; - } - + .filtr-publications { padding: 1rem !important; } - - .btn-group{ + + .btn-group { justify-content: center; } - - /* ============= 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) { + + @include media('<=large') { padding-left: 0; padding-right: 0; width: 100%; @@ -84,66 +65,48 @@ .container { max-width: 100%; } - + .filtr-publications { padding: 0; } - + .pub-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) { - padding-left: 0; - padding-right: 0; - width: 100%; - .container { - max-width: 100%; - } - .filtr-publications { - padding: 0; - } + @include media('<=medium') { .pub-filtr-item { - padding-left: 0.2rem; - padding-right: 0.2rem; flex: 100%; } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { - .btn { - margin-top: 0.3125rem; - } + + @include media('<=small') { .pub-filtr-item { flex: 100%; max-width: 100%; } - .card .card-footer .tags { - flex: 100%; + .details-btn { + .btn { + margin-top: 0.5rem; + margin-left: auto; + } + } + + .card { + .card-footer { + padding-left: 0.5rem; + + .tags { + flex: 100%; + max-width: 100%; + + .btn { + margin-top: 0.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) { - } -} \ No newline at end of file +} From 3e20e2ffb2d1b9384542fc9a84b568098bff817b Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Thu, 21 Sep 2023 23:13:25 +0600 Subject: [PATCH 07/17] Update achievements section Signed-off-by: hossainemruz --- assets/styles/layouts/main.scss | 4 + assets/styles/sections/achievements.scss | 297 ++++++++++------------- 2 files changed, 129 insertions(+), 172 deletions(-) diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss index a3ea86b0c..8d3b253ac 100644 --- a/assets/styles/layouts/main.scss +++ b/assets/styles/layouts/main.scss @@ -105,6 +105,10 @@ img.right { margin-right: 3px; } +.hidden { + display: none !important; +} + /* ====== table ====== */ table { border-radius: 0.1rem; diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss index c82ca10f0..142162e55 100644 --- a/assets/styles/sections/achievements.scss +++ b/assets/styles/sections/achievements.scss @@ -2,179 +2,132 @@ .container { padding-top: 0.5rem; } - - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; - } - - #gallery .achievement-entry { - cursor: pointer; - margin-top: 5px; - margin-bottom: 5px; - margin-left: 7px; - margin-right: 7px; - z-index: 1; - background-color: #e5e9f2; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - position: relative; - overflow: hidden; - transition: all 0.3s ease-out; - } - - #gallery .achievement-entry:hover { - cursor: pointer; - z-index: 1; - transform: scale(1.1); - transition: all 0.3s ease-out; - z-index: 20000; - } - - #gallery .achievement-details { - cursor: pointer; - z-index: 1; - opacity: 1 !important; - transition: none !important; - transform: none !important; - } - - #gallery .img-type-1 { - height: 300px; - } - #gallery .img-type-2 { - height: 146px; - margin-bottom: 8px; - } - - #gallery .svg-inline--fa { - color: #8392a5; - background-color: rgba(0, 0, 0, 0.7); - padding: 10px; - font-size: 0rem; - opacity: 0; - } - - #gallery .achievement-entry:hover .svg-inline--fa { - opacity: 1; - font-size: 1rem; - transition: all 0.3s ease-out; - } - - #gallery .img-type-1 .svg-inline--fa { - margin-top: 135px; - } - #gallery .img-type-2 .svg-inline--fa { - margin-top: 50px; - } - - #gallery .achievement-details.img-type-1 .svg-inline--fa, - .achievement-details.img-type-2 .svg-inline--fa { - margin-top: 0px !important; - transition: none !important; - float: right; - } - - #gallery .achievement-entry .title { - color: #e5e9f2; - background-color: rgba(0, 0, 0, 0.7); - opacity: 0; - padding: 5px; - position: absolute; - bottom: 0px; - width: 100%; - margin-bottom: 0px; - bottom: -5px; - } - - #gallery .achievement-entry:hover .title { - opacity: 1; - bottom: 0px; - transition: bottom 0.3s ease-out; - } - - #gallery .caption { - background-color: rgba(0, 0, 0, 0.7); - bottom: 1rem; - left: 1rem; - color: #e5e9f2; - padding: 15px; - position: absolute; - transition: all 0.3s ease-out; - } - - #gallery .caption h4 { - color: #e5e9f2; - } - - #gallery .caption p { - font-size: 16px; - font-weight: 300; - color: #e5e9f2; - } - - .hidden { - display: none !important; - } - - #gallery .achievement-details { - height: 75vh !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) { - } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { - .container { - max-width: 100%; + + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; + } + + #gallery { + .achievement-entry { + margin-top: 5px; + margin-bottom: 5px; + margin-left: 7px; + margin-right: 7px; + z-index: 1; + background-color: #e5e9f2; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + position: relative; + overflow: hidden; + transition: all 0.3s ease-out; + + .title { + color: #e5e9f2; + background-color: rgba(0, 0, 0, 0.7); + opacity: 0; + padding: 5px; + position: absolute; + bottom: 0px; + width: 100%; + margin-bottom: 0px; + bottom: -5px; + } + + &:hover { + cursor: pointer; + transform: scale(1.1); + transition: all 0.3s ease-out; + z-index: 20000; + + .svg-inline--fa { + opacity: 1; + font-size: 1rem; + transition: all 0.3s ease-out; + } + + .title { + opacity: 1; + bottom: 0px; + transition: bottom 0.3s ease-out; + } + } } - .col-md-6 { - flex: 50%; - width: 50%; + + .achievement-details { + cursor: pointer; + z-index: 1; + height: 75vh !important; + opacity: 1 !important; + transition: none !important; + transform: none !important; + + .img-type-1 .svg-inline--fa, + .img-type-2 .svg-inline--fa { + margin-top: 0px !important; + transition: none !important; + float: right; + } } - } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { - #gallery .achievement-entry:hover { - transform: scale(1.05); + + .img-type-1 { + height: 300px; + + .svg-inline--fa { + margin-top: 135px; + } + } + .img-type-2 { + height: 146px; + margin-bottom: 8px; + + .svg-inline--fa { + margin-top: 50px; + } + } + + .svg-inline--fa { + color: #8392a5; + background-color: rgba(0, 0, 0, 0.7); + padding: 10px; + font-size: 0rem; + opacity: 0; + } + .caption { + background-color: rgba(0, 0, 0, 0.7); + bottom: 1rem; + left: 1rem; + color: #e5e9f2; + padding: 15px; + position: absolute; + transition: all 0.3s ease-out; + + h4 { + color: #e5e9f2; + } + p { + font-size: 16px; + font-weight: 300; + color: #e5e9f2; + } + } + + @include media('<=medium') { + .container { + max-width: 100%; + } + .col-md-6 { + flex: 50%; + width: 50%; + } + } + + @include media('<=small') { + #gallery .achievement-entry:hover { + 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) { - } -} \ No newline at end of file +} From a4224d74ea2b8c2c78b72342ecdd2456d2fd0f89 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Thu, 21 Sep 2023 23:26:01 +0600 Subject: [PATCH 08/17] Refactor footer CSS Signed-off-by: hossainemruz --- assets/styles/application.template.scss | 1 + assets/styles/layouts/main.scss | 70 ------------------------- assets/styles/sections/footer.scss | 63 ++++++++++++++++++++++ 3 files changed, 64 insertions(+), 70 deletions(-) create mode 100644 assets/styles/sections/footer.scss diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss index 42b2a9e05..fd4edb541 100644 --- a/assets/styles/application.template.scss +++ b/assets/styles/application.template.scss @@ -36,6 +36,7 @@ @import './sections/achievements'; @import './sections/accomplishments'; @import './sections/publications'; +@import './sections/footer'; // components diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss index 8d3b253ac..e9d39f6c4 100644 --- a/assets/styles/layouts/main.scss +++ b/assets/styles/layouts/main.scss @@ -263,76 +263,6 @@ mark { color: #f9fafc; } -/* --- FOOTER START --- */ - -.footer { - color: #8392a5 !important; - background-color: #1c2d41; - position: relative; - z-index: 9999; -} - -.footer h5 { - color: #c0ccda; -} -.footer a { - color: #8392a5; - transition: all 0.3s ease-out; -} - -.footer a:hover { - margin-left: 5px; - transition: all 0.3s ease-out; -} - -.footer ul { - list-style: none; - padding-left: 0; -} - -.footer li { - margin-top: 5px; -} - -.footer hr { - background-color: #8392a5; -} - -.footer p:first-child { - color: #c0ccda; -} - -.footer input { - background-color: #c0ccda; -} - -.footer input:focus { - background-color: #e5e9f2; -} - -.footer #disclaimer { - color: #8392a5 !important; - text-align: justify; -} -.footer #disclaimer > strong { - color: #c0ccda !important; -} - -.footer #theme { - color: #c0ccda; -} - -.footer #theme img { - width: 32px; -} - -.footer #hugo:hover { - margin-right: 5px; - transition: all 0.3s ease-out; -} - -/* --- FOOTER END ---- */ - /* ============= Media Query Template ======= */ @include media(' strong { + color: #c0ccda !important; + } + } + + #theme { + color: #c0ccda; + img { + width: 32px; + } + } + + #hugo:hover { + margin-right: 5px; + transition: all 0.3s ease-out; + } +} From efaeed42f6044eee88518bca918dbf1b945bf5b6 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Thu, 21 Sep 2023 23:55:37 +0600 Subject: [PATCH 09/17] Re-use section title adjustment css for top header Signed-off-by: hossainemruz --- assets/styles/sections/accomplishments.scss | 6 +----- assets/styles/sections/achievements.scss | 8 ++------ assets/styles/sections/education.scss | 6 +----- assets/styles/sections/experiences.scss | 8 ++------ assets/styles/sections/publications.scss | 6 +----- assets/styles/variables.scss | 8 ++++++++ 6 files changed, 15 insertions(+), 27 deletions(-) diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss index b922cae37..c4e1ebb25 100644 --- a/assets/styles/sections/accomplishments.scss +++ b/assets/styles/sections/accomplishments.scss @@ -1,9 +1,5 @@ .accomplishments-section { - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; - } + @include section-title-adjustment(); .card { background: #fff; diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss index 142162e55..e389c3c7e 100644 --- a/assets/styles/sections/achievements.scss +++ b/assets/styles/sections/achievements.scss @@ -1,14 +1,10 @@ .achievements-section { + @include section-title-adjustment(); + .container { padding-top: 0.5rem; } - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; - } - #gallery { .achievement-entry { margin-top: 5px; diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss index a7683c0e8..1cb363a18 100644 --- a/assets/styles/sections/education.scss +++ b/assets/styles/sections/education.scss @@ -1,9 +1,5 @@ .education-section { - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; - } + @include section-title-adjustment(); .card { &:hover, diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss index 1df94fa63..df639b47c 100644 --- a/assets/styles/sections/experiences.scss +++ b/assets/styles/sections/experiences.scss @@ -1,11 +1,7 @@ .experiences-section { - padding-bottom: 1rem; + @include section-title-adjustment(); - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; - } + padding-bottom: 1rem; ul { padding-left: 1rem; diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss index 675ceb292..ba2ee1de5 100644 --- a/assets/styles/sections/publications.scss +++ b/assets/styles/sections/publications.scss @@ -1,9 +1,5 @@ .publications-section { - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; - } + @include section-title-adjustment(); .card { background: #fff; diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss index 6a6dda587..8316c48ea 100644 --- a/assets/styles/variables.scss +++ b/assets/styles/variables.scss @@ -7,3 +7,11 @@ $breakpoints: ( extra-large: 1536px, ultra-large: 2560px, ); + +@mixin section-title-adjustment(){ + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; + } +} From e632926b5a30ad1345b1c63c1f903f03125da03a Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Sat, 23 Sep 2023 00:32:56 +0600 Subject: [PATCH 10/17] Refactor navbar CSS Signed-off-by: hossainemruz --- assets/styles/navigators/navbar.scss | 372 ++++++++++----------------- 1 file changed, 135 insertions(+), 237 deletions(-) diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss index 50b42a65f..cb78095c5 100644 --- a/assets/styles/navigators/navbar.scss +++ b/assets/styles/navigators/navbar.scss @@ -1,3 +1,43 @@ +@mixin initial-nav-item-hover-effect() { + color: #f9fafc; + transition: all 0.3s ease-out; + transform: translateY(-2px); +} + +@mixin final-nav-item-hover-effect() { + color: #2098d1 !important; + transition: all 0.3s ease-out; + border-bottom: 2px solid #2098d1 !important; + background: rgb(2, 0, 36); + background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%); +} + +@mixin navbar-dropdown() { + .dropdown-menu { + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + border: 1px solid #fff; + max-height: 0vh; + overflow: hidden; + display: block; + visibility: hidden; + transition: all 0.3s ease-out; + + &.show { + max-height: 100vh; + visibility: visible; + transition: all 0.3s ease-in; + + a { + color: #1c2d41 !important; + + &:hover { + @include final-nav-item-hover-effect(); + } + } + } + } +} + .top-navbar { position: fixed; left: 0; @@ -10,191 +50,129 @@ padding-top: 0.4rem; text-align: center; - /* --- initial state start ------ */ &.initial-navbar { background-color: transparent; + .navbar-brand { + color: #c0ccda; + font-weight: 600; + } + li { + a { + color: #c0ccda; + &:hover { + @include initial-nav-item-hover-effect(); + } + } + } + .navbar-nav .active { + @include initial-nav-item-hover-effect(); + } + @include navbar-dropdown(); } - - &.initial-navbar .navbar-brand { - color: #c0ccda; - font-weight: 600; - } - - &.initial-navbar li a { - color: #c0ccda; - } - - &.initial-navbar .navbar-nav .active, - &.initial-navbar li a:hover { - color: #f9fafc; - transition: all 0.3s ease-out; - transform: translateY(-2px); - } - - .navbar-collapse { - margin-top: -5px; - } - - .navbar-collapse.show, - .navbar-collapse.collapsing { - background-color: #f9fafc; - padding-left: 1rem; - } - - /* --- initial state end ------ */ - - /* --- state after scroll start --- */ - + &.final-navbar { background-color: #f9fafc; color: #1c2d41; transition: all 0.3s ease-out; + + .navbar-brand { + color: #1c2d41; + font-weight: 600; + } + li { + a { + color: #1c2d41; + font-weight: 500; + transition: all 0.3s ease-out; + border-bottom: 2px solid#F9FAFC; + &:hover { + @include final-nav-item-hover-effect(); + } + } + } + .navbar-nav .active { + @include final-nav-item-hover-effect(); + } + + #top-navbar-divider { + background: rgba(0, 0, 0, 0.6); + } + @include navbar-dropdown(); } - - &.final-navbar .navbar-brand { - color: #1c2d41; - font-weight: 600; - } - - &.final-navbar li a { - color: #1c2d41; - font-weight: 500; - transition: all 0.3s ease-out; - border-bottom: 2px solid#F9FAFC; - } - - &.final-navbar .navbar-nav .active, - &.final-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - border-bottom: 2px solid #2098d1; - background: rgb(2, 0, 36); - background: linear-gradient( - 90deg, - rgba(2, 0, 36, 1) 0%, - rgba(34, 136, 168, 0.1) 0% - ); - } - - .navbar-collapse.show li a, - .navbar-collapse.collapsing li a { - color: #1c2d41; - font-weight: 500; - transition: all 0.3s ease-out; - } - - .navbar-collapse.show .navbar-nav .active, - .navbar-collapse.show .navbar-nav a:hover { - color: #2098d1; + + .navbar-collapse { + margin-top: -5px; + &.show, + &.collapsing { + background-color: #f9fafc; + padding-left: 1rem; + + li { + a { + color: #1c2d41; + font-weight: 500; + transition: all 0.3s ease-out; + } + } + .navbar-nav { + .active { + color: #2098d1; + } + a:hover { + color: #2098d1; + } + } + } } - + #top-navbar-divider { margin-top: 10px; - } - - /* --- state after scroll end --- */ - - #top-navbar-divider { background: rgba(192, 204, 218, 0.8); height: 20px; width: 2px; } - - &.final-navbar #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); - } - - #top-navbar-divider { - height: 20px; - width: 2px; - } - + .navbar-brand img { width: 42px; padding: 5px; margin-left: -10px; } - - .dropdown-menu { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; - max-height: 0vh; - overflow: hidden; - display: block; - visibility: hidden; - transition: all 0.3s ease-out; - } - - .dropdown-menu.show { - max-height: 100vh; - visibility: visible; - transition: all 0.3s ease-in; - } - - .dropdown-menu a { - color: #1c2d41; - border-bottom: none; - } - - .dropdown-menu a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - border-bottom: none; - background: rgb(2, 0, 36); - background: linear-gradient( - 90deg, - rgba(2, 0, 36, 1) 0%, - rgba(34, 136, 168, 0.2) 0% - ); - } - - /* ============= 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) { + + @include media('<=large') { height: -moz-fit-content; height: fit-content; padding-bottom: 0px; padding-top: 0px; - + .container { max-width: 100%; } - - &.initial-navbar .navbar-nav .active, - &.initial-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - } - - &.final-navbar .navbar-nav .active, - &.final-navbar li a:hover { - color: #2098d1; - transition: none; - - border-bottom: none; - background: transparent; - } - - &.final-navbar li a { - border-bottom: none; + + &.initial-navbar { + .navbar-nav .active, + li a:hover { + color: #2098d1; + transition: all 0.3s ease-out; + } + } + &.final-navbar { + .navbar-nav .active, + li a:hover { + color: #2098d1; + transition: none; + + border-bottom: none !important; + background: transparent; + } + li a { + border-bottom: none; + } } - + .dropdown-divider { border-top: 1px solid #c0ccda; } + #top-navbar-divider { background: rgba(0, 0, 0, 0.6); height: auto; @@ -208,91 +186,11 @@ transition: all 0.3s ease-out; } } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - &.initial-navbar .navbar-nav .active, - &.initial-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - } - - &.final-navbar .navbar-nav .active, - &.final-navbar li a:hover { - color: #2098d1; - transition: none; - - border-bottom: none; - background: transparent; - } - - &.final-navbar li a { - border-bottom: none; - } - - .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) */ - - @media only screen and (max-width: 768px) { - &.initial-navbar .navbar-nav .active, - &.initial-navbar li a:hover { - color: #2098d1; - transition: all 0.3s ease-out; - } - - &.final-navbar .navbar-nav .active, - &.final-navbar li a:hover { - color: #2098d1; - transition: none; - - border-bottom: none; - background: transparent; - } - - &.final-navbar li a { - border-bottom: none; - } - - .dropdown-divider { - border-top: 1px solid #c0ccda; - } - #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); - height: auto; - width: auto; - margin-right: 15px; - } - } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + + @include media('<=small') { .dropdown-menu { margin-left: -1rem; margin-right: 0rem; } } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } -} \ No newline at end of file +} From 5a9af3cc461492cbcc863ea679e7a2f3ebe04e88 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Tue, 26 Sep 2023 00:50:08 +0600 Subject: [PATCH 11/17] Refactor sidebar CSS Signed-off-by: hossainemruz --- assets/scripts/sections/sidebar.js | 10 +- assets/styles/application.template.scss | 1 + assets/styles/components/links.scss | 15 + assets/styles/layouts/main.scss | 3 + assets/styles/navigators/sidebar.scss | 382 ++++++++++------------- layouts/partials/navigators/sidebar.html | 4 +- 6 files changed, 192 insertions(+), 223 deletions(-) create mode 100644 assets/styles/components/links.scss diff --git a/assets/scripts/sections/sidebar.js b/assets/scripts/sections/sidebar.js index ef90ce259..a10d33d87 100644 --- a/assets/scripts/sections/sidebar.js +++ b/assets/scripts/sections/sidebar.js @@ -6,19 +6,19 @@ function toggleSidebar () { if (sidebar == null) { return } - if (sidebar.classList.contains('hide')) { - sidebar.classList.remove('hide') + if (sidebar.classList.contains('expanded')) { + sidebar.classList.remove('expanded') } else { // if toc-section is open, then close it first const toc = document.getElementById('toc-section') if (toc != null && toc.classList.contains('hide')) { toc.classList.remove('hide') } - // add "hide" class - sidebar.classList.add('hide') + // add "expanded" class + sidebar.classList.add('expanded') // if it is mobile device. then scroll to top. const { isMobile } = getDeviceState() - if (isMobile && sidebar.classList.contains('hide')) { + if (isMobile && sidebar.classList.contains('expanded')) { document.body.scrollTop = 0 document.documentElement.scrollTop = 0 if (document.getElementById('hero-area') != null) { diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss index fd4edb541..ca89c3126 100644 --- a/assets/styles/application.template.scss +++ b/assets/styles/application.template.scss @@ -42,6 +42,7 @@ // components @import './components/cards'; @import './components/buttons'; +@import './components/links'; // override diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss new file mode 100644 index 000000000..a30263224 --- /dev/null +++ b/assets/styles/components/links.scss @@ -0,0 +1,15 @@ +.list-link { + text-decoration: none; + color: #131313; + transition: all 0.3s ease-out; + &.active { + display: inline; + color: #2098d1; + } + + &:hover { + margin-left: 3px; + color: #2098d1; + transition: all 0.3s ease-out; + } + } \ No newline at end of file diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss index e9d39f6c4..3ee539bd5 100644 --- a/assets/styles/layouts/main.scss +++ b/assets/styles/layouts/main.scss @@ -62,6 +62,9 @@ a { a:hover { color: #207089; } +a.focused { + color: #2098d1 !important; +} diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss index d392b583f..a1bc52a79 100644 --- a/assets/styles/navigators/sidebar.scss +++ b/assets/styles/navigators/sidebar.scss @@ -4,7 +4,7 @@ max-width: 20%; /* background-color: lightsalmon; */ transition: all ease-out 0.5s; - + .sidebar-holder { top: 2.5rem; position: sticky; @@ -13,151 +13,123 @@ overflow: auto; box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); transition: all ease-out 0.3s; + + .sidebar { + background: #f9fafc; + height: 100vh; + transition: all ease-out 0.3s; + + #search-box { + margin-left: 5%; + margin-right: 5%; + width: -webkit-fill-available; + height: 35px; + padding-left: 15px; + margin-top: 30px; + margin-bottom: 10px; + border-radius: 5px; + background-color: #e5e9f2; + transition: all 0.3s ease-out; + border: 1px solid #c0ccda; + + &:focus { + border: 1pt solid #248aaa; + outline: none; + } + } + + #list-heading { + padding-left: 0px !important; + } + + .sidebar-tree { + padding-left: 1rem; + position: relative; + width: -moz-max-content; + width: max-content; + + .tree { + margin: 0; + padding: 0; + list-style: none; + + li { + margin: 0; + padding: 0 1em; + line-height: 2em; + color: #3c4858; + position: relative; + + i { + color: #3c4858; + font-size: 12px; + margin-right: 5px; + } + } + .shift-right { + margin-left: 5px; + } + + .subtree { + padding-left: 0.7rem; + + &:before { + content: ''; + display: block; + width: 0; + position: absolute; + top: 2.5rem; + left: 1.5rem; + bottom: 0.9rem; + border-left: 1px solid; + } + li { + &:before { + content: ''; + display: block; + width: 20px; + height: 0; + border-top: 1px solid; + margin-top: -1px; + position: absolute; + top: 18px; + left: -3px; + } + &:last-child:before { + background: #f9fafc; + height: auto; + top: 1.1rem; + bottom: 0; + } + ul { + position: relative; + padding-left: 0.5rem; + display: none; + list-style: none; + + &.active { + display: block; + } + + &:before { + content: ''; + display: block; + width: 0; + position: absolute; + top: -10px; + left: 0.3rem; + bottom: 0.9rem; + border-left: 1px solid; + } + } + } + } + } + } + } } - - .sidebar { - background: #f9fafc; - height: 100vh; - transition: all ease-out 0.3s; - } - - .sidebar-tree { - padding-left: 1rem; - position: relative; - width: -moz-max-content; - width: max-content; - } - - #search-box { - margin-left: 5%; - margin-right: 5%; - width: -webkit-fill-available; - height: 35px; - padding-left: 15px; - margin-top: 30px; - margin-bottom: 10px; - border-radius: 5px; - background-color: #e5e9f2; - transition: all 0.3s ease-out; - border: 1px solid #c0ccda; - } - - #search-box:focus { - border: 1pt solid #248aaa; - outline: none; - } - - #list-heading { - padding-left: 0px !important; - } - - .tree, - .tree ul { - margin: 0; - padding: 0; - list-style: none; - } - - .tree li { - margin: 0; - padding: 0 1em; - line-height: 2em; - color: #3c4858; - position: relative; - } - - .tree li a { - text-decoration: none; - color: #131313; - transition: all 0.3s ease-out; - } - - .tree li a.active { - display: inline; - color: #2098d1; - } - - .tree li a:hover { - margin-left: 3px; - color: #2098d1; - transition: all 0.3s ease-out; - } - - .tree i { - color: #3c4858; - font-size: 12px; - margin-right: 5px; - } - - .tree .shift-right { - margin-left: 5px; - } - - .tree .active, - .tree .active > ul { - display: block; - } - - .subtree { - padding-left: 0.7rem; - } - - .subtree:before { - content: ""; - display: block; - width: 0; - position: absolute; - top: 2.5rem; - left: 1.5rem; - bottom: 0.9rem; - border-left: 1px solid; - } - - .subtree ul, - ul > ul { - position: relative; - padding-left: 0.5rem; - display: none; - } - - .subtree ul:before { - content: ""; - display: block; - width: 0; - position: absolute; - top: -10px; - left: 0.3rem; - bottom: 0.9rem; - border-left: 1px solid; - } - - .subtree li:before { - content: ""; - display: block; - width: 20px; - height: 0; - border-top: 1px solid; - margin-top: -1px; - position: absolute; - top: 18px; - left: -3px; - } - - .subtree li:last-child:before { - background: #f9fafc; - height: auto; - top: 1.1rem; - bottom: 0; - } - - a.focused { - color: #2098d1 !important; - } - - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { + + @include media('<=ultra-large') { flex: 15%; max-width: 15%; @@ -165,22 +137,20 @@ max-width: 100%; } } - /* Extra large devices (large desktops, 1200px and up) */ - - @media (max-width: 1400px) { + + @include media('<=extra-large') { .sidebar-holder { max-width: 20rem; } } - - @media (max-width: 1200px) { + + @include media('<=very-large') { .sidebar-tree { margin-left: 1rem; } } - - /* IPad Pro */ - @media (max-width: 1024px) { + + @include media('<=large') { flex: 0%; max-width: 0%; min-height: 100vh; @@ -192,23 +162,16 @@ width: 100%; max-height: calc(100vh - 2.5rem); } - - &.hide { + + &.expanded { flex: 30%; max-width: 30%; margin-right: 0.5rem; transition: all ease-out 0.3s; } } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { + + @include media('<=medium') { flex: 0%; max-width: 0%; min-height: 100vh; @@ -219,35 +182,22 @@ top: 2.5rem; width: 100%; } - - &.hide { + + &.expanded { flex: 40%; max-width: 40%; margin-right: 0.5rem; transition: all ease-out 0.3s; } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + + @include media('<=small') { width: 100%; min-height: 0; max-height: 0; max-width: 100%; transition: all ease-out 0.5s; - &.hide { - margin-top: 2rem; - position: relative; - height: -moz-fit-content; - height: fit-content; - flex: none; - max-height: 300vh; - max-width: 100%; - transition: all ease-out 0.5s; - } - .sidebar-holder { max-height: 0; height: -moz-fit-content; @@ -255,45 +205,45 @@ overflow: hidden; max-width: 100%; transition: all ease-out 0.5s; + + .sidebar { + position: relative; + height: -moz-fit-content; + height: fit-content; + max-height: -moz-fit-content; + max-height: fit-content; + width: 100vw; + min-height: 0; + overflow: hidden; + transition: all ease-out 0.5s; + + .sidebar-tree { + margin-left: 0rem; + max-height: 0; + transition: all 0.5s ease-out; + } + } } - - &.hide .sidebar-holder { - max-height: 200vh; - transition: all ease-out 0.5s; - } - - .sidebar { + + &.expanded { + margin-top: 2rem; position: relative; height: -moz-fit-content; height: fit-content; - max-height: -moz-fit-content; - max-height: fit-content; - width: 100vw; - min-height: 0; - overflow: hidden; + flex: none; + max-height: 300vh; + max-width: 100%; transition: all ease-out 0.5s; + + .sidebar-holder { + max-height: 200vh; + transition: all ease-out 0.5s; + + .sidebar-tree { + max-height: 200vh; + transition: all 0.5s ease-out; + } + } } - - .sidebar-tree { - margin-left: 0rem; - max-height: 0; - transition: all 0.5s ease-out; - } - &.hide .sidebar-tree { - max-height: 200vh; - transition: all 0.5s ease-out; - } - } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } -} \ No newline at end of file +} diff --git a/layouts/partials/navigators/sidebar.html b/layouts/partials/navigators/sidebar.html index 1319e66c6..bb2032eab 100644 --- a/layouts/partials/navigators/sidebar.html +++ b/layouts/partials/navigators/sidebar.html @@ -9,7 +9,7 @@ {{ if .HasChildren }}
  • - {{.Name}} + {{.Name}}
      {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }} @@ -17,6 +17,6 @@ {{ else }} -
    • {{.Name}}
      • +
    • {{.Name}}
      • {{ end }} {{ end }} From cb0ae299849a1d40d42b47014bab37682abc1dc4 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Tue, 26 Sep 2023 03:58:32 +0600 Subject: [PATCH 12/17] Use unified navbar for all pages Signed-off-by: hossainemruz --- assets/scripts/application.js | 3 + assets/scripts/sections/navbar.js | 20 +-- assets/styles/layouts/404.scss | 2 +- assets/styles/layouts/list.scss | 11 +- assets/styles/layouts/notes.scss | 120 +++++++-------- assets/styles/navigators/navbar.scss | 142 +++++++++--------- assets/styles/navigators/sidebar.scss | 16 +- layouts/404.html | 2 +- layouts/_default/list.html | 2 +- layouts/_default/search.html | 2 +- layouts/_default/single.html | 5 +- layouts/categories/list.html | 2 +- layouts/notes/list.html | 2 +- layouts/notes/single.html | 2 +- .../navigators/floating-lang-selector.html | 25 --- .../partials/navigators/lang-selector-2.html | 25 --- layouts/partials/navigators/navbar-2.html | 63 -------- layouts/partials/navigators/navbar.html | 30 ++-- layouts/partials/navigators/sidebar.html | 6 +- layouts/partials/scripts.html | 2 +- layouts/tags/list.html | 2 +- package-lock.json | 46 ++++++ package.hugo.json | 3 +- package.json | 4 + 24 files changed, 241 insertions(+), 296 deletions(-) delete mode 100644 layouts/partials/navigators/floating-lang-selector.html delete mode 100644 layouts/partials/navigators/lang-selector-2.html delete mode 100644 layouts/partials/navigators/navbar-2.html diff --git a/assets/scripts/application.js b/assets/scripts/application.js index b6ade04dd..2a1bbab94 100644 --- a/assets/scripts/application.js +++ b/assets/scripts/application.js @@ -1,8 +1,11 @@ import 'popper.js' import 'bootstrap' import '@fortawesome/fontawesome-free/js/all' +import feather from 'feather-icons' import './core' import './features' import './sections' import './pages' + +feather.replace(); diff --git a/assets/scripts/sections/navbar.js b/assets/scripts/sections/navbar.js index 0bf75bffe..9db8578df 100644 --- a/assets/scripts/sections/navbar.js +++ b/assets/scripts/sections/navbar.js @@ -4,8 +4,8 @@ const updateNavBar = () => { const themeIcon = document.getElementById('navbar-theme-icon-svg') if (window.scrollY > 40) { - topNavbar?.classList.remove('initial-navbar') - topNavbar?.classList.add('final-navbar', 'shadow') + topNavbar?.classList.remove('transparent-navbar') + topNavbar?.classList.add('shadow') navbarToggler?.classList.remove('navbar-dark') navbarToggler?.classList.add('navbar-light') @@ -20,8 +20,8 @@ const updateNavBar = () => { document.getElementById('logo')?.setAttribute('src', logoURL) } } else { - topNavbar?.classList.remove('final-navbar', 'shadow') - topNavbar?.classList.add('initial-navbar') + topNavbar?.classList.remove('shadow') + topNavbar?.classList.add('transparent-navbar') navbarToggler?.classList.remove('navbar-light') navbarToggler?.classList.add('navbar-dark') @@ -43,18 +43,20 @@ document.addEventListener('DOMContentLoaded', function () { // ================================================== // When the user scrolls down 80px from the top of the document, // resize the navbar's padding and the logo's font size - document.addEventListener('scroll', updateNavBar) + const topNavbar = document.getElementById('top-navbar') + if (topNavbar?.classList.contains('homepage')) { + document.addEventListener('scroll', updateNavBar) + updateNavBar() + } // Creates a click handler to collapse the navigation when // anchors in the mobile nav pop up are clicked - const navMain =document.getElementsByClassName('navbar-collapse') - Array.from(navMain).forEach(function(el) { + const navMain = document.getElementsByClassName('navbar-collapse') + Array.from(navMain).forEach(function (el) { el.addEventListener('click', function (e) { if (e.target.tagName === 'A') { el.classList.add('collapse') } }) }) - - updateNavBar() }) diff --git a/assets/styles/layouts/404.scss b/assets/styles/layouts/404.scss index 458b2dc09..e4b12650c 100644 --- a/assets/styles/layouts/404.scss +++ b/assets/styles/layouts/404.scss @@ -1,5 +1,5 @@ body.kind-404 { - .navbar-toggler { + #sidebar-toggler { display: none; } diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss index 4e3b18e1b..cd368d921 100644 --- a/assets/styles/layouts/list.scss +++ b/assets/styles/layouts/list.scss @@ -110,10 +110,6 @@ body.kind-page { display: block; } - #toc-toggler { - visibility: hidden; - } - .navbar-collapse.lang-selector { display: block !important; position: absolute; @@ -164,7 +160,6 @@ body.kind-page { margin-top: 0.5rem; transition: all ease-out 0.3s; } - } @include media('=medium','=medium', '=large','=large', '=very-large','=very-large', '{{ .Page.Title }}