src/components/PostFormatting/PostFormatting.css
/* Every post, on every page, gets this style on its <article> tag */
.post {
position: relative;
width: 80%;
max-width: 710px;
margin: 4rem auto;
padding-bottom: 4rem;
border-bottom: #ebf2f6 1px solid;
word-wrap: break-word;
}
/* Add a little circle in the middle of the border-bottom on our .post
just for the lolz and stylepoints. */
.post::after {
display: block;
content: "";
width: 7px;
height: 7px;
border: #e7eef2 1px solid;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
background: #fff;
border-radius: 100%;
box-shadow: #fff 0 0 0 5px;
}
.post-title a {
text-decoration: none;
}
.post-template .post-title,
.page-template .post-title {
margin-bottom: 0;
}
div.page-template .post-title {
font-size: 5rem;
}
/* Possibly not the right home for this, make sure to move sized versions as well */
h1:not(.post-template) .post-title {
font-size: 3.6rem;
}
.post-excerpt p {
margin: 0;
font-size: 0.9em;
line-height: 1.7em;
}
.read-more {
text-decoration: none;
}
.post-meta {
display: block;
margin: 1.75rem 0 0;
font-family: "Open Sans", sans-serif;
font-size: 1.5rem;
line-height: 2.2rem;
color: #9eabb3;
}
.post-meta a {
color: #9eabb3;
text-decoration: none;
}
.post-meta a:hover {
color: #9eabb3;
text-decoration: underline;
}
.post-template .post-meta,
.page-template .post-meta {
margin: 0;
}
.post-template .post-date,
.page-template .post-date {
padding: 0;
margin: 0;
border: none;
}
/* Tweak the .post wrapper style */
.post-template .post,
.page-template .post {
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
}
/* Kill that stylish little circle that was on the border, too */
.post-template .post::after,
.page-template .post::after {
display: none;
}
/* ==========================================================================
Media Queries - Smaller than 900px
========================================================================== */
@media only screen and (max-width: 900px) {
.post {
font-size: 0.95em;
}
h1:not(.post-template) .post-title {
font-size: 3.2rem;
}
div.page-template .post-title {
font-size: 4.5rem;
}
}
/* ==========================================================================
Media Queries - Smaller than 500px
========================================================================== */
@media only screen and (max-width: 500px) {
.post {
width: auto;
margin: 2rem 16px;
padding-bottom: 2rem;
line-height: 1.65em;
}
h1:not(.post-template) .post-title {
font-size: 2.5rem;
}
div.page-template .post-title {
font-size: 2.8rem;
}
.post-template .post-date,
.page-template .post-date {
display: inline-block;
}
.post-excerpt p {
font-size: 0.85em;
}
.post-meta {
font-size: 1.3rem;
margin-top: 1rem;
}
}