Skip to content

Commit 21e8225

Browse files
itsozzitsozz
committed
Revised design for the featured items section and revised copy above and below.
1 parent cef8889 commit 21e8225

1 file changed

Lines changed: 99 additions & 116 deletions

File tree

‎index.html‎

Lines changed: 99 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,33 @@
2626

2727
h2
2828
{
29-
border-bottom: 3px dotted #00445e;
29+
border-bottom: 3px dotted #5d77a3;
3030
padding-bottom: 3px;
3131
margin-bottom: 1.5em;
3232
}
33+
34+
#featured h2
35+
{
36+
border-bottom: 0;
37+
}
3338

3439
.thumbnail
3540
{
3641
margin-top: 0.5em;
3742
}
3843

39-
.backToOutputCategoriesMenu
44+
.backToFeatured
4045
{
4146
display: block;
4247
margin-top: 1.5em;
4348
font-size: 1.5em;
44-
color: #0bc2d2;
49+
color: #5d77a3;
4550
border: 1px solid #f0f0f0;
4651
border-radius: 0.75em;
4752
text-align: center;
4853
}
4954

50-
.backToOutputCategoriesMenu:hover
55+
.backToFeatured:hover
5156
{
5257
color: #00445e;
5358
background-color: #f9f9f9;
@@ -68,13 +73,33 @@
6873

6974
.card
7075
{
76+
background-color: #fff;
7177
padding: 0.2em 0.5em 0.5em 0.5em; /* the top padding is different to make the gap look balanced all around as the .cardHead content has padding of its own. */
7278

7379
/* For browsers which don't support grid layouts */
7480
width: 100%; /* these cards are larger than the default due to the contents of each being so large */
7581
margin: 0.5em 0;
7682
}
7783

84+
#featured .card
85+
{
86+
padding: 0 0 0.5em 0;
87+
}
88+
89+
#featured .card div:first-child
90+
{
91+
text-align: right;
92+
text-transform: uppercase;
93+
font-weight: bold;
94+
padding-right: 0.5em;
95+
}
96+
97+
#featured .card div:nth-child(2)
98+
{
99+
padding: 0.2em 0.5em 0.5em 0.5em;
100+
}
101+
102+
78103
/* For browsers which support grid layouts - Reset the widths and margins applied in the initial .card styles above as they aren't required when using grid layout */
79104
@supports (display: grid)
80105
{
@@ -104,57 +129,11 @@
104129
box-shadow: 0 0 5px #00445e;
105130
}
106131

107-
#outputCategoriesMenu /* APPS | COLLECTIONS | REPORTS | GRAPHICS */
108-
{
109-
padding-top: 3.5em;
110-
margin: 0 0 0 2.5em;
111-
}
112-
113-
#outputCategoriesMenu a
114-
{
115-
background-color: #00445e;
116-
color: #fff;
117-
padding: 3px 6px 0 6px;
118-
text-transform: uppercase;
119-
font-weight: bold;
120-
display: block;
121-
float: left;
122-
margin-right: 2px;
123-
}
124-
125-
#outputCategoriesMenu a:hover
126-
{
127-
background-color: #ffcb00;
128-
color: #212121;
129-
}
130-
131-
#outputCategoriesMenu a:first-child
132-
{
133-
border-top-left-radius: 10px;
134-
}
135-
136-
#outputCategoriesMenu a:last-child
132+
#featuredContainer /* Container for the featured item cards */
137133
{
138-
border-top-right-radius: 10px;
139-
}
140-
141-
#featured /* Container for the featured item cards */
142-
{
143-
border: 6px solid #00445e;
144-
border-radius: 1.70em;
134+
border: 3px solid #5d77a3;
135+
border-radius: 0.5em;
145136
padding: 2em;
146-
background-color: #0bc2d2;
147-
}
148-
149-
#featured .badge
150-
{
151-
background-color: #00445e;
152-
color: #fff;
153-
}
154-
155-
#featured .badge .fa-star
156-
{
157-
color: #ffcb00;
158137
}
159138

160139

@@ -177,10 +156,34 @@
177156
color: #999;
178157
margin-right: 0.13em;
179158
}
159+
160+
161+
/* To highlight the menu as a visual aid when selecting the "main menu" link referred to in the text above the apps collection */
162+
@keyframes highlightMenu
163+
{
164+
50% {
165+
background-color: #ffcb00;
166+
}
167+
100% {
168+
background-color: #fff;
169+
}
170+
}
171+
172+
/* Give the main menu items rounded corners for a nicer appearance when they are highlighted by the animation */
173+
#mainMenu li
174+
{
175+
border-radius: 1em;
176+
}
177+
178+
/* Apply the animation to highlight the menu when the "main menu" link is selected */
179+
#mainMenu:target li
180+
{
181+
animation: highlightMenu 2s;
182+
}
180183

