minor improvements for v1.0

emareg · Mar 18, 2022 · 8460717 · 8460717
1 parent 09f4b2e
commit 8460717
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 51 deletions.
diff --git a/Readme.md b/Readme.md
@@ -83,21 +83,18 @@ For testing, you can simply insert the following line into your HTML file. For p
 ## Classeless Support
 
 
-| Browser                       | Support v94 | Support v95 | 
-|-------------------------------|-------------|-------------|
-| Chromium 87.0 on Ubuntu 18.04 | perfect     | perfect     |
-| Chromium 92.0 on Ubuntu 20.04 | --          | perfect     |
-| FireFox 85.0  on Ubuntu 18.04 | perfect     | perfect     |
-| FireFox 91.0  on Ubuntu 20.04 | --          | perfect     |
-| FireFox 84.0  on Windows 10   | perfect     | perfect     |
-| Edge 42.17 on Windows 10      | good¹       | --          |
-| Edge 88.0 on Windows 10       | perfect     | perfect     |
-| IE 11 on Windows 10           | poor/good²  | poor/good²  |
-| FireFox 85.1 on Android 10    | perfect     | perfect     |
-| Samsung Browser on Android 10 | perfect     | perfect     |
-| Safari on iPhone 10           | perfect     | --          |
-
-
-¹: drop letter slightly below baseline, citations slightly too high<br>
-²: Classless-full: body full width, table and code styles ignored, cite elements overlap text. However, classless-tiny without variables looks good.
+| Browser                       | Support v94 | Support v95 | Support v1.0 | 
+|-------------------------------|-------------|-------------|--------------|
+| Chromium 96.0 on Ubuntu 20.04 | --          | perfect     | perfect      |
+| FireFox 97.0  on Ubuntu 20.04 | --          | perfect     | perfect      |
+| FireFox 84.0  on Windows 10   | perfect     | perfect     | perfect      |
+| Edge 88.0 on Windows 10       | perfect     | perfect     | perfect      |
+| IE 11 on Windows 10           | poor/good¹  | poor/good¹  | poor/good¹   |
+| FireFox 85.1 on Android 10    | perfect     | perfect     | perfect      |
+| Samsung Browser on Android 10 | perfect     | perfect     | perfect      |
+| Safari on iPhone 10           | perfect     | --          | good²        |
+
+
+¹: Classless-full: body full width, table and code styles ignored, cite elements overlap text. However, classless-tiny without variables looks good.<br>
+²: card borders not rounded
 
diff --git a/docs/addons/tabbox.css b/docs/addons/tabbox.css
@@ -37,4 +37,5 @@
 @media (max-width: 45em) {
   .tabs .tab, .tabs label { order: initial; }
   .tabs label { width: 100%; margin: 0 0 -1px !important; }
-}
+}
+@media print { .tabs label + .tab { display: block; } .tabs label { display: none; } } 
diff --git a/docs/classless-tiny.css b/docs/classless-tiny.css
@@ -1,10 +1,10 @@
-/* Classless.css v0.95 (Tiny Inline Version)*/
+/* Classless.css v1.0 (Tiny Inline Version)*/
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
 
 /* Tiny Reset for block elements  */
 * {box-sizing: border-box; border-spacing: 0;}
 header, footer, figure, table, video, details, blockquote,
