diff options
Diffstat (limited to 'design/sassold/_mixins.scss')
-rw-r--r-- | design/sassold/_mixins.scss | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/design/sassold/_mixins.scss b/design/sassold/_mixins.scss new file mode 100644 index 0000000..9ccd750 --- /dev/null +++ b/design/sassold/_mixins.scss @@ -0,0 +1,163 @@ +$brown: #201a11; +$brown: #222; +$light: #ccc; +$orange: #b53a04; +$link_color: #b53a04; + +$headline_font_serif: mffweb, Georgia, 'Times New Roman', serif; +$fancy_serif: mffweb, Georgia, 'Times New Roman', serif; +$fancy_sans: mffnweb, Helvetica, sans-serif; + + +$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif; +$body_font_color: $brown; +$body_font_light: #b3aeae; +$secondary-link-color: #838383; + +$archive_p_line_height: 1.6; +//$light; +$narrow-beta-width: 720px; +$narrow-max-width: 750px; +$max_width: 1440px; + +@mixin smcaps { + @include fancy_sans; + 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); +} + +@function calc-em($target-px, $context) { + @return $target-px / $context * 1em; +} + +@mixin img_plain { + padding: 0; + max-width: 100%; + background: none; +} +@mixin generic-sans { + font-family: sans-serif; +} +@mixin fancy-sans { + font-family: mffnweb, Helvetica, sans-serif; +} +@mixin fancy-sans-bold { + font-family: mffnbweb, Helvetica, sans-serif; + font-weight: 700; +} +@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; + } +} + +@mixin constrain_archive() { + max-width: 94%; + margin-left: auto; + margin-right: auto; + @include breakpoint(alpha) { + max-width: 380px; + float: left; + } + @include breakpoint(gamma) { + max-width: 680px; + } +} + +//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; + } +} + + + |