Mercurial > hg > mpiwgzen_wide

annotate sass/_init.scss @ 0:a3750d724105 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initital
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Tue, 02 Jun 2015 09:16:36 +0200
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
2 // Initialization partial
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
3 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
4 // To make it easier to use all variables and mixins in any Sass file in this
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
5 // theme, each .scss file has a @import "init" declaration. And this _init.scss
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
6 // file is in charge of importing all the other partials needed for the theme.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 // This initialization partial is organized in this way:
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
9 // - First we set any shared Sass variables.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
10 // - Next we import Compass plug-ins (Sass mixin libraries).
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
11 // - Last we define our custom mixins for this theme.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
12 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
13
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
14
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 // =============================================================================
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 // Variables
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
17 // =============================================================================
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
18
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
19 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
20 // Legacy IE support
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
22 // These variables are used by many mixins to add additional CSS to support
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 // specific versions of IE or specific vendor prefixes.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
25 // IE6-7 don't support box-sizing: border-box. We can fix this in 1 of 3 ways:
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 // - Drop support for IE 6/7. :-) Set $legacy-support-for-ie6
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
27 // and $legacy-support-for-ie7 to false.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
28 // - (Preferred) Install the box-sizing polyfill and set the variable below to
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 // the absolute path URL to the boxsizing.htc file.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
30 // @see https://github.com/Schepp/box-sizing-polyfill
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
31 // $box-sizing-polyfill-path: "/path/to/boxsizing.htc";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 // - Use the same CSS unit for grid and gutter width in resonsive-sidebars.scss
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 // (use px for both or use % for both) and set the box-sizing variable to content-box.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
34 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
35 // Zen does not require special handling for IE8 or later. But Compass uses that
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 // variable for a couple edge cases. We include it for completeness sake. See
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
37 // the documentation at http://compass-style.org/reference/compass/support/
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 $legacy-support-for-ie6: false;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
39 $legacy-support-for-ie7: false;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
40 $legacy-support-for-ie8: true;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
41
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
42
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
43 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
44 // Font faces, stacks and sizes.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
45 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
46
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
47 // Compass' vertical_rhythm extension is a powerful tool to set up a vertical
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
48 // rhythm for your entire page. You can see some of its mixins and functions in
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 // use in the normalize.scss file.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
50 // @see http://compass-style.org/reference/compass/typography/vertical_rhythm/
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
51
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 $base-font-size: 16px; // The font size set on the root html element.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 $base-line-height: 24px; // This line-height determines the basic unit of vertical rhythm.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
54
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
55 $h1-font-size: 2 * $base-font-size;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 $h2-font-size: 1.5 * $base-font-size;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 $h3-font-size: 1.17 * $base-font-size;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
58 $h4-font-size: 1 * $base-font-size;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
59 $h5-font-size: 0.83 * $base-font-size;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
60 $h6-font-size: 0.67 * $base-font-size;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
61
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
62 // The following font family declarations are based on the Microsoft core web
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
63 // fonts which are common fonts available on most computer systems. The DejaVu
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 // and Nimbus Sans fonts are commonly available on Linux systems where the MS
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
65 // fonts are less common. Tahoma and Helvetica are also widely available.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
66 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
67 // A user's web browser will look at the comma-separated list and will
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
68 // attempt to use each font in turn until it finds one that is available
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
69 // on the user's computer. The final "generic" font (sans-serif, serif or
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
70 // monospace) hints at what type of font to use if the web browser doesn't
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 // find any of the fonts in the list.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
72
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
73 // First, let's create some font stacks.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
74 $times-new-roman: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
75 $times: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
76 $georgia: Georgia, "Times New Roman", "DejaVu Serif", serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
77
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
78 $verdana: Verdana, Tahoma, "DejaVu Sans", sans-serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 $tahoma: Tahoma, Verdana, "DejaVu Sans", sans-serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 $helvetica: Helvetica, Arial, "Nimbus Sans L", sans-serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
81 $arial: Arial, Helvetica, "Nimbus Sans L", sans-serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
82
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
83 // For an explanation of why "sans-serif" is at the end of this list, see
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
84 // http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
85 $courier: "Courier New", "DejaVu Sans Mono", monospace, sans-serif;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
86
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
87 // Now create some variables for the font stacks we want to use on this site.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
88 $base-font-family: $verdana; // The font family set on the html element.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
89 $font-body: $verdana;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
90 $font-monospace: $courier;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
91
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
92
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
93 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
94 // Colors, etc.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
95 //
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
96
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
97 // The amount lists, blockquotes and comments are indented.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
98 $indent-amount: 30px;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
99
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
100 // The height of the navigation container.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
101 $nav-height: 3em;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
102
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
103 // Tab styling.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
104 $tabs-container-bg: #fff;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
105 $tabs-border: #bbb;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
106
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
107
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
108 // =============================================================================
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
109 // Partials to be shared with all .scss files.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
110 // =============================================================================
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
111
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
112 // Add Compass' IE and vendor prefix support variables.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
113 @import "compass/support";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
114 // Better than Drupal's clearfix.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
115 @import "compass/utilities/general/clearfix";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
116 // See http://compass-style.org/help/tutorials/spriting/
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
117 @import "compass/utilities/sprites";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
118 // Use one CSS3 mixin instead of multiple vendor prefixes.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
119 @import "compass/css3";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
120 // Helps set up a vertical rhythm.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
121 @import "compass/typography/vertical_rhythm";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
122 // Add the Zen Grids responsive layout mixins.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
123 @import "zen";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
124
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
125 // Now we add our custom helper mixins.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
126 @import "mixins";