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

Enable auto-population & remove author pages

Browse Source 
Make the navbar, main article list and content of articles (images, dates and authors) populate automatically, and remove pages for each author.
This commit is contained in:
Matthew Grove
2019-01-25 20:36:38 +00:00
parent c8f7a6bf77
commit 8671144229
20 changed files with 158 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/navbar.html
View File

@@ -5,7 +5,7 @@
<img src="/images/page-logo.png" style="width: 90%;"/>
</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">home</i>
<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">
@@ -16,14 +16,10 @@
<h3 class="mdc-list-group__subheader">Articles</h3>
{% for page in site.categories.articles %}
<a class="mdc-list-item" href="{{ page.url | relative_url }}" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">{{ page.title }}</span>
</a>
{% endfor %}
<a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Authors</h3>

39
_includes/navbar.html~
View File

@@ -1,39 +0,0 @@
<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%;"/>
</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">home</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>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Articles</h3>
<a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Authors</h3>
<a class="mdc-list-item" href="/authors/name" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">account_circle</i>
<span class="mdc-list-item__text">Name</span>
</a>
</div>
{% loop_directory directory:articles %}
<a class="mdc-list-item" href="{{ page.url | relative_url }}" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">{{ page.icon }}</i>
<span class="mdc-list-item__text">{{ page.title }}</span>
</a>
{% endloop_directory %}
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>

2
_includes/top-app-bar.html
View File

@@ -2,7 +2,7 @@
<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">{{ page.title }} | Reading School</span>
<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;">

6
_posts/2019-01-01-article_name.md → _posts/2019-01-01-article-name.md
View File

@@ -3,11 +3,13 @@ title: Title1
description: An article description1
layout: article
categories: articles
date: 2019-01-01 7:01
authors: Name
---
<h3 class="mdc-typography--subtitle1">
<time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
| by <a href="/authors/name">Name</a>
<time class="timeago" datetime="{{ page.date | date: '%Y-%m-%d' }}T{{ page.date | date: '%H:%M:%S' }}">{{ page.date | date: '%A %e %B %Y' }}</time>
| by {{ page.authors }}
</h3>
<figure>
<img src="/images/article_name--cover.jpg" style="width:100%;">

18
_posts/2019-01-01-article_name.md~
View File

@@ -1,18 +0,0 @@
---
title: Title1
description: An article description1
layout: article
icon: home
categories: articles
date: 2019-01-01 9:00
---
<h3 class="mdc-typography--subtitle1">
<time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
| by <a href="/authors/name">Name</a>
</h3>
<figure>
<img src="/images/article_name--cover.jpg" style="width:100%;">
<figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
</figure>
Content

16
_posts/2019-01-25-article-name.md
View File

@@ -1,16 +0,0 @@
---
title: Title
description: An article description
layout: article
categories: articles
---
<h3 class="mdc-typography--subtitle1">
<time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
| by <a href="/authors/name">Name</a>
</h3>
<figure>
<img src="/images/article_name--cover.jpg" style="width:100%;">
<figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
</figure>
Content

17
_posts/2019-01-25-article-name.md~
View File

@@ -1,17 +0,0 @@
---
title: Title
description: An article description
layout: article
icon: home
categories: articles
---
<h3 class="mdc-typography--subtitle1">
<time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
| by <a href="/authors/name">Name</a>
</h3>
<figure>
<img src="/images/article_name--cover.jpg" style="width:100%;">
<figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
</figure>
Content

35
_site/articles/2019/01/25/article-name.html → _site/articles/2019/01/01/article-name.html
View File

@@ -14,15 +14,15 @@
<!-- 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="Title | Reading School">
<meta name="apple-mobile-web-app-title" content="Title1 | 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>Title | Reading School</title>
<meta name="description" content="An article description">
<title>Title1 | Reading School</title>
<meta name="description" content="An article description1">
<!-- import Roboto (font) -->
<link href="/css/roboto.css" rel="stylesheet">
@@ -63,7 +63,7 @@
<img src="/images/page-logo.png" style="width: 90%;"/>
</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">home</i>
<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">
@@ -73,20 +73,21 @@
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Articles</h3>
<a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Authors</h3>
@@ -108,7 +109,7 @@
<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">Title | Reading School</span>
<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;">
@@ -121,10 +122,10 @@
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<h2 class="mdc-typography--headline2">Title</h2>
<h2 class="mdc-typography--headline2">Title1</h2>
<h3 class="mdc-typography--subtitle1">
<time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
| by <a href="/authors/name">Name</a>
<time class="timeago" datetime="2019-01-01T07:01:00">Tuesday 1 January 2019</time>
| by Name
</h3>
<figure>
<img src="/images/article_name--cover.jpg" style="width:100%;" />

