Improve typography

Raku · Jun 29, 2016 · 36e4471 · 36e4471 · coke · Jun 29, 2016
1 parent d7fe27a
commit 36e4471
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 18 deletions.
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
@@ -1,7 +1,11 @@
+$font-regular:   'Open Sans', sans-serif;
+$font-condensed: 'Open Sans Condensed', sans-serif;
+$font-mono:      'Roboto Mono', monospace;
+
 html, body {
     margin: 0;
     background: #EFEFEF!important;
-    font-family: sans-serif !important; /*override font from perl.css
+    font-family: $font-regular!important; /*override font from perl.css
         stylesheet, until we can get rid of it*/
 }
 
@@ -18,6 +22,26 @@ body {
     width: auto;
 }
 
+h1, h2, h3, h4, h5, h6, dt {
+    font-family: $font-condensed;
+}
+
+dt {
+    font-size: 140%;
+}
+
+// TOC
+#content nav.indexgroup {
+    > ol > li > a {
+        font-family: $font-condensed;
+        font-size: 120%;
+    }
+
+    .indexItem {
+        line-height: 1.2em;
+    }
+}
+
 .title {
     margin-top: 0;
     text-align: center;
@@ -41,6 +65,10 @@ code {
     color: #666;
 }
 
+pre, code {
+    font-family: $font-mono;
+}
+
 pre {
     a {
         text-decoration: underline;
@@ -111,8 +139,6 @@ td {
 }
 
 #header {
-    font-family: sans-serif;
-    font-weight: bold;
     border-radius: 0 0 4em 4em;
     margin: -2em auto 0; /*extra top padding and negative margin preserves bleed-off illusion for shadow*/
     padding: 3em 0em 0em 0em;
@@ -122,6 +148,7 @@ td {
 }
 
 #header > a {
+    font-family: $font-condensed;
     color: #000000;
     text-decoration: none;
     font-size: 2em;
@@ -212,18 +239,22 @@ td {
 }
 
 .ui-autocomplete-category {
-    font-weight: bold;
-    font-style: italic;
+    font-family: $font-condensed;
+    font-size: 110%;
     background-color: #8BC313;
     padding: 2px 5px;
     line-height: 1.5;
 }
 .ui-state-focus {
-    font-weight: normal !important; /* override css/custom-theme/jquery-ui.css */
-    font-style: italic;
+    font-weight: normal!important;
 }
 .ui-menu .ui-menu-item {
-    padding-left: 1em !important; /* override css/custom-theme/jquery-ui.css */
+    padding-left: 1em!important;
+}
+
+.ui-widget input,
+.ui-widget {
+    font-family: $font-regular;
 }
 
 .menu {
@@ -288,6 +319,18 @@ td {
     background-repeat: no-repeat;
     background-position: right 2em top 2em;
 
+    p, li, dt, dd, pre {
+        line-height: 1.75em;
+    }
+
+    p {
+        margin-top: 25px;
+    }
+
+    table p {
+        margin-top: 0;
+    }
+
     dt {
         font-weight: bold;
         margin-bottom: 0.2em;

diff --git a/html/css/style.css b/html/css/style.css
@@ -1,7 +1,7 @@
 html, body {
   margin: 0;
   background: #EFEFEF !important;
-  font-family: sans-serif !important;
+  font-family: "Open Sans", sans-serif !important;
   /*override font from perl.css
         stylesheet, until we can get rid of it*/ }
 
@@ -16,6 +16,19 @@ body {
   margin: -1px 0 0;
   width: auto; }
 
+h1, h2, h3, h4, h5, h6, dt {
+  font-family: "Open Sans Condensed", sans-serif; }
+
+dt {
+  font-size: 140%; }
+
+#content nav.indexgroup > ol > li > a {
+  font-family: "Open Sans Condensed", sans-serif;
+  font-size: 120%; }
+
+#content nav.indexgroup .indexItem {
+  line-height: 1.2em; }
+
 .title {
   margin-top: 0;
   text-align: center; }
@@ -36,6 +49,9 @@ pre {
 code {
   color: #666; }
 
+pre, code {
+  font-family: "Roboto Mono", monospace; }
+
 pre a {
   text-decoration: underline;
   color: black; }
@@ -90,8 +106,6 @@ td {
   background-color: #F5EF7B; }
 
 #header {
-  font-family: sans-serif;
-  font-weight: bold;
   border-radius: 0 0 4em 4em;
   margin: -2em auto 0;
   /*extra top padding and negative margin preserves bleed-off illusion for shadow*/
@@ -101,6 +115,7 @@ td {
   border-top: none; }
 
 #header > a {
+  font-family: "Open Sans Condensed", sans-serif;
   color: #000000;
   text-decoration: none;
   font-size: 2em;
@@ -175,20 +190,21 @@ td {
   color: #000000; }
 
 .ui-autocomplete-category {
-  font-weight: bold;
-  font-style: italic;
+  font-family: "Open Sans Condensed", sans-serif;
+  font-size: 110%;
   background-color: #8BC313;
   padding: 2px 5px;
   line-height: 1.5; }
 
 .ui-state-focus {
-  font-weight: normal !important;
-  /* override css/custom-theme/jquery-ui.css */
-  font-style: italic; }
+  font-weight: normal !important; }
 
 .ui-menu .ui-menu-item {
-  padding-left: 1em !important;
-  /* override css/custom-theme/jquery-ui.css */ }
+  padding-left: 1em !important; }
+
+.ui-widget input,
+.ui-widget {
+  font-family: "Open Sans", sans-serif; }
 
 .menu {
   border: none;
@@ -243,6 +259,12 @@ td {
   background-image: url(/images/camelia-faded.png);
   background-repeat: no-repeat;
   background-position: right 2em top 2em; }
+  #content p, #content li, #content dt, #content dd, #content pre {
+    line-height: 1.75em; }
+  #content p {
+    margin-top: 25px; }
+  #content table p {
+    margin-top: 0; }
   #content dt {
     font-weight: bold;
     margin-bottom: 0.2em; }

diff --git a/template/head.html b/template/head.html
@@ -4,3 +4,4 @@
 <link type="text/css" href="/css/custom-theme/jquery-ui.css" rel="stylesheet" />
 <link type="text/css" href="/css/pygments.css" rel="stylesheet" />
 <noscript> <style> #search { visibility: hidden; } </style> </noscript>
+<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:700|Roboto+Mono" rel="stylesheet">