Разработка - Макет газеты с ночным режимом | Все для вебмастера

Пишем нашу разметку:

HTML:

<header>
 <h1 class="news_paper_title">
  <a href="#">Southern Press</a>
 </h1>
 <div class="news_paper_location">All things Southern Africa - <span id="time"></span></div>

 <div class="dark_mode_container">
  <label class="dark_mode_switch" for="checkbox">
   <input type="checkbox" id="checkbox" />
   <div class="slider round"></div>
  </label>
 </div>
</header>

<section class="the-grid-section">

 <article class="the-grid">
  <div class="the-grid-content">
   <div class="headline">
    <a href="https://en.wikipedia.org/wiki/Northern_Ndebele_people" target="_blank">
     <h2 class="title">Northern Ndebele people</h2>
     <h3 class="writer">From Wikipedia, the free encyclopedia</h3>
     <figure>
      <img src="https://source.unsplash.com/kGgsoEU4EIw/1280x720" alt="">
      <figcaption><a href="https://unsplash.com/@kreatedmedia" target="_blank">Source: Kreated Media</a></figcaption>
     </figure>
    </a>
   </div>
   <p>The Northern Ndebele people (Northern Ndebele: amaNdebele) are a Bantu-speaking nation and ethnic group in
    Southern Africa, who share a common Ndebele culture and Ndebele language (isiNdebele). The Northern Ndebele were
    historically referred to as the Matabele which derives from the Sesotho expression thebele...</p>
   <div class="button">
    <a href="https://en.wikipedia.org/wiki/Northern_Ndebele_people" target="_blank">Read More</a>
   </div>
  </div>
 </article>

 <article class="the-grid">
  <div class="the-grid-content">
   <div class="headline">
    <a href="https://en.wikipedia.org/wiki/Shaka" target="_blank">
     <h2 class="title">Shaka kaSenzangakhona</h2>
     <h3 class="writer">From Wikipedia, the free encyclopedia</h3>
     <figure>
      <img src="https://source.unsplash.com/2p9waQFqeEY/1280x720" alt="">
      <figcaption><a href="https://unsplash.com/@phillipgold" target="_blank">Source: Phillip Goldsberry</a>
      </figcaption>
     </figure>
    </a>
   </div>
   <p>He was born in the lunar month of uNtulikazi (July) in the year of 1787 near present-day Melmoth, KwaZulu-Natal
    Province. Due to persecution as a result of his illegitimacy, Shaka spent his childhood in his mother's settlements
    where he was initiated into an ibutho lempi (fighting unit). In his early days, Shaka served as a warrior...</p>
   <div class="button">
    <a href="https://en.wikipedia.org/wiki/Shaka" target="_blank">Read More</a>
   </div>
  </div>
 </article>

 <article class="the-grid">
  <div class="the-grid-content">
   <div class="headline">
    <a href="https://en.wikipedia.org/wiki/Mfecane" target="_blank">
     <h2 class="title">Mfecane</h2>
     <h3 class="writer">From Wikipedia, the free encyclopedia</h3>
     <figure>
      <img src="https://source.unsplash.com/phCxE6VblZk/1280x720" alt="">
      <figcaption><a href="https://unsplash.com/@josephanson" target="_blank">Source: Joseph Anson</a></figcaption>
     </figure>
    </a>
   </div>
   <p>Mfecane (isiZulu, Zulu pronunciation: [m̩fɛˈkǀaːne]), also known by the Sesotho name Difaqane or Lifaqane (all
    meaning "crushing, scattering, forced dispersal, forced migration"), was a period of widespread chaos and warfare
    among indigenous ethnic communities in southern Africa during the period between 1815 and about 1840.</p>
   <div class="button">
    <a href="https://en.wikipedia.org/wiki/Mfecane" target="_blank">Read More</a>
   </div>
  </div>
 </article>

 <article class="the-grid">
  <div class="the-grid-content">
   <div class="headline">
    <a href="https://en.wikipedia.org/wiki/Anglo-Zulu_War" target="_blank">
     <h2 class="title">Anglo-Zulu War</h2>
     <h3 class="writer">From Wikipedia, the free encyclopedia</h3>
     <figure>
      <img src="https://source.unsplash.com/8US1_1QMHi0/1280x720" alt="">
      <figcaption><a href="https://unsplash.com/@britishlibrary" target="_blank">Source: British Library</a>
      </figcaption>
     </figure>
    </a>
   </div>
   <p>The Anglo-Zulu War was fought in 1879 between the British Empire and the Zulu Kingdom. Following Lord Carnarvon's
    successful introduction of federation in Canada, it was thought that similar political effort, coupled with military
    campaigns, might succeed with the African kingdoms, tribal areas and Boer republics in South Africa.</p>
   <div class="button">
    <a href="https://en.wikipedia.org/wiki/Anglo-Zulu_War" target="_blank">Read More</a>
   </div>
  </div>
 </article>
</section><!-- the-grid-section -->

Пишем стиль:

SCSS:

@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Playfair+Display&display=swap');

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --primary-color: #2a2a2a;
    --secondary-color: #804814;
    --white-color: white;
    --green-color: #439c47;
    --transition-animation: all .5s;
}

body {
    font-family: 'Crimson Text', serif;
    font-size: 16px;
    color: var(--primary-color);
    background-color: var(--white-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-animation);

    &:hover,
    &:visited,
    &:focus {
        color: var(--primary-color);
    }
}

p {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: justify;
    text-justify: inter-word;
}





