diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5dee5e7 Binary files /dev/null and b/.DS_Store differ diff --git a/README-orig.md b/README-orig.md new file mode 100644 index 0000000..f2e0c4a --- /dev/null +++ b/README-orig.md @@ -0,0 +1,34 @@ +# Responsive News Reader + +Let's create a responsive news reader website. To get the latest news the app will display we are going to use [News API](https://newsapi.org/). As with the Weather and Unsplash APIs, you will need to register with the service to obtain an API key. + +## Objectives + +- [ ] Create a responsive layout that works well and looks good at mobile, tablet and desktop screen sizes. Please create the mobile version first, then tablet and then desktop. + +- [ ] Fetch news articles from News API and display them including title, image, description, publication, date and link to article. + +- [ ] Display images for tablet and desktop screens only + +- [ ] Implement a feature of your choice + +## Stretch goals + +- [ ] Implement pagination which allows you to get the next 20 results and display them + +- [ ] Add search functionality which allows the user to retrieve news about a particular topic + +## Instructions + +- Fork and clone this repo +- Commit your changes frequently with short and descriptive commit messages +- Create a pull request when complete +- We want to see great looking webpages +- Your code should have consistent indentation and sensible naming +- Use lots of concise functions with a clear purpose +- Add code comments where it is not immediately obvious what your code does +- Your code should not throw errors and handle edge cases gracefully. For example not break if server fails to return expected results + +## README.md + +When finished, include a README.md in your repo. This should explain what the project is, how to run it and how to use it. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. diff --git a/README.md b/README.md index f2e0c4a..54db3eb 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,43 @@ -# Responsive News Reader +# 'newsee' newsreader app + +![Screenshot](images/screen-shot.png) + +## Objective > what does it do? +The purpose of the newsreader app is to display the news with a fully responsive layout for mobile, tablet and desktop screen sizes giving an intuative and user-freindly experience. + +## How it works +The app loads raw data from the [News API](https://newsapi.org/), uses Javascript to display the articles' title, image, description and other details, and CSS to style the UI. + +[View newsee repo on Github](https://github.com/rolandjlevy/responsive-news-reader) + +## Technology used +- [ ] News API +- [ ] Javascript +- [ ] CSS + +## Stages of development +- [ ] Set up APIs and read the **News API** documentation +- [ ] Retrieved the data for news articles +- [ ] Used Javascript to display the image, description, publication and date for the current day +- [ ] Used CSS to style the layout + +## Features achieved +- [ ] Drop-down menu for showing news from countries wordwide +- [ ] Drop-down menu for showing news for categories +- [ ] Images shown in mobile view only +- [ ] Show / hide images toggle shown in mobile view only +- [ ] Search bar allows user input to display search results +- [ ] User's search terms are highlighed in the results + +## Desired features with more time +- [ ] An option to change text size for accessibility +- [ ] Drop-down menu for news from different sources +- [ ] Drop-down menu for news in different languages +- [ ] A special slideshow gallery of happy / funny articles +- [ ] Trump's fake news +- [ ] Show news on a good to bad sliding scale using a slider +- [ ] When no image replace with a relevant image +- [ ] Add icons above categories +- [ ] Random article generator +- [ ] Focus the selected article and blur / darken the background -Let's create a responsive news reader website. To get the latest news the app will display we are going to use [News API](https://newsapi.org/). As with the Weather and Unsplash APIs, you will need to register with the service to obtain an API key. - -## Objectives - -- [ ] Create a responsive layout that works well and looks good at mobile, tablet and desktop screen sizes. Please create the mobile version first, then tablet and then desktop. - -- [ ] Fetch news articles from News API and display them including title, image, description, publication, date and link to article. - -- [ ] Display images for tablet and desktop screens only - -- [ ] Implement a feature of your choice - -## Stretch goals - -- [ ] Implement pagination which allows you to get the next 20 results and display them - -- [ ] Add search functionality which allows the user to retrieve news about a particular topic - -## Instructions - -- Fork and clone this repo -- Commit your changes frequently with short and descriptive commit messages -- Create a pull request when complete -- We want to see great looking webpages -- Your code should have consistent indentation and sensible naming -- Use lots of concise functions with a clear purpose -- Add code comments where it is not immediately obvious what your code does -- Your code should not throw errors and handle edge cases gracefully. For example not break if server fails to return expected results - -## README.md - -When finished, include a README.md in your repo. This should explain what the project is, how to run it and how to use it. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. diff --git a/countries-options.txt b/countries-options.txt new file mode 100644 index 0000000..b0a01af --- /dev/null +++ b/countries-options.txt @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/countries.txt b/countries.txt new file mode 100644 index 0000000..ba0cf60 --- /dev/null +++ b/countries.txt @@ -0,0 +1,108 @@ +Argentina +ar +Australia +au +Austria +at +Belgium +be +Brazil +br +Bulgaria +bg +Canada +ca +China +cn +Colombia +co +Cuba +cu +Czech Republic +cz +Egypt +eg +France +fr +Germany +de +Greece +gr +Hong Kong +hk +Hungary +hu +India +in +Indonesia +id +Ireland +ie +Israel +il +Italy +it +Japan +jp +Latvia +lv +Lithuania +lt +Malaysia +my +Mexico +mx +Morocco +ma +Netherlands +nl +New Zealand +nz +Nigeria +ng +Norway +no +Philippines +ph +Poland +pl +Portugal +pt +Romania +ro +Russia +ru +Saudi Arabia +sa +Serbia +rs +Singapore +sg +Slovakia +sk +Slovenia +si +South Africa +za +South Korea +kr +Sweden +se +Switzerland +ch +Taiwan +tw +Thailand +th +Turkey +tr +UAE +ae +Ukraine +ua +United Kingdom +gb +United States +us +Venuzuela +ve diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..ef17e55 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/eyes-transparent.png b/images/eyes-transparent.png new file mode 100644 index 0000000..fb06157 Binary files /dev/null and b/images/eyes-transparent.png differ diff --git a/images/eyes-white.png b/images/eyes-white.png new file mode 100644 index 0000000..a5a3757 Binary files /dev/null and b/images/eyes-white.png differ diff --git a/images/eyes-white.xcf b/images/eyes-white.xcf new file mode 100644 index 0000000..e359c15 Binary files /dev/null and b/images/eyes-white.xcf differ diff --git a/images/eyes.png b/images/eyes.png new file mode 100644 index 0000000..c48fd36 Binary files /dev/null and b/images/eyes.png differ diff --git a/images/eyes.xcf b/images/eyes.xcf new file mode 100644 index 0000000..28bcffc Binary files /dev/null and b/images/eyes.xcf differ diff --git a/images/screen-shot.png b/images/screen-shot.png new file mode 100644 index 0000000..124bc08 Binary files /dev/null and b/images/screen-shot.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1de3d63 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + + News Reader + + + + + +
+ +
+
+ +

