Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 2 of Works Skins
Collections:
Ao3 Skins
Stats:
Published:
2020-05-24
Words:
537
Chapters:
1/1
Comments:
10
Kudos:
113
Bookmarks:
127
Hits:
7,136

Newspaper Article

Summary:

Newspaper work skin with responsive columns so it works on desktop AND mobile baby!

Notes:

(See the end of the work for other works inspired by this one.)

Work Text:

Let's start with a preview of the work skin, you can play with the browser size to see how it reacts:

 

The Daily Journal

Florida Man Bites Crocodile

"Super tasty!" he claims "kinda chewy though"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula enim, sollicitudin nec commodo feugiat, mollis vel metus. Curabitur ornare erat nec blandit pulvinar. Pellentesque in molestie quam. Quisque auctor erat sed velit hendrerit elementum. Morbi est risus, vestibulum in enim in, suscipit dictum nisi. Pellentesque faucibus facilisis urna, hendrerit varius lacus ultricies at. Donec a libero accumsan, mollis quam eu, luctus ligula. Vestibulum pretium elit magna, quis finibus justo tempus ut. Vivamus bibendum nibh vel tortor tincidunt blandit at porta felis. Vestibulum nec cursus ligula.

Nulla facilisi. Proin eu consequat orci. Nam ac magna viverra, interdum justo ut, tincidunt elit. Ut eu efficitur metus. Sed ultrices aliquam magna, ut sagittis nunc. Nulla at ornare neque. Mauris imperdiet ut purus eu convallis. Maecenas sit amet placerat libero, ac efficitur erat. Suspendisse potenti. Aliquam in rutrum odio. Cras metus orci, efficitur at hendrerit id, accumsan quis est. In ornare, urna ut mollis pretium, sem dui condimentum massa, et dictum lorem lectus in odio. Donec eleifend faucibus metus, quis viverra tellus varius sit amet. In a luctus felis.

Vivamus vestibulum arcu id lectus gravida volutpat. Donec convallis eros vel nulla molestie pulvinar. Praesent luctus faucibus dui, ut tincidunt urna accumsan sit amet. Vestibulum malesuada placerat massa. Nunc viverra aliquet bibendum. Vestibulum nisi diam, vulputate non interdum in, placerat vitae erat. Suspendisse eget egestas turpis.

 

Now here's the css you have to put in the work skin you're creating:

#workskin .box {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25em;
}

#workskin .papername {
  text-transform: uppercase;
  font-size: 2.188em;
  text-align: center;
  font-family: Georgia, serif;
  font-weight: bold;
  line-height: 90%;
  margin-bottom: 0.938em;
}

#workskin .atitle {
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-family: Impact, Charcoal, sans-serif;
  line-height: 90%;
  margin-top: -0.3em;
}

#workskin .subtitle {
  font-size: 0.938em;
  color: #4f4f4f;
  margin-top: -2.813em;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

#workskin .article {
  column-count: 3;
  column-width: 150px;
  column-gap: 2.5em;
  column-rule: 0.063em solid #c3c3c3;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

A lot of what's here is up to personal taste and can easily be changed into other colors, fonts and sizes.

The article section has the column settings: 
-webkit-columns is defining the maximum number of columns (3) and the minimum width of those columns (150px)
column-gap defines the space between each column (2.5em)
column-rule defines the thickness of the vertical border (0.063em), its pattern (solid) and its color (#c3c3c3)

 

And now how you'll be writing the html to incorporate it in the text:

<div class="box">      <- here you're setting the box where the article will be in, good to define the width and alignment

<p class="papername">The Daily Journal</p>     <- the newspaper name

<p class="atitle">Florida Man Bites Crocodile</p>     <- the title

<p class="subtitle">"Super tasty!" he claims "kinda chewy though"</p>     <- subtitle 
<div class="article">     <- div class to allow the columns, and then text
<p>Lorem ipsum dolor sit amet...</p>

</div></div>     <-don't forget to close the two divs (box and article) after your text!

 

Series this work belongs to:

Works inspired by this one: