me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update theme colour on Win8 tiles

Browse Source
This commit is contained in:
Matthew Grove
2020-12-25 18:20:53 +00:00
parent acdc1cf1fd
commit c0c5f68f7f
8 changed files with 136 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/head.html
View File

@@ -17,7 +17,7 @@
<!-- tile icon & colour for Windows 8 --> <!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png"> <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
<meta name="msapplication-TileColor" content="#26174e"> <meta name="msapplication-TileColor" content="#c72a32">
<!-- page info --> <!-- page info -->
<title>{{ page.title }} | Matthew Grove</title> <title>{{ page.title }} | Matthew Grove</title>

166
_site/assets/css/main.css
View File

@@ -2079,7 +2079,7 @@ ul.icons {
opacity: 1; } opacity: 1; }
/* CTA */ /* CTA */
#cta { .cta {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
background-attachment: fixed; background-attachment: fixed;
background-image: linear-gradient(135deg, rgba(var(--background-colour-dark-rgb), 0.5), rgba(var(--background-colour-dark-rgb), 0.9)), url(../../images/cta01.jpg); background-image: linear-gradient(135deg, rgba(var(--background-colour-dark-rgb), 0.5), rgba(var(--background-colour-dark-rgb), 0.9)), url(../../images/cta01.jpg);
@@ -2089,142 +2089,142 @@ ul.icons {
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 1; } z-index: 1; }
#cta input, #cta select, #cta textarea { .cta input, .cta select, .cta textarea {
color: var(--button-text-colour); } color: var(--button-text-colour); }
#cta a { .cta a {
color: var(--button-text-colour); } color: var(--button-text-colour); }
#cta strong, #cta b { .cta strong, .cta b {
color: var(--button-text-colour); } color: var(--button-text-colour); }
#cta h1, #cta h2, #cta h3, #cta h4, #cta h5, #cta h6 { .cta h1, .cta h2, .cta h3, .cta h4, .cta h5, .cta h6 {
color: var(--button-text-colour); } color: var(--button-text-colour); }
#cta blockquote { .cta blockquote {
border-left-color: rgba(255, 255, 255, 0.25); } border-left-color: rgba(255, 255, 255, 0.25); }
#cta code { .cta code {
background: rgba(255, 255, 255, 0.075); background: rgba(255, 255, 255, 0.075);
border-color: rgba(255, 255, 255, 0.25); } border-color: rgba(255, 255, 255, 0.25); }
#cta hr { .cta hr {
border-bottom-color: rgba(255, 255, 255, 0.25); } border-bottom-color: rgba(255, 255, 255, 0.25); }
#cta input[type="submit"], .cta input[type="submit"],
#cta input[type="reset"], .cta input[type="reset"],
#cta input[type="button"], .cta input[type="button"],
#cta button, .cta button,
#cta .button { .cta .button {
background-color: transparent; background-color: transparent;
box-shadow: inset 0 0 0 1px var(--button-text-colour); box-shadow: inset 0 0 0 1px var(--button-text-colour);
color: var(--button-text-colour) !important; } color: var(--button-text-colour) !important; }
#cta input[type="submit"]:hover, .cta input[type="submit"]:hover,
#cta input[type="reset"]:hover, .cta input[type="reset"]:hover,
#cta input[type="button"]:hover, .cta input[type="button"]:hover,
#cta button:hover, .cta button:hover,
#cta .button:hover { .cta .button:hover {
background-color: rgba(255, 255, 255, 0.1); } background-color: rgba(255, 255, 255, 0.1); }
#cta input[type="submit"]:hover:active, .cta input[type="submit"]:hover:active,
#cta input[type="reset"]:hover:active, .cta input[type="reset"]:hover:active,
#cta input[type="button"]:hover:active, .cta input[type="button"]:hover:active,
#cta button:hover:active, .cta button:hover:active,
#cta .button:hover:active { .cta .button:hover:active {
background-color: rgba(255, 255, 255, 0.25); } background-color: rgba(255, 255, 255, 0.25); }
#cta input[type="submit"].primary, .cta input[type="submit"].primary,
#cta input[type="reset"].primary, .cta input[type="reset"].primary,
#cta input[type="button"].primary, .cta input[type="button"].primary,
#cta button.primary, .cta button.primary,
#cta .button.primary { .cta .button.primary {
box-shadow: none; box-shadow: none;
background-color: var(--button-text-colour); background-color: var(--button-text-colour);
color: var(--secondary-colour) !important; } color: var(--secondary-colour) !important; }
#cta input[type="submit"].primary:hover, .cta input[type="submit"].primary:hover,
#cta input[type="reset"].primary:hover, .cta input[type="reset"].primary:hover,
#cta input[type="button"].primary:hover, .cta input[type="button"].primary:hover,
#cta button.primary:hover, .cta button.primary:hover,
#cta .button.primary:hover { .cta .button.primary:hover {
background-color: rgba(255, 255, 255, 0.875); background-color: rgba(255, 255, 255, 0.875);
box-shadow: none; } box-shadow: none; }
#cta input[type="submit"].primary:hover:active, .cta input[type="submit"].primary:hover:active,
#cta input[type="reset"].primary:hover:active, .cta input[type="reset"].primary:hover:active,
#cta input[type="button"].primary:hover:active, .cta input[type="button"].primary:hover:active,
#cta button.primary:hover:active, .cta button.primary:hover:active,
#cta .button.primary:hover:active { .cta .button.primary:hover:active {
background-color: rgba(255, 255, 255, 0.5); } background-color: rgba(255, 255, 255, 0.5); }
#cta label { .cta label {
color: var(--button-text-colour); } color: var(--button-text-colour); }
#cta input[type="text"], .cta input[type="text"],
#cta input[type="number"], .cta input[type="number"],
#cta input[type="password"], .cta input[type="password"],
#cta input[type="email"], .cta input[type="email"],
#cta input[type="tel"], .cta input[type="tel"],
#cta input[type="search"], .cta input[type="search"],
#cta input[type="url"], .cta input[type="url"],
#cta select, .cta select,
#cta textarea { .cta textarea {
background-color: rgba(255, 255, 255, 0.075); background-color: rgba(255, 255, 255, 0.075);
border-color: rgba(255, 255, 255, 0.25); } border-color: rgba(255, 255, 255, 0.25); }
#cta input[type="text"]:focus, .cta input[type="text"]:focus,
#cta input[type="number"]:focus, .cta input[type="number"]:focus,
#cta input[type="password"]:focus, .cta input[type="password"]:focus,
#cta input[type="email"]:focus, .cta input[type="email"]:focus,
#cta input[type="tel"]:focus, .cta input[type="tel"]:focus,
#cta input[type="search"]:focus, .cta input[type="search"]:focus,
#cta input[type="url"]:focus, .cta input[type="url"]:focus,
#cta select:focus, .cta select:focus,
#cta textarea:focus { .cta textarea:focus {
border-color: var(--button-text-colour); border-color: var(--button-text-colour);
box-shadow: 0 0 0 1px var(--button-text-colour); } box-shadow: 0 0 0 1px var(--button-text-colour); }
#cta select { .cta select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.25)' /%3E%3C/svg%3E"); } background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.25)' /%3E%3C/svg%3E"); }
#cta select option { .cta select option {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
background-color: var(--secondary-colour); } background-color: var(--secondary-colour); }
#cta input[type="checkbox"] + label, .cta input[type="checkbox"] + label,
#cta input[type="radio"] + label { .cta input[type="radio"] + label {
color: rgba(255, 255, 255, 0.75); } color: rgba(255, 255, 255, 0.75); }
#cta input[type="checkbox"] + label:before, .cta input[type="checkbox"] + label:before,
#cta input[type="radio"] + label:before { .cta input[type="radio"] + label:before {
background: rgba(255, 255, 255, 0.075); background: rgba(255, 255, 255, 0.075);
border-color: rgba(255, 255, 255, 0.25); } border-color: rgba(255, 255, 255, 0.25); }
#cta input[type="checkbox"]:checked + label:before, .cta input[type="checkbox"]:checked + label:before,
#cta input[type="radio"]:checked + label:before { .cta input[type="radio"]:checked + label:before {
background-color: var(--button-text-colour); background-color: var(--button-text-colour);
border-color: var(--button-text-colour); border-color: var(--button-text-colour);
color: var(--secondary-colour); } color: var(--secondary-colour); }
#cta input[type="checkbox"]:focus + label:before, .cta input[type="checkbox"]:focus + label:before,
#cta input[type="radio"]:focus + label:before { .cta input[type="radio"]:focus + label:before {
border-color: var(--button-text-colour); border-color: var(--button-text-colour);
box-shadow: 0 0 0 1px var(--button-text-colour); } box-shadow: 0 0 0 1px var(--button-text-colour); }
#cta ::-webkit-input-placeholder { .cta ::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.4) !important; } color: rgba(255, 255, 255, 0.4) !important; }
#cta :-moz-placeholder { .cta :-moz-placeholder {
color: rgba(255, 255, 255, 0.4) !important; } color: rgba(255, 255, 255, 0.4) !important; }
#cta ::-moz-placeholder { .cta ::-moz-placeholder {
color: rgba(255, 255, 255, 0.4) !important; } color: rgba(255, 255, 255, 0.4) !important; }
#cta :-ms-input-placeholder { .cta :-ms-input-placeholder {
color: rgba(255, 255, 255, 0.4) !important; } color: rgba(255, 255, 255, 0.4) !important; }
#cta ul.alt li { .cta ul.alt li {
border-top-color: rgba(255, 255, 255, 0.25); } border-top-color: rgba(255, 255, 255, 0.25); }
#cta table tbody tr { .cta table tbody tr {
border-color: rgba(255, 255, 255, 0.25); } border-color: rgba(255, 255, 255, 0.25); }
#cta table tbody tr:nth-child(2n + 1) { .cta table tbody tr:nth-child(2n + 1) {
background-color: rgba(255, 255, 255, 0.075); } background-color: rgba(255, 255, 255, 0.075); }
#cta table th { .cta table th {
color: var(--button-text-colour); } color: var(--button-text-colour); }
#cta table thead { .cta table thead {
border-bottom-color: rgba(255, 255, 255, 0.25); } border-bottom-color: rgba(255, 255, 255, 0.25); }
#cta table tfoot { .cta table tfoot {
border-top-color: rgba(255, 255, 255, 0.25); } border-top-color: rgba(255, 255, 255, 0.25); }
#cta table.alt tbody tr td { .cta table.alt tbody tr td {
border-color: rgba(255, 255, 255, 0.25); } border-color: rgba(255, 255, 255, 0.25); }
#cta .highlights .content { .cta .highlights .content {
background: var(--secondary-colour); background: var(--secondary-colour);
box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); } box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); }
#cta .testimonials .content { .cta .testimonials .content {
background: var(--secondary-colour); background: var(--secondary-colour);
box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); } box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 0.025); }
#cta .testimonials .content .credit strong { .cta .testimonials .content .credit strong {
color: var(--secondary-colour); } color: var(--secondary-colour); }
#cta .inner { .cta .inner {
position: relative; position: relative;
z-index: 3; } z-index: 3; }
@media screen and (max-width: 980px) { @media screen and (max-width: 980px) {
#cta { .cta {
background-attachment: scroll; } } background-attachment: scroll; } }
/* Footer */ /* Footer */

