Files
markamoser.com/source/assets/css/all.scss
2014-09-20 13:55:31 -05:00

160 lines
2.3 KiB
SCSS

@charset "utf-8";
@import "settings";
@import "imports";
body {
// background: $offwhite url(/assets/img/bg/white_wall_hash.png);
color: $dark;
font-family: $main_font;
font-size: 16px;
}
.spacer-20 { margin: 20px 0 0 0; }
.spacer-50 { margin: 50px 0 0 0; }
.spacer-100{ margin: 100px 0 0 0; }
header{
background: $dark; // url(/assets/img/bg/congruent_outline.png);
color: $offwhite;
width: 100%;
height: auto;
position: relative;
}
header nav{
overflow: hidden;
display: inline-block;
margin: 10px 0 0 0;
padding: 13px 0px;
}
header ul{
list-style: none;
margin-left: 0;
padding: 0;
}
header ul li{
float: left;
margin-left: 0;
font-size: 16px;
letter-spacing: 1px;
}
header ul.social{
position: absolute;
top: 13px;
right: 0px;
margin: 10px 0 0 0;
}
header a {
text-decoration: none;
color: $offwhite;
padding: 0 10px;
}
header a:hover {
color: $offwhite;
text-decoration: none;
border-bottom: 4px solid $accent_color;
}
.post_footer {
font-size: .75em;
margin: 50px 0 0 0;
color: $grey;
font-family: $accent_font;
}
.social a:hover {
text-decoration: none;
border: none;
color: $accent_color;
}
.player {
width: 100%;
margin: 50px 0;
}
a {
color: $dark;
text-decoration: underline;
}
a:hover{
color: $accent_color;
}
.side-links {
font-family: $accent_font;
text-align: right;
font-size: .85em;
}
.side-links ul {
margin: 0 0 20px 0;
padding: 0;
}
.side-links ul li {
list-style: none;
}
.side-links a {
color: $dark;
font-weight: bolder;
text-decoration: none;
}
.side-links a:hover{
color: $accent_color;
text-decoration: none;
}
.poster {
width: 100%;
height: 300px;
padding: 0 auto;
background-position: center 0;
}
@media all and (min-width: 768px) {
.poster {
width: 100%;
height: 300px;
background-position: center 0;
}
}
@media all and (max-width: 1280px) and (min-width: 768px) {
.poster {
width: 100%;
height: 300px;
background-position: center 0;
}
}
@media all and (max-width: 1280px) and (min-width: 992px) {
.poster {
width: 100%;
height: 400px;
background-position: center 0;
}
}
@media all and (min-width: 1280px ) {
header {
width: 1280px;
margin: 0 auto;
}
.poster {
width: 1280px;
margin: 0 auto;
height: 400px;
background-position: 0 0;
}
}