-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathmain.css
More file actions
286 lines (246 loc) · 7.24 KB
/
Copy pathmain.css
File metadata and controls
286 lines (246 loc) · 7.24 KB
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
/* ### Trafford Data Lab website styles (extending the base styles) ### */
.container
{
overflow: auto;
position: relative; /* Required for footer to be positioned always at the bottom of the page */
min-height: 100%; /* Required for footer to be positioned always at the bottom of the page */
}
/* NOTE: all property sizes for elements within the header are expressed in px not em as we don't want the header to increase in size. This is because it might become too big on a small phone screen and prevent the user seeing the page content. */
header
{
position: fixed;
background-color: white;
width: 100%;
text-align: left;
border-bottom: 1px solid #ccc;
box-shadow: 0 0 5px #f0f0f0;
z-index: 2;
}
.traffordDataLabLogo
{
margin: 9px 12px 0 12px;
padding: 0;
}
/* Contains the accessibility skip links - these are positioned off screen not hidden, so that they can be read out as well as focussed using keyboard */
#a11yNav
{
position: absolute;
top: -30em;
z-index: 333;
}
#a11yNav a
{
position: absolute;
left: 0;
width: 20em;
text-align: center;
font-weight: bold;
color: #fff;
padding: 0.75em 0;
border-bottom-right-radius: 2.25em;
}
#a11yNav a:focus, #a11yNav a:hover
{
top: 29em;
}
/* Contains the menu items within the <nav>igation section */
.navbar, #a11yNav
{
list-style-type: none; /* remove the list-item bullets */
}
.navbar
{
float: right;
margin: 15px 0 15px 0;
}
.navbar li
{
float: left; /* prevent the list items appearing underneath each other */
font-size: 16px;
}
.navbar li a
{
border-bottom: 1px solid white; /* required so that we can simulate a link underline in the a:hover without the header wobbling by 1px */
padding: 0 11px;
margin: 0;
color: #707070; /* To prevent the text having the link colour */
text-decoration: none;
}
.navbar li a:hover
{
border-bottom: 1px solid #046dc3;
}
main
{
margin: auto;
margin-top: 70px;
margin-bottom: 30px;
padding: 0 9% 5em 9%; /* 5em padding-bottom Required for footer to be positioned always at the bottom of the page (This is the height of the footer) */
}
main p
{
line-height: 1.8em;
}
main li
{
line-height: 2em;
}
section
{
margin-top: 2em; /* usually pages have a couple of sections, this is to provide a bit of space between them */
}
footer
{
width: 100%;
height: 5em; /* Required for footer to be positioned always at the bottom of the page (matched to the height of the Trafford logo) */
margin: 0;
padding: 0;
background-color:#f5f9ff;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
}
.leftFooter
{
display: inline-block;
white-space: nowrap;
padding: 6px 0 0 12px;
}
.linkMedia
{
font-size: 2em;
color: #212121; /* As these icons are links this is required otherwise they would be the link colour */
margin: 0 0.4em 0 0; /* Using margin not padding so that the "space" is not included in the link "hit" area. Using padding the links are too close together and it's easy to accidentally hit the wrong one on touch devices */
}
.linkMedia:hover
{
color: #046dc3;
}
.logoTrafford
{
height: 5em;
background-color: #fff;
float: right;
}
/* thumbnail images */
.thumbnail
{
float: left;
margin-right: 1em;
box-shadow: 3px 3px 5px #f0f0f0;
}
/*
Areas of content presented in a box/card-type format to stand out.
Cards are for mutiple items arranged in groups of columns and rows such as items on the home, data and charticles pages etc.
The individual pages can specialise these styles accordingly, e.g. for the size of the cards.
*/
.card
{
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.cardHead
{
display: block;
/* NOTE: the intention is to use an appropriate heading level (but never h1) as the titles for the cards, that way they give semantic sense to the list of cards.
The styles here just ensure that the text is rendered consistently no matter which heading level is used. */
margin: 0;
font-size: 1em;
}
.cardBody
{
font-size: 0.8em;
margin: 0.1em 0 0 0;
color: #212121; /* Required in case the card is surrounded by a link - otherwise the text is the link colour */
}
a.card:hover
{
text-decoration: none; /* prevents the text in the card body being underlined - we only want the text in the card head underlined on hover, see a.card:hover .cardHead */
}
a.card:hover .cardHead
{
text-decoration: underline; /* Ensures the text in the card header is underlined on-hover */
}
.cardContainer
{
/*
Container to display the cards as a grid - see https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
In IE and browsers that don't support 'display: grid' these have no effect.
*/
/* latest spec definitions */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); /* Override this if necessary in page for the type of layout required */
gap: 2em;
/* legacy spec definitions for extra safety */
grid-gap: 2em;
}
.itemContainer div
{
/* These appear similar to cards but are 100% wide and remain in a single column. They don't use the grid system */
padding: 0.3em 0.5em 0.5em 0.5em;
margin-bottom: 2em;
overflow: auto;
}
.itemContainer div:last-of-type
{
margin-bottom: 0; /* remove the margin applied above from the last item on the page */
}
/* content block usually paired with themeBlockLight */
.contentBlock
{
padding: 1em;
border-left: 4px solid #757575;
}
/* Notifications added to items, e.g. to indicate new content */
.notification /* This class is applied to the outer element/container of the new content e.g. <a class="card labBorder notification"... */
{
position: relative;
display: inline-block;
}
.notification .badge /* Implementation: <span class="badge highContrastBlock" aria-label="This item is new">new</span> This is the last child element within the parent container (which has the class .notification applied). The class "highContrastBlock" can be interchanged for others such as "themeBlockDark" etc. */
{
position: absolute;
top: 0;
right: 0;
padding: 0.25em 0.5em;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
border-top-right-radius: 1px;
border-bottom-left-radius: 10px;
font-size: 0.75em;
text-transform: uppercase;
font-weight: bold;
}
.notification .themeBlockDark /* Adjustment to the text colour for notifications styled with themeBlockDark - default is black */
{
color: #fff;
}
.notification .themeBlockLight /* Adjustment to the text colour for notifications styled with themeBlockLight - default is #212121 but without this override notification items within links have the same text colour as links. */
{
color: #212121;
}
/* changes due to screen width */
@media (min-width:1300px)
{
/* This prevents the content going too wide once the screen goes beyond a maximum width. */
main
{
width: 1070px;
padding: 0 0 5em 0;
}
}
@media (max-width:620px)
{
.navbar
{
float: none;
padding: 0 0 20px 0;
}
main
{
margin-top: 120px;
}
}