diff --git a/base.css b/base.css index 74b33dc..38b71d2 100644 --- a/base.css +++ b/base.css @@ -50,7 +50,19 @@ main{ overflow: hidden; max-height: 0; } -.nav-menu, .sort-menu, .duration-hold{ +.so-pane{ + display: none; + overflow: hidden; + position: fixed; + max-height: 0; +} +.so-pane > *{ + font-size: 24px; + text-align: center; + width: 90px; + padding: 0 1px; +} +.nav-menu, .sort-menu, .data-hold{ display: none; } .menu a{ @@ -97,6 +109,20 @@ main{ transform: rotate(45deg); top:0; } +.sort-menu:checked ~ .so-pane{ + display: block; + box-sizing: content-box; + position: fixed; + top: 85px; + max-height: 48px; + width: 360px; + height: 32px; + padding: 4px; + text-align: center; + vertical-align: middle; + border-style: solid; + border-width: 1px; +} .main-box{ display: -webkit-box; display: -moz-box; @@ -175,7 +201,7 @@ main{ border-width: 1px; margin: 2px; } -@media (min-width: 540px){ +@media (min-width: 560px){ .main-box > div, footer > p{ margin: 5px; } diff --git a/dark.css b/dark.css index a0f44e5..7675139 100644 --- a/dark.css +++ b/dark.css @@ -1,4 +1,4 @@ -body{ +body, .so-pane > *{ color: #f9f9f9; background-color: #050506; border-color: #696969; @@ -6,7 +6,7 @@ body{ a{ color: #b0b0f0; } -.header, .nav, footer{ +.header, .nav, footer, .so-pane{ background-color: #1d1d1e; } .home-button > div, .sort-button > div, .menu a{ @@ -24,6 +24,9 @@ a{ .item-table{ background-color: #3f3f3f; } +.so-pane{ + border-color: #3f3f3f; +} .item-table > div > div, .item-table-caption{ border-color: #f5deb3; } diff --git a/index.go.html b/index.go.html index 021dce6..2730ff1 100644 --- a/index.go.html +++ b/index.go.html @@ -16,24 +16,70 @@