Typography styles

fmatrixch · Oct 6, 2017 · 576b438 · 576b438
1 parent fd131af
commit 576b438
Show file tree

Hide file tree

Showing 4 changed files with 247 additions and 42 deletions.
diff --git a/_sass/_highlights.scss b/_sass/_highlights.scss
@@ -1,20 +1,20 @@
 pre, code {
   font-family: $code-font;
-  font-size: 85%;
+  font-size: 95%;
 }
 
 code.highlighter-rouge {
   color: $oc-indigo-9;
   background-color: $oc-gray-1;
-  padding: .25em .5em;
+  padding: .1em .2em;
   border-radius: 3px;
 }
 
 pre.highlight {
   padding: .45em .45em .45em .625em;
   border: 1px solid $oc-gray-3;
   border-radius: 3px;
-  margin: 1.25em 0;
+  margin: 1em 0;
   overflow: scroll;
 }
 

diff --git a/_sass/_reset.scss b/_sass/_reset.scss
@@ -31,7 +31,7 @@ footer, header, hgroup, menu, nav, section {
 body {
 	line-height: 1;
 }
-ol, ul {
+ol, ul, dl {
 	list-style: none;
 }
 blockquote, q {

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -19,8 +19,56 @@ $helvetica: Helvetica, Arial, sans-serif;
 $helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $georgia: Georgia, serif;
 
+// Fonts
+$base-font: 'Spoqa Han Sans', 'Source Sans Pro', 'Apple SD Gothic Neo', 'Nanum Barun Gothic', 'Nanum Gothic', 'Verdana', 'Arial', 'Dotum', sans-serif;
 $code-font: 'Menlo', 'Courier New', 'Monaco', 'Spoqa Han Sans', monospace;
 
+// Font sizes
+$base-font-size: 18px;
+$small-font-size: 14px;
+
+// Colors
+$base-color: $oc-gray-8;
+$base-lighten-color: $oc-gray-6;
+
+$text-color: $base-color;
+$link-color: $oc-blue-8;
+$divider-color: $oc-gray-1;
+
+$table-border-color: $oc-gray-2;
+$table-background-color: $oc-gray-1;
+
+$blockquote-color: $base-lighten-color;
+$blockquote-border-color: $oc-gray-3;
+
+$footnote-link-border-color: $oc-gray-1;
+$footnote-link-background-over-color: $oc-gray-1;
+
+$selection-color: $oc-black;
+$selection-background-color: $oc-gray-1;
+
+
+// List
+$li-bottom-space: 0.4em;
+$li-bullets-width: 1.7em;
+$li-line-height: 1.55;
+
+$ul-bullets-font: inherit;
+$ul-bullets-font-size: 1.4em;
+$ul-bullets-font-line-height: 1.2;
+$ul-bullets-right-space: .5em;
+
+$ol-bullets-font: inherit;
+$ol-bullets-font-size: 1em;
+$ol-bullets-font-line-height: inherit;
+$ol-bullets-right-space: .5em;
+
+$li-child-size-ratio: 0.95;
+
+$dt-width: 180px;
+$dt-dd-space: 20px;
+$dd-position: $dt-width+$dt-dd-space;
+
 // Mobile breakpoints
 @mixin mobile {
   @media screen and (max-width: 640px) {