diff --git a/lib/terminal.css b/lib/terminal.css index 8a50e3d..e3fab9d 100644 --- a/lib/terminal.css +++ b/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,"); + 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-right: 2em; + margin: 0 2em 0 0; } .terminal-menu li:last-child { diff --git a/templates/partials/forms.html b/templates/partials/forms.html index 5fd889d..a32b0a0 100644 --- a/templates/partials/forms.html +++ b/templates/partials/forms.html @@ -35,8 +35,16 @@
- - + + +
+
+ + +
+
+ +
diff --git a/templates/partials/tables.html b/templates/partials/tables.html index 732f842..363bd80 100644 --- a/templates/partials/tables.html +++ b/templates/partials/tables.html @@ -1,74 +1,54 @@
-
-

Tables

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Most Downloaded Movies on BitTorrent, 2011 -
RankMovieDownloads
torrentfreak.com
1Fast Five9,260,000
2The Hangover II8,840,000
3Thor8,330,000
4Source Code7,910,000
5I Am Number Four7,670,000
6Sucker Punch7,200,000
7127 Hours6,910,000
8Rango6,480,000
9The King’s Speech6,250,000
10Harry Potter and the Deathly Hallows Part 26,030,000
+
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Traditional colors of Japan +
Source: Wikipedia
Japanese nameRomanizedEnglish translationRGBHex triplet
一斤染IkkonzomeOne kin (0.6 kg (1.3 lb)) dye240,143,144#F08F90
紅梅色Kōbai-iroRed plum colored219,90,107#DB5A6B
桜色Sakura-iroCherry blossom color252,201,185#FCC9B9
薄紅UsubeniPale crimson (dye)242,102,108#F2666C
\ No newline at end of file