Doc housekeeping

Made spacing and margins more responsive, so that mobile devices will have an easier time reading the website.
Chalarangelo · May 4, 2017 · 22b730b · 22b730b
1 parent b85d289
commit 22b730b
Show file tree

Hide file tree

Showing 25 changed files with 33 additions and 30 deletions.
diff --git a/docs/card.html b/docs/card.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10#col{padding: 0 !important;}}
 	</style>
   </head>
   <body>
@@ -33,7 +33,7 @@
 			<a href="quick_reference.html" class="button">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
-		<div class="container" style="padding-left: 0.25rem;">
+		<div class="container" id="co" style="padding-left: 0.25rem;">
 			<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
 				<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
 				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
@@ -69,7 +69,7 @@ <h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core<
 				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
 				<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
 			</nav> </div>
-				<div class="col-sm-12 col-md-8 col-lg-10"><main>
+				<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
       <div class="row" style="padding-top: 40px;" id="card-title">
         <div class="col-sm-12">
           <h1>Card</h1>

diff --git a/docs/contextual.html b/docs/contextual.html
@@ -24,7 +24,7 @@
 	.col-sm-12.col-sm-last.col-md-12.col-md-normal { box-sizing: border-box; border-bottom: 1px solid #c9c9c9; }
 	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	</style>
   </head>
   <body>

diff --git a/docs/core.html b/docs/core.html
@@ -22,6 +22,7 @@
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
 	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } }
+	@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	</style>
   </head>
   <body>

diff --git a/docs/customization/card.html b/docs/customization/card.html
@@ -23,7 +23,7 @@
 	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	</style>

diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
 	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	</style>

diff --git a/docs/customization/core.html b/docs/customization/core.html
@@ -23,7 +23,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
 	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; } }
 	td:first-child, td:last-child { font-family: monospace, monospace; }
-	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
+	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	</style>
   </head>
   <body>

diff --git a/docs/customization/grid.html b/docs/customization/grid.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} }
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5; }
+	.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
 	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }

diff --git a/docs/customization/index.html b/docs/customization/index.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
 	@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored { color: #f5f5f5;}
+	.box-colored { color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	</style>
   </head>
   <body>

diff --git a/docs/customization/input_control.html b/docs/customization/input_control.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}

diff --git a/docs/customization/navigation.html b/docs/customization/navigation.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
 	@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored { color: #f5f5f5;}
+	.box-colored { color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	</style>

diff --git a/docs/customization/progress.html b/docs/customization/progress.html
@@ -24,7 +24,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	</style>

diff --git a/docs/customization/tab.html b/docs/customization/tab.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	</style>

diff --git a/docs/customization/table.html b/docs/customization/table.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5; }
+	.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	</style>

diff --git a/docs/customization/utility.html b/docs/customization/utility.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
 	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored { color: #f5f5f5;}
+	.box-colored { color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	</style>

diff --git a/docs/flavors.html b/docs/flavors.html
@@ -20,6 +20,7 @@
 	.box-colored.red { background: #e53935; } .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	h2 > a{ font-size: 1rem; float: right;} .box-left { text-align: left; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
+	@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm.col-lg-offset.col-lg-10{padding: 0 !important;}}
 	</style>
   </head>
   <body>
@@ -39,7 +40,7 @@ <h1>Flavors</h1>
 					<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.1.3/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
         <p>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: 10px">
+        <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>

diff --git a/docs/grid.html b/docs/grid.html
@@ -22,7 +22,7 @@
 	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} }
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5; }
+	.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10#col{padding: 0 !important;}}
 	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
 	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
 	</style>
@@ -35,7 +35,7 @@
 			<a href="quick_reference.html" class="button">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
-		<div class="container" style="padding-left: 0.25rem;">
+		<div class="container" style="padding-left: 0.25rem;" id="co">
 			<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
 				<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
 				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
@@ -71,7 +71,7 @@ <h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core<
 				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
 				<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
 			</nav> </div>
-			<div class="col-sm-12 col-md-8 col-lg-10"><main>
+			<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
       <div class="row" style="padding-top: 40px;" id="grid-title">
         <div class="col-sm-12">
           <h1>Grid</h1>

diff --git a/docs/input_control.html b/docs/input_control.html
@@ -23,7 +23,7 @@
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	@media (max-width: 1269px) and (min-width: 768px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-bottom: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
 	</style>
   </head>

diff --git a/docs/navigation.html b/docs/navigation.html
@@ -26,6 +26,7 @@
 	.box-colored { color: #f5f5f5;} .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
 	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	@media (min-width: 1280px) {.col-sm-12.col-sm-last.col-md-12.col-md-normal.col-lg-4.col-lg-normal {border:0; border-right: 1px solid #c9c9c9; }}
+	@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
 	</style>
   </head>
   <body>