1 files changed, 126 insertions, 0 deletions
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;
+    }
+}