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
|
.figure {
float: left;
margin: 10px;
width: auto;
height: 220px;
}
.figure.minigallery {
height: auto;
}
.figure img {
display: inline;
padding:1px;
border:1px solid #DDDDDD;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.figure img:hover {
border:1px solid #EEEEEE;
opacity: 0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.figure .caption {
width: 200px;
text-align: center !important;
}
.figure p {
margin-top: 0;
}
div.section h2 {
padding-top: 30px;
border-bottom: 1px solid #cccccc;
}
div.bottomnav {
clear: left;
}
/* Front-page Example Showcase */
#showcase {
width: 100%;
height: 300px;
overflow: hidden;
margin: 0;
padding: 0;
position: absolute;
left: 0;
right: 0;
margin-bottom: 10px;
}
#showcase:after,
#showcase:before {
content: "";
display: block;
width: 100%;
position: absolute;
background: white;
height: 16px;
z-index: 2;
}
#showcase:before {
bottom: -16px;
box-shadow: 0px -8px 16px rgba(0,0,0,0.3);
}
#showcase:after {
top: -16px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
}
#showcase .examples {
margin: 0 auto;
height: 300px;
line-height: 0;
/* Width and padding settings give the example showcase the same width
as the page header on a big screen. On smaller screens, they both will
have the same width anyway as the title header is responsive and gets narrower
and the example showcase gets clipped by the overflow: hidden setting. */
width: 88rem;
padding-left: 1rem;
padding-right: 1rem;
}
#showcase .preview {
/* Value is chosen through trial and error so that the examples fill out the
whole width which is defined in #showcase .examples */
width: 172px;
height: 100px;
padding: 0;
outline: 1px solid #ddd;
background-position: left top;
background-size: cover;
overflow: hidden;
position: relative;
z-index: 0;
transition: background-position 2s;
display: block;
float: left
}
#showcase .preview:hover {
background-position: right bottom;
outline: 2px solid #4682B4;
z-index: 1;
}
/* Example Gallery */
.gallery {
display: flex;
flex-wrap: wrap;
margin: 0 -12px;
}
.gallery .imagegroup {
display: inline-block;
position: relative;
/* Show 4 images per row, each image has 18px horizontal margin */
width: calc(25% - 36px);
margin: 12px 18px;
/* For small screens */
min-width: 140px;
}
.gallery .imagegroup:hover {
text-decoration: none;
}
.gallery .image {
background-size: cover;
display: block;
width: 100%;
/* hack to make height depend on width, golden ratio*/
padding-bottom: 75%;
background-repeat: no-repeat;
margin-bottom: 5px;
overflow: hidden;
transition: background-position 2s;
}
.gallery .image:hover {
background-position: right bottom;
}
.gallery .image-title {
font-size: .95em;
display: block;
line-height: 22px;
}
|
