$brown: #201a11; $brown: #222; $light: #ccc; $orange: #b53a04; $link_color: #FC5D2B; $link_hover_color: #BD3039; $headline_font_serif: Georgia, 'Times New Roman', serif; $body_p_font: normal 100% / 1.5 "proxima-nova",helvetica,arial,sans-serif; $body_font_color: #6a6a6a; $body_font_light: #b3aeae; $text_accent: #1be223; $archive_p_line_height: 1.6; //$light; $narrow-beta-width: 640px; $narrow-max-width: 700px; $max_width: 1280px; @mixin smcaps { text-transform: uppercase; letter-spacing: 1px; } @mixin plain_a { border: none; text-decoration: none; color: $body_font_color; } @function calc-rem($size) { $remsize: $size/16; @return #{$remsize}rem; } @mixin fontsize($size) { font-size: $size + px; font-size: calc-rem($size); } @mixin generic-sans { font-family: sans-serif; } @mixin fancy-sans { font-family: "proxima-nova",helvetica,arial,sans-serif; } @mixin fancy-sans-bold { font-family: "proxima-nova",helvetica,arial,sans-serif; font-weight: 600; } @mixin fancy-serif { font-family: Georgia, Palatino, serif; } %clearfix { *zoom: 1; &:before { content: " "; display: table; } &:after { content: " "; display: table; clear: both; } } @mixin transparent_class { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity = 90); opacity: 0.9; } @mixin faded_line_after { display: block; content: ""; margin-top: 3em; height: 1px; width: 100%; background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); } //for overriding the above on dark pages: @mixin light_faded_line_after { background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); } @mixin lighter_faded_line_after { background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1)); background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); } //generic constrain function @mixin constrain($size) { max-width: $size; margin-left: auto; margin-right: auto; } //set an element to centered, narrowish column width //used mostly on columns of text @mixin constrain_narrow() { max-width: 90%; margin-left: auto; margin-right: auto; @include breakpoint(beta) { max-width: $narrow-beta-width; } @include breakpoint(gamma) { max-width: $narrow-max-width; } } //set an element to centered, wideish column width @mixin constrain_wide() { max-width: 90%; margin-left: auto; margin-right: auto; @include breakpoint(gamma) { max-width: $breakpoint-gamma; } @include breakpoint(delta) { max-width: $breakpoint-delta; } @include breakpoint(epsilon) { max-width: $max_width; } }