meta.html 9.92 KB
Newer Older
1
<!DOCTYPE html>
2
<html lang="{{ .Site.LanguageCode }}" class="no-js">
3
4
5
6
7
8
  <head>
    <!-- Basics -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Data -->
Mantas's avatar
Mantas committed
9
10
    <meta name="description" content="{{ with .Summary }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} | {{ end }}{{ .Site.Title }}{{ end }}</title>
11
    <link rel="canonical" href="{{ .Permalink }}">
12
13
14
    {{ range .AlternativeOutputFormats -}}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
    {{ end -}}
Mantas Vilčinskas's avatar
v4.3    
Mantas Vilčinskas committed
15
    <meta name="generator" content="cState v4.3 - https://github.com/cstate/cstate">
16
    <meta name="theme-color" content="{{ .Site.Params.brand }}">
17
    <script>
18
19
20
21
22
    var themeBrandColor = '{{ .Site.Params.brand }}';
    var themeOkColor = '{{ .Site.Params.ok }}';
    var themeNoticeColor = '{{ .Site.Params.notice }}';
    var themeDisruptedColor = '{{ .Site.Params.disrupted }}';
    var themeDownColor = '{{ .Site.Params.down }}';
23
24


25
    </script>
26
27
28
29
30
    <!-- Sources -->
    <style>
    html, body {
      margin: 0;
      background: #fff;
31
      color: #4d4d4d;
32
      font: 100%/1.5 "Inter", "Inter UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
33
      box-sizing: border-box;
34
      -webkit-tap-highlight-color: rgba(0,0,0, 0.25);
35
36
    }

