The Post's Special Projects

Here lies the special projects written and produced by students in our newsroom.

Getting started

To create your own new special project:

1. Clone thepostathens.github.io to your desktop
2. Navigate to the Working-SpecialProject and select New Template
• Duplicate it
• Rename it -This will be the URL of the story/landing page
3. When you're done naming the project, move it to the SpecialProjects folder - This allows the project to go live
4. Open the GitHub application and type in a summary of what you did - You can do this throughout your time working on the project so you can go back to certain places you saved
5. Make sure to press "push origin" every time you make changes and write a summary
6. When you are finished, make sure there are no changes left and press "fetch origin"

Style Guide

Fonts:

The Post has two main fonts for special projects. Montserrat is the standard sans serif font, while Playfair Display is the serif font. In some cases, it's okay to use different fonts for design purposes with good reason.

Montserrat

font-family: "Montserrat", Arial, sans-serif;

Playfair Display

font-family: "Playfair Display", Georgia, serif;

Colors:

Below outlines the hex code colors for all the different staff sections as well as The Post's black color used in the logo and on the main website.

Swatch	Name	Hex
	"The Post" black	#282828
	News blue	#6ab7de
	Culture magenta	#ea148c
	Opinion orange	#f27f30
	The Beat yellow	#d8bd3f
	Sports red	#c8433a
	Multimedia green	#065c42
	Projects purple	#644d94

Image and video blocks:

Make sure all photos are RGB and aren't too big. Usually the longest side of the photo should be no more than 1,000 pixels.

CENTER:

<div class="oneimg_center"><img src="#" alt="Describe image here" style="width: 100%"> <p class="photog">photographers name | TITLE HERE</p><p class="pcut">image description here</p> </div>

LEFT:

<div class="oneimg_left"><img src="#" alt="Describe image here" style="width: 100%"> <p class="photog">photographers name | TITLE HERE</p><p class="pcut">image description here</p> </div> 

RIGHT:

<div class="oneimg_right"><img src="#" alt="Describe image here" style="width: 100%"> <p class="photog">photographers name | TITLE HERE</p><p class="pcut">image description here</p> </div> 

FULL:

<div class="oneimg_full"><img src="#" alt="Describe image here" style="width: 100%"> <p class="photog">photographers name | TITLE HERE</p><p class="pcut">image description here</p> </div>

Pullquotes:

CENTER:

<!-- <blockquote class="pq_center">“QUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HERE”<span class="attribution">-name here</span></blockquote>

LEFT:

<!-- <blockquote class="pq_left">“QUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HERE”<span class="attribution">-name here</span></blockquote>

RIGHT:

<!-- <blockquote class="pq_right">“QUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HEREQUOTE HERE”<span class="attribution">-name here</span></blockquote>

Author

Bri Lender, Web Development Director

Copyright

©2019 The Post

Updated April 2020