/**
* Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
margin: 0; padding: 0;
}
/**
* Basic styling */
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; font-size: 18px; line-height: 1.4; color: $text-color; background-color: $background-color; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal;
}
a {
color: inherit; text-decoration: none;
}
li {
list-style-type: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Radiance-Bold";
}
img {
width: 100%;
}
/**
* Font Awesome */
.fa {
color: inherit;
}
/**
* Header */
.site-banner {
background: #000 url(banner.jpg) center no-repeat; height: 600px;
}
.site-title {
height: 100%; display: flex; align-items: center; justify-content: center; color: $title-color; text-align: center; font-size: 96px; font-family: "Radiance-Bold"
}
.site-nav {
height: 48px; padding: 16px; margin-bottom: 16px; font-size: 32px; box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 1);
}
.nav-content {
display: flex; width: 980px; margin-right: auto; margin-left: auto;
}
.site-nav a {
flex-grow: 1; text-align: center;
}
.site-nav a:hover {
color: $post-title-color;
}
/**
* Page content */
.page-wrapper {
width: 980px; margin-right: auto; margin-left: auto;
}
@media only screen and (max-width: 980px) {
/* For mobile phones: */ .page-wrapper { width: 100%; } .post { margin-bottom: 0 !important; }
}
.site-footer {
position: relative; font-size: 12px; line-height: 1.5; padding-top: 60px; padding-bottom: 20px;
}
.footer-content {
width: 980px; margin-left: auto; margin-right: auto;
}
.footer-heading {
margin-bottom: 20px;
}
.footer-col-wrapper {
display: flex;
}
.footer-col {
flex: 1;
}
/**
* home */
.post {
margin-top: 50px; padding-bottom: 60px;
}
.post::after {
position:absolute; width: 100%; height: 40px; margin-top: 60px; left:0; content: " "; display: block; box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
}
.post:nth-child(3n)::after {
transform: rotate(-0.6deg);
}
.post:nth-child(3n+1)::after {
transform: rotate(0.45deg);
}
.post:nth-child(3n+2)::after {
transform: rotate(-0.45deg);
}
/**
* post */
.post-meta {
padding-right: 20px; color: rgba( $text-color, .7 );
}
.post-meta i {
padding-right: 4px;
}
.post-tag {
padding-right: 10px;
}
.post-title {
font-size: 48px; color: $post-title-color;
}
.post-content {
padding-top: 10px; padding-left: 4px; padding-right: 4px;
}
.post-footer {
padding-top: 10px; padding-bottom: 10px; padding-left: 4px;
}