From 1596c642731e5839da942c7727bbc1fa8016fdee Mon Sep 17 00:00:00 2001 From: luxagraf Date: Thu, 27 Sep 2018 11:33:59 -0500 Subject: version 9 of stylesheet --- design/sass/v8/_mixins.scss | 126 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 design/sass/v8/_mixins.scss (limited to 'design/sass/v8/_mixins.scss') diff --git a/design/sass/v8/_mixins.scss b/design/sass/v8/_mixins.scss new file mode 100644 index 0000000..0e29edf --- /dev/null +++ b/design/sass/v8/_mixins.scss @@ -0,0 +1,126 @@ +$brown: #201a11; +$brown: #222; +$light: #ccc; +$orange: #b53a04; +$link_color: #b53a04; +$body_font: $brown; +$body_font_light: #b3aeae; +//$light; + +$max_width: 1280px; + +@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; +} + +@mixin img_plain { + padding: 0; + max-width: 100%; + background: none; +} + +@mixin generic-sans { + font-family: sans-serif; +} + +@mixin fancy-sans { + font-family: Helvetica, sans-serif; +} + +@mixin fancy-sans-bold { + font-family: Helvetica, sans-serif; + font-weight: 600; +} + +%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: 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: $breakpoint-gamma; + } + @include breakpoint(delta) { + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + max-width: $max_width; + } +} -- cgit v1.2.3-70-g09d2