Merge pull request #4 from fac31/responsive-home-page

Responsive home page
fac31 · Mar 30, 2024 · 3337a09 · 3337a09
2 parents 6a5896f + 1683b05
commit 3337a09
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="images/favicon.ico">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="responsive_home.css">
     <title>FiestaFavours</title>
 </head>
 <body>

diff --git a/responsive_home.css b/responsive_home.css
@@ -0,0 +1,40 @@
+/**************************************** Responsive Styling for home page *************************************************/
+
+/* 
+    I like to find these values by switching to the mobile view in devtools and 
+    resising the screen until the website starts to look funny and just taking the nearest
+    whole number.
+
+    Unfortunately these px values cant be put in variables
+*/
+@media screen and (max-width: 1000px) {
+    .page-main h1 {
+        font-size: 37pt;
+    }
+    .page-main p {
+        font-size: 15pt;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .page-main h1 {
+        font-size: 33pt;
+    }
+    .page-main p {
+        font-size: 12pt;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    .homePage-buttons button {
+        width: 100px;
+        font-size: 14px;
+        margin: 20px 35px;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .page-main h1 {
+        font-size: 29pt;
+    }
+}
diff --git a/style.css b/style.css
@@ -22,7 +22,7 @@
     --light-orange-color: #D1B293;
     --ok-button-color: #82E79E;
     --button-color: #E78282;
-  }
+}
 
 *{
     font-family: var(--main-font);
@@ -58,7 +58,6 @@ body{
 .page-header ul{
     display: flex;
     justify-content: space-between;
-    width: 24%;
     margin: 0;
     padding: 0;
     list-style-type: none;
@@ -98,6 +97,10 @@ body{
     margin: 50px 0 16px 0;
 }
 
+.page-main p {
+    text-align: center;
+}
+
 .agency-descriptions-p{
     font-size: 18pt;
     margin-bottom: 160px;
@@ -122,7 +125,8 @@ body{
 .homePage-buttons button:active {
   background-color: initial;
   background-position: 0 0;
-  color: var(--bg-shade2-color);
+  color: white;
+  backdrop-filter: brightness(40%)
 }