From 6179b05fd53c2aaea754d5cca0e729c81874239d Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Tue, 1 Aug 2023 11:31:45 +0600 Subject: [PATCH 01/17] Refactor CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- assets/styles/application.template.scss | 11 +- assets/styles/components/buttons.scss | 15 + assets/styles/components/cards.scss | 66 ++ assets/styles/layouts/list.scss | 165 +--- assets/styles/layouts/main.scss | 959 ++++++++++---------- assets/styles/layouts/single.scss | 16 +- assets/styles/sections/recent-posts.scss | 110 +-- assets/styles/variables.scss | 8 + layouts/_default/single.html | 9 +- layouts/partials/cards/post.html | 13 +- layouts/partials/cards/recent-post.html | 29 - layouts/partials/misc/tags.html | 8 + layouts/partials/sections/recent-posts.html | 2 +- package.hugo.json | 3 +- 14 files changed, 661 insertions(+), 753 deletions(-) create mode 100644 assets/styles/components/buttons.scss create mode 100644 assets/styles/components/cards.scss create mode 100644 assets/styles/variables.scss delete mode 100644 layouts/partials/cards/recent-post.html create mode 100644 layouts/partials/misc/tags.html diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss index 084470646..42b2a9e05 100644 --- a/assets/styles/application.template.scss +++ b/assets/styles/application.template.scss @@ -2,6 +2,8 @@ // TODO: Refactor to use bootstrap sass variable for theming. @import 'bootstrap/scss/bootstrap'; +@import 'include-media/dist/_include-media'; + // The Mulish font, we use font-weight 300 - 700 @import '@fontsource/mulish/300'; @import '@fontsource/mulish/index'; // 400 @@ -9,6 +11,8 @@ @import '@fontsource/mulish/600'; @import '@fontsource/mulish/700'; +@import './variables'; + // layouts @import './layouts/main'; @import './layouts/list'; @@ -34,6 +38,11 @@ @import './sections/publications'; +// components +@import './components/cards'; +@import './components/buttons'; + + // override @import './override'; @@ -61,4 +70,4 @@ {{ end }} {{ end }} {{ end }} -{{ end }} \ No newline at end of file +{{ end }} diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss new file mode 100644 index 000000000..ff723ca2d --- /dev/null +++ b/assets/styles/components/buttons.scss @@ -0,0 +1,15 @@ +.tags { + text-align: left; + + li { + font-size: 0.5em; + list-style-type: none; + display: inline-block; + background: #248aaa; + margin-left: 0.1em; + margin-right: 0.1em; + } + a { + color: #f9fafc; + } +} diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss new file mode 100644 index 000000000..b493a1fa1 --- /dev/null +++ b/assets/styles/components/cards.scss @@ -0,0 +1,66 @@ +.post-card { + width: calc(100% / 3); + display: inline-flex; + + .post-card-link { + text-decoration: none; + } + + .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; + + .post-summary { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + max-height: 144px; + /* fallback */ + -webkit-line-clamp: 5; + /* number of lines to show */ + -webkit-box-orient: vertical; + } + } + .card-footer { + background: #fff; + margin-top: auto; + + span { + font-size: 10pt; + color: #6c757d !important; + padding-top: 5px; + } + } + } +} diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss index d79b7eb7e..da1758e2d 100644 --- a/assets/styles/layouts/list.scss +++ b/assets/styles/layouts/list.scss @@ -1,14 +1,16 @@ // in Hugo, Page kind can be either "section" or "page". // if it is section, then it's a page with a list of items, for example /posts // if it is page, then it is a single page. -body.kind-section, body.kind-term, body.kind-page{ +body.kind-section, +body.kind-term, +body.kind-page { .wrapper { display: flex; padding: 0; margin: 0; width: 100%; } - + .content-section { flex: 80%; order: 2; @@ -18,14 +20,14 @@ body.kind-section, body.kind-term, body.kind-page{ padding-left: 0.5rem; padding-right: 0.5rem; } - + .content { padding: 0; position: relative; padding-top: 2rem; min-height: 130vh; } - + .post-card-holder { margin-top: 32px; margin-left: auto; @@ -33,62 +35,26 @@ body.kind-section, body.kind-term, body.kind-page{ display: flex; flex-flow: wrap; } - - .post-card-holder .post-card { - width: calc(100% / 3); - display: inline-flex; - } - - .post-card-holder .card { - margin: 5px; - position: relative; - } - - .post-card-holder .card .card-footer span { - font-size: 10pt; - color: #6c757d !important; - padding-top: 5px; - } - - .post-card-holder .card .card-footer { - background: #fff; - margin-top: auto; - } - - .post-summary { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - max-height: 144px; - /* fallback */ - -webkit-line-clamp: 5; - /* number of lines to show */ - -webkit-box-orient: vertical; - } - - .post-card-holder .post-card-link { - text-decoration: none; - } - + .paginator { width: -moz-fit-content; width: fit-content; margin: auto; } - + .paginator .page-item > a { color: #248aaa; } - + .paginator .page-item.active > a { background-color: #248aaa; color: #f9fafc; } - + .navbar-toggler { display: none; } - + .pagination { margin-left: auto; margin-right: auto; @@ -97,25 +63,9 @@ body.kind-section, body.kind-term, body.kind-page{ width: -moz-fit-content; width: fit-content; } - - .taxonomy-terms-card { - text-align: left; - } - .taxonomy-terms-card li { - font-size: 0.5em; - list-style-type: none; - display: inline-block; - background: #248aaa; - margin-left: 0.1em; - margin-right: 0.1em; - } - - .taxonomy-terms-card a { - color: #f9fafc; - } /* ============= Device specific fixes ======= */ - + /* Large screens such as TV */ @media only screen and (min-width: 1824px) { .content-section { @@ -124,25 +74,19 @@ body.kind-section, body.kind-term, body.kind-page{ flex: 85%; max-width: 85%; } - .post-card-holder .post-card { - width: calc(100% / 5); - } } - + /* Extra large devices (large desktops, 1200px and up) */ - + @media (max-width: 1400px) { .post-card-holder { margin-left: 0px; } - .post-card-holder .post-card { - width: calc(100% / 3); - } } - + @media (max-width: 1200px) { } - + /* IPad Pro */ @media (max-width: 1024px) { .wrapper { @@ -155,7 +99,7 @@ body.kind-section, body.kind-term, body.kind-page{ order: 2; padding-bottom: 0.5rem; } - + .content { overflow: hidden; } @@ -165,18 +109,18 @@ body.kind-section, body.kind-term, body.kind-page{ .navbar-toggler { display: block; } - + #toc-toggler { visibility: hidden; } - + .navbar-collapse.lang-selector { display: block !important; position: absolute; right: 0; top: 0.5rem; } - + .post-card-holder { margin: 0; margin-top: 1.5rem; @@ -185,35 +129,10 @@ body.kind-section, body.kind-term, body.kind-page{ position: relative; transition: all ease-out 0.3s; } - - .post-card-holder .post-card { - width: calc(100% / 3); - } - - .content-section.hide .post-card-holder .post-card { - width: 50%; - } } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - .post-card-holder .post-card { - width: 50%; - } - - .content-section.hide .post-card-holder .post-card { - width: 100%; - } - } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { - } - + /* Small devices (landscape phones, 576px and up) */ - + @media only screen and (max-width: 576px) { .wrapper { padding-left: 0px; @@ -227,41 +146,51 @@ body.kind-section, body.kind-term, body.kind-page{ padding-left: 0; width: 100%; } - + .content { width: 100%; padding-left: 0; padding-right: 0; transition: all ease-out 0.3s; } - + .content-section.hide .content { margin-top: 0; padding-top: 0; transition: all ease-out 0.3s; } - + .content-section.hide .post-card-holder { margin-top: 0.5rem; transition: all ease-out 0.3s; } - - .post-card-holder .post-card { + + } + @include media('<=small') { + .post-card { margin-left: 1%; margin-right: 1%; width: 98%; } } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { + @include media('>=medium') { + .post-card { + width: calc(100% / 2); + } } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { + @include media('>=large') { + .post-card { + width: calc(100% / 3); + } + } + @include media('>=very-large') { + .post-card { + width: calc(100% / 4); + } + } + @include media('>=extra-large') { + .post-card { + width: calc(100% / 5); + } } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } } diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss index 9cb69cab2..6dcec4371 100644 --- a/assets/styles/layouts/main.scss +++ b/assets/styles/layouts/main.scss @@ -18,500 +18,503 @@ Yellow: #FFC212 simpler css approach. See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ */ -*, html { - scroll-behavior: smooth !important; - } - - /* +*, +html { + scroll-behavior: smooth !important; +} + +/* Fixes anchor overlapping with header. See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors */ - :target::before { - content: ""; - display: block; - height: 2em; /* fixed header height*/ - margin: -2em 0 0; /* negative fixed header height */ - } - - body { +:target::before { + content: ''; + display: block; + height: 2em; /* fixed header height*/ + margin: -2em 0 0; /* negative fixed header height */ +} + +body { + background-color: #f9fafc; + font-family: 'Mulish'; +} + +h1, +h2, +h3, +h4, +h5 { + color: #1c2d41; +} + +strong { + color: #1c2d41 !important; +} + +p { + color: #3c4858; +} + +a { + color: #248aaa; +} + +a:hover { + color: #207089; +} + +.nav-button { + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; + color: #8392a5; +} + +.btn-dark { + background-color: #3c4858 !important; + border-color: #3c4858 !important; + color: #e5e9f2 !important; + transition: all 0.3s ease-out !important; +} + +.btn-dark:hover, +.btn-dark:focus { + background-color: #248aaa !important; + border-color: #248aaa !important; + transition: all 0.3s ease-out !important; +} + +.btn-outline-info { + color: #2098d1 !important; + border-color: #2098d1 !important; +} + +.btn-outline-info:hover { + background-color: #2098d1 !important; + color: #e5e9f2 !important; +} + +.btn-info { + background-color: #248aaa !important; + color: #e5e9f2 !important; +} + +.btn-info:hover { + background-color: #2098d1 !important; + color: #e5e9f2 !important; +} + +.btn-link { + color: #248aaa; +} + +.btn-link:hover { + color: #207089; +} + +.bg-white { + background-color: #f9fafc !important; +} + +.bg-dimmed { + background-color: #e5e9f2; +} + +.anchor { + padding-top: 3.5rem; +} + +img.center { + display: block; + margin-left: auto; + margin-right: auto; +} + +img.left { + display: block; + margin-right: auto; +} + +img.right { + display: block; + margin-left: auto; +} + +// .card { +// box-shadow: none; +// transition: all 0.3s ease-out; +// overflow: hidden; +// } + +.card-img-sm { + width: 32px; + height: 32px; +} + +.card-img-xs { + width: 24px; + height: 24px; +} + +// .card:hover, +// .card:focus { +// box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); +// border: 1px solid #fff; +// transition: all 0.3s ease-out; +// } + +// .card .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:hover .card-head .card-img-top, +// .card:focus .card-head .card-img-top { +// transition: all 0.3s ease-out; +// transform: scale(1.2); +// } + +// .card-body { +// text-align: justify; +// } + +.sub-title { + color: #c0ccda; + font-size: 10pt; +} + +.flag-icon { + width: 16px !important; + margin-top: 3px; + margin-right: 3px; +} + +/* ====== table ====== */ +table { + border-radius: 0.1rem; + background: #e5e9f2; + border: 1px solid #c0ccda; + padding: 0.1rem; +} + +table tr { + height: 40px !important; +} + +table th, +td { + padding: 0.5rem; + border-left: 1px solid #8392a5; + border-bottom: 1px solid #8392a5; +} + +table thead tr { + background: #248aaa; + color: #e5e9f2; +} + +tbody tr:nth-child(odd) { + background-color: #e5e9f2; +} + +tbody tr:hover { + background: #c0ccda; +} + +/* ====== don't apply css to tables inside gist ====== */ +.gist table { + border-radius: unset; + background: unset; + border: unset; + padding: unset; +} + +.gist table tr { + height: unset !important; +} + +.gist table th, +td { + padding: unset; + border-left: unset; + border-bottom: unset; +} + +.gist table thead tr { + background: unset; + color: unset; +} + +.gist tbody tr:nth-child(odd) { + background-color: unset; +} + +.gist tbody tr:hover { + background: unset; +} + +.gist table td, +.gist table tc { + border-right: 1px solid #eee; +} + +figure { + border: 1px solid #c0ccda; + height: -moz-fit-content; + height: fit-content; + width: -moz-fit-content; + width: fit-content; + align-self: center; + margin: auto; +} + +img { + max-width: 100%; +} + +caption, +figcaption { + caption-side: bottom; + text-align: center; + color: #8392a5; +} + +pre { + margin: 5px; +} + +pre > code { + padding: 10px !important; +} + +a.header-anchor { + text-decoration: none; + color: #1c2d41; +} + +a.header-anchor i, +a.header-anchor svg { + font-size: 10pt; + color: #3c4858; + display: none; + margin-left: 0.5rem; +} +a.header-anchor:hover i, +a.header-anchor:hover svg { + display: inline-block; +} +a.header-anchor code { + color: #e83e8c; +} + +.content ul > ol, +.content ol > ul, +.content ul > ul, +.content ol > ol, +.content li > ol, +.content li > ul { + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; +} + +kbd { + background-color: #248aaa !important; + color: #f9fafc; +} + +mark { + background-color: #ffc21280; +} + +/* ======= Paginator ========= */ +.paginator { + width: -moz-fit-content; + width: fit-content; + margin: auto; + vertical-align: bottom; +} + +.paginator .page-item > a { + color: #248aaa; +} + +.paginator .page-item.active > a { + background-color: #248aaa; + 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 ---- */ + +/* ============= 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) { + .content-section .languageSelector { + position: fixed; + right: 0.5rem; + bottom: 1rem; + z-index: 10000000; background-color: #f9fafc; - font-family: "Mulish"; - } - - h1, - h2, - h3, - h4, - h5 { - color: #1c2d41; - } - - strong { - color: #1c2d41 !important; - } - - p { - color: #3c4858; - } - - a { - color: #248aaa; - } - - a:hover { - color: #207089; - } - - .nav-button { - background-color: transparent; - border: 1px solid transparent; - border-radius: 0.25rem; - color: #8392a5; - } - - .btn-dark { - background-color: #3c4858!important; - border-color: #3c4858!important; - color: #e5e9f2!important; - transition: all 0.3s ease-out!important; - } - - .btn-dark:hover, - .btn-dark:focus { - background-color: #248aaa!important; - border-color: #248aaa!important; - transition: all 0.3s ease-out!important; - } - - .btn-outline-info { - color: #2098d1 !important; - border-color: #2098d1 !important; - } - - .btn-outline-info:hover { - background-color: #2098d1 !important; - color: #e5e9f2 !important; - } - - .btn-info { - background-color: #248aaa !important; - color: #e5e9f2 !important; - } - - .btn-info:hover { - background-color: #2098d1 !important; - color: #e5e9f2 !important; - } - - .btn-link { - color: #248aaa; - } - - .btn-link:hover { - color: #207089; - } - - .bg-white { - background-color: #f9fafc !important; - } - - .bg-dimmed { - background-color: #e5e9f2; - } - - .anchor { - padding-top: 3.5rem; - } - - img.center { - display: block; - margin-left: auto; - margin-right: auto; - } - - img.left { - display: block; - margin-right: auto; - } - - img.right { - display: block; - margin-left: auto; - } - - .card { - box-shadow: none; - transition: all 0.3s ease-out; - overflow: hidden; - } - - .card-img-sm { - width: 32px; - height: 32px; - } - - .card-img-xs { - width: 24px; - height: 24px; - } - - .card:hover, - .card:focus { box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; - transition: all 0.3s ease-out; - } - - .card .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:hover .card-head .card-img-top, - .card:focus .card-head .card-img-top { - transition: all 0.3s ease-out; - transform: scale(1.2); - } - - .card-body { - text-align: justify; - } - - .sub-title { - color: #c0ccda; - font-size: 10pt; - } - - .flag-icon { - width: 16px !important; - margin-top: 3px; - margin-right: 3px; - } - - /* ====== table ====== */ - table { - border-radius: 0.1rem; - background: #e5e9f2; - border: 1px solid #c0ccda; - padding: 0.1rem; - } - - table tr { - height: 40px !important; - } - - table th, - td { - padding: 0.5rem; - border-left: 1px solid #8392a5; - border-bottom: 1px solid #8392a5; - } - - table thead tr { - background: #248aaa; - color: #e5e9f2; - } - - tbody tr:nth-child(odd) { - background-color: #e5e9f2; - } - - tbody tr:hover { - background: #c0ccda; - } - - /* ====== don't apply css to tables inside gist ====== */ - .gist table { - border-radius: unset; - background: unset; - border: unset; - padding: unset; - } - - .gist table tr { - height: unset !important; - } - - .gist table th, - td { - padding: unset; - border-left: unset; - border-bottom: unset; - } - - .gist table thead tr { - background: unset; - color: unset; - } - - .gist tbody tr:nth-child(odd) { - background-color: unset; - } - - .gist tbody tr:hover { - background: unset; - } - - .gist table td, .gist table tc{ - border-right: 1px solid #eee; - } - - figure { - border: 1px solid #c0ccda; - height: -moz-fit-content; - height: fit-content; - width: -moz-fit-content; - width: fit-content; - align-self: center; - margin: auto; - } - - img { - max-width: 100%; } - - caption, - figcaption { - caption-side: bottom; - text-align: center; - color: #8392a5; - } - pre { - margin: 5px; - } - - pre > code { - padding: 10px !important; - } - - a.header-anchor { - text-decoration: none; - color: #1c2d41; - } - - a.header-anchor i, a.header-anchor svg { - font-size: 10pt; - color: #3c4858; - display: none; - margin-left: 0.5rem; - } - a.header-anchor:hover i, a.header-anchor:hover svg { - display: inline-block; - } - a.header-anchor code { - color: #e83e8c; - } - - .content ul > ol, - .content ol > ul, - .content ul > ul, - .content ol > ol, - .content li > ol, - .content li > ul { - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; - } - - kbd { - background-color: #248aaa !important; - color: #f9fafc; - } - - mark { - background-color: #ffc21280; - } - - /* ======= Paginator ========= */ - .paginator { - width: -moz-fit-content; - width: fit-content; - margin: auto; - vertical-align: bottom; - } - - .paginator .page-item > a { - color: #248aaa; + margin: 0px; } - - .paginator .page-item.active > a { - background-color: #248aaa; - color: #f9fafc; + code { + padding: 0px; } - - /* --- 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; +} + +/* 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) { + .skills-section .container, + .projects-section .container, + .publications-section .container { + padding-left: 0.3rem; + padding-right: 0.3rem; } - - .footer a:hover { - margin-left: 5px; - transition: all 0.3s ease-out; + + .section-holder { + padding-left: 5px; + padding-right: 5px; } - - .footer ul { - list-style: none; + + .skills-section, + .projects-section, + .recent-posts-section, + .achievements-section, + .publications-section { padding-left: 0; + padding-right: 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 ---- */ - - /* ============= 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) { - .content-section .languageSelector { - position: fixed; - right: 0.5rem; - bottom: 1rem; - z-index: 10000000; - background-color: #f9fafc; - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - } - pre { - margin: 0px; - } - code { - padding: 0px; - } - } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { + + pre { + margin: 0px; } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { + code { + padding: 0px; } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { - .skills-section .container, - .projects-section .container, - .publications-section .container { - padding-left: 0.3rem; - padding-right: 0.3rem; - } - - .section-holder { - padding-left: 5px; - padding-right: 5px; - } - - .skills-section, - .projects-section, - .recent-posts-section, - .achievements-section, - .publications-section { - padding-left: 0; - padding-right: 0; - } - - pre { - margin: 0px; - } - code { - padding: 0px; - } - - h1 { - font-size: 2.2rem; - } + + h1 { + font-size: 2.2rem; } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - h1 { - font-size: 2rem; - } +} + +/* iPhoneX, iPhone 6,7,8 */ +@media only screen and (max-width: 375px) { + h1 { + font-size: 2rem; } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - h1 { - font-size: 1.8rem; - } +} + +/* Galaxy S5, Moto G4 */ +@media only screen and (max-width: 360px) { + h1 { + font-size: 1.8rem; } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - h1 { - font-size: 1.5rem; - } +} + +/* iPhone 5 or before */ +@media only screen and (max-width: 320px) { + h1 { + font-size: 1.5rem; } - +} diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss index 5ffda3baa..2ece70b3d 100644 --- a/assets/styles/layouts/single.scss +++ b/assets/styles/layouts/single.scss @@ -299,22 +299,10 @@ body.kind-page { #scroll-to-top.show { visibility: visible; } - .taxonomy-terms { + .tags { text-align: center; } - .taxonomy-terms li { - font-size: 0.8em; - list-style-type: none; - display: inline-block; - background: #248aaa; - margin-left: 0.2em; - margin-right: 0.2em; - } - - .taxonomy-terms a { - color: #f9fafc; - } - + /* ============= Device specific fixes ======= */ /* Large screens such as TV */ diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss index 1b30c8bf0..e8bb92b59 100644 --- a/assets/styles/sections/recent-posts.scss +++ b/assets/styles/sections/recent-posts.scss @@ -2,110 +2,34 @@ .container { padding-top: 1rem; } - - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; - } - - .card { - height: 100%; - min-height: 100%; - } - - .card .card-footer span { - font-size: 10pt; - color: #6c757d !important; - padding-top: 5px; - } - - .card .card-footer { - background: #fff; - margin-top: auto; - } - - .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; - } - .taxonomy-terms { - text-align: left; - } - .taxonomy-terms li { - font-size: 0.5em; - list-style-type: none; - display: inline-block; - background: #248aaa; - margin-left: 0.2em; - margin-right: 0.2em; + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - - .taxonomy-terms a { - color: #f9fafc; - } - - /* ============= 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) { + @include media('<=small') { + .post-card { + margin-left: 1%; + margin-right: 1%; + width: 98%; + } } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { + @include media('<=medium') { .container { max-width: 100%; } .post-card { - width: 50%; + width: calc(100% / 2); } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + @include media('<=large') { .post-card { - width: 100%; + width: calc(100% / 3); } } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { + @include media('<=very-large') { } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { + @include media('<=extra-large') { } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } -} \ No newline at end of file +} diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss new file mode 100644 index 000000000..cd9e12fc6 --- /dev/null +++ b/assets/styles/variables.scss @@ -0,0 +1,8 @@ +$breakpoints: ( + small: 640px, + medium: 768px, + large: 1024px, + very-large: 1280px, + extra-large: 1536px, + ultra-large: 2560px, +); diff --git a/layouts/_default/single.html b/layouts/_default/single.html index a5ce0ca92..17ebd643f 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -46,14 +46,7 @@ <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5> <h1>{{ .Page.Title }}</h1> </div> {{ if site.Params.features.tags.enable }} - <div class="taxonomy-terms"> - <ul style="padding-left: 0;"> - {{ range .Params.tags }} - {{ $url:= printf "tags/%s/" . }} - <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li> - {{ end }} - </ul> - </div> + {{partial "misc/tags.html" .Params.tags }} {{ end }} <div class="post-content" id="post-content"> {{ .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 @@ <div class="card-body"> <h5 class="card-title">{{ .Title }}</h5> <p class="card-text post-summary">{{ .Summary }}</p> - </div> - <div class="card-footer"> {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }} - <div class="taxonomy-terms-card"> - <ul style="padding-left: 0;"> - {{ range .Params.tags }} - {{ $url:= printf "tags/%s/" . }} - <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li> - {{ end }} - </ul> - </div> + {{ partial "misc/tags.html" .Params.tags }} {{ end }} + </div> + <div class="card-footer"> <span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span> <a href="{{ .RelPermalink | relLangURL }}" diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html deleted file mode 100644 index 753fedf5b..000000000 --- a/layouts/partials/cards/recent-post.html +++ /dev/null @@ -1,29 +0,0 @@ -<div class="col-lg-4 col-md-6 pt-2 post-card"> - <a href="{{ .RelPermalink }}" title="{{ .Title }}" class="post-card-link"> - <div class="card"> - <div class="card-head"> - <img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}' - alt="Card image cap" - /> - </div> - <div class="card-body"> - <h5 class="card-title">{{ .Title }}</h5> - <p class="card-text post-summary"> {{ .Summary }}</p> - </div> - <div class="card-footer"> - {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }} - <div class="taxonomy-terms"> - <ul style="padding-left: 0;"> - {{ range .Params.tags }} - {{ $url:= printf "tags/%s/" . }} - <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li> - {{ end }} - </ul> - </div> - {{ end }} - <span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span> - <a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a> - </div> - </div> - </a> -</div> 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 @@ +<div class="tags"> + <ul style="padding-left: 0;"> + {{ range . }} + {{ $url:= printf "tags/%s/" . }} + <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li> + {{ end }} + </ul> +</div> 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 @@ <h1 class="text-center" style="display: none"> <div class="container"> <div class="row" id="recent-post-cards"> {{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }} - {{ partial "cards/recent-post.html" . }} + {{ partial "cards/post.html" . }} {{ end }} </div> </div> 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 <hossainemruz@gmail.com> Date: Thu, 3 Aug 2023 13:34:12 +0600 Subject: [PATCH 02/17] Refactor about section Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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') { .post-card { margin-left: 1%; margin-right: 1%; width: 98%; } } - @include media('>=medium') { + @include media('>=medium','<large') { .post-card { width: calc(100% / 2); } } - @include media('>=large') { + @include media('>=large','<very-large') { .post-card { width: calc(100% / 3); } } - @include media('>=very-large') { + @include media('>=very-large','<extra-large') { .post-card { width: calc(100% / 4); } diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss index 6dcec4371..a3ea86b0c 100644 --- a/assets/styles/layouts/main.scss +++ b/assets/styles/layouts/main.scss @@ -63,54 +63,7 @@ a:hover { color: #207089; } -.nav-button { - background-color: transparent; - border: 1px solid transparent; - border-radius: 0.25rem; - color: #8392a5; -} - -.btn-dark { - background-color: #3c4858 !important; - border-color: #3c4858 !important; - color: #e5e9f2 !important; - transition: all 0.3s ease-out !important; -} - -.btn-dark:hover, -.btn-dark:focus { - background-color: #248aaa !important; - border-color: #248aaa !important; - transition: all 0.3s ease-out !important; -} - -.btn-outline-info { - color: #2098d1 !important; - border-color: #2098d1 !important; -} - -.btn-outline-info:hover { - background-color: #2098d1 !important; - color: #e5e9f2 !important; -} - -.btn-info { - background-color: #248aaa !important; - color: #e5e9f2 !important; -} - -.btn-info:hover { - background-color: #2098d1 !important; - color: #e5e9f2 !important; -} - -.btn-link { - color: #248aaa; -} -.btn-link:hover { - color: #207089; -} .bg-white { background-color: #f9fafc !important; @@ -140,50 +93,6 @@ img.right { margin-left: auto; } -// .card { -// box-shadow: none; -// transition: all 0.3s ease-out; -// overflow: hidden; -// } - -.card-img-sm { - width: 32px; - height: 32px; -} - -.card-img-xs { - width: 24px; - height: 24px; -} - -// .card:hover, -// .card:focus { -// box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); -// border: 1px solid #fff; -// transition: all 0.3s ease-out; -// } - -// .card .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:hover .card-head .card-img-top, -// .card:focus .card-head .card-img-top { -// transition: all 0.3s ease-out; -// transform: scale(1.2); -// } - -// .card-body { -// text-align: justify; -// } .sub-title { color: #c0ccda; @@ -420,7 +329,17 @@ mark { /* --- FOOTER END ---- */ -/* ============= Device specific fixes ======= */ +/* ============= Media Query Template ======= */ +@include media('<medium') { +} +@include media('>=medium','<large') { +} +@include media('>=large','<very-large') { +} +@include media('>=very-large','<extra-large') { +} +@include media('>=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') { .post-card { margin-left: 1%; margin-right: 1%; width: 98%; } } - @include media('<=medium') { + @include media('>=medium','<large') { .container { max-width: 100%; } @@ -23,13 +24,9 @@ width: calc(100% / 2); } } - @include media('<=large') { + @include media('>=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 @@ <div class="col-6 col-lg-4 p-2"> {{ if eq .type "certification" }} {{/* Verifiable certificate badge from https://www.credly.com */}} - <div class=""> + <div class="certificate-badge"> <a href="{{ .url }}" target="_blank" rel="noopener noreferrer"> <img src="{{ .badge }}" alt="{{ .name }}" /> </a> From 81cdb970fcbf446e81115599b4c8f14530838f90 Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Fri, 4 Aug 2023 08:02:29 +0600 Subject: [PATCH 03/17] Refactor CSS for experiences section Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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 @@ <div class="col-xs-12 col-sm-6 col-lg-4 pt-2"> - <a class="skill-card-link" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}> + <a class="text-decoration-none" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}> <div class="card"> <div class="card-head d-flex"> {{ if .logo }} From a0a50736de5c68e45b7ebe90c3746103d83cdb0f Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Sun, 6 Aug 2023 23:36:18 +0600 Subject: [PATCH 04/17] Update education section Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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 <hossainemruz@gmail.com> Date: Mon, 7 Aug 2023 00:09:39 +0600 Subject: [PATCH 05/17] Update projects section Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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 <hossainemruz@gmail.com> Date: Mon, 7 Aug 2023 01:22:21 +0600 Subject: [PATCH 06/17] Update publication + accomplishment section Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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 <hossainemruz@gmail.com> Date: Thu, 21 Sep 2023 23:13:25 +0600 Subject: [PATCH 07/17] Update achievements section Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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 <hossainemruz@gmail.com> Date: Thu, 21 Sep 2023 23:26:01 +0600 Subject: [PATCH 08/17] Refactor footer CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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('<medium') { } diff --git a/assets/styles/sections/footer.scss b/assets/styles/sections/footer.scss new file mode 100644 index 000000000..52c643dd9 --- /dev/null +++ b/assets/styles/sections/footer.scss @@ -0,0 +1,63 @@ +.footer { + color: #8392a5 !important; + background-color: #1c2d41; + position: relative; + z-index: 9999; + + h5 { + color: #c0ccda; + } + + a { + color: #8392a5; + transition: all 0.3s ease-out; + &:hover { + margin-left: 5px; + transition: all 0.3s ease-out; + } + } + + ul { + list-style: none; + padding-left: 0; + + li { + margin-top: 5px; + } + } + + hr { + background-color: #8392a5; + } + + p:first-child { + color: #c0ccda; + } + + input { + background-color: #c0ccda; + &:focus { + background-color: #e5e9f2; + } + } + + #disclaimer { + color: #8392a5 !important; + text-align: justify; + & > 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 <hossainemruz@gmail.com> 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 <hossainemruz@gmail.com> --- 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 <hossainemruz@gmail.com> Date: Sat, 23 Sep 2023 00:32:56 +0600 Subject: [PATCH 10/17] Refactor navbar CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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 <hossainemruz@gmail.com> Date: Tue, 26 Sep 2023 00:50:08 +0600 Subject: [PATCH 11/17] Refactor sidebar CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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 }} <!-- Add current entry --> <li> - <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}"> {{.Name}}</a> + <i class="fas {{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a> <!-- Add sub-tree --> <ul class="{{ $class }}"> {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }} @@ -17,6 +17,6 @@ </li> {{ else }} <!-- No sub-tree. So, only add current entry --> - <li><a class="{{$class}}" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li> + <li><a class="{{$class}} list-link" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li> {{ end }} {{ end }} From cb0ae299849a1d40d42b47014bab37682abc1dc4 Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Tue, 26 Sep 2023 03:58:32 +0600 Subject: [PATCH 12/17] Use unified navbar for all pages Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- 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') { .post-card { @@ -173,17 +168,17 @@ body.kind-page { width: 98%; } } - @include media('>=medium','<large') { + @include media('>=medium', '<large') { .post-card { width: calc(100% / 2); } } - @include media('>=large','<very-large') { + @include media('>=large', '<very-large') { .post-card { width: calc(100% / 3); } } - @include media('>=very-large','<extra-large') { + @include media('>=very-large', '<extra-large') { .post-card { width: calc(100% / 4); } diff --git a/assets/styles/layouts/notes.scss b/assets/styles/layouts/notes.scss index ced608056..c0ee6b320 100644 --- a/assets/styles/layouts/notes.scss +++ b/assets/styles/layouts/notes.scss @@ -16,63 +16,63 @@ body.type-notes { padding-left: 0.5rem; padding-right: 0.5rem; } - + .content { padding: 0; position: relative; padding-top: 2rem; min-height: 130vh; } - - .note-card-holder{ + + .note-card-holder { padding-top: 2rem; display: grid; grid-gap: 0.5rem; - grid-template-columns: repeat(auto-fill, minmax(30rem,1fr)); + grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); grid-auto-rows: 20px; } - + /* .note-collection { display: flex; flex-wrap: wrap; } */ - + .note-card { align-self: flex-start; } - - .note-card .card{ + + .note-card .card { margin: 0.5rem; } - - .note-title{ + + .note-title { padding-left: 1rem; color: #248aaa; } - - .note-title span{ + + .note-title span { background: #e5e9f2; padding-right: 5px; } - - .note-title:before{ - content:''; - display:inline-block; - width:98%; - height:100%; - margin-bottom:-26px; + + .note-title:before { + content: ''; + display: inline-block; + width: 98%; + height: 100%; + margin-bottom: -26px; border-bottom: 1px solid #248aaa; } - - .note-card .card-body{ + + .note-card .card-body { padding: 1rem; } - + .note-card pre { margin: 0; border-radius: 3px; } - + /* .small-note{ max-width: 15rem; } @@ -86,14 +86,13 @@ body.type-notes { } .huge-note{} */ - - .note-badge{ + + .note-badge { font-size: 10pt; } - - + /* ============= Device specific fixes ======= */ - + /* Large screens such as TV */ @media only screen and (min-width: 1824px) { .content-section { @@ -103,20 +102,18 @@ body.type-notes { max-width: 85%; } } - - + /* Extra large devices (large desktops, 1200px and up) */ - + @media (max-width: 1400px) { .note-card-holder { margin-left: 0px; } } - + @media (max-width: 1200px) { - } - + /* IPad Pro */ @media (max-width: 1024px) { .wrapper { @@ -130,12 +127,12 @@ body.type-notes { padding-bottom: 0.5rem; transition: all ease-out 0.3s; } - + .content-section.hide { max-width: 60%; transition: all ease-out 0.3s; } - + .content { overflow: hidden; } @@ -145,18 +142,14 @@ body.type-notes { .navbar-toggler { display: block; } - - #toc-toggler { - visibility: hidden; - } - + .navbar-collapse.lang-selector { display: block !important; position: absolute; right: 0; top: 0.5rem; } - + .note-card-holder { margin: 0; margin-top: 1.5rem; @@ -165,37 +158,36 @@ body.type-notes { position: relative; transition: all ease-out 0.3s; } - - .content-section.hide .note-card-holder{ - grid-template-columns: repeat(auto-fill, minmax(30rem,1fr)); + + .content-section.hide .note-card-holder { + grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); transition: all ease-out 0.3s; } } - + /* Large devices (desktops, 992px and up) */ - + @media (max-width: 992px) { .note-card-holder .note-card { max-width: 100%; min-width: 50%; transition: all ease-out 0.3s; } - + .content-section.hide .note-card-holder .note-card { max-width: 100%; min-width: 100%; transition: all ease-out 0.3s; } } - + /* Medium devices (tablets, 768px and up) */ - + @media only screen and (max-width: 768px) { - } - + /* Small devices (landscape phones, 576px and up) */ - + @media only screen and (max-width: 576px) { .wrapper { padding-left: 0px; @@ -203,33 +195,35 @@ body.type-notes { flex-flow: column; overflow: hidden; } - .content-section, .content-section.hide { + .content-section, + .content-section.hide { flex: 100%; max-width: 100%; padding-left: 0; width: 100%; transition: all ease-out 0.3s; } - + .content { width: 100%; padding-left: 0; padding-right: 0; transition: all ease-out 0.3s; } - + .content-section.hide .content { margin-top: 0; padding-top: 0; transition: all ease-out 0.3s; } - + .content-section.hide .note-card-holder { margin-top: 0.5rem; transition: all ease-out 0.3s; } - - .note-card-holder .note-card, .content-section.hide .note-card-holder .note-card { + + .note-card-holder .note-card, + .content-section.hide .note-card-holder .note-card { margin-left: 1%; margin-right: 1%; max-width: 98%; @@ -237,16 +231,16 @@ body.type-notes { transition: all ease-out 0.3s; } } - + /* iPhoneX, iPhone 6,7,8 */ @media only screen and (max-width: 375px) { } - + /* Galaxy S5, Moto G4 */ @media only screen and (max-width: 360px) { } - + /* iPhone 5 or before */ @media only screen and (max-width: 320px) { - } + } } diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss index cb78095c5..8a7efb8dc 100644 --- a/assets/styles/navigators/navbar.scss +++ b/assets/styles/navigators/navbar.scss @@ -1,10 +1,4 @@ -@mixin initial-nav-item-hover-effect() { - color: #f9fafc; - transition: all 0.3s ease-out; - transform: translateY(-2px); -} - -@mixin final-nav-item-hover-effect() { +@mixin nav-item-hover-effect() { color: #2098d1 !important; transition: all 0.3s ease-out; border-bottom: 2px solid #2098d1 !important; @@ -12,32 +6,6 @@ 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; @@ -50,54 +18,63 @@ padding-top: 0.4rem; text-align: center; - &.initial-navbar { - background-color: transparent; - .navbar-brand { - color: #c0ccda; - font-weight: 600; - } - li { - a { - color: #c0ccda; - &:hover { - @include initial-nav-item-hover-effect(); - } + background-color: #f9fafc; + color: #1c2d41; + transition: all 0.3s ease-out; + + .navbar-brand { + color: #1c2d41; + font-weight: 600; + } + + .sidebar-icon { + width: 32px; + height: 32px; + filter: invert(0.5); + } + + li { + a { + color: #1c2d41; + font-weight: 500; + transition: all 0.3s ease-out; + border-bottom: 2px solid transparent; + &:hover { + @include nav-item-hover-effect(); } } - .navbar-nav .active { - @include initial-nav-item-hover-effect(); - } - @include navbar-dropdown(); } - &.final-navbar { - background-color: #f9fafc; - color: #1c2d41; + .navbar-nav .active { + @include nav-item-hover-effect(); + } + + #top-navbar-divider { + background: rgba(0, 0, 0, 0.6); + } + + .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; - .navbar-brand { - color: #1c2d41; - font-weight: 600; - } - li { + &.show { + max-height: 100vh; + visibility: visible; + transition: all 0.3s ease-in; + a { - color: #1c2d41; - font-weight: 500; - transition: all 0.3s ease-out; - border-bottom: 2px solid#F9FAFC; + color: #1c2d41 !important; + &:hover { - @include final-nav-item-hover-effect(); + @include 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(); } .navbar-collapse { @@ -125,6 +102,22 @@ } } + &.transparent-navbar { + background-color: transparent; + .navbar-brand { + color: #c0ccda; + font-weight: 600; + } + li { + a { + color: #c0ccda; + } + } + .feather-menu { + stroke: #8392a5; + } + } + #top-navbar-divider { margin-top: 10px; background: rgba(192, 204, 218, 0.8); @@ -148,7 +141,7 @@ max-width: 100%; } - &.initial-navbar { + &.transparent-navbar { .navbar-nav .active, li a:hover { color: #2098d1; @@ -194,3 +187,10 @@ } } } + +.feather-sidebar, +.feather-menu { + width: 1.5rem; + height: 1.5rem; + stroke: #3c4858; +} diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss index a1bc52a79..d175dcf76 100644 --- a/assets/styles/navigators/sidebar.scss +++ b/assets/styles/navigators/sidebar.scss @@ -87,13 +87,13 @@ &:before { content: ''; display: block; - width: 20px; + width: 18px; height: 0; border-top: 1px solid; margin-top: -1px; position: absolute; top: 18px; - left: -3px; + left: -2px; } &:last-child:before { background: #f9fafc; @@ -116,9 +116,9 @@ display: block; width: 0; position: absolute; - top: -10px; - left: 0.3rem; - bottom: 0.9rem; + top: -8px; + left: 6px; + bottom: 0.8rem; border-left: 1px solid; } } @@ -247,3 +247,9 @@ } } } + +.feather-plus-circle, +.feather-minus-circle { + width: 1rem; + height: 1rem; +} diff --git a/layouts/404.html b/layouts/404.html index c24131130..bf57e5259 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,5 +1,5 @@ {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" (dict "baseURL" site.BaseURL "title" site.Title "hasToggleButton" false) }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "content" }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index fd126ef1f..6bc2de4d6 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,5 @@ {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" . }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "sidebar" }} diff --git a/layouts/_default/search.html b/layouts/_default/search.html index fe02dd296..75aad9829 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -1,5 +1,5 @@ {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" . }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "sidebar" }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 17ebd643f..c25decc8c 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,7 +3,7 @@ {{ end }} {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" . }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "sidebar" }} @@ -155,9 +155,6 @@ <h1>{{ .Page.Title }}</h1> </div> <!--scroll back to top--> <a id="scroll-to-top" class="btn"><i class="fas fa-chevron-circle-up"></i></a> - {{ if .IsTranslated }} - {{ partial "navigators/floating-lang-selector.html" . }} - {{ end }} </section> {{ end }} diff --git a/layouts/categories/list.html b/layouts/categories/list.html index 2e7c84adf..48a48a4c9 100644 --- a/layouts/categories/list.html +++ b/layouts/categories/list.html @@ -1,5 +1,5 @@ {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" . }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "sidebar" }} diff --git a/layouts/notes/list.html b/layouts/notes/list.html index f5fba56e0..4dea0f0f9 100644 --- a/layouts/notes/list.html +++ b/layouts/notes/list.html @@ -1,5 +1,5 @@ {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" . }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "sidebar" }} diff --git a/layouts/notes/single.html b/layouts/notes/single.html index b1ccb5136..c4a0bc525 100644 --- a/layouts/notes/single.html +++ b/layouts/notes/single.html @@ -1,5 +1,5 @@ {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" . }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "sidebar" }} diff --git a/layouts/partials/navigators/floating-lang-selector.html b/layouts/partials/navigators/floating-lang-selector.html deleted file mode 100644 index 8ad016e7e..000000000 --- a/layouts/partials/navigators/floating-lang-selector.html +++ /dev/null @@ -1,25 +0,0 @@ -{{ $pageURL:= .RelPermalink }} -{{ if site.IsMultiLingual }} - {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }} -{{ end }} - -<div class="dropdown languageSelector"> - <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - {{ if ne site.Params.features.flags.enable false }} - {{ $countryCode := partial "helpers/country-code.html" . }} - <span class="flag-icon flag-icon-{{$countryCode}}"></span> - {{ end }} - {{ site.Language.LanguageName }} - </a> - <div class="dropdown-menu" aria-labelledby="languageSelector"> - {{ range .Translations }} - <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}"> - {{ if ne site.Params.features.flags.enable false }} - {{ $countryCode := partial "helpers/country-code.html" . }} - <span class="flag-icon flag-icon-{{$countryCode}}"></span> - {{ end }} - {{ .Language.LanguageName }} - </a> - {{ end }} - </div> -</div> diff --git a/layouts/partials/navigators/lang-selector-2.html b/layouts/partials/navigators/lang-selector-2.html deleted file mode 100644 index f388d69aa..000000000 --- a/layouts/partials/navigators/lang-selector-2.html +++ /dev/null @@ -1,25 +0,0 @@ -{{ $pageURL:= .RelPermalink }} -{{ if site.IsMultiLingual }} - {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }} -{{ end }} - -<li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - {{ if ne site.Params.features.flags.enable false }} - {{ $countryCode := partial "helpers/country-code.html" . }} - <span class="flag-icon flag-icon-{{$countryCode}}"></span> - {{ end }} - {{ site.Language.LanguageName }} - </a> - <div class="dropdown-menu" aria-labelledby="languageSelector"> - {{ range .Translations }} - <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}"> - {{ if ne site.Params.features.flags.enable false }} - {{ $countryCode := partial "helpers/country-code.html" . }} - <span class="flag-icon flag-icon-{{$countryCode}}"></span> - {{ end }} - {{ .Language.LanguageName }} - </a> - {{ end }} - </div> -</li> diff --git a/layouts/partials/navigators/navbar-2.html b/layouts/partials/navigators/navbar-2.html deleted file mode 100644 index 8780ec643..000000000 --- a/layouts/partials/navigators/navbar-2.html +++ /dev/null @@ -1,63 +0,0 @@ -{{/* by default, don't use any logo */}} -{{ $mainLogo := "" }} -{{ $invertedLogo := "" }} - -{{/* if custom logo has been provided, use them */}} -{{ if site.Params.logo.main }} - {{ $mainLogo = site.Params.logo.main }} -{{ end }} -{{ if site.Params.logo.inverted }} - {{ $invertedLogo = site.Params.logo.inverted }} -{{ end }} - -{{/* resize the logos. don't resize svg because it is not supported */}} -{{ if $mainLogo }} - {{ $mainLogo = resources.Get $mainLogo}} - {{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }} - {{ $mainLogo = $mainLogo.Resize "42x" }} - {{ end }} - {{ $mainLogo = $mainLogo.RelPermalink}} -{{ end }} - -{{ if $invertedLogo }} - {{ $invertedLogo = resources.Get $invertedLogo}} - {{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}} - {{ $invertedLogo = $invertedLogo.Resize "42x" }} - {{ end }} - {{ $invertedLogo = $invertedLogo.RelPermalink}} -{{ end }} - -<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow"> - <div class="container"> - <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button"> - <span class="navbar-toggler-icon"></span> - </button> - <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}"> - {{ if $mainLogo }} - <img src="{{ $mainLogo }}" alt="Logo"> - {{ end }} - {{- site.Title -}} - </a> - <button class="navbar-toggler navbar-light" id="toc-toggler" type="button"> - <span class="navbar-toggler-icon"></span> - </button> - - <div class="collapse navbar-collapse lang-selector" id="top-nav-items"> - <ul class="navbar-nav ml-auto"> - {{ if .IsTranslated }} - {{ partial "navigators/lang-selector-2.html" . }} - {{ end }} - {{ if site.Params.features.darkMode.enable }} - {{ partial "navigators/theme-selector.html" . }} - {{ end }} - </ul> - </div> - </div> - <!-- Store the logo information in a hidden img for the JS --> - {{ if $mainLogo }} - <img src="{{ $mainLogo }}" class="d-none" id="main-logo" alt="Logo"> - {{ end }} - {{ if $invertedLogo }} - <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo"> - {{ end }} -</nav> diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html index b9fdd58ba..9071004f9 100644 --- a/layouts/partials/navigators/navbar.html +++ b/layouts/partials/navigators/navbar.html @@ -37,6 +37,11 @@ {{ $invertedLogo = $invertedLogo.RelPermalink}} {{ end }} +{{ $logo := $mainLogo }} +{{ if .IsHome }} + {{ $logo = $invertedLogo }} +{{ end }} + {{ $customMenus := site.Params.customMenus }} {{ if (index site.Data site.Language.Lang).site.customMenus }} {{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }} @@ -47,29 +52,34 @@ {{ $sections = (index site.Data site.Language.Lang).sections }} {{ end }} -<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar"> +<nav class="navbar navbar-expand-xl top-navbar shadow {{ if .IsHome}}transparent-navbar homepage{{end}}" id="top-navbar"> <div class="container"> + {{ if not .IsHome }} + <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button"> + <i data-feather="sidebar"></i> + </button> + {{ end }} <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}"> - {{ if $invertedLogo }} - <img src="{{ $invertedLogo }}" id="logo" alt="Logo"> + {{ if $logo }} + <img src="{{ $logo }}" id="logo" alt="Logo"> {{ end }} {{- site.Title -}} </a> <button - class="navbar-toggler navbar-dark" + class="navbar-toggler {{if .IsHome}}navbar-dark{{else}}navbar-light{{end}}" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-nav-items" aria-label="menu" > - <span class="navbar-toggler-icon"></span> + <i data-feather="menu"></i> </button> <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> - <a class="nav-link" href="#home">{{ i18n "home" }}</a> + <a class="nav-link" href="{{ site.BaseURL | relLangURL }}#home">{{ i18n "home" }}</a> </li> {{ if $sections }} {{ $sectionCount := 1 }} @@ -78,7 +88,7 @@ {{ $sectionCount = add $sectionCount 1}} {{ if le $sectionCount $maxVisibleSections }} <li class="nav-item"> - <a class="nav-link" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a> + <a class="nav-link" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a> </li> {{ end }} {{ end }} @@ -92,7 +102,7 @@ {{ if and (.section.enable) (.section.showOnNavbar) }} {{ $sectionCount = add $sectionCount 1}} {{ if gt $sectionCount $maxVisibleSections }} - <a class="dropdown-item" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a> + <a class="dropdown-item" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a> {{ end }} {{ end }} {{- end }} @@ -106,12 +116,12 @@ {{ end }} {{ if $blogEnabled }} <li class="nav-item"> - <a class="nav-link" id="blog-link" href="{{ "/posts/" | relLangURL }}">{{ i18n "posts" }}</a> + <a class="nav-link" id="blog-link" href="{{ path.Join (site.BaseURL | relLangURL) "posts" }}">{{ i18n "posts" }}</a> </li> {{ end }} {{ if $notesEnabled }} <li class="nav-item"> - <a class="nav-link" id="note-link" href="{{ "/notes/" | relLangURL }}">{{ i18n "notes" }}</a> + <a class="nav-link" id="note-link" href="{{ path.Join (site.BaseURL | relLangURL) "notes" }}">{{ i18n "notes" }}</a> </li> {{ end }} {{ range $customMenus }} diff --git a/layouts/partials/navigators/sidebar.html b/layouts/partials/navigators/sidebar.html index bb2032eab..2e90d1a7f 100644 --- a/layouts/partials/navigators/sidebar.html +++ b/layouts/partials/navigators/sidebar.html @@ -1,15 +1,15 @@ {{ range .menuItems }} {{ $class:= "" }} - {{ $icon:= "fa-plus-circle" }} + {{ $icon:= "plus-circle" }} <!-- If the current menu is the selected menu or it contain the selected menu, set expand icon and set "active" class --> {{ if or ($.ctx.HasMenuCurrent $.menuName .) ($.ctx.IsMenuCurrent $.menuName .)}} - {{ $icon = "fa-minus-circle"}} + {{ $icon = "minus-circle"}} {{ $class = "active" }} {{end}} {{ if .HasChildren }} <!-- Add current entry --> <li> - <i class="fas {{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a> + <i data-feather="{{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a> <!-- Add sub-tree --> <ul class="{{ $class }}"> {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }} diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index ea85579d6..84e93c857 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1 +1 @@ -{{ partial "helpers/script-bundle.html" }} +{{ partial "helpers/script-bundle.html" }} \ No newline at end of file diff --git a/layouts/tags/list.html b/layouts/tags/list.html index 50fb7c19a..4ff7fd7ab 100644 --- a/layouts/tags/list.html +++ b/layouts/tags/list.html @@ -1,5 +1,5 @@ {{ define "navbar" }} - {{ partial "navigators/navbar-2.html" . }} + {{ partial "navigators/navbar.html" . }} {{ end }} {{ define "sidebar" }} diff --git a/package-lock.json b/package-lock.json index 2788895d2..3cf02d9db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,11 +21,13 @@ "eslint-plugin-n": "^15.6.0", "eslint-plugin-no-jquery": "^2.7.0", "eslint-plugin-promise": "^6.1.1", + "feather-icons": "^4.29.1", "filterizr": "^2.2.4", "flag-icon-css": "^4.1.7", "fuse.js": "^6.6.2", "highlight.js": "^11.6.0", "imagesloaded": "^5.0.0", + "include-media": "^1.4.10", "ityped": "^1.0.3", "katex": "^0.16.3", "mark.js": "^8.11.1", @@ -504,6 +506,12 @@ "fsevents": "~2.3.2" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==", + "dev": true + }, "node_modules/cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -1677,6 +1685,16 @@ "reusify": "^1.0.4" } }, + "node_modules/feather-icons": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.1.tgz", + "integrity": "sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==", + "dev": true, + "dependencies": { + "classnames": "^2.2.5", + "core-js": "^3.1.3" + } + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -2202,6 +2220,12 @@ "node": ">=0.8.19" } }, + "node_modules/include-media": { + "version": "1.4.10", + "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.10.tgz", + "integrity": "sha512-TymQzKF7oWHbItEcEHOCponZ90lRr1I9QbYeD+qCxXy4Z0/pSpS4Ocz2bq3FMOERlXXrY9Sawsh9GjiObVQA6A==", + "dev": true + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -4134,6 +4158,12 @@ "readdirp": "~3.6.0" } }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==", + "dev": true + }, "cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -5020,6 +5050,16 @@ "reusify": "^1.0.4" } }, + "feather-icons": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.1.tgz", + "integrity": "sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==", + "dev": true, + "requires": { + "classnames": "^2.2.5", + "core-js": "^3.1.3" + } + }, "file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -5399,6 +5439,12 @@ "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", "dev": true }, + "include-media": { + "version": "1.4.10", + "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.10.tgz", + "integrity": "sha512-TymQzKF7oWHbItEcEHOCponZ90lRr1I9QbYeD+qCxXy4Z0/pSpS4Ocz2bq3FMOERlXXrY9Sawsh9GjiObVQA6A==", + "dev": true + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", diff --git a/package.hugo.json b/package.hugo.json index 3ae562b4e..cfe873915 100644 --- a/package.hugo.json +++ b/package.hugo.json @@ -44,6 +44,7 @@ "mermaid": "^9.2.1", "plyr": "^3.7.2", "popper.js": "^1.16.1", - "include-media": "^1.4.10" + "include-media": "^1.4.10", + "feather-icons": "^4.29.1" } } diff --git a/package.json b/package.json index 01cad5869..219bc35d6 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "eslint-plugin-n": "project", "eslint-plugin-no-jquery": "project", "eslint-plugin-promise": "project", + "feather-icons": "project", "filterizr": "project", "flag-icon-css": "project", "fuse.js": "project", "highlight.js": "project", "imagesloaded": "project", + "include-media": "project", "ityped": "project", "katex": "project", "mark.js": "project", @@ -48,11 +50,13 @@ "eslint-plugin-n": "^15.6.0", "eslint-plugin-no-jquery": "^2.7.0", "eslint-plugin-promise": "^6.1.1", + "feather-icons": "^4.29.1", "filterizr": "^2.2.4", "flag-icon-css": "^4.1.7", "fuse.js": "^6.6.2", "highlight.js": "^11.6.0", "imagesloaded": "^5.0.0", + "include-media": "^1.4.10", "ityped": "^1.0.3", "katex": "^0.16.3", "mark.js": "^8.11.1", From bd8c8f8af35b1220d0186712d35017f30c6394ad Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Tue, 26 Sep 2023 23:41:21 +0600 Subject: [PATCH 13/17] Refactor 404 page CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- assets/styles/layouts/404.scss | 111 ++++++++++++--------------------- 1 file changed, 40 insertions(+), 71 deletions(-) diff --git a/assets/styles/layouts/404.scss b/assets/styles/layouts/404.scss index e4b12650c..d496fdb06 100644 --- a/assets/styles/layouts/404.scss +++ b/assets/styles/layouts/404.scss @@ -2,94 +2,63 @@ body.kind-404 { #sidebar-toggler { display: none; } - + .notFound { padding-top: 5rem; text-align: center; padding-bottom: 8rem; + + img { + height: 500px; + } + + h1 { + font-style: italic; + } + + .message { + position: absolute; + max-width: 20rem; + top: 40%; + left: 30%; + } } - - .notFound img { - height: 500px; - } - - .notFound h1 { - font-style: italic; - } - - .notFound .message { - position: absolute; - max-width: 20rem; - top: 40%; - left: 30%; - } - - /* ============= 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) { + + @include media('<=very-large') { .notFound .message { top: 50%; left: 25%; } } - - /* IPad Pro */ - @media (max-width: 1024px) { - } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { + + @include media('<=large') { .notFound .message { top: 46%; left: 25%; } } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { - .notFound img { - height: 400px; - } - - .notFound .message { - top: 20rem; - left: 4rem; + + @include media('<=medium') { + .notFound { + img { + height: 400px; + } + .message { + top: 20rem; + left: 4rem; + } } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { - .notFound img { - height: 250px; + + @include media('<=small') { + .notFound { + img { + height: 250px; + } + .message { + top: 20rem; + left: 2rem; + } } - - .notFound .message { - top: 20rem; - 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) { - } } From 99752a787ac1a2f6f332203d14f39e5c226a5d2b Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Wed, 27 Sep 2023 00:03:46 +0600 Subject: [PATCH 14/17] Refactor list page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- assets/styles/layouts/list.scss | 269 +++++++++++++++----------------- 1 file changed, 126 insertions(+), 143 deletions(-) diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss index cd368d921..a46325af3 100644 --- a/assets/styles/layouts/list.scss +++ b/assets/styles/layouts/list.scss @@ -9,183 +9,166 @@ body.kind-page { padding: 0; margin: 0; width: 100%; - } - - .content-section { - flex: 80%; - order: 2; - /* background-color: lightseagreen; */ - padding: 0; - position: relative; - padding-left: 0.5rem; - padding-right: 0.5rem; - } - - .content { - padding: 0; - position: relative; - padding-top: 2rem; - min-height: 130vh; - } - - .post-card-holder { - margin-top: 32px; - margin-left: auto; - padding: 0; - display: flex; - flex-flow: wrap; - } - - .paginator { - width: -moz-fit-content; - width: fit-content; - margin: auto; - } - .paginator .page-item > a { - color: #248aaa; - } - - .paginator .page-item.active > a { - background-color: #248aaa; - color: #f9fafc; - } - - .navbar-toggler { - display: none; - } - - .pagination { - margin-left: auto; - margin-right: auto; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - width: -moz-fit-content; - width: fit-content; - } - - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { .content-section { - padding-left: 1rem; - padding-right: 1rem; - flex: 85%; - max-width: 85%; - } - } - - /* Extra large devices (large desktops, 1200px and up) */ - - @media (max-width: 1400px) { - .post-card-holder { - margin-left: 0px; - } - } - - @media (max-width: 1200px) { - } - - /* IPad Pro */ - @media (max-width: 1024px) { - .wrapper { - padding-left: 0px; - padding-right: 0px; - } - .content-section { - padding: 0; - flex: 60%; + flex: 80%; order: 2; - padding-bottom: 0.5rem; - } - - .content { - overflow: hidden; - } - .container { - max-width: 100%; - } - .navbar-toggler { - display: block; - } - - .navbar-collapse.lang-selector { - display: block !important; - position: absolute; - right: 0; - top: 0.5rem; - } - - .post-card-holder { - margin: 0; - margin-top: 1.5rem; + /* background-color: lightseagreen; */ + padding: 0; + position: relative; padding-left: 0.5rem; padding-right: 0.5rem; - position: relative; - transition: all ease-out 0.3s; + + .content { + padding: 0; + position: relative; + padding-top: 2rem; + min-height: 130vh; + + .post-card-holder { + margin-top: 32px; + margin-left: auto; + padding: 0; + display: flex; + flex-flow: wrap; + } + + .paginator { + width: -moz-fit-content; + width: fit-content; + margin: auto; + + .pagination { + margin-left: auto; + margin-right: auto; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + width: -moz-fit-content; + width: fit-content; + } + + .page-item { + & > a { + color: #248aaa; + } + + &.active > a { + background-color: #248aaa; + color: #f9fafc; + } + } + } + } } } - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + @include media('<medium') { + .post-card { + margin-left: 1%; + margin-right: 1%; + width: 98%; + } .wrapper { padding-left: 0px; padding-right: 0px; flex-flow: column; overflow: hidden; - } - .content-section { - flex: 100%; - max-width: 100%; - padding-left: 0; - width: 100%; - } - .content { - width: 100%; - padding-left: 0; - padding-right: 0; - transition: all ease-out 0.3s; - } - - .content-section.hide .content { - margin-top: 0; - padding-top: 0; - transition: all ease-out 0.3s; - } - - .content-section.hide .post-card-holder { - margin-top: 0.5rem; - transition: all ease-out 0.3s; - } - } - @include media('<medium') { - .post-card { - margin-left: 1%; - margin-right: 1%; - width: 98%; + .content-section { + flex: 100%; + max-width: 100%; + padding-left: 0; + width: 100%; + + .content { + width: 100%; + padding-left: 0; + padding-right: 0; + transition: all ease-out 0.3s; + } + + &.hide { + .content { + margin-top: 0; + padding-top: 0; + transition: all ease-out 0.3s; + } + .post-card-holder { + margin-top: 0.5rem; + transition: all ease-out 0.3s; + } + } + } } } + @include media('>=medium', '<large') { .post-card { width: calc(100% / 2); } + .content-section.hide { + .post-card { + width: 100%; + } + } } + @include media('>=large', '<very-large') { .post-card { width: calc(100% / 3); } + .wrapper { + padding-left: 0px; + padding-right: 0px; + + .content-section { + padding: 0; + flex: 60%; + order: 2; + padding-bottom: 0.5rem; + + .content { + overflow: hidden; + + .post-card-holder { + margin: 0; + margin-top: 1.5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + position: relative; + transition: all ease-out 0.3s; + } + } + .container { + max-width: 100%; + } + &.hide { + .post-card { + width: calc(100% / 2); + } + } + } + } } + @include media('>=very-large', '<extra-large') { .post-card { width: calc(100% / 4); } + .post-card-holder { + margin-left: 0px; + } } + @include media('>=extra-large') { .post-card { width: calc(100% / 5); } + .content-section { + padding-left: 1rem; + padding-right: 1rem; + flex: 85%; + max-width: 85%; + } } } From dfeaea8b26ec2475316d9d157858b7016a19a236 Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Wed, 27 Sep 2023 01:24:26 +0600 Subject: [PATCH 15/17] Fix notes page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- assets/styles/layouts/notes.scss | 347 ++++++++++---------------- assets/styles/navigators/sidebar.scss | 1 + 2 files changed, 139 insertions(+), 209 deletions(-) diff --git a/assets/styles/layouts/notes.scss b/assets/styles/layouts/notes.scss index c0ee6b320..29d22dce8 100644 --- a/assets/styles/layouts/notes.scss +++ b/assets/styles/layouts/notes.scss @@ -4,172 +4,120 @@ body.type-notes { padding: 0; margin: 0; width: 100%; - } - - .content-section { - flex: 80%; - max-width: 80%; - order: 2; - /* background-color: lightseagreen; */ - padding: 0; - position: relative; - padding-left: 0.5rem; - padding-right: 0.5rem; - } - - .content { - padding: 0; - position: relative; - padding-top: 2rem; - min-height: 130vh; - } - - .note-card-holder { - padding-top: 2rem; - display: grid; - grid-gap: 0.5rem; - grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); - grid-auto-rows: 20px; - } - - /* .note-collection { - display: flex; - flex-wrap: wrap; - } */ - - .note-card { - align-self: flex-start; - } - - .note-card .card { - margin: 0.5rem; - } - - .note-title { - padding-left: 1rem; - color: #248aaa; - } - - .note-title span { - background: #e5e9f2; - padding-right: 5px; - } - - .note-title:before { - content: ''; - display: inline-block; - width: 98%; - height: 100%; - margin-bottom: -26px; - border-bottom: 1px solid #248aaa; - } - - .note-card .card-body { - padding: 1rem; - } - - .note-card pre { - margin: 0; - border-radius: 3px; - } - - /* .small-note{ - max-width: 15rem; - } - - .medium-note{ - max-width: 25rem; - } - - .large-note{ - max-width: 40rem; - } - - .huge-note{} */ - - .note-badge { - font-size: 10pt; - } - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { .content-section { - padding-left: 1rem; - padding-right: 1rem; - flex: 85%; - max-width: 85%; - } - } - - /* Extra large devices (large desktops, 1200px and up) */ + flex: 80%; + max-width: 80%; + order: 2; + /* background-color: lightseagreen; */ + padding: 0; + position: relative; + padding-left: 0.5rem; + padding-right: 0.5rem; - @media (max-width: 1400px) { + .content { + padding: 0; + position: relative; + padding-top: 2rem; + min-height: 130vh; + + .note-card-holder { + margin-top: 2rem; + display: flex; + flex-flow: wrap; + margin-left: auto; + padding: 0; + + .note-card { + align-self: flex-start; + flex: auto; + + .card { + margin: 0.5rem; + + .card-body { + padding: 1rem; + + pre { + margin: 0; + border-radius: 3px; + } + } + } + } + + .note-title { + padding-left: 1rem; + color: #248aaa; + + &:before { + content: ''; + display: inline-block; + width: 98%; + height: 100%; + margin-bottom: -26px; + border-bottom: 1px solid #248aaa; + } + + span { + background: #e5e9f2; + padding-right: 5px; + } + } + } + } + } + } + + @include media('<=extra-large') { .note-card-holder { - margin-left: 0px; + .note-card { + flex: 30%; + } } } - @media (max-width: 1200px) { - } - - /* IPad Pro */ - @media (max-width: 1024px) { + @include media('<=large') { .wrapper { padding-left: 0px; padding-right: 0px; - } - .content-section { - padding: 0; - max-width: 100%; - order: 2; - padding-bottom: 0.5rem; - transition: all ease-out 0.3s; - } - - .content-section.hide { - max-width: 60%; - transition: all ease-out 0.3s; - } - - .content { - overflow: hidden; - } - .container { - max-width: 100%; - } - .navbar-toggler { - display: block; - } - - .navbar-collapse.lang-selector { - display: block !important; - position: absolute; - right: 0; - top: 0.5rem; - } - - .note-card-holder { - margin: 0; - margin-top: 1.5rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - position: relative; - transition: all ease-out 0.3s; - } - - .content-section.hide .note-card-holder { - grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); - transition: all ease-out 0.3s; - } - } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { + .content-section { + padding: 0; + max-width: 100%; + order: 2; + padding-bottom: 0.5rem; + transition: all ease-out 0.3s; + + .content { + overflow: hidden; + + .note-card-holder { + margin: 0; + margin-top: 1.5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + position: relative; + transition: all ease-out 0.3s; + .note-card { + flex: 50%; + } + } + } + .container { + max-width: 100%; + } + + &.hide { + max-width: 60%; + transition: all ease-out 0.3s; + } + } + } + } + + @include media('<=medium') { .note-card-holder .note-card { - max-width: 100%; + max-width: 50%; min-width: 50%; transition: all ease-out 0.3s; } @@ -181,66 +129,47 @@ body.type-notes { } } - /* 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') { .wrapper { padding-left: 0px; padding-right: 0px; flex-flow: column; overflow: hidden; - } - .content-section, - .content-section.hide { - flex: 100%; - max-width: 100%; - padding-left: 0; - width: 100%; - transition: all ease-out 0.3s; - } - - .content { - width: 100%; - padding-left: 0; - padding-right: 0; - transition: all ease-out 0.3s; - } - .content-section.hide .content { - margin-top: 0; - padding-top: 0; - transition: all ease-out 0.3s; + .content-section { + .content { + width: 100%; + padding-left: 0; + padding-right: 0; + transition: all ease-out 0.3s; + + .note-card-holder { + margin-top: 0.5rem; + transition: all ease-out 0.3s; + + .note-card { + flex: 100%; + max-width: 100%; + transition: all ease-out 0.3s; + } + } + } + &.hide { + flex: 100%; + max-width: 100%; + padding-left: 0; + width: 100%; + transition: all ease-out 0.3s; + + .content { + .note-card-holder { + margin-top: 0; + padding-top: 0; + transition: all ease-out 0.3s; + } + } + } + } } - - .content-section.hide .note-card-holder { - margin-top: 0.5rem; - transition: all ease-out 0.3s; - } - - .note-card-holder .note-card, - .content-section.hide .note-card-holder .note-card { - margin-left: 1%; - margin-right: 1%; - max-width: 98%; - min-width: 98%; - transition: all ease-out 0.3s; - } - } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { } } diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss index d175dcf76..82e9fb177 100644 --- a/assets/styles/navigators/sidebar.scss +++ b/assets/styles/navigators/sidebar.scss @@ -160,6 +160,7 @@ position: sticky; top: 2.5rem; width: 100%; + padding-bottom: 1rem; max-height: calc(100vh - 2.5rem); } From b34c6860be0131f9d1b83baaafcaa897b538cb28 Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Thu, 28 Sep 2023 00:57:09 +0600 Subject: [PATCH 16/17] Refactor single page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- assets/styles/components/buttons.scss | 28 +- assets/styles/layouts/single.scss | 754 +++++++----------- assets/styles/variables.scss | 29 +- layouts/_default/single.html | 24 +- .../navigators/next-prev-navigator.html | 4 +- 5 files changed, 362 insertions(+), 477 deletions(-) diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss index 689e122e3..f80b3bf36 100644 --- a/assets/styles/components/buttons.scss +++ b/assets/styles/components/buttons.scss @@ -50,7 +50,6 @@ color: #8392a5; } - .tags { text-align: left; @@ -66,3 +65,30 @@ color: #f9fafc; } } + +.icon-button { + background-color: #3c4858; + color: #e5e9f2 !important; + padding: 0.25rem 0.5rem; + line-height: 1.5; + border-radius: 0.2rem; + border: none; + + &:hover, + &:focus { + background-color: #248aaa !important; + transition: all 0.3s ease-out !important; + } +} + +.filled-button { + color: #f9fafc !important; + background-color: #248aaa !important; + transition: all 0.3s ease-out; + + &:hover, + &:active { + background-color: #0cafe1 !important; + transition: all 0.3 ease-out; + } +} diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss index 2ece70b3d..faa00b987 100644 --- a/assets/styles/layouts/single.scss +++ b/assets/styles/layouts/single.scss @@ -2,10 +2,6 @@ body.kind-page { background-color: #e5e9f2; position: relative; - .read-area { - background-color: #f9fafc; - } - .wrapper { display: flex; padding: 0; @@ -13,269 +9,186 @@ body.kind-page { width: 100%; justify-content: space-between; position: relative; + + .content-section { + flex: 60%; + max-width: 60%; + order: 2; + padding: 0; + position: relative; + padding-left: 1rem; + padding-right: 1rem; + + .content { + background: #e5e9f2; + padding-top: 1.5rem; + + .read-area { + background-color: #f9fafc; + + .hero-area { + margin-top: 3rem; + width: 100%; + height: 400px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + + .page-content { + width: 100%; + position: relative; + top: -4.5rem; + padding: 15px; + + .author-profile { + position: relative; + align-content: center; + text-align: center; + + .author-name { + margin-top: 0px; + } + + img { + height: 120px; + width: 120px; + -o-object-fit: cover; + object-fit: cover; + background-color: #f9fafc; + padding: 5px; + } + p { + color: #8392a5; + } + } + + .title { + text-align: center; + } + .tags { + text-align: center; + } + + .post-content { + padding: 15px; + + h1, + h2 { + margin-top: 1.4rem; + } + + h3, + h4, + h5, + h6 { + margin-top: 1.3rem; + } + + blockquote { + border-left: 4px solid #248aaa; + background-color: #248baa15; + padding: 0.3rem; + padding-left: 1rem; + + & > p { + color: #3c4858; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + } + } + + .next-prev-navigator { + padding-left: 1rem !important; + padding-right: 1rem !important; + + .next-article { + text-align: right; + } + + .next-prev-text { + white-space: break-spaces; + } + } + } + } + } + } + + .toc-section { + flex: 20%; + order: 3; + max-width: 20%; + transition: all ease-out 0.5s; + + .toc-holder { + position: sticky; + top: 4.5rem; + padding-top: 1rem; + overflow-x: hidden; + overflow-y: auto; + background-color: #f9fafc; + margin-right: 0.5rem; + transition: all ease-out 0.3s; + + .toc { + position: relative; + padding-top: 0px; + transition: all ease-out 0.3s; + + nav { + padding-top: 0px; + margin-top: 0px; + display: flex; + flex-direction: column; + align-items: flex-start; + transition: all ease-out 0.3s; + + ul { + list-style: none; + padding-left: 0.5rem; + margin-bottom: 0rem; + width: 100%; + } + + .nav-link { + padding: 0; + padding-left: 0.5rem; + transition: all ease-out 0.3s; + color: #1c2d41; + + &:hover, + &:focus, + &.active { + padding-left: 1rem; + padding-right: 0.5rem; + background-color: #248aaa; + color: #f9f9f9; + transition: all ease-out 0.3s; + } + } + } + } + } + } + + .disquss { + padding: 10px; + } + + .share-buttons { + @include brand-background(); + .btn { + border: none !important; + } + } } - - .content-section { - flex: 60%; - max-width: 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; - } - - .toc-holder { - position: sticky; - top: 4.5rem; - overflow-x: hidden; - overflow-y: auto; - background-color: #f9fafc; - margin-right: 0.5rem; - /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */ - transition: all ease-out 0.3s; - } - - .toc { - position: relative; - padding-top: 0px; - 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; - } - - .toc ul { - list-style: none; - padding-left: 0.5rem; - margin-bottom: 0rem; - width: 100%; - } - - .toc .nav-link { - padding: 0; - padding-left: 0.5rem; - 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; - } - - .hero-area { - margin-top: 3rem; - width: 100%; - height: 400px; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - } - - .page-content { - width: 100%; - position: relative; - top: -4.5rem; - padding: 15px; - } - - .author-profile { - position: relative; - align-content: center; - text-align: center; - } - - .author-name { - margin-top: 0px; - } - - .author-profile img { - height: 120px; - width: 120px; - -o-object-fit: cover; - object-fit: cover; - background-color: #f9fafc; - padding: 5px; - } - .author-profile p { - color: #8392a5; - } - - .title { - text-align: center; - } - - .post-content { - padding: 15px; - } - - .post-content h1, - h2 { - margin-top: 1.4rem; - } - - .post-content h3, - h4, - h5, - h6 { - margin-top: 1.3rem; - } - - .post-content blockquote { - border-left: 4px solid #248aaa; - background-color: #248baa15; - padding: 0.3rem; - padding-left: 1rem; - } - - .post-content blockquote > p { - color: #3c4858; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } - - .next-prev-navigator { - padding-left: 10px; - padding-right: 10px; - } - - .next-prev-navigator a { - color: #2098d1; - transition: all 0.3s ease-out; - } - - .next-prev-navigator a:hover { - color: #3c4858; - transition: all 0.3 ease-out; - } - - .next-prev-navigator .next-article { - text-align: right; - } - - .next-prev-navigator .next-article a { - transition: all 0.3s ease-out; - } - - .next-prev-navigator .previous-article a { - transition: all 0.3s ease-out; - } - - .next-prev-navigator .btn-outline-info { - color: #f9fafc !important; - border-color: #e5e9f2 !important; - background-color: #248aaa !important; - transition: all 0.3s ease-out; - } - - .next-prev-navigator .next-prev-text { - white-space: break-spaces; - } - - .next-prev-navigator .btn-outline-info:hover { - color: #3c4858 !important; - background-color: #e5e9f2 !important; - transition: all 0.3s ease-out; - } - - .disquss { - padding: 10px; - } - - .share-buttons .btn { - color: #e5e9f2 !important; - transition: all 0.3s ease-out !important; - } - - .share-buttons .btn:hover, - .share-buttons .btn:focus { - background-color: #248aaa !important; - border-color: #248aaa !important; - transition: all 0.3s ease-out !important; - } - - .share-buttons .facebook-btn { - background-color: #4267b2 !important; - border-color: #4267b2 !important; - } - - .share-buttons .twitter-btn { - background-color: #1da1f2 !important; - border-color: #1da1f2 !important; - } - - .share-buttons .reddit-btn { - background-color: #ff4500 !important; - border-color: #ff4500 !important; - } - - .share-buttons .tumblr-btn { - background-color: #34465d !important; - border-color: #34465d !important; - } - - .share-buttons .pocket-btn { - background-color: #ef4056 !important; - border-color: #ef4056 !important; - } - - .share-buttons .linkedin-btn { - background-color: #2867b2 !important; - border-color: #2867b2 !important; - } - - .share-buttons .diaspora-btn { - background-color: #3c4858 !important; - border-color: #3c4858 !important; - } - - .share-buttons .mastodon-btn { - background-color: #2791da !important; - border-color: #2791da !important; - } - - .share-buttons .whatsapp-btn { - background-color: #4ac959 !important; - border-color: #4ac959 !important; - } - - .share-buttons .email-btn { - background-color: #3c4858 !important; - border-color: #3c4858 !important; - transition: all 0.3s ease-out !important; - } - + .btn-improve-page { text-align: right; } - - .languageSelector { - display: none; - } - + #scroll-to-top { position: fixed; bottom: 0rem; @@ -284,29 +197,22 @@ body.kind-page { font-size: 24pt; z-index: 900000; visibility: hidden; - } - - #scroll-to-top i { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - background-color: #f9f9f9; - border-radius: 50%; - } - - #scroll-to-top:hover { - color: #2098d1; - } - - #scroll-to-top.show { - visibility: visible; - } - .tags { - text-align: center; + + &:hover { + color: #2098d1; + } + &.show { + visibility: visible; + } + + i { + box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + background-color: #f9f9f9; + border-radius: 50%; + } } - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { + @include media('<=ultra-large') { .content-section { flex: 65%; max-width: 65%; @@ -315,191 +221,117 @@ body.kind-page { 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%; - max-width: 100%; - order: 2; - overflow: hidden; - } - .content { - overflow: hidden; - } + + @include media('<=large') { .container { max-width: 100%; } - - .toc-section { - order: 3; - flex: 0%; - max-width: 0%; - transition: all ease-out 0.3s; - } - .toc-section.hide { - flex: 40%; - max-width: 40%; - margin-left: 0.5rem; - transition: all ease-out 0.3s; - } - - .toc-holder { - top: 3rem; - max-height: calc(100vh - 3rem); - } - - .navbar-toggler { - display: block; - } - - .navbar-collapse.lang-selector { - display: none; - } - - .languageSelector { - display: block; - } - - .hero-area { - height: 300px; - margin-top: 1rem; - } - - .page-content { - 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) { - #scroll-to-top { - right: 8rem; + + .wrapper { + padding-left: 0px; + padding-right: 0px; + + .content-section { + padding: 0; + flex: 60%; + max-width: 100%; + order: 2; + overflow: hidden; + + .content { + overflow: hidden; + + .read-area { + .hero-area { + height: 300px; + margin-top: 1rem; + } + + .page-content { + padding: 0px; + } + } + } + } + .toc-section { + display: none; + } + + .share-buttons { + max-width: 48%; + } + + .btn-improve-page { + margin-right: 1rem; + max-width: 48%; + } + + #disqus_thread, + .dsq-brlink { + padding: 5px; + } } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + + @include media('<=small') { .wrapper { padding: 0px; display: flex; flex-direction: column; + + .content-section { + padding: 0; + flex: 100%; + max-width: 100%; + order: 3; + + .content { + .read-area { + .hero-area { + height: 200px; + margin-top: 1rem; + } + + .page-content { + padding: 0px; + .next-prev-navigator { + .previous-article { + text-align: center; + margin: 5px; + + a { + width: 100%; + } + } + .next-article { + text-align: center; + margin: 5px; + a { + width: 100%; + } + } + } + } + } + } + } + .share-buttons { + max-width: 100%; + } + + .btn-improve-page { + text-align: start; + max-width: 100%; + } + + #scroll-to-top { + right: 0.5rem; + } + + #disqus_thread, + .dsq-brlink { + padding: 5px; + } } - - .content-section { - padding: 0; - flex: 100%; - max-width: 100%; - order: 3; - } - - .toc-section { - order: 2; - width: 100%; - height: -moz-fit-content; - height: fit-content; - max-height: 0; - max-width: 100%; - transition: all ease-out 0.5s; - } - - .toc-section.hide { - margin-top: 2.5rem; - position: relative; - /* height: fit-content; */ - flex: 100%; - height: -moz-fit-content; - 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; - } - - .toc-holder { - max-height: 0; - margin-right: 0; - overflow: hidden; - transition: all ease-out 0.5s; - } - .toc-section.hide .toc-holder { - max-height: 200vh; - transition: all ease-out 0.5s; - } - - .navbar-toggler { - display: block; - } - - .hero-area { - height: 200px; - margin-top: 1rem; - } - - .page-content { - padding: 0px; - } - - .next-prev-navigator .previous-article { - text-align: center; - margin: 5px; - } - .next-prev-navigator .next-article { - text-align: center; - margin: 5px; - } - .previous-article a, - .next-article a { - width: 100%; - } - - #disqus_thread, - .dsq-brlink { - 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) { - } -} \ No newline at end of file +} diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss index 8316c48ea..507a6f01f 100644 --- a/assets/styles/variables.scss +++ b/assets/styles/variables.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; + $breakpoints: ( tiny: 320px, small: 640px, @@ -8,10 +10,35 @@ $breakpoints: ( ultra-large: 2560px, ); -@mixin section-title-adjustment(){ +$brand-colors: ( + 'facebook': #3b5998, + 'twitter': #1da1f2, + 'linkedin': #0077b5, + 'reddit': #ff4500, + 'tumblr': #35465c, + 'pocket': #ef4056, + 'diaspora': #1e1e1e, + 'whatsapp': #25d366, +); + +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +@mixin section-title-adjustment() { h1 > span { margin-top: -55px; /* Size of fixed header */ padding-bottom: 55px; display: block; } } + +@mixin brand-background() { + @each $brand, $color in $brand-colors { + .bg-#{$brand} { + background-color: $color; + } + } +} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index c25decc8c..761f66828 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -55,56 +55,56 @@ <h1>{{ .Page.Title }}</h1> <!-- Share or Contribute --> <div class="row pl-3 pr-3"> <!--Social Media Share Buttons--> - <div class="col-md-6 share-buttons"> - {{ if site.Params.features.blog.shareButtons }} + <div class="col-md-6 share-buttons"> + {{ if site.Params.features.blog.shareButtons }} <strong>{{ i18n "share_on" }}:</strong> {{ if site.Params.features.blog.shareButtons.facebook }} - <a class="btn btn-sm facebook-btn" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank"> + <a class="btn icon-button bg-facebook" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank"> <i class="fab fa-facebook"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.twitter }} - <a class="btn btn-sm twitter-btn" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank"> + <a class="btn icon-button bg-twitter" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank"> <i class="fab fa-twitter"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.reddit }} - <a class="btn btn-sm reddit-btn" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank"> + <a class="btn icon-button bg-reddit" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank"> <i class="fab fa-reddit"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.tumblr }} - <a class="btn btn-sm tumblr-btn" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank"> + <a class="btn icon-button bg-tumblr" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank"> <i class="fab fa-tumblr"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.pocket }} - <a class="btn btn-sm pocket-btn" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank"> + <a class="btn icon-button bg-pocket" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank"> <i class="fab fa-get-pocket"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.linkedin }} - <a class="btn btn-sm linkedin-btn" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank"> + <a class="btn icon-button bg-linkedin" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank"> <i class="fab fa-linkedin"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.diaspora }} - <a class="btn btn-sm diaspora-btn" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank"> + <a class="btn icon-button bg-diaspora" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank"> <i class="fab fa-diaspora"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.mastodon }} - <a class="btn btn-sm mastodon-btn" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank"> + <a class="btn icon-button bg-mastodon" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank"> <i class="fab fa-mastodon"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.whatsapp }} - <a class="btn btn-sm whatsapp-btn" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank"> + <a class="btn icon-button bg-whatsapp" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank"> <i class="fab fa-whatsapp"></i> </a> {{ end }} {{ if site.Params.features.blog.shareButtons.email }} - <a class="btn btn-sm email-btn" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank"> + <a class="btn icon-button" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank"> <i class="fas fa-envelope-open-text"></i> </a> {{ end }} diff --git a/layouts/partials/navigators/next-prev-navigator.html b/layouts/partials/navigators/next-prev-navigator.html index 378c97d48..45a8b7daa 100644 --- a/layouts/partials/navigators/next-prev-navigator.html +++ b/layouts/partials/navigators/next-prev-navigator.html @@ -22,7 +22,7 @@ <div class="row next-prev-navigator"> {{ if $prevPage }} <div class="col-md-6 previous-article"> - <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn btn-outline-info"> + <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn filled-button"> <div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div> <div class="next-prev-text">{{ $prevPage.Title }}</div> </a> @@ -34,7 +34,7 @@ {{ $columnWidth = "col-md-6" }} {{ end}} <div class="{{ $columnWidth }} next-article"> - <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn btn-outline-info"> + <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn filled-button"> <div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div> <div class="next-prev-text">{{ $nextPage.Title }}</div> </a> From 6d5d1b98510660a082c239b98fbd966f94cb646b Mon Sep 17 00:00:00 2001 From: hossainemruz <hossainemruz@gmail.com> Date: Fri, 29 Sep 2023 04:22:23 +0600 Subject: [PATCH 17/17] Introduce color variables Signed-off-by: hossainemruz <hossainemruz@gmail.com> --- assets/styles/application.template.scss | 15 +- assets/styles/components/buttons.scss | 57 ++- assets/styles/components/cards.scss | 17 +- assets/styles/components/images.scss | 34 ++ assets/styles/components/links.scss | 63 +++- assets/styles/components/misc.scss | 33 ++ assets/styles/components/tables.scss | 74 ++++ assets/styles/components/texts.scss | 62 ++++ assets/styles/layouts/list.scss | 14 +- assets/styles/layouts/main.scss | 340 ++---------------- assets/styles/layouts/notes.scss | 26 +- assets/styles/layouts/single.scss | 51 +-- assets/styles/mixins.scss | 30 ++ assets/styles/navigators/navbar.scss | 114 +++--- assets/styles/navigators/sidebar.scss | 53 ++- assets/styles/sections/about.scss | 308 +++++----------- assets/styles/sections/accomplishments.scss | 10 +- assets/styles/sections/achievements.scss | 28 +- assets/styles/sections/education.scss | 29 +- assets/styles/sections/experiences.scss | 12 +- assets/styles/sections/footer.scss | 40 ++- assets/styles/sections/home.scss | 85 ++--- assets/styles/sections/projects.scss | 4 +- assets/styles/sections/publications.scss | 10 +- assets/styles/sections/recent-posts.scss | 2 +- assets/styles/sections/skills.scss | 4 +- assets/styles/variables.scss | 52 +-- layouts/_default/baseof.html | 2 +- layouts/_default/single.html | 2 +- layouts/index.html | 8 +- .../partials/navigators/lang-selector.html | 6 +- layouts/partials/navigators/navbar.html | 2 +- layouts/partials/sections/education-alt.html | 8 +- layouts/partials/sections/education.html | 8 +- .../sections/experiences/single-position.html | 2 +- 35 files changed, 696 insertions(+), 909 deletions(-) create mode 100644 assets/styles/components/images.scss create mode 100644 assets/styles/components/misc.scss create mode 100644 assets/styles/components/tables.scss create mode 100644 assets/styles/components/texts.scss create mode 100644 assets/styles/mixins.scss diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss index ca89c3126..053a1b843 100644 --- a/assets/styles/application.template.scss +++ b/assets/styles/application.template.scss @@ -12,6 +12,16 @@ @import '@fontsource/mulish/700'; @import './variables'; +@import './mixins'; + +// components +@import './components/cards'; +@import './components/buttons'; +@import './components/links'; +@import './components/texts'; +@import './components/images'; +@import './components/tables'; +@import './components/misc'; // layouts @import './layouts/main'; @@ -39,11 +49,6 @@ @import './sections/footer'; -// components -@import './components/cards'; -@import './components/buttons'; -@import './components/links'; - // override @import './override'; diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss index f80b3bf36..d87f102fd 100644 --- a/assets/styles/components/buttons.scss +++ b/assets/styles/components/buttons.scss @@ -1,45 +1,44 @@ .btn-dark { - background-color: #3c4858 !important; - border-color: #3c4858 !important; - color: #e5e9f2 !important; - transition: all 0.3s ease-out !important; + background-color: $text-color !important; + border-color: $text-color !important; + color: $text-over-accent-color !important; + @include transition(); &:hover, &:focus { - background-color: #248aaa !important; - border-color: #248aaa !important; - transition: all 0.3s ease-out !important; + background-color: $accent-color !important; + border-color: $accent-color !important; + @include transition(); } } .btn-info { - background-color: #248aaa !important; - color: #e5e9f2 !important; + background-color: $accent-color !important; + color: $text-over-accent-color !important; &:hover, &:focus { - background-color: #2098d1 !important; - color: #e5e9f2 !important; + background-color: $hover-over-accent-color !important; } } .btn-outline-info { - color: #2098d1 !important; - border-color: #2098d1 !important; + color: $accent-color !important; + border-color: $accent-color !important; &:hover, &:focus { - background-color: #2098d1 !important; - color: #e5e9f2 !important; + background-color: $accent-color !important; + color: $text-over-accent-color !important; } } .btn-link { - color: #248aaa; + color: $accent-color; &:hover, &:focus { - color: #207089; + color: $hover-over-accent-color; } } @@ -47,7 +46,7 @@ background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; - color: #8392a5; + color: $muted-text-color; } .tags { @@ -57,18 +56,18 @@ font-size: 0.5em; list-style-type: none; display: inline-block; - background: #248aaa; + background: $accent-color; margin-left: 0.1em; margin-right: 0.1em; } a { - color: #f9fafc; + color: $text-over-accent-color; } } .icon-button { - background-color: #3c4858; - color: #e5e9f2 !important; + background-color: $text-color; + color: $text-over-accent-color !important; padding: 0.25rem 0.5rem; line-height: 1.5; border-radius: 0.2rem; @@ -76,19 +75,19 @@ &:hover, &:focus { - background-color: #248aaa !important; - transition: all 0.3s ease-out !important; + background-color: $accent-color !important; + @include transition(); } } .filled-button { - color: #f9fafc !important; - background-color: #248aaa !important; - transition: all 0.3s ease-out; + background-color: $accent-color !important; + color: $text-over-accent-color !important; + @include transition(); &:hover, &:active { - background-color: #0cafe1 !important; - transition: all 0.3 ease-out; + background-color: $hover-over-accent-color !important; + @include transition(); } } diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss index e14b4b0e0..8e247f86a 100644 --- a/assets/styles/components/cards.scss +++ b/assets/styles/components/cards.scss @@ -1,13 +1,14 @@ .card { box-shadow: none; - transition: all 0.3s ease-out; + @include transition(); overflow: hidden; + background: $bg-card; &:hover, &:focus { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; - transition: all 0.3s ease-out; + box-shadow: $box-shadow; + border: 1px solid $bg-primary; + @include transition(); } .card-head { @@ -21,7 +22,7 @@ } .card-img-top { - transition: all 0.3s ease-out !important; + @include transition(); } .card-img-sm { @@ -35,7 +36,7 @@ } .card-footer { - background: #fff; + background: $bg-card !important; } } @@ -55,7 +56,7 @@ &:focus { .card-img-top { transform: scale(1.2); - transition: all 0.3s ease-out; + @include transition(); } } @@ -79,7 +80,7 @@ span { font-size: 10pt; - color: #6c757d !important; + color: $muted-text-color !important; padding-top: 5px; } } diff --git a/assets/styles/components/images.scss b/assets/styles/components/images.scss new file mode 100644 index 000000000..14a4e09b1 --- /dev/null +++ b/assets/styles/components/images.scss @@ -0,0 +1,34 @@ +img { + display: block; + max-width: 100%; + + &.center { + margin-left: auto; + margin-right: auto; + } + + &.left { + margin-right: auto; + } + + &.right { + margin-left: auto; + } +} + +figure { + border: 1px solid $border-color; + height: -moz-fit-content; + height: fit-content; + width: -moz-fit-content; + width: fit-content; + align-self: center; + margin: auto; +} + +caption, +figcaption { + caption-side: bottom; + text-align: center; + color: $muted-text-color; +} diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss index a30263224..bcd663a64 100644 --- a/assets/styles/components/links.scss +++ b/assets/styles/components/links.scss @@ -1,15 +1,52 @@ +a { + color: $accent-color; + @include transition(); + + &:hover, + &:focus { + text-decoration: $hover-over-accent-color underline; + color: $hover-over-accent-color; + @include transition(); + } +} + .list-link { - text-decoration: none; - color: #131313; - transition: all 0.3s ease-out; - &.active { - display: inline; - color: #2098d1; + text-decoration: none; + color: $text-color; + @include transition(); + &.active { + display: inline; + color: $accent-color; + } + + &:hover { + margin-left: 3px; + color: $accent-color; + @include transition(); + } +} + +a.header-anchor { + text-decoration: none; + color: $heading-color; + i, + svg { + font-size: 10pt; + color: $text-color; + display: none; + margin-left: 0.5rem; + } + &:hover { + i, + svg { + display: inline-block; } - - &:hover { - margin-left: 3px; - color: #2098d1; - transition: all 0.3s ease-out; - } - } \ No newline at end of file + } + code { + color: $inline-code-color; + } +} + +.anchor { + padding-top: 3.5rem; +} diff --git a/assets/styles/components/misc.scss b/assets/styles/components/misc.scss new file mode 100644 index 000000000..67b6c938d --- /dev/null +++ b/assets/styles/components/misc.scss @@ -0,0 +1,33 @@ +.paginator { + width: -moz-fit-content; + width: fit-content; + margin: auto; + vertical-align: bottom; + + .page-item { + & > a { + color: $accent-color; + } + &.active, + &:hover > a { + background-color: $accent-color !important; + color: $text-over-accent-color !important; + } + } +} + +pre { + margin: 5px; + & > code { + padding: 10px !important; + } +} + +@include media('<=large') { + pre { + margin: 0px; + & > code { + padding: 0px !important; + } + } +} diff --git a/assets/styles/components/tables.scss b/assets/styles/components/tables.scss new file mode 100644 index 000000000..af0b2468e --- /dev/null +++ b/assets/styles/components/tables.scss @@ -0,0 +1,74 @@ +table { + border-radius: 0.1rem; + border: 1px solid $border-color; + min-width: 10rem; + padding: 0.1rem; + thead { + tr { + background: $accent-color; + color: $text-over-accent-color; + } + } + + tbody { + tr { + height: 40px !important; + color: $text-color; + &:nth-child(odd) { + background-color: $bg-primary; + } + &:nth-child(even) { + background-color: rgba($accent-color, 0.05); + } + } + } + th, + td { + padding-top: 0.2rem; + padding-bottom: 0.2rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + } +} + +.gist { + table { + border-radius: unset; + background: unset; + border: unset; + padding: unset; + + tr { + height: unset !important; + } + + th, + td { + padding: unset; + border-left: unset; + border-bottom: unset; + } + td, + tc { + border-right: 1px solid $border-color; + } + + thead { + tr { + background: unset; + color: unset; + } + } + + tbody { + tr { + &:nth-child(odd) { + background-color: unset; + } + &:hover { + background: unset; + } + } + } + } +} diff --git a/assets/styles/components/texts.scss b/assets/styles/components/texts.scss new file mode 100644 index 000000000..e406772e2 --- /dev/null +++ b/assets/styles/components/texts.scss @@ -0,0 +1,62 @@ +h1, +h2, +h3, +h4, +h5 { + color: $heading-color; +} + +strong { + color: $heading-color !important; +} + +p { + color: $text-color; +} + +blockquote { + border-left: 4px solid $accent-color; + background-color: rgba($accent-color, 0.05); + padding: 0.3rem; + padding-left: 1rem; + + & > p { + color: $text-color; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } +} + +.text-muted { + color: $muted-text-color !important; +} + +.text-heading { + font-weight: bold; + color: $muted-text-color; +} + +.sub-title { + color: $muted-text-color; + font-size: 10pt; +} + +::-moz-selection { + @include selection-color(); +} + +::selection { + @include selection-color(); +} + +@include media('<=small') { + h1 { + font-size: 2.2rem; + } +} + +@include media('<=tiny') { + h1 { + font-size: 1.5rem; + } +} diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss index a46325af3..8b530b269 100644 --- a/assets/styles/layouts/list.scss +++ b/assets/styles/layouts/list.scss @@ -49,12 +49,12 @@ body.kind-page { .page-item { & > a { - color: #248aaa; + color: $accent-color; } &.active > a { - background-color: #248aaa; - color: #f9fafc; + background-color: $accent-color; + color: $text-over-accent-color; } } } @@ -84,18 +84,18 @@ body.kind-page { width: 100%; padding-left: 0; padding-right: 0; - transition: all ease-out 0.3s; + @include transition(); } &.hide { .content { margin-top: 0; padding-top: 0; - transition: all ease-out 0.3s; + @include transition(); } .post-card-holder { margin-top: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); } } } @@ -136,7 +136,7 @@ body.kind-page { padding-left: 0.5rem; padding-right: 0.5rem; position: relative; - transition: all ease-out 0.3s; + @include transition(); } } .container { diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss index 3ee539bd5..942dcae3c 100644 --- a/assets/styles/layouts/main.scss +++ b/assets/styles/layouts/main.scss @@ -1,18 +1,3 @@ -/* ========= Colors ============ -Heading: #1C2D41 -Paragraph: #3C4858 -Iconography: #8392A5 -Secondary: #C0CCDA -Dirty Snow: #E5E9F2 -Snow: #F9FAFC - -Magenta: #7551E9 -Orange: #FF7D51 -Pink: #ED63D2 -Green: #2DCA73 -Yellow: #FFC212 -*/ - /* Removed smooth scrolling implementation in main.js in favor of simpler css approach. @@ -35,71 +20,16 @@ html { } body { - background-color: #f9fafc; + background-color: $bg-primary; font-family: 'Mulish'; } -h1, -h2, -h3, -h4, -h5 { - color: #1c2d41; -} - -strong { - color: #1c2d41 !important; -} - -p { - color: #3c4858; -} - -a { - color: #248aaa; -} - -a:hover { - color: #207089; -} -a.focused { - color: #2098d1 !important; -} - - - -.bg-white { - background-color: #f9fafc !important; +.bg-primary { + background-color: $bg-primary !important; } -.bg-dimmed { - background-color: #e5e9f2; -} - -.anchor { - padding-top: 3.5rem; -} - -img.center { - display: block; - margin-left: auto; - margin-right: auto; -} - -img.left { - display: block; - margin-right: auto; -} - -img.right { - display: block; - margin-left: auto; -} - - -.sub-title { - color: #c0ccda; - font-size: 10pt; +.bg-secondary { + background-color: $bg-secondary !important; } .flag-icon { @@ -112,220 +42,36 @@ img.right { display: none !important; } -/* ====== table ====== */ -table { - border-radius: 0.1rem; - background: #e5e9f2; - border: 1px solid #c0ccda; - padding: 0.1rem; -} - -table tr { - height: 40px !important; -} - -table th, -td { - padding: 0.5rem; - border-left: 1px solid #8392a5; - border-bottom: 1px solid #8392a5; -} - -table thead tr { - background: #248aaa; - color: #e5e9f2; -} - -tbody tr:nth-child(odd) { - background-color: #e5e9f2; -} - -tbody tr:hover { - background: #c0ccda; -} - -/* ====== don't apply css to tables inside gist ====== */ -.gist table { - border-radius: unset; - background: unset; - border: unset; - padding: unset; -} - -.gist table tr { - height: unset !important; -} - -.gist table th, -td { - padding: unset; - border-left: unset; - border-bottom: unset; -} - -.gist table thead tr { - background: unset; - color: unset; -} - -.gist tbody tr:nth-child(odd) { - background-color: unset; -} - -.gist tbody tr:hover { - background: unset; -} - -.gist table td, -.gist table tc { - border-right: 1px solid #eee; -} - -figure { - border: 1px solid #c0ccda; - height: -moz-fit-content; - height: fit-content; - width: -moz-fit-content; - width: fit-content; - align-self: center; - margin: auto; -} - -img { - max-width: 100%; -} - -caption, -figcaption { - caption-side: bottom; - text-align: center; - color: #8392a5; -} - -pre { - margin: 5px; -} - -pre > code { - padding: 10px !important; -} - -a.header-anchor { - text-decoration: none; - color: #1c2d41; -} - -a.header-anchor i, -a.header-anchor svg { - font-size: 10pt; - color: #3c4858; - display: none; - margin-left: 0.5rem; -} -a.header-anchor:hover i, -a.header-anchor:hover svg { - display: inline-block; -} -a.header-anchor code { - color: #e83e8c; -} - -.content ul > ol, -.content ol > ul, -.content ul > ul, -.content ol > ol, -.content li > ol, -.content li > ul { - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; +.content { + ul > ol, + ol > ul, + ul > ul, + ol > ol, + li > ol, + li > ul { + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; + } } kbd { - background-color: #248aaa !important; - color: #f9fafc; + background-color: $accent-color; + color: $text-over-accent-color; } mark { - background-color: #ffc21280; -} - -/* ======= Paginator ========= */ -.paginator { - width: -moz-fit-content; - width: fit-content; - margin: auto; - vertical-align: bottom; -} - -.paginator .page-item > a { - color: #248aaa; -} - -.paginator .page-item.active > a { - background-color: #248aaa; - color: #f9fafc; -} - -/* ============= Media Query Template ======= */ -@include media('<medium') { -} -@include media('>=medium','<large') { -} -@include media('>=large','<very-large') { -} -@include media('>=very-large','<extra-large') { -} -@include media('>=extra-large') { -} - -/* 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) { - .content-section .languageSelector { - position: fixed; - right: 0.5rem; - bottom: 1rem; - z-index: 10000000; - background-color: #f9fafc; - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - } - pre { - margin: 0px; - } - code { - padding: 0px; - } + background-color: $highlight-color; + border-radius: 0.25rem; } -/* 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) { - .skills-section .container, - .projects-section .container, - .publications-section .container { - padding-left: 0.3rem; - padding-right: 0.3rem; +@include media('<=small') { + .skills-section, + .projects-section, + .publications-section { + .container { + padding-left: 0.3rem; + padding-right: 0.3rem; + } } .section-holder { @@ -341,36 +87,4 @@ mark { padding-left: 0; padding-right: 0; } - - pre { - margin: 0px; - } - code { - padding: 0px; - } - - h1 { - font-size: 2.2rem; - } -} - -/* iPhoneX, iPhone 6,7,8 */ -@media only screen and (max-width: 375px) { - h1 { - font-size: 2rem; - } -} - -/* Galaxy S5, Moto G4 */ -@media only screen and (max-width: 360px) { - h1 { - font-size: 1.8rem; - } -} - -/* iPhone 5 or before */ -@media only screen and (max-width: 320px) { - h1 { - font-size: 1.5rem; - } } diff --git a/assets/styles/layouts/notes.scss b/assets/styles/layouts/notes.scss index 29d22dce8..c9bce23bb 100644 --- a/assets/styles/layouts/notes.scss +++ b/assets/styles/layouts/notes.scss @@ -48,7 +48,7 @@ body.type-notes { .note-title { padding-left: 1rem; - color: #248aaa; + color: $accent-color; &:before { content: ''; @@ -56,11 +56,11 @@ body.type-notes { width: 98%; height: 100%; margin-bottom: -26px; - border-bottom: 1px solid #248aaa; + border-bottom: 1px solid $accent-color; } span { - background: #e5e9f2; + background: $bg-secondary; padding-right: 5px; } } @@ -86,7 +86,7 @@ body.type-notes { max-width: 100%; order: 2; padding-bottom: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); .content { overflow: hidden; @@ -97,7 +97,7 @@ body.type-notes { padding-left: 0.5rem; padding-right: 0.5rem; position: relative; - transition: all ease-out 0.3s; + @include transition(); .note-card { flex: 50%; } @@ -109,7 +109,7 @@ body.type-notes { &.hide { max-width: 60%; - transition: all ease-out 0.3s; + @include transition(); } } } @@ -119,13 +119,13 @@ body.type-notes { .note-card-holder .note-card { max-width: 50%; min-width: 50%; - transition: all ease-out 0.3s; + @include transition(); } .content-section.hide .note-card-holder .note-card { max-width: 100%; min-width: 100%; - transition: all ease-out 0.3s; + @include transition(); } } @@ -141,16 +141,16 @@ body.type-notes { width: 100%; padding-left: 0; padding-right: 0; - transition: all ease-out 0.3s; + @include transition(); .note-card-holder { margin-top: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); .note-card { flex: 100%; max-width: 100%; - transition: all ease-out 0.3s; + @include transition(); } } } @@ -159,13 +159,13 @@ body.type-notes { max-width: 100%; padding-left: 0; width: 100%; - transition: all ease-out 0.3s; + @include transition(); .content { .note-card-holder { margin-top: 0; padding-top: 0; - transition: all ease-out 0.3s; + @include transition(); } } } diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss index faa00b987..db52be17a 100644 --- a/assets/styles/layouts/single.scss +++ b/assets/styles/layouts/single.scss @@ -1,5 +1,5 @@ body.kind-page { - background-color: #e5e9f2; + background-color: $bg-secondary; position: relative; .wrapper { @@ -20,11 +20,10 @@ body.kind-page { padding-right: 1rem; .content { - background: #e5e9f2; padding-top: 1.5rem; .read-area { - background-color: #f9fafc; + background-color: $bg-primary; .hero-area { margin-top: 3rem; @@ -55,12 +54,9 @@ body.kind-page { width: 120px; -o-object-fit: cover; object-fit: cover; - background-color: #f9fafc; + background-color: $bg-primary; padding: 5px; } - p { - color: #8392a5; - } } .title { @@ -84,19 +80,6 @@ body.kind-page { h6 { margin-top: 1.3rem; } - - blockquote { - border-left: 4px solid #248aaa; - background-color: #248baa15; - padding: 0.3rem; - padding-left: 1rem; - - & > p { - color: #3c4858; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } - } } .next-prev-navigator { @@ -120,7 +103,7 @@ body.kind-page { flex: 20%; order: 3; max-width: 20%; - transition: all ease-out 0.5s; + @include transition(); .toc-holder { position: sticky; @@ -128,14 +111,14 @@ body.kind-page { padding-top: 1rem; overflow-x: hidden; overflow-y: auto; - background-color: #f9fafc; + background-color: $bg-primary; margin-right: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); .toc { position: relative; padding-top: 0px; - transition: all ease-out 0.3s; + @include transition(); nav { padding-top: 0px; @@ -143,7 +126,7 @@ body.kind-page { display: flex; flex-direction: column; align-items: flex-start; - transition: all ease-out 0.3s; + @include transition(); ul { list-style: none; @@ -155,17 +138,17 @@ body.kind-page { .nav-link { padding: 0; padding-left: 0.5rem; - transition: all ease-out 0.3s; - color: #1c2d41; + @include transition(); + color: $heading-color; &:hover, &:focus, &.active { padding-left: 1rem; padding-right: 0.5rem; - background-color: #248aaa; - color: #f9f9f9; - transition: all ease-out 0.3s; + background-color: $accent-color; + color: $text-over-accent-color; + @include transition(); } } } @@ -193,21 +176,21 @@ body.kind-page { position: fixed; bottom: 0rem; right: 1rem; - color: #248aaa; + color: $accent-color; font-size: 24pt; z-index: 900000; visibility: hidden; &:hover { - color: #2098d1; + color: $hover-over-accent-color; } &.show { visibility: visible; } i { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - background-color: #f9f9f9; + box-shadow: $box-shadow; + background-color: $bg-primary; border-radius: 50%; } } diff --git a/assets/styles/mixins.scss b/assets/styles/mixins.scss new file mode 100644 index 000000000..ec26fd853 --- /dev/null +++ b/assets/styles/mixins.scss @@ -0,0 +1,30 @@ +@mixin reset-list { + margin: 0; + padding: 0; + list-style: none; +} + +@mixin section-title-adjustment() { + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; + } +} + +@mixin brand-background() { + @each $brand, $color in $brand-colors { + .bg-#{$brand} { + background-color: $color; + } + } +} + +@mixin transition() { + transition: all $transition-type $transition-duration; +} + +@mixin selection-color() { + background: $accent-color; + color: $text-over-accent-color; +} diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss index 8a7efb8dc..fbbcd5807 100644 --- a/assets/styles/navigators/navbar.scss +++ b/assets/styles/navigators/navbar.scss @@ -1,9 +1,8 @@ @mixin 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%); + color: $accent-color !important; + border-bottom: 2px solid $accent-color !important; + background: rgba($accent-color, 0.1); + @include transition(); } .top-navbar { @@ -13,18 +12,25 @@ width: 100%; height: 50px; z-index: 99999; - transition: all 0.4s ease-out; margin: 0px; padding-top: 0.4rem; + color: $heading-color; text-align: center; - - background-color: #f9fafc; - color: #1c2d41; - transition: all 0.3s ease-out; + background-color: $bg-primary; + @include transition(); .navbar-brand { - color: #1c2d41; + color: $heading-color; font-weight: 600; + img { + width: 42px; + padding: 5px; + margin-left: -10px; + } + } + + img { + display: inline-block; } .sidebar-icon { @@ -35,9 +41,9 @@ li { a { - color: #1c2d41; + color: $heading-color; font-weight: 500; - transition: all 0.3s ease-out; + @include transition(); border-bottom: 2px solid transparent; &:hover { @include nav-item-hover-effect(); @@ -50,25 +56,28 @@ } #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); + margin-top: 10px; + background-color: $muted-text-color; + height: 20px; + width: 2px; } .dropdown-menu { - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - border: 1px solid #fff; + box-shadow: $box-shadow; + border: 1px solid $border-color; max-height: 0vh; overflow: hidden; display: block; visibility: hidden; - transition: all 0.3s ease-out; + @include transition(); &.show { max-height: 100vh; visibility: visible; - transition: all 0.3s ease-in; + @include transition(); a { - color: #1c2d41 !important; + color: $heading-color !important; &:hover { @include nav-item-hover-effect(); @@ -81,22 +90,22 @@ margin-top: -5px; &.show, &.collapsing { - background-color: #f9fafc; + background-color: $bg-primary; padding-left: 1rem; li { a { - color: #1c2d41; + color: $heading-color; font-weight: 500; - transition: all 0.3s ease-out; + @include transition(); } } .navbar-nav { .active { - color: #2098d1; + color: $accent-color; } a:hover { - color: #2098d1; + color: $accent-color; } } } @@ -105,32 +114,19 @@ &.transparent-navbar { background-color: transparent; .navbar-brand { - color: #c0ccda; + color: $inverse-text-color; font-weight: 600; } li { a { - color: #c0ccda; + color: $inverse-text-color; } } .feather-menu { - stroke: #8392a5; + stroke: $inverse-text-color; } } - #top-navbar-divider { - margin-top: 10px; - background: rgba(192, 204, 218, 0.8); - height: 20px; - width: 2px; - } - - .navbar-brand img { - width: 42px; - padding: 5px; - margin-left: -10px; - } - @include media('<=large') { height: -moz-fit-content; height: fit-content; @@ -144,39 +140,31 @@ &.transparent-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; + color: $accent-color; + @include transition(); } } - .dropdown-divider { - border-top: 1px solid #c0ccda; - } - #top-navbar-divider { - background: rgba(0, 0, 0, 0.6); height: auto; width: auto; margin-right: 15px; + border-top: 1px solid #c0ccda; } + .dropdown-menu { text-align: center; - margin-bottom: 0.5rem; margin-right: 1rem; - transition: all 0.3s ease-out; + @include transition(); + } + + .languageSelector { + position: fixed; + right: 0.5rem; + bottom: 1rem; + z-index: 10000000; + background-color: $bg-primary; + box-shadow: $box-shadow; } } @@ -192,5 +180,5 @@ .feather-menu { width: 1.5rem; height: 1.5rem; - stroke: #3c4858; + stroke: $text-color; } diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss index 82e9fb177..125c52be4 100644 --- a/assets/styles/navigators/sidebar.scss +++ b/assets/styles/navigators/sidebar.scss @@ -2,22 +2,21 @@ order: 1; flex: 20%; max-width: 20%; - /* background-color: lightsalmon; */ - transition: all ease-out 0.5s; + @include transition(); .sidebar-holder { top: 2.5rem; position: sticky; - background-color: #f9fafc; + background-color: $bg-primary; height: 100vh; overflow: auto; - box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); - transition: all ease-out 0.3s; + box-shadow: $box-shadow; + @include transition(); .sidebar { - background: #f9fafc; + background: $bg-primary; height: 100vh; - transition: all ease-out 0.3s; + @include transition(); #search-box { margin-left: 5%; @@ -28,12 +27,12 @@ margin-top: 30px; margin-bottom: 10px; border-radius: 5px; - background-color: #e5e9f2; - transition: all 0.3s ease-out; - border: 1px solid #c0ccda; + background-color: $bg-secondary; + @include transition(); + border: 1px solid $border-color; &:focus { - border: 1pt solid #248aaa; + border: 1pt solid $accent-color; outline: none; } } @@ -57,11 +56,11 @@ margin: 0; padding: 0 1em; line-height: 2em; - color: #3c4858; + color: $heading-color; position: relative; i { - color: #3c4858; + color: $heading-color; font-size: 12px; margin-right: 5px; } @@ -81,7 +80,7 @@ top: 2.5rem; left: 1.5rem; bottom: 0.9rem; - border-left: 1px solid; + border-left: 1px solid $text-color; } li { &:before { @@ -89,14 +88,14 @@ display: block; width: 18px; height: 0; - border-top: 1px solid; + border-top: 1px solid $text-color; margin-top: -1px; position: absolute; top: 18px; left: -2px; } &:last-child:before { - background: #f9fafc; + background: $bg-primary; height: auto; top: 1.1rem; bottom: 0; @@ -154,7 +153,7 @@ flex: 0%; max-width: 0%; min-height: 100vh; - transition: all ease-out 0.3s; + @include transition(); .sidebar-holder { position: sticky; @@ -168,7 +167,7 @@ flex: 30%; max-width: 30%; margin-right: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); } } @@ -176,7 +175,7 @@ flex: 0%; max-width: 0%; min-height: 100vh; - transition: all ease-out 0.3s; + @include transition(); .sidebar-holder { position: sticky; @@ -188,7 +187,7 @@ flex: 40%; max-width: 40%; margin-right: 0.5rem; - transition: all ease-out 0.3s; + @include transition(); } } @@ -197,7 +196,7 @@ min-height: 0; max-height: 0; max-width: 100%; - transition: all ease-out 0.5s; + @include transition(); .sidebar-holder { max-height: 0; @@ -205,7 +204,7 @@ height: fit-content; overflow: hidden; max-width: 100%; - transition: all ease-out 0.5s; + @include transition(); .sidebar { position: relative; @@ -216,12 +215,12 @@ width: 100vw; min-height: 0; overflow: hidden; - transition: all ease-out 0.5s; + @include transition(); .sidebar-tree { margin-left: 0rem; max-height: 0; - transition: all 0.5s ease-out; + @include transition(); } } } @@ -234,15 +233,15 @@ flex: none; max-height: 300vh; max-width: 100%; - transition: all ease-out 0.5s; + @include transition(); .sidebar-holder { max-height: 200vh; - transition: all ease-out 0.5s; + @include transition(); .sidebar-tree { max-height: 200vh; - transition: all 0.5s ease-out; + @include transition(); } } } diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss index 201e50021..1ef7eeead 100644 --- a/assets/styles/sections/about.scss +++ b/assets/styles/sections/about.scss @@ -1,3 +1,52 @@ +@use 'sass:map'; + +$progress-bar-colors: ( + 'blue': #048dff, + 'yellow': #eebb4d, + 'pink': #ed63d2, + 'green': #2dca73, + 'sky': #00c9e3, + 'orange': #ff7c7c, +); + +@mixin circular-progress-bar-color() { + @each $color, $value in $progress-bar-colors { + &.#{$color} { + .circular-progress-bar { + border-color: $value; + } + } + } +} + +@mixin circular-progress-animation-breakpoints() { + $progress: 50; + $duration: 0; + + @for $i from 1 through 10 { + .circular-progress-percentage-#{$progress} { + animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s; + } + $progress: $progress + 5; + $duration: $duration + 0.18; + } +} + +@mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) { + @for $i from 1 through $keyframes { + @keyframes circular-loading-#{$progress} { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(#{$degree}deg); + } + } + $progress: $progress + 5; + $degree: $degree + 18; + } +} + .about-section { .social-link { list-style: none; @@ -5,12 +54,12 @@ a { font-size: 1.5rem; - color: #3c4858; + color: $text-color; padding: 0.5rem; &:hover { - color: #248aaa; - transition: all 0.3s ease-in; + color: $accent-color; + @include transition(); } } } @@ -29,7 +78,7 @@ width: 100%; height: 100%; border-radius: 50%; - border: 12px solid #f9fafc; + border: 12px solid $bg-primary; position: absolute; top: 0; left: 0; @@ -42,9 +91,7 @@ top: 0; z-index: 1; } - .circular-progress-left { - left: 0; - } + .circular-progress-bar { width: 100%; height: 100%; @@ -54,32 +101,38 @@ 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-left { + left: 0; + + .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-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; + background: $text-color; font-size: 1rem; - color: #f9fafc; + color: $bg-primary; line-height: initial; text-align: center; position: absolute; @@ -89,211 +142,10 @@ 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 circular-progress-bar-color(); + @include circular-progress-animation-breakpoints(); + @include circular-progress-animation-keyframes($progress: 50, $degree: 0, $keyframes: 10); + @include circular-progress-animation-keyframes($progress: 1, $degree: 180, $keyframes: 5); } @include media('<=large') { diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss index c4e1ebb25..00bebac5e 100644 --- a/assets/styles/sections/accomplishments.scss +++ b/assets/styles/sections/accomplishments.scss @@ -2,13 +2,13 @@ @include section-title-adjustment(); .card { - background: #fff; - border-top: 2px solid #248aaa; + background: $bg-card; + border-top: 2px solid $accent-color; height: 100%; &:hover, &:focus { - border-top: 2px solid #248aaa; + border-top: 2px solid $hover-over-accent-color; } .card-header { @@ -16,7 +16,7 @@ border: none; .sub-title { - color: #8392a5; + color: $muted-text-color; margin-top: 0.4rem; } } @@ -28,7 +28,7 @@ } .card-footer { - background: #fff; + background: $bg-card; border: none; padding: 0; padding-left: 0.7rem; diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss index e389c3c7e..e0d548295 100644 --- a/assets/styles/sections/achievements.scss +++ b/assets/styles/sections/achievements.scss @@ -12,17 +12,17 @@ margin-left: 7px; margin-right: 7px; z-index: 1; - background-color: #e5e9f2; + background-color: $bg-secondary; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; overflow: hidden; - transition: all 0.3s ease-out; + @include transition(); .title { - color: #e5e9f2; - background-color: rgba(0, 0, 0, 0.7); + color: $inverse-text-color; + background-color: rgba($bg-primary-inverse, 0.7); opacity: 0; padding: 5px; position: absolute; @@ -35,19 +35,19 @@ &:hover { cursor: pointer; transform: scale(1.1); - transition: all 0.3s ease-out; + @include transition(); z-index: 20000; .svg-inline--fa { opacity: 1; font-size: 1rem; - transition: all 0.3s ease-out; + @include transition(); } .title { opacity: 1; bottom: 0px; - transition: bottom 0.3s ease-out; + @include transition(); } } } @@ -85,28 +85,28 @@ } .svg-inline--fa { - color: #8392a5; - background-color: rgba(0, 0, 0, 0.7); + color: $muted-text-color; + background-color: rgba($bg-primary-inverse, 0.7); padding: 10px; font-size: 0rem; opacity: 0; } .caption { - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba($bg-primary-inverse, 0.7); bottom: 1rem; left: 1rem; - color: #e5e9f2; + color: $inverse-text-color; padding: 15px; position: absolute; - transition: all 0.3s ease-out; + @include transition(); h4 { - color: #e5e9f2; + color: $inverse-text-color; } p { font-size: 16px; font-weight: 300; - color: #e5e9f2; + color: $inverse-text-color; } } diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss index 1cb363a18..7d065d1a9 100644 --- a/assets/styles/sections/education.scss +++ b/assets/styles/sections/education.scss @@ -4,7 +4,7 @@ .card { &:hover, &:focus { - border-left: 2px solid #248aaa; + border-left: 2px solid $accent-color; } } @@ -23,19 +23,19 @@ position: absolute; left: 1rem; top: 0; - background-color: #248aaa; + background-color: $accent-color; height: 100%; width: 2px; } .icon-holder { - background-color: #248aaa; + background-color: $accent-color; border-radius: 50%; height: 2rem; width: 2rem; padding: 0.2rem; text-align: center; - color: #e5e9f2; + color: $text-over-accent-color; position: relative; } } @@ -71,9 +71,8 @@ div { height: 2px; - /* width: 100%; */ margin-right: -1px; - background-color: #248aaa; + background-color: $accent-color; } } @@ -82,10 +81,10 @@ 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-left: 2px solid $accent-color; + border-top: 1px solid $bg-primary; + border-bottom: 1px solid $bg-primary; + border-right: 1px solid $bg-primary; border-radius: 5px; h5 { @@ -93,7 +92,7 @@ } .timeframe { - color: #8392a5; + color: $muted-text-color; text-align: right; } @@ -101,7 +100,7 @@ table { margin-left: 1rem; width: 100%; - transition: all 0.3s ease-out; + @include transition(); background: none; border: none; @@ -110,7 +109,7 @@ th { background: none; border: none; - color: #212529; + color: $text-color; } tr { @@ -123,7 +122,7 @@ } .hidden-course { display: none; - transition: all 1s ease-out; + @include transition(); } ul { margin-bottom: 0; @@ -168,5 +167,5 @@ } .education-alt .degree-info { - border-right: 2px solid #248aaa; + border-right: 2px solid $accent-color; } diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss index df639b47c..5578dd65e 100644 --- a/assets/styles/sections/experiences.scss +++ b/assets/styles/sections/experiences.scss @@ -7,7 +7,7 @@ padding-left: 1rem; & > li { margin-left: 0; - color: #3c4858; + color: $text-color; } } @@ -18,8 +18,8 @@ .circle { padding: 13px 20px; border-radius: 50%; - background-color: #248aaa; - color: #f9fafc; + background-color: $accent-color; + color: $text-over-accent-color; max-height: 50px; z-index: 2; } @@ -33,7 +33,7 @@ &::after { content: ''; position: absolute; - border-left: 3px solid #248aaa; + border-left: 3px solid $accent-color; z-index: 1; height: 100%; left: 50%; @@ -48,7 +48,7 @@ height: 40px; } hr { - border-top: 3px solid #248aaa; + border-top: 3px solid $accent-color; margin: 0; top: 17px; position: relative; @@ -58,7 +58,7 @@ overflow: hidden; } .corner { - border: 3px solid #248aaa; + border: 3px solid $accent-color; width: 100%; position: relative; border-radius: 15px; diff --git a/assets/styles/sections/footer.scss b/assets/styles/sections/footer.scss index 52c643dd9..bc2e10b5f 100644 --- a/assets/styles/sections/footer.scss +++ b/assets/styles/sections/footer.scss @@ -1,19 +1,20 @@ .footer { - color: #8392a5 !important; - background-color: #1c2d41; + color: $muted-text-color !important; + background-color: $bg-primary-inverse; position: relative; z-index: 9999; h5 { - color: #c0ccda; + color: $inverse-text-color; } a { - color: #8392a5; - transition: all 0.3s ease-out; + color: $muted-text-color; + @include transition(); &:hover { margin-left: 5px; - transition: all 0.3s ease-out; + text-decoration: $muted-text-color underline; + @include transition(); } } @@ -27,37 +28,42 @@ } hr { - background-color: #8392a5; + background-color: $muted-text-color; } p:first-child { - color: #c0ccda; + color: $inverse-text-color; } input { - background-color: #c0ccda; + background-color: $inverse-text-color; &:focus { - background-color: #e5e9f2; + background-color: $bg-secondary; } } #disclaimer { - color: #8392a5 !important; + color: $muted-text-color !important; text-align: justify; & > strong { - color: #c0ccda !important; + color: $inverse-text-color !important; } } #theme { - color: #c0ccda; + color: $inverse-text-color; img { width: 32px; + display: inline-block; } } - - #hugo:hover { - margin-right: 5px; - transition: all 0.3s ease-out; + #hugo { + &:hover { + margin-right: 5px; + @include transition(); + } + img { + display: inline-block; + } } } diff --git a/assets/styles/sections/home.scss b/assets/styles/sections/home.scss index b5eeb0a5a..58f8db8b3 100644 --- a/assets/styles/sections/home.scss +++ b/assets/styles/sections/home.scss @@ -2,7 +2,7 @@ height: 100vh; padding: 0; margin: 0; - color: #f9fafc; + color: $text-over-accent-color; overflow: hidden; .background { @@ -16,12 +16,12 @@ filter: blur(3px); background-size: cover; } - + .arrow-center { display: flex; justify-content: center; } - + /* Resolves https://github.com/hugo-toha/toha/issues/70 @@ -34,45 +34,46 @@ background-attachment: scroll; } } - + .content { position: relative; top: -65%; height: 60%; } - + img { width: 148px; height: 148px; - background-color: #e7e7ef; + background-color: $bg-secondary; padding: 5px; margin-bottom: 10px; } - - .greeting, .greeting-subtitle { - color: #f9fafc; + + .greeting, + .greeting-subtitle { + color: $text-over-accent-color; } - + .typing-carousel { font-size: 14pt; - color: #f0f0f0; + color: $text-over-accent-color; } - + #typing-carousel-data { display: none; } - + .arrow { position: absolute; - color: #f9fafc; + color: $text-over-accent-color; font-size: 1.5rem; bottom: 0; } - + .bounce { animation: bounce 2s infinite; } - + @keyframes bounce { 0%, 20%, @@ -88,64 +89,22 @@ transform: translateY(-15px); } } - - /* ============= 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) { + + @include media('<=small') { .content { position: relative; top: -75%; height: 65%; } - + img { width: 140px; max-width: 50%; height: auto; } - + .greeting { 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) { - } -} \ No newline at end of file +} diff --git a/assets/styles/sections/projects.scss b/assets/styles/sections/projects.scss index 2724bac29..5e5349240 100644 --- a/assets/styles/sections/projects.scss +++ b/assets/styles/sections/projects.scss @@ -1,7 +1,7 @@ .projects-section { .card { .card-header { - background-color: #f9fafc; + background-color: $bg-card; padding: 0.7rem; padding-bottom: 0rem; text-decoration: none; @@ -10,7 +10,7 @@ margin-right: 0.5rem; } .sub-title { - color: #8392a5; + color: $muted-text-color; margin-top: 0.4rem; span { diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss index ba2ee1de5..94fc3858a 100644 --- a/assets/styles/sections/publications.scss +++ b/assets/styles/sections/publications.scss @@ -2,12 +2,12 @@ @include section-title-adjustment(); .card { - background: #fff; - border-top: 2px solid #248aaa; + background: $bg-card; + border-top: 2px solid $accent-color; &:hover, &:focus { - border-top: 2px solid #248aaa; + border-top: 2px solid $accent-color; } .card-header { @@ -17,7 +17,7 @@ flex-direction: column; .sub-title { - color: #8392a5; + color: $muted-text-color; margin-top: 0.4rem; span:nth-child(2) { @@ -33,7 +33,7 @@ } .card-footer { - background: #fff; + background: $bg-card; border: none; padding: 0; padding-left: 1rem; diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss index dde264a00..d1819481a 100644 --- a/assets/styles/sections/recent-posts.scss +++ b/assets/styles/sections/recent-posts.scss @@ -16,7 +16,7 @@ width: 98%; } } - @include media('>=medium','<large') { + @include media('>=medium', '<large') { .container { max-width: 100%; } diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss index 42d4fce8d..405a4f7ed 100644 --- a/assets/styles/sections/skills.scss +++ b/assets/styles/sections/skills.scss @@ -5,12 +5,12 @@ height: 100%; .card-head { - background-color: #f9fafc; + background-color: $bg-primary !important; height: -moz-fit-content; height: fit-content; padding: 0.7rem; padding-bottom: 0rem; - border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125); + border-bottom: 0.0625rem solid rgba($accent-color, 0.4); .card-img-xs { margin-right: 0.5rem; diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss index 507a6f01f..b62258fb9 100644 --- a/assets/styles/variables.scss +++ b/assets/styles/variables.scss @@ -10,6 +10,36 @@ $breakpoints: ( ultra-large: 2560px, ); +// Color are chosen from TailwindCSS color scheme +// https://tailwindcss.com/docs/customizing-colors + +// accent-color +$accent-color: #0891b2; // cyan 600 +$hover-over-accent-color: #06b6d4; // cyan 500 +$text-over-accent-color: #e4e4e7; // zinc 200 + +// background-color +$bg-primary: #f8fafc; // slate 50 +$bg-primary-inverse: #0f172a; // slate 900 +$bg-secondary: #e2e8f0; // slate 200 +$bg-card: #fff; + +// text-color +$heading-color: #1e293b; // slate 800 +$text-color: #334155; // slate 700 +$inverse-text-color: #cbd5e1; // slate 300 +$muted-text-color: #64748b; // slate 500 +$inline-code-color: #dc2626; // red 600 +$highlight-color: #fde68a; // amber 200 + +// transitions +$transition-duration: 0.3s; +$transition-type: ease-out; + +// borders and shadows +$border-color: rgba($accent-color, 0.1); +$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); + $brand-colors: ( 'facebook': #3b5998, 'twitter': #1da1f2, @@ -20,25 +50,3 @@ $brand-colors: ( 'diaspora': #1e1e1e, 'whatsapp': #25d366, ); - -@mixin reset-list { - margin: 0; - padding: 0; - list-style: none; -} - -@mixin section-title-adjustment() { - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; - } -} - -@mixin brand-background() { - @each $brand, $color in $brand-colors { - .bg-#{$brand} { - background-color: $color; - } - } -} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 58d631b80..1b6b3975c 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -15,7 +15,7 @@ </head> <body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80"> - <div class="container-fluid bg-dimmed wrapper"> + <div class="container-fluid bg-secondary wrapper"> <!----- ADD NAVBAR ---------------> {{ block "navbar" . }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 761f66828..61929522b 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -39,7 +39,7 @@ <div class="author-profile ml-auto align-self-lg-center"> <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image"> <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5> - <p>{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</p> + <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</p> </div> <div class="title"> diff --git a/layouts/index.html b/layouts/index.html index 77b7e1994..91d269040 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -33,7 +33,7 @@ {{ end }} {{ if $sections }} - {{ $background:= "bg-white"}} + {{ $background:= "bg-primary"}} {{ range sort $sections "section.weight" }} {{ if .section.enable }} <div class="container-fluid section-holder d-flex {{ $background }}"> @@ -44,10 +44,10 @@ {{ end }} </div> <!--- alter background color for next section ---> - {{ if eq $background "bg-white" }} - {{ $background = "bg-dimmed" }} + {{ if eq $background "bg-primary" }} + {{ $background = "bg-secondary" }} {{ else }} - {{ $background = "bg-white" }} + {{ $background = "bg-primary" }} {{end}} {{ end }} {{ end }} diff --git a/layouts/partials/navigators/lang-selector.html b/layouts/partials/navigators/lang-selector.html index b5b16bfe8..9232e446f 100644 --- a/layouts/partials/navigators/lang-selector.html +++ b/layouts/partials/navigators/lang-selector.html @@ -1,3 +1,7 @@ +{{ $pageURL:= .RelPermalink }} +{{ if site.IsMultiLingual }} + {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }} +{{ end }} <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{ if ne site.Params.features.flags.enable false }} @@ -8,7 +12,7 @@ </a> <div class="dropdown-menu" aria-labelledby="languageSelector"> {{ range site.Home.AllTranslations }} - <a class="dropdown-item nav-link languages-item" href="{{ .RelPermalink }}"> + <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}"> {{ if ne site.Params.features.flags.enable false }} {{ $countryCode := partial "helpers/country-code.html" . }} <span class="flag-icon flag-icon-{{$countryCode}}"></span> diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html index 9071004f9..57f3a8e3e 100644 --- a/layouts/partials/navigators/navbar.html +++ b/layouts/partials/navigators/navbar.html @@ -112,7 +112,7 @@ {{- end }} {{ $shouldAddSeparator:= partial "helpers/add-navbar-separator.html" . }} {{ if $shouldAddSeparator }} - <div class="dropdown-divider" id="top-navbar-divider"></div> + <div id="top-navbar-divider"></div> {{ end }} {{ if $blogEnabled }} <li class="nav-item"> diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html index eaaca5386..b6996dfe6 100644 --- a/layouts/partials/sections/education-alt.html +++ b/layouts/partials/sections/education-alt.html @@ -43,11 +43,11 @@ <h5>{{ .institution.name }}</h5> </div> <h6>{{ .name }}</h6> {{ if .grade }} - <h6><span>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of" }} <span>{{ .grade.outOf }}</span></h6> + <h6 class="text-heading"><span>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of" }} <span>{{ .grade.outOf }}</span></h6> {{ end }} {{ if .publications }} <div class="publications"> - <h6 class="text-muted">{{i18n "publications"}}</h6> + <h6 class="text-heeading">{{i18n "publications"}}:</h6> <ul> {{ range .publications }} {{ if .url }} @@ -62,7 +62,7 @@ <h6 class="text-muted">{{i18n "publications"}}</h6> {{ if .takenCourses }} {{ $collapseAfter := .takenCourses.collapseAfter | default 2 }} <div class="taken-courses"> - <h6 class="text-muted">{{ i18n "taken_courses" }}</h6> + <h6 class="text-heading">{{ i18n "taken_courses" }}:</h6> {{ if .takenCourses.showGrades }} {{ $hideScale := .takenCourses.hideScale }} <table> @@ -98,7 +98,7 @@ <h6 class="text-muted">{{ i18n "taken_courses" }}</h6> {{ end }} {{ if .extracurricularActivities }} <div class="extracurricular-activities"> - <h6 class="text-muted">{{ i18n "extracurricular_activities" }}</h6> + <h6 class="text-heading">{{ i18n "extracurricular_activities" }}:</h6> <ul> {{ range .extracurricularActivities }} <li>{{ . | markdownify }}</li> diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html index 22f4048d2..6a7fb74f2 100644 --- a/layouts/partials/sections/education.html +++ b/layouts/partials/sections/education.html @@ -43,11 +43,11 @@ <h5>{{ .institution.name }}</h5> </div> <h6>{{ .name }}</h6> {{ if .grade }} - <h6><span class="text-muted">{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of"}} <span>{{ .grade.outOf }}</span></h6> + <h6><span class="text-heading">{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of"}} <span>{{ .grade.outOf }}</span></h6> {{ end }} {{ if .publications }} <div class="publications"> - <h6 class="text-muted">{{ i18n "publications"}}</h6> + <h6 class="text-heading">{{ i18n "publications"}}:</h6> <ul> {{ range .publications }} {{ if .url }} @@ -62,7 +62,7 @@ <h6 class="text-muted">{{ i18n "publications"}}</h6> {{ if .takenCourses }} {{ $collapseAfter := .takenCourses.collapseAfter | default 2 }} <div class="taken-courses"> - <h6 class="text-muted">{{ i18n "taken_courses"}}</h6> + <h6 class="text-heading">{{ i18n "taken_courses"}}:</h6> {{ if .takenCourses.showGrades }} {{ $hideScale := .takenCourses.hideScale }} <table> @@ -98,7 +98,7 @@ <h6 class="text-muted">{{ i18n "taken_courses"}}</h6> {{ end }} {{ if .extracurricularActivities }} <div class="extracurricular-activities"> - <h6 class="text-muted">{{ i18n "extracurricular_activities"}}</h6> + <h6 class="text-heading">{{ i18n "extracurricular_activities"}}:</h6> <ul> {{ range .extracurricularActivities }} <li>{{ . | markdownify }}</li> diff --git a/layouts/partials/sections/experiences/single-position.html b/layouts/partials/sections/experiences/single-position.html index b49fcedec..4b0e500c7 100644 --- a/layouts/partials/sections/experiences/single-position.html +++ b/layouts/partials/sections/experiences/single-position.html @@ -13,7 +13,7 @@ <h6>{{ if .company.url }}<a href={{.company.url}} title="{{ .company.name }}" ta <p>{{ .company.overview | markdownify }}</p> <!-- Add the responsibilities handled at this position --> {{ if $position.responsibilities }} - <h6 class="text-muted">{{ i18n "responsibilities" }}</h6> + <h6 class="text-heading">{{ i18n "responsibilities" }}</h6> <ul class="justify-content-around"> {{ range $position.responsibilities }} <li>{{ . | markdownify }}</li>