Typography update

fonts/charter/stylesheet.css

@@ -0,0 +1,52 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 10, 2013 */
+
+
+
+@font-face {
+    font-family: 'charterbold_italic';
+    src: url('charter_bold_italic-webfont.eot');
+    src: url('charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('charter_bold_italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'charterbold';
+    src: url('charter_bold-webfont.eot');
+    src: url('charter_bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('charter_bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'charteritalic';
+    src: url('charter_italic-webfont.eot');
+    src: url('charter_italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('charter_italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'charterregular';
+    src: url('charter_regular-webfont.eot');
+    src: url('charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('charter_regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

fonts/fira-sans/fira-sans.css

@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'Fira Sans';
+    src: url('FiraSans-Regular.eot');
+    src: url('FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
+	 url('FiraSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}

functions.php

@@ -120,6 +120,8 @@ add_action( 'widgets_init', 'jeremy_wordpress_theme_widgets_init' );
  * Enqueue scripts and styles.
  */
 function jeremy_wordpress_theme_scripts() {
+    wp_enqueue_style( 'charter-font', get_template_directory_uri() . '/fonts/charter/stylesheet.css' );
+    wp_enqueue_style( 'fira-sans-font', get_template_directory_uri() . '/fonts/fira-sans/fira-sans.css' );
     wp_enqueue_style( 'highlight-style', get_template_directory_uri() . '/css/highlight-default.css' );
 	wp_enqueue_style( 'jeremy-wordpress-theme-style', get_stylesheet_uri() );
 

header.php

@@ -25,6 +25,19 @@
 	    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'jeremy-wordpress-theme' ); ?></a>
 
 	    <header id="masthead" class="site-header">
+		<nav id="site-navigation" class="main-navigation">
+		    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
+			<img class="icon"
+			     src="<?php echo get_template_directory_uri() . '/icons/menu.svg'?>"
+			     alt="menu">
+		    </button>
+		    <?php
+		    wp_nav_menu( array(
+			'theme_location' => 'menu-1',
+			'menu_id'        => 'primary-menu',
+		    ) );
+		    ?>
+		</nav><!-- #site-navigation -->
 		<div class="site-branding">
 		    <?php
 		    the_custom_logo();
@@ -39,20 +52,6 @@
 			<?php endif; ?>
 		    <?php endif; ?>
 		</div><!-- .site-branding -->
-
-		<nav id="site-navigation" class="main-navigation">
-			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
-                <img class="icon"
-                     src="<?php echo get_template_directory_uri() . '/icons/menu.svg'?>"
-                     alt="menu">
-            </button>
-			<?php
-			wp_nav_menu( array(
-				'theme_location' => 'menu-1',
-				'menu_id'        => 'primary-menu',
-			) );
-			?>
-		</nav><!-- #site-navigation -->
 	    </header><!-- #masthead -->
 
 	    <div id="content" class="site-content">

page.php

@@ -36,5 +36,5 @@ get_header();
 	</div><!-- #primary -->
 
 <?php
-get_sidebar();
+// get_sidebar();
 get_footer();

style.css

@@ -397,8 +397,8 @@ select,
 optgroup,
 textarea {
     color: #404040;
-	font-family: sans-serif;
+    font-family: 'Fira Sans', sans-serif;
-	font-size: 16px;
+    font-size: 21px;
     font-size: 1rem;
     line-height: 1.5;
 }
@@ -490,6 +490,7 @@ Fonts
 */
 body {
     font-family:
+	charterregular,
 	"Palatino Linotype",
 	Palatino,
 	Palladio,
@@ -509,54 +510,17 @@ body {
 	serif;
 }
 
-h1, h2, h3, h4, h5 {
-    font-weight: normal;
-}
-
-/*
-Font sizes
-*/
-
 html {
     font-size: 21px;
 }
 
-h4 {
-    font-size: 28px;
-}
 
-h3 {
-    font-size: 37px;
-}
 
-h2 {
+h1, h2, h3, h4, h5, h6 {
-    font-size: 50px;
+    font-weight: bold;
-}
-
-h1 {
-    font-size: 67px;
-}
-
-.widget-area {
-    font-size: 16px;
-}
-
-.widget-area h4 {
     font-size: 21px;
 }
 
-.widget-area h3 {
-    font-size: 28px;
-}
-
-.widget-area h2 {
-    font-size: 37px;
-}
-
-.widget-area h1 {
-    font-size: 50px;
-}
-
 .content-area {
     word-wrap: break-word;
 }
@@ -645,22 +609,20 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-	border: 1px solid;
+        border: none;
-	border-color: #ccc #ccc #bbb;
 	border-radius: 3px;
-	background: #e6e6e6;
+	background: #e9e9e9;
-	color: rgba(0, 0, 0, 0.8);
+	color: #404040;
-	font-size: 12px;
+	line-height: 1.75;
-	font-size: 0.75rem;
+	padding: 0.5rem 1rem 0.5rem;
-	line-height: 1;
-	padding: .6em 1em .4em;
 }
 
 button:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover {
-	border-color: #ccc #bbb #aaa;
+    background-color: #dedede;
+    cursor: pointer;
 }
 
 button:active, button:focus,
@@ -730,6 +692,7 @@ textarea {
 --------------------------------------------------------------*/
 a {
 	color: royalblue;
+	text-decoration: none;
 }
 
 a:visited {
@@ -772,7 +735,7 @@ a:hover, a:active {
 	top: 100%;
 	left: -999em;
 	z-index: 99999;
-	background-color: white;
+	background-color: #fff;
 }
 
 .main-navigation ul ul ul {
@@ -910,23 +873,6 @@ a:hover, a:active {
 /*--------------------------------------------------------------
 # Clearings
 --------------------------------------------------------------*/
-.clear:before,
-.clear:after,
-.entry-content:before,
-.entry-content:after,
-.comment-content:before,
-.comment-content:after,
-.site-header:before,
-.site-header:after,
-.site-content:before,
-.site-content:after,
-.site-footer:before,
-.site-footer:after {
-	content: "";
-	display: table;
-	table-layout: fixed;
-}
-
 .clear:after,
 .entry-content:after,
 .comment-content:after,
@@ -978,21 +924,38 @@ a:hover, a:active {
 Site header
 */
 .site-header {
+    height: 60px;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: 1fr;
     grid-gap: 1rem;
-    padding-top: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    position: fixed;
+    background-color: #fff;
+    width: 100%;
 }
 
 .site-branding {
-    grid-column: 2 / 6;
+    grid-column: 10 / 12;
 }
 
 .main-navigation {
     display: grid;
-    grid-column: 6 / 12;
+    grid-column: 1 / 10;
-    justify-items: end;
+    justify-items: start;
+    font-variant: small-caps;
+    letter-spacing: 0.05rem;
+    text-rendering: optimizelegibility;
+    font-feature-settings: 'kern';
+}
+
+.main-navigation a {
+    color: #404040;
+}
+
+.main-navigation a:hover {
+    color: #111;
 }
 
 .main-navigation li {
@@ -1023,6 +986,7 @@ Site content
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 1rem;
     grid-auto-rows: auto;
+    margin-top: 60px;
 }
 
 .content-area {