diff options
| -rw-r--r-- | brochure/index.php | 10 | ||||
| -rw-r--r-- | brochure/styles.css | 17 |
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 */ + } +} |