j1-template 2021.0.9 → 2021.0.14

data/lib/starter_web/pages/public/learn/where_to_go.adoc

@@ -3,8 +3,9 @@ title:                                  Where to go
 tagline:                                fasten your way
 date:                                   2020-11-03 00:00:00
 description: >
-                                        Where to go, Too Long; Didn't Read to fasten
-                                        your way through the preview pages of J1 Template.
+                                        Welcome to the pages of J1 Template. If your here
+                                        first time, a good decision you get on that page first.
+                                        For sure, there is no better place to go.
 
 tags:                                   [ Roundtrip, Introduction ]
 categories:                             [ Info ]
@@ -45,59 +46,33 @@ resource_options:
 
 // Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="none" %}
+{% include {{load_attributes}} scope="global" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-Welcome to the pages of J1 Template. If your here first time,
-a good decision you get on that page first. For sure, there is no better
-place to go.
-
-Having a menu system is great. We hope the Navigator module of J1 will
-support you to explore this site, find what you are looking for. The site
-of J1 has grown over the last month a lot. Many documents were seeking for
-a home. And we have really a bunch of them.
-
-To get better orientated, the site is organized for *natural reading*. As we
-use the English language for our international vistors (we are German),
-*natural reading* means for a western language, reading from the left to the
-right (LTR), and from top to down a page. The same to all menus, sections
-and pages.
-
-To read the webpages, it is recommended to go for LTR. Other languages, other
-countries and cultures go for RTL, but currently we've *no* support for RTL
-implemented.
-
-== Whats up
-
-First of all, you've started already! The crucial first step in to find
-your way to Jekyll is done. Congratulations.
 
+Welcome to the pages of J1 Template. If your here first time, a good decision
+you get on that page first. For sure, there is no better place to go.
+The crucial first step in to find your way to Jekyll is done. Congratulations.
 The *Learn* section contains all you need to learn what Jekyll and J1 can do
 for your website. For your new static web - if you like.
 
-With this section you'll find a:
-
-. *Roundtrip* to show some of the main features of the template system
-  *J1*.
-
-. *Kickstarter* are Tutorials. The most important one to start is *Web in a Day*.
-  This tutorial guides you through all the steps to build a website using
-  the template system Jekyll One - your site using Jekyll and the template J1.
-
-== Where to go
-
-You should go for the *Roundtrip* first. See what you will get. As an overview
-of some of the main features of *J1*. The roundtrip is a *visual* tour. No
-technical stuff, nothing academic.
-
-Let's go more in-depth and make things real - and your hands dirty. You dive
-into the world of Jekyll. You'll have learned a lot at the end of that
-day about what Jekyll is, static webs and the template system J1 is all
-about.
-
-You're welcome!
-
-If you like, continue by walking through the roundtrip examples
+Roundtrip::
+With this section you'll find a *tour* to show some of the main features of
+the template system *J1*. The tour covers how image data can be managed using
+J1, some background of the typography the template is using, discuss important
+extensions and some more what J1 can do. The roundtrip is a *visual* tour.
+No technical stuff, nothing academic. See what you will get. As an
+overview of some of the main features of *J1*.  If you like, continue by
+walking through the roundtrip examples
 link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
+
+Web in a Day::
+To go deeper, your're invited to *Web in a Day*. This tutorial guides you
+through all the steps to build a website using Jekyll and the template system
+J1. The guide let you go more in-depth and make things real. You dive into
+the world of Jekyll. You'll have learned a lot at the end of that day about
+what Jekyll is, static webs and the template system J1 is all about. To go
+deeper, your're invited, try out the journey having some hours of fun at
+{url-j1-web-in-a-day--meet-and-greet}[Web in a Day, {browser-window--new}].

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -18,14 +18,17 @@ categories:                             [ Info, Introduction ]
 permalink:                              /pages/public/panels/intro_panel/
 regenerate:                             false
 
-resources:                              [ lightbox, carousel ]
+resources:                              [
+                                          clipboard, rouge, carousel, lightbox,
+                                          justified_gallery, light_gallery
+                                        ]
 resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/responsive-text-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg
           alt:                          responsive-text-1920x1280
           badge:
             type:                       unsplash
@@ -40,7 +43,7 @@ resource_options:
 == Full Responsive
 
 [role="mb-3"]
-image::/assets/images/pages/panels/the-place-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}]
 
 A good user experience browsing a Web site is one of the most important
 feature a site has to offer as a must. Beside excellent content. Presenting
