diff --git a/_includes/footer.html b/_includes/footer.html index 1d65093..15e26d0 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,16 +1,85 @@ + + + \ No newline at end of file diff --git a/_sass/base.scss b/_sass/base.scss index beb0869..9540f14 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -595,35 +595,101 @@ margin-bottom: 16px; footer { color: var(--light-grey); background-color: color-mix(in srgb, var(--background-color), white 1.5%); - border-top: 1px solid rgba(255, 255, 255, 0.13); - padding: 40px 0px; + border-top: 2px solid var(--purple); + padding: 60px 0px 40px 0px; text-align: right; margin-top: 80px; - font-size: 1.1rem; + font-size: 1rem; } -.footer-link { +.footer { display: flex; - flex-direction: row; } -.footer-link div { +.footer-description-mobile { + display: none; +} + +.footer-logo img { + float: left; + width: 270px; +} + +.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; + align-items: flex-start; } -.footer-link div a { - text-decoration: none; - color: var(--light-grey); -} - -.footer-link div a:hover { - color: white; -} - -.footer-container { +.footer-logo { + flex: 1 1 100%; display: flex; - justify-content: space-between + flex-direction: column; + align-items: flex-start +} + +.footer-description { + font-size: 1.3rem; + line-height: 1.5; + text-align: left; +} + +.footer-links { + display: flex; + 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.5rem; + 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: 2rem; + font-size: 1rem; +} + +.footer-social a { + vertical-align: middle; +} + +.footer-social a img { + height: 20px; + width: 20px; + margin-left: 0.5rem; + filter: invert(1) grayscale(1) brightness(0.5); + transition: filter 0.2s ease; + vertical-align: sub; +} + +.footer-social a img:hover { + filter: invert(1) grayscale(0) brightness(1); } @@ -1836,6 +1902,59 @@ pre { .component-links { max-width: 100%; } + + footer { + padding: 50px 0px 30px 0px; + } + + .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; + 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; + } } @media (max-width: 1020px) { @@ -1875,6 +1994,12 @@ pre { } } +@media (max-width: 730) { + footer { + padding: 50px 0px 20px 0px; + } +} + @media (max-width: 600px) { .mini-card { padding: 20px 20px !important; @@ -1940,16 +2065,67 @@ pre { padding-left: 10px; } - .footer-link { - flex-direction: column !important; + //footer on mobile// + + .footer { + flex-direction: column; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; } - .footer-link div { - margin-bottom: 20px; - min-width: 200px; - display: inline; + footer { + padding: 50px 10px 15px 10px; } + .footer-logo img { + width: 100%; + } + + .footer-description-desktop { + display: none; + } + + .footer-description-mobile { + display: block; + } + + .footer-description { + font-size: 1rem !important; + margin-bottom: 1.2rem; + } + + .footer-links { + gap: 3rem; + flex-direction: row; + line-height: 1.7rem !important; + } + + .footer-links a { + font-size: 1.1rem !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; + } + + //footer// + .tall-section { margin: 100px 0px; } @@ -2058,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 diff --git a/assets/base/linkedin.png b/assets/base/linkedin.png new file mode 100644 index 0000000..1ad6d5f Binary files /dev/null and b/assets/base/linkedin.png differ diff --git a/assets/base/rss-bw-tr.png b/assets/base/rss-bw-tr.png new file mode 100644 index 0000000..465582f Binary files /dev/null and b/assets/base/rss-bw-tr.png differ diff --git a/assets/base/rss.png b/assets/base/rss.png deleted file mode 100644 index 2df0b6e..0000000 Binary files a/assets/base/rss.png and /dev/null differ