Improve style.

2 files changed, 45 insertions, 9 deletions

diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
index 776a055..249b3c6 100644
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
@@ -1,5 +1,26 @@
+@font-face {
+  font-family: 'IM Fell DW Pica';
+  src: url("/assets/fonts/IMFellDWPica-Regular.ttf") format("truetype"),
+       url("/assets/fonts/IMFellDWPica-Italic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'IM Fell English SC';
+  src: url("/assets/fonts/IMFellEnglishSC-Regular.ttf") format("truetype");
+}
+
 :root {
   --link-color: #2f2f2f;
+  --main-font: 'IM Fell DW Pica', serif;
+  --title-font: 'IM Fell English SC', serif;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body{
@@ -7,7 +28,7 @@ body{
   text-decoration-skip: ink;
   color: #2f2f2f;
   padding-top: 10px;
-  font-family: serif;
+  font-family: var(--main-font);
   background-color: #f4f2e8;
 }
 
@@ -89,7 +110,7 @@ td {
 
 .brand {
   margin-bottom: 2rem;
-  font-family: 'IM Fell English SC', serif;
+  font-family: var(--title-font);
 }
 
 .title{
@@ -127,7 +148,7 @@ td {
   padding-bottom: 0px;
 }
 
-.center{
+.center {
   text-align: center;
 }
 
@@ -218,6 +239,10 @@ and (min-device-width : 768px)  {
   }
 }
 
+.posts-td {
+  padding: 12px 12px;
+}
+
 .posts-td-time {
   border: none;
   width: 1%;
@@ -245,3 +270,11 @@ h1.brand {
 .tagline {
   margin-bottom: 2.5rem;
 }
+
+#footer-text {
+  font-size: 14px;
+}
+
+.post-author {
+  margin-top: 4px;
+}
diff --git a/_site/assets/css/skeleton.css b/_site/assets/css/skeleton.css
index ab259bb..5ba795c 100644
--- a/_site/assets/css/skeleton.css
+++ b/_site/assets/css/skeleton.css
@@ -121,16 +121,19 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
 html {
   font-size: 62.5%; }
 body {
-  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
-  line-height: 1.6; }
+  font-size: 1.8em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.4; 
+}
 
 
 /* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
-  margin-bottom: 1rem;
-  font-weight: 300; }
+  margin-bottom: 2rem;
+  font-weight: 300; 
+}
+
 h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
 h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
@@ -141,7 +144,7 @@ h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 /* Larger than phablet */
 @media (min-width: 550px) {
   h1 { font-size: 5.0rem; }
-  h2 { font-size: 2.6rem; }
+  h2 { font-size: 3.4rem; }
   h3 { font-size: 3.6rem; }
   h4 { font-size: 3.0rem; }
   h5 { font-size: 2.4rem; }
@@ -299,7 +302,7 @@ ol ul {
   margin: 1.5rem 0 1.5rem 3rem;
   font-size: 90%; }
 li {
-  margin-bottom: 1rem; }
+  margin-bottom: 0.6rem; }
 
 
 /* Code