blob: 7982c9dfa9ebc695e1f068637d21f4e3f1137249 (
plain) (
blame)
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
|
.breadcrumb-section {
padding: 1rem;
}
pre {
/*
* Style it the same as the <code> tag, since highlight.js does not style
* backgrounds of <pre> tags but bulma does, resulting in a weird off-white
* border.
*/
background-color: #282c34;
}
.panel .panel-heading {
/*
* Remove whitespace between the panel heading and the first item in a panel,
* since it makes the first panel item taller than the others.
*/
margin-bottom: 0 !important
}
.sponsor {
border-radius: .1rem;
padding: .3rem;
}
.sponsor img {
display: block;
margin: auto;
}
.box .sponsor {
margin-bottom: 1rem;
}
.event-gallery .date-icon, #main-section .date-icon {
margin-left: -.25rem;
}
.event-gallery .card, .event-gallery .box {
border-radius: 6px;
margin-bottom: 1.5rem;
}
/* We are using bulma cards as boxes here to take advantage of the card's
* header image component */
.event-gallery .card img {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/* Custom component: A colored line at the top of a card that can be styled
* with bulma's has-background-* classes.*/
.card .colored-line {
/* A default color as grey */
background-color: #C1C1C1;
height: .3rem;
display: block;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
@media (min-width: 700px) {
#scheduled-events .media-left {
margin-left: 2rem;
margin-right: 2rem;
}
#previous-events .media-left {
margin-left: 1rem;
margin-right: 1rem;
}
}
/* CSS-only Masonry layout:
* https://tobiasahlin.com/blog/masonry-with-css/
*
* Adapted for responsiveness:
* - Mobile (<=700px) No columns at all
* - Tablets (700~900px) Two columns Masonry
* - Desktop+ (>=900px) Three columns Masonry
*/
@media (min-width: 700px) {
.event-gallery {
display: flex;
flex-flow: column wrap;
align-content: space-between;
}
#other-events-section {
height: 63rem;
}
#other-events-section .box {
width: calc(50% - 1rem);
}
#other-events-section .box:nth-child(2n+1) { order: 1; }
#other-events-section .box:nth-child(2n) { order: 2; }
#other-events-section::before {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
@media (min-width: 900px) {
/* 3 columns */
#main-events-section {
/* Required. Must be only slightly taller than the tallest column */
height: 68rem;
}
#main-events-section .card {
width: calc(33% - 1rem);
}
/* Reorder vertically */
#main-events-section .card:nth-child(3n+1) { order: 1; }
#main-events-section .card:nth-child(3n+2) { order: 2; }
#main-events-section .card:nth-child(3n) { order: 3; }
/* 2 line breaks to force new columns, for each gap between the three columns. */
#main-events-section::before, #main-events-section::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
}
@media (max-width: 900px) {
/* 2 columns */
#main-events-section {
height: 96rem;
}
#other-events-section {
height: 83rem;
}
#main-events-section .card {
width: calc(50% - 1rem);
}
#main-events-section .card:nth-child(2n+1) { order: 1; }
#main-events-section .card:nth-child(2n) { order: 2; }
/* 1 line break to force a new column, for the gap between the two columns. */
#main-events-section::before {
content: "";
flex-basis: 100%;
width: 0;
order: 1;
}
}
}
|
