Retheme site

index.md

@@ -1,38 +1,55 @@
 ---
 title: BBC Young Reporter
-description: News articles written by Reading School students in year 8
-layout: home
+description: Articles from Reading School's year 8 students
 ---
 
-{% if site.articles %}
-{% assign currentdate_count = 0 %}
-{% assign articles = site.articles | sort: date | reverse %}
-{% for article in articles %}
-{% assign currentdate = article.date | date: "%Y" %}
-{% if currentdate != date %}
-{% assign currentdate_count = 0 %}
-{% if article.url != articles.first.url %}
-    </div>
-</div>
-<div class="splitter"></div>
-{% endif %}
-<div class="article-section parallax-section" data-jarallax data-speed="{{ site.parallax-speed }}" style="background-image: url('/images/backgrounds/{{ currentdate }}.jpg');">
-    <div class="article-section-header">
-        <h1 class="mdc-typography--headline4">{{ currentdate }}</h1>
-        <button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/years/{{ currentdate }}';">See All <span class="material-icons">keyboard_arrow_right</span></button>
-    </div>
-    <div class="articles">
-{% assign date = currentdate %}
-{% endif %}
-{% if currentdate_count < 3 %}
-{% assign currentdate_count = currentdate_count | plus: 1 %}
-    {% include mdc-card.html article=article %}
-{% endif %}
-{% if currentdate != date %}
-{% endif %}
-{% if article.url == articles.last.url %}
-    </div>
-</div>
-{% endif %}
-{% endfor %}
-{% endif %}
+<!-- Highlights -->
+<section class="wrapper">
+	<div class="inner">
+		
+		{% if site.articles %}
+		{% assign currentdate_count = 0 %}
+		{% assign articles = site.articles | sort: date | reverse %}
+		{% for article in articles %}
+		{% assign currentdate = article.date | date: "%Y" %}
+		{% if currentdate != date %}
+		{% assign currentdate_count = 0 %}
+		{% if article.url != articles.first.url %}
+		</div>
+		{% endif %}
+		
+		<section class="cta wrapper" style="background-image: linear-gradient(135deg, rgba(var(--background-colour-dark-rgb), 0.5), rgba(var(--background-colour-dark-rgb), 0.9)), url(/images/backgrounds/{{currentdate}}.jpg)">
+			<div class="inner">
+				<h2>{{ currentdate }}</h2>
+				<a href="/years/{{ currentdate }}" class="button">See all</a>
+			</div>
+		</section>
+
+		<div class="highlights">
+	
+		{% assign date = currentdate %}
+		{% endif %}
+		{% if currentdate_count < 3 %}
+		{% assign currentdate_count = currentdate_count | plus: 1 %}
+			<section>
+				<div class="content">
+					<header>
+						{% assign article_url = article.url | relative_url %}
+						<a href="{{ article_url }}" class="image fit"><img src="/images{{ article_url | remove: '.html' | remove: '/articles' }}.jpg"></a>
+						<h3>{{ article.title }}</h3>
+					</header>
+					<p><time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%d/%m/%Y' }}</time>
+					&bull; by {{ article.authors }}</p>
+					<p style="text-align: left;">{{ article.description }}</p>
+					<a href="{{ article_url }}" class="button small">Read more</a>
+				</div>
+			</section>
+		{% endif %}
+		{% if article.url == articles.last.url %}
+		</div>
+		{% endif %}
+		{% endfor %}
+		{% endif %}
+
+	</div>
+</section>