Resolves #104

Bug found and fixed. Should work as expected now.

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## v2.3.6
+
+- Fixes a bug that caused transparency in `.modal`s that use `.card`s (#104).
+- Documentation update for `.modal`s.
+
+## v2.3.5
+
+- Fixes a bug caused by empty `<td>` elements, causing mobile tables to not display as intended.
+
+## v2.3.4
+
+- Fixed an edge-case that could cause trouble with `<header>` elements (#94).
+- Fixes some issues in the documentation (#92, #93).
+- Added some more specificity to the custom styling for `<select>` elements.
+
 ## v2.3.3
 
 - Added a new `mini-pwa` flavor, targeting Android and mobile devices in general.

dist/mini-dark.css

@@ -3,7 +3,7 @@
   Flavor name: Dark (mini-dark)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.
@@ -812,7 +812,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #20292e;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 1.5rem;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23d0d0d0" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #39444a;
@@ -821,7 +821,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #263238;
 }
 
@@ -1360,6 +1360,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #1c2529;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);
@@ -1629,6 +1630,7 @@ table.striped tr:nth-of-type(2n) > td {
   align-self: center;
   position: relative;
   width: 100%;
+  background: #232e33;
   border: 0.0625rem solid #616161;
   margin: 0.5rem;
   overflow: hidden;

dist/mini-default.css

@@ -3,7 +3,7 @@
   Flavor name: Default (mini-default)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.
@@ -811,7 +811,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #c9c9c9;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 1.5rem;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #fafafa;
@@ -820,7 +820,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #e5e5e5;
 }
 
@@ -1360,6 +1360,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #c9c9c9;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

dist/mini-lite.css

@@ -3,7 +3,7 @@
   Flavor name: Lite (mini-lite)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.
@@ -1093,6 +1093,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #c9c9c9;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

dist/mini-nord.css

@@ -1,9 +1,9 @@
 @charset "UTF-8";
-/*
-  Flavor name: Nord (mini-nord)
-  Author: tphecca (https://github.com/tphecca)
-  Maintainers: tphecca
-  mini.css version: v2.3.3
+/*
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.
@@ -820,7 +820,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #bdbdbd;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 20px;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%232E3440" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #E5E9F0;
@@ -829,7 +829,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #e0e0e0;
 }
 
@@ -1055,8 +1055,8 @@ input[type="file"] {
   background: #5E81AC;
 }
 
-/*
-  Custom elements for forms and input elements.
+/*
+  Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary, [role="button"].primary {
@@ -1382,6 +1382,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 1px solid #D8DEE9;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);
@@ -1651,6 +1652,7 @@ table.striped tr:nth-of-type(2n) > td {
   align-self: center;
   position: relative;
   width: 100%;
+  background: #ECEFF4;
   border: 1px solid #D8DEE9;
   margin: 2px 10px 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
@@ -1684,8 +1686,8 @@ table.striped tr:nth-of-type(2n) > td {
   }
 }
 
-/*
-  Custom elements for cards and containers.
+/*
+  Custom elements for cards and containers.
 */
 @media screen and (min-width: 480px) {
   .card.large {
@@ -2018,8 +2020,8 @@ mark.inline-block {
 :checked + .modal .card .close {
   z-index: 1211;
 }
-
-/*
+
+/*
   Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -2123,8 +2125,8 @@ progress[value="1000"]::-moz-progress-bar {
   -webkit-animation: spinner-donut-anim 1.2s linear infinite;
   animation: spinner-donut-anim 1.2s linear infinite;
 }
-
-/*
+
+/*
   Custom elements for progress elements and spinners.
 */
 progress.inline {
@@ -2275,8 +2277,8 @@ ul.breadcrumbs li:last-child:after {
   display: block;
   text-align: center;
 }
-
-/*
+
+/*
   Custom elements for utilities and helper classes.
 */
 .bordered {

dist/mini-pwa.css

@@ -3,7 +3,7 @@
   Flavor name: Progressive Web App (mini-pw)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.
@@ -1215,6 +1215,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #bdbdbd;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

dist/mini-sucroa.css

@@ -3,7 +3,7 @@
   Flavor name: Sucroa (mini-sucroa)
   Author: Angeliki Daskalakis
   Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 @import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
 /*
@@ -824,7 +824,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #a9a2ba;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 20px;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23211423" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #f2edff;
@@ -833,7 +833,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #eae1ff;
 }
 
@@ -1340,6 +1340,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 1px solid #a9a2ba;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

docs/contextual.html

@@ -272,8 +272,8 @@
 						</ul><hr>
 						<div class="row">
 							<div class="col-sm-12 col-md-6">
-								<pre>&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
-&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
+								<pre>&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
+&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
 &lt;div class=&quot;modal&quot; role=&quot;dialog&quot; aria-labelledby=&quot;dialogTitle&quot;&gt;
   &lt;div class=&quot;card&quot;&gt;
     &lt;label for=&quot;modal-toggle&quot; class=&quot;close&quot;&gt;&lt;/label&gt;

docs/flavors.html

@@ -44,13 +44,13 @@
           <h1>Flavors</h1>
           <p style="text-align:justify">One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 					<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-        <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
+        <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.6/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
         <p style="text-align:justify">There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
         <ul style="margin-left:0px; padding-left: 4px">
           <li class="card fluid">
             <h2 class="section double-padded">Default <small>mini-default</small></h2>
             <pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-            <p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color">Google's Material design color palette</a>.</p>
+            <p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
             <div class="section double-padded">
               <p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
               <p><strong>Size:</strong> 7 KB</p>

docs/index.html

@@ -120,7 +120,7 @@
 				<br/>
 				<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
+				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.6/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
 				<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
 				<hr>
         </div>
@@ -143,9 +143,10 @@
         <div class="col-sm-12 col-lg-10 col-lg-offset-1">
           <h2>Quick overview</h2>
 					<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
-					<figure style="margin: 0;" class="hidden-sm"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
+          <br/>
 					<h3>Why should I use mini.css?</h3>
 					<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
+          <p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
 					<br/>
 					<h3>What exactly does mini.css provide?</h3>
 					<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
@@ -170,7 +171,7 @@
 					<div class="card fluid" style=" width: 100%;">
 						<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
 						<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
-						<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;">Star mini.css</a>
+						<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i>&nbsp;Star mini.css</a>
 					</div>
 				</div>
       </div>
@@ -181,6 +182,13 @@
             <ul>
             <li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
 						<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
+            <li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
+              <ol>
+                <li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
+                <li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
+                <li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
+              </ol>
+            </li>
             <li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
 						<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React &amp; Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
             <li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>

docs/input_control.html

@@ -107,7 +107,7 @@
           <div class="card fluid">
             <div class="section"><h2>Forms &amp; input</h2></div>
             <div class="section row">
-              <div class="col-sm-12 col-sm-last col-lg-4 col-md-normal">
+              <div class="col-sm-12 col-sm-last col-md-normal col-lg-8 col-lg-offset-2">
               <form>
               <fieldset>
                 <legend>Inline form (default style)</legend>
@@ -137,9 +137,18 @@
                     <label for="number">Number</label>
                   </div>
                   <div class="col-sm-12 col-md">
-                    <input type="number" value="4" id="number" style="width:85%;">
+                    <input type="number" value="42" id="number" style="width:85%;">
                   </div>
                 </div>
+                <div class="row responsive-label">
+                  <div class="col-sm-12 col-md-3">
+                    <label for="invalid">Invalid</label>
+                  </div>
+                  <div class="col-sm-12 col-md">
+                    <input value="invalid" id="invalid" style="width:85%;">
+                  </div>
+                  <script>document.getElementById("invalid").setCustomValidity("This field is invalid");</script>
+                </div>
                 <div class="row responsive-label">
                   <div class="col-sm-12 col-md-3">
                     <label for="disabled">Disabled</label>
@@ -167,7 +176,7 @@
               </fieldset>
               </form>
               </div>
-              <div class="col-sm-12 col-sm-first col-lg-8 col-md-normal">
+              <div class="col-sm-12 col-sm-first col-md-normal">
                 <p style="text-align: justify;">Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code>&lt;form&gt;</code> element and add your <code>&lt;input&gt;</code> elements inside. Link them to <code>&lt;label&gt;</code> elements for ease of access and you are pretty much set. We highly recommend using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements to annotate your forms as well, but you can skip them if you wish.</p>
                 <p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid"><strong>grid</strong></a> module's rows and columns.</p>
                 <h3>Sample code</h3>

docs/quick_reference.html

@@ -67,7 +67,7 @@
               </div><br>
               <p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 							<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-              <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
+              <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.6/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
 							<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
               <p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
               <pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>

docs/templates.html

@@ -70,7 +70,7 @@
 						<p class="section double-padded" style="text-align: justify;">Card-based website layout templates are another common need, as many websites utilize a tile system to display lots of smaller pieces of content. Using the card and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements, it's really easy to create a responsive website with lots of cards containing small pieces of content, such as a showcase for a website, a photo album or an article browser.</p>
           </li>
 					<li class="card fluid" style="margin-bottom: 3rem;">
-						<p data-height="480" data-theme-id="0" data-slug-hash="GmWrVv" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Login Form Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/xGmWrVv/">Login Form Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+						<p data-height="480" data-theme-id="0" data-slug-hash="GmWrVv" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Login Form Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/GmWrVv/">Login Form Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
 						<h2 class="section double-padded">Login form template</h2>
 						<p class="section double-padded" style="text-align: justify;">Login forms are one of the most commonly used elements in any website design. Using the input_control and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements and a couple of optional tricks, it's really easy to create a responsive login form with the required fields and buttons.</p>
           </li>

docs/v2/DEVLOG.md

@@ -1280,3 +1280,39 @@
 ## 20170715
 
 - Worked on the `mini-pwa` flavor. Updated everything and released `v2.3.3`.
+
+# v2.3.4 Development Log
+
+## 20170816
+
+- Resolved issue #94 by applying the suggested changes to the `navigation` module.
+- Resolved issue #93 by fixing the link, obviously.
+- Applied a new layout to the `Forms & input` card of `input_control`, should resolve a long-standing problem with layout on certain screens.
+- Added `:not([multiple])` to the custom `select` style, fixing a problem with multi-value `select` elements.
+- Added example for `:invalid` `input` in `input_control` as requested in #92.
+- Updated all flavors to the latest version.
+- Removed Scrimba screencast from `index.html`, now it's only in its respective module. Should make loading somewhat faster.
+- Released update.
+
+# v2.3.5 Development Log
+
+## 20171015
+
+- Merged PR #102 to fix #101.
+- Updated `table` to properly fix #101 and allow for customization.
+- Rebuilt flavors to latest version.
+- Updated docs.
+- Released patch.
+
+## 20171018
+
+- Fixed a typo in the `flavors` doc page.
+
+# v2.3.6 Development Log
+
+## 20171019
+
+- Fixed a documentation problem with `.modal`s. (#104)
+- Rebuilt flavors to latest version.
+- Updated docs.
+- Released patch.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini.css",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "A minimal, responsive, style-agnostic CSS framework.",
   "main": "dist/mini-default.min.css",
   "directories": {

src/flavors/mini-dark.scss

@@ -5,7 +5,7 @@
   Flavor name: Dark (mini-dark)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 //  Basic rules for body and typography
 $fore-color:            #d0d0d0;                  // Text and general foreground color

src/flavors/mini-default.scss

@@ -5,7 +5,7 @@
   Flavor name: Default (mini-default)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

src/flavors/mini-lite.scss

@@ -7,7 +7,7 @@
   Flavor name: Lite (mini-lite)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

src/flavors/mini-nord.scss

@@ -5,7 +5,7 @@
   Flavor name: Nord (mini-nord)
   Author: tphecca (https://github.com/tphecca)
   Maintainers: tphecca
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 //  This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
 //  Basic rules for body and typography

src/flavors/mini-pwa.scss

@@ -7,7 +7,7 @@
   Flavor name: Progressive Web App (mini-pw)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

src/flavors/mini-sucroa.scss

@@ -5,7 +5,7 @@
   Flavor name: Sucroa (mini-sucroa)
   Author: Angeliki Daskalakis
   Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-  mini.css version: v2.3.3
+  mini.css version: v2.3.6
 */
 // Google Fonts imports and usage
 @import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
@@ -13,7 +13,7 @@
 // font-family: 'Cousine', monospace;
 //  Basic rules for body and typography
 $fore-color:            #211423;                    // Text and general foreground color
-$back-color:           #fffcc9;                     // Body background color
+$back-color:            #fffcc9;                    // Body background color
 $base-font-family:      'Libre Baskerville', serif; // Default font stack for all elements:
 $base-root-font-size:   16px;                       // Root font sizing for all elements [1]
 $base-font-size:        1em;                        // Default font sizing for all elements [2]

src/mini/_card.scss

@@ -30,9 +30,7 @@ $fore-color:               black !default;           // [External variable - cor
   position: relative;
   width: 100%;
   // Actual styling for the cards
-  @if $card-back-color != $back-color {
-    background: $card-back-color;
-  }
+  background: $card-back-color; // Do not use conditions on this, causes transparency issues
   @if $card-fore-color != $fore-color {
     color: $card-fore-color;
   }

src/mini/_input_control.scss

@@ -268,7 +268,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 }
 // Correct background styling in Safari
 @if $apply-select-fix {
-  select {
+  select:not([multiple]) {
     padding-right: $select-padding-right;
     background: url(selectArrow()) no-repeat right;
     background-color: $input-back-color;

src/mini/_navigation.scss

@@ -37,9 +37,7 @@ $button-border-style: 1px solid transparent !default;  // [External variable - i
 header {
   display: block;    // Correct display for older versions of IE.
   height: $header-height;
-  @if $header-back-color != $back-color {
-    background: $header-back-color;
-  }
+  background: $header-back-color; // Always apply background color to avoid shine through
   @if $header-fore-color != $fore-color {
     color: $header-fore-color;
   }

src/mini/_table.scss

@@ -16,6 +16,8 @@ $table-striped-name:         'striped' !default;    // Class name for striped ta
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
 $back-color:              white !default;           // [External variable - core] Background color for everything.
 $fore-color:              black !default;           // [External variable - core] Foreground color for everything.
+$base-font-size:          1rem;                     // [External variable - core] Default font sizing for all elements.
+$base-line-height:        1.5;                      // [External variable - core] Default line height for all elements.
 // Desktop view.
 table {
   border-collapse: separate;
@@ -107,6 +109,8 @@ table {
         border-bottom: $table-border-style;
       }
       text-align: right;
+      // Fixes empty <td> elements messing up the cards
+      min-height: $base-font-size * $base-line-height;
     }
     td:before {
       content: attr(#{$table-mobile-card-label});