27
_site/articles/2019/01/01/article_name.html
View File

@@ -63,7 +63,7 @@
<img src="/images/page-logo.png" style="width: 90%;"/>
</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">home</i>
<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">
@@ -73,20 +73,21 @@
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Articles</h3>
<a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Authors</h3>
@@ -108,7 +109,7 @@
<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">Title1 | Reading School</span>
<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;">
@@ -123,8 +124,8 @@
<div class="mdc-top-app-bar--short-fixed-adjust">
<h2 class="mdc-typography--headline2">Title1</h2>
<h3 class="mdc-typography--subtitle1">
<time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
| by <a href="/authors/name">Name</a>
<time class="timeago" datetime="2019-01-01T07:02:00">Tuesday 1 January 2019</time>
| by Name
</h3>
<figure>
<img src="/images/article_name--cover.jpg" style="width:100%;" />

52
_site/authors/name.html → _site/articles/2019/01/02/article-name.html
View File

@@ -14,15 +14,15 @@
<!-- 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">
<meta name="apple-mobile-web-app-title" content="Title1 | 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="">
<title>Title1 | Reading School</title>
<meta name="description" content="An article description1">
<!-- import Roboto (font) -->
<link href="/css/roboto.css" rel="stylesheet">
@@ -46,7 +46,7 @@
<link href="/css/global.css" rel="stylesheet">
</head>
<link href="/css/mdc-card-list.css" rel="stylesheet">
<link href="/css/article-page.css" rel="stylesheet">
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
@@ -63,7 +63,7 @@
<img src="/images/page-logo.png" style="width: 90%;"/>
</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">home</i>
<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">
@@ -73,20 +73,21 @@
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Articles</h3>
<a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Authors</h3>
@@ -121,21 +122,16 @@
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
| by <a href="/authors/name">Name</a>
<h2 class="mdc-typography--headline2">Title1</h2>
<h3 class="mdc-typography--subtitle1">
<time class="timeago" datetime="2019-01-02T07:01:00">Wednesday 2 January 2019</time>
| by Name
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/article_name';">Read</button>
</div>
</div>
</div>
<figure>
<img src="/images/article_name--cover.jpg" style="width:100%;" />
<figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
</figure>
<p>Content</p>
</div>
</main>

90
_site/authors/name/index_old.html
View File

@@ -1,90 +0,0 @@
<!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="News articles written by Reading School students in year 8">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet">
<!-- import jQuery -->
<script src="/assets/jquery.min.js"></script>
<!-- import jQuery timeago -->
<script src="/assets/jquery.timeago.min.js"></script>
<!-- import cookie JavaScript -->
<script src="/assets/cookies.js"></script>
<!-- import Material Design components & icons -->
<link href="/assets/material-components-web.min.css" rel="stylesheet">
<link href="/assets/material_icons.css" rel="stylesheet">
<script src="/assets/material-components-web.min.js"></script>
<!-- import local styling & scripts -->
<script src="/assets/global.js"></script>
<link href="/assets/global.css" rel="stylesheet">
<link href="/assets/mdc-card-list.css" rel="stylesheet">
<!-- define title so that webpage & top app bar titles can be instantiated via JS -->
<script>
window.page_title = "Name";
</script>
</head>
<body>
<!-- cookie notice is included via jQuery -->
<div id="cookies"></div>
<!-- content of navbar is included via jQuery -->
<aside class="mdc-drawer mdc-drawer--modal"></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"></header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
| by <a href="/authors/name">Name</a>
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/article_name';">Read</button>
</div>
</div>
</div>
</div>
</main>
<footer>
&copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a>
</footer>
</div>
</body>
</html>

4
_site/css/mdc-card-list.css
View File

