diff --git a/common/main.css b/common/main.css index e545544..1bbac42 100644 --- a/common/main.css +++ b/common/main.css @@ -9,7 +9,7 @@ --dark-background-color: #121212; --dark-text-color: #eeeeee; } - +html{ height: 100% } body{ --accent-color:#303f9f; @@ -27,6 +27,14 @@ body{ color: var(--text-color); font-size: 1.1rem; margin: 0; + height: 100%; + display: grid; + grid-template-areas: + 'header' + 'menu' + 'main' + 'footer'; + grid-template-rows: auto auto 1fr auto; } body.theme-dark { --background-color: var(--dark-background-color); @@ -40,6 +48,7 @@ body.theme-dark { --button-color: var(--button-color-dark); } header { + grid-area: header; display: flex; justify-content: space-between; align-items: center; @@ -64,7 +73,24 @@ header div{ margin-left: auto; align-items: center; } +footer { + grid-area: footer; + border-radius: 0.4rem; + outline-style: solid; + outline-width: thin; + outline-color: var(--table-border); + margin: auto; +} + +footer p{ + margin: 0.5rem; + line-height: 1.5; + +} +.tab-container{ + grid-area: main; +} table { border-collapse: collapse; line-height: 1.1rem; @@ -135,7 +161,7 @@ h4 { gap: 1rem; /* Your container needs a fixed height, and it * needs to be taller than your tallest column. */ - height: 400rem; + height: 200rem; } .all-result::before, .all-result::after { @@ -215,6 +241,10 @@ h4 { .theme-select { margin-left: unset; } + .splits-table{ + margin-left: 0; + margin-right: 0; + } } .hiddendiv { display:none; @@ -238,6 +268,7 @@ h4 { } .splits-table{ display: none; + max-width: 100vw; } .splits-table td:first-child{ position: sticky; @@ -255,7 +286,23 @@ h4 { min-width: 600px; margin: auto; } +a{ + color: var(--text-accent-color); + border-bottom: 1px solid var(--text-accent-color); + border-bottom-style: inset; + text-decoration: none; + padding: 0 1px 0; + margin: 0 -1px 0; +} +a:hover{ + border-bottom-width: 3px; + margin-bottom: -2px; +} +select{ + cursor: pointer; +} .fancy-button { + cursor: pointer; background-color: transparent; color: var(--text-accent-color); text-align: center; @@ -294,6 +341,7 @@ h4 { box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15); } .tab-list{ + grid-area: menu; list-style: none; display: flex; flex-wrap: wrap; @@ -306,12 +354,13 @@ h4 { margin: 0.2rem; } .tab-button{ + all: revert; display: block; padding: 0.5rem 1rem; border-radius: .25rem; text-decoration: none; font-weight: 600; - transition: 0.3s; + transition: 0.15s; color: var(--text-accent-color); } .tab-button.active{ @@ -325,7 +374,7 @@ h4 { box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; } .tab-button:hover { - box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; + box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); } .tab-content{ display: none; @@ -352,6 +401,7 @@ h4 { flex: 1; width: fit-content; justify-items: left; + max-width: 50vw; } .status-div{ margin-left: auto; @@ -360,6 +410,9 @@ h4 { align-self: flex-start; width: 100%; } + footer{ + width: 100%; + } .tab-list{ padding: 0; justify-content: space-around; diff --git a/index.php b/index.php index ec65050..61ebf88 100755 --- a/index.php +++ b/index.php @@ -35,7 +35,7 @@
@@ -50,10 +50,8 @@ - - - - + +