@@ -64,59 +67,85 @@ elements, cards, forms, etc.
 == HTML5 · CSS3 · JS
 
 [role="mb-3"]
-image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/florian-olivo-1920x800.jpg[{{page.title}}]
 
 The Internet is a rapidly changing world. Like the fashion industries, new
 trends are set every year. J1 Template combines modern technologies for the
 world of static Webs to make a site unique using current standards in terms
 of web development, languages, and tools.
 
-=== HTML5 + CSS3
+=== Coding web pages
+
+J1 is using HTML5, the latest major version of HTML, for structuring content
+on the World Wide Web. The current version of the HTML standard offers a lot
+of new features including detailed processing models to support more
+interoperable implementations. It extends and improves HTML markups available
+in older versions.
 
-J1 is using HTML5 for structuring content on the World Wide Web. The current
-version of the HTML standard offers a lot of new features including detailed
-processing models to support more interoperable implementations. It extends
-and improves HTML markups available. HTML5 introduces application programming
-interfaces (APIs) for more complex web applications. For the same reasons,
-the new HTML standard is also a good choice for modern cross-platform mobile
-applications, because it includes features designed with mobile devices in mind.
+HTML5 introduces application programming interfaces (APIs) for more complex
+web applications. For the same reasons, the new HTML standard is also a good
+choice for modern cross-platform mobile applications, because it includes
+features designed with mobile devices in mind.
 
 Many new features are included with HTML5. To natively support multimedia and
-graphical content, the new <video>, <audio> and <canvas> elements were added.
-Besides this, support for scalable vector graphics (SVG) and an API called
-MathML for mathematical formulas are now available.
+graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
+added. Besides this, support for *SVG* (scalable vector graphics), an API called
+*MathML* for mathematical formulas and a grid system called *Flex* are now
+available.
 
-The new standard allows to use so-called semantic markup elements for your
-documents. New structure elements such as <main>, <section>, <article>,
-<header> or <footer> (and many more) were added. Better structured HTML code
-can help people having disabilities to read the pages presented better.
+The new standard allows to use so-called *semantic* markup elements for your
+documents. New structure elements such as `<main>`, `<section>`, `<article>`,
+`<header>` or `<footer>` (and many more) were added. Better structured HTML
+code can help people having disabilities to read the pages presented better.
 
-CSS is designed to enable the separation of presentation and content. Including
-layout, colors, and fonts for example. This separation improves content
-accessibility, provide more flexibility and control in the presentation.
+*CSS* (cascadeded style sheets) is designed to enable the *separation* of
+presentation and content. Including layout, colors, and fonts for example.
+This separation improves content accessibility, provide more flexibility and
+control in the presentation.
 
 Separation of formatting and content also makes it feasible to present the
-same page in different styles. For example, the themes feature of J1 Template
+same page in different styles. For example, the *themes feature* of J1 Template
 makes use of this.
 
-CSS3 is divided into several separate components called modules. Each module
-adds new capabilities or extends features defined in the former CSS2 standard.
-HTML5 in combination with CSS3 allows creating modern and modular code for
-web pages that can be viewed on all current devices like Mobiles, Tablets,
-or the classic Desktop PC. The new HTML5 elements plus CSS3 modules can be
-used as a replacement for proprietary solutions like Adobe Flash to build
-modern webpages based on open standards.
+*CSS3*, the current standard for cascadeded style sheets, is divided into
+several separated components called *modules*. Each module adds new capabilities
+or extends features defined in the former CSS2 standard. HTML5 in combination
+with CSS3 allows creating modern and modular code for web pages that can be
+viewed on all current devices like Mobiles, Tablets, or the classic Desktop PC.
+The new HTML5 elements plus CSS3 modules can be used as a replacement for
+proprietary solutions like _Adobe Flash_ to build modern webpages based on
+open standards.
 
 === Javascript
 
-HTML5 and CSS3 can do a lot. Content placement and basic methods for the
-dynamic of elements can be done using pure HTML5 and CSS3. For more complex
-solutions like modules, the support of Javascript is needed.
+[role="mb-3"]
+image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}]
+
+JavaScript is a text-based programming language used both on the client-side
+and server-side that allows you to make web pages interactive. Where HTML and
+CSS are languages that give structure and style to web pages, JavaScript gives
+web pages interactive elements that engage a user.
 