37
38
    ::selection { background: #B4D5FF; }

39
40
41
42
    *, *:before, *:after {
      box-sizing: inherit;
    }

43
44
    a {
      text-decoration: none;
45
46
      color: #000;
      border-bottom: 1px dotted currentColor;
47
48
49
    }

    a:hover { border-bottom-style: solid; }
50
51
    a:active { position: relative; top: 2px; }

52
53
54
55
56
57
58
59
60
61
    hr {
      border: 0;
      border-bottom: 1px solid #ccc;
      margin: 24px 0;
    }

    h1 {
      font-size: 40px;
      line-height: 1;
    }
62
63
64
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
65

66
    h1, h2, h4 {
67
68
      font-weight: normal;
      color: #000;
69
      font-family: "Inter", "Inter UI", "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Display", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
70
      letter-spacing: -0.4px;
71
72
73
    }

    h3 {
74
      margin: 0;
75
76
77
      color: #000;
    }

78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
    img {
      border: 0;
      width: 100%;
      height: auto;
    }

    /**
     * Classes
     */

    a.no-underline { border-bottom: 0; }

    .headline { font-size: 20px; }

    .bold { color: #000; }
Mantas's avatar
Fix #52    
Mantas committed
93
94
    .hinted { color: #6d6d6d; }
    .faded { color: #6d6d6d; }
95
96
97

    .clean { margin: 0; }

98
99
100
    .ok { color: {{ .Site.Params.ok }}; }
    .warning { color: {{ .Site.Params.disrupted }}; }
    .error { color: {{ .Site.Params.down }}; }
101
102
103
104
105
106
107
108
109
110
111
112
113

    .contain {
      max-width: 640px;
      margin: 16px auto;
      padding: 16px;
    }

    .contain--more { max-width: 680px; }

    .center { text-align: center; }
    .right { text-align: right; }
    .padding-s { padding: 6px; }
    .padding { padding: 12px; }
114
115
116
117
118
119
120
    .clicky { cursor: pointer; }


    /**
     * Categories
     */

Mantas's avatar
Mantas committed
121
122
123
124
    /* Categories themselves */
    .js .category--open .category__closed-marker { display: none; }
    .js .category--closed .components { display: none; }
    .js .category--closed .category__open-marker { display: none; }
125

Mantas's avatar
Mantas committed
126
127
    /* Markers */
    .js .hidden-with-js { display: none; }
128
129
130
131
132
    .hide-without-js { display: none; }
    .js span.hide-without-js { display: inline; }
    .js div.hide-without-js { display: block; }


133
134
135
136
    /**
     * UI elements
     */

137
    .date {
138
139
      display: block;
      margin-top: 12px;
140
141
      color: #666;
      font-variant: small-caps;
142
143
    }

144
145
146
147
148
149
    .tag {
      display: inline-block;
      padding: 4px 8px;
      margin-right: 4px;
      margin-bottom: 2px;
      background: #eee;
150
151
    }

152
153
154
155
156
157
    .tag:hover { background: #ddd; }

    /**
     * Section blocks
     */

158
    .header {
Mantas's avatar
Mantas committed
159
      padding: 8px 0;
160
      background: {{ .Site.Params.brand }};
161
162
163
    }

    .header a {
164
      color: #fff;
Mantas's avatar
Mantas committed
165
      font-size: 14px;
166
      font-variant: small-caps;
167
    }
168
      
169
    {{ if eq .Site.Params.headerTextColor "black" }}
170
      .header a h1 { color: #000; }
171
    {{ else if eq .Site.Params.headerTextColor "white" }}
172
173
174
      .header a h1 { color: #fff; }
    {{ end }}
      
175
176
177
178
179
180
181
182
183
184
    .header__logo img {
      height: auto;
      width: 320px;
    }

    .header__logo--small img {
      height: auto;
      width: 160px;
    }

Mantas's avatar
Mantas committed
185
186
187
    .header--large { padding: 16px; }
    .header--large a { font-size: 20px; }

188
189
190
    .footer {
      padding: 10px;
      background: #f5f5f5;
191
192
    }

193
194
195
    .footer__copyright {
      display: block;
      font-variant: small-caps;
196
197
    }

198
199
    .footer__copyright a, a.header__logo {
      border-bottom: 0;
200
201
    }

202
203
204
    /**
     * Homepage: summaries
     */
205
206

    .summary {
207
208
209
210
      padding: 16px;
      color: #fff;
    }

211
    .summary__date:hover {
Mantas's avatar
v2-dev2    
Mantas committed
212
      color: #ccc;
213
214
    }

215
216
217
    .summary__date:hover:after {
      content: ' ⟳ ';
      color: #fff;
218
219
    }

220
221
222
    /**
     * Homepage: systems, tooltips
     */
Mantas's avatar
v2-dev2    
Mantas committed
223

224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
     .components {
       border: 2px solid #ddd;
       border-bottom: 0;
     }

     .component {
       color: #000;
       padding: 16px;
       border-bottom: 2px solid #ddd;
     }

    .tooltip { cursor: pointer; position: relative; }
    .tooltip__text { display: none; }
    .tooltip:hover .tooltip__text,
    .tooltip:active .tooltip__text  {
Mantas's avatar
v2-dev2    
Mantas committed
239
240
241
      display: block;
      position: absolute;
      top: 0;
242
      left: 24px;
Mantas's avatar
v2-dev2    
Mantas committed
243
244
245
246
247
248
249
      background: #181818;
      color: #fff;
      z-index: 50;
      padding: 8px;
      border: 2px solid #242424;
      font-size: 14px;
      color: #ccc;
250
      width: 320px;
Mantas's avatar
v2-dev2    
Mantas committed
251
252
253
254
      height: auto;
    }

    @media (max-width: 640px) {
255
256
      .tooltip:hover .tooltip__text,
      .tooltip:active .tooltip__text {
Mantas's avatar
v2-dev2    
Mantas committed
257
258
        width: 50vw;
      }
259
260
    }

261
262
263
    /**
     * Tabs
     */
264

Mantas's avatar
Mantas committed
265
266
267
    .tabs { border-bottom: 1px solid #ccc; }
    .tabs--inner { padding: 0 16px; margin: 0 auto; }
    a.tab { display: inline-table; }
268

Mantas's avatar
Mantas committed
269
270
271
272
273
274
275
    .tab--current {
      border: 1px solid #ccc;
      border-bottom-color: #fff;
      padding: 12px 18px;
      position: relative;
      top: 1px;
    }
276

Mantas's avatar
Mantas committed
277
278
279
280
281
    .tab--other {
      border: 0;
      padding: 12px 18px;
      position: relative;
      top: 1px;
Mantas's avatar
Mantas committed
282
      color: #757575;
Mantas's avatar
Mantas committed
283
    }
284

Mantas's avatar
Mantas committed
285
286
    .tab--other:hover { color: #000; }

287
288
289
290
291
    /**
     * Articles
     */

    .issue { display: block; padding: 14px 24px; }
292
293
    .issue:hover, .category__head:hover { background: #f5f5f5; }
    .issue:active, .category__head:active { background: #eee; }
294

295
    .issue h3 { line-height: 1.25; }
Mantas's avatar
Mantas committed
296

297
298
    .category__head { margin-top: 20px; }

299
300
301
302
303

    /**
     * Specific to the status
     */

304
305
306
307
    .status-ok .summary { background: {{ .Site.Params.ok }}; }
    .status-disrupted .summary, .change-header-color.status-disrupted .header { background: {{ .Site.Params.disrupted }}; }
    .status-down .summary, .change-header-color.status-down .header { background: {{ .Site.Params.down }}; }
    .status-notice .summary, .change-header-color.status-notice .header { background: {{ .Site.Params.notice }}; }
Mantas's avatar
Mantas committed
308
309
310
311
312

    .announcement-box .padding {
      padding: 16px;
    }

313
314
315
    .status-disrupted .announcement-box { border: 2px solid {{ .Site.Params.disrupted }}; }
    .status-down .announcement-box { border: 2px solid {{ .Site.Params.down }}; }
    .status-notice .announcement-box { border: 2px solid {{ .Site.Params.notice }}; }
Mantas's avatar
Mantas committed
316
317
318
    .status-disrupted .announcement-box,
    .status-down .announcement-box,
    .status-notice .announcement-box { border-top: 0; }
319
320
321
322
323

    /**
     * Dynamically show individual component statuses
     */

324
    .component-status { float: right; }
325
326
327
328
    .component[data-status="ok"] .component-status { color: {{ .Site.Params.ok }}; }
    .component[data-status="disrupted"] .component-status { color: {{ .Site.Params.disrupted }}; }
    .component[data-status="down"] .component-status { color: {{ .Site.Params.down }}; }
    .component[data-status="notice"] .component-status { color: {{ .Site.Params.notice }}; }
329
330

    /**
331
     * Responsiveness
332
333
     */

334
    @media (min-width: 640px) {
335
      .float-right {
336
        float: right;
337
        display: inline;
338
339
      }
    }
340

341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
    {{ if not .Site.Params.disableDarkMode }}
      /**
      * Dark theme
      */
      
      @media (prefers-color-scheme: dark) {
        /* Basics */
        html, body { background:  #181a1b; color: #ccc9c1; }
        h1, h2, h3, h4, a, .bold { color: #fafafa; }
        hr { border-bottom-color: #3d3d3d; }
        
        /* Sections */
        .footer { background: #1b1d1e; }
        
        .components {
          border: 2px solid #ddd;
          border-bottom: 0;
          border-color: #3a3a3a;
        }
360

361
362
363
364
        .component {
          border-bottom: 2px solid #ddd;
          color: #e8e6e3;
          border-bottom-color: #3a3a3a;
365
        }
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398

        .tabs { border-bottom-color: #3d3d3d; }
        .tab--current {
          border-color: #3d3d3d;
          border-bottom-color: #181a1b;
        }
        .tab--other { color: #757575; }
        .tab--other:hover { color: #fff; }

        .date { color: #c3bfb6; }

        .tag { background-color: #1d1f20; }
        .tag:hover { background: #222; }
        .issue:hover,
        .category__head:hover { background-color: #212121; }

        /* Colors for dark mode */

        .hinted, .faded { color: #c1bcb3; }
        .error { color: #ff4242; }
        .warning {color: #ffde7f; }
        .ok { color: #7fff7f; }

        .component[data-status="ok"] 
        .component-status { color: #7fff7f; }
        .component[data-status="disrupted"] 
        .component-status { color: #ffde7f; }
        .component[data-status="notice"] 
        .component-status { color: #83a4e8; }
        .component[data-status="down"]
        .component-status { color: #ff8181; }
      }
    {{ end }}
399
    </style>
Mantas's avatar
Mantas committed
400
401
402
    {{ if .Site.Params.enableCustomHTML }}
      {{ partial "custom/meta" . }}
    {{ end }}
403
  </head>