LewisAndClark-CSD · Joshua-Bentley · Nov 6, 2018 · Nov 6, 2018 · Nov 6, 2018 · Nov 6, 2018
diff --git a/case1/gp_cover_txt.html → case1/gp_cover.html b/case1/gp_cover_txt.html → case1/gp_cover.html
@@ -5,17 +5,20 @@
           New Perspectives on HTML5 and CSS3, 7th Edition
           Tutorial 5
           Case Problem 1
-          
+
           Ghost of the Deep Cover Page
-          Author: 
-          Date:   
-      
+          Author: Joshua Bentley, Austin A.
+          Date: 11/7/18
+
           Filename: gp_cover.html
          -->
-   
+
    <title>Ghost of the Deep Cover Page</title>
    <meta charset="utf-8" />
-
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <link rel="stylesheet" href="gp_reset.css" media="all" />
+   <link rel="stylesheet" href="gp_layout.css" media="screen" />
+   <link rel="stylesheet" href="gp_print.css" media="print" />
 </head>
 
 <body>
@@ -31,37 +34,37 @@
          <li><a href="#">Writers</a></li>
       </ul>
    </nav>
-   
+
    <section id="sheet">
       <h1>Capt. Marvel and the Ghost of the Deep</h1>
       <img src="gp_panel01.png" class="panel size1" alt="" />
       <footer>
             <a href="gp_page1.html"><img src="gp_next.png" alt="next" /></a>
       </footer>
    </section>
-   
+
    <article>
       <h1>Fawcett Comics</h1>
-      <p>One of the most successful comic book publisher in the 1940's, Fawcett Publications 
+      <p>One of the most successful comic book publisher in the 1940's, Fawcett Publications
          began in 1919 with the magazine, <cite>Captain Billy's Whiz Bang</cite>. Its total
          circulation from all of its publications eventually reached over 10 million issues
          a month.</p>
       <p>Fawcett is best known for its popular superhero, Captain Marvel, based on the
          adventures of radio reporter Billy Batson who would turn into Captain Marvel
          upon uttering the word <em>Shazam!</em>. Other successful characters include
-         Ibis the Invincible, Hopalong Cassidy, and Mister Scarlet. Fawcett was also known 
-         for its series of horror comics including <cite>Beware! Terror Tales</cite>, 
+         Ibis the Invincible, Hopalong Cassidy, and Mister Scarlet. Fawcett was also known
+         for its series of horror comics including <cite>Beware! Terror Tales</cite>,
          <cite>Worlds of Fear</cite>, and <cite>Strange Suspense Stories</cite>. The
-         company branched out into humor comic magazines with <cite>Otis and Babs</cite> 
+         company branched out into humor comic magazines with <cite>Otis and Babs</cite>
          and <cite>Hoppy the Marvel Bunny</cite> among its most popular titles.</p>
       <p>Facing declining sales, Fawcett Comics ceased publication of its superhero
          titles in 1953. Several of its titles were eventually sold to Charlton
          Comics.</p>
    </article>
-   
+
    <footer>
       Golden Pulps: A Comic Book Resource for Collectors and Fans
    </footer>
-   
+
 </body>
 </html>
diff --git a/case1/gp_layout.css b/case1/gp_layout.css
@@ -0,0 +1,95 @@
+@charset "utf-8";
+
+/*
+   New Perspectives on HTML5 and CSS3, 7th Edition
+   Tutorial 5
+   Case Problem 1
+
+   Author: Joshua Bentley, Austin A.
+   Date: 11/7/18
+
+   Filename: gp_layout.css
+
+   This file contains the layout styles and media
+   queries used with sample pages from the Golden
+   Pulps website.
+
+*/
+
+
+/* Import Basic Design Styles Used on All Screens */
+
+@import url("gp_designs.css");
+
+/* Flex Layout Styles */
+body {
+	display: -webkit-box;
+	display: -moz-flex;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+  display: flex;
+
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+}
+
+section#sheet {
+  -webkit-flex: 3 1 301px;
+  flex: 3 1 301px;
+}
+
+article {
+  -webkit-flex: 1 3 180px;
+  flex: 1 3 180px;
+}
+
+
+
+/* ============================================
+	Mobile Devices: 0 - 480 pixels
+   ============================================
+*/
+@media only screen and (max-width: 480px) {
+  img.panel {
+    width: 100%;
+  }
+
+  nav.horizontal {
+    -webkit-order: 99;
+		order: 99;
+  }
+
+	footer {
+		-webkit-order: 100;
+		order: 100;
+	}
+
+
+}
+
+
+
+/* ===================================================
+	Tablet and Desktop Devices: Greater than 480 pixels
+   ===================================================
+*/
+@media only screen and (min-width: 481px) {
+  nav.horizontal ul {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    height: 40px;
+  }
+
+  nav.horizontal ul li {
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+  }
+
+  img.size1 { width: 100%; }
+  img.size2 { width: 60%; }
+  img.size3 { width: 40%; }
+  img.size4 { width: 30%; }
+
+}
diff --git a/case1/gp_layout_txt.css b/case1/gp_layout_txt.css
diff --git a/case1/gp_page1_txt.html → case1/gp_page1.html b/case1/gp_page1_txt.html → case1/gp_page1.html
@@ -5,23 +5,27 @@
           New Perspectives on HTML5 and CSS3, 7th Edition
           Tutorial 5
           Case Problem 1
-          
+
           Ghost of the Deep Page 1
-          Author: 
-          Date:   
-      
+          Author: Joshua Bentley, Austin A.
+          Date: 11/7/18
+
           Filename: gp_page1.html
          -->
