-
Notifications
You must be signed in to change notification settings - Fork 6
/
style.css
111 lines (93 loc) · 2.75 KB
/
style.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
/* A block of type is made of horizontal stripes: alternately, a stripe as */
/* thick as the x-height that contains most of the ink, then a mostly empty */
/* stripe, then an inky stripe, then a mostly empty stripe, etc. To create */
/* a golden ratio between the thicknesses of the stripes, let's make */
/* (line-height - x-height) / x-height = phi. To achieve this we set */
/* line-height = (1 + phi) * x-height. In Helvetica, the x-height is */
/* 0.53 * font-size, giving line-height = 1.39 * font-size. */
body, td { font-family: helvetica, arial; font-size: 18px; line-height: 1.39; }
/* Helvetica's baseline is 0.43 * font-size above the bottom edge of the */
/* text box. Lowering the baseline to the bottom edge of the textbox */
/* enables us to control baseline-to-baseline distances. */
h1, h2 { position: relative; top: 0.43em; }
/* Setting the left margin to phi * line-height = 2.25 * font-size causes */
/* the left endpoints of the baselines to form golden rectangles with the */
/* left edge of the window. */
body { background: #e8eeee; color: #147; margin: 0 }
h1 { font-weight: 300; font-size: 48px; margin: 2.78em 0 0; }
h2 { font-weight: 200; font-size: 28px; margin: 1.5em 0; }
h3 { font-weight: 700; font-size: 20px; margin: 2.78em 0 0; }
p,ul,li { margin: 1.39em 0; max-width: 30em; margin-left: auto; margin-right: auto; }
table { margin-left: auto; margin-right: auto; }
a { text-decoration: none; color: #37b; }
a:hover { text-decoration: underline; }
.figure { padding-bottom: 1em; }
.figure:first-child { padding-right: 2em; text-align: center; }
.caption { font-size: 18px; padding-top: 0.5em; text-align: center; }
a.btn {
display:inline-block;
position:relative;
padding: 1em;
margin: 1em;
box-shadow: 1px 1px 1px #999;
border-radius: 2px;
background: #37b;
color: #fff;
}
a.btn:hover {
background: #59e;
left:-1px;
top:-1px;
box-shadow: 2px 2px 3px #999;
}
section {
width: 100%;
position: relative;
}
section > div {
padding: 0.5em 2.25em;
}
div.intro {
font-size: 1.2em;
}
div.left {
float:left;
width:40%;
min-width:400px;
margin-left:0.3em;
margin-right:0.1em;
}
div.right {
float:left;
width:40%;
min-width:400px;
margin-left:0.3em;
margin-right:0.1em;
}
section.alt {
background: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
section.bg-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
min-height: 480px;
color: #fff;
text-align: center;
}
section.overlay:before {
background-color: #147;
opacity: 0.4;
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.clearfix {
clear: both;
}