Reorganised CSS. Set min-height for body to 100vh.
This commit is contained in:
parent
c06eaecbfc
commit
8b39e60a01
@ -30,6 +30,8 @@
|
|||||||
|
|
||||||
::placeholder { color: var(--primary-color); }
|
::placeholder { color: var(--primary-color); }
|
||||||
|
|
||||||
|
.hidden { display: none; }
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
@ -58,8 +60,6 @@ h2 {
|
|||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
margin: 1rem 0; }
|
margin: 1rem 0; }
|
||||||
|
|
||||||
.hidden { display: none; }
|
|
||||||
|
|
||||||
html { margin-left: calc(100vw - 100%); }
|
html { margin-left: calc(100vw - 100%); }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -69,6 +69,7 @@ body {
|
|||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
|
min-height: 100vh;
|
||||||
width: 98%; }
|
width: 98%; }
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@ -93,7 +94,6 @@ header svg text:last-child { font-size: .88rem; }
|
|||||||
@-moz-document url-prefix() {
|
@-moz-document url-prefix() {
|
||||||
header svg text:first-child { font-size: 2rem; } }
|
header svg text:first-child { font-size: 2rem; } }
|
||||||
|
|
||||||
|
|
||||||
nav { margin-top: .5rem; }
|
nav { margin-top: .5rem; }
|
||||||
|
|
||||||
nav a { font-variant: small-caps; }
|
nav a { font-variant: small-caps; }
|
||||||
@ -104,6 +104,60 @@ nav h1 {
|
|||||||
|
|
||||||
section { margin-top: 1rem; }
|
section { margin-top: 1rem; }
|
||||||
|
|
||||||
|
input[name="filter"] {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid var(--primary-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
font: inherit;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
table {
|
||||||
|
overflow-y: scroll;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
tr { vertical-align: top; }
|
||||||
|
|
||||||
|
tr:hover,
|
||||||
|
tr:focus-within {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white; }
|
||||||
|
|
||||||
|
tr:hover a,
|
||||||
|
tr:focus-within a { color: white; }
|
||||||
|
|
||||||
|
th { text-align: left; }
|
||||||
|
|
||||||
|
th:nth-child(2),
|
||||||
|
th:last-child {
|
||||||
|
width: 1%;
|
||||||
|
white-space: nowrap; }
|
||||||
|
|
||||||
|
th,
|
||||||
|
td { line-break: strict; }
|
||||||
|
|
||||||
|
th:nth-child(2),
|
||||||
|
td:nth-child(2) { padding: 0 1rem; }
|
||||||
|
|
||||||
|
td a {
|
||||||
|
display: block;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
td a:hover { transition: none; }
|
||||||
|
|
||||||
|
td:nth-child(2),
|
||||||
|
td:last-child { white-space: nowrap; }
|
||||||
|
|
||||||
|
thead tr th.clickable { cursor: pointer; }
|
||||||
|
|
||||||
|
thead tr th.clickable:hover { color: var(--secondary-color); }
|
||||||
|
|
||||||
|
thead tr th.clickable:not(.sort-up):not(.sort-down)::after { content: '⇅'; }
|
||||||
|
|
||||||
|
thead tr th.clickable.sort-up::after { content: '↑'; }
|
||||||
|
|
||||||
|
thead tr th.clickable.sort-down::after { content: '↓'; }
|
||||||
|
|
||||||
#overlay {
|
#overlay {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--overlay-background-color);
|
background-color: var(--overlay-background-color);
|
||||||
@ -151,52 +205,6 @@ section { margin-top: 1rem; }
|
|||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--primary-color); }
|
color: var(--primary-color); }
|
||||||
|
|
||||||
input[name="filter"] {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid var(--primary-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
font: inherit;
|
|
||||||
width: 100%; }
|
|
||||||
|
|
||||||
table { overflow-y: scroll; width: 100%; }
|
|
||||||
|
|
||||||
tr { vertical-align: top; }
|
|
||||||
|
|
||||||
tr:hover,
|
|
||||||
tr:focus-within { background-color: var(--primary-color); color: white; }
|
|
||||||
|
|
||||||
tr:hover a,
|
|
||||||
tr:focus-within a { color: white; }
|
|
||||||
|
|
||||||
th { text-align: left; }
|
|
||||||
|
|
||||||
th:nth-child(2),
|
|
||||||
th:last-child { width: 1%; white-space: nowrap; }
|
|
||||||
|
|
||||||
th,
|
|
||||||
td { line-break: strict; }
|
|
||||||
|
|
||||||
th:nth-child(2),
|
|
||||||
td:nth-child(2) { padding: 0 1rem; }
|
|
||||||
|
|
||||||
td a { display: block; width: 100%; }
|
|
||||||
|
|
||||||
td a:hover { transition: none; }
|
|
||||||
|
|
||||||
td:nth-child(2),
|
|
||||||
td:last-child { white-space: nowrap; }
|
|
||||||
|
|
||||||
thead tr th.clickable { cursor: pointer; }
|
|
||||||
|
|
||||||
thead tr th.clickable:hover { color: var(--secondary-color); }
|
|
||||||
|
|
||||||
thead tr th.clickable:not(.sort-up):not(.sort-down)::after { content: '⇅'; }
|
|
||||||
|
|
||||||
thead tr th.clickable.sort-up::after { content: '↑'; }
|
|
||||||
|
|
||||||
thead tr th.clickable.sort-down::after { content: '↓'; }
|
|
||||||
|
|
||||||
#error {
|
#error {
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
line-height: 5rem;
|
line-height: 5rem;
|
||||||
|
Loading…
Reference in New Issue
Block a user