diff --git a/_includes/footer.html b/_includes/footer.html index b380ef8..15e26d0 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,3 +1,48 @@ + + + + \ 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