Fix mobile view. Cannot fix code size issue on mobile.

crhallberg · May 27, 2018 · 39692a7 · 39692a7
1 parent b4734a5
commit 39692a7
Show file tree

Hide file tree

Showing 31 changed files with 248 additions and 141 deletions.
diff --git a/Website/circle-circle.html b/Website/circle-circle.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="point-circle.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="section_1_challenges.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="circlecircle" class="anchor" href="#circlecircle" aria-hidden="true" rel="nofollow"></a>CIRCLE/CIRCLE</h1>

diff --git a/Website/circle-rect.html b/Website/circle-rect.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="rect-rect.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="section_2_challenges.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="circle-rectangle" class="anchor" href="#circle-rectangle" aria-hidden="true" rel="nofollow"></a>CIRCLE/<wbr>RECTANGLE</h1>

diff --git a/Website/css/stylesheet.css b/Website/css/stylesheet.css
@@ -23,7 +23,7 @@ body {
     font-size: 16px;
     color: black;
 }
-
+body { margin-top: 4.5rem; }
 /* HEADLINES */
 h1,
 h2,
@@ -35,14 +35,19 @@ h6 {
     font-weight: 600;
 }
 h1 {
-    font-size: 4em;
+    font-size: 2.5rem;
     line-height: 1.15em;
-    margin: 0em 0 0.2em 0;
+    margin: 0em 0 0.2fem90 0------------------------em 0;
     text-align: center;
 }
 h1:first-child {
     margin-top: 2rem;
 }
+@media(min-width: 768px) {
+    h1 {
+        font-size: 4rem;
+    }
+}
 h2 {
     font-size: 2em;
     line-height: 1.15em;
@@ -163,9 +168,11 @@ code,
 code,
 .highlight pre {
     border: 1px solid #ccc;
-    font-size: 1rem;
     background-color: #f5f5f5;
 }
+.highlight pre span {
+    font-size: 1rem;
+}
 pre code,
 .highlight pre {
     display: block;
@@ -194,8 +201,9 @@ img {
 
 /* LAYOUT ELEMENTS */
 #wrapper {
-    width: 600px;
-    margin: 4.5em auto;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 .5rem;
 }
 
 #tableOfContents {
@@ -226,36 +234,34 @@ img {
 /* HEADER */
 header {
     position: fixed;
-    width: 602px;
-    height: 3.5em;
     top: 0;
+    width: 100%;
+    max-width: 600px;
+    height: 3.5em;
     margin: 0 auto 0 auto;
-    padding: 1em 0.5em 0 0.5em;
     font-size: 1.2rem;
     font-weight: 600;
     background: rgba(255, 255, 255, 0.9);
 }
-header a {
-    text-align: center;
+.flex {
+    display: flex;
 }
-#prev {
-    width: 10%;
-    float: left;
+#prev,
+#next {
+    flex: 0 1 4rem;
+    padding: 1.4rem;
+    text-align: center;
 }
 #title {
-    width: 80%;
-    float: left;
+    flex: 1;
+    padding-top: 1rem;
     text-align: center;
 }
 #title small {
     font-size: 12px;
     font-weight: normal;
     line-height: 2rem;
 }
-#next {
-    width: 10%;
-    float: right;
-}
 #next:after {
     clear: both;
 }
@@ -269,7 +275,10 @@ footer {
 /* INTERACTIVE DEMO */
 #sketch {
     width: 600px;
+    max-width: 100vw;
     height: 400px;
+    max-height: 66.667vw;
+    margin: auto;
     text-align: center;
     background-color: #eee;
     overflow: hidden;
@@ -281,8 +290,16 @@ footer {
 }
 canvas {
     display: block;
-    border: 1px solid rgb(200, 200, 200);
+    max-width: 100%;
+    max-height: 100%;
     margin-bottom: 1.5em;
+    border: 1px solid rgb(200, 200, 200);
+    border-width: 1px 0;
+}
+@media (min-width: 602px) {
+    canvas {
+        border-width: 1px;
+    }
 }
 
 /* UTILITY */

diff --git a/Website/index.html b/Website/index.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <span id="prev">&nbsp;</span>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="table_of_contents.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="introduction" class="anchor" href="#introduction" aria-hidden="true" rel="nofollow"></a>INTRODUCTION</h1>

diff --git a/Website/license.html b/Website/license.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="table_of_contents.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="what_you_should_already_know.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <p><img src="images/license.jpg" alt="Share and remix"></p>

diff --git a/Website/line-circle.html b/Website/line-circle.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="line-point.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="line-line.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="linecircle" class="anchor" href="#linecircle" aria-hidden="true" rel="nofollow"></a>LINE/CIRCLE</h1>

diff --git a/Website/line-line.html b/Website/line-line.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="line-circle.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="line-rect.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="lineline" class="anchor" href="#lineline" aria-hidden="true" rel="nofollow"></a>LINE/LINE</h1>

diff --git a/Website/line-point.html b/Website/line-point.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="section_2_challenges.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="line-circle.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="linepoint" class="anchor" href="#linepoint" aria-hidden="true" rel="nofollow"></a>LINE/POINT</h1>

diff --git a/Website/line-rect.html b/Website/line-rect.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="line-line.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="section_3_challenges.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="linerectangle" class="anchor" href="#linerectangle" aria-hidden="true" rel="nofollow"></a>LINE/RECTANGLE</h1>

diff --git a/Website/object_oriented_collision.html b/Website/object_oriented_collision.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="section_5_challenges.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="thanks.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <figcaption>Refresh your browser for random squares!</figcaption>

diff --git a/Website/point-circle.html b/Website/point-circle.html
@@ -14,17 +14,20 @@
   </head>
 
   <body>
-    <div id="wrapper">
-      <header>
+    <header>
+      <div class="flex">
         <a href="point-point.html" id="prev">&larr;</a>
         <span id="title">
             <a href="index.html">Collision Detection</a><br/>
             <a href="table_of_contents.html"><small>Table of Contents</small></a>
         </span>
         <a href="circle-circle.html" id="next">&rarr;</a>
-      </header>
+      </div>
+    </header>
+
+    <div id="sketch" hidden></div>
 
-      <div id="sketch" hidden></div>
+    <div id="wrapper">
 
       <main>
         <h1><a id="pointcircle" class="anchor" href="#pointcircle" aria-hidden="true" rel="nofollow"></a>POINT/CIRCLE</h1>