Added a second tutorial screen for the platforms

README.md

@@ -9,10 +9,6 @@ Web pages for [dreymar.colemak.org](https://dreymar.colemak.org)
 
 TODO/WIP for the BigBag Forum & web content (mostly for DreymaR's use):
 -----------------------------------------------------------------------
-- Some still find platform selection non-intuitive. Hmmm...
-	- Could we link to a specific platform box with platform specified? As in `page.html#anchor?platform=win`.
-	- Make it so that clicking the text `PLATFORMS` shows the how-to screen again (only seen initially now).
-
 - Platform box for Sequencing? And Modifiers?
 	- Colemak-eD too?
 	- Tarmak `DOWNLOADS` definitely should be boxed. But the Mac one doesn't show up?!
@@ -40,7 +36,8 @@ TODO/WIP for the BigBag Forum & web content (mostly for DreymaR's use):
 
 
 DONE
-----
+- Functionality allowing links to a specific platform box with platform specified? As in `page.html#anchor?platform=win`.
+- Make it so that clicking the text `PLATFORMS` shows the how-to screen again (only seen initially now).
 - More likeable links:
 	- Pascal Getreuer's alt layouts guide:  https://getreuer.info/posts/keyboards/alt-layouts/index.html
 - More consistent page and anchor naming

docs/content/styles/main.css

@@ -74,7 +74,7 @@ table td p.legend {
   overflow-y: auto;
 }
 
-#tutorialScreen {
+.tutorial-screen {
   width: 100%;
   height: 100%;
   position: fixed;
@@ -87,7 +87,7 @@ table td p.legend {
   transition: opacity 500ms ease-in-out;
 }
 
-#tutorialScreen.show {
+.tutorial-screen.show {
   opacity: 1;
 }
 
@@ -99,6 +99,16 @@ table td p.legend {
   height: 64px;
 }
 
+#tutorialScreen2 #tutorialArrow {
+  top: 110px;
+  left: 130px;
+}
+
+#tutorialScreen2 #tutorialText {
+  top: 184px;
+  left: 120px;
+}
+
 #tutorialPlatform {
   position: absolute;
   left: 20px;
@@ -139,29 +149,15 @@ table td p.legend {
   cursor: pointer;
 }
 
-#tutorialCloseButton {
-  position: absolute;
-  top: 8px;
-  left: 6px;
-  width: 22px;
-  height: 22px;
-  font-size: 23;
-  background-image: url("..img/close.png");
-  background-size: contain;
-}
-
 .platform-box {
-  display: none;
-}
-
-.platform-box.win, .platform-box.linux, .platform-box.tmk, .platform-box.mac, .platform-box-empty {
   display: block;
   position: relative;
   margin-top: 16px;
   padding: 2px 10px 10px 10px;
   border: 3px solid #AA77BB;
 }
 
+div[class="platform-box"],
 .platform-box.platform-box-empty {
   border: none;
   border-top: 3px solid #AA77BB;
@@ -238,6 +234,13 @@ table td p.legend {
   background-position-y: 50%;
 }
 
+#tutorialScreen2 #tutorialPlatform {
+  background-image: url("../img/platforms-picker-small.png");
+  width: 118px;
+  height: 175px;
+  left: 0;
+}
+
 #platforms {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1004,6 +1007,25 @@ kbd {
 }
 
 @media only screen and (min-width: 1100px) {
+  #tutorialPlatform {
+    background-image: url("../img/platforms-large.png");
+    width: 181px;
+    height: 60px;
+  }
+
+  #tutorialScreen2 #tutorialPlatform {
+    background-image: url("../img/platforms-picker.png");
+    width: 181px;
+  }
+
+  #tutorialClose {
+      left: 0;
+      border-top-right-radius: 20px;
+      border-bottom-right-radius: 20px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+
   #navbar {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;