me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update branding & home page

Browse Source 
Add BBC Young Reporter branding & update positioning of articles on home 
page
This commit is contained in:
Matthew Grove
2019-03-04 21:25:35 +00:00
parent 620aadcc6e
commit 3b67b7a5d7
34 changed files with 1897 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
_includes/footer.html
View File

@@ -1,3 +1,4 @@
<footer>
&copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a>
<img>
<span >&copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a></span>
</footer>

1
_includes/navbar.html
View File

@@ -3,6 +3,7 @@
<nav class="mdc-list">
<div style="margin: 15px;text-align:center;">
<img src="/images/page-logo.png" style="width: 90%;"/>
<img src="/images/young-reporter-logo.png" style="width: 90%;padding-top:15px;"/>
</div>
<a class="mdc-list-item" href="https://reading-school.co.uk" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">school</i>

2
_posts/_template/2019-01-01-video-article-name.md
View File

@@ -2,7 +2,7 @@
title: Title
date: 2019-01-01 7:01
authors: Name
video-caption: A caption for the cover image
video-caption: A caption for the video
video-id:
layout: video-article
categories: articles

117
_site/404.html Normal file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<link rel="icon" href="/images/favicon.ico">
<!-- add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="/images/favicon.png">
<!-- add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Page Not Found | Reading School">
<link rel="apple-touch-icon-precomposed" href="/images/favicon.png">
<!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="/images/favicon.png">
<meta name="msapplication-TileColor" content="#d84315">
<title>Page Not Found | Reading School</title>
<meta name="description" content="">
<!-- import Roboto (font) -->
<link href="/css/roboto.css" rel="stylesheet">
<!-- import jQuery -->
<script src="/js/jquery.min.js"></script>
<!-- import jQuery timeago -->
<script src="/js/jquery.timeago.min.js"></script>
<!-- import cookie JavaScript -->
<script src="/js/cookies.js"></script>
<!-- import Material Design components & icons -->
<link href="/css/material-components-web.min.css" rel="stylesheet">
<link href="/css/material_icons.css" rel="stylesheet">
<script src="/js/material-components-web.min.js"></script>
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
</head>
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
<p>Just to let you know, we use cookies on our site.</p>
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
</div>
<!-- content of navbar is included via jQuery -->
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__content">
<nav class="mdc-list">
<div style="margin: 15px;text-align:center;">
<img src="/images/page-logo.png" style="width: 90%;"/>
<img src="/images/young-reporter-logo.png" style="width: 90%;padding-top:15px;"/>
</div>
<a class="mdc-list-item" href="https://reading-school.co.uk" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">school</i>
<span class="mdc-list-item__text">Reading School Website</span>
</a>
<a class="mdc-list-item" href="/" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
<span class="mdc-list-item__text">Home Page</span>
</a>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--short" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
<img src="/images/logo-white.png" alt="Reading School Logo" style="height:100%;"/>
</a>
</section>
</div>
</header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<h2 class="mdc-typography--headline2">Page Not Found</h2>
<p>Sorry, but we can’t find that page on <a href="/">youngreporter.matthew-grove.ml</a>.
Click <a href="/">here</a> to see the articles Reading School’s year 8 students have written during this year’s BBC Young Reporter.</p>
</div>
</main>
<footer>
<img>
<span >&copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a></span>
</footer>
</div>
</body>
<style>
.mdc-top-app-bar--short-fixed-adjust {
text-align: center;
}
</style>
</html>

1
_site/CNAME Normal file
View File

@@ -0,0 +1 @@
youngreporter.matthew-grove.ml

2
_site/README.md Normal file
View File

@@ -0,0 +1,2 @@
# BBC School Report | Reading School
This is Reading School's BBC School Report website. If you have any problems with this website, please [email me at matthew@grove.gq](mailto:matthew@grove.gq), or [create an issue on GitHub](https://github.com/reading-school-code/bbc-school-report/issues/new).

3
_site/config.yml Normal file
View File

@@ -0,0 +1,3 @@
name: BBC Young Reporter | Reading School
title: BBC Young Reporter | Reading School
permalink: /:categories/:title/

33
_site/css/article-page.css Normal file
View File

