fix: mobile brochure viewing

2 files changed, 19 insertions, 8 deletions

diff --git a/brochure/index.php b/brochure/index.php
index 237266d..6dd3621 100644
--- a/brochure/index.php
+++ b/brochure/index.php
@@ -1,10 +1,16 @@
 <?php include('../header.php'); ?>
 <section class="banner">
-	<h1>Interactive brochure</h1>
+	<h1>Interactive Brochure</h1>
 </section>
 
 <section class="quiet">
-<p>Click on pages to fold and unfold and use the <em>Flip</em> button to toggle front and back.</p>
+	<noscript>
+	This brochure requires JavaScript to work properly. If you prefer not to use JavaScript, you can <a href="/#offerings">view our offerings on our homepage here.</a>
+	</noscript>
+
+	<p>
+	Click on pages to fold and unfold and use <em>Flip</em> to toggle front and back. This works best on a tablet or desktop screen.
+	</p>
 
 <?php include('./brochure.html')?>
 
diff --git a/brochure/styles.css b/brochure/styles.css
index 351bc00..2abb118 100644
--- a/brochure/styles.css
+++ b/brochure/styles.css
@@ -12,10 +12,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 .paper {
 	display: grid;
 
-	width: 21.25em;
+	width: 8.25rem;
 
-	grid-template-columns: 21.25em;
-	grid-template-rows: 50em; /* .425 aspect */
+	grid-template-columns: 8.25rem;
+	grid-template-rows: 19.41rem; /* .425 aspect */
 
 	margin: 2rem auto;
 
@@ -40,9 +40,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 }
 
 .paper .page .side {
-	width: inherit;
-	height: inherit;
-
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -86,3 +83,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 	transform-origin: center right;
 }
 
+@media only screen and (min-width: 1500px) {
+	.paper {
+		width: 21.25em;
+
+		grid-template-columns: 21.25em;
+		grid-template-rows: 50em; /* .425 aspect */
+	}
+}