181184

182185
/* Reduce the size of certain elements on very small displays */
183-
@media (max-width:750px)
186+
@media (max-width:650px)
184187
{
185188
/* Display cards in a single column on smaller displays, rather than in the default 2-column */
186189
.cardContainer
@@ -192,34 +195,14 @@
192195
grid-gap: 1em;
193196
}
194197

195-
.backToOutputCategoriesMenu
198+
.backToFeatured
196199
{
197200
margin-top: 1em;
198201
}
199202

200-
#outputCategoriesMenu /* APPS | COLLECTIONS | REPORTS | GRAPHICS */
201-
{
202-
padding-top: 3.2em;
203-
margin-left: 1.1em;
204-
}
205-
206-
#outputCategoriesMenu a
203+
#featuredContainer
207204
{
208-
font-size: 0.7em;
209-
}
210-
211-
#featured
212-
{
213-
border-radius: 1em;
214-
padding: 0.7em;
215-
}
216-
}
217-
218-
@media (max-width:620px)
219-
{
220-
#outputCategoriesMenu /* APPS | COLLECTIONS | REPORTS | GRAPHICS */
221-
{
222-
padding-top: 6em;
205+
padding: 1em;
223206
}
224207
}
225208
</style>
@@ -228,14 +211,14 @@
228211
<body>
229212
<div class="container">
230213
<header>
231-
<nav aria-label="primary-navigation">
214+
<nav>
232215
<ul id="a11yNav">
233216
<li><a href="#main" class="themeBlockDark">Skip to main content</a></li>
234217
<li><a href="#footer" class="themeBlockDark">Skip to footer</a></li>
235218
</ul>
236219
<img src="https://www.trafforddatalab.io/assets/logo/trafforddatalab_logo.svg" alt="Trafford Data Lab" width="93" class="traffordDataLabLogo"/>
237-
<p id="mainMenu" class="hideContent">Main Menu</p>
238-
<ul class="navbar" labelled-by="mainMenu">
220+
<p class="hideContent">Main Menu</p>
221+
<ul id="mainMenu" class="navbar">
239222
<li><a href="charticles.html">Charticles</a></li>
240223
<li><a href="data.html">Data</a></li>
241224
<li><a href="learning.html">Learning</a></li>
@@ -247,49 +230,49 @@
247230
<main id="main">
248231
<h1>Trafford Data Lab</h1>
249232

250-
<p id="intro">Supporting decision-making in Trafford by revealing patterns in data through visualisation. On this page you can find outputs arranged into 4 categories, with a selection of these featured below. The category links take you directly to each section.</p>
233+
<p id="intro">Supporting decision-making in Trafford by revealing patterns in data through visualisation. We produce a variety of different types of output with a selection featured below. The headings link to more outputs of the same type and commonly used terms are in our <a href="glossary.html">glossary</a>.</p>
251234

