Tooltip content

pug/contents/chips_content.html

@@ -1,26 +1,58 @@
 <div class="container">
   <div class="row">
-
-    <div class="col s12 m8 offset-m1 xl7 offset-xl1">
-
+    <div class="s12 m8 offset-m1 xl7 offset-xl1">
       <div id="introduction" class="section scrollspy">
         <p class="caption">
           Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
         </p>
+
         <div class="chip">
           <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
         </div>
         <div class="chip">
           Tag
           <i class="close material-icons">close</i>
         </div>
-      </div>
+        <div class="chip">
+          <i class="material-icons">check</i>
+          Filter
+          <i class="close material-icons">close</i>
+        </div>
+        <div class="chip outlined">Information</div>
+        <div class="chip outlined">
+          <i class="material-icons">check</i>
+          Filter
+          <i class="close material-icons">close</i>
+        </div>
+
+        <pre style="padding-top: 0px;">
+          <span class="copyMessage">Copied!</span>
+          <i class="material-icons copyButton">content_copy</i>
+          <code class="language-markup copiedText">
+&lt;div class="chip">
+  &lt;img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
+&lt;/div>
+&lt;div class="chip">
+  Tag
+  &lt;i class="close material-icons">close&lt;/i>
+&lt;/div>
+&lt;div class="chip">
+  &lt;i class="material-icons">check&lt;/i>
+  Filter
+  &lt;i class="close material-icons">close&lt;/i>
+&lt;/div>
+&lt;div class="chip outlined">Information&lt;/div>
+&lt;div class="chip outlined">
+  &lt;i class="material-icons">check&lt;/i>
+  Filter
+  &lt;i class="close material-icons">close&lt;/i>
+&lt;/div></code>
+        </pre>
 
-      <!-- Update Info -->
-      <div class="col s12">
-        <p class="red-text"><strong>ATTENTION:</strong> Data-Format has changed from version 1.X.X to 2.0.0! Please update option 'data'.</p>
       </div>
 
+      <!-- ### -->
+
       <div id="contact" class="section scrollspy">
         <h3 class="header">Contacts</h3>
         <p class="caption">
@@ -29,18 +61,20 @@ <h3 class="header">Contacts</h3>
             <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
           </div>
         </p>
+
         <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
           <code class="language-markup copiedText">
-  &lt;div class="chip">
-    &lt;img src="images/yuna.jpg" alt="Contact Person">
-    Jane Doe
-  &lt;/div>
-          </code>
+&lt;div class="chip">
+  &lt;img src="images/yuna.jpg" alt="Contact Person">
+  Jane Doe
+&lt;/div></code>
         </pre>
       </div>
 
+      <!-- ### -->
+
       <div id="tag" class="section scrollspy">
         <h3 class="header">Tags</h3>
         <p class="caption">
@@ -63,10 +97,18 @@ <h3 class="header">Tags</h3>
         </pre>
       </div>
 
+      <!-- ### -->
+
       <div id="basic" class="section scrollspy">
         <h3 class="header">Javascript Plugin</h4>
           <p class="caption">To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by
             using your delete button.</p>
+
+          <!-- Update Info -->
+          <div class="s12">
+            <p class="red-text"><strong>ATTENTION:</strong> Data-Format has changed from version 1.X.X to 2.0.0! Please update option 'data'.</p>
+          </div>
+
           <div class="chips"></div>
 
           <p class="caption">Set initial tags.</p>

pug/contents/getting_started_content.html

@@ -23,12 +23,16 @@ <h3 class="header">Download</h3>
           <div class="col s12 m6">
             <h5>Materialize</h5>
             <p>This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass.</p>
-            <a id="download-source" class="btn waves-effect waves-light" href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-v2.0.3-alpha.zip">Materialize<i class="material-icons right">file_download</i></a>
+            <a id="download-source" class="btn waves-effect waves-light icon-right" href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-v2.0.3-alpha.zip">
+              Materialize<i class="material-icons">file_download</i>
+            </a>
           </div>
           <div class="col s12 m6">
             <h5>Sass</h5>
             <p>This version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option.</p>
-            <a id="download-sass" class="btn waves-effect waves-light" href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-src-v2.0.3-alpha.zip">Source<i class="material-icons right">file_download</i></a>
+            <a id="download-sass" class="btn waves-effect waves-light icon-right" href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-src-v2.0.3-alpha.zip">
+              Source<i class="material-icons right">file_download</i>
+            </a>
           </div>
         </div>
 
@@ -144,11 +148,11 @@ <h5>Starter Template</h5>
             <img class="z-depth-1" style="width: 100%;" src="images/starter-template.gif">
           </a>
           <p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features. </p>
-          <a class="btn waves-effect waves-light" style="margin-top: 8px;" href="templates/starter-template/preview.html">
-            Demo <i class="material-icons right">search</i>
+          <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px;" href="templates/starter-template/preview.html">
+            Demo <i class="material-icons">search</i>
           </a>
-          <a class="btn waves-effect waves-light" style="margin-top: 8px;" href="templates/starter-template.zip">
-            Download<i class="material-icons right">file_download</i>
+          <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px;" href="templates/starter-template.zip">
+            Download<i class="material-icons">file_download</i>
           </a>
         </div>
 
@@ -158,11 +162,11 @@ <h5>Parallax Template</h5>
             <img class="z-depth-1" style="width: 100%;" src="images/parallax-template.jpg">
           </a>
           <p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features. </p>
-          <a class="btn waves-effect waves-light" style="margin-top: 8px;" href="templates/parallax-template/preview.html">
-            Demo<i class="material-icons right">search</i>
+          <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px;" href="templates/parallax-template/preview.html">
+            Demo<i class="material-icons">search</i>
           </a>
