Styling default page title

Author: bobvan

_layouts/default.html

@@ -16,7 +16,7 @@
     <a id="skip-to-content" href="#content">Skip to the content.</a>
 
     <header class="page-header" role="banner">
-      <h1 class="project-name">{{ page.title }}</h1>
+      <h1 class="page-title">{{ page.title }}</h1>
     </header>
 
     <main id="content" class="main-content" role="main">

assets/css/style.scss

@@ -20,6 +20,59 @@
     padding: 1rem 1rem;
   }
 }
+
+.page-title {
+  margin-top: 0;
+  margin-bottom: 0.1rem;
+  text-align: left;
+
+  @include large {
+    font-size: 2rem;
+  }
+
+  @include medium {
+    font-size: 2rem;
+  }
+
+  @include small {
+    font-size: 2rem;
+  }
+}
+
+.project-name {
+  margin-top: 0;
+  margin-bottom: 0.1rem;
+
+  @include large {
+    font-size: 2rem;
+  }
+
+  @include medium {
+    font-size: 2rem;
+  }
+
+  @include small {
+    font-size: 2rem;
+  }
+}
+
+.project-name {
+  margin-top: 0;
+  margin-bottom: 0.1rem;
+
+  @include large {
+    font-size: 2rem;
+  }
+
+  @include medium {
+    font-size: 2rem;
+  }
+
+  @include small {
+    font-size: 2rem;
+  }
+}
+
 .project-name {
   margin-top: 0;
   margin-bottom: 0.1rem;