-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
165 lines (145 loc) · 3.14 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
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
body {
/* When we have pages with long form text, (e.g. event descriptions)
* we'll want to pick a better reading font for those, but right
* now everything is headings and snippets. */
font-family: Helvetica, sans-serif;
color: black;
background-color: white;
}
nav ul {
border: 1px solid black;
border-radius: 0.5rem;
display: flex;
padding: 0.25rem;
justify-content: space-around;
flex-wrap: wrap;
list-style: none;
margin-left: 2rem;
margin-right: 2rem;
}
nav ul > li {
display: inline-block;
margin-left: 1rem;
margin-right: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
h1 { text-align: center; }
form, .form {
display: flex;
flex-direction: column;
align-items: center;
}
form button, .form button {
margin: 0.5rem;
}
textarea {
width: 100%;
}
.upcomingDayHeading {
text-transform: uppercase;
font-size: 12pt;
}
.upcomingEventSet {
border-left: 1px solid darkgrey;
border-right: 1px solid darkgrey;
border-bottom: 1px solid darkgrey;
}
.upcomingEvent {
font-size: 16pt;
border-top: 1px solid darkgrey;
padding: 0.5rem;
}
.upcomingEvent p {
margin: 0.25rem;
}
.upcomingEvent .eventTime {
font-size: 14pt;
color: darkgrey;
}
.mainContentContainer {
/* Center the content of the page. */
display: flex;
justify-content: space-around;
max-width: 100%;
}
.eventDescription {
/* Descriptions often have very long links; make sure they don't overly
* distort the size of the box: */
overflow-wrap: anywhere;
}
.formBlock {
border: 1px solid darkgrey;
border-radius: 0.25rem;
padding: 0.5rem;
margin: 0.5rem;
}
.labeledInput {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.labeledInput > label {
padding-right: 3rem;
}
.labeledInput > input[type="text"] {
/* We want raw text fields to expand, but not other inputs.
* Note that this selector will only apply to <input> elements
* that have type set _explicitly_ -- but the labeled_elem
* helper function forces us to always supply a type, so that's
* fine. */
flex: 1 1 auto;
/* So iOS doesn't zoom: */
font-size: 16px;
}
.labeledInput > label, .labeledInput > input, .labeledInput > select {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
.week-grid {
width: 97vw;
display: grid;
border-bottom: 1px solid lightgray;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(49, 1fr); /* 24 hours * 2 cells per hour + 1 row for the headings = 49 cells */
}
.week-day-heading {
grid-row: 1;
text-align: center;
padding-right: 0.5em;
padding-left: 0.5em;
}
.week-item {
border-top: 1px solid lightgray;
border-right: 1px solid lightgray;
color: grey;
padding: 0.25rem;
overflow: hidden;
}
.week-item--col-1 {
border-left: 1px solid lightgray;
}
.postLink button {
background-color: white;
color: blue;
border: 0px none;
text-decoration: underline;
font: inherit;
margin: 0px;
}
/* offer iframe */
iframe {
width: 100%;
height: 55px;
margin: 0;
border: 0;
}
@media(max-width: 600px) {
.dayname-mid { display: none; }
/* Text can get *very* cramped at small sizes; prefer odd hyphenation to
* just clipping: */
.week-item { overflow-wrap: anywhere; }
}
@media(max-width: 850px) {
.dayname-tail { display: none; }
}