6
_site/comsci/index.html
View File

@@ -20,11 +20,11 @@
<!-- tile icon & colour for Windows 8 --> <!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png"> <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
<meta name="msapplication-TileColor" content="#26174e"> <meta name="msapplication-TileColor" content="#c72a32">
<!-- page info --> <!-- page info -->
<title>Computer Science | Matthew Grove</title> <title>Computer Science | Matthew Grove</title>
<meta name="description" content="Some helpful tips for studying Computer Science. | by Matthew Grove"> <meta name="description" content="Some helpful tips for studying Computer Science.">
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<!-- stylesheets --> <!-- stylesheets -->
@@ -36,7 +36,7 @@
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'UA-124505000-1'); gtag('config', 'UA-124505000-2');
</script> </script>
</head> </head>

6
_site/index.html
View File

@@ -20,11 +20,11 @@
<!-- tile icon & colour for Windows 8 --> <!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png"> <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
<meta name="msapplication-TileColor" content="#26174e"> <meta name="msapplication-TileColor" content="#c72a32">
<!-- page info --> <!-- page info -->
<title>Demo Site | Matthew Grove</title> <title>Demo Site | Matthew Grove</title>
<meta name="description" content="My demo site - where I host small coding projects and demonstrations. | by Matthew Grove"> <meta name="description" content="My demo site - where I host small coding projects and demonstrations.">
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<!-- stylesheets --> <!-- stylesheets -->
@@ -36,7 +36,7 @@
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'UA-124505000-1'); gtag('config', 'UA-124505000-2');
</script> </script>
</head> </head>

