mobile-update

alexthoden · Jan 24, 2025 · affddd0 · affddd0
1 parent b1d058b
commit affddd0
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 22 deletions.
diff --git a/faq.html b/faq.html
@@ -10,9 +10,13 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/L_A logo.svg">
 
 </head>
-    <nav class = "navbar">
+    <button class="hamburger" id="hamburger">
+        &#9776; <!-- Hamburger icon -->
+    </button>
+    <nav class="navbar-class" id="navbar-id">
         <ul class = "navbar">
             <li><a href="index.html" class = "not-bold">Home</a></li>
             <li><a href="itinerary.html" class = "not-bold">Itinerary</a></li>

diff --git a/images/L_A logo.svg b/images/L_A logo.svg
diff --git a/images/L_A logo_thin.svg b/images/L_A logo_thin.svg
diff --git a/index.html b/index.html
@@ -4,12 +4,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Our Wedding</title>
+    <title>Lauren & Alex</title>
     <link rel="stylesheet" href="styles.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/L_A logo.svg">
 </head>
 
 <body>

diff --git a/itinerary.html b/itinerary.html
@@ -10,9 +10,14 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/L_A logo.svg">
 
 </head>
-    <nav class = "navbar">
+
+    <button class="hamburger" id="hamburger">
+        &#9776; <!-- Hamburger icon -->
+    </button>
+    <nav class="navbar-class" id="navbar-id">
         <ul class = "navbar">
             <li><a href="index.html" class = "not-bold">Home</a></li>
             <li><a href="itinerary.html" class = "active not-bold">Itinerary</a></li>
@@ -28,5 +33,5 @@ <h1 class = "header">Lauren & Alex</h1>
     <div class="middle">
         <h1>COMING SOON</h1>
     </div>
-
+    <script src="functions.js"></script>
 </html>
diff --git a/photos.html b/photos.html
@@ -10,9 +10,13 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/L_A logo.svg">
 
 </head>
-    <nav class = "navbar">
+    <button class="hamburger" id="hamburger">
+        &#9776; <!-- Hamburger icon -->
+    </button>
+    <nav class="navbar-class" id="navbar-id">
         <ul class = "navbar">
             <li><a href="index.html" class = "not-bold">Home</a></li>
             <li><a href="itinerary.html" class = "not-bold">Itinerary</a></li>
@@ -59,6 +63,6 @@ <h2>Photo Gallery</h2>
     </section>
 
 
-
+    <script src="functions.js"></script>
 
 </html>
diff --git a/registry.html b/registry.html
@@ -10,9 +10,13 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/L_A logo.svg">
 
 </head>
-    <nav class = "navbar">
+    <button class="hamburger" id="hamburger">
+        &#9776; <!-- Hamburger icon -->
+    </button>
+    <nav class="navbar-class" id="navbar-id">
         <ul class = "navbar">
             <li><a href="index.html" class = "not-bold">Home</a></li>
             <li><a href="itinerary.html" class = "not-bold">Itinerary</a></li>
@@ -29,5 +33,5 @@ <h1 class = "header">Lauren & Alex</h1>
         <h1>COMING SOON</h1>
     </div>
 
-
+    <script src="functions.js"></script>
 </html>
diff --git a/response.html b/response.html
@@ -10,11 +10,12 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/L_A logo.svg">
 </head>
 <body class = "rsvp-labels">
 
     <div class="rsvp-section">
-        <h2>RSVP</h2>
+        <h2 class="rsvp-header">RSVP</h2>
         <form id="rsvp-form">
             <label for="name">Your Name:</label>
             <input type="text" id="name" name="name" disabled>

diff --git a/rsvp.html b/rsvp.html
@@ -13,11 +13,15 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/L_A logo.svg">
 
 
 </head>
 <body>
-    <nav class = "navbar">
+    <button class="hamburger" id="hamburger">
+        &#9776; <!-- Hamburger icon -->
+    </button>
+    <nav class="navbar-class" id="navbar-id">
         <ul class = "navbar">
             <li><a href="index.html" class = "not-bold">Home</a></li>
             <li><a href="itinerary.html" class = "not-bold">Itinerary</a></li>
@@ -34,7 +38,7 @@
 
     <main>
         <div class="name-input-section">
-            <h2>Enter Your Name</h2>
+            <h2 class="form-header">Enter Your Name</h2>
             <form id="name-form">
                 <label for="name">Your Name:</label>
                 <input type="text" id="name" name="name" required>

diff --git a/styles.css b/styles.css
@@ -54,16 +54,15 @@ header {
     position: relative;
 }
 
-header::after {
+/* header::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    /* background: rgba(0, 0, 0, 0.5); */
     z-index: 1;
-}
+} */
 
 header h1 {
     font-size: calc(1em + 1vw);
@@ -101,10 +100,10 @@ nav ul li a:hover {
     color: #ff6363;
 }
 
-div.centered {
+/* div.centered {
     font-family: Playfair Display SC;
     font-size: min(60px, 4vw);
-}
+} */
 
 /* Main Content Styling */
 main {
@@ -542,6 +541,8 @@ body {
     padding: 0;
     font-family: Playfair Display SC;
     overflow: auto;
+    overflow-x: hidden;
+    max-width: 100%;
     /* overflow: hidden; */
 }
 
@@ -734,12 +735,12 @@ section.details {
 .gallery-item-text {
     grid-column: 1; /* Place text in the first column */
     padding-right: 1vw; /* Add space between text and image */
-    font-size: 1rem; /* Adjust text size as needed */
+    font-size: 4vw; /* Adjust text size as needed */
 }
 
 .gallery-item-image {
     grid-column: 2; /* Place image in the second column */
-    max-width: 400px; /* Ensure images fit within their column */
+    max-width: 60vw; /* Ensure images fit within their column */
     height: auto; /* Maintain aspect ratio */
     display: block;
 }
@@ -748,6 +749,14 @@ section.details {
 
 
 /* Form Section */
+.form-header {
+    font-size: 5vw;
+}
+
+.rsvp-header {
+    font-size: 5vw;
+}
+
 form {
     max-width: 600px;
     margin: auto;
@@ -763,6 +772,7 @@ form label {
     font-weight: bold;
     color: #333;
     font-family: Quicksand;
+    font-size: 4vw;
 }
 
 form input,
@@ -773,7 +783,7 @@ form select {
     margin-bottom: 1vw;
     border: 1px solid #ddd;
     border-radius: 4px;
-    font-size: min(20px, 3vw);
+    font-size: min(5vw);
 }
 
 form button {
@@ -783,7 +793,7 @@ form button {
     border: none;
     background: #ff6363;
     color: #fff;
-    font-size: min(20px, 3vw);
+    font-size: min(5vw);
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.3s;
@@ -1003,7 +1013,7 @@ br.header {
 
 .css-1e30inf {
     text-align: center;
-    font-size: min(30px, 4vw);
+    font-size: min(30px, 3.5vw);
 }
 
 .css-19cvhdm {
@@ -1019,7 +1029,7 @@ br.header {
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-    padding: 20px 0 20px 72px;
+    padding: 3vw 0 3vw 40px;
     width: 315px;
 }