From d260b75a49273963a2029d83ae2df716ff14cee2 Mon Sep 17 00:00:00 2001 From: Rob Larsen Date: Mon, 3 Jun 2019 15:55:04 -0400 Subject: [PATCH] updating main.css --- dist/css/main.css | 225 ++++++++++++++++++++-------------------------- package.json | 2 +- 2 files changed, 99 insertions(+), 128 deletions(-) diff --git a/dist/css/main.css b/dist/css/main.css index b86e50864d..640615eb8b 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1,21 +1,20 @@ /*! HTML5 Boilerplate v7.1.0 | MIT License | https://html5boilerplate.com/ */ -/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ - /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ - html { - color: #222; - font-size: 1em; - line-height: 1.4; +html { + color: #222; + font-size: 1em; + line-height: 1.4; } /* @@ -29,13 +28,13 @@ */ ::-moz-selection { - background: #b3d4fc; - text-shadow: none; + background: #b3d4fc; + text-shadow: none; } ::selection { - background: #b3d4fc; - text-shadow: none; + background: #b3d4fc; + text-shadow: none; } /* @@ -43,12 +42,12 @@ */ hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } /* @@ -63,7 +62,7 @@ iframe, img, svg, video { - vertical-align: middle; + vertical-align: middle; } /* @@ -71,9 +70,9 @@ video { */ fieldset { - border: 0; - margin: 0; - padding: 0; + border: 0; + margin: 0; + padding: 0; } /* @@ -81,7 +80,7 @@ fieldset { */ textarea { - resize: vertical; + resize: vertical; } /* ========================================================================== @@ -89,35 +88,17 @@ textarea { ========================================================================== */ .browserupgrade { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; } - - - - /* ========================================================================== +/* ========================================================================== Author's custom styles ========================================================================== */ - - - - - - - - - - - - - - - - /* ========================================================================== +/* ========================================================================== Helper classes ========================================================================== */ @@ -125,7 +106,7 @@ textarea { * Hide visually and from screen readers */ - .hidden { +.hidden { display: none !important; } @@ -138,33 +119,34 @@ textarea { * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ -.visuallyhidden { +.sr-only { border: 0; - clip: rect(0 0 0 0); + clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; + white-space: nowrap; width: 1px; - white-space: nowrap; /* 1 */ + /* 1 */ } /* -* Extends the .visuallyhidden class to allow the element +* Extends the .sr-only class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { +.sr-only.focusable:active, +.sr-only.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; - width: auto; white-space: inherit; + width: auto; } /* @@ -189,107 +171,96 @@ textarea { .clearfix:before, .clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ + content: " "; + /* 1 */ + display: table; + /* 2 */ } .clearfix:after { clear: both; } - /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ - @media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ } @media print, - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 1.25dppx), - (min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 1.25dppx), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ } - /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ - @media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; /* Black prints faster */ - -webkit-box-shadow: none !important; - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + /* Black prints faster */ + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ - - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - /* + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + pre { + white-space: pre-wrap !important; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + /* * Printing Tables: - * http://css-discuss.incutio.com/wiki/Printing_Tables + * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables */ - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } } - diff --git a/package.json b/package.json index b6707b9e5e..3f4f816275 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "gulp-rename": "^1.4.0", "gulp-replace": "^1.0.0", "jquery": "3.4.1", - "main.css": "1.0.0", + "main.css": "2.0.0", "mocha": "^5.2.0", "modernizr": "3.7.1", "normalize.css": "8.0.1",