Here lies the special projects written and produced by students in our newsroom.
To create your own new special project:
- Clone thepostathens.github.io to your desktop
- Navigate to the Working-SpecialProject and select New Template
- Duplicate it
- Rename it -This will be the URL of the story/landing page
- When you're done naming the project, move it to the SpecialProjects folder - This allows the project to go live
- 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
- Make sure to press "push origin" every time you make changes and write a summary
- When you are finished, make sure there are no changes left and press "fetch origin"
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;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 |
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>
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>
Bri Lender, Web Development Director
©2019 The Post