Merge pull request #17 from JLambertazzo/stage

Stage
JLambertazzo · Sep 23, 2023 · 3aaadc4 · 3aaadc4
2 parents ad26076 + 0157ca5
commit 3aaadc4
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 73 deletions.
diff --git a/dist/easier/index.html b/dist/easier/index.html
@@ -45,8 +45,9 @@
 <body class="bg-gray-50">
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
     <div class="flex justify-start">
-            <button onclick="selectRandomBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
+          <button onclick="selectRandomBingo()"   class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
           <button onclick="selectHardcoreBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Hardcore Challenge</button>
+          <a href="/"                             class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1 ml-auto">Home</a>
         </div>
         <table id="bingo-container" class="my-2 rounded-md p-2 w-fit mx-auto">
             <tr>

diff --git a/dist/harder/index.html b/dist/harder/index.html
@@ -45,8 +45,9 @@
 <body class="bg-gray-50">
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
     <div class="flex justify-start">
-            <button onclick="selectRandomBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
+          <button onclick="selectRandomBingo()"   class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
           <button onclick="selectHardcoreBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Hardcore Challenge</button>
+          <a href="/"                             class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1 ml-auto">Home</a>
         </div>
         <table id="bingo-container" class="my-2 rounded-md p-2 w-fit mx-auto">
             <tr>

diff --git a/dist/help/index.html b/dist/help/index.html
@@ -40,10 +40,10 @@
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="/help/script.js"></script>
   </head>
-<body class="md:overflow-hidden w-screen h-screen bg-gray-100 font-sans">
+<body class="w-screen h-screen bg-gray-100 font-sans">
     <div class="text-left grid mx-12 my-8">
         <div>
-            <h1 class="font-bold text-5xl text-blue-700">Help using <br>Bike Bingo</h1>
+            <h1 class="font-bold text-5xl text-blue-700">Help using Bike Bingo</h1>
             <div class="flex flex-col text-gray-700 space-y-4 my-4 text-sm">
                 <p>Welcome to this web site, where we hope to show you that there are ways to explore Winnipeg on bicycle via trails, separated paths and speed-reduced residential streets (although there are some areas where the cycling infrastructure leaves a lot to be desired)</p>
                 <p>There are two bingo cards – an easier one that features more protected infrastructure and direct travel, and a harder one that is more on-road and has some hard-to-find spots.</p>

diff --git a/dist/index.html b/dist/index.html
@@ -41,14 +41,17 @@
     <script defer src="/warning.js"></script>
 </head>
 <body class="overflow-hidden w-screen h-screen bg-gray-100 font-sans">
-    <div class="flex flex-col justify-between md:flex-row h-full w-full md:h-auto">
-        <div class="text-left mx-12 flex flex-col justify-between md:w-1/3">
+    <div class="flex flex-col justify-between md:flex-row h-full w-full">
+        <div class="text-left mx-12 flex flex-col justify-between md:w-2/5">
             <div class="my-4">
                 <a class="text-blue-700 underline mr-1 hover:text-gray-900" href="/wall">Wall of Fame</a>
                 <!-- <a class="text-blue-700 underline hover:text-gray-900" href="/easier/blog">Blog</a> -->
             </div>
             <div class="md:my-0 my-12">
-                <h1 class="font-bold text-5xl lg:text-7xl text-blue-700">Welcome to <br>Winnipeg Bike Bingo!</h1>
+                <h1 class="font-bold text-5xl lg:text-7xl text-blue-700">
+                  <div class="text-3xl lg:text-5xl text-blue-500">Welcome to</div>
+                  Winnipeg Bike Bingo!
+                </h1>
                 <div class="my-4 flex flex-row">
                     <a class="drop-shadow-xl m-1 rounded-lg bg-blue-700 text-gray-100 py-2 px-4" aria-disabled="true" href="/easier">Easier</a>
                     <a class="drop-shadow-xl m-1 rounded-lg bg-gray-300 text-gray-900 py-2 px-4" href="/harder">Harder</a>
@@ -58,7 +61,7 @@ <h1 class="font-bold text-5xl lg:text-7xl text-blue-700">Welcome to <br>Winnipeg
             <div></div>
         </div>
         <div class="h-full grid place-items-end overflow-hidden">
-            <img src="img/map.jpg" alt="Bike Route Map Sample" class="w-full h-auto md:h-full md:w-auto" />
+            <img src="img/map.jpg" alt="Bike Route Map Sample" class="w-full h-full object-cover" />
         </div>
     </div>
 </body>

diff --git a/dist/style.css b/dist/style.css
@@ -675,6 +675,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.ml-auto{
+  margin-left: auto;
+}
+
 .mb-1{
   margin-bottom: 0.25rem;
 }