-ul, ol, dl, fieldset, pre, pre > code, caption {
+ul, ol, dl, fieldset, pre, pre > code, caption, nav {
 	display: block;
 	margin: 0.5rem 0rem 1rem;
 	width: 100%;
@@ -28,6 +28,15 @@ a, summary, button, select { color: #07c; cursor: pointer; }
 a { text-decoration: underline solid #d1d1d1; text-underline-position: under; }
 a:hover { color: #088;  border-color: #088; }
 
+/* common */
+td, th, pre > code { padding: 0.5rem 0.8rem; }
+.card, details { padding: 0 .6rem; }
+code, kbd, samp {	padding: 0.2rem; font: .9em/1.4 monospace; }
+code, kbd, samp, nav, .card {	background: #f4f5f6; border-radius: 0.3em; }
+kbd, .card, details[open] { border: 1px solid #d1d1d1; }
+td, th, figcaption, caption, .card { font-size: 95%; }
+td, th, hr { border: 0; border-bottom: 0.1rem solid #d1d1d1; }
+
 /* lists */
 ul, ol { padding-top: 0.5rem; }
 li, dd { margin-bottom: 0.5rem; }
@@ -45,13 +54,7 @@ h6 { font-size: 1.0em; font-weight: 600; display: inline; }
 h6 + p { display: inline; }
 
 /* tables */
-td, th {
-  padding: 0.5rem 0.8rem;
-  text-align: right;
-  border-bottom: 0.1rem solid #d1d1d1;
-  white-space: nowrap;
-  font-size: 95%;
-}
+td, th { text-align: right; white-space: nowrap; }
 td:first-child, th:first-child { text-align: left; }
 tr:hover{ background-color: #f4f5f6; }
 
@@ -63,24 +66,10 @@ figcaption, caption { color: #888; margin-bottom: 1rem; }
 figure > *:not(:last-child) { margin: 0 0 0.4rem; }
 
 /*code*/
-pre > code {
-  margin: 0;
-  position: relative;
-  padding: 0.8em;
-  border-left: 0.3rem solid #088;
-}
-code, kbd, samp {
-	padding: 0.2rem;
-	font: 12pt monospace;
-	background: #f4f5f6;
-	border-radius: 0.3em;
-}
-kbd { border: 0.1rem solid #d1d1d1; }
+pre > code { margin: 0; border-left: 0.4rem solid #088; }
 
 /* misc */
 blockquote{ border-left: 0.3rem solid #d1d1d1; padding: 1rem 1.5rem; font-style: italic; }
-hr { border: 0; border-top: 0.1rem solid #d1d1d1; }
-nav { width: 100%; min-height: 2.8em; background-color: #f4f5f6; }
 input { font-size: 1em; }
 p>cite:before { content: ' ('; } p>cite:after {content: ') '}
 

diff --git a/docs/classless.css b/docs/classless.css
@@ -329,12 +329,12 @@ p>select { padding: 0;      margin: 0 .5em; }
 .row { display: flex; margin:  0.5rem -0.6rem; align-items: stretch; }
 .row [class*="col"] { padding: 0  0.6rem; }
 .row .col   { flex: 1 1 100%; }
-.row .col-2 { flex: 0 0 16.666%; }
-.row .col-3 { flex: 0 0 25%; }
-.row .col-4 { flex: 0 0 33.333%; }
-.row .col-5 { flex: 0 0 41.666%; }
-.row .col-6 { flex: 0 0 50%; }
-@media (max-width: 40em) { .row { flex-direction: column; } }
+.row .col-2 { flex: 0 0 16.66%; max-width: 16.66%;}
+.row .col-3 { flex: 0 0 25%; max-width: 25%;}
+.row .col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
+.row .col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
+.row .col-6 { flex: 0 0 50%; max-width: 50%; }
+@media (max-width: 40rem) { .row { flex-direction: column; } }
 
 /* align */
 .text-left   { text-align: left; }
@@ -371,11 +371,12 @@ p>select { padding: 0;      margin: 0 .5em; }
 
 /* be print-friendly */
 @media print { 
-	@page { margin: 2.0cm; } 
+	@page { margin: 1.5cm 2cm; } 
 	html {font-size: 9pt!important; } 
 	body { max-width: 27cm; }
+	p { orphans: 2; widows: 2; }
 	caption, figcaption { page-break-before: avoid; }
-	h2, h3, h4, h5{page-break-after: avoid;}
-	.noprint, body>nav { display: none; }
+	h2, h3, h4, h5 { page-break-after: avoid;}
+	.noprint, body>nav, section:after { display: none; }
 	.row { flex-direction: row; }
 }