Merge pull request #1178 from jesseaborden/style/blog-typography

Blog: Style Updates

Author: shahmishal

assets/stylesheets/new-stylesheets/_themes.scss

@@ -15,6 +15,7 @@
   --site-tabs-active-background: #ffffff;
   --site-navigation-menu-toggle-invert: invert(0);
   --site-navigation-item-border: 1px solid #051416;
+  --site-navigation-selected-background: rgba(230, 150, 80, 0.9);
   --site-code-box-text: #3d3d3d;
   --site-link-with-right-arrow-color: #384fea;
   --site-link-with-right-arrow-icon-filter: none;
@@ -36,7 +37,7 @@
   --install-release-box-tr-border-bottom: 1px solid #f2f2f2;
   --install-release-box-tr-bg: #ffffff;
 
-  --blog-page-time-text-color: #8D8D8D;
+  --blog-page-time-text-color: #8d8d8d;
   --blog-page-code-bg: #f2f2f2;
   --blog-divider-border: #979797;
 
@@ -140,6 +141,7 @@
   --site-tabs-active-background: #505f83;
   --site-navigation-menu-toggle-invert: invert(1);
   --site-navigation-item-border: 1px solid #ffffff;
+  --site-navigation-selected-background: rgb(221, 93, 67);
   --site-code-box-text: #ffffff;
   --site-link-with-right-arrow-color: #1ec1fd;
   --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%)
@@ -162,7 +164,7 @@
   --install-release-box-tr-border-bottom: 1px solid #051416;
   --install-release-box-tr-bg: #384461;
 
-  --blog-page-time-text-color: #8D8D8D;
+  --blog-page-time-text-color: #8d8d8d;
   --blog-page-code-bg: #111727;
   --blog-divider-border: #979797;
 

assets/stylesheets/new-stylesheets/includes/navigation/_base.scss

@@ -53,11 +53,11 @@
         transition:
           background-color 0.2s ease,
           color 0.2s ease; // smooth hover
-        
-          & > span {
-            padding: 12px 15px;
-            border-radius: 36px;
-          }
+
+        & > span {
+          padding: 12px 15px;
+          border-radius: 36px;
+        }
 
         // hover/focus states
         &:hover,
@@ -81,7 +81,7 @@
           outline: none; // basic focus outline removal
 
           & > span {
-            background-color: rgba(230, 150, 80, .9);
+            background-color: var(--site-navigation-selected-background);
           }
         }
       }

assets/stylesheets/new-stylesheets/pages/_blog.scss

@@ -71,13 +71,15 @@
     display: block;
     color: var(--blog-muted-color);
     margin-bottom: 10px;
+    font-weight: 500;
   }
 
   .blog-title {
     display: block;
     font-size: 22px;
     line-height: 1.2;
     margin: 0 0 5px;
+    font-weight: 500;
   }
 
   .blog-excerpt {
@@ -111,8 +113,8 @@
 
       .blog-featured-grid-headline {
         font-size: 48px;
+        font-weight: 500;
         margin-bottom: 16px;
-        font-weight: 300;
         color: var(--site-text-color);
         text-align: left;
 
@@ -145,7 +147,7 @@
 
       .blog-featured-grid-category-headline {
         font-size: 24px;
-        font-weight: 400;
+        font-weight: 600;
         margin-bottom: 13px;
         line-height: 1.2;
       }
@@ -295,8 +297,10 @@
       margin-bottom: 20px;
       cursor: pointer;
 
-      &:hover {
-        background-color: var(--blog-dropdown-toggle-outline-color);
+      @media (pointer: fine) {
+        &:hover {
+          background-color: var(--blog-dropdown-toggle-outline-color);
+        }
       }
 
       .dropdown-toggle-arrow {
@@ -376,8 +380,10 @@
       width: 100%;
       box-sizing: border-box;
 
-      &:hover {
-        background-color: var(--blog-dropdown-toggle-outline-color);
+      @media (pointer: fine) {
+        &:hover {
+          background-color: var(--blog-dropdown-toggle-outline-color);
+        }
       }
     }
 
@@ -452,7 +458,7 @@
 
     h3 {
       font-size: 22px;
-      font-weight: 400;
+      font-weight: 600;
       color: var(--site-text-color);
     }