diff --git a/Readme.md b/Readme.md index d0547c8..95f1e8e 100644 --- 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
-²: 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.
+²: card borders not rounded diff --git a/docs/addons/tabbox.css b/docs/addons/tabbox.css index 28abfa3..f5629f5 100644 --- 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; } -} \ No newline at end of file +} +@media print { .tabs label + .tab { display: block; } .tabs label { display: none; } } \ No newline at end of file diff --git a/docs/classless-tiny.css b/docs/classless-tiny.css index 03b3a25..980907d 100644 --- 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 index 20b3773..19820c4 100644 --- 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; } } \ No newline at end of file