@@ -0,0 +1,33 @@
.mdc-typography--headline2, .mdc-typography--subtitle1 {
text-transform: capitalize;
}
.mdc-typography--headline2, .mdc-typography--subtitle1, figure {
margin: 5px;
}
.mdc-typography--caption-text {
font-style: italic;
}
iframe {
width: 100%;
height: calc(68.8vw / 16 * 9);
}
@media screen and (max-width: 1550px) {
iframe {
width: 100%;
height: calc(70vw / 16 * 9 - 6px);
}
}
@media screen and (max-width: 600px) {
iframe {
height: calc(90vw / 16 * 9 - 5px);
}
}
@media screen and (max-width: 600px) {
iframe {
height: calc(93.5vw / 16 * 9);
}
}

113
_site/css/global.css Normal file
View File

@@ -0,0 +1,113 @@
/* change theme */
:root {
--mdc-theme-primary: #273967;
--mdc-theme-secondary: #ef6c00;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
color: var(--mdc-theme-primary);
}
body {
font-family: 'Roboto', sans-serif;
display: flex;
margin: 0;
}
a {
color: var(--mdc-theme-secondary);
}
.mdc-list-group h3 {
margin: 20px 16px auto 16px;
font-weight: normal;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
}
.main-content {
margin: 15px;
overflow: auto;
}
.app-bar {
position: absolute;
}
footer {
margin: 15px;
overflow: auto;
}
/* edit footer depending on screen size - edits alignment & changes switches between center- and left- aligned BBC Young Reporter logos */
footer span {
position: relative;
top: 19px;
}
footer img {
display: block;
width: 125px;
float: right;
content: url("/images/young-reporter-logo.png");
vertical-align: middle;
}
@media screen and (max-width: 800px) {
footer {
text-align: center;
}
footer img {
float: none;
margin: auto;
content: url("/images/young-reporter-logo-centered.png");
width: 200px;
padding-bottom: 10px;
}
footer span {
top: 0;
}
}
/* add side margins */
.main-content, footer {
margin-left: 15%;
margin-right: 15%;
}
@media screen and (max-width: 600px) {
.main-content, footer {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 500px) {
.main-content, footer {
margin-left: 2%;
margin-right: 2%;
}
}
/* for cookie notice */
#cookies {
display: none;
width: 100%;
position: fixed;
background: var(--mdc-theme-primary);
color: var(--mdc-theme-background);
text-align: center;
bottom: -100px;
left: 0;
z-index: 1;
}
#cookies p {
margin: 10px;
}
#cookies p a {
color: var(--mdc-theme-secondary);
text-decoration: none;
}

8
_site/css/material-components-web.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

23
_site/css/material_icons.css Normal file
View File

@@ -0,0 +1,23 @@
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

116
_site/css/mdc-card-list.css Normal file
View File

