feat(typography): use consistent fonts

It also removes code that we do not need from bootstrap source files. Update #429
Pelican-Elegant · Feb 1, 2020 · 8b7a8bd · 8b7a8bd
1 parent f4bee2f
commit 8b7a8bd
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 83 deletions.
diff --git a/static/bootstrap/code.less b/static/bootstrap/code.less
@@ -7,7 +7,6 @@
 code,
 pre {
   padding: 0 3px 2px;
-  #font > #family > .monospace;
   font-size: @baseFontSize - 2;
   color: @grayDark;
   .border-radius(3px);

diff --git a/static/bootstrap/type.less b/static/bootstrap/type.less
@@ -53,51 +53,6 @@ a.text-success:focus { color: darken(@successText, 10%); }
 .text-center         { text-align: center; }
 
 
-// Headings
-// -------------------------
-
-h1, h2, h3, h4, h5, h6 {
-  margin: (@baseLineHeight / 2) 0;
-  font-family: @headingsFontFamily;
-  font-weight: @headingsFontWeight;
-  line-height: @baseLineHeight;
-  color: @headingsColor;
-  text-rendering: optimizelegibility; // Fix the character spacing for headings
-  small {
-    font-weight: normal;
-    line-height: 1;
-    color: @grayLight;
-  }
-}
-
-h1,
-h2,
-h3 { line-height: @baseLineHeight * 2; }
-
-h1 { font-size: @baseFontSize * 2.75; } // ~38px
-h2 { font-size: @baseFontSize * 2.25; } // ~32px
-h3 { font-size: @baseFontSize * 1.75; } // ~24px
-h4 { font-size: @baseFontSize * 1.25; } // ~18px
-h5 { font-size: @baseFontSize; }
-h6 { font-size: @baseFontSize * 0.85; } // ~12px
-
-h1 small { font-size: @baseFontSize * 1.75; } // ~24px
-h2 small { font-size: @baseFontSize * 1.25; } // ~18px
-h3 small { font-size: @baseFontSize; }
-h4 small { font-size: @baseFontSize; }
-
-
-// Page header
-// -------------------------
-
-.page-header {
-  padding-bottom: (@baseLineHeight / 2) - 1;
-  margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
-  border-bottom: 1px solid @grayLighter;
-}
-
-
-
 // Lists
 // --------------------------------------------------
 

diff --git a/static/css/admonition.css b/static/css/admonition.css
@@ -103,7 +103,6 @@ div.note p.admonition-title:before,
 div.hint p.admonition-title:before,
 div.tip p.admonition-title:before {
   display: inline-block;
-  font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;

diff --git a/static/css/blockquote.css b/static/css/blockquote.css
@@ -8,10 +8,6 @@ blockquote {
   padding: 0.1rem 1.2rem;
   position: relative;
   width: 80%;
-  & p {
-    font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
-    font-weight: 400;
-  }
   &:before,
   &:after {
     color: dimgray;

diff --git a/static/css/elegant.css b/static/css/elegant.css
@@ -47,11 +47,6 @@ a {
 hr {
   border-width: 3px;
 }
-/* site title */
-.site-name {
-  font-family: "Monaco", "Inconsolata", "Andale Mono", "Lucida Console",
-    "Bitstream Vera Sans Mono", "Courier New", Courier, Monospace;
-}
 /* Top navigation menu */
 .top-menu li a {
   font-weight: bold;
@@ -125,7 +120,6 @@ table.highlighttable tbody > tr:nth-child(odd) > td {
 }
 /* Tags */
 .list-of-tags {
-  font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
   list-style: none;
   margin: 0;
   overflow: hidden;
@@ -151,30 +145,18 @@ table.highlighttable tbody > tr:nth-child(odd) > td {
   float: none;
   line-height: 28px;
 }
-.tag-title {
-  font-family: "Trebuchet MS", Trebuchet, "Lucida Sans Unicode", "Lucida Grande",
-    "Lucida Sans", Arial, Sans-Serif;
-}
 .articles-in-tag li {
   font: 1.1em/1.6 "Trebuchet MS", Trebuchet, "Lucida Sans Unicode",
     "Lucida Grande", "Lucida Sans", Arial, Sans-Serif;
 }
 /* Article */
 .article-content,
 div.recent-posts p {
-  font: 1.2em/1.6 "PT Serif", Georgia, "Times New Roman", Times, Serif;
   text-align: justify;
 }
 .article-content {
   max-width: 50em;
 }
-.article-content p,
-div.recent-posts p {
-  font-size: inherit;
-  font-variant: normal;
-  line-height: 1.6;
-  text-transform: none;
-}
 .article-content p {
   margin: 20px 0;
 }
@@ -211,8 +193,6 @@ div.recent-posts p {
 .page-header {
   border-bottom: 2px solid maroon;
   color: maroon;
-  margin: 10px 10px 20px;
-  padding: 5px;
 }
 .page-header h1 {
   border: none;
@@ -271,7 +251,6 @@ ul.list-articles-category {
 ul.list-articles-category li time {
   color: #8f8f8f;
   display: inline-block;
-  font: 0.9em "PT Sans", "Helvetica Neue", Arial, Sans-Serif;
   width: 7em;
 }
 a.category-link {
@@ -280,11 +259,6 @@ a.category-link {
 a.category-link:hover {
   text-decoration: none;
 }
-a.list-of-categories {
-  font-family: "Trebuchet MS", Trebuchet, "Lucida Sans Unicode", "Lucida Grande",
-    "Lucida Sans", Arial, Sans-Serif;
-  font-size: 1.1em;
-}
 a.list-of-categories:hover {
   background-color: #08c;
   border-radius: var(--border-radius);
@@ -445,8 +419,6 @@ a#allposts:hover {
   border-radius: var(--border-radius);
   border: 1px solid #e1e1e8;
   color: #d14;
-  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
-  font-size: 12px;
   padding: 2px 4px;
   white-space: nowrap;
 }

diff --git a/static/css/typography.css b/static/css/typography.css
@@ -4,24 +4,43 @@
   /* Headings that are not inside article. Like in sidebar are "others" */
   --heading-others-line-height: 1.3rem;
   --heading-others-h4-font-size: 1.1rem;
+  --sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --monoFontFamily: "PT Mono", Monaco, Menlo, Consolas, "Courier New", monospace;
+  --serifFontFamily: "PT Serif", Georgia, "Times New Roman", Times, serif;
+  --serifHeadingFontFamily: "PT Serif Caption", Baskerville, Garamond, Georgia,
+    "DejaVu Serif", "Times New Roman", Times, serif;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
-h6 {
-  font-family: Baskerville, Garamond, Georgia, "DejaVu Serif", "Times New Roman",
-    Times, Serif;
+h6,
+.page-header {
   font-weight: normal;
   margin: 10px 0px;
   text-align: left;
   & small {
     font-style: italic;
   }
 }
+header.page-header h1 {
+  font-family: var(--serifHeadingFontFamily);
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.tag-title,
+.list-of-tags,
+a.list-of-categories,
+ul.list-articles-category li time {
+  font-family: var(--sansFontFamily);
+}
 h1 {
-  font-size: 2.5rem;
+  font-size: 2.4rem;
 }
 h2 {
   font-size: 2.2rem;
@@ -101,3 +120,42 @@ nav h4 {
   font-size: var(--heading-others-h4-font-size);
   line-height: var(--heading-others-line-height);
 }
+/* code */
+code,
+pre,
+.literal, /* reST */
+.site-name {
+  /*Site title */
+  font-family: var(--monoFontFamily);
+}
+/* code */
+code,
+pre,
+.literal /* reST */ {
+  font-size: 0.9rem;
+}
+.site-name {
+  font-size: 1.5rem;
+}
+/* article */
+.article-content,
+div.recent-posts p {
+  font-size: 1.125rem;
+  font-family: var(--serifFontFamily);
+  font-weight: 400;
+  line-height: 1.6;
+  text-transform: none;
+}
+/* blockquotes */
+blockquote {
+  & p {
+    font-family: var(--sansFontFamily);
+    font-weight: 400;
+  }
+}
+a.list-of-categories {
+  font-size: 1.1rem;
+}
+ul.list-articles-category li time {
+  font-size: 0.7rem;
+}