// Variables // // Set variables for this site before a library sets its !default value. // Font faces, stacks and sizes. // // Font styling and line heights are controlled by the several variables that // used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`. // These variable and mixins are documented on the [Typey // homepage](https://github.com/jptaranto/typey). // The font size set on the root html element. $base-font-size: 22px; $base-font-size-2: 18px; // The base line height determines the basic unit of vertical rhythm. $base-line-height: 31px; $base-line-height-2: 25px; $base-multiplier: $base-font-size / $base-font-size-2; $xxl-2: 34px * $base-multiplier; $xl-2: 28px * $base-multiplier; $l-2: 22px * $base-multiplier; $m-2: 18px * $base-multiplier; $s-2: 16px * $base-multiplier; $xs-2: 14px * $base-multiplier; // The font sizes in our type hierarchy as tee shirt sizes. $font-size: ( xxl: 28px, xl: 26px, l: 24px, m: $base-font-size, s: 18px, xs: 16px, xxl-2: $xxl-2, xl-2: $xl-2, l-2: $l-2, m-2: $m-2, s-2: $s-2, xs-2: $xs-2 ); // Typey allows you to alter font weights site-wide with this map. $font-weight: ( bold: bold, medium: 500, normal: normal, light: 300, lighter: lighter, ); // The following font family declarations use widely available fonts. // A user's web browser will look at the comma-separated list and will // attempt to use each font in turn until it finds one that is available // on the user's computer. The final "generic" font (sans-serif, serif or // monospace) hints at what type of font to use if the web browser doesn't // find any of the fonts in the list. // Serif font stacks. $times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif; $times: Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif; $georgia: Georgia, 'Times New Roman', 'DejaVu Serif', serif; $garamond: 'Garamond Premier Pro', 'Adobe Garamond', Garamond, Charter, 'Times New Roman', serif; // Sans-serif font stacks. $verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif; $tahoma: Tahoma, Verdana, 'DejaVu Sans', sans-serif; $helvetica: Helvetica, Arial, 'Nimbus Sans L', sans-serif; $arial: Arial, Helvetica, 'Nimbus Sans L', sans-serif; $impact: Impact, 'Arial Narrow', Helvetica, sans-serif; $lucida: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif; $futura: Futura, 'Century Gothic', AppleGothic, sans-serif; // Monospace font stacks. // For an explanation of why "sans-serif" is at the end of this list, see // http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ //$menlo: Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif; $menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif; // The font faces you specify in the $typefaces map can be used in the // typeface() mixin. $typefaces: ( body: ( font-family: $garamond, ), headings: ( font-family: $futura, ), monospace: ( font-family: $menlo, ), compact: ( font-family: $impact, weight: bold, case: uppercase, // We could also specify the following property: // letter-spacing: .5px, ), ); // Output a horizontal grid to help with debugging typography. $typey-debug: false; // The length unit in which to output font size and margin values. // Supported values: px, em, rem. $base-unit: 'rem'; // px fallbacks for rem units are needed for IE 8 and earlier. $rem-fallback: false; // Breakpoints // // Use the `respond-to()` mixin to use named breakpoints. Documentation is // available in the [Breakpoint wiki // pages](https://github.com/at-import/breakpoint/wiki/Respond-To). @include add-breakpoint(xxxs, (333px, 'no-query' true)); @include add-breakpoint(xxs, (444px, 'no-query' true)); @include add-breakpoint(xs, (555px, 'no-query' true)); @include add-breakpoint(s, (666px, 'no-query' true)); @include add-breakpoint(m, (777px, 'no-query' true)); @include add-breakpoint(l, (888px, 'no-query' true)); @include add-breakpoint(xl, (999px, 'no-query' true)); @include add-breakpoint(xxl, (1111px)); @include add-breakpoint(xxxl, (1222px)); // Output media queries where the above px are converted to ems. // @include breakpoint-set('to ems', true); // Layout // The max content width (the main content area). $max-content-width: 740px; // The default left/right gutter/padding. $zen-gutters: 20px; // See $include-rtl below. $zen-rtl-selector: '[dir="rtl"]'; // Miscellaneous variables // // `$indent-amount` controls the amount lists, blockquotes and comments are indented. // // `$include-rtl` controls whether RTL styles are output. // // weight: 10 $indent-amount: 2 * $base-font-size; $include-rtl: false; // Automatically turn off Zen Grids' RTL support if $include-rtl is false. @if not $include-rtl { $zen-rtl-selector: false !global; }