feat(styles): better leading quote indent with custom `letter-spacing…

…` support
sparanoid · Mar 17, 2016 · 5d19263 · 5d19263
1 parent ea82707
commit 5d19263
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/_app/_posts/note/2014-06-05-markup-example.md b/_app/_posts/note/2014-06-05-markup-example.md
@@ -29,6 +29,8 @@ HTML defines a long list of available inline tags, a complete list of which can
 - <del>Deleted</del> text should use `<del>` and <ins>inserted</ins> text should use `<ins>`.
 - Superscript <sup>text</sup> uses `<sup>` and subscript <sub>text</sub> uses `<sub>`.
 
+---
+
 * With the exception of Nietzsche, no other madman has contributed so much to human sanity as has Louis Althusser. He is mentioned twice in the Encyclopaedia Britannica as someone’s teacher. There could be no greater lapse: for two important decades (the 60s and the 70s), Althusser was at the eye of all the important cultural storms. He fathered quite a few of them.
 * This newly-found obscurity forces me to summarize his work before suggesting a few (minor) modifications to it.
     * Society consists of practices: economic, political and ideological.
@@ -61,6 +63,30 @@ HTML defines a long list of available inline tags, a complete list of which can
         2. Ordered list
 4. Ordered list
 
+---
+
+## “This should be replaced.”
+
+“This should be replaced.”
+
+## ‘This should be replaced.’
+
+‘This should be replaced.’
+
+## 「This should be replaced.」
+
+「This should be replaced.」
+
+## 『This should be replaced.』
+
+『This should be replaced.』
+
+## （This should be replaced.）
+
+（This should be replaced.）
+
+---
+
 Most of these elements are styled by browsers with few modifications on our part.
 
 Maui and his rough as guts piece of pounamu, what a stink buzz. Bro, quater-acre patches are really naff good with bung mates, aye. You have no idea how beached as our random kais were aye. Every time I see those beautiful lengths of number 8 wire it's like Castle Hill all over again aye, do you happen to have a bucket or a hose bro?

diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less
@@ -531,13 +531,19 @@ body:hover .latest {
 
 // Fix empty space when a paragraph starts with quote marks and some asian punctuation marks
 .leading-indent-fix {
-  text-indent: -.39em;
 
-  &--double-quotes { text-indent: -.43em; }
-  &--single-quotes { text-indent: -.28em; }
-  &--chinese-corner-bracket { text-indent: -.68em; }
-  &--chinese-white-corner-bracket { text-indent: -.62em; }
-  &--fullwidth-parenthesis { text-indent: -.68em; }
+  & { text-indent: -.39em; }
+  &--double-quotes { text-indent: -.42em; }
+  &--single-quotes { text-indent: -.27em; }
+  &--chinese-corner-bracket { text-indent: -.6em; }
+  &--chinese-white-corner-bracket { text-indent: -.56em; }
+  &--fullwidth-parenthesis { text-indent: -.62em; }
+
+  // Special heading indent fix with `@heading-letter-spacing` offset
+  h1& {
+    &--double-quotes { text-indent: (-.42em - @heading-letter-spacing); }
+    &--single-quotes { text-indent: (-.27em - @heading-letter-spacing); }
+  }
 
   // Reset indent for list, otherwise it looks weird
   li & {

diff --git a/_app/assets/themes/curtana/_less/mixins.less b/_app/assets/themes/curtana/_less/mixins.less
@@ -19,7 +19,7 @@
   font-size: 330%;
   -webkit-font-smoothing: antialiased;
   font-weight: bold;
-  letter-spacing: -.06em;
+  letter-spacing: @heading-letter-spacing;
 }
 
 .sub-heading() {

diff --git a/_app/assets/themes/curtana/_less/variables.less b/_app/assets/themes/curtana/_less/variables.less
@@ -8,6 +8,7 @@
 @fontstack-default: @fontstack-sans-serif;
 @font-size: 1.6vw;
 @line-height: (20 / 14); // ~ 1.428571429
+@heading-letter-spacing: -.06em;
 
 @link-color: #a212d1;
 @background-color: #fff;