From 81cdb970fcbf446e81115599b4c8f14530838f90 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Fri, 4 Aug 2023 08:02:29 +0600 Subject: [PATCH] Refactor CSS for experiences section Signed-off-by: hossainemruz --- assets/styles/sections/experiences.scss | 236 +++++++++--------------- assets/styles/sections/skills.scss | 99 +++------- layouts/partials/cards/skill.html | 2 +- 3 files changed, 119 insertions(+), 218 deletions(-) diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss index 1d1afef..1df94fa 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 { + 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; + } + } + .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; + } + } + .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%; + } + } + } + } } - - .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) { + + @include media('<=medium') { .container { max-width: 100%; } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { - } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - .timeline .row:nth-child(4n) div:nth-child(3) .corner { - left: -55%; - top: -50%; - } - .timeline .row:nth-child(2n) div:nth-child(1) .corner { - left: 55%; - top: -50%; + @include media('<=small') { + .container { + padding-left: 0px; + padding-right: 0px; + } + .timeline { + .vertical-line { + visibility: hidden; + } + .horizontal-line { + visibility: hidden; + } } } - - /* 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%; - } - } - - /* 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%; - } - } } diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss index a2176dc..1310668 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; + + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - - /* ============= 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') { 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 c8e6e1c..86f47c9 100644 --- a/layouts/partials/cards/skill.html +++ b/layouts/partials/cards/skill.html @@ -1,5 +1,5 @@
- +
{{ if .logo }}