diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css index fe32f77..b04c251 100644 --- a/prototype/src/main/resources/static/css/ecom.css +++ b/prototype/src/main/resources/static/css/ecom.css @@ -96,6 +96,10 @@ html, body { color: var(--c-black) } +main { + min-height: 100%; +} + h1, h2, h3, h4, h5 { font-family: "Fira Mono"; @@ -104,6 +108,11 @@ h1, h2, h3, h4, h5 { text-transform: uppercase; } +p { + padding-top: 1em; + padding-bottom: 1em; +} + h1 { font-size: var(--u2); } @@ -125,16 +134,59 @@ li { list-style-type: none; } +table { + width: 100%; + border-collapse: collapse; +} + +table td, +table th { + padding: var(--u0); + text-align: center; +} + +table th { + background-color: var(--c-primary); + color: var(--c-base); +} + +table tr:nth-child(2n+1) { + background-color: var(--c-base-highlight); +} + /* * NAV */ +nav { + +} + nav h1 { font-size: var(--u0); margin: 0rem; } +nav li { + display: flex; + flex-direction: column; +} +nav li li { + margin-left: var(--u0); +} + +nav li a { + padding: var(--u0); + transition: all 0.1s ease-out; +} + +nav li a:hover, +nav li a.selected { + padding: var(--u0); + background-color: var(--c-primary); + color: var(--c-base); +} /* * FOOTER */ @@ -172,8 +224,9 @@ input[type="password"]::placeholder { opacity: 50%; } -button, .botton { +button, .button { font-family: "Fira Mono"; + font-weight: bold; background-color: var(--c-primary); color: var(--c-base); @@ -195,7 +248,7 @@ button, .botton { /* box-shadow: var(--s-0-secondary); */ } -button:active, .botton:active { +button:active, .button:active { background-color: var(--c-primary-highlight); } @@ -209,6 +262,7 @@ button, label { display: block; min-width: 10em; + font-weight: bold; } /* @@ -238,18 +292,29 @@ label { padding-right: var(--u0); } -.flex { +.bar-flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } -.flex > * { +.bar-flex > * { margin: var(--u0); } -.flex > .spacer { +.bar-flex > .spacer { + flex: 1; +} + +.sidebar-layout { + display: flex; + align-items: stretch; + justify-content: center; + flex-wrap: wrap; +} + +.sidebar-layout > *:nth-child(2) { flex: 1; } @@ -259,6 +324,15 @@ label { flex-wrap: wrap; } +.grid.vertical-center { + align-items: center; + height: 100%; +} + +.grid.center { + justify-content: space-around; +} + .grid > * { flex: 1; margin: var(--u0); @@ -294,7 +368,6 @@ label { /* box-shadow: var(--s-0-secondary); */ } - .grid.s > .spacer { box-shadow: none; @@ -308,7 +381,6 @@ label { } .grid.s > * { - width: 10rem; max-width: 10rem; min-width: 7.5rem; } @@ -384,7 +456,7 @@ label { box-shadow: none; } -.input-icon > form > button { +.input-icon > button { margin: 0px; border-top-left-radius: 0px; @@ -393,8 +465,6 @@ label { } - - /* * CONTENT */ @@ -404,28 +474,3 @@ label { font-size: var(--u1); text-align: right; } - - -/* - * Prototype stuff - */ -.dialog { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - padding-top: 60px; -} - -.dialog-content { - background-color: var(--c-black); - margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ - border: 1px solid #888; - width: 50%; /* Could be more or less, depending on screen size */ - -} - diff --git a/prototype/src/main/resources/templates/fragments/footer.html b/prototype/src/main/resources/templates/fragments/footer.html index 4756a29..93afe3c 100644 --- a/prototype/src/main/resources/templates/fragments/footer.html +++ b/prototype/src/main/resources/templates/fragments/footer.html @@ -6,7 +6,7 @@