Very nice layout! I only have two suggestions.
#1) Add the following, so that on smaller devices, the about Matt p element text is aligned left like it is for wider screens. I think it looks better this way.
.intro p {
text-align:left;
}
#2) You should consider grouping all of your similar media queries together. You have several of the same type scattered through your CSS. For example, I see multiple instances of
@media (min-width: 768px)
You should really only have one media query for min-width: 768px and not all of the following which were scattered throughout your CSS.
@media (min-width: 768px) {
.site-header .main-part {
padding-top: 60px;
padding-bottom: 10px;
}
}
@media (min-width: 768px) {
.site-header .main-part .matthew h1,
.site-header .main-part .mullenweg h1 {
font-size: 36px;
}
}
@media (min-width: 768px) {
.site-header .main-part .headshot img {
text-align: left;
}
}
@media (min-width: 768px) {
.site-header .main-part .headshot {
margin-bottom: 0;
}
.site-header .main-part .headshot img {
margin-bottom: -160px;
}
}
@media (min-width: 768px) {
.intro {
padding-top: 100px;
padding-bottom: 80px;
}
}
@media (min-width: 768px) {
.timeline .item {
text-align: left;
}
}
@media (min-width: 768px) {
.timeline .item:nth-of-type(odd) {
margin-top: 100px;
}
}
@media (min-width: 768px) {
.timeline .item:nth-of-type(even) {
margin-top: 25px;
clear: right;
float: right;
}
}
I like to see media queries located at the bottom of a page, but that is personal preference. I would make a single media query for min-width: 768px as follows:
@media (min-width: 768px) {
.site-header .main-part {
padding-top: 60px;
padding-bottom: 10px;
}
.site-header .main-part .matthew h1,
.site-header .main-part .mullenweg h1 {
font-size: 36px;
}
.site-header .main-part .headshot img {
text-align: left;
}
.site-header .main-part .headshot {
margin-bottom: 0;
}
.site-header .main-part .headshot img {
margin-bottom: -160px;
}
.intro {
padding-top: 100px;
padding-bottom: 80px;
}
.timeline .item {
text-align: left;
}
.timeline .item:nth-of-type(odd) {
margin-top: 100px;
}
.timeline .item:nth-of-type(even) {
margin-top: 25px;
clear: right;
float: right;
}
}