diff --git a/frontend/src/lib/components/footer.svelte b/frontend/src/lib/components/footer.svelte
index fcd9f8e..d511bd5 100644
--- a/frontend/src/lib/components/footer.svelte
+++ b/frontend/src/lib/components/footer.svelte
@@ -40,7 +40,7 @@
-
+
@@ -68,48 +68,6 @@
background-color: var(--col_panel);
}
- .footer-column {
-
- display: flex;
- flex-direction: column;
- justify-self: center;
- gap: 20px;
- padding: 30px 20px;
-
- font-family: "Montserrat" sans-serif;
- font-size: 20px;
- color: var(--col_text_footer);
- background-color: var(--col_footer);
- }
-
- .footer-column > * {
- margin-top: 0;
- margin-bottom: 0;
- padding: 0;
-
- }
-
- .footer-column-title {
-
- position: relative;
- padding-bottom: 20px;
-
- font-family: "Source_Sans_3" sans-serif;
- font-weight: bold;
- text-transform: uppercase;
-
- }
-
- .footer-column-title::after {
- content: "";
- background-color: var(--col_text_footer);
- position: absolute;
- bottom: 0;
- left: 0;
- height: 2px;
- width: 45%;
- }
-
/*FIXME: Make another class title here*/
.container {
grid-area: social-notice;
@@ -139,12 +97,67 @@
display: flex;
justify-content: right;
+
gap: 20px;
grid-area: social-links;
- width: 1fr;
+ width: auto;
}
+ .footer-column {
+
+ display: flex;
+ flex-direction: column;
+ justify-self: center;
+ gap: 20px;
+ padding: 30px 20px;
+
+ font-family: "Montserrat" sans-serif;
+ font-size: 20px;
+ color: var(--col_text_footer);
+ background-color: var(--col_footer);
+ }
+
+ .footer-column > * {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: 0;
+
+ }
+
+ .footer__column1 {
+ grid-area: column1;
+ }
+
+ .footer__column2 {
+ grid-area: column2;
+ }
+
+ .footer__column3 {
+ grid-area: column3;
+ }
+
+ .footer-column-title {
+
+ position: relative;
+ padding-bottom: 20px;
+
+ font-family: "Source_Sans_3" sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
+
+ }
+
+ .footer-column-title::after {
+ content: "";
+ background-color: var(--col_text_footer);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ width: 45%;
+ }
+
.footer__copyright {
grid-area: copyright;
margin: auto 0 0 0;
@@ -161,4 +174,60 @@
background-color: var(--col_footer_copyright);
}
+ @media screen and (max-width: 800px) {
+
+ .footer {
+ grid-template-areas: "social-notice social-notice social-links"
+ "column1 column1 column1"
+ "column2 column2 column2"
+ "column3 column3 column3"
+ "copyright copyright copyright";
+ }
+
+ .footer-column
+ {
+ justify-content: center;
+ justify-items: center;
+ padding: 20px;
+ max-width: 60%;
+ width: 100%;
+ text-align: center;
+ }
+
+ .footer-column > :global(.icon) {
+ align-self: center;
+ }
+
+ .footer-column-title::after {
+ content: "";
+ background-color: var(--col_text_footer);
+ position: absolute;
+ bottom: 0;
+ left: 28%;
+ height: 2px;
+ width: 45%;
+ margin: inherit auto;
+ }
+ }
+
+ @media screen and (max-width: 543px) {
+
+ .footer {
+ grid-template-areas: "social-links social-links social-links"
+ "column1 column1 column1"
+ "column2 column2 column2"
+ "column3 column3 column3"
+ "copyright copyright copyright";
+ }
+
+ .footer__social-notice {
+ display: none;
+ }
+
+ .footer__social-links {
+ justify-content: center;
+ margin: inherit 20px;
+ }
+ }
+
\ No newline at end of file