/***************************************************
    Create A Dark/Light Mode Switch with CSS Variables
    Source: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
***************************************************/
[data-theme="dark"] {
    --primary-color: white;
    --secondary-color: var(--green-color);
    --white-color: #2a2a2a;

    .button a:hover,
    .button a:focus,
    .button a:active {
        color: white;
    }
}

/*Simple css to style it like a toggle switch*/
.dark_mode_container {
    display: flex;
    position: relative;
    align-items: center;

    .dark_mode_switch {
        display: inline-block;
        height: 34px;
        position: absolute;
        top: -125px;
        right: 0;
        width: 60px;
        
        input {
            display: none;
        }

        input:checked+.slider {
            background-color: var(--green-color);
            
            &:before {
                transform: translateX(25px);
            }
        }
    }
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: var(--transition-animation);
    
    &:before {
        background-color: var(--white-color);
        bottom: 5px;
        content: "";
        height: 25px;
        left: 5px;
        position: absolute;
        transition: var(--transition-animation);
        width: 25px;
    }
}

.slider.round {
    border-radius: 34px;
    
    &:before {
        border-radius: 50%;
    }
}





/**************************************
    Header of Paper
**************************************/
header {
    text-align: center;
    position: relative;

    h1.news_paper_title a {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
        font-size: 60px;
        text-transform: uppercase;
        display: inline-block;
        line-height: 60px;
        margin: 15px 0;
        cursor: pointer;
        color: var(--primary-color);
        transition: var(--transition-animation);
    
        &:hover {
            color: var(--secondary-color);
        }
    }

    .news_paper_location {
        font-weight: 600;
        text-transform: uppercase;
        border-bottom: 1px solid var(--primary-color);
        border-top: 1px solid var(--primary-color);
        padding: 10px 0 10px 0;
    }
}

@media only all and (max-width: 600px) {
    h1.news_paper_title a {
        font-size: 30px;
        line-height: 30px;
        margin: 5px 0;
    }
}






/**************************************
    Content Area of Newspaper
**************************************/
.headline {
    text-align: center;
    line-height: normal;
    font-family: 'Playfair Display', serif;
    display: block;
    margin: 0 auto;
    
    h2.title {
        font-weight: 400;
        font-style: italic;
        font-size: 22px;
        
        &:hover {
            color: var(--secondary-color);
        }
    }
    
    h3.writer {
        font-weight: 700;
        font-size: 12px;

        &:hover {
            color: var(--secondary-color);
        }
        
        &:before {
            border-top: 1px solid var(--primary-color);
            content: '';
            width: 100px;
            height: 7px;
            display: block;
            margin: 0 auto;
        }
        
        &:after {
            border-bottom: 1px solid var(--primary-color);
            content: '';
            width: 100px;
            height: 10px;
            display: block;
            margin: 0 auto;
        }
    }
}

.button a {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 16px;
    padding: 10px 15px;

    &:hover,
    &:focus,
    &:active {
        background: var(--green-color);
        border: 1px solid var(--green-color);
        color: var(--white-color);
    }
}





/**************************************
    Images & iframes
**************************************/
figure {
    cursor: pointer;
    margin: 0 0 20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: var(--transition-animation);

    img {
        max-width: 100%;
        height: auto;
    }

    figcaption {
        font-style: italic;
        font-size: 12px;
        text-align: left;
        transition: var(--transition-animation);

        &:hover {
            padding-left: 10px;
        }
    }

    &:hover {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
    }
}





/***************************************************
    Responsive Framework
    https://codepen.io/HikwaMehluli/full/qeNOVv
***************************************************/
.the-grid-section {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}

.the-grid {
    margin-bottom: 20px;
    transition: all 0.5s;   
}

.the-grid-content {
    padding: 10px;
}

/* the flexbox magic */
@media screen and (min-width: 768px) {
    .the-grid-section {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .the-grid {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex: 0 1 calc(50% - .5em);
            -ms-flex: 0 1 calc(50% - .5em);
                flex: 0 1 calc(50% - .5em);
    }
}

@media screen and (min-width: 1000px) {
    .the-grid {
        -webkit-flex: 0 1 calc(33% - 1em);
            -ms-flex: 0 1 calc(33% - 1em);
                flex: 0 1 calc(33% - 1em);
    }
}

@media screen and (min-width: 1500px) {
    .the-grid {
        -webkit-flex: 0 1 calc(25% - 1em);
            -ms-flex: 0 1 calc(25% - 1em);
                flex: 0 1 calc(25% - 1em);
    }
}

Пишем JS:

JavaScript:

// Get The Date
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

function checkTime() {
    var date = new Date();
    var sufix = '';
    var hours = ('0' + date.getHours()).slice(-2);
    var minutes = ('0' + date.getMinutes()).slice(-2);
    var day = date.getDate();
    var month = monthNames[date.getMonth()];
    var weekday = dayNames[date.getDay()];
    if (day > 3 && day < 21) sufix = 'th';
    switch (day % 10) {
        case 1:
            sufix = "st";
        case 2:
            sufix = "nd";
        case 3:
            sufix = "rd";
        default:
            sufix = "th";
    }
    document.getElementById('time').innerHTML = month + ' ' + day + sufix + ', ' + weekday;
}
setInterval(checkTime(), 1000);





// Dark Mode Switcher
// Source: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
const toggleSwitch = document.querySelector('.dark_mode_switch input[type="checkbox"]');
function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
    }
}
toggleSwitch.addEventListener('change', switchTheme, false);

// Store the user preference for future visits
function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
    }
}

// Check for saved user preference, if any, load on website reopening
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

Смотрим, что у нас получилось:

Разработка Макет газеты с ночным режимом

Ещё ресурсы от baltun