From 126c85b7812139a8667da04b0f58c210ed031fab Mon Sep 17 00:00:00 2001
From: LoganTann <logon313@hotmail.fr>
Date: Mon, 18 Oct 2021 12:45:58 +0200
Subject: [PATCH] docs(typography): change the roboto section to the fontstack
 section

I'm removing the most of the section about the Roboto Font by just
keeping the "how to change the font stack" part.

Fixes #175
---
 pug/page-contents/typography_content.html | 36 ++++++++++-------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/pug/page-contents/typography_content.html b/pug/page-contents/typography_content.html
index a07b51a7c1..83135c1dd0 100644
--- a/pug/page-contents/typography_content.html
+++ b/pug/page-contents/typography_content.html
@@ -4,26 +4,6 @@
     <div class="col s12 m8 offset-m1 xl7 offset-xl1">
 
       <div class="section">
-        <div id="roboto" class="scrollspy">
-          <h2 class="header">Roboto</h2>
-          <p class="caption">
-            The standard font Material Design uses is Roboto. We have included the font files with our framework.
-          </p>
-          <div class="row">
-            <p class="col s12 m4">We bundle our framework with the latest iteration of Roboto Google has released. It comes with 5 different font weights you can use: 100, 300, 400, 500, 600.<br> <br> Here is an image from Google's Roboto Specimen document displaying the different font weights.</p>
-            <img class="col s12 m8" src="https://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7SW9CUzR4MnRpOTg/style_typography_roboto1.png">
-          </div>
-
-          <h4>Removing Roboto</h4>
-          <p>In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the code below to your liking and add it to your custom css.</p>
-          <pre><code class="language-css">
-    html,
-    button, input, optgroup, select, textarea {
-      font-family: GillSans, Calibri, Trebuchet, sans-serif;
-    }
-          </code></pre>
-        </div>
-
         <div id="headers" class="section scrollspy">
           <h3 class="header">Headers</h3>
           <p>We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.</p>
@@ -69,7 +49,20 @@ <h3 class="header">Flow Text</h3>
     &lt;p class="flow-text">I am Flow Text&lt;/p>
           </code></pre>
         </div>
-
+        <div id="fontstack" class="section scrollspy">
+          <h2 class="header">Changing the font stack</h2>
+          <p class="caption">
+            The standard font Material Design uses is Roboto. We have included the font files with our framework.
+            <br>In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the
+            code below to your liking and add it to your custom CSS.
+          </p>
+          <pre><code class="language-css">
+  html,
+  button, input, optgroup, select, textarea {
+    font-family: GillSans, Calibri, Trebuchet, sans-serif;
+  }
+          </code></pre>
+        </div>
       </div>
 
     </div>
@@ -81,6 +74,7 @@ <h3 class="header">Flow Text</h3>
             <li><a href="#headers">Headers</a></li>
             <li><a href="#blockquote">Blockquotes</a></li>
             <li><a href="#flow">Flow Text</a></li>
+            <li><a href="#fontstack">Changing the font stack</a></li>
           </ul>
         </div>
       </div>