@@ -14,11 +14,11 @@
clear:left;
width: 49%;
}
.main-content .mdc-card:nth-of-type(even){
.main-content .mdc-card:nth-of-type(4n){
float:right;
clear:right;
}
.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(2) {
.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(3) {
float: none;
clear: none;
width: auto;

0
_site/images/article_name--cover.jpg → _site/images/2019-01-01-article-name--cover.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 179 KiB

83
_site/index.html
View File

@@ -63,7 +63,7 @@
<img src="/images/page-logo.png" style="width: 90%;"/>
</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">home</i>
<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">
@@ -73,20 +73,21 @@
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Articles</h3>
<a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
<a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
<a class="mdc-list-item" href="/articles/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
<span class="mdc-list-item__text">Title1</span>
</a>
<a class="mdc-list-item" href="/articles/2019/01/01/article-name.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title1</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Authors</h3>
@@ -121,22 +122,74 @@
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-01-02-article-name-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h2 class="mdc-typography--headline6">Title1</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
| by <a href="/authors/name">Name</a>
<time class="timeago" datetime="2019-01-02T07:01:00">Wednesday 2 January 2019</time>
| by Name
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/article_name';">Read</button>
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/01/02/article-name.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-01-02-article-name-html {
background-image: url("/images/2019-01-02-article-name--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-01-01-article_name-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title1</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-01-01T07:02:00">Tuesday 1 January 2019</time>
| by Name
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/01/01/article_name.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-01-01-article_name-html {
background-image: url("/images/2019-01-01-article_name--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-01-01-article-name-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title1</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-01-01T07:01:00">Tuesday 1 January 2019</time>
| by Name
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/01/01/article-name.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-01-01-article-name-html {
background-image: url("/images/2019-01-01-article-name--cover.jpg");
}
</style>
</div>
</main>
<footer>

21
authors/name.md
View File

@@ -1,21 +0,0 @@
---
title: BBC Young Reporter
categories: authors
layout: article-list
---
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
| by <a href="/authors/name">Name</a>
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/article_name';">Read</button>
</div>
</div>
</div>

0
authors/name.md~
View File

90
authors/name/index_old.html
View File

@@ -1,90 +0,0 @@
<!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="News articles written by Reading School students in year 8">
<!-- import Roboto (font) -->
<link href="/assets/roboto.css" rel="stylesheet">
<!-- import jQuery -->
<script src="/assets/jquery.min.js"></script>
<!-- import jQuery timeago -->
<script src="/assets/jquery.timeago.min.js"></script>
<!-- import cookie JavaScript -->
<script src="/assets/cookies.js"></script>
<!-- import Material Design components & icons -->
<link href="/assets/material-components-web.min.css" rel="stylesheet">
<link href="/assets/material_icons.css" rel="stylesheet">
<script src="/assets/material-components-web.min.js"></script>
<!-- import local styling & scripts -->
<script src="/assets/global.js"></script>
<link href="/assets/global.css" rel="stylesheet">
<link href="/assets/mdc-card-list.css" rel="stylesheet">
<!-- define title so that webpage & top app bar titles can be instantiated via JS -->
<script>
window.page_title = "Name";
</script>
</head>
<body>
<!-- cookie notice is included via jQuery -->
<div id="cookies"></div>
<!-- content of navbar is included via jQuery -->
<aside class="mdc-drawer mdc-drawer--modal"></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"></header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
| by <a href="/authors/name">Name</a>
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/article_name';">Read</button>
</div>
</div>
</div>
</div>
</main>
<footer>
&copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a>
</footer>
</div>
</body>
</html>

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

@@ -14,11 +14,11 @@
clear:left;
width: 49%;
}
.main-content .mdc-card:nth-of-type(even){
.main-content .mdc-card:nth-of-type(4n){
float:right;
clear:right;
}
.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(2) {
.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(3) {
float: none;
clear: none;
width: auto;

0
images/article_name--cover.jpg → images/2019-01-01-article-name--cover.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 179 KiB

18
index.md
View File

@@ -4,18 +4,26 @@ description: News articles written by Reading School students in year 8
layout: article-list
---
{% for article in site.categories.articles %}
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h2 class="mdc-typography--headline6">{{ article.title }}</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
| by <a href="/authors/name">Name</a>
<time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
| by {{ article.authors }}
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/article_name';">Read</button>
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
</div>
</div>
</div>
<style>
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg");
}
</style>
{% endfor %}