-          <a class="btn waves-effect waves-light" style="margin-top: 8px;" href="templates/parallax-template.zip">
-            Download<i class="material-icons right">file_download</i>
+          <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px;" href="templates/parallax-template.zip">
+            Download<i class="material-icons">file_download</i>
           </a>
         </div>
       </div>

pug/contents/index_content.html

@@ -1,30 +1,31 @@
-      <div id="index-banner">
-
+      <div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--background-color));">
+        <!-- Background -->
+        <div style="position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; z-index: 0;">
+          <div class="gradient"></div>
+        </div>
         <!-- Intro -->
-        <div class="intro" style="padding: 5rem; background-image: radial-gradient(circle, #05a0be 0%, #5c0067 100%);">
-          <div class="container row center">
-
-            <div class="s12 m10 offset-m1">              
+        <div class="intro" style="z-index: 1;">
+          <div class="container">
+            <!-- Hero -->
+            <div class="center">
               <img id="logo" src="images/materialize.svg" style="height: 100px;" alt="Materialize"/>
-              <h1 class="header white-text" style="margin-bottom: 0;">Materialize</h1>
-              <a class="current-version-number white-text" target="_blank" href="https://github.com/materializecss/materialize">2.0.3-alpha</a>
-            </div>
-
-            <div class="s12 m8 offset-m2">
-              <h2 class="light white-text">Simple. Built on open source. The responsive front-end library based on Material Design from Google.</h2>
+              <h1 class="header" style="margin-bottom: 0;">Materialize</h1>
+              <a class="current-version-number" target="_blank" href="https://github.com/materializecss/materialize">2.0.3-alpha</a>
+              <h2 class="light">Simple. Built on open source. The responsive front-end library based on Material Design from Google.</h2>
             </div>
-
             <!-- Call to Action -->
-            <div class="s12 center call-to-action">
-              <a href="getting-started.html" id="download-button" class="btn-large waves-effect waves-light">Get started</a>
-              <a href="https://github.com/materializecss/materialize" target="_blank" id="github-button" class="btn-large btn-flat waves-effect waves-light">GitHub</a>
-              <a href="https://opencollective.com/materialize" target="_blank" class="btn-large btn-flat waves-effect waves-light">OpenCollective</a>
+            <div style="justify-content: center; display: flex; gap: 0.5rem; flex-wrap: wrap;">
+              <a class="btn rounded btn-large z-depth-1 waves-effect waves-light" href="getting-started.html" id="download-button">Get started</a>
+              <a class="btn rounded outlined btn-large waves-effect waves-light" href="https://github.com/materializecss/materialize" target="_blank" id="github-button">GitHub</a>
+              <a class="btn rounded outlined btn-large waves-effect waves-light" href="https://opencollective.com/materialize" target="_blank">OpenCollective</a>
             </div>
           </div>
         </div>
+      </div>
 
+      <div class="container" style="background-color: var(--background-color);">
         <!-- Ads -->
-        <div class="row center">
+        <div class="row center" >
           <div class="s12 m4 offset-m2">
             <!-- Main Sponsor -->
           </div>
@@ -48,17 +49,19 @@ <h2 class="light white-text">Simple. Built on open source. The responsive front-
             </div>
           </div>
         </div>
+
         <div class="row">
           <div class="s12 m10 offset-m1">
-            <p class="grey-text" style="font-size: 0.8em;">Note: This is a community-managed fork of the official MaterializeCSS library.
-              Since the project's support has been dropped by the original team, this version is 100% community-powered, meaning that bug fixes or new features
-              are implemented by volunteers but are not official.</p>
+            <p class="grey-text" style="font-size: 0.8em;">This is a community-managed fork of the official MaterializeCSS library.
+              Since the project support has been dropped by the original team, this version is 100% community-powered,
+              meaning that fixes or features are implemented by volunteers.</p>
           </div>
         </div>
+
       </div>
 
       <!-- Sponsors -->
-      <div class="container sponsors">
+      <div class="container sponsors" style="background-color: var(--background-color);">
         <div class="section">
           <div class="row">
             <div class="s12 m10 offset-m1">
@@ -82,7 +85,7 @@ <h3>Sponsors</h3>
         </div>
       </div>
 
-      <div class="container">
+      <div class="container" style="background-color: var(--background-color);">
         <div class="section">
 
           <div class="row">

pug/contents/tooltips_content.html

@@ -7,8 +7,10 @@
         <p>Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can
           use a tooltip to give people clarification on its function.</p>
         <div class="row">
-          <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-html="true" data-position="bottom" data-tooltip="I am a tooltip">
-          Bottom</a>
+          <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
+          <div id="tooltip-content" style="display: nonne;">            
+              This is a tooltip with a <a href="https://github.com/materializecss">link</a> and a <i class="material-icons icon-demo">insert_chart</i>
+          </div>  
           <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="top" data-tooltip="I am a tooltip"> Top</a>
           <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="left" data-tooltip="I am a tooltip"> Left</a>
           <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="right" data-tooltip="I am a tooltip"> Right</a>

pug/getting-started.pug

@@ -12,6 +12,7 @@ html(lang="en")
       include contents/getting_started_content.html
     include includes/_footer.pug
     include includes/_scripts.pug
+
     script.
       document.querySelectorAll('#download-source, #download-sass').forEach(a => {
         a.addEventListener('click', e => {

pug/includes/_navbar.pug

@@ -39,6 +39,7 @@ header
     li(class="logo")
       a#logo-container.brand-logo(href='/')
         object#front-page-logo(type='image/svg+xml', data='images/materialize.svg') Your browser does not support SVG
+        | Materialize
 
     li.search.hide-on-med-and-up
       div.search-wrapper