@@ -707,10 +711,6 @@ video {
   height: 100%;
 }
 
-.h-auto{
-  height: auto;
-}
-
 .h-fit{
   height: -moz-fit-content;
   height: fit-content;
@@ -860,6 +860,11 @@ video {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.object-cover{
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-1{
   padding: 0.25rem;
 }
@@ -960,6 +965,11 @@ video {
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
+.text-blue-500{
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-gray-100{
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -1103,29 +1113,13 @@ video {
     margin-bottom: 0px;
   }
 
-  .md\:h-auto{
-    height: auto;
-  }
-
-  .md\:h-full{
-    height: 100%;
-  }
-
-  .md\:w-1\/3{
-    width: 33.333333%;
-  }
-
-  .md\:w-auto{
-    width: auto;
+  .md\:w-2\/5{
+    width: 40%;
   }
 
   .md\:flex-row{
     flex-direction: row;
   }
-
-  .md\:overflow-hidden{
-    overflow: hidden;
-  }
 }
 
 @media (min-width: 1024px){
@@ -1143,6 +1137,11 @@ video {
     line-height: 1;
   }
 
+  .lg\:text-5xl{
+    font-size: 3rem;
+    line-height: 1;
+  }
+
   .lg\:text-lg{
     font-size: 1.125rem;
     line-height: 1.75rem;

diff --git a/dist/warning.js b/dist/warning.js
@@ -1,6 +1,10 @@
-Swal.fire({
-    title: "Warning",
-    text: "I understand that cycling in Winnipeg includes areas where cyclists are not separated from traffic, that suggested routes may not reflect current conditions and that I am responsible for planning a route that suits current infrastructure and road conditions as well as my personal health and ability.",
-    confirmButtonText: "I agree",
-    icon: "info",
-});
+if (!sessionStorage.getItem('wpgbingo-warning')) {
+  Swal.fire({
+    title: 'Warning',
+    text: 'I understand that cycling in Winnipeg includes areas where cyclists are not separated from traffic, that suggested routes may not reflect current conditions and that I am responsible for planning a route that suits current infrastructure and road conditions as well as my personal health and ability.',
+    confirmButtonText: 'I agree',
+    icon: 'info',
+    heightAuto: false,
+  });
+  sessionStorage.setItem('wpgbingo-warning', true);
+}
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   "homepage": "https://github.com/JLambertazzo/wpgbingo#readme",
   "devDependencies": {
     "copyfiles": "^2.4.1",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "tailwindcss": "^3.2.4"

diff --git a/src/easier/index.html b/src/easier/index.html
@@ -45,8 +45,9 @@
 <body class="bg-gray-50">
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
     <div class="flex justify-start">
-            <button onclick="selectRandomBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
+          <button onclick="selectRandomBingo()"   class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
           <button onclick="selectHardcoreBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Hardcore Challenge</button>
+          <a href="/"                             class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1 ml-auto">Home</a>
         </div>
         <table id="bingo-container" class="my-2 rounded-md p-2 w-fit mx-auto">
             <tr>

diff --git a/src/harder/index.html b/src/harder/index.html
@@ -45,8 +45,9 @@
 <body class="bg-gray-50">
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
     <div class="flex justify-start">
-            <button onclick="selectRandomBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
+          <button onclick="selectRandomBingo()"   class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-blue-700 text-gray-100 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Generate Bingo</button>
           <button onclick="selectHardcoreBingo()" class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1">Hardcore Challenge</button>
+          <a href="/"                             class="text-base p-1 px-2 active:shadow-none hover:shadow-md shadow-lg bg-gray-100 border-red-100 border-2 text-gray-700 font-semibold lg:text-lg lg:p-2 lg:px-4 rounded-lg m-1 ml-auto">Home</a>
         </div>
         <table id="bingo-container" class="my-2 rounded-md p-2 w-fit mx-auto">
             <tr>

diff --git a/src/help/index.html b/src/help/index.html
@@ -40,10 +40,10 @@
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="/help/script.js"></script>
   </head>
-<body class="md:overflow-hidden w-screen h-screen bg-gray-100 font-sans">
+<body class="w-screen h-screen bg-gray-100 font-sans">
     <div class="text-left grid mx-12 my-8">
         <div>
-            <h1 class="font-bold text-5xl text-blue-700">Help using <br>Bike Bingo</h1>
+            <h1 class="font-bold text-5xl text-blue-700">Help using Bike Bingo</h1>
             <div class="flex flex-col text-gray-700 space-y-4 my-4 text-sm">
                 <p>Welcome to this web site, where we hope to show you that there are ways to explore Winnipeg on bicycle via trails, separated paths and speed-reduced residential streets (although there are some areas where the cycling infrastructure leaves a lot to be desired)</p>
                 <p>There are two bingo cards – an easier one that features more protected infrastructure and direct travel, and a harder one that is more on-road and has some hard-to-find spots.</p>

diff --git a/src/index.html b/src/index.html
@@ -41,14 +41,17 @@
     <script defer src="/warning.js"></script>
 </head>
 <body class="overflow-hidden w-screen h-screen bg-gray-100 font-sans">
-    <div class="flex flex-col justify-between md:flex-row h-full w-full md:h-auto">
-        <div class="text-left mx-12 flex flex-col justify-between md:w-1/3">
+    <div class="flex flex-col justify-between md:flex-row h-full w-full">
+        <div class="text-left mx-12 flex flex-col justify-between md:w-2/5">
             <div class="my-4">
                 <a class="text-blue-700 underline mr-1 hover:text-gray-900" href="/wall">Wall of Fame</a>
                 <!-- <a class="text-blue-700 underline hover:text-gray-900" href="/easier/blog">Blog</a> -->
             </div>
             <div class="md:my-0 my-12">
-                <h1 class="font-bold text-5xl lg:text-7xl text-blue-700">Welcome to <br>Winnipeg Bike Bingo!</h1>
+                <h1 class="font-bold text-5xl lg:text-7xl text-blue-700">
+                  <div class="text-3xl lg:text-5xl text-blue-500">Welcome to</div>
+                  Winnipeg Bike Bingo!
+                </h1>
                 <div class="my-4 flex flex-row">
                     <a class="drop-shadow-xl m-1 rounded-lg bg-blue-700 text-gray-100 py-2 px-4" aria-disabled="true" href="/easier">Easier</a>
                     <a class="drop-shadow-xl m-1 rounded-lg bg-gray-300 text-gray-900 py-2 px-4" href="/harder">Harder</a>
@@ -58,7 +61,7 @@ <h1 class="font-bold text-5xl lg:text-7xl text-blue-700">Welcome to <br>Winnipeg
             <div></div>
         </div>
         <div class="h-full grid place-items-end overflow-hidden">
-            <img src="img/map.jpg" alt="Bike Route Map Sample" class="w-full h-auto md:h-full md:w-auto" />
+            <img src="img/map.jpg" alt="Bike Route Map Sample" class="w-full h-full object-cover" />
         </div>
     </div>
 </body>

diff --git a/src/style.css b/src/style.css
@@ -675,6 +675,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.ml-auto{
+  margin-left: auto;
+}
+
 .mb-1{
   margin-bottom: 0.25rem;
 }
@@ -707,10 +711,6 @@ video {
   height: 100%;
 }
 
-.h-auto{
-  height: auto;
-}
-
 .h-fit{
   height: -moz-fit-content;
   height: fit-content;
@@ -860,6 +860,11 @@ video {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.object-cover{
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-1{
   padding: 0.25rem;
 }
@@ -960,6 +965,11 @@ video {
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
+.text-blue-500{
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-gray-100{
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -1103,29 +1113,13 @@ video {
     margin-bottom: 0px;
   }
 
-  .md\:h-auto{
-    height: auto;
-  }
-
-  .md\:h-full{
-    height: 100%;
-  }
-
-  .md\:w-1\/3{
-    width: 33.333333%;
-  }
-
-  .md\:w-auto{
-    width: auto;
+  .md\:w-2\/5{
+    width: 40%;
   }
 
   .md\:flex-row{
     flex-direction: row;
   }
-
-  .md\:overflow-hidden{
-    overflow: hidden;
-  }
 }
 
 @media (min-width: 1024px){
@@ -1143,6 +1137,11 @@ video {
     line-height: 1;
   }
 
+  .lg\:text-5xl{
+    font-size: 3rem;
+    line-height: 1;
+  }
+
   .lg\:text-lg{
     font-size: 1.125rem;
     line-height: 1.75rem;

diff --git a/src/warning.js b/src/warning.js
@@ -1,6 +1,10 @@
-Swal.fire({
-    title: "Warning",
-    text: "I understand that cycling in Winnipeg includes areas where cyclists are not separated from traffic, that suggested routes may not reflect current conditions and that I am responsible for planning a route that suits current infrastructure and road conditions as well as my personal health and ability.",
-    confirmButtonText: "I agree",
-    icon: "info",
-});
+if (!sessionStorage.getItem('wpgbingo-warning')) {
+  Swal.fire({
+    title: 'Warning',
+    text: 'I understand that cycling in Winnipeg includes areas where cyclists are not separated from traffic, that suggested routes may not reflect current conditions and that I am responsible for planning a route that suits current infrastructure and road conditions as well as my personal health and ability.',
+    confirmButtonText: 'I agree',
+    icon: 'info',
+    heightAuto: false,
+  });
+  sessionStorage.setItem('wpgbingo-warning', true);
+}