Skip to content

Commit 9ad492d

Browse files
steveohsteveoh
committed
No more floats. Flex out! 💪
1 parent 59c9ec9 commit 9ad492d

File tree

3 files changed

+52
-37
lines changed

3 files changed

+52
-37
lines changed

‎site/layouts/partials/header.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@
2424
<body>
2525
<div class="gangsta-wrap">
2626
<div class="header">
27-
<span class="title"><a href="/">{{ $title }}</a></span>
27+
<div>
2828
<img src="{{ $logo }}" alt="logo" class="logo"/>
29+
<span class="title"><a href="/">{{ $title }}</a></span>
30+
</div>
2931
<div class="right-links">
3032
{{ with $resources }}
3133
<a href="{{ . }}" class="button resources-link">Resources</a>

‎site/layouts/partials/incident.html

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
{{- $severity := .Params.severity | default "under-maintenance" -}}
22
{{- $alert := index .Site.Data.severity.alerts $severity -}}
33
<div class="incident card">
4-
<div class="incident-header">
5-
<p class="incident-title">{{ .Title }}</p>
6-
<div class="pull-right">
7-
<p class="affected-systems">Affected Systems: <span class="incident-status color-{{ $alert }}">{{ delimit .Params.affectedsystems ", " }}</span>
8-
</p>
9-
<p class=incident-date>{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}</p>
10-
</div>
4+
<div class="flex-out">
5+
<h1 class="incident-title">{{ .Title }}</h1>
6+
<p class="small mute">{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}</p>
117
</div>
128
<div class="incident-description">
139
{{- .Content -}}
1410
</div>
15-
<p class="incident-status color-{{ $alert }}">
16-
{{- index .Site.Data.severity.descriptions $severity -}}
17-
</p>
11+
<div class="incident-status">
12+
<p class="color-{{ $alert }}">
13+
{{- index .Site.Data.severity.descriptions $severity -}}
14+
</p>
15+
<p class="small">Affected Systems:
16+
<span class="color-{{ $alert }}">
17+
{{- delimit .Params.affectedsystems ", " -}}
18+
</span>
19+
</p>
20+
</div>
1821
</div>

‎src/css/main.css

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ a:active {
2828
margin-bottom: 40px;
2929
padding: 16px 0 24px 0;
3030
border-bottom: 2px solid #F7F7F8;
31+
display: flex;
32+
flex-direction: row;
33+
justify-content: space-between;
3134
}
3235

3336
.logo {
@@ -52,18 +55,14 @@ a:active {
5255
text-decoration: none;
5356
}
5457

55-
.right-links {
56-
float: right;
57-
}
58-
5958
@media (max-width: 450px) {
6059
.right-links {
61-
float: left;
6260
margin-top: 24px;
6361
}
6462

6563
.header {
6664
padding-bottom: 68px;
65+
flex-direction: column;
6766
}
6867
}
6968

@@ -109,8 +108,8 @@ a:active {
109108
padding: 16px;
110109
border-radius: 10px;
111110
background: #fff;
112-
box-shadow: 0px 4px 8px 0px rgba(0,0,0,.05);
113-
border: 1px solid #fbfbfb;
111+
box-shadow: 0px 4px 8px 0px rgba(0,0,0,.1);
112+
border: 1px solid #eaeaea;
114113

115114
font-size: 16px;
116115
font-weight: 500;
@@ -138,44 +137,53 @@ a:active {
138137
height: 16px;
139138
}
140139

140+
.incident h1 {
141+
font-size: 1.5em;
142+
margin-top: 0;
143+
}
144+
141145
.incident {
142146
color: #202020;
143147
}
144148

145149
.incident-title {
146-
float: left;
147150
text-transform: capitalize;
151+
width: 75%;
148152
}
149153

150-
.pull-right {
151-
float: right;
152-
}
153-
154-
.incident-date {
155-
font-size: 14px;
156-
opacity: 0.3;
157-
}
158-
159-
.affected-systems {
160-
font-size: 14px;
161-
opacity: 0.7;
162-
}
163-
164-
@media (max-width: 450px) {
154+
@media (max-width: 725px) {
165155
.incident-date {
166156
width: 100%;
167157
}
158+
.incident-title {
159+
width: 100%;
160+
}
168161
}
169162

170163
.incident-description {
171164
font-size: 14px;
172165
font-weight: 400;
173166
}
174167

168+
.separate {
169+
text-align: right;
170+
padding-bottom: 1em;
171+
border-bottom: 2px solid #F7F7F8;
172+
}
173+
175174
.incident-status {
175+
display: flex;
176+
flex-direction: row;
177+
justify-content: space-between;
176178
margin: 24px 0 0 0;
177179
}
178180

181+
.flex-out {
182+
display: flex;
183+
flex-direciton: row;
184+
justify-content: space-between;
185+
}
186+
179187
.system-check-ok {
180188
margin: 80px auto 104px auto;
181189
width: 100%;
@@ -198,7 +206,6 @@ a:active {
198206
font-size: 16px;
199207
font-weight: 500;
200208
border-bottom: 2px solid #F7F7F8;
201-
color: #bbb;
202209
}
203210

204211
.see-more {
@@ -229,20 +236,23 @@ a:active {
229236
.mute {
230237
opacity: 0.7;
231238
}
239+
240+
.small {
241+
font-size: 14px;
242+
}
243+
232244
.incident-summary {
233245
margin-bottom: 24px;
234246
overflow: hidden;
235247
}
236248

237249
.article-title {
238250
width: 70%;
239-
float: left;
240251
text-transform: capitalize;
241252
}
242253

243254
.article-date {
244255
width: 29%;
245-
float: right;
246256
text-align: right;
247257
font-size: 14px;
248258
}

0 commit comments

Comments
 (0)