Responsive styling of home page.

2024-06-12 13:15:03 +02:00
parent 78325c8729
commit 00d49d5fa4
1 changed files with 14 additions and 1 deletions
--- a/frontend/src/app/pages/home/home.component.scss
+++ b/frontend/src/app/pages/home/home.component.scss
@@ -11,6 +11,7 @@ $cardBorderRadius: .5em;
        flex-direction: column;
        gap: 2em;
        max-width: 50em;
+        width: 90%;
        margin: auto;

        .publication {
@@ -29,8 +30,20 @@ $cardBorderRadius: .5em;

            img {
                object-fit: cover;
-                height: 32em;
+                height: 15em;
                border-radius: $cardBorderRadius $cardBorderRadius 0 0;
+
+                @media screen and (min-width: 450px) {
+                    height: 20em;
+                }
+
+                @media screen and (min-width: 600px) {
+                    height: 25em;
+                }
+
+                @media screen and (min-width: 750px) {
+                    height: 32em;
+                }
            }
            
            .body {