6
_site/luhn-algorithm/index.html
View File

@@ -20,11 +20,11 @@
<!-- tile icon & colour for Windows 8 --> <!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png"> <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
<meta name="msapplication-TileColor" content="#26174e"> <meta name="msapplication-TileColor" content="#c72a32">
<!-- page info --> <!-- page info -->
<title>Luhn Algorithm | Matthew Grove</title> <title>Luhn Algorithm | Matthew Grove</title>
<meta name="description" content="A number validator with the Luhn algorithm. | by Matthew Grove"> <meta name="description" content="A number validator with the Luhn algorithm.">
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<!-- stylesheets --> <!-- stylesheets -->
@@ -36,7 +36,7 @@
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'UA-124505000-1'); gtag('config', 'UA-124505000-2');
</script> </script>
</head> </head>

8
_site/site-theme/index.html
View File

@@ -20,11 +20,11 @@
<!-- tile icon & colour for Windows 8 --> <!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png"> <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
<meta name="msapplication-TileColor" content="#26174e"> <meta name="msapplication-TileColor" content="#c72a32">
<!-- page info --> <!-- page info -->
<title>Site Theme | Matthew Grove</title> <title>Site Theme | Matthew Grove</title>
<meta name="description" content="A list of all templated elements available in this site's theme. | by Matthew Grove"> <meta name="description" content="A list of all templated elements available in this site's theme.">
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<!-- stylesheets --> <!-- stylesheets -->
@@ -36,7 +36,7 @@
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'UA-124505000-1'); gtag('config', 'UA-124505000-2');
</script> </script>
</head> </head>
@@ -531,7 +531,7 @@ print 'It took ' + i + ' iterations to sort the deck.';
</div> </div>
<!-- CTA --> <!-- CTA -->
<section id="cta" class="wrapper"> <section class="cta wrapper">
<div class="inner"> <div class="inner">
<h2>Example Fancy Header</h2> <h2>Example Fancy Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

