Mobile First Generic Layout 2

index.html

<div class="magazine">
  <header class="magazine__header">
    <div class="logo">Stuuuuuuuff</div>
    <nav class="navigation">
      <a href="/home">Home</a>
      <a href="/team">Team</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <section class="content topper">
      <div class="content__wrapper">
        <div class="title">Cool stuff from all over the internet</div>
        <p>Pages that you can scroll through. Lots of images and text. With links of course, so if you do reach the bottom of a thread, you can quickly find another to carry on your scrolling.</p>
        <div class="content__links">
          <a href="/scroll">Scroll</a>
          <a href="/share">Share</a>
        </div>
      </div>
      <img class="content__image" src="https://www.tate.org.uk/art/images/work/T/T03/T03257_10.jpg" alt="Lobster Phone">
    </section>
    <section class="content">
      <img class="content__image" src="https://frieze.com/sites/default/files/editorial/mo-0158847d.jpg" alt="Meret Oppenheim">
      <div class="content__wrapper">
        <div class="title">Head scratching type stuff</div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eligendi aperiam excepturi atque ipsam fuga officia vel. Ullam eligendi odio ducimus nobis similique vel temporibus at facilis, recusandae sed iure?</p>
        <div class="content__links">
          <a href="/article1">Read More</a>
        </div>
      </div>
    </section>
    <section class="content">
       <img class="content__image" src="https://i2.wp.com/mossandfog.com/wp-content/uploads/2018/01/nancy-fouts-moss-and-fog-cover.jpg?fit=1200%2C693&ssl=1" alt="Moss and Fog">
      <div class="content__wrapper">
        <div class="title">Soul searching type stuff</div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eligendi aperiam excepturi atque ipsam fuga officia vel. Ullam eligendi odio ducimus nobis similique vel temporibus at facilis, recusandae sed iure?</p>
        <div class="content__links">
          <a href="/article2">Read More</a>
        </div>
      </div>
    </section>
    <section class="content">
      <img class="content__image" src="https://ds1.static.rtbf.be/article/image/1240x800/d/b/4/7240357ba5f7b7b66c5bc7090a5f9627-1450438211.jpg" alt="Meret Oppenheim">
      <div class="content__wrapper">
        <div class="title">Life affirming type stuff</div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eligendi aperiam excepturi atque ipsam fuga officia vel. Ullam eligendi odio ducimus nobis similique vel temporibus at facilis, recusandae sed iure?</p>
        <div class="content__links">
          <a href="/article3">Read More</a>
        </div>
      </div>
    </section>
  </main>
</div>

mobile-first-generic-layout-2.markdown

Mobile First Generic Layout 2

A Pen by Charlotte Payne on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap);

body {
  margin: 0;
}

.magazine {
  display: grid;
  place-content: center;
  font-family: 'Noto Sans TC', sans-serif;
}

.magazine__header {
  margin: auto;
  font-size: 1.2rem;
  @media(min-width: 768px) {
    display: flex;
    margin: 0;
    padding: 2rem 4rem;
    justify-content: space-between;
    font-size: 1.5rem;
  }
}

.logo {
  font-size: 2rem;
  margin: 1rem 0;
  border-bottom: 2px solid currentColor;
  font-weight: bold;
  @media(min-width: 768px) {
    margin: 0;
    font-size: 1.5rem;
  }
}

.navigation {
  display: flex;
  margin-bottom: 1rem;
  place-content: space-between;
  
  @media(min-width: 768px) {
    margin-bottom: 0;
  }
  
  & > a {
    border-bottom: 2px solid transparent;
    text-decoration: none;
    color: black;
    
    &:hover {
      border-bottom: 2px solid currentColor;
    }
    
    @media(min-width: 768px) {
      margin-left: 1rem;
    }
  }
}

.topper {
  background: whitesmoke;
  
  & .title {
    font-weight: bold;
  }
  
  & .content__image {
    margin-top: 1rem;
    
    @media(min-width: 768px) {
      margin: 0;
    }
  }
  
  & > p {
    @media(min-width: 768px) {
      margin: 2rem 0 1rem;
    }
  }
  
  & .content__wrapper {
    @media(min-width: 768px) {
      padding-right: 2rem;
    }
  }
}

.content {
  padding: 1rem 2rem;
  
  &:nth-of-type(odd) {
    background: whitesmoke;    
  }
  
  &:nth-of-type(even) .content__wrapper {
    @media(min-width: 768px) {     
      padding-right: 2rem;
      order: -1;
    }
  }

  &:nth-of-type(odd):not(.topper) .content__wrapper {
    @media(min-width: 768px) {
      padding-left: 2rem;
    }
  }
  
  @media(min-width: 768px) {
    display: flex;
    padding: 3rem 4rem;
  }
  
  &:hover:not(.topper) .title {
    text-decoration: underline;
  }
  
  & > p {
    font-size: 0.9rem;
    
    @media(min-width: 768px) {
      font-size: 1rem;
    }
  }
}

.content__image {
  margin: 1rem 0;
  max-width: 100%;
 
  @media(min-width: 768px) {  
    margin: 0;
    width: 50%;
    height: 420px;
    object-fit: contain;
  }
}

.content__wrapper {
  @media(min-width: 768px) {
    margin: auto 0;
  }
}

.title {
  margin: auto;
  font-size: 1.5rem;
  @media(min-width: 768px) {
    margin: 0;
    font-size: 2.5rem;
  }
}

.content__links {
  display: flex;
  
  & > a {
    min-width: 45%;
    padding: 5px;
    border: solid currentColor 2px;
    border-radius: 10px;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
    color: white;
    background: grey;

    &:hover {
      border: solid black 1.5px;
      color: black;
      background: none;
    }
  
    @media(min-width: 768px) {
      max-width: 40%;
      padding: 10px;
      font-size: 1rem;
    }
  }
}