-J1 Template has build-in a wide range of JS-powered modules to support a
-website e.g. the navigation, for presenting image data in galleries,
-lightboxes, and so on.
+Content placement and basic methods for the dynamic of elements can be done
+using pure HTML5 and CSS3. For more complex solutions like *modules* (to
+provide dynamic, interactive elements), the support of *Javascript* for a
+webpage is needed.
 
+JavaScript is used for J1 mainly as a client-side script-engine. A client-side
+script is a programming language that performs its tasks entirely on the
+client's machine and does not need to interact with the server to function.
+
+Some of the dynamic website enhancements performed by JavaScript are:
+
+* Loading (new) content or data onto the page without reloading the page
+* Rollover effects and dropdown menus
+* Animating page elements such as fading, resizing or relocating
+* Playing audio and video
+
+J1 Template has build-in a wide range of JS-powered modules to support a
+website e.g. by a powerful navigation system, for presenting image data in
+galleries, lightboxes, and so on. Good news are: no programming JavaScript
+is needed to use the build-in JS-based modules.
 
 [[launch-ready]]
 == Start in No Time
@@ -164,6 +193,8 @@ This is a bit different for static webs as they don’t have a central Managemen
 System as CMS does to integrate external code. There no ecosystem, no
 marketplace to get apps and modules from.
 
+gallery::jg_old_times[]
+
 Luckily, it is not that hard to integrate external components into the world
 of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
 toolset without the need to install, to integrate components that are expected

data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc

@@ -13,16 +13,16 @@ description: >
                                         of a selected theme. Find base Bootstrap features and styles for
                                         the current theme selected.
 
+categories:                             [ Previewer ]
 tags:                                   [ Bootstrap, Themes ]
-categories:                             [ Configuration, Previewer ]
 
-scrollbar:                              true
+scrollbar:                              false
 flowtext:                               false
 
 permalink:                              /pages/public/previewer/theme/
 regenerate:                             false
 