@@ -0,0 +1,116 @@
/* make article cards look nice by altering margins */
.mdc-card {
margin: 2px 2px 10px 2px;
}
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0;
}
/* automatically display articles on either side of the page, alternating */
.main-content .mdc-card {
float: left;
clear: left;
width: 49%;
}
.main-content .mdc-card:nth-of-type(even) {
float: right;
clear: right;
}
/* make first article full-width */
.main-content .mdc-card:first-of-type {
float: none;
clear: both;
width: auto;
}
/* makes last article full-width if it is on its own in a row - i.e. if there is an even number of articles in total */
.main-content .mdc-card:nth-of-type(odd):nth-last-of-type(2) ~ .mdc-card:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 1 article present */
.main-content .mdc-card:first-of-type:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 2 articles present & small screen is detected */
@media screen and (max-width: 1000px) {
.main-content .mdc-card:nth-child(1):nth-last-of-type(2), .main-content .mdc-card:nth-of-type(2):last-of-type {
float: none;
clear: both;
width: auto;
}
}
/* styling for when 3 articles present */
.main-content .mdc-card:first-of-type:nth-last-of-type(3) {
float: none;
clear: both;
width: auto;
}
.main-content .mdc-card:nth-of-type(3):last-of-type {
float: right;
clear: right;
}
.main-content .mdc-card:nth-of-type(2):nth-last-of-type(2) {
float: left;
clear: left;
}
/* for scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
text-align: center;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #273967;
display: none;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button img {
position: relative;
top: 7px;
width: 35px;
height: auto;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56;
}
.top-scroll-button:hover img {
top: 3px;
}

56
_site/css/roboto.css Normal file
View File

@@ -0,0 +1,56 @@
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

BIN
_site/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
_site/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
_site/images/logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
_site/images/page-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

BIN
_site/images/up-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
_site/images/young-reporter-logo-centered.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
_site/images/young-reporter-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

123
_site/index.html Normal file
View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<link rel="icon" href="/images/favicon.ico">
<!-- add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="/images/favicon.png">
<!-- add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="BBC Young Reporter | Reading School">
<link rel="apple-touch-icon-precomposed" href="/images/favicon.png">
<!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="/images/favicon.png">
<meta name="msapplication-TileColor" content="#d84315">
<title>BBC Young Reporter | Reading School</title>
<meta name="description" content="">
<!-- import Roboto (font) -->
<link href="/css/roboto.css" rel="stylesheet">
<!-- import jQuery -->
<script src="/js/jquery.min.js"></script>
<!-- import jQuery timeago -->
<script src="/js/jquery.timeago.min.js"></script>
<!-- import cookie JavaScript -->
<script src="/js/cookies.js"></script>
<!-- import Material Design components & icons -->
<link href="/css/material-components-web.min.css" rel="stylesheet">
<link href="/css/material_icons.css" rel="stylesheet">
<script src="/js/material-components-web.min.js"></script>
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
</head>
<link href="/css/mdc-card-list.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
<p>Just to let you know, we use cookies on our site.</p>
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
</div>
<!-- content of navbar is included via jQuery -->
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__content">
<nav class="mdc-list">
<div style="margin: 15px;text-align:center;">
<img src="/images/page-logo.png" style="width: 90%;"/>
<img src="/images/young-reporter-logo.png" style="width: 90%;padding-top:15px;"/>
</div>
<a class="mdc-list-item" href="https://reading-school.co.uk" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">school</i>
<span class="mdc-list-item__text">Reading School Website</span>
</a>
<a class="mdc-list-item" href="/" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
<span class="mdc-list-item__text">Home Page</span>
</a>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--short" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
<img src="/images/logo-white.png" alt="Reading School Logo" style="height:100%;"/>
</a>
</section>
</div>
</header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<center>We haven't got any articles for you yet! Come back during this year's BBC Young Reporter day to see what Reading School's year 8 students have produced!</center>
<style>
center {
margin: 25vh auto 25vh auto;
}
</style>
</div>
</main>
<footer>
<img>
<span >&copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a></span>
</footer>
<a href="javascript:scrollUp()" class="top-scroll-button">
<img alt="Scroll to top" src="/images/up-arrow.png">
</a>
</div>
</body>
</html>

165
_site/js/cookies.js Normal file
View File

@@ -0,0 +1,165 @@
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;(function (factory) {
var registeredInModuleLoader = false;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModuleLoader = true;
}
if (typeof exports === 'object') {
module.exports = factory();
registeredInModuleLoader = true;
}
if (!registeredInModuleLoader) {
var OldCookies = window.Cookies;
var api = window.Cookies = factory();
api.noConflict = function () {
window.Cookies = OldCookies;
return api;
};
}
}(function () {
function extend () {
var i = 0;
var result = {};
for (; i < arguments.length; i++) {
var attributes = arguments[ i ];
for (var key in attributes) {
result[key] = attributes[key];
}
}
return result;
}
function init (converter) {
function api (key, value, attributes) {
var result;
if (typeof document === 'undefined') {
return;
}
// Write
if (arguments.length > 1) {
attributes = extend({
path: '/'
}, api.defaults, attributes);
if (typeof attributes.expires === 'number') {
var expires = new Date();
expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
attributes.expires = expires;
}
// We're using "expires" because "max-age" is not supported by IE
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
try {
result = JSON.stringify(value);
if (/^[\{\[]/.test(result)) {
value = result;
}
} catch (e) {}
if (!converter.write) {
value = encodeURIComponent(String(value))
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
} else {
value = converter.write(value, key);
}
key = encodeURIComponent(String(key));
key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
key = key.replace(/[\(\)]/g, escape);
var stringifiedAttributes = '';
for (var attributeName in attributes) {
if (!attributes[attributeName]) {
continue;
}
stringifiedAttributes += '; ' + attributeName;
if (attributes[attributeName] === true) {
continue;
}
stringifiedAttributes += '=' + attributes[attributeName];
}
return (document.cookie = key + '=' + value + stringifiedAttributes);
}
// Read
if (!key) {
result = {};
}
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling "get()"
var cookies = document.cookie ? document.cookie.split('; ') : [];
var rdecode = /(%[0-9A-Z]{2})+/g;
var i = 0;
for (; i < cookies.length; i++) {
var parts = cookies[i].split('=');
var cookie = parts.slice(1).join('=');
if (!this.json && cookie.charAt(0) === '"') {
cookie = cookie.slice(1, -1);
}
try {
var name = parts[0].replace(rdecode, decodeURIComponent);
cookie = converter.read ?
converter.read(cookie, name) : converter(cookie, name) ||
cookie.replace(rdecode, decodeURIComponent);
if (this.json) {
try {
cookie = JSON.parse(cookie);
} catch (e) {}
}
if (key === name) {
result = cookie;
break;
}
if (!key) {
result[name] = cookie;
}
} catch (e) {}
}
return result;
}
api.set = api;
api.get = function (key) {
return api.call(api, key);
};
api.getJSON = function () {
return api.apply({
json: true
}, [].slice.call(arguments));
};
api.defaults = {};
api.remove = function (key, attributes) {
api(key, '', extend(attributes, {
expires: -1
}));
};
api.withConverter = init;
return api;
}
return init(function () {});
}));

45
_site/js/global.js Normal file
View File

@@ -0,0 +1,45 @@
$(document).ready(function(){
// initiate MDC drawer
const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector(".mdc-drawer"));
// initiate MDC top app bar
const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
mdc_top_app_bar.listen("MDCTopAppBar:nav", () => {
drawer.open = !drawer.open;
});
// initiate MDC items
mdc.autoInit();
// get current URL with no forward slash at the end and no domain
var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
if (drawer_item_link_query_selector.endsWith("index.html")) {
drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 10);
}
if (drawer_item_link_query_selector.endsWith("/")) {
drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
}
// give 'seleted' styling to correct item on navbar
$(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
$(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
$(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
$(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
// initiate timeago elements (displays how long ago an article was written)
jQuery("time.timeago").timeago();
// include cookie notice
if(Cookies.get("reading-school-bbc-young-reporter-cookies-accepted") != "true") {
$("#cookies").show();
$("#cookies").animate({bottom: "0px"}, 1000);
$("footer").animate({marginBottom: "87px"}, 1000);
$("#close-cookies").click(function(){
event.preventDefault();
$("#cookies").animate({bottom: "-100px"}, 1000);
setTimeout(function(){$("#cookies").hide()},1000);
$("footer").animate({marginBottom: "15px"}, 1000);
Cookies.set("reading-school-bbc-young-reporter-cookies-accepted", "true", {expires: 30});
});
}
});

2
_site/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
_site/js/jquery.timeago.min.js vendored Normal file
View File

@@ -0,0 +1 @@
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof module&&"object"==typeof module.exports?t(require("jquery")):t(jQuery)}(function(t){t.timeago=function(e){return e instanceof Date?n(e):n("string"==typeof e?t.timeago.parse(e):"number"==typeof e?new Date(e):t.timeago.datetime(e))};var e=t.timeago;t.extend(t.timeago,{settings:{refreshMillis:6e4,allowPast:!0,allowFuture:!1,localeTitle:!1,cutoff:0,autoDispose:!0,strings:{prefixAgo:null,prefixFromNow:null,suffixAgo:"ago",suffixFromNow:"from now",inPast:"any moment now",seconds:"less than a minute",minute:"about a minute",minutes:"%d minutes",hour:"about an hour",hours:"about %d hours",day:"a day",days:"%d days",month:"about a month",months:"%d months",year:"about a year",years:"%d years",wordSeparator:" ",numbers:[]}},inWords:function(e){if(!this.settings.allowPast&&!this.settings.allowFuture)throw"timeago allowPast and allowFuture settings can not both be set to false.";var i=this.settings.strings,a=i.prefixAgo,n=i.suffixAgo;if(this.settings.allowFuture&&e<0&&(a=i.prefixFromNow,n=i.suffixFromNow),!this.settings.allowPast&&e>=0)return this.settings.strings.inPast;var r=Math.abs(e)/1e3,o=r/60,s=o/60,u=s/24,m=u/365;function l(a,n){var r=t.isFunction(a)?a(n,e):a,o=i.numbers&&i.numbers[n]||n;return r.replace(/%d/i,o)}var d=r<45&&l(i.seconds,Math.round(r))||r<90&&l(i.minute,1)||o<45&&l(i.minutes,Math.round(o))||o<90&&l(i.hour,1)||s<24&&l(i.hours,Math.round(s))||s<42&&l(i.day,1)||u<30&&l(i.days,Math.round(u))||u<45&&l(i.month,1)||u<365&&l(i.months,Math.round(u/30))||m<1.5&&l(i.year,1)||l(i.years,Math.round(m)),h=i.wordSeparator||"";return void 0===i.wordSeparator&&(h=" "),t.trim([a,d,n].join(h))},parse:function(e){var i=t.trim(e);return i=(i=(i=(i=(i=i.replace(/\.\d+/,"")).replace(/-/,"/").replace(/-/,"/")).replace(/T/," ").replace(/Z/," UTC")).replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2")).replace(/([\+\-]\d\d)$/," $100"),new Date(i)},datetime:function(i){var a=e.isTime(i)?t(i).attr("datetime"):t(i).attr("title");return e.parse(a)},isTime:function(e){return"time"===t(e).get(0).tagName.toLowerCase()}});var i={init:function(){i.dispose.call(this);var n=t.proxy(a,this);n();var r=e.settings;r.refreshMillis>0&&(this._timeagoInterval=setInterval(n,r.refreshMillis))},update:function(i){var n=i instanceof Date?i:e.parse(i);t(this).data("timeago",{datetime:n}),e.settings.localeTitle&&t(this).attr("title",n.toLocaleString()),a.apply(this)},updateFromDOM:function(){t(this).data("timeago",{datetime:e.parse(e.isTime(this)?t(this).attr("datetime"):t(this).attr("title"))}),a.apply(this)},dispose:function(){this._timeagoInterval&&(window.clearInterval(this._timeagoInterval),this._timeagoInterval=null)}};function a(){var i=e.settings;if(i.autoDispose&&!t.contains(document.documentElement,this))return t(this).timeago("dispose"),this;var a=function(i){if(!(i=t(i)).data("timeago")){i.data("timeago",{datetime:e.datetime(i)});var a=t.trim(i.text());e.settings.localeTitle?i.attr("title",i.data("timeago").datetime.toLocaleString()):!(a.length>0)||e.isTime(i)&&i.attr("title")||i.attr("title",a)}return i.data("timeago")}(this);return isNaN(a.datetime)||(0===i.cutoff||Math.abs(r(a.datetime))<i.cutoff?t(this).text(n(a.datetime)):t(this).attr("title").length>0&&t(this).text(t(this).attr("title"))),this}function n(t){return e.inWords(r(t))}function r(t){return(new Date).getTime()-t.getTime()}t.fn.timeago=function(t,e){var a=t?i[t]:i.init;if(!a)throw new Error("Unknown function name '"+t+"' for timeago");return this.each(function(){a.call(this,e)}),this},document.createElement("abbr"),document.createElement("time")});

909
_site/js/material-components-web.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
_site/js/top-scroll-button.js Normal file
View File

@@ -0,0 +1,13 @@
$(window).scroll(function() {
if ($(this).scrollTop() >= 55) {
$('.top-scroll-button').fadeIn(500);
}
if ($(this).scrollTop() < 55) {
$('.top-scroll-button').fadeOut(500);
}
});
function scrollUp() {
$('body, html, .mdc-drawer-app-content, #main-content, .mdc-top-app-bar--short-fixed-adjust').animate({
scrollTop: 0
}, 500);
}

12
_site/remove.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<script src="/vle/bbcnews/assets/cookies.js"></script>
<script>
Cookies.remove("reading-school-bbc-young-reporter-cookies-accepted");
</script>
</head>
<body>
Our cookie has been removed.
</body>
</html>

32
_site/sitemap.xml Normal file
View File

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>/404.html</loc>
<lastmod>2019-03-04</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/</loc>
<lastmod>2019-03-04</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
</urlset>

24
css/article-page.css
View File

@@ -7,3 +7,27 @@
.mdc-typography--caption-text {
font-style: italic;
}
iframe {
width: 100%;
height: calc(68.8vw / 16 * 9);
}
@media screen and (max-width: 1550px) {
iframe {
width: 100%;
height: calc(70vw / 16 * 9 - 6px);
}
}
@media screen and (max-width: 600px) {
iframe {
height: calc(90vw / 16 * 9 - 5px);
}
}
@media screen and (max-width: 600px) {
iframe {
height: calc(93.5vw / 16 * 9);
}
}

37
css/global.css
View File

@@ -39,21 +39,52 @@ a {
footer {
margin: 15px;
overflow: auto;
}
/* edit footer depending on screen size - edits alignment & changes switches between center- and left- aligned BBC Young Reporter logos */
footer span {
position: relative;
top: 19px;
}
footer img {
display: block;
width: 125px;
float: right;
content: url("/images/young-reporter-logo.png");
vertical-align: middle;
}
@media screen and (max-width: 800px) {
footer {
text-align: center;
}
footer img {
float: none;
margin: auto;
content: url("/images/young-reporter-logo-centered.png");
width: 200px;
padding-bottom: 10px;
}
footer span {
top: 0;
}
}
/* add side margins */
.main-content {
.main-content, footer {
margin-left: 15%;
margin-right: 15%;
}
@media screen and (max-width: 600px) {
.main-content {
.main-content, footer {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 500px) {
.main-content {
.main-content, footer {
margin-left: 2%;
margin-right: 2%;
}

74
css/mdc-card-list.css
View File

@@ -1,6 +1,8 @@
/* make article cards look nice by altering margins */
.mdc-card {
margin: 2px 2px 10px 2px;
}
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
@@ -9,26 +11,72 @@
margin: 0;
}
/* automatically display articles on either side of the page, alternating */
.main-content .mdc-card {
float:left;
clear:left;
float: left;
clear: left;
width: 49%;
}
.main-content .mdc-card:nth-of-type(even){
float:right;
clear:right;
.main-content .mdc-card:nth-of-type(even) {
float: right;
clear: right;
}
.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(3) {
float: none;
clear: none;
width: auto;
}
.main-content .mdc-card:nth-of-type(odd) ~ .mdc-card:last-of-type {
/* make first article full-width */
.main-content .mdc-card:first-of-type {
float: none;
clear: both;
width: auto;
}
/* makes last article full-width if it is on its own in a row - i.e. if there is an even number of articles in total */
.main-content .mdc-card:nth-of-type(odd):nth-last-of-type(2) ~ .mdc-card:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 1 article present */
.main-content .mdc-card:first-of-type:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 2 articles present & small screen is detected */
@media screen and (max-width: 1000px) {
.main-content .mdc-card:nth-child(1):nth-last-of-type(2), .main-content .mdc-card:nth-of-type(2):last-of-type {
float: none;
clear: both;
width: auto;
}
}
/* styling for when 3 articles present */
.main-content .mdc-card:first-of-type:nth-last-of-type(3) {
float: none;
clear: both;
width: auto;
}
.main-content .mdc-card:nth-of-type(3):last-of-type {
float: right;
clear: right;
}
.main-content .mdc-card:nth-of-type(2):nth-last-of-type(2) {
float: left;
clear: left;
}
/* for scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
@@ -50,7 +98,7 @@
.top-scroll-button img {
position: relative;
top: 9.5px;
top: 7px;
width: 35px;
height: auto;
-webkit-transition-duration: 0.25s;
@@ -64,5 +112,5 @@
}
.top-scroll-button:hover img {
top: 0;
top: 3px;
}

BIN
images/young-reporter-logo-centered.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
images/young-reporter-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB