style: remove uppercase from buttons, tabs etc

also remove padding set to zero for all ul Elements and minor style adaptions

package.json

@@ -60,6 +60,7 @@
     "grunt-webpack": "^5.0.0",
     "husky": "^8.0.1",
     "jasmine": "^3.8.0",
+    "jstransformer-markdown-it": "^3.0.0",
     "lint-staged": "^7.0.5",
     "node-archiver": "^0.3.0",
     "phantomjs-prebuilt": "^2.1.14",

pug/_footer.html

@@ -1,22 +1,22 @@
     <footer class="page-footer docs-footer">
       <div class="container">
         <div class="row" style="margin-bottom: 0;">
-          <div class="col s12 m10 offset-m1">
-            <div class="row">
-              <div class="col l4 s12">
+          <div class="s12 m10 offset-m1">
+            <div class="row" style="gap:2rem;">
+              <div class="s12 l4">
                 <h5>Help Materialize Grow</h5>
                 <p class="grey-text text-darken-2">We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by opening issues or contributing on GitHub.</p>
                 <a class='btn waves-effect waves-light' target="_blank"
                    href='https://github.com/materializecss/materialize'>Contribute</a>
 
               </div>
-              <div class="col l4 s12">
+              <div class="s12 l4">
                 <h5>Join the Discussion</h5>
                 <p class="grey-text text-darken-2">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
                 <a class='btn waves-effect waves-light' href='https://gitter.im/materializecss/materialize'
                    target='_blank'>Chat</a>
               </div>
-              <div class="col l4 s12" style="overflow: hidden;">
+              <div class="s12 l4" style="overflow: hidden;">
                 <h5>Star us</h5>
                 <iframe src="https://ghbtns.com/github-btn.html?user=materializecss&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
               </div>

pug/_navbar.pug

@@ -64,9 +64,10 @@ header
 
     li.no-padding
       ul.collapsible.collapsible-accordion
-        li.bold(class=(page == "Sass" || page == "Typography" || page == "Color" || page == "Shadow" || page == "Grid" || page == "Media CSS" || page == "Pulse" || page == "Table" || page == "CSS Transitions" || page == "Helpers" ? "active" : ""))
+        li.bold(class=(page == "Sass" || page == "Typography" || page == "Color" || page == "Shadow" || page == "Grid" || page == "Media CSS" || page == "Pulse" || page == "Table" || page == "CSS Transitions" || page == "Helpers" || page == "Waves" ? "active" : ""))
           a.collapsible-header(class="waves-effect")
-            | CSS
+            | Styles
+            //- i.material-icons home
           .collapsible-body
             ul
               li(class=(page == "Color" ? "active" : ""))
@@ -89,7 +90,9 @@ header
                 a(href='css-transitions.html') Transitions
               li(class=(page == "Typography" ? "active" : ""))
                 a(href='typography.html') Typography
-        li.bold(class=(page == "Buttons" || page == "Floating Action Button" || page == "Navbar" || page == "Cards" || page == "Preloader" || page == "Pagination" || page == "Collections" || page == "Badges" || page == "Breadcrumbs" || page == "Footer" || page == "Icons" ? "active" : ""))
+              li(class=(page == "Waves" ? "active" : ""))
+                a(href='waves.html') Waves
+        li.bold(class=(page == "Buttons" || page == "Floating Action Button" || page == "Navbar" || page == "Cards" || page == "Preloader" || page == "Pagination" || page == "Collections" || page == "Badges" || page == "Breadcrumbs" || page == "Footer" || page == "Auto Init" || page == "Tooltips" || page == "Toasts" || page == "Modals" || page == "Dropdown" || page == "Feature Discovery" || page == "Tabs" || page == "Scrollspy" || page == "Sidenav" || page == "Pushpin" || page == "Media" || page == "Parallax" || page == "Collapsible" || page == "Carousel" || page == "Icons" ? "active" : ""))
           a.collapsible-header(class="waves-effect")
             | Components
           .collapsible-body
@@ -116,13 +119,6 @@ header
                 a(href='pagination.html') Pagination
               li(class=(page == "Preloader" ? "active" : ""))
                 a(href='preloader.html') Preloader
-
-        li.bold(class=(page == "Auto Init" || page == "Tooltips" || page == "Toasts" || page == "Modals" || page == "Dropdown" || page == "Feature Discovery" || page == "Tabs" || page == "Scrollspy" || page == "Sidenav" || page == "Pushpin" || page == "Waves" || page == "Media" || page == "Parallax" || page == "Collapsible" || page == "Carousel" ? "active" : ""))
-          a.collapsible-header(class="waves-effect")
-
-            | JavaScript
-          .collapsible-body
-            ul
               li(class=(page == "Auto Init" ? "active" : ""))
                 a(href='auto-init.html') Auto Init
               li(class=(page == "Carousel" ? "active" : ""))
@@ -151,8 +147,7 @@ header
                 a(href='toasts.html') Toasts
               li(class=(page == "Tooltips" ? "active" : ""))
                 a(href='tooltips.html') Tooltips
-              li(class=(page == "Waves" ? "active" : ""))
-                a(href='waves.html') Waves
+
         li.bold(class=(page == "Autocomplete" || page == "Checkboxes" || page == "Chips" || page == "Pickers" || page == "Radio Buttons" || page == "Range" || page == "Select" || page == "Switches" || page == "Text Inputs" ? "active" : ""))
           a.collapsible-header(class="waves-effect")
             | Forms

pug/content/test.md

@@ -0,0 +1,12 @@
+# This is the Header 1
+Here is some text about the component.
+
+Please consider adding this code into your project:
+
+```javascript
+const foo = 'bar';
+
+function demo(x) {
+  return x + foo;
+}
+```

pug/index.pug

@@ -8,5 +8,21 @@ html(lang="en")
     include _navbar.pug
     main
       include index/index_content.html
+
+    //- div.row
+    //-   div.s6.offset-s3      
+    //-     include:markdown-it content/test.md
+    //-     p Das ist ein Test
+    //-     hr
+    //-     ul
+    //-       li Test1
+    //-       li Test2
+    //-       li Test3
+    //-       li
+    //-         ul
+    //-           li 1.1
+    //-           li 1.2
+    //-           li 1.3
+
     include _footer.html
     include _scripts.html