-resources:                              [ rouge, fam, clipboard ]
+resources:                              [ rouge, clipboard ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -60,23 +60,6 @@ resource_options:
 // Include sub-documents
 // -----------------------------------------------------------------------------
 
-Themes for the template system J1 are based on the free and open-source CSS
-front-end framework {url-bs--home}[Bootstrap, {browser-window--new}] of
-version V4.
-
-Bootstrap is a HTML, CSS & JS Library that focuses on simplifying the
-development of modern web pages. The primary purpose to apply the framework
-to J1 is to provide a general standard colors, sizes, fonts and the overall
-layout of a J1-based site. Bootstrap provides basic style definitions for all
-common used HTML elements.
-
-This results in a uniform appearance for the content in terms of the overall
-layout, text, tables and form elements across all modern web browsers available
-on the market. In addition, developers can take advantage of CSS classes
-defined in Bootstrap to customize content individually.
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ++++
   <!-- Prepend H1 tag here -->
   <div id="theme" class="row ml-0 mb-3">
@@ -94,7 +77,8 @@ defined in Bootstrap to customize content individually.
 
       var dependencies_met_themer = setInterval(function() {
         interval_count += 1;
-        if ( j1.adapter.themer.getState() == 'finished' ) {
+        // if ( j1.adapter.themer.getState() == 'finished' ) {
+        if (j1.getState() == 'finished') {
           user_state_detected = j1.existsCookie (cookie_names.user_state);
           if ( user_state_detected ) {
             user_state = j1.readCookie(cookie_names.user_state);
@@ -122,454 +106,6 @@ color scheme, fonts, sizes or the appearance of more complex elements like
 forms or tables. Additionally, a theme may add additonal components but in
 the *sense* of Bootstrap's framework rules and philosophy.
 
-== J1 Color Palette
-
-The color palette used by J1 Template is based on the definitions of Google's
-*Material Design* (MD). The color scheme comprises primary and accent colors
-that can be used for illustration or to develop individual brand colors of a
-website. They’ve been designed to work harmoniously with each other.
-
-The color palette starts with primary colors and fills in the spectrum to
-create a complete and usable palette for Desktop Wen and mobile sites based on
-Androi or iOS. Google suggests using the 500 colors as the primary colors for
-your web and the other colors as accents colors to support the content for
-better reading or orientation.
-
-=== Red and Pink
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#f44336</span> </li>
-        <li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
-        <li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
-        <li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
-        <li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
-        <li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
-        <li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
-        <li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
-        <li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
-        <li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
-        <li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
-        <li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
-        <li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
-        <li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
-        <li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#e91e63</span> </li>
-        <li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
-        <li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
-        <li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
-        <li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
-        <li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
-        <li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
-        <li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
-        <li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
-        <li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
-        <li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
-        <li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
-        <li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
-        <li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
-        <li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Purple and Deep Purple
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex">#9c27b0</span> </li>
-        <li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
-        <li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
-        <li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
-        <li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
-        <li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
-        <li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
-        <li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
-        <li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
-        <li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
-        <li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
-        <li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
-        <li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
-        <li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
-        <li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex">#673ab7</span> </li>
-        <li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
-        <li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
-        <li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
-        <li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
-        <li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
-        <li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
-        <li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
-        <li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
-        <li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
-        <li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
-        <li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
-        <li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
-        <li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
-        <li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Indigo and Blue
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex">#3f51b5</span> </li>
-        <li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
-        <li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
-        <li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
-        <li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
-        <li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
-        <li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
-        <li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
-        <li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
-        <li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
-        <li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
-        <li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
-        <li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
-        <li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
-        <li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#2196f3</span> </li>
-        <li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
-        <li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
-        <li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
-        <li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
-        <li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
-        <li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
-        <li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
-        <li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
-        <li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
-        <li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
-        <li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
-        <li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
-        <li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
-        <li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Light Blue and Cyan
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark">#03a9f4</span> </li>
-        <li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
-        <li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
-        <li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
-        <li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
-        <li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
-        <li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
-        <li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
-        <li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
-        <li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
-        <li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
-        <li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
-        <li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
-        <li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
-        <li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark">#00bcd4</span> </li>
-        <li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
-        <li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
-        <li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
-        <li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
-        <li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
-        <li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
-        <li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
-        <li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
-        <li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
-        <li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
-        <li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
-        <li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
-        <li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
-        <li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Teal and Green
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#009688</span> </li>
-        <li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
-        <li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
-        <li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
-        <li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
-        <li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
-        <li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
-        <li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
-        <li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
-        <li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
-        <li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
-        <li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
-        <li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
-        <li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
-        <li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark">#4caf50</span> </li>
-        <li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
-        <li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
-        <li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
-        <li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
-        <li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
-        <li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
-        <li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
-        <li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
-        <li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
-        <li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
-        <li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
-        <li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
-        <li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
-        <li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Light Green and Lime
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark">#8bc34a</span> </li>
-        <li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
-        <li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
-        <li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
-        <li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
-        <li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
-        <li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
-        <li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
-        <li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
-        <li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
-        <li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
-        <li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
-        <li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
-        <li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
-        <li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark">#cddc39</span> </li>
-        <li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
-        <li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
-        <li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
-        <li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
-        <li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
-        <li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
-        <li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
-        <li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
-        <li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
-        <li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
-        <li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
-        <li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
-        <li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
-        <li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Yellow and Amber
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark">#ffeb3b</span> </li>
-        <li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
-        <li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
-        <li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
-        <li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
-        <li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
-        <li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
-        <li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
-        <li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
-        <li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
-        <li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
-        <li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
-        <li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
-        <li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
-        <li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark">#ffc107</span> </li>
-        <li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
-        <li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
-        <li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
-        <li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
-        <li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
-        <li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
-        <li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
-        <li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
-        <li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
-        <li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
-        <li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
-        <li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
-        <li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
-        <li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Orange and Deep Orange
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#ff9800</span> </li>
-        <li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
-        <li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
-        <li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
-        <li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
-        <li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
-        <li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
-        <li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
-        <li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
-        <li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
-        <li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
-        <li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
-        <li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
-        <li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
-        <li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#ff5722</span> </li>
-        <li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
-        <li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
-        <li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
-        <li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
-        <li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
-        <li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
-        <li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
-        <li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
-        <li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
-        <li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
-        <li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
-        <li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
-        <li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
-        <li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Brown and Grey
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex">#795548</span> </li>
-        <li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
-        <li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
-        <li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
-        <li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
-        <li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
-        <li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
-        <li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
-        <li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
-        <li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
-        <li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#9e9e9e</span> </li>
-        <li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
-        <li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
-        <li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
-        <li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
-        <li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
-        <li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
-        <li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
-        <li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
-        <li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
-        <li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Blue Grey and BW
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#607d8b</span> </li>
-        <li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
-        <li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
-        <li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
-        <li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
-        <li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
-        <li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
-        <li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
-        <li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
-        <li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
-        <li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
-        <li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
 == Navbars
 
 See examples for Bootstrap’s powerful, responsive navigation header, the
@@ -915,12 +451,12 @@ A floating action button represents the primary action in an application,
 it is used for a promoted action.
 
 mdi:bootstrap[24px, mdi-md-deep-purple]
-https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-char-middot} Floating action buttons, {browser-window--new}]
+https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
 
 ++++
 <div class="doc-example">
   <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
@@ -928,7 +464,7 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
 [source, html, role="noclip"]
 ----
   <button type="button" class="btn bmd-btn-fab" aria-label="fab-button">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 ----
 
@@ -937,28 +473,28 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
 ++++
 <div class="doc-example">
   <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-danger" aria-label="fab-button-danger">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-info" aria-label="fab-button-info">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-success" aria-label="fab-button-success">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-warning" aria-label="fab-button-warning">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
@@ -966,17 +502,17 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
 [source, html, role="noclip"]
 ----
   <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   ...
   <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 ----
 
@@ -987,7 +523,7 @@ A smaller sized, i.e. mini floating action button, is also available.
 ++++
 <div class="doc-example">
   <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
-    <i class="mdi mdi-plus mdi-sm"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
@@ -995,7 +531,7 @@ A smaller sized, i.e. mini floating action button, is also available.
 [source, html, role="noclip"]
 ----
   <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
-    <i class="mdi mdi-plus mdi-sm"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 ----
 
@@ -1569,29 +1105,28 @@ link:{url-bs-docs--components-badges}[Bootstrap Docs {char-middot} Badge, {brows
 ifdef::scrollbars[]
 === Scrollbars
 
-// https://codepen.io/devstreak/pen/dMYgeO
-
-Chrome, Edge, Safari and Opera support the non-standard `::-webkit-scrollbar`
-pseudo element, which allows to modify the look of the browser's scrollbar.
+Chromium-based browsers like Chrome, Edge, Safari or Opera support the *webkit*
+`::-webkit-scrollbar` pseudo element, which allows to modify the look of the
+browser's scrollbar.
 
-NOTE: Custom scrollbars are not supported in Firefox or in Edge, prior
-version 79 (Chromium based).
+NOTE: Custom (webkit-based) scrollbars are not supported with the Firefox
+browser.
 
 .Default scrollbar J1 Template
 [source, css, role="noclip"]
 ----
-::-webkit-scrollbar-track {
-	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0,3);
-	background-color: #E0E0E0;
-}
-
 ::-webkit-scrollbar {
-	width: 3px;
-	background-color: #2196F3;
+	width: 12px;
+	background-color: $grey-100;
+}
+::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px $darken-300;
+  border-radius: 0px;
+  background-color: $grey-100;
 }
-
 ::-webkit-scrollbar-thumb {
-	background-color: #2196F3;
+	-webkit-box-shadow: inset 0 0 6px $lighten-300;
+	background-color: $grey-800;
 }
 ----
 
@@ -1904,6 +1439,7 @@ They have no margin by default, so use spacing utilities as needed.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser-window--new}]
 
+==== Simple cards
 ++++
 <div class="doc-example mb-3">
 
@@ -2029,12 +1565,63 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
       </div>
     </div>
   </div>
+</div>
+++++
+
+==== Image cards
+++++
+<div class="doc-example mb-3">
 
   <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <!-- h3 class="card-header notoc">Header</h3 -->
+        <img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
+        <div class="card-body">
+          <h5 class="card-title notoc">Special title treatment</h5>
+          <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
+        </div>
+
+        <div class="card-body">
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        </div>
+
+        <!-- div class="card-body">
+          <a href="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
+        </div -->
+        <!-- div class="card-footer text-muted">
+          2 days ago
+        </div -->
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <!-- h3 class="card-header notoc">Header</h3 -->
+        <img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
+        <div class="card-body">
+          <h5 class="card-title notoc">Special title treatment</h5>
+          <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
+        </div>
+
+        <div class="card-body">
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        </div>
+
+        <!-- div class="card-body">
+          <a href="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
+        </div -->
+
+        <div class="card-footer text-muted">
+          2 days ago
+        </div>
+      </div>
+    </div>
     <div class="col-md-4 col-sm-4 col-xs-12">
       <div class="card mb-3" style="max-width: 20rem;">
         <h3 class="card-header notoc">Header</h3>
-        <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
+        <img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
         <div class="card-body">
           <h5 class="card-title notoc">Special title treatment</h5>
           <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
@@ -2054,7 +1641,6 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
       </div>
     </div>
   </div>
-
 </div>
 ++++