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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
|
/*
Nexus 5 360 598
Nexus 6 412 690
iPhone 5 320 568
iPhone 6 375 667
iPhone 6+ 414 736
Galaxy 5 360 640
Galaxy 6 360 640
iPad 768 1024
Galaxy 2,3 10" 800 1280
Galaxy 2 7" 600 1024
320-359 small phone portrait
360-567 big phone portrate
568-1023 phone landscape, tablets portrate
1024- tablets landscape, monitor
*/
html
{
font-family: sans-serif;
font-weight: normal;
font-size: 18px;
line-height: 1.4em;
}
input
{
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
}
body
{
margin: 0; /* There is non-0 default margin on body. */
}
/* 320px ~ 20em @ 1 font-size. This is factored in when doing font
boosting. Specifying 320px directly seems to mess it up.
Font boosting results for font-size:1.1em, min-width:18em on Nexus 5:
- about 40 characters in portrait
- about 70 characters in landscape
- landscape font appears slightly smaller
18em on smaller phones (e.g., iPhone 4) appears to trigger scrolling.
17em works well, however.
*/
body {min-width: 17em;}
@media only screen and (min-width: 360px)
{
body {min-width: 19em;}
}
/*
* Header.
*/
#header
{
width: 100%;
background: rgba(0, 0, 0, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.26); /* Off background. */
padding: .3em 0 .3em 0;
margin: 0 0 1.4em 0;
}
#header-menu
{
/* Same as in #content below. */
max-width: 40em;
margin: 0 auto 0 auto;
padding: 0 .4em 0 .4em;
text-align: right;
}
#header-menu a:nth-child(n + 2) {padding-left: 1.2em;}
#header-menu a {font-size: 1.12em; color: #eee; text-decoration: none;}
#header-menu a:visited {color: #eee;}
#header-menu a:hover, #header-menu a:active {color: #fff; text-decoration: underline;}
/*
* Content.
*/
#content
{
max-width: 40em;
margin: 0 auto 0 auto;
padding: 0 .4em 0 .4em; /* Space between text and browser frame. */
}
/*
* Footer.
*/
#footer
{
text-align: center;
}
/* Until we have actual content in the footer. */
#footer:before {content: "\A0";}
#footer:after {content: "\A0";}
/* Screen size indicator in the footer. */
#footer
{
border-left: 1px solid;
border-right: 1px solid;
margin: 0 1px 0 1px; /* To see the border. */
}
@media only screen and (max-width: 359px)
{
#footer {border-color: red;}
}
@media only screen and (min-width: 360px) and (max-width: 567px)
{
#footer {border-color: orange;}
}
@media only screen and (min-width: 568px) and (max-width: 1023px)
{
#footer {border-color: blue;}
}
@media only screen and (min-width: 1024px)
{
#footer {border-color: green;}
}
/*
* Common elements.
*/
p {text-align: justify;}
code, pre
{
font-size: 0.94em;
}
a {color: #006fbf; text-decoration: none;}
a:hover, a:active {color: #0087e7; text-decoration: underline;}
a:visited {color: #003388;}
/*
* Form layout table.
*/
.form-table
{
width: 100%;
border-collapse: collapse;
margin-top: 1.5em;
}
.form-table table, .form-table th, .form-table td
{
border: none;
padding: 0;
}
/*
* Property list table.
*/
.proplist
{
/* Extend the table into #content's margins that are used to separate
from the browser frame. If this table gets background/stripe, then
we want it to cover that extra space so that we get a margin between
the text and the background edge. This also means that the background
will touch the browser frame. This looks ok as long as we don't use
fancy things like rounded corners. */
width: calc(100% + .8rem); /* Fill the page plus #content margin. */
padding-right: .4rem;
padding-left: .4rem;
margin-left: -.4rem;
table-layout: fixed;
border: none;
border-spacing: 0 0;
}
.proplist th, .proplist td {padding: .08em 0 .08em 0;}
.proplist th
{
font-family: monospace;
font-weight: normal;
text-align: left;
}
.proplist th:after {content: ":";}
.proplist td .comment
{
color: #666;
font-size: 0.833em;
}
/* Flexbox-based left/right aligned value/comment implementation. */
.proplist td
{
width: 100%;
white-space: nowrap;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.proplist td .value
{
display: inline-block;
-webkit-flex-shrink: 1;
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.proplist td .comment
{
display: inline-block;
margin-left: 1em;
-webkit-flex-shrink: 100000;
flex-shrink: 100000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Fallback for browsers that still don't support flexbox. */
.proplist td
{
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
}
.proplist td .value
{
float: left;
text-align: left;
}
/* Re-styling for full page variant. */
.full .proplist td
{
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
white-space: normal;
}
.full .proplist th
{
vertical-align: top;
}
.full .proplist td .value
{
margin-right: 1em;
white-space: normal;
}
.full .proplist td .comment
{
margin-left: 0;
text-align: left;
white-space: normal;
}
/*
* Pager.
*/
#pager
{
margin-top: 1.8em;
font-size: 0.916em;
text-align: center;
}
#pager a
{
padding: 0 0.4em 0 0.4em;
}
#pager #prev:before {content: "<\A0";}
#pager #curr {font-weight: bold;}
#pager #curr:before {content: "["; font-weight: normal;}
#pager #curr:after {content: "]"; font-weight: normal;}
#pager #next:after {content: "\A0>";}
|