diff options
Diffstat (limited to 'design/sass/_mixins.scss')
-rw-r--r-- | design/sass/_mixins.scss | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss new file mode 100644 index 0000000..737f157 --- /dev/null +++ b/design/sass/_mixins.scss @@ -0,0 +1,94 @@ +$brown: #201a11; +$light: #ccc; +$orange: #b53a04; +$body_font: $brown; +$body_font_light: #b3aeae; +//$light; + + +@mixin smcaps { + text-transform: uppercase; + letter-spacing: 1px; +} + +@function calc-em($target-px, $context) { + @return $target-px / $context * 1em; +} + +@mixin fontsize($size: 24, $base: 16) { + font-size: $size + px; + font-size: ($size / $base) * 1rem; +} + +%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)); +} + +//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: 640px; + } + @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: 960px; + } + @include breakpoint(delta) { + max-width: 1170px; + } +} |