summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJonas Smedegaard <dr@jones.dk>2013-11-24 20:49:14 +0100
committerJonas Smedegaard <dr@jones.dk>2013-11-24 20:49:14 +0100
commitc05b7df84b2c8fe81d88d4760901258d350d05e2 (patch)
tree7ae1e6e81c34e222aafe526c4adb0fb90f8f389c
parenta05ace9beb016040d63e83835ef9001026e945d2 (diff)
Use locally extended normalize snippet, to reduce duplicate size declarations.
-rw-r--r--partials/_base-normalize.scss14
-rw-r--r--partials/_base.scss1
-rw-r--r--partials/_x-normalize.scss250
-rw-r--r--style.scss18
4 files changed, 270 insertions, 13 deletions
diff --git a/partials/_base-normalize.scss b/partials/_base-normalize.scss
new file mode 100644
index 0000000..c0ad83b
--- /dev/null
+++ b/partials/_base-normalize.scss
@@ -0,0 +1,14 @@
+// Normalize integration
+//
+// No styleguide reference.
+@import "compass/typography/vertical_rhythm";
+
+$x-normalize-typography-p-margin: rhythm(1) 0;
+$x-normalize-typography-h1-fontsize: false;
+$x-normalize-typography-h2-fontsize: false;
+$x-normalize-typography-h3-fontsize: false;
+$x-normalize-typography-h1-margin: false;
+$x-normalize-typography-h2-margin: false;
+$x-normalize-typography-h3-margin: false;
+$x-normalize-typography-blockquote-margin: rhythm(1) 40px;
+$x-normalize-lists-lists-margin: rhythm(1) 0;
diff --git a/partials/_base.scss b/partials/_base.scss
index 9c71b6f..ff75a30 100644
--- a/partials/_base.scss
+++ b/partials/_base.scss
@@ -10,3 +10,4 @@ $headerFontSize: 24px;
//
// No styleguide reference.
@import "base-compass";
+@import "base-normalize";
diff --git a/partials/_x-normalize.scss b/partials/_x-normalize.scss
new file mode 100644
index 0000000..4cf2de3
--- /dev/null
+++ b/partials/_x-normalize.scss
@@ -0,0 +1,250 @@
+// fork of compass-h5bp 0.1.2, with overridable sizes
+//
+// No styleguide reference.
+@import "h5bp";
+
+$x-normalize-typography-p-margin: 1em 0 !default;
+$x-normalize-typography-h1-fontsize: 2em !default;
+$x-normalize-typography-h2-fontsize: 1.5em !default;
+$x-normalize-typography-h3-fontsize: 1.17em !default;
+$x-normalize-typography-h4-fontsize: 1em !default;
+$x-normalize-typography-h5-fontsize: 0.83em !default;
+$x-normalize-typography-h6-fontsize: 0.67em !default;
+$x-normalize-typography-h1-margin: 0.67em 0 !default;
+$x-normalize-typography-h2-margin: 0.83em 0 !default;
+$x-normalize-typography-h3-margin: 1em 0 !default;
+$x-normalize-typography-h4-margin: 1.33em 0 !default;
+$x-normalize-typography-h5-margin: 1.67em 0 !default;
+$x-normalize-typography-h6-margin: 2.33em 0 !default;
+$x-normalize-typography-blockquote-margin: 1em 40px !default;
+$x-normalize-typography-pre-fontsize: 1em !default;
+$x-normalize-lists-lists-margin: 1em 0 !default;
+$x-normalize-lists-dd-margin: 0 0 0 40px !default;
+$x-normalize-lists-lists-padding: 0 0 0 40px !default;
+$x-normalize-typography-small-fontsize: 80% !default;
+$x-normalize-typography-supsub-fontsize: 75% !default;
+$x-normalize-typography-sup-top: -0.5em !default;
+$x-normalize-typography-sub-bottom: -0.25em !default;
+
+@mixin x-normalize {
+ @include x-normalize-display;
+ @include x-normalize-base;
+ @include x-normalize-links;
+ @include x-normalize-typography;
+ @include x-normalize-lists;
+ @include x-normalize-embeds;
+ @include x-normalize-figures;
+ @include x-normalize-forms;
+ @include x-normalize-tables;
+}
+
+@mixin x-normalize-display {
+ @include h5bp-display;
+}
+
+@mixin x-normalize-base {
+ @include h5bp-base;
+}
+
+@mixin x-normalize-links {
+ @include h5bp-links;
+}
+
+@mixin x-normalize-typography (
+ $p-margin: $x-normalize-typography-p-margin,
+ $h1-fontsize: $x-normalize-typography-h1-fontsize,
+ $h2-fontsize: $x-normalize-typography-h2-fontsize,
+ $h3-fontsize: $x-normalize-typography-h3-fontsize,
+ $h4-fontsize: $x-normalize-typography-h4-fontsize,
+ $h5-fontsize: $x-normalize-typography-h5-fontsize,
+ $h6-fontsize: $x-normalize-typography-h6-fontsize,
+ $h1-margin: $x-normalize-typography-h1-margin,
+ $h2-margin: $x-normalize-typography-h2-margin,
+ $h3-margin: $x-normalize-typography-h3-margin,
+ $h4-margin: $x-normalize-typography-h4-margin,
+ $h5-margin: $x-normalize-typography-h5-margin,
+ $h6-margin: $x-normalize-typography-h6-margin,
+ $blockquote-margin: $x-normalize-typography-blockquote-margin,
+ $pre-fontsize: $x-normalize-typography-pre-fontsize,
+ $mall-fontsize: $x-normalize-typography-small-fontsize,
+ $supsub-fontsize: $x-normalize-typography-supsub-fontsize,
+ $sup-top: $x-normalize-typography-sup-top,
+ $sub-bottom: $x-normalize-typography-sub-bottom
+ ) {
+
+ // Address font sizes and margins set differently in IE 6/7.
+ // Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ // and Chrome.
+ h1 {
+ font-size: $h1-fontsize;
+ margin: $h1-margin;
+ }
+
+ h2 {
+ font-size: $h2-fontsize;
+ margin: $h2-margin;
+ }
+
+ h3 {
+ font-size: $h3-fontsize;
+ margin: $h3-margin;
+ }
+
+ h4 {
+ font-size: $h4-fontsize;
+ margin: $h4-margin;
+ }
+
+ h5 {
+ font-size: $h5-fontsize;
+ margin: $h5-margin;
+ }
+
+ h6 {
+ font-size: $h6-fontsize;
+ margin: $h6-margin;
+ }
+
+ // Address styling not present in IE 7/8/9, Safari 5, and Chrome.
+ abbr[title] {
+ border-bottom: 1px dotted;
+ }
+
+ // Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ b,
+ strong {
+ font-weight: bold;
+ }
+
+ blockquote {
+ margin: $blockquote-margin;
+ }
+
+ // Address styling not present in Safari 5 and Chrome.
+ dfn {
+ font-style: italic;
+ }
+
+ // Address differences between Firefox and other browsers.
+ // Known issue: no IE 6/7 normalization.
+ hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+ }
+
+ // Address styling not present in IE 6/7/8/9.
+ mark {
+ background: #ff0;
+ color: #000;
+ }
+
+ // Address margins set differently in IE 6/7.
+ p,
+ pre {
+ margin: $p-margin;
+ }
+
+ // Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ code,
+ kbd,
+ pre,
+ samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: $pre-fontsize;
+ }
+
+ // Improve readability of pre-formatted text in all browsers.
+ pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+
+ // Address CSS quotes not supported in IE 6/7.
+ q {
+ quotes: none;
+ }
+
+ // Address `quotes` property not supported in Safari 4.
+ q:before,
+ q:after {
+ content: '';
+ content: none;
+ }
+
+ // Address inconsistent and variable font size in all browsers.
+ small {
+ font-size: $mall-fontsize;
+ }
+
+ // Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ sub,
+ sup {
+ font-size: $supsub-fontsize;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ }
+
+ sup {
+ top: $sup-top;
+ }
+
+ sub {
+ bottom: $sub-bottom;
+ }
+
+}
+
+@mixin x-normalize-lists (
+// $margin-vertical: $x-normalize-lists-margin-vertical,
+ $lists-margin: $x-normalize-lists-lists-margin,
+ $dd-margin: $x-normalize-lists-dd-margin,
+ $lists-padding: $x-normalize-lists-lists-padding
+ ) {
+
+ // Address margins set differently in IE 6/7.
+ dl,
+ menu,
+ ol,
+ ul {
+ margin: $lists-margin;
+ }
+
+ dd {
+ margin: $dd-margin;
+ }
+
+ // Address paddings set differently in IE 6/7.
+ menu,
+ ol,
+ ul {
+ padding: $lists-padding;
+ }
+
+ // Correct list images handled incorrectly in IE 7.
+ nav ul,
+ nav ol {
+ list-style: none;
+ list-style-image: none;
+ }
+
+}
+
+@mixin x-normalize-embeds {
+ @include h5bp-embeds;
+}
+
+@mixin x-normalize-figures {
+ @include h5bp-figures;
+}
+
+@mixin x-normalize-forms {
+ @include h5bp-forms;
+}
+
+@mixin x-normalize-tables {
+ @include h5bp-tables;
+}
diff --git a/style.scss b/style.scss
index 41fa80c..917af18 100644
--- a/style.scss
+++ b/style.scss
@@ -1,37 +1,29 @@
@import "partials/base";
-@import "h5bp";
+@import "partials/x-normalize";
@import "../shared/themes/default/ikiwiki";
@import "compass/typography/lists";
// site defaults
@import "compass/typography/vertical_rhythm";
-@include h5bp-normalize;
+@include x-normalize;
@include establish-baseline;
-// patch normalize to fit rhythm
-dl,
-menu,
-ol,
-ul {
- @include rhythm(1);
-}
-
h1 {
@include adjust-font-size-to(32px);
- @include rhythm;
+ margin: 0;
font-weight: normal;
}
h2 {
@include adjust-font-size-to(24px);
- @include rhythm;
+ margin: 0;
}
h3 {
@include adjust-font-size-to(16px);
- @include rhythm(1);
+ margin: rhythm(1) 0 0;
font-weight: bold;
}