Improved the UI, added sample prompter file

alxrm · Nov 6, 2017 · 7e35675 · 7e35675
1 parent c7504e9
commit 7e35675
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 60 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -11,17 +11,25 @@
   body {
     background: white;
     color: rgba(0, 0, 0, .8);
+    padding: 0;
+    margin: 0;
+  }
+
+  #controls {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: white;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   }
 
   #left, #right {
-    position: absolute;
     display: table;
-    font-size: 4rem;
-    top: 0;
+    font-size: 72px;
     width: 50%;
     overflow: hidden;
     cursor: pointer;
-    transition: color 0.1s, background 0.1s ease-in-out;
+    transition: color 0.08s, background 0.08s ease-in-out;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -30,30 +38,28 @@
   }
 
   #left {
-    left: 0;
+    float: left;
   }
 
   #right {
-    left: 50%;
+    float: right;
   }
 
   #right:active,
   #left:active {
-    background: rgba(0, 0, 0, .8);
+    background: #333;
     color: white;
   }
 
   #prompter {
-    position: absolute;
-    top: 6em;
-    bottom: 0;
     overflow-y: scroll;
     font-family: CustomSerif, Georgia, Cambria, 'Times New Roman', serif;
     font-weight: 400;
     font-style: normal;
     font-size: 18px;
     line-height: 1.58;
     box-sizing: border-box;
+    padding: 80px 12px 0;
   }
 
   .switch {
@@ -63,25 +69,15 @@
   }
 
   @media screen and (min-width: 768px) {
-    body {
-      padding: 16px;
-    }
-
     #prompter {
-      left: 50%;
-      margin-left: -360px;
-      max-width: 720px;
+      max-width: 736px;
+      margin: 0 auto;
     }
   }
 
   @media screen and (max-width: 768px) {
-    body {
-      padding: 0;
-    }
-
     #prompter {
-      width: calc(100% - 12px);
-      padding: 0 6px;
+      width: calc(100% - 24px);
       margin: 0;
     }
   }
@@ -90,14 +86,16 @@
 
 <body>
 <div id="container">
-  <div id="left">
-    <div class="switch">
-      <
+  <div id="controls">
+    <div id="left">
+      <div class="switch">
+        <
+      </div>
     </div>
-  </div>
-  <div id="right">
-    <div class="switch">
-      >
+    <div id="right">
+      <div class="switch">
+        >
+      </div>
     </div>
   </div>
   <div id="prompter">

diff --git a/index_html.go b/index_html.go
@@ -14,17 +14,25 @@ const (
   body {
     background: white;
     color: rgba(0, 0, 0, .8);
+    padding: 0;
+    margin: 0;
+  }
+
+  #controls {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: white;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   }
 
   #left, #right {
-    position: absolute;
     display: table;
-    font-size: 4rem;
-    top: 0;
+    font-size: 72px;
     width: 50%;
     overflow: hidden;
     cursor: pointer;
-    transition: color 0.1s, background 0.1s ease-in-out;
+    transition: color 0.08s, background 0.08s ease-in-out;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -33,30 +41,28 @@ const (
   }
 
   #left {
-    left: 0;
+    float: left;
   }
 
   #right {
-    left: 50%;
+    float: right;
   }
 
   #right:active,
   #left:active {
-    background: rgba(0, 0, 0, .8);
+    background: #333;
     color: white;
   }
 
   #prompter {
-    position: absolute;
-    top: 6em;
-    bottom: 0;
     overflow-y: scroll;
     font-family: CustomSerif, Georgia, Cambria, 'Times New Roman', serif;
     font-weight: 400;
     font-style: normal;
     font-size: 18px;
     line-height: 1.58;
     box-sizing: border-box;
+    padding: 80px 12px 0;
   }
 
   .switch {
@@ -66,25 +72,15 @@ const (
   }
 
   @media screen and (min-width: 768px) {
-    body {
-      padding: 16px;
-    }
-
     #prompter {
-      left: 50%;
-      margin-left: -360px;
-      max-width: 720px;
+      max-width: 736px;
+      margin: 0 auto;
     }
   }
 
   @media screen and (max-width: 768px) {
-    body {
-      padding: 0;
-    }
-
     #prompter {
-      width: calc(100% - 12px);
-      padding: 0 6px;
+      width: calc(100% - 24px);
       margin: 0;
     }
   }
@@ -93,14 +89,16 @@ const (
 
 <body>
 <div id="container">
-  <div id="left">
-    <div class="switch">
-      <
+  <div id="controls">
+    <div id="left">
+      <div class="switch">
+        <
+      </div>
     </div>
-  </div>
-  <div id="right">
-    <div class="switch">
-      >
+    <div id="right">
+      <div class="switch">
+        >
+      </div>
     </div>
   </div>
   <div id="prompter">

diff --git a/prompter.md b/prompter.md
@@ -0,0 +1,19 @@
+# Sample prompter
+
+Some lorem ipsum before we get started
+
+## Hey here's some title
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Wow! Enumeration thing?
+
+* lorem ipsum dolor sit amet
+* consectetur adipiscing elit
+* sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Last, but not the least
+
+Did you know that _Lorem ipsum dolor sit amet_ and _consectetur adipiscing elit_ are __sed do eiusmod tempor incididunt ut labore et dolore magna aliqua__, crazy, right?