summaryrefslogtreecommitdiff
path: root/design/sassold/_mixins.scss
diff options
context:
space:
mode:
Diffstat (limited to 'design/sassold/_mixins.scss')
-rw-r--r--design/sassold/_mixins.scss163
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;
+ }
+}
+
+
+