From 9ad492dfbe36b1f096b97fabe626b6da5d34e104 Mon Sep 17 00:00:00 2001 From: steveoh Date: Wed, 30 Aug 2017 19:02:11 -0600 Subject: [PATCH] =?UTF-8?q?No=20more=20floats.=20Flex=20out!=20?= =?UTF-8?q?=F0=9F=92=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/layouts/partials/header.html | 4 +- site/layouts/partials/incident.html | 23 ++++++----- src/css/main.css | 62 +++++++++++++++++------------ 3 files changed, 52 insertions(+), 37 deletions(-) diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html index 669ca6b..b0c7742 100644 --- a/site/layouts/partials/header.html +++ b/site/layouts/partials/header.html @@ -24,8 +24,10 @@
- {{ $title }} +
+ {{ $title }} +
{{ with $resources }} Resources diff --git a/site/layouts/partials/incident.html b/site/layouts/partials/incident.html index dac35e4..2113d0d 100644 --- a/site/layouts/partials/incident.html +++ b/site/layouts/partials/incident.html @@ -1,18 +1,21 @@ {{- $severity := .Params.severity | default "under-maintenance" -}} {{- $alert := index .Site.Data.severity.alerts $severity -}}
-
-

{{ .Title }}

-
-

Affected Systems: {{ delimit .Params.affectedsystems ", " }} -

-

{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}

-
+
+

{{ .Title }}

+

{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}

{{- .Content -}}
-

- {{- index .Site.Data.severity.descriptions $severity -}} -

+
+

+ {{- index .Site.Data.severity.descriptions $severity -}} +

+

Affected Systems: + + {{- delimit .Params.affectedsystems ", " -}} + +

+
diff --git a/src/css/main.css b/src/css/main.css index ef28a0d..43701ad 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -28,6 +28,9 @@ a:active { margin-bottom: 40px; padding: 16px 0 24px 0; border-bottom: 2px solid #F7F7F8; + display: flex; + flex-direction: row; + justify-content: space-between; } .logo { @@ -52,18 +55,14 @@ a:active { text-decoration: none; } -.right-links { - float: right; -} - @media (max-width: 450px) { .right-links { - float: left; margin-top: 24px; } .header { padding-bottom: 68px; + flex-direction: column; } } @@ -109,8 +108,8 @@ a:active { padding: 16px; border-radius: 10px; background: #fff; - box-shadow: 0px 4px 8px 0px rgba(0,0,0,.05); - border: 1px solid #fbfbfb; + box-shadow: 0px 4px 8px 0px rgba(0,0,0,.1); + border: 1px solid #eaeaea; font-size: 16px; font-weight: 500; @@ -138,33 +137,27 @@ a:active { height: 16px; } +.incident h1 { + font-size: 1.5em; + margin-top: 0; +} + .incident { color: #202020; } .incident-title { - float: left; text-transform: capitalize; + width: 75%; } -.pull-right { - float: right; -} - -.incident-date { - font-size: 14px; - opacity: 0.3; -} - -.affected-systems { - font-size: 14px; - opacity: 0.7; -} - -@media (max-width: 450px) { +@media (max-width: 725px) { .incident-date { width: 100%; } + .incident-title { + width: 100%; + } } .incident-description { @@ -172,10 +165,25 @@ a:active { font-weight: 400; } +.separate { + text-align: right; + padding-bottom: 1em; + border-bottom: 2px solid #F7F7F8; +} + .incident-status { + display: flex; + flex-direction: row; + justify-content: space-between; margin: 24px 0 0 0; } +.flex-out { + display: flex; + flex-direciton: row; + justify-content: space-between; +} + .system-check-ok { margin: 80px auto 104px auto; width: 100%; @@ -198,7 +206,6 @@ a:active { font-size: 16px; font-weight: 500; border-bottom: 2px solid #F7F7F8; - color: #bbb; } .see-more { @@ -229,6 +236,11 @@ a:active { .mute { opacity: 0.7; } + +.small { + font-size: 14px; +} + .incident-summary { margin-bottom: 24px; overflow: hidden; @@ -236,13 +248,11 @@ a:active { .article-title { width: 70%; - float: left; text-transform: capitalize; } .article-date { width: 29%; - float: right; text-align: right; font-size: 14px; }