newsee

+
+
+
+
+ +
+
+
+
+ +
+ + +
+
+
    +
    + + + + +
    +
    + + + + + \ No newline at end of file diff --git a/src/countries-object.js b/src/countries-object.js new file mode 100644 index 0000000..b16e7df --- /dev/null +++ b/src/countries-object.js @@ -0,0 +1,59 @@ +const countries = { + 0: "", + gb: 'United Kingdom', + ar: 'Argentina', + au: 'Australia', + at: 'Austria', + be: 'Belgium', + br: 'Brazil', + bg: 'Bulgaria', + ca: 'Canada', + cn: 'China', + co: 'Colombia', + cu: 'Cuba', + cz: 'Czech Republic', + eg: 'Egypt', + fr: 'France', + de: 'Germany', + gr: 'Greece', + hk: 'Hong Kong', + hu: 'Hungary', + in: 'India', + id: 'Indonesia', + ie: 'Ireland', + il: 'Israel', + it: 'Italy', + jp: 'Japan', + lv: 'Latvia', + lt: 'Lithuania', + my: 'Malaysia', + mx: 'Mexico', + ma: 'Morocco', + nl: 'Netherlands', + nz: 'New Zealand', + ng: 'Nigeria', + no: 'Norway', + ph: 'Philippines', + pl: 'Poland', + pt: 'Portugal', + ro: 'Romania', + ru: 'Russia', + sa: 'Saudi Arabia', + rs: 'Serbia', + sg: 'Singapore', + sk: 'Slovakia', + si: 'Slovenia', + za: 'South Africa', + kr: 'South Korea', + se: 'Sweden', + ch: 'Switzerland', + tw: 'Taiwan', + th: 'Thailand', + tr: 'Turkey', + ae: 'UAE', + ua: 'Ukraine', + gb: 'United Kingdom', + us: 'United States', + ve: 'Venuzuela', + all: 'Worldwide' +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e342392 --- /dev/null +++ b/src/index.js @@ -0,0 +1,219 @@ +/* ====================================================== +DEFINE NODES */ + +const parentNode = document.querySelector(".content__body"); +const articleNode = document.querySelector(".article__list"); +const sectionButtonsNode = document.querySelector(".content__section__buttons"); +const displayJSONNode = document.querySelector(".content__footer"); +const countryMenuNode = document.querySelector(".country"); +const categoriesMenuNode = document.querySelector(".category"); +const categories = ["", "business", "entertainment", "general", "health", "science", "sports", "technology"]; + +/* ====================================================== +FETCH DATA */ + +const loadAPI = function (url) { + fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(body) { + displayDataOnPage(body, url); + }) + .catch(function(error) { + displayErrorToUser(error); + }); +} + +/* ====================================================== +FORMAT AND DISPLAY ARTICLES */ + +const articleTemplate = article => { + const convertedTitle = (article.title !== null) ? highlightFoundWords(article.title) : null; + const title = (article.title !== null) ? `
    ${convertedTitle}
    ` : ""; + const convertedDescription = (article.description !== null) ? highlightFoundWords(article.description) : null; + const description = (article.description !== null) ? `
    ${convertedDescription}
    ` : ""; + // const content = (article.content !== null) ? `
    ${article.content}
    ` : ""; + const author = (article.author !== null) ? `${article.author}` : ""; + const source = (article.source.name !== null) ? `${article.source.name}` : ""; + const separator = (author && source) ? ", " : ""; + const publishedBy = `
    Published by: ${author}${separator}${source}
    `; + const readMoreURL = (article.url !== null) ? `
    READ FULL STORY...
    ` : ""; + // const urlToImage = (article.urlToImage !== null) ? `` : ""; + const urlToImage = (article.urlToImage !== null) ? `` : ""; + const publishedAt = (article.publishedAt !== null) ? `Time: ${convertDate(article.publishedAt)}` : ""; + return ` +
    +
    + ${urlToImage} +
    +
    + + ${title} + +
    +
    + ${description} + ${publishedBy} + ${publishedAt} + ${readMoreURL} +
    +
    + `; +} + + +function displayDataOnPage(body, url) { + articleNode.innerHTML = ""; + displaySearchMessage(url); + body.articles.forEach(function(article) { + const node = document.createElement("li"); + node.innerHTML = articleTemplate(article); + articleNode.appendChild(node); + }); + displayJSONNode.innerHTML = `View JSON`; +} + +/* ///////////////////////////////////////////////////////////////// +CREATE MENUS */ + +const createCountriesMenu = function() { + const menuNode = document.createElement("select"); + menuNode.innerHTML = getCountries().join(""); + countryMenuNode.appendChild(menuNode); + countryMenuNode.addEventListener('change', function(event){ + event.preventDefault(); + categoriesMenuNode[0].selectedIndex = 0; + const url = queryAPI("top-headlines", event.target.value, "", ""); + loadAPI(url); + }); +} + +const createCategoriesMenu = function() { + const menuNode = document.createElement("select"); + menuNode.innerHTML = getCategories().join(""); + categoriesMenuNode.appendChild(menuNode); + categoriesMenuNode.addEventListener('change', function(event){ + event.preventDefault(); + const url = queryAPI("top-headlines", "", event.target.value, ""); + countryMenuNode[0].selectedIndex = 0; + loadAPI(url); + }); +} + +const getCountries = function () { + return Object.keys(countries).map(function(key){ + return `\n`; + }); +} + +const getCategories = function () { + return categories.map(function(item){ + return `\n`; + }); +} + +/* //////////////////////////////////////////////////////////////////// +QUERYING */ + +let bodyURL = ""; +const newsURL = "https://newsapi.org/v2/"; +const apiKey = "756ef978eb384d9cb3ecdab2d9bac0da"; + +const queryAPI = function (type, country="", category="", search="") { + let validCountry = country ? `country=${country}&` : ""; + let validCategory = category ? `category=${category}&` : ""; + let validSearch = search ? `q=${search}&` : ""; + bodyURL = `${newsURL}${type}?${validCountry}${validCategory}${validSearch}apiKey=${apiKey}`; + return bodyURL; +} + +const displayErrorToUser = error => articleNode.innerHTML = error; + +/* ///////////////////////////////////////////////////////////////// +SEARCH FUNCTIONALITY */ + +const navBar = document.querySelector(".content__nav"); +const navButton = document.querySelector(".header__nav__button"); +const navSearch = document.querySelector(".search"); +const searchFormNode = document.querySelector(".header__form"); +const messageNode = document.querySelector(".content__message__wrapper"); +const imageDisplayNode = document.querySelector(".nav__image__display"); + +// search from top nav - click search button for results +searchFormNode.addEventListener("submit", function(event){ + event.preventDefault(); + let searchQuery = navSearch.value.split(" ").join("+"); + loadAPI(queryAPI("everything", "", "", searchQuery)); +}); + +// load search results from 'submit' event +navSearch.addEventListener("submit", function(event){ + event.preventDefault(); + // console.log(111); + // countryMenuNode[0].selectedIndex = 0; + // categoriesMenuNode[0].selectedIndex = 0; + let searchQuery = navSearch.value.split(" ").join("+"); + loadAPI(queryAPI("everything", "", "", searchQuery)); +}); + +// toggle show / hide images +imageDisplayNode.addEventListener("change", function(event){ + event.preventDefault(); + state = event.target.checked ? "block" : "none"; + const articleNodes = document.querySelectorAll("div.article__image"); + articleNodes.forEach(img => img.style.display = state); +}); + +// display message "search results for:" +const displaySearchMessage = function(url) { + messageNode.style.display = "none"; + messageNode.innerHTML = ""; + if (url.indexOf("everything?") >= 0) { + const searchNode = document.createElement("div"); + searchNode.innerHTML = `Search results > "${convertedSearchArray(url).join(" ")}"`; + messageNode.style.display = "block"; + messageNode.appendChild(searchNode); + } else { + if (typeof searchNode === "object") searchNode.innerHTML = ""; + } +} + +// convert search results URL into an array +const convertedSearchArray = function (url) { + let regex = /\A?q=[^&]*/g; + const found = url.match(regex).toString(); + return found.split("=")[1].split("+"); +} + +const highlightFoundWords = function (descriptionText) { + if (bodyURL.indexOf("everything?") >= 0) { + const searchResultsArray = convertedSearchArray(bodyURL); + const descriptionArray = descriptionText.split(" ") + const updatedWords = searchForMatches(descriptionArray, searchResultsArray); + return updatedWords.join(" "); + } else { + return descriptionText; + } +} + +const searchForMatches = function(haystackArray, needleArray) { + const output = haystackArray.map(function(hay){ + const found = needleArray.find(needle => hay.includes(needle)); + return found ? `${hay}` : hay; + }); + return output; +} + +const convertDate = function (string) { + const date = new Date(string); + const formatTime = n => n <10 ? "0" + n : n; + const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + return `${formatTime(date.getHours())}:${formatTime(date.getMinutes())}, ${date.getDate()} ${ months[date.getMonth()]} ${date.getFullYear()}` +} + +/* ///////////////////////////////////////////////////////////////// +INITIALIZE FIRST PAGE */ +createCountriesMenu(); +createCategoriesMenu(); +loadAPI(queryAPI("everything", "", "", "London+travel")); diff --git a/src/sources-object.js b/src/sources-object.js new file mode 100644 index 0000000..8466373 --- /dev/null +++ b/src/sources-object.js @@ -0,0 +1,413 @@ +const getSources = function () { + return Object.keys(sources).map(function(key){ + return `\n`; + }); +} + +const sources = { + 'abc-news': 'ABC News', + 'abc-news-au': 'ABC News (AU)', + 'aftenposten': 'Aftenposten', + 'al-jazeera-english': 'Al Jazeera English', + 'ansa': 'ANSA.it', + 'argaam': 'Argaam' +} + +/* +Ars Technica +Ars Technica +ars-technica +Ary News +Ary News +ary-news +Associated Press +Associated Press +associated-press +Australian Financial Review +Australian Financial Review +australian-financial-review +Axios +Axios +axios +BBC News +BBC News +bbc-news +BBC Sport +BBC Sport +bbc-sport +Bild +Bild +bild +Blasting News (BR) +Blasting News (BR) +blasting-news-br +Bleacher Report +Bleacher Report +bleacher-report +Bloomberg +Bloomberg +bloomberg +Breitbart News +Breitbart News +breitbart-news +Business Insider +Business Insider +business-insider +Business Insider (UK) +Business Insider (UK) +business-insider-uk +Buzzfeed +Buzzfeed +buzzfeed +CBC News +CBC News +cbc-news +CBS News +CBS News +cbs-news +CNBC +CNBC +cnbc +CNN +CNN +cnn +CNN Spanish +CNN Spanish +cnn-es +Crypto Coins News +Crypto Coins News +crypto-coins-news +Daily Mail +Daily Mail +daily-mail +Der Tagesspiegel +Der Tagesspiegel +der-tagesspiegel +Die Zeit +Die Zeit +die-zeit +El Mundo +El Mundo +el-mundo +Engadget +Engadget +engadget +Entertainment Weekly +Entertainment Weekly +entertainment-weekly +ESPN +ESPN +espn +ESPN Cric Info +ESPN Cric Info +espn-cric-info +Financial Post +Financial Post +financial-post +Financial Times +Financial Times +financial-times +Focus +Focus +focus +Football Italia +Football Italia +football-italia +Fortune +Fortune +fortune +FourFourTwo +FourFourTwo +four-four-two +Fox News +Fox News +fox-news +Fox Sports +Fox Sports +fox-sports +Globo +Globo +globo +Google News +Google News +google-news +Google News (Argentina) +Google News (Argentina) +google-news-ar +Google News (Australia) +Google News (Australia) +google-news-au +Google News (Brasil) +Google News (Brasil) +google-news-br +Google News (Canada) +Google News (Canada) +google-news-ca +Google News (France) +Google News (France) +google-news-fr +Google News (India) +Google News (India) +google-news-in +Google News (Israel) +Google News (Israel) +google-news-is +Google News (Italy) +Google News (Italy) +google-news-it +Google News (Russia) +Google News (Russia) +google-news-ru +Google News (Saudi Arabia) +Google News (Saudi Arabia) +google-news-sa +Google News (UK) +Google News (UK) +google-news-uk +Göteborgs-Posten +Göteborgs-Posten +goteborgs-posten +Gruenderszene +Gruenderszene +gruenderszene +Hacker News +Hacker News +hacker-news +Handelsblatt +Handelsblatt +handelsblatt +IGN +IGN +ign +Il Sole 24 Ore +Il Sole 24 Ore +il-sole-24-ore +Independent +Independent +independent +Infobae +Infobae +infobae +InfoMoney +InfoMoney +info-money +La Gaceta +La Gaceta +la-gaceta +La Nacion +La Nacion +la-nacion +La Repubblica +La Repubblica +la-repubblica +Le Monde +Le Monde +le-monde +Lenta +Lenta +lenta +L'equipe +L'equipe +lequipe +Les Echos +Les Echos +les-echos +Libération +Libération +liberation +Marca +Marca +marca +Mashable +Mashable +mashable +Medical News Today +Medical News Today +medical-news-today +Metro +Metro +metro +Mirror +Mirror +mirror +MSNBC +MSNBC +msnbc +MTV News +MTV News +mtv-news +MTV News (UK) +MTV News (UK) +mtv-news-uk +National Geographic +National Geographic +national-geographic +National Review +National Review +national-review +NBC News +NBC News +nbc-news +News24 +News24 +news24 +New Scientist +New Scientist +new-scientist +News.com.au +News.com.au +news-com-au +Newsweek +Newsweek +newsweek +New York Magazine +New York Magazine +new-york-magazine +Next Big Future +Next Big Future +next-big-future +NFL News +NFL News +nfl-news +NHL News +NHL News +nhl-news +NRK +NRK +nrk +Politico +Politico +politico +Polygon +Polygon +polygon +RBC +RBC +rbc +Recode +Recode +recode +Reddit /r/all +Reddit /r/all +reddit-r-all +Reuters +Reuters +reuters +RT +RT +rt +RTE +RTE +rte +RTL Nieuws +RTL Nieuws +rtl-nieuws +SABQ +SABQ +sabq +Spiegel Online +Spiegel Online +spiegel-online +Svenska Dagbladet +Svenska Dagbladet +svenska-dagbladet +T3n +T3n +t3n +TalkSport +TalkSport +talksport +TechCrunch +TechCrunch +techcrunch +TechCrunch (CN) +TechCrunch (CN) +techcrunch-cn +TechRadar +TechRadar +techradar +The American Conservative +The American Conservative +the-american-conservative +The Economist +The Economist +the-economist +The Globe And Mail +The Globe And Mail +the-globe-and-mail +The Guardian (AU) +The Guardian (AU) +the-guardian-au +The Guardian (UK) +The Guardian (UK) +the-guardian-uk +The Hill +The Hill +the-hill +The Hindu +The Hindu +the-hindu +The Huffington Post +The Huffington Post +the-huffington-post +The Irish Times +The Irish Times +the-irish-times +The Jerusalem Post +The Jerusalem Post +the-jerusalem-post +The Lad Bible +The Lad Bible +the-lad-bible +The New York Times +The New York Times +the-new-york-times +The Next Web +The Next Web +the-next-web +The Sport Bible +The Sport Bible +the-sport-bible +The Telegraph +The Telegraph +the-telegraph +The Times of India +The Times of India +the-times-of-india +The Verge +The Verge +the-verge +The Wall Street Journal +The Wall Street Journal +the-wall-street-journal +The Washington Post +The Washington Post +the-washington-post +The Washington Times +The Washington Times +the-washington-times +Time +Time +time +USA Today +USA Today +usa-today +Vice News +Vice News +vice-news +Wired +Wired +wired +Wired.de +Wired.de +wired-de +Wirtschafts Woche +Wirtschafts Woche +wirtschafts-woche +Xinhua Net +Xinhua Net +xinhua-net +Ynet +Ynet +ynet +*/ \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..cc711d8 --- /dev/null +++ b/styles.css @@ -0,0 +1,359 @@ +* { + box-sizing: inherit; +} + +body { + margin: 0; + box-sizing: border-box; + background: rgb(232, 226, 217); + font-family: Arial, Helvetica, sans-serif; + line-height: 1.5em; + letter-spacing: 0.02em; +} + +h1 { + margin: 0; + font-family: Georgia, Times, 'Times New Roman', serif; +} + +.news-app { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* +// HEADER //////////////////////////// +*/ + +.header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + /* background-color: rgb(255, 182, 57); */ + background-color: #1b3e74; + padding: 0.5em 1em; +} + +.header__logo { + width: 55px; + height: 50px; + padding: 0.3em 0 0.3em 0.2em; + vertical-align: center; +} + +.header__logo__wrapper { + display: flex; + flex-direction: row; +} + +.header__logo__text { + font-size: 2em; + margin: 0; + padding: 0.5em 0 0 0.3em; + font-family: 'Handlee', cursive; + vertical-align: center; + color: white; + /* font-family: 'Muli', sans-serif; */ + /* font-family: 'Mukta', sans-serif; */ + /* font-family: 'Itim', cursive; */ +} + +.header__nav { + display: flex; + flex-direction: row; + align-items: flex-end; +} + +.header__nav__sections a { + text-decoration: none; + color: #ffffff; + padding: 0 0.4em 0 0.4em; + opacity:0.6; + background-color: #999999; +} + +.header__nav__sections a:hover { + background-color: #666666; + opacity: 1; +} +select { + top: 46px !important; + background-color: #bedde6; + font-size: 1em; + /* height: 2em; */ + /* position: absolute; + top: 111px; + padding-bottom:20px; */ + /* display: block; !important; */ +} +input[type=text] { + padding: 0.5em; + margin: 1em 0; + width: 12em; + box-sizing: border-box; + border: none; + background-color: #416396; + font-size: 0.9em; + color: white; +} + +input[type=text]:focus { + /* border: 2px solid #ff9900; */ + /* background-color: white; */ + background-color: #0b264f; + color: white; +} + +::placeholder { + color: black; + opacity: 1; +} + + +.header__nav__button { + text-decoration: none; + padding: 0 0 0.7em 0; + border: 0.4em; + font-size: 1.5em; + vertical-align: middle; +} + +.header__nav__button a { + text-decoration: none; + color: #ffffff; + padding: 0 0.4em 0 0.4em; + border: 1em; + opacity: 0.7; +} + +.header__nav__button a:hover { + /* background-color: #666666; */ + opacity: 1; +} + +.nav__image__display { + padding-left: 1.5em; + display: none; +} + +/* /////////////// +// MAIN CONTENT // +////////////////*/ + +.content { + display: flex; + flex-direction: column; + flex: 1; +} + +.content__nav { + display: flex; + flex: 1; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; + text-decoration: none; + list-style: none; +} + +.content__nav li { + padding: 0 0.5em; +} + +.content__body { + flex: 8; + text-align: left; + padding: 1em; +} + +.content__country__wrapper { + /* background-color: rgb(255, 212, 139); */ + background-color: #a4cad5; + display: flex; + flex-direction: row; + align-content: flex-start; + width: 100%; + padding: 1em; +} + +.category { + padding-left: 1.5em; +} + +.content__message__wrapper { + display: none; + background: rgb(232, 226, 217); + padding: 1em; + margin: 0; + width: 100%; +} + +.content___message { + padding: 1em 0 0 0; + margin: 0; +} + +.content__aside { + display: none; + flex: 4; + text-align: center; +} + +.content__footer { + flex: 1; + text-align: left; + padding: 1em; +} + +.key { + font-weight: 700; +} + +.description-text { + font-weight: 100; +} + +.highlighted { + /* Changed on Sunday */ + background-color: rgb(255, 232, 191); + font-weight: bold; + padding: 0.2em; + border: 1px solid #ffc062; + border-radius: 0.2rem; +} + +.article__list { + list-style: none; + padding: 0; +} + +.article__main { + display: flex; + justify-content: flex-start; + flex-direction: column; + /* ADD MARGIN-BOTTOM TO MAIN if you want to separate articles */ + margin-bottom: 2rem; +} + +.article__main li { + padding: 0.3em 0; +} + +.article__header { + display: block; + font-size: 1.2rem; + background: rgb(245, 244, 241); + color: black; + padding: 1rem 1rem; + height: 30%; + margin: 0; +} + +.article__header a { + color: black; + text-decoration: none; +} + +.article__header a:hover { + color: #ff9900; + text-decoration: underline; +} + +.article__image { + display: none; +} + +.article__image__src { + /* ADDED by Mel display: block - to make the a element behave as a block element and properly 'contain' the image. It's naturally an inline element.*/ + padding: 20%; + display: block; + width: 100%; +} + +.article__text { + display: flex; + justify-content: flex-start; + flex-direction: column; + font-size: 1rem; + background: #ffffff; + color: black; + padding: 1rem; + flex: 3; +} + +.article__text a { + /* changed Sunday morning */ + text-decoration: none; + padding: 0.7rem; + line-height: 3rem; + background-color: #ffc062; + color: rgb(120, 46, 0); + font-weight: normal; + border-radius: 0.3rem; + list-style: none; + height: 60% +} + +.article__text a:hover { + background-color: #ff9900; + color: white; +} + +.article__text div { + padding: 0.5em 0; + border: 0; +} + +.display__url { + padding: 0 0 1em 0; +} + +@media (min-width: 768px) { + + .content__body { + padding: 1em 0 1em 1em; + } + .article__list { + display: flex; + flex-flow: row wrap; + } + + .article__list li { + width: 50%; + padding-right: 1em; + } + + .article__image { + min-width: 150px; + display: flex; + flex: 1; + background: #e0e0e0; + padding-top: 0; + } + + .article__image__src { + width: 100%; + border: 0; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + padding-top: 30%; + } + + input[type=text] { + -webkit-transition: width 0.4s ease-in-out; + transition: width 0.4s ease-in-out; + } + + input[type=text]:focus { + width: 20em; + } + + .nav__image__display { + display: initial; + } + + } \ No newline at end of file