-
Notifications
You must be signed in to change notification settings - Fork 10
/
portability.css
134 lines (132 loc) · 4.14 KB
/
portability.css
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
:root {
--main-bg-colour: #fff;
--aside-bg-colour: #f3f3f3;
--main-text-colour: #444;
--main-link-colour: #0575bd;
--figcaption-colour: #000;
}
html, body { margin: 0;
height: 100%; }
body { font-family: 'Alegreya Sans', sans-serif;
color: var(--main-text-colour);
background-color: var(--main-bg-colour);
line-height: 1.3em;
font-weight: 400;
font-size: 14pt; }
a { text-decoration: none;
color: var(--main-link-colour); }
#mainnav { font-size: smaller;
text-align: center; }
#mainnav > div { background-color: #668;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
box-shadow: 0 0 1px #aaa;
color: #ddd;
padding: 0.5rem 3rem;
display: inline-block; }
#mainnav a { color: #eef;
font-weight: 500; }
#mainnav .link { display: inline-block;
margin-left: 0.5rem; }
#mainnav .link + .link { border-left: thin solid #aaa;
padding-left: 0.5rem; }
article, #mainhead { width: 66rem;
max-width: calc(100% - 1rem);
margin: 0 auto; }
#mainhead { padding-top: 1.5em;
padding-bottom: 1.5em;
color: #222;
display: flex;
display: -webkit-flex;
align-items: flex-end;
-webkit-align-items: flex-end; }
#mainhead nav { font-size: 80%; }
#mainhead nav a { color: #000; }
#mainhead nav a span { border-bottom: thin transparent; }
#mainhead nav a:hover { color: #000; }
#mainhead nav a:hover span { border-bottom: thin solid #0575BD; }
#mainhead nav a + a { border-left: thin solid #888;
padding-left: 4pt;
margin-left: 4pt; }
#mainhead img { height: 22pt;
margin-bottom: 1pt; }
#mainhead h1 a { color: inherit; }
#mainhead h1 a:hover { color: #000; }
#mainhead h1 { font-size: 200%;
font-weight: 500;
flex: 1;
line-height: 22pt;
margin: 0;
-webkit-flex: 1;
margin: 0 8pt; }
h3 { font-weight: 500;
font-variant: small-caps;
margin: 2em auto;
text-align: center;
font-size: 130%; }
footer { text-align: center;
padding-top: 1em;
padding-bottom: 1em;
font-size: 80%;
color: #678; }
footer .fa { font-size: 75%; }
figcaption::before { color: var(--figcaption-colour);
content: 'Figure: ';
font-weight: 500;
display: inline-block; }
figcaption { font-size: 90%;
line-height: 1.2em;
opacity: 0.8; }
article { padding: 2rem 0; }
article[data-sblg-article] { padding: 0;
width: auto;
max-width: auto;
margin: auto; }
article .intro { font-size: 110%;
line-height: 1.3em; }
pre { overflow: hidden;
line-height: 1.25em; }
code, pre { font-family: monospace;
color: #000;
font-size: 75%; }
#postheader { line-height: 0; }
#postheader > div { display: flex;
align-items: center; }
#postheader > div > div { flex: 1;
padding: 0 1rem; }
figure img,
#postheader img { width: 100%; }
#portability-fig9 { text-align: center; }
#portability-fig9 img { max-width: 400px; }
h2, h3 { font-size: 110%;
font-variant: small-caps;
font-weight: 500;
color: #000;
text-align: center; }
h3 { font-weight: inherit;
margin: 0;
font-size: inherit; }
dl { margin: 0; }
dl dd { margin: 0; }
dl dt { font-variant: small-caps;
font-size: 95%;
color: #000; }
dl dd + dt { margin-top: 0.5rem; }
footer { text-align: center;
margin-top: 3rem;
opacity: 0.8;
margin-bottom: 1rem; }
figure { margin: 1rem; }
figure.centre { text-align: center; }
aside { background-color: var(--aside-bg-colour); }
.file { font-style: italic;
color: #000; }
.aside { opacity: 0.8; }
.important { border-left: 3px solid red;
padding-left: 1rem; }
strong { color: #000;
font-weight: 500; }
@media only screen and (min-width: 66rem) {
figure { margin: 1rem 4rem; }
#postheader { margin: 2rem 10rem; }
}