Fix heading sizes, issues with Firefox (#137)

* Fix heading sizes, issues with Firefox

Author: robinsonzimmermann

src/app/components/post-item/post-item.component.scss

@@ -33,6 +33,6 @@
     width: 100%;
     padding: 0;
     margin-bottom: 8px;
-    aspect-ratio: 2.5;
+    aspect-ratio: 2;
   }
 }

src/app/components/table-of-content/table-of-content.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="mat-h2">Jump to:</div>
+  <div class="mat-h5 uppercase">In this article</div>
 
   <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
     <mat-tree-node

src/app/components/table-of-content/table-of-content.component.scss

@@ -27,3 +27,7 @@
 a {
   text-decoration: none;
 }
+
+.uppercase {
+  text-transform: uppercase;
+}

src/app/features/post/post.component.html

@@ -12,7 +12,7 @@
           </mat-chip>
         </mat-chip-set>
         <h1>{{ post.title }}</h1>
-        <h2>{{ post.excerpt }}</h2>
+        <h2 class="mat-body-2 lead">{{ post.excerpt }}</h2>
         <span class="post__header-info">
           @if (post.date) {
             {{ post.date | date: 'longDate' }} |

src/app/features/post/post.component.scss

@@ -3,11 +3,17 @@
 @import 'prismjs/themes/prism-tomorrow.css';
 
 a {
-  text-decoration-color: var(--blog-palette-accent);
+  text-decoration-color: var(--backbase-primary);
   text-decoration-thickness: 3px;
+  text-underline-offset: .25em;
 }
 .post {
   &__header {
+    h2.lead.mat-body-2 {
+      font-weight: normal;
+      font-size: 1.25em;
+    }
+
     margin: 3rem 1rem;
     @include responsive.up('lg') {
       display: flex;
@@ -69,6 +75,7 @@ a {
 
   &__content {
     display: flex;
+    overflow-x: hidden;
 
     .markdown-container {
       max-width: 100%;
@@ -77,7 +84,6 @@ a {
     @include responsive.up('lg') {
       flex-direction: row-reverse;
       justify-content: space-between;
-      flex-grow: 2;
     }
   }
 

styles/_theme.scss

@@ -70,4 +70,5 @@
   --blog-palette-muted: #{$text-muted};
   --mat-paginator-container-background-color: #{$background-color};
   --mdc-elevated-card-container-color: #{$background-color};
+  --backbase-primary: #{map-get(default-palette.$backbase-primary-light, 500)};
 }

styles/_typography.scss

@@ -2,8 +2,9 @@
 
 $backbase-typography: mat.define-typography-config(
   $font-family: 'Libre Franklin',
-  $headline-5: mat.define-typography-level(3.5em, 1, 700),
-  $subtitle-1: mat.define-typography-level(1.2em, 1, 700),
-  $subtitle-2: mat.define-typography-level(1em, 1, 700),
-  $body-2: mat.define-typography-level(1rem, 1.5, 400),
+  $headline-5: mat.define-typography-level(3.5em, 1, 700), /* h1 */
+  $headline-6: mat.define-typography-level(1.5em, 2, 700), /* h2 */ 
+  $subtitle-1: mat.define-typography-level(1.2em, 2, 700), /* h3 */
+  $body-1: mat.define-typography-level(1em, 2, 700), /* h4 */
+  $body-2: mat.define-typography-level(1rem, 1.5, 400), /* body text */
 );

styles/styles.scss

@@ -66,6 +66,10 @@
   @each $size, $width in $breakpoints {
     --blog-breakpoint-#{$size}: #{$width};
   }
+
+  .mat-typography p {
+    margin-bottom: 1.5em;
+  }
 }
 
 html,