summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2024-06-09 18:19:23 -0400
committerAdam T. Carpenter <atc@53hor.net>2024-06-09 18:19:23 -0400
commit4ae354f108acaef8c78b778124d4638904bd7c69 (patch)
tree7e4efebffa8defd9966276196bd829d4b94a3dd9
parent67d362b9976d99975f10da46ee900122576e2b3e (diff)
downloadcarpentertutoring-4ae354f108acaef8c78b778124d4638904bd7c69.tar.xz
carpentertutoring-4ae354f108acaef8c78b778124d4638904bd7c69.zip
fix: mobile brochure viewing
-rw-r--r--brochure/index.php10
-rw-r--r--brochure/styles.css17
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 */
+ }
+}