252-
<nav id="outputCategoriesMenu" aria-label="in-page navigation for output categories">
253-
<a href="#apps">Apps</a>
254-
<a href="#collections">Collections</a>
255-
<a href="#reports">Reports</a>
256-
<a href="#graphics">Graphics</a>
257-
</nav>
258-
<section id="featured" aria-label="items will open in a new window" style="clear: both;">
259-
<div class="cardContainer">
260-
<div class="card labBorder labBorderfeatured themeBlockLight notification">
261-
<a href="https://www.trafforddatalab.io/explore/" target="_blank"><h3 class="cardHead themeLink">Explore</h3><img src="images/explore_thumbnail.png" class="thumbnail" alt=""/></a><br class="hideContent"/>
262-
<span class="cardBody">Discover the different geographic areas of Trafford and visualise all of our spatial datasets in one application. Use the geolocation facility (on supported devices with the user's permission) to see where you are and discover what is around you.</span>
263-
<span class="badge" aria-label="This is a featured app"><span aria-hidden="true"><span class="fa-solid fa-star"></span> app</span></span>
235+
<section id="featured" aria-label="app items will open in a new window">
236+
<h2>Featured:</h2>
237+
238+
<div id="featuredContainer" class="cardContainer themeBlockLight">
239+
<div class="card labBorder labBorderfeatured">
240+
<div class="themeBlockDark"><a href="#apps">more apps <span class="fa-solid fa-circle-chevron-right" aria-hidden="true"></span></a></div>
241+
<div>
242+
<a href="https://trafforddatalab.shinyapps.io/trafford_themes/" target="_blank"><h3 class="cardHead themeLink">Trafford Themes</h3><img src="images/trafford_themes_thumbnail.png" class="thumbnail" alt=""/></a><br class="hideContent"/>
243+
<span class="cardBody">Interactive dashboard visualising data and comparisons for a range of themed indicators. These themes relate to the work undertaken by Trafford Council, including those defined by the <a href="https://www.trafford.gov.uk/about-your-council/strategies-plans-and-policies/Corporate-Plan.aspx" target="_blank">corporate priorities</a>, as well as other areas, providing an overview of the borough.</span>
244+
</div>
264245
</div>
265246

266-
<div class="card labBorder labBorderfeatured themeBlockLight notification">
267-
<a href="census2021.html">
268-
<h3 class="cardHead themeLink">Census 2021</h3>
269-
<div class="thumbnail" style="width: 150px; height: 100px; background-color: #f9f9f9;">
270-
<span class="far fa-check-circle" style="margin-left: 26px; margin-top: 2px;"></span>
271-
</div>
272-
</a><br class="hideContent"/>
273-
<span class="cardBody">Visit our Census 2021 collections page for all our outputs relating to the census conducted by the <a href="https://www.ons.gov.uk/" target="_blank">Office for National Statistics</a> in 2021 and published between 2022-2023.</span>
274-
<span class="badge" aria-label="This is a featured collection"><span aria-hidden="true"><span class="fa-solid fa-star"></span> collection</span></span>
247+
<div class="card labBorder labBorderfeatured">
248+
<div class="themeBlockDark"><a href="#collections">more collections <span class="fa-solid fa-circle-chevron-right" aria-hidden="true"></span></a></div>
249+
<div>
250+
<a href="trafford_wards.html"><h3 class="cardHead themeLink">Trafford Wards</h3><img src="images/trafford_wards_collection_thumbnail.png" class="thumbnail" alt=""/></a><br class="hideContent"/>
251+
<span class="cardBody">All our outputs and resources relating to Trafford's wards which came into force in May 2023. Profiles are available for each ward which include data from the 2021 census.</span>
252+
</div>
275253
</div>
276254

277-
<div class="card labBorder labBorderfeatured themeBlockLight notification">
278-
<a href="https://www.trafforddatalab.io/analysis/demographics/population/populationEstimates.html"><h3 class="cardHead themeLink">Trafford's population estimates</h3><img src="images/population_estimates_trafford_thumbnail.png" class="thumbnail" alt=""/></a><br class="hideContent"/>
279-
<span class="cardBody">Analysis of Trafford's population change by age and components such as migration, deaths and births from mid-2022 to mid 2023.</span>
280-
<span class="badge" aria-label="This is a featured report"><span aria-hidden="true"><span class="fa-solid fa-star"></span> report</span></span>
255+
<div class="card labBorder labBorderfeatured">
256+
<div class="themeBlockDark"><a href="#reports">more reports <span class="fa-solid fa-circle-chevron-right" aria-hidden="true"></span></a></div>
257+
<div>
258+
<a href="https://www.trafforddatalab.io/analysis/demographics/population/populationEstimates.html"><h3 class="cardHead themeLink">Trafford's population estimates</h3><img src="images/population_estimates_trafford_thumbnail.png" class="thumbnail" alt=""/></a><br class="hideContent"/>
259+
<span class="cardBody">Analysis of Trafford's population change by age and components such as migration, deaths and births from mid-2022 to mid 2023.</span>
260+
</div>
281261
</div>
282262

283-
<div class="card labBorder labBorderfeatured themeBlockLight notification">
284-
<a href="accessible_graphics/trafford_wards_localities.html"><h3 class="cardHead themeLink">Trafford wards and localities</h3><img src="images/static_trafford_wards_localities_thumbnail.png" class="thumbnail" alt=""/></a><br class="hideContent"/>
285-
<span class="cardBody">Map of Trafford showing the boundaries of the 21 wards and 4 localities.</span>
286-
<span class="badge" aria-label="This is a featured graphic"><span aria-hidden="true"><span class="fa-solid fa-star"></span> graphic</span></span>
263+
<div class="card labBorder labBorderfeatured">
264+
<div class="themeBlockDark"><a href="#graphics">more graphics <span class="fa-solid fa-circle-chevron-right" aria-hidden="true"></span></a></div>
265+
<div>
266+
<a href="accessible_graphics/trafford_wards_localities.html"><h3 class="cardHead themeLink">Trafford wards and localities</h3><img src="images/static_trafford_wards_localities_thumbnail.png" class="thumbnail" alt=""/></a><br class="hideContent"/>
267+
<span class="cardBody">Map of Trafford showing the boundaries of the 21 wards and 4 localities.</span>
268+
</div>
287269
</div>
288270
</div>
289271
</section>
290272

291273
<p style="margin-top: 2em;">
292-
<span id="filterContainer" style="display: inline-block;"></span> Further outputs are available from the main menu and common terms used throughout the website are in our <a href="glossary.html">glossary</a>.
274+
<a href="charticles.html">Charticles</a>, <a href="data.html">Data</a> and <a href="learning.html">Learning</a> outputs are available from the <a id="menuHighlighter" href="#mainMenu">main menu</a>.
275+
The following sections contain interactive <a href="#apps">apps</a>, <a href="#collections">collections</a> of multiple outputs based on a theme, in-depth analysis <a href="#reports">reports</a> and static <a href="#graphics">graphics</a>. <span id="filterContainer" style="display: inline-block;"></span>
293276
</p>
294277

295278
<section id="apps" aria-label="items will open in a new window">
@@ -396,7 +379,7 @@ <h3 class="cardHead themeLink">Flood Risk Monitor</h3>
396379
</div>
397380
</section>
398381

399-
<a href="#outputCategoriesMenu" class="backToOutputCategoriesMenu"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
382+
<a href="#featured" class="backToFeatured"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
400383

401384
<section id="collections">
402385
<h2>Collections</h2>
@@ -438,7 +421,7 @@ <h3 class="cardHead themeLink">COVID-19</h3>
438421
</div>
439422
</section>
440423

441-
<a href="#outputCategoriesMenu" class="backToOutputCategoriesMenu"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
424+
<a href="#featured" class="backToFeatured"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
442425

443426
<section id="reports">
444427
<h2>Reports</h2>
@@ -485,7 +468,7 @@ <h2>Reports</h2>
485468
</div>
486469
</section>
487470

488-
<a href="#outputCategoriesMenu" class="backToOutputCategoriesMenu"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
471+
<a href="#featured" class="backToFeatured"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
489472

490473
<section id="graphics">
491474
<h2>Graphics</h2>
@@ -517,7 +500,7 @@ <h2>Graphics</h2>
517500
</div>
518501
</section>
519502

520-
<a href="#outputCategoriesMenu" class="backToOutputCategoriesMenu"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
503+
<a href="#featured" class="backToFeatured"><span aria-label="return to output category links" class="fa-solid fa-circle-up"></span><span class="hideContent">Top</span></a>
521504
</main>
522505

523506
<footer id="footer">
@@ -541,7 +524,7 @@ <h2>Graphics</h2>
541524
var contentFilter = new LabFilter({
542525
filterContainer: document.getElementById('filterContainer'), // where we want the filter input box creating
543526
filterClass: 'labBorder', // creates the focus outline on-hover
544-
filterLabel: 'You can filter the outputs in all categories to help find what you need: ',
527+
filterLabel: 'You can filter them: ',
545528
noMatchesClass: 'contentBlock themeBlockLight'
546529
})
547530

0 commit comments

Comments
 (0)