Permalink
Browse files

[refs #94] First try at custom quote marks

  • Loading branch information...
1 parent 53a6890 commit 5ef9ff680c0568a050792e659303586a205ea65c @csswizardry committed Jan 13, 2013
Showing with 82 additions and 13 deletions.
  1. +23 −2 _vars.scss
  2. +59 −11 inuit.css/base/_quotes.scss
View
@@ -12,14 +12,14 @@
* Debug mode will visually highlight any potential markup/accessibility quirks
* in the browser. Set to `true` or `false`.
*/
-$debug-mode: false;
+$debug-mode: false!default;
/**
* Do you want all elements to adopt `box-sizing:border-box;` as per
* paulirish.com/2012/box-sizing-border-box-ftw ?
*/
-$global-border-box: true;
+$global-border-box: true!default;
/**
@@ -80,6 +80,27 @@ $micro-size: 10px!default;
/**
+ * English quote marks?
+ */
+$english-quotes: true!default;
+
+/**
+ * If you want English quotes then please do not edit these; they’re only here
+ * because Sass needs them.
+ */
+$open-quote: null;
+$close-quote: null;
+
+/**
+ * If you need non-English quotes, please alter the following values accordingly:
+ */
+@if $english-quotes != true{
+ $open-quote: «;
+ $close-quote: »;
+}
+
+
+/**
* Brand stuff
*/
$brand-color: #4a8ec2!default;
@@ -2,20 +2,68 @@
$QUOTES
\*------------------------------------*/
/**
+ * If English quotes are set in `_vars.scss`, define them here.
+ */
+@if $english-quotes == true{
+ $open-quote: “;
+ $close-quote: ”;
+}
+
+
+/**
* Big up @boblet: html5doctor.com/blockquote-q-cite
*/
-q{ quotes:"" "" "" ""; }
-q:before{ content:""; content:open-quote; }
-q:after{ content:""; content:close-quote; }
+/**
+ * Inline quotes.
+ */
+q{
+ quotes:"" "" "#{$open-quote}" "#{$close-quote}";
+
+ &:before{
+ content:"";
+ content:open-quote;
+ }
+ &:after{
+ content:"";
+ content:close-quote;
+ }
+
+ q:before{
+ content:"";
+ content:open-quote;
+ }
+ q:after{
+ content:"";
+ content:close-quote;
+ }
+}
-q q:before{ content: ""; content: open-quote; }
-q q:after{ content: ""; content: close-quote; }
+blockquote{
+ quotes:"#{$open-quote}" "#{$close-quote}";
+
+ p:before{
+ content:"#{$open-quote}";
+ content:open-quote;
+ }
+ p:after{
+ content:"";
+ content:no-close-quote;
+ }
+ p:last-of-type:after{
+ content:"#{$close-quote}";
+ content:close-quote;
+ }
-blockquote{ quotes: "" ""; }
-blockquote p:before{ content: ""; content: open-quote; }
-blockquote p:after{ content: ""; content: no-close-quote; }
-blockquote p:last-of-type:after{ content: ""; content: close-quote; }
+ q:before{
+ content:"";
+ content:open-quote;
+ }
+ q:after{
+ content:"";
+ content:close-quote;
+ }
+}
/**
@@ -31,7 +79,7 @@ blockquote{
/**
* .4em is roughly equal to the width of the opening “ that we wish to hang.
*/
- text-indent:-0.4em;
+ text-indent:-0.41em;
p:last-of-type{
margin-bottom:0;
@@ -45,4 +93,4 @@ blockquote{
&:before{
content:"";
}
-}
+}

1 comment on commit 5ef9ff6

Contributor

silvenon commented on 5ef9ff6 Jan 20, 2013

Would it be alright if the <q> quotes were also configurable? So we can use double quotes if we want.

Please sign in to comment.