feat(style): better fontstack variables

BREAKING CHANGE: You have to double check if you're overriding `@sans-serif`, `@serif`, or `@monospace` to use custom fontstacks, these variables have been changed to `@fontstack-sans-serif`, `@fontstack-serif`, and `@fontstack-monospace`.
sparanoid · Sep 27, 2015 · 5af01d9 · 5af01d9
1 parent a12166e
commit 5af01d9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/_app/assets/_less/custom.less b/_app/assets/_less/custom.less
@@ -10,7 +10,9 @@
   h6 { font-size: 60%;  opacity: .4; }
 }
 
-// amsf.github.io color scheme
+// amsf.github.io custom variables
+@fontstack-sans-serif: "Helvetica Neue", "Hiragino Sans GB", Arial, sans-serif;
+@fontstack-serif: Georgia, "Hiragino Mincho ProN", serif;
 @link-color: #ff00b4;
 @background-color: #fff;
 @text-color: #000;

diff --git a/_app/assets/themes/curtana/_less/app.less b/_app/assets/themes/curtana/_less/app.less
@@ -1,13 +1,16 @@
 // Global variables
-@base-font-size: 1.6vw;
-@base-line-height: (20 / 14); // ~ 1.428571429
+@fontstack-sans-serif: "Helvetica Neue", Arial, sans-serif;
+@fontstack-serif: Georgia, serif;
+@fontstack-monospace: Menlo, monospace;
+@fontstack-default: @fontstack-sans-serif;
+@font-size: 1.6vw;
+@line-height: (20 / 14); // ~ 1.428571429
+
 @link-color: #a212d1;
 @background-color: #fff;
 @text-color: #000;
 @code-color: spin(@link-color, 180);
-@sans-serif: "Helvetica Neue", "Hiragino Sans GB", Arial, sans-serif;
-@serif: Georgia, "Hiragino Mincho ProN", serif;
-@monospace: Menlo, monospace;
+
 @breakpoint-lg: 1600px;
 @breakpoint-md: 1000px;
 @breakpoint-sm: 640px;
@@ -46,9 +49,9 @@
 body {
   padding: 0 @padding-lg;
   margin: 0 auto 0;
-  font-family: @sans-serif;
-  font-size: @base-font-size;
-  line-height: @base-line-height;
+  font-family: @fontstack-default;
+  font-size: @font-size;
+  line-height: @line-height;
   color: @text-color;
   text-rendering: optimizelegibility;
   background: @background-color;
@@ -58,17 +61,17 @@ body {
   @media (max-width: @breakpoint-md) {
     padding-left: @padding-md;
     padding-right: @padding-md;
-    font-size: (@base-font-size * 1.4);
+    font-size: (@font-size * 1.4);
   }
 
   @media (max-width: @breakpoint-sm) {
     padding-left: @padding-sm;
     padding-right: @padding-sm;
-    font-size: (@base-font-size * 2.4);
+    font-size: (@font-size * 2.4);
   }
 
   @media (max-width: @breakpoint-xs) {
-    font-size: (@base-font-size * 3.2);
+    font-size: (@font-size * 3.2);
   }
 
   // All iOS devices, the easiest way
@@ -93,15 +96,13 @@ body {
 
 // Essential mixins
 .heading {
-  font-family: @sans-serif;
   font-size: 330%;
   -webkit-font-smoothing: antialiased;
   font-weight: bold;
   letter-spacing: -.06em;
 }
 
 .sub-heading {
-  font-family: @sans-serif;
   font-size: 72%;
   font-weight: normal;
   opacity: .5;
@@ -314,7 +315,7 @@ body:hover .latest {
 
   p {
     margin-bottom: 1.6rem;
-    line-height: (@base-line-height * 1.2);
+    line-height: (@line-height * 1.2);
   }
 
   header {
@@ -384,7 +385,7 @@ body:hover .latest {
     margin-left: 1.2em;
 
     li {
-      line-height: (@base-line-height * 1.2);
+      line-height: (@line-height * 1.2);
 
       > ul, ol {
         margin-bottom: 0;
@@ -474,7 +475,7 @@ body:hover .latest {
   }
 
   code, pre {
-    font-family: @monospace;
+    font-family: @fontstack-monospace;
     color: @code-color;
   }
 
@@ -489,7 +490,7 @@ body:hover .latest {
     margin: 0 0 1.8rem;
     overflow-x: scroll;
     font-size: 80%;
-    line-height: (@base-line-height * 1.2);
+    line-height: (@line-height * 1.2);
     background: fade(#08f, 4%);
     // Bouncing scroll fix for iOS
     -webkit-overflow-scrolling: touch;

diff --git a/_app/assets/themes/curtana/_less/module-plugins.less b/_app/assets/themes/curtana/_less/module-plugins.less
@@ -26,7 +26,7 @@
   }
 
   .gist-data {
-    font-family: @monospace !important;
+    font-family: @fontstack-monospace !important;
 
     .file-data {
       font-size: 100% !important;