fix smaller things

lib/terminal.css

@@ -108,8 +108,6 @@ ul,
 h1,
 .logo {
   position: relative;
-  display: inline-block;
-  display: table-cell;
   padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
   margin: 0;
   overflow: hidden;
@@ -142,7 +140,6 @@ h6 {
 blockquote {
   position: relative;
   padding-left: calc(var(--global-space) * 2);
-  padding-left: 2ch;
   overflow: hidden;
 }
 
@@ -499,8 +496,10 @@ table th {
   font-size: 1em;
 }
 
-table thead th {
+table thead tr th {
   font-size: 1em;
+  vertical-align: middle;
+  font-weight: 700;
 }
 
 table tfoot tr th {
@@ -512,11 +511,6 @@ table caption {
   margin: 0 0 1em;
 }
 
-table tbody td:first-child {
-  font-weight: 700;
-  color: var(--secondary-color);
-}
-
 .form {
   width: 100%;
 }
@@ -535,12 +529,20 @@ input[type="email"],
 input[type="text"],
 input[type="number"],
 input[type="password"],
-input[type="search"] {
+input[type="search"],
+input[type="date"],
+input[type="time"] {
   border: 1px var(--input-style) var(--font-color);
   width: 100%;
   padding: 0.7em 0.5em;
   font-size: 1em;
   font-family: var(--font-stack);
+
+  /* stylelint-disable */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  /* stylelint-enable */
+
   appearance: none;
   border-radius: 0;
 }
@@ -550,12 +552,22 @@ input[type="text"]:active,
 input[type="number"]:active,
 input[type="password"]:active,
 input[type="search"]:active,
+input[type="date"]:active,
+input[type="time"]:active,
 input[type="email"]:focus,
 input[type="text"]:focus,
 input[type="number"]:focus,
 input[type="password"]:focus,
-input[type="search"]:focus {
+input[type="search"]:focus,
+input[type="date"]:focus,
+input[type="time"]:focus {
   outline: none;
+
+  /* stylelint-disable */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  /* stylelint-enable */
+
   appearance: none;
   border: 1px solid var(--font-color);
 }
@@ -564,7 +576,9 @@ input[type="text"]:not(:placeholder-shown):invalid,
 input[type="email"]:not(:placeholder-shown):invalid,
 input[type="password"]:not(:placeholder-shown):invalid,
 input[type="search"]:not(:placeholder-shown):invalid,
-input[type="number"]:not(:placeholder-shown):invalid {
+input[type="number"]:not(:placeholder-shown):invalid,
+input[type="date"]:not(:placeholder-shown):invalid,
+input[type="time"]:not(:placeholder-shown):invalid {
   border-color: var(--error-color);
 }
 
@@ -594,6 +608,12 @@ textarea {
 
 textarea:focus {
   outline: none;
+
+  /* stylelint-disable */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  /* stylelint-enable */
+
   appearance: none;
   border: 1px solid var(--font-color);
 }
@@ -602,6 +622,26 @@ textarea:not(:placeholder-shown):invalid {
   border-color: var(--error-color);
 }
 
+select {
+  border: 1px var(--input-style) var(--font-color);
+  width: 100%;
+  padding: .7em .5em;
+  font-size: 1em;
+  font-family: var(--font-stack);
+  color: var(--font-color);
+  border-radius: 0;
+
+  /* stylelint-disable */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  /* stylelint-enable */
+
+  background-color: var(--background-color);
+  background-image: url("data:image/svg+xml;utf8,<svg fill='currentColor' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right .5em bottom .5em;
+}
+
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus textarea:-webkit-autofill,
@@ -813,7 +853,10 @@ select:-webkit-autofill:focus {
   border-color: var(--primary-color);
 }
 
-@media screen and (width <= 960px) {
+/* stylelint-disable */
+@media screen and (min-width: 960px) {
+/* stylelint-enable */
+
   label {
     display: block;
     width: 100%;
@@ -824,13 +867,17 @@ select:-webkit-autofill:focus {
   }
 }
 
-@media screen and (width <= 480px) {
+/* stylelint-disable */
+@media screen and (min-width: 480px) {
+/* stylelint-enable */
   form {
     width: 100%;
   }
 }
 
-@media only screen and (width >= 30em) {
+/* stylelint-disable */
+@media screen and (min-width: 30rem) {
+/* stylelint-enable */
   .terminal-nav {
     flex-direction: row;
     align-items: center;
@@ -844,8 +891,7 @@ select:-webkit-autofill:focus {
   }
 
   .terminal-menu li {
-    margin: 0;
+    margin: 0 2em 0 0;
-    margin-right: 2em;
   }
 
   .terminal-menu li:last-child {

templates/partials/forms.html

@@ -35,8 +35,16 @@
         </select>
       </div>
       <div class="form-group">
-        <label for="tarea">Textarea:</label>
+        <label for="event-date">Event date:</label>
-        <textarea id="tarea" cols="30" rows="5" name=="tarea">Textarea text</textarea>
+        <input type="date" id="event-date" name="event-date">
+      </div>
+      <div class="form-group">
+        <label for="event-time">Event time:</label>
+        <input type="time" id="event-time" name="event-time">
+      </div>
+      <div class="form-group">
+        <label for="textarea">Textarea:</label>
+        <textarea id="textarea" cols="30" rows="5" name=="textarea">Textarea text</textarea>
       </div>
       <div class="form-group">
         <label for="submit">Input Button:</label>

templates/partials/tables.html

@@ -4,70 +4,50 @@
     </header>
     <table>
         <caption>
-                Most Downloaded Movies on BitTorrent, 2011
+            Traditional colors of Japan
         </caption>
-              <thead>
-                <tr>
-                  <th>Rank</th>
-                  <th>Movie</th>
-                  <th>Downloads</th>
-                </tr>
-              </thead>
         <tfoot>
         <tr>
-                  <th colspan="4">torrentfreak.com</th>
+            <th colspan="5"><a href="https://en.wikipedia.org/wiki/Traditional_colors_of_Japan" target="_blank">Source: Wikipedia</a></th>
         </tr>
         </tfoot>
         <tbody>
+        <thead>
             <tr>
-                  <th>1</th>
+                <th>Japanese name</th>
-                  <td>Fast Five</td>
+                <th>Romanized</th>
-                  <td>9,260,000</td>
+                <th>English translation</th>
+                <th>RGB</th>
+                <th>Hex triplet</th>
+            </tr>
+        </thead>
+        <tr>
+            <td>一斤染</td>
+            <td>Ikkonzome</td>
+            <td>One kin (0.6&nbsp;kg (1.3&nbsp;lb)) dye</td>
+            <td>240,143,144</td>
+            <td>#F08F90</td>
         </tr>
         <tr>
-                  <th>2</th>
+            <td>紅梅色</td>
-                  <td>The Hangover II</td>
+            <td>Kōbai-iro</td>
-                  <td>8,840,000</td>
+            <td>Red plum colored</td>
+            <td>219,90,107</td>
+            <td>#DB5A6B</td>
         </tr>
         <tr>
-                  <th>3</th>
+            <td>桜色</td>
-                  <td>Thor</td>
+            <td>Sakura-iro</td>
-                  <td>8,330,000</td>
+            <td>Cherry blossom color</td>
+            <td>252,201,185</td>
+            <td>#FCC9B9</td>
         </tr>
         <tr>
-                  <th>4</th>
+            <td>薄紅</td>
-                  <td>Source Code</td>
+            <td>Usubeni</td>
-                  <td>7,910,000</td>
+            <td>Pale crimson (dye)</td>
-                </tr>
+            <td>242,102,108</td>
-                <tr>
+            <td>#F2666C</td>
-                  <th>5</th>
-                  <td>I Am Number Four</td>
-                  <td>7,670,000</td>
-                </tr>
-                <tr>
-                  <th>6</th>
-                  <td>Sucker Punch</td>
-                  <td>7,200,000</td>
-                </tr>
-                <tr>
-                  <th>7</th>
-                  <td>127 Hours</td>
-                  <td>6,910,000</td>
-                </tr>
-                <tr>
-                  <th>8</th>
-                  <td>Rango</td>
-                  <td>6,480,000</td>
-                </tr>
-                <tr>
-                  <th>9</th>
-                  <td>The King’s Speech</td>
-                  <td>6,250,000</td>
-                </tr>
-                <tr>
-                  <th>10</th>
-                  <td>Harry Potter and the Deathly Hallows Part 2</td>
-                  <td>6,030,000</td>
         </tr>
         </tbody>
     </table>