diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..ac7d0e6
Binary files /dev/null and b/.DS_Store differ
diff --git a/images/bbc.png b/images/bbc.png
new file mode 100644
index 0000000..e259f0d
Binary files /dev/null and b/images/bbc.png differ
diff --git a/images/ft.png b/images/ft.png
new file mode 100644
index 0000000..a805335
Binary files /dev/null and b/images/ft.png differ
diff --git a/images/mail.png b/images/mail.png
new file mode 100644
index 0000000..c19f729
Binary files /dev/null and b/images/mail.png differ
diff --git a/images/metro.png b/images/metro.png
new file mode 100644
index 0000000..23d7235
Binary files /dev/null and b/images/metro.png differ
diff --git a/images/mirror.png b/images/mirror.png
new file mode 100644
index 0000000..452fcfa
Binary files /dev/null and b/images/mirror.png differ
diff --git a/images/telegraph.png b/images/telegraph.png
new file mode 100644
index 0000000..e516620
Binary files /dev/null and b/images/telegraph.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..89646b2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ News Sorter
+
+
+
+
+
+ Eye on the Tabloids
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/javascript-workings.js b/scripts/javascript-workings.js
new file mode 100644
index 0000000..8e93c69
--- /dev/null
+++ b/scripts/javascript-workings.js
@@ -0,0 +1,75 @@
+const parentNode = document.querySelector(".news--area--feed");
+
+// compile this Url = "https://newsapi.org/v2/top-headlines?sources=bbc-news,daily-mail,mirror,&apiKey=93238bcda39e4404852697d364b77971";
+const baseUrl = "https://newsapi.org/v2/top-headlines?apiKey=93238bcda39e4404852697d364b77971";
+
+
+const publicationList = {
+ "bbc-news": true,
+ "daily-mail": true,
+ "mirror": true
+}
+
+// create an array from object using key values
+let publicationArray = Object.keys(publicationList);
+
+
+//console.log(defaultArray);
+const sourceList = `&sources=${defaultArray}`;
+const fullURL = `${baseUrl}${sourceList}`;
+
+function displayDataOnPage(newsStories) {
+ const newsArray = newsStories.articles;
+ console.log(newsStories.articles);
+
+ // add news blocks (as articles)
+ newsArray.forEach(function(newsitem) {
+
+ const node = document.createElement("article");
+ node.innerHTML = `${newsitem.source.name} (source logo)
+ ${newsitem.title}: ${newsitem.description}`;
+ parentNode.appendChild(node);
+
+ })
+
+
+
+ // filter
+ let checkboxArray = document.querySelectorAll(".news--filter input");
+ console.log(checkboxArray)
+
+ checkboxArray.forEach(function(input) {
+ input.addEventListener("change", event => {
+ console.log(event.target.value);
+
+ if (publicationList[event.target.value]) {
+ publicationList[event.target.value] = false
+ filteredArray.push(event.target.value);
+ }
+
+ console.log(filteredArray)
+
+ })
+ })
+
+
+}
+
+function displayErrorToUser() {}
+
+fetch(fullURL) // by default fetch makes a GET request
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(body) {
+ //console.log(body);
+ displayDataOnPage(body);
+ })
+ .catch(function(error) {
+ displayErrorToUser("Server failed to return data");
+
+ // need filter to NOT SHOW any news story with empty values
+ // if any value is empty do no show
+ });
+
+
\ No newline at end of file
diff --git a/scripts/javascript-workings2.js b/scripts/javascript-workings2.js
new file mode 100644
index 0000000..ca6179c
--- /dev/null
+++ b/scripts/javascript-workings2.js
@@ -0,0 +1,128 @@
+const baseUrl = "https://newsapi.org/v2/top-headlines?apiKey=93238bcda39e4404852697d364b77971";
+const parentNode = document.querySelector(".news--area--feed");
+
+let checkboxArray = document.querySelectorAll(".news--filter input");
+let userOpted = false;
+/*
+--------------
+FETCH FUNCTION
+--------------
+*/
+const goFetch = function(fullURL) {
+
+ fetch(fullURL) // by default fetch makes a GET request
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(body) {
+ displayDataOnPage(body);
+ })
+ .catch(function(error) {
+ displayErrorToUser("Server failed to return data");
+ // need filter to NOT SHOW any news story with empty values. if any value is empty do no show
+ });
+}
+
+/*
+--------------------
+DISPLAY DATA ON PAGE
+--------------------
+*/
+
+function displayDataOnPage(newsStories) {
+
+ const newsArray = newsStories.articles;
+ // console.log(newsStories.articles);
+ // add news blocks (as articles)
+ newsArray.forEach(function(newsitem) {
+
+ const node = document.createElement("article");
+ node.innerHTML = `
+
+
+ ${newsitem.description}
+ ${newsitem.content}
+ Read full article
+
`;
+ parentNode.appendChild(node);
+
+ })
+}
+
+/*
+------------------
+GENERATE FETCH URL
+------------------
+*/
+
+// news sources object
+let publicationList = {
+ "daily-mail": false,
+ "mirror": false,
+ "metro": false,
+ "the-telegraph": false,
+ "financial-times": false,
+ "bbc-news": false,
+}
+
+const generateFetchURL = function (publicationList) {
+ // baseUrl and default
+ const defaultArray = ["bbc-news","daily-mail","mirror"];
+
+ // create an array from object using key values
+ let publicationArray = Object.keys(publicationList);
+ let filteredArray = publicationArray.filter(function(pub) {
+ return publicationList[pub] === true;
+ });
+
+ // compile fetch url
+ let defaultArrayUrl = `&sources=${defaultArray}`;
+ let filteredPublicationUrl = `&sources=${filteredArray}`;
+ let fullURL = "";
+
+ if (userOpted === true) {
+ // RETURN VALUES - fullURL
+ fullURL = `${baseUrl}${filteredPublicationUrl}`;
+ } else {
+ fullURL = `${baseUrl}${defaultArrayUrl}`;
+ }
+ goFetch(fullURL)
+}
+
+/*
+----------------------
+CREATE CHECKBOX FILTER
+----------------------
+*/
+const createCheckboxFilter = function() {
+ // Reset UserOpted to false
+ userOpted = false;
+ checkboxArray.forEach(function(input) {
+ input.addEventListener("change", function(event) {
+ // new assigned value to match object key
+ // assign object value if checked is true
+ if (event.target.checked === true) {
+ publicationList[event.target.value] = true;
+ userOpted = true;
+ }
+ else {
+ publicationList[event.target.value] = false;
+ }
+ console.log(publicationList)
+ generateFetchURL(publicationList);
+ })
+ })
+}
+/* this function to run generateFetchURL() */
+createCheckboxFilter();
+
+/*
+---------------------
+ERROR HANDLER - TO DO
+---------------------
+*/
+function displayErrorToUser() {}
+
+
+// Initial call to fetch data
+generateFetchURL(baseUrl);
\ No newline at end of file
diff --git a/scripts/javascript-workings3.js b/scripts/javascript-workings3.js
new file mode 100644
index 0000000..8b3330c
--- /dev/null
+++ b/scripts/javascript-workings3.js
@@ -0,0 +1,123 @@
+const baseUrl = "https://newsapi.org/v2/top-headlines?apiKey=93238bcda39e4404852697d364b77971";
+const parentNode = document.querySelector(".news--area--feed");
+
+let checkboxArray = document.querySelector(".news--filter");
+let userOpted = false;
+/*
+--------------
+FETCH FUNCTION
+--------------
+*/
+const goFetch = function(fullURL) {
+
+ fetch(fullURL) // by default fetch makes a GET request
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(body) {
+ displayDataOnPage(body);
+ })
+ .catch(function(error) {
+ displayErrorToUser("Server failed to return data");
+ // need filter to NOT SHOW any news story with empty values. if any value is empty do no show
+ });
+}
+
+/*
+--------------------
+DISPLAY DATA ON PAGE
+--------------------
+*/
+
+function displayDataOnPage(newsStories) {
+
+ const newsArray = newsStories.articles;
+ // console.log(newsStories.articles);
+ // add news blocks (as articles)
+ newsArray.forEach(function(newsitem) {
+
+ const node = document.createElement("article");
+ node.innerHTML = `
+
+
+ ${newsitem.description}
+ ${newsitem.content}
+ Read full article
+
`;
+ parentNode.appendChild(node);
+
+ })
+}
+
+/*
+------------------
+GENERATE FETCH URL
+------------------
+*/
+
+// news sources object
+let publicationList = {
+ "daily-mail": false,
+ "mirror": false,
+ "metro": false,
+ "the-telegraph": false,
+ "financial-times": false,
+ "bbc-news": false,
+}
+
+const generateFetchURL = function (publicationList) {
+ // baseUrl and default
+ const defaultArray = ["bbc-news","daily-mail","mirror"];
+
+ // create an array from object using key values
+ let publicationArray = Object.keys(publicationList);
+ let filteredArray = publicationArray.filter(function(pub) {
+ return publicationList[pub] === true;
+ });
+
+ // compile fetch url
+ let defaultArrayUrl = `&sources=${defaultArray}`;
+ let filteredPublicationUrl = `&sources=${filteredArray}`;
+ let fullURL = "";
+
+ if (userOpted === true) {
+ // RETURN VALUES - fullURL
+ fullURL = `${baseUrl}${filteredPublicationUrl}`;
+ } else {
+ fullURL = `${baseUrl}${defaultArrayUrl}`;
+ }
+ goFetch(fullURL)
+}
+
+/*
+----------------------
+CREATE CHECKBOX FILTER
+----------------------
+*/
+
+// Attach change event on checkboxes.
+checkboxArray.addEventListener("change", function(event) {
+
+ // new assigned value to match object key
+ // assign object value if checked is true
+ if (event.target.checked === true) {
+ publicationList[event.target.value] = true;
+ } else {
+ publicationList[event.target.value] = false;
+ }
+
+ // Verify if any of the options are being selected.
+ userOpted = Object.values(publicationList).reduce(function (val1, val2) { return val1 || val2 })
+ generateFetchURL(publicationList)
+})
+
+/*
+---------------------
+ERROR HANDLER - TO DO
+---------------------
+*/
+function displayErrorToUser() {}
+
+
+// Initial call to fetch data
+generateFetchURL(baseUrl);
\ No newline at end of file
diff --git a/scripts/javascript.js b/scripts/javascript.js
new file mode 100644
index 0000000..e2105c5
--- /dev/null
+++ b/scripts/javascript.js
@@ -0,0 +1,163 @@
+const baseUrl =
+ "https://newsapi.org/v2/top-headlines?apiKey=93238bcda39e4404852697d364b77971";
+const parentNode = document.querySelector(".news--area--feed");
+let checkboxArray = document.querySelectorAll(".news--filter input");
+
+/*
+--------------
+FETCH FUNCTION
+--------------
+*/
+const goFetch = function(fullURL) {
+ fetch(fullURL) // by default fetch makes a GET request
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(body) {
+ displayDataOnPage(body);
+ })
+ .catch(function(error) {
+ displayErrorToUser("Server failed to return data");
+ });
+};
+
+/*
+--------------------
+DISPLAY DATA ON PAGE
+--------------------
+*/
+const newsLayout = newsitem => {
+ // fallbacks or empty if data is null
+ const imageurl =
+ newsitem.urlToImage !== null
+ ? `${newsitem.urlToImage}`
+ : "https://placeholdit.co//i/400x400?&bg=808069&fc=eee8cd&text=Project Image";
+ const source =
+ newsitem.source.name !== null
+ ? ``
+ : "";
+ const url = newsitem.url !== null ? `${newsitem.url}` : "#";
+ const title = newsitem.title !== null ? `${newsitem.title}` : "News article";
+ const description =
+ newsitem.description !== null ? `${newsitem.description}
` : "";
+ const content =
+ newsitem.content !== null
+ ? `${newsitem.content.split("[+")[0]}
`
+ : "";
+
+ return `
+
+
+ ${source}
+
+ `;
+};
+
+// TOFIX cleared on refresh, due to reset on displayDateOnPage?
+function redCard() {
+ const redcardCheckbox = document.querySelectorAll(".redcard-checkbox");
+
+ return redcardCheckbox.forEach(item => {
+ item.addEventListener("change", function(event) {
+ event.target.checked
+ ? (event.target.parentNode.style.backgroundColor = "red")
+ : (event.target.parentNode.style.backgroundColor = "");
+ });
+ });
+}
+
+function displayDataOnPage(newsStories) {
+ parentNode.innerHTML = "";
+
+ const newsArray = newsStories.articles;
+ // add news blocks (as articles)
+ newsArray.forEach(function(newsitem) {
+ const node = document.createElement("article");
+ node.innerHTML = newsLayout(newsitem);
+ parentNode.appendChild(node);
+ });
+ //
+ redCard();
+}
+
+/*
+------------------
+GENERATE FETCH URL
+------------------
+*/
+
+// news sources object
+let publicationList = {
+ "daily-mail": false,
+ mirror: false,
+ metro: false
+};
+
+const generateFetchURL = function(publicationList) {
+ // default url array
+ const defaultArray = ["daily-mail", "mirror", "metro"];
+
+ // create an array from object using key values
+ let publicationArray = Object.keys(publicationList);
+ // filter array to keys with 'true' values
+ let filteredArray = publicationArray.filter(function(pub) {
+ return publicationList[pub] === true;
+ });
+
+ // compile fetch url
+ let defaultArrayUrl = `&sources=${defaultArray}`;
+ let filteredPublicationUrl = `&sources=${filteredArray}`;
+ let fullURL = "";
+
+ // check if filteredArray has values
+ if (filteredArray.length == 0) {
+ fullURL = `${baseUrl}${defaultArrayUrl}`;
+ } else {
+ fullURL = `${baseUrl}${filteredPublicationUrl}`;
+ }
+ // CHANGE filteredArray GOOD
+ // console.log(filteredArray);
+
+ goFetch(fullURL);
+};
+
+/*
+----------------------
+CREATE CHECKBOX FILTER
+----------------------
+*/
+const createCheckboxFilter = function() {
+ checkboxArray.forEach(function(input) {
+ input.addEventListener("change", function(event) {
+ // new assigned value to match object key
+ // assign object value if checked is true
+ if (event.target.checked === true) {
+ publicationList[event.target.value] = true;
+ // displayDataOnPage();
+ } else {
+ publicationList[event.target.value] = false;
+ }
+ // CHANGE publicationList object GOOD
+ // console.log(publicationList);
+ generateFetchURL(publicationList);
+ });
+ });
+};
+/* this function to run generateFetchURL() */
+createCheckboxFilter();
+
+/*
+-------------
+ERROR HANDLER
+-------------
+*/
+function displayErrorToUser() {}
+
+// Initial call to fetch data
+generateFetchURL(baseUrl);
diff --git a/styles/normalize.css b/styles/normalize.css
new file mode 100644
index 0000000..3d6624c
--- /dev/null
+++ b/styles/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
new file mode 100644
index 0000000..61f7ab4
--- /dev/null
+++ b/styles/styles.css
@@ -0,0 +1,168 @@
+/* Variables
+ ========================================================================== */
+
+ :root {
+ --main-txt-color: #060607;
+ --light-color: #f4f5f7;
+ --bright-color: #afb9c5;
+ --mid-color: #484e52;
+ --dark-color: #111f28;
+
+ --main-padding: 1rem;
+}
+
+/* BASE
+ ========================================================================== */
+
+body {
+ font-family: "Palatino Linotype", Palatino, Palladio, "URW", sans-serif;
+ margin: 0;
+ padding: 0;
+ background: var(--light-color);
+ line-height: 1.5;
+ color: var(--main-txt-color);
+ -webkit-font-smoothing: antialiased;
+}
+
+.container {
+ padding-left: var(--main-padding);
+ padding-right: var(--main-padding);
+ margin: 0 auto;
+}
+
+.menu--settings {
+ list-style-type: none;
+ padding-left: 0;
+ padding-right: 0;
+ margin: 0;
+}
+img {
+ max-width: 100%;
+ height: auto;
+ border-style: none;
+}
+figure {
+ padding: 0;
+ margin: 0;
+}
+h1.main-title {font-size: 1.5em}
+h1.main-title, .site--footer {
+ text-align: center;
+ text-transform: uppercase;
+ background-color: var(--main-txt-color);
+ color: var(--light-color);
+ padding: calc( 2 * var(--main-padding) ) 0;
+}
+h1.main-title {
+ margin: 0 0 calc( 2 * var(--main-padding) );
+}
+.site--footer a {
+ color: var(--bright-color);
+ text-decoration: none;
+}
+.kill-checkbox {
+ color: var(--bright-color);
+ font-weight: 700;
+}
+
+/* Source logo */
+.news--article-link span {
+ display: block;
+ width: 100px;
+ padding-top: 50px;
+ background-color: black;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+}
+.Metro { background-image: url(../images/metro.png);}
+.Mail { background-image: url(../images/mail.png); }
+.Mirror { background-image: url(../images/mirror.png); }
+
+/* Checkbox navigation */
+.news--filter {
+ text-align: center;
+ margin-bottom: calc(2* var(--main-padding));
+ }
+.news--filter label {
+ display: inline-block;
+ margin-right: var(--main-padding);
+ text-transform: uppercase;
+ font-weight: 700;
+}
+.news--filter input[type="checkbox"] {
+ display: inline-block;
+ margin-right: 0.5rem;
+ }
+
+/* ARTICLES
+ ========================================================================== */
+
+.news--area--feed article {
+ border-bottom: 3px dashed var(--bright-color);
+ margin-bottom: calc(2* var(--main-padding));
+}
+.news--article-content {
+ margin-bottom: calc(2* var(--main-padding));
+}
+.news--article-content a {
+ display: inline-block;
+ color: var(--mid-color);
+ text-decoration: none;
+ padding: 0.5rem 0;
+ text-transform: uppercase;
+}
+.news--article-content p:last-of-type {margin-bottom: 0;}
+.news--article-content a:after {
+ content:'\00a0\25b8';
+}
+
+/* MEDIA QUERIES
+ ========================================================================== */
+@media (min-width: 768px) {
+ h1.main-title {font-size: 2em}
+ .news--area--feed {
+ display: flex;
+ flex-flow: row wrap;
+ }
+ .news--area--feed article {
+ width: 50%;
+ padding-bottom: var(--main-padding);
+ border-bottom: none;
+ margin-bottom: none;
+ }
+ .news--article-content, .news--article-image {
+ margin-left: var(--main-padding);
+ margin-right: var(--main-padding);
+ }
+
+ .news--article-image {
+ display: block;
+ padding-top: 56% /*widescreen 16:9*/;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+ }
+ .news--article-link {
+ display: block;
+ position: relative;
+ }
+ .news--article-link span {
+ position: absolute;
+ right: 1rem;
+ top: 0px;
+ }
+
+}
+
+@media (min-width: 960px) {
+ .container {max-width: 930px}
+}
+
+@media (min-width: 1200px) {
+ .container {max-width: 1170px}
+ .news--area--feed article {
+ width: 33.3333334%;
+ padding-bottom: var(--main-padding);
+ }
+}