Make category header smaller

docs/specific/category-header/index.html

@@ -189,8 +189,8 @@ <h1>Category Header</h1>
 </ul>
 </li>
 </ul>
-<p>A category header <strong>must</strong> have exactly one color code added to it. You can choose from <code>.is-turqoise</code>, <code>.is-green</code>, <code>.is-blue</code>, <code>.is-purple</code>, <code>.is-gray</code>, <code>.is-yello</code>, <code>.is-orange</code>, <code>.is-pink</code> and <code>.is-red</code>. This is often user-selectable and depends on the chosen category.</p>
-<p>By default the category namefrom the current category navigation hides on mobile, to save place as it can be seen on the tabination too.</p>
+<p>A category header <strong>must</strong> have exactly one color code added to it. You can choose from <code>.is-turquoise</code>, <code>.is-green</code>, <code>.is-blue</code>, <code>.is-purple</code>, <code>.is-gray</code>, <code>.is-yellow</code>, <code>.is-orange</code>, <code>.is-pink</code> and <code>.is-red</code>. This is often user-selectable and depends on the chosen category.</p>
+<p>By default the name of the current category navigation hides on mobile, to save place as it can be seen on the tabination too.</p>
 <h5 id="example-undefined">Example</h5><div class="d-example"><pre class="d-example-code"><code>&lt;header class=&quot;category-header is-orange&quot;&gt;
     &lt;div class=&quot;category-header--tabs&quot;&gt;
         &lt;div class=&quot;container category-header--tabs-container&quot;&gt;

docs_src/specific/category-header.md

@@ -17,9 +17,9 @@ A category header consists of the following elements:
             - Up to one navigation separator, which pushes everything behind it to the right side (`.category-header--nav-separator`
             - navigation buttons (`.category-header--nav-item.is-button`
 
-A category header **must** have exactly one color code added to it. You can choose from `.is-turqoise`, `.is-green`, `.is-blue`, `.is-purple`, `.is-gray`, `.is-yello`, `.is-orange`, `.is-pink` and `.is-red`. This is often user-selectable and depends on the chosen category.
+A category header **must** have exactly one color code added to it. You can choose from `.is-turquoise`, `.is-green`, `.is-blue`, `.is-purple`, `.is-gray`, `.is-yellow`, `.is-orange`, `.is-pink` and `.is-red`. This is often user-selectable and depends on the chosen category.
 
-By default the category namefrom the current category navigation hides on mobile, to save place as it can be seen on the tabination too.
+By default the name of the current category navigation hides on mobile, to save place as it can be seen on the tabination too.
 
 {% example %}
 <header class="category-header is-orange">

src/specific/_config.scss

@@ -1,7 +1,7 @@
 @import "../common/_config.scss";
 
 $application-colors: (
-  "turqoise": #1abc9c,
+  "turquoise": #1abc9c,
   "green": #2ecc71,
   "blue": #3498db,
   "purple": #9b59b6,
@@ -15,30 +15,30 @@ $application-colors: (
 /* Category header */
 $ch-tabs-lighter: 30%;
 $ch-tabs-lighter-hover: 20%;
-$ch-tab-padding-y: 3;
+$ch-tab-padding-y: 1.5;
 $ch-tab-padding-x: 4;
 $ch-tab-color: #000;
-$ch-tab-font-size: 1.125rem;
+$ch-tab-font-size: 1rem;
 $ch-tab-font-weight: 500;
 
 $ch-container-lighter: 10%;
 $ch-container-color: white;
-$ch-container-padding-y: 3;
+$ch-container-padding-y: 1.5;
 $ch-container-padding-x: 2;
 
-$ch-category-name-font-size: 2rem;
+$ch-category-name-font-size: 1.75rem;
 $ch-category-name-font-weight: 700;
 
-$ch-nav-padding-y: 2;
-$ch-nav-padding-x: 4;
+$ch-nav-padding-y: 1;
+$ch-nav-padding-x: 2;
 
 $ch-nav-item-padding-y: 1;
 $ch-nav-item-padding-x: 2;
 $ch-nav-item-margin-y: 0;
 $ch-nav-item-margin-x: 1.5;
 $ch-nav-item-lighter-hover: 5%;
 $ch-nav-item-lighter-active: 0;
-$ch-nav-item-font-size: 1.1rem;
+$ch-nav-item-font-size: 1rem;
 $ch-nav-item-font-weight: 500;
 $ch-nav-item-border-radius: 3px;