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