platform.html5.org/style.css at master · 3rdandUrban-dev/platform.html5.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
html {
  background: #DDE5D9 url(data:image/gif;base64,R0lGODlhBAAEAIAAANra2v///yH5BAAAAAAALAAAAAAEAAQAAAIFTGB4xlcAOw==) repeat 0 0;
  font-family: "Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica;
}
#content, #footer {
  font-size: 90%;
  border: solid 1px #CED4CA;
  background-color: #FFF;
  padding: 4px 4px 4px 20px;
  margin: 4px 10px 4px 10px;
}
#content {
  margin-top: 20px;
  padding: 20px;
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
}
a, a:hover {
  color: #ff6900;
  text-decoration: none;
}
a:hover {
  color: #777;
}
a.caniuse,
a.mdn,
a.tests
{
  color: #ccc;
}
a.caniuse:hover,
a.mdn:hover,
a.tests:hover
{
  color: #005A9C;
}
#github {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
}
h1 {
  background: #fff;
  margin-top: 4px;
  border: 1px dashed #ccc;
  padding: 10px;
  column-span: all;
  -moz-column-span: all;
  -webkit-column-span: all;
}
p {
  column-span: all;
  -moz-column-span: all;
  -webkit-column-span: all;
}
body > a + a{
  position: fixed;
  top: 0;
  right: 0;
}
dl{
  margin-top: 0;
  padding-top: 0;
  break-inside: avoid;
}
dt {
  color: #0b5b9d;
  font-weight: bold;
  margin-top: 0;
  padding-top: 0;
  break-after: avoid;
}
dd {
  margin-left: 2em;
}
@media all and (max-width : 1200px) {
  #content {
    column-count: 2;
    column-gap: 20px;
    column-fill: auto;

    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -moz-column-fill: auto;

    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-fill: auto;
  }
}

@media all and (max-width : 800px) {
  #content {
    column-count: 1;
    column-gap: 10px;
    column-fill: auto;

    -moz-column-count: 1;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;

    -webkit-column-count: 1;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
  }
}