31
_site/sitemap.xml
View File

@@ -1,47 +1,56 @@
<?xml version="1.0" encoding="URF-8"?> <?xml version="1.0" encoding="URF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>/luhn-algorithm/</loc> <loc>/luhn-algorithm/</loc>
<lastmod>2020-12-13</lastmod> <lastmod>2020-12-25</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>/site-theme/</loc> <loc>/site-theme/</loc>
<lastmod>2020-12-13</lastmod> <lastmod>2020-12-25</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>/young-reporter/</loc> <loc>/young-reporter/</loc>
<lastmod>2020-12-13</lastmod> <lastmod>2020-12-25</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>/</loc> <loc>/</loc>
<lastmod>2020-12-13</lastmod> <lastmod>2020-12-25</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url> <url>
<loc>/comsci/</loc> <loc>/comsci/</loc>
<lastmod>2020-12-13</lastmod> <lastmod>2020-12-25</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>0.5</priority> <priority>0.5</priority>
</url> </url>
<url>
<loc>/sitemap.xml</loc>
<lastmod>2020-12-13</lastmod>
<changefreq>daily</changefreq>
<priority>0.5</priority>
</url>

23
_site/young-reporter/index.html
View File

@@ -20,11 +20,11 @@
<!-- tile icon & colour for Windows 8 --> <!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png"> <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
<meta name="msapplication-TileColor" content="#26174e"> <meta name="msapplication-TileColor" content="#c72a32">
<!-- page info --> <!-- page info -->
<title>BBC Young Reporter Article Generator | Matthew Grove</title> <title>BBC Young Reporter Article Generator | Matthew Grove</title>
<meta name="description" content="A tool to create markdown files from news articles and their metadata for uploading to the Reading School BBC Young Reporter website. | by Matthew Grove"> <meta name="description" content="A tool to create markdown files from news articles and their metadata for uploading to the Reading School BBC Young Reporter website.">
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<!-- stylesheets --> <!-- stylesheets -->
@@ -36,7 +36,7 @@
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'UA-124505000-1'); gtag('config', 'UA-124505000-2');
</script> </script>
</head> </head>
@@ -105,7 +105,22 @@
<section id="main" class="wrapper"> <section id="main" class="wrapper">
<div class="inner"> <div class="inner">
<div class="content"> <div class="content">
<h3 id="instructions">Instructions</h3> <h3 id="prerequisites">Prerequisites</h3>
<p>Before you begin, ensure you have, as a minimum:</p>
<ul>
<li>a headline,</li>
<li>the name(s) of the author(s),</li>
<li>a header image, which will be shown behind the headline (so the content of this image can’t be vital, like a graph),</li>
<li>a caption for your header image,</li>
<li>the copyright attribution for your header image,</li>
<li>a brief description (one or two short sentences) of your article, and</li>
<li>your article content.</li>
</ul>
<hr />
<h3 id="instructions">Instructions</h3>
<p>Fill in the fields below, and then click the <em>download</em> button to generate a file to be uploaded to Reading School’s BBC Young Reporter website.</p> <p>Fill in the fields below, and then click the <em>download</em> button to generate a file to be uploaded to Reading School’s BBC Young Reporter website.</p>