diff --git a/cardie/static/main/authentication.css b/cardie/static/main/authentication.css index 165cb7d..0d4199d 100644 --- a/cardie/static/main/authentication.css +++ b/cardie/static/main/authentication.css @@ -84,4 +84,13 @@ html { #authentication_privacypolicy:hover { scale: 1.1; opacity: 1; +} + +/* Footer styles */ +#footer { + background-color: var(--default-glass-background); + border-top: var(--default-glass-border); + text-align: center; + padding: clamp(1vh, 10px, 1vw); + width: 100%; } \ No newline at end of file diff --git a/cardie/static/main/footer.css b/cardie/static/main/footer.css index 94d8b3a..ac811c0 100644 --- a/cardie/static/main/footer.css +++ b/cardie/static/main/footer.css @@ -1,12 +1,9 @@ - @media (min-width: 1000px) { /* Large screens */ - .footer { position: fixed; bottom: 20px; left: 20px; - display: flex; flex-direction: column; z-index: 9; @@ -19,17 +16,16 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 50px; - display: flex; align-items: center; justify-content: center; } - + .footer_main_button_image { width: clamp(4vh, 40px, 4vw); height: auto; } - + .footer_main_button_icon { color: white; font-size: clamp(3vh, 30px, 3vw); @@ -38,21 +34,18 @@ .footer_main_contents { display: flex; flex-direction: row; - background-color: var(--default-glass-background); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(0.5vh, 5px, 0.5vw); margin-left: clamp(1vh, 10px, 1vw); - height: fit-content; } - + .footer_main_contents_link { font-family: var(--default-font-family); - font-size: clamp(1.4vh, 14px, 1.4vwS); + font-size: clamp(1.4vh, 14px, 1.4vw); color: white; opacity: 0.7; text-decoration: none; @@ -67,7 +60,7 @@ align-items: center; margin-bottom: clamp(1vh, 10px, 1vw); } - + .footer_warning_button { width: clamp(6vh, 60px, 6vw); height: clamp(6vh, 60px, 6vw); @@ -75,56 +68,47 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: clamp(5vh, 50px, 5vw); - display: flex; align-items: center; justify-content: center; } - + .footer_warning_contents { display: flex; flex-direction: column; - background-color: rgba(178, 145, 60, 0.4); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(1vh, 10px, 1vw); margin-left: clamp(1vh, 10px, 1vw); - height: fit-content; } - + .footer_warning_contents_title { color: white; font-family: var(--default-font-family); opacity: 0.7; font-weight: 600; font-size: clamp(1.4vh, 14px, 1.4vw); - margin: 0px; } - + .footer_warning_contents_text { color: white; font-family: var(--default-font-family); opacity: 0.7; - font-size: clamp(1.2vh, 12pv, 1.2vw); - + font-size: clamp(1.2vh, 12px, 1.2vw); margin: 0px; } - } @media (max-width: 1000px) { /* Small Screens */ - .footer { - position: fixed; + position: static; bottom: 10px; left: 10px; - display: flex; flex-direction: column; z-index: 9; @@ -137,17 +121,16 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 50px; - display: flex; align-items: center; justify-content: center; } - + .footer_main_button_image { width: clamp(4vh, 40px, 4vw); height: auto; } - + .footer_main_button_icon { color: white; font-size: clamp(3vh, 30px, 3vw); @@ -156,21 +139,18 @@ .footer_main_contents { display: flex; flex-direction: row; - background-color: var(--default-glass-background); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(0.2vh, 2px, 0.2vw); margin-left: clamp(0.5vh, 5px, 0.5vw); - height: fit-content; } - + .footer_main_contents_link { font-family: var(--default-font-family); - font-size: clamp(1.2vh, 12px, 1.2vwS); + font-size: clamp(1.2vh, 12px, 1.2vw); color: white; opacity: 0.7; text-decoration: none; @@ -185,7 +165,7 @@ align-items: center; margin-bottom: clamp(1vh, 10px, 1vw); } - + .footer_warning_button { width: clamp(5vh, 50px, 5vw); height: clamp(5vh, 50px, 5vw); @@ -193,46 +173,39 @@ border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 50px; - display: flex; align-items: center; justify-content: center; } - + .footer_warning_contents { display: flex; flex-direction: column; - background-color: rgba(178, 145, 60, 0.4); border: var(--default-glass-border); backdrop-filter: var(--default-glass-blur); border-radius: 10px; - padding: clamp(0.2vh, 2px, 0.2vw); margin-left: clamp(0.5vh, 5px, 0.5vw); - height: fit-content; } - + .footer_warning_contents_title { color: white; font-family: var(--default-font-family); opacity: 0.7; font-weight: 600; font-size: 14px; - margin: 0px; } - + .footer_warning_contents_text { color: white; font-family: var(--default-font-family); opacity: 0.7; font-size: 12px; - margin: 0px; } - } .footer_main { @@ -259,4 +232,4 @@ .footer_warning_contents_text > a { color: white; font-weight: 500; -} \ No newline at end of file +} diff --git a/cardie/static/main/home.css b/cardie/static/main/home.css index 47fe569..e90c317 100644 --- a/cardie/static/main/home.css +++ b/cardie/static/main/home.css @@ -204,4 +204,13 @@ html { #dialog_home_delete { display: flex; flex-direction: column; +} + +/* Footer styles */ +#footer { + background-color: var(--default-glass-background); + border-top: var(--default-glass-border); + text-align: center; + padding: clamp(1vh, 10px, 1vw); + width: 100%; } \ No newline at end of file