-   
+
    <title>Ghost of the Deep Page 1</title>
    <meta charset="utf-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <link rel="stylesheet" href="gp_reset.css" media="screen" />
+   <link rel="stylesheet" href="gp_layout.css" media="screen" />
+   <link rel="stylesheet" href="gp_print.css" media="print" />
    </head>
 
 <body>
    <header>
       <img src="gp_logo.png" alt="Golden Pulp" />
    </header>
-   
+
    <nav class="horizontal">
       <ul>
          <li><a href="#">Home</a></li>
@@ -31,35 +35,35 @@
          <li><a href="#">Writers</a></li>
       </ul>
    </nav>
-   
+
    <section id="sheet">
       <h1>Capt. Marvel and the Ghost of the Deep</h1>
-      
-      <img src="gp_panel02.png" class="panel size1" alt="" /> 
-      <img src="gp_panel03.png" class="panel size2" alt="" /> 
-      <img src="gp_panel04.png" class="panel size3" alt="" /> 
-      
+
+      <img src="gp_panel02.png" class="panel size1" alt="" />
+      <img src="gp_panel03.png" class="panel size2" alt="" />
+      <img src="gp_panel04.png" class="panel size3" alt="" />
+
       <footer>
          <a href="gp_cover.html"><img src="gp_prev.png" alt="prev" /></a>
          <a href="gp_page2.html"><img src="gp_next.png" alt="next" /></a>
       </footer>
-      
+
    </section>
-     
+
    <article>
       <h1>Captain Marvel</h1>
       <p>In response to the popularity of Superman and Batman, Fawcett Comics introduced
          Captain Thunder in the 1939 issue of <a href="#">Flash Comics #1</a>. The issue
          was an <em>ashcan copy</em>, a term for low-print runs whose purpose was not sales
-         but to establish a trademark claim for legal purposes. Due to trademark infringements 
+         but to establish a trademark claim for legal purposes. Due to trademark infringements
          with another established character, Captain Thunder became Captain Marvelous and later
          Captain Marvel. Flash Comics became Whiz Comics (also due to trademark issues.)</p>
       <p>Captain Marvel's alter ego was a 12-year old radio reporter named Billy Batson, a
          copy of Superman's alter ego, reporter Clark Kent, but younger to appeal to adolescent
          readers. Billy Batson's name was partially based on the nickname given to Fawcett Publication's
          founder Wilford Fawcett &mdash; "Captain Billy".</p>
    </article>
-   
+
    <footer>
       Golden Pulps: A Comic Book Resource for Collectors and Fans
    </footer>

diff --git a/case1/gp_page2_txt.html → case1/gp_page2.html b/case1/gp_page2_txt.html → case1/gp_page2.html
@@ -5,23 +5,27 @@
           New Perspectives on HTML5 and CSS3, 7th Edition
           Tutorial 5
           Case Problem 1
-          
+
           Ghost of the Deep Page 2
-          Author: 
-          Date:   
-      
+          Author: Joshua Bentley, Austin A.
+          Date: 11/7/18
+
           Filename: gp_page2.html
          -->
-   
+
    <title>Ghost of the Deep Page 2</title>
    <meta charset="utf-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <link rel="stylesheet" href="gp_reset.css" media="screen" />
+   <link rel="stylesheet" href="gp_layout.css" media="screen" />
+   <link rel="stylesheet" href="gp_print.css" media="print" />
    </head>
 
 <body>
    <header>
       <img src="gp_logo.png" alt="Golden Pulp" />
    </header>
-   
+
    <nav class="horizontal">
       <ul>
          <li><a href="#">Home</a></li>
@@ -31,25 +35,25 @@
          <li><a href="#">Writers</a></li>
       </ul>
    </nav>
-   
+
    <section id="sheet">
       <h1>Capt. Marvel and the Ghost of the Deep</h1>
-
-      <img src="gp_panel05.png" class="panel size2" alt="" /> 
-      <img src="gp_panel06.png" class="panel size3" alt="" /> 
-      <img src="gp_panel07.png" class="panel size2" alt="" /> 
-      <img src="gp_panel08.png" class="panel size3" alt="" /> 
-      <img src="gp_panel09.png" class="panel size4" alt="" /> 
-      <img src="gp_panel10.png" class="panel size4" alt="" /> 
-      <img src="gp_panel11.png" class="panel size3" alt="" /> 
 
-
+      <img src="gp_panel05.png" class="panel size2" alt="" />
+      <img src="gp_panel06.png" class="panel size3" alt="" />
+      <img src="gp_panel07.png" class="panel size2" alt="" />
+      <img src="gp_panel08.png" class="panel size3" alt="" />
+      <img src="gp_panel09.png" class="panel size4" alt="" />
+      <img src="gp_panel10.png" class="panel size4" alt="" />
+      <img src="gp_panel11.png" class="panel size3" alt="" />
+
+
       <footer>
          <a href="gp_page1.html"><img src="gp_prev.png" alt="prev" /></a>
-         <a href="gp_page3.html"><img src="gp_next.png" alt="next" /></a>                 
+         <a href="gp_page3.html"><img src="gp_next.png" alt="next" /></a>
       </footer>
    </section>
-   
+
    <article>
       <h1>Marvel's Adversaries</h1>
       <p>Captain Marvel's arch enemy was the mad scientist <a href="#">Doctor Sivana</a>,
@@ -71,7 +75,7 @@ <h1>Marvel's Adversaries</h1>
          and Ibac. The society was led by the cunning <a href="#">Mister Mind</a>, a character who was
          eventually revealed to be a highly intelligent worm from another planet.</p>
    </article>
-   
+
    <footer>
       Golden Pulps: A Comic Book Resource for Collectors and Fans
    </footer>