aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFelix Hanley <felix@userspace.com.au>2020-03-09 11:55:01 +0000
committerFelix Hanley <felix@userspace.com.au>2020-03-09 11:55:01 +0000
commitcf612c764090581f840baef20f1d3a42ae48ebcd (patch)
treec4e407f04403b8643c616e3a18649d4bedc8f1d9
parentd333ad876ea06ae01ecf646424f9b0f02ad84419 (diff)
downloadsws-cf612c764090581f840baef20f1d3a42ae48ebcd.tar.gz
sws-cf612c764090581f840baef20f1d3a42ae48ebcd.tar.bz2
Add styles
-rw-r--r--static/default.css96
1 files changed, 90 insertions, 6 deletions
diff --git a/static/default.css b/static/default.css
index 78898dd..8fd486a 100644
--- a/static/default.css
+++ b/static/default.css
@@ -6,9 +6,10 @@ html {
}
body {
background-color: #fffaf7;
+ color: #37879c;
display: flex;
flex-direction: column;
- font-family: Liberation Sans, Arial, sans-serif;
+ font-family: sans-serif;
line-height: 1.5;
min-height: 100vh;
margin: 0;
@@ -19,20 +20,38 @@ ul {
}
.page {
display: flex;
- display: flex;
flex-direction: column;
outline: 1px solid red;
}
.sidebar {
+ background-color: #2A3F54;
flex: 0 0 13em;
order: -1;
- outline: 1px solid red;
+ outline: 1px solid green;
+}
+
+.navbar {
+ background: #ededed;
+ border-bottom: 1px solid #d9dee4;
+ height: 2.5em;
+}
+
+.sitenav {
+}
+.sitenav__link {
+ color: #e7e7e7;
+ display: block;
+ font-weight: 500;
+ text-decoration: none;
+ padding: 13px 15px 12px;
}
main {
background-color: #f7f7f7;
flex: 1;
outline: 1px solid red;
padding-left: 1em;
+ padding-right: 1em;
+ position: relative;
}
@media (min-width: 768px) {
@@ -49,8 +68,66 @@ main {
}
}
-header.site {
- height: 50px;
+.site__header {
+ margin-bottom: 1em;
+}
+.site__title {
+ margin-bottom: 0;
+}
+
+.site__summary {
+ display: inline-block;
+}
+.summary {
+ float: left;
+ overflow: hidden;
+ padding-bottom: 0px;
+ padding: 0 10px 0 20px;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.summary__title {
+ font-size: 13px;
+}
+.summary__count {
+ display: block;
+ font-size: 40px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+.summary__comparison {
+ font-size: 13px;
+}
+.summary:before {
+ border-left: 2px solid #adb2b5;
+ content: "";
+ height: 65px;
+ left: 0;
+ margin-top: 10px;
+ position: absolute;
+}
+.summary:first-child::before {
+ border-left: 0;
+}
+
+.panel {
+ background-color: #fff;
+ border: 1px solid #e6e9ed;
+ margin-bottom: .5em;
+ margin-top: .5em;
+ padding: .5em;
+}
+.panel__header {
+ border-bottom: 2px solid #e6e9ed;
+ font-size: 1.75em;
+ margin-bottom: 10px;
+}
+.panel__title {
+ font-size: 18px;
+ font-weight: 400;
+ margin: 0;
+ padding: .25em;
}
.flash {
@@ -67,8 +144,15 @@ header.site {
transition: opacity 3s ease-in-out;
}
+.timerange {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
.chart {
align-items: stretch;
+ /*box-shadow: inset 0 1px 2px rgba(0,0,0,.1);*/
display: flex;
margin: 0;
width: 100%;
@@ -109,7 +193,7 @@ header.site {
background: #f5f5f5;
}
.chart .bar {
- background: #4c92ff;
+ background-color: #1abb9c;
bottom: 0;
left: 0;
margin: 0;