From fe027ccba00a021cd1461160fdb925fa8f41d1a7 Mon Sep 17 00:00:00 2001 From: Ksenia Lesko Date: Sun, 20 Apr 2025 15:39:24 -0400 Subject: [PATCH 1/5] new footer --- _includes/footer.html | 201 +++++++++++++++++++++++++++++++++++++- _sass/base.scss | 12 ++- assets/base/linkedin.png | Bin 0 -> 4052 bytes assets/base/rss-bw-tr.png | Bin 0 -> 15302 bytes assets/base/rss.png | Bin 6438 -> 0 bytes 5 files changed, 209 insertions(+), 4 deletions(-) create mode 100644 assets/base/linkedin.png create mode 100644 assets/base/rss-bw-tr.png delete mode 100644 assets/base/rss.png diff --git a/_includes/footer.html b/_includes/footer.html index 1d65093..ef8e4ee 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,4 +1,4 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/_sass/base.scss b/_sass/base.scss index 9971c5e..9ceb368 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -160,12 +160,6 @@ a:hover { border: 1px solid var(--light-purple); } -.footer-bottom-row { - display: flex; - height: 50px; - justify-content: space-between !important; -} - @mixin capsule { font-weight: 400; font-size: 16px; @@ -608,28 +602,83 @@ footer { font-size: 1rem; } -.footer-link { +.footer { display: flex; - flex-direction: row; } -.footer-link div { +.footer-logo img { + float: left; + margin-bottom: 2rem; + width: 450px; +} + +.footer-logo img:hover { + filter: brightness(0.8) +} + +.footer-divider { + width: 30rem; +} + +.footer-top { display: flex; - margin-left: 20px; + flex-wrap: wrap; + justify-content: space-between; + gap: 2rem; } -.footer-link div a { - text-decoration: none; - color: var(--light-grey); +.footer-description { + font-size: 1.3rem; + line-height: 1.5; + text-align: left; } -.footer-link div a:hover { - color: white; -} - -.footer-container { +.footer-links { display: flex; - justify-content: space-between + gap: 8rem; + margin-top: 1rem; + padding-right: 2rem; +} + +.footer-links div { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.footer-links a { + font-size: 1.3rem; + text-align: left; + transition: opacity 0.2s ease; +} + +.footer-links a:hover { + color: var(--purple); +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 5rem; + font-size: 1rem; +} + +.footer-social a { + vertical-align: middle; +} + +.footer-social a img { + height: 24px; + margin-left: 0.5rem; + filter: invert(1) grayscale(1) brightness(0.5); + transition: filter 0.2s ease; + width: 22px; + vertical-align: sub; +} + +.footer-social a img:hover { + filter: invert(1) grayscale(0) brightness(1); } @@ -1842,6 +1891,23 @@ pre { .component-links { max-width: 100%; } + + footer { + padding: 50px 0px 30px 0px; + } + + .footer-divider { + width: 17rem; + } + + .footer-description, .footer-links a { + font-size: 1.2rem !important; + } + + .footer-links { + gap: 5rem; + padding-right: 0rem; + } } @media (max-width: 1020px) { @@ -1881,6 +1947,12 @@ pre { } } +@media (max-width: 730) { + footer { + padding: 50px 0px 20px 0px; + } +} + @media (max-width: 600px) { .mini-card { padding: 20px 20px !important; @@ -1946,16 +2018,54 @@ pre { padding-left: 10px; } - .footer-link { - flex-direction: column !important; + //footer// + + .footer { + flex-direction: column; } - .footer-link div { - margin-bottom: 20px; - min-width: 200px; - display: inline; + footer { + padding: 50px 10px 15px 10px; } + .footer-logo img { + width: 100%; + padding-right: 2px; + } + + .footer-description, .footer-links a { + font-size: 1rem !important; + } + + .footer-links { + margin-top: 1.5rem; + gap: 8rem; + } + + .footer-links div { + gap: 0.25rem; + } + + .footer-links a:hover { + color: var(--purple); + } + + .footer-footer { + font-size: 0.75rem; + } + + .footer-bottom { + margin-top: 3rem; + } + + .footer-social a img { + height: 20px; + margin-left: 0rem; + width: 20px; + } + + //footer// + .tall-section { margin: 100px 0px; } From 40e8ad093ca951cc314be2a8d23724ed2d321597 Mon Sep 17 00:00:00 2001 From: Ksenia Lesko Date: Sun, 20 Apr 2025 17:35:54 -0400 Subject: [PATCH 3/5] updated footer --- _includes/footer.html | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/_includes/footer.html b/_includes/footer.html index daed048..bd455b9 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,21 +1,3 @@ - - + + + \ No newline at end of file diff --git a/_sass/base.scss b/_sass/base.scss index 9ceb368..9540f14 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -596,7 +596,7 @@ footer { color: var(--light-grey); background-color: color-mix(in srgb, var(--background-color), white 1.5%); border-top: 2px solid var(--purple); - padding: 80px 0px 40px 0px; + padding: 60px 0px 40px 0px; text-align: right; margin-top: 80px; font-size: 1rem; @@ -606,10 +606,13 @@ footer { display: flex; } +.footer-description-mobile { + display: none; +} + .footer-logo img { float: left; - margin-bottom: 2rem; - width: 450px; + width: 270px; } .footer-logo img:hover { @@ -624,7 +627,14 @@ footer { display: flex; flex-wrap: wrap; justify-content: space-between; - gap: 2rem; + align-items: flex-start; +} + +.footer-logo { + flex: 1 1 100%; + display: flex; + flex-direction: column; + align-items: flex-start } .footer-description { @@ -635,19 +645,20 @@ footer { .footer-links { display: flex; - gap: 8rem; - margin-top: 1rem; - padding-right: 2rem; + gap: 6rem; + margin-top: 0.5rem; + line-height: 2.5rem !important; } .footer-links div { display: flex; flex-direction: column; gap: 0.5rem; + width: 9.5rem; } .footer-links a { - font-size: 1.3rem; + font-size: 1.5rem; text-align: left; transition: opacity 0.2s ease; } @@ -660,7 +671,7 @@ footer { display: flex; justify-content: space-between; align-items: center; - margin-top: 5rem; + margin-top: 2rem; font-size: 1rem; } @@ -669,11 +680,11 @@ footer { } .footer-social a img { - height: 24px; + height: 20px; + width: 20px; margin-left: 0.5rem; filter: invert(1) grayscale(1) brightness(0.5); transition: filter 0.2s ease; - width: 22px; vertical-align: sub; } @@ -1895,18 +1906,54 @@ pre { footer { padding: 50px 0px 30px 0px; } - - .footer-divider { - width: 17rem; + + .footer-links { + gap: 5rem; + padding-right: 0rem; + } + + .footer { + flex-direction: column; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + } + + .footer-logo img { + width: 115%; } .footer-description, .footer-links a { font-size: 1.2rem !important; } + .footer-description { + margin-bottom: 1.2rem; + } + .footer-links { gap: 5rem; - padding-right: 0rem; + flex-direction: row; + line-height: 2rem !important; + } + + .footer-links a:hover { + color: var(--purple); + } + + .footer-footer { + font-size: 0.75rem; + } + + .footer-bottom { + margin-top: 2rem; + } + + .footer-social a img { + height: 20px; + margin-left: 0rem; + width: 20px; } } @@ -2018,10 +2065,14 @@ pre { padding-left: 10px; } - //footer// + //footer on mobile// .footer { flex-direction: column; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; } footer { @@ -2030,20 +2081,29 @@ pre { .footer-logo img { width: 100%; - padding-right: 2px; } - .footer-description, .footer-links a { + .footer-description-desktop { + display: none; + } + + .footer-description-mobile { + display: block; + } + + .footer-description { font-size: 1rem !important; + margin-bottom: 1.2rem; } .footer-links { - margin-top: 1.5rem; - gap: 8rem; + gap: 3rem; + flex-direction: row; + line-height: 1.7rem !important; } - .footer-links div { - gap: 0.25rem; + .footer-links a { + font-size: 1.1rem !important; } .footer-links a:hover { @@ -2055,7 +2115,7 @@ pre { } .footer-bottom { - margin-top: 3rem; + margin-top: 2rem; } .footer-social a img { @@ -2174,3 +2234,13 @@ pre { */ } +@media (max-width: 400px) { + + .footer-description-mobile { + display: none; + } + + .footer-logo img { + margin-bottom: 1.5rem; + } +} \ No newline at end of file