From b4f9d379f42533eb551ac92600a705972815c9ff Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Fri, 8 Mar 2024 18:46:17 -0600 Subject: [PATCH] WIP I dunno why do I do this --- public/style.build.css | 25 +- public/style.css | 11633 ++++++++++++++++++-------- src/rawdata/scss/core.css | 10 +- src/rawdata/scss/vars.css | 14 +- src/templates/src/layouts/base.html | 3 +- 5 files changed, 8134 insertions(+), 3551 deletions(-) diff --git a/public/style.build.css b/public/style.build.css index ab60999..72f0b94 100644 --- a/public/style.build.css +++ b/public/style.build.css @@ -7155,8 +7155,8 @@ code { /* src/rawdata/scss/vars.css */ :root { - --main-background-color: white; - --main-color: black; + --background-color: white; + --color: black; --link-color: #cc3b95; --theme-color: #666; --theme-color-dim: #aaa; @@ -7164,11 +7164,13 @@ code { --theme-color-dimmest: #ccc; --theme-color-dark: #666; --theme-color-light: #666; + --main-background-color: #f8f8f8; + --main-background-color-transparent: rgba(#f8f8f8, 0); } @media (prefers-color-scheme: dark) { :root { - --main-background-color: #202020; - --main-color: #eee; + --background-color: #202020; + --color: #eee; --link-color: #cc3b95; --theme-color: #666; --theme-color-dim: #444; @@ -7176,10 +7178,12 @@ code { --theme-color-dimmest: #333; --theme-color-dark: #666; --theme-color-light: #666; + --main-background-color: #202020; + --main-background-color-transparent: rgba(#202020, 0); } } -/* src/rawdata/scss/base.css */ +/* src/rawdata/scss/core.css */ * { box-sizing: border-box; } @@ -7187,8 +7191,8 @@ br { border-style: none; } body { - background-color: var(--main-background-color); - color: var(--main-color); + background-color: var(--background-color); + color: var(--color); font-family: "Fira Sans", sans-serif; min-height: 100vh; box-sizing: border-box; @@ -7209,8 +7213,9 @@ code, .mono { font-family: "Fira Mono", monospace; } - -/* src/rawdata/scss/core.css */ +.bg--main { + background-color: var(--main-background-color); +} .m--center { margin-left: auto; margin-right: auto; @@ -7241,7 +7246,7 @@ code, } } .c--normal { - color: var(--main-color); + color: var(--color); } .c--inherit { color: inherit; diff --git a/public/style.css b/public/style.css index 8207383..d77b0c8 100644 --- a/public/style.css +++ b/public/style.css @@ -1,4 +1,5 @@ @charset "UTF-8"; + /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -13,7 +14,8 @@ html { -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 2 */ +} /* Sections ========================================================================== */ @@ -21,7 +23,8 @@ html { * Remove the margin in all browsers (opinionated). */ body { - margin: 0; } + margin: 0; +} /** * Add the correct display in IE 9-. @@ -32,7 +35,8 @@ footer, header, nav, section { - display: block; } + display: block; +} /** * Correct the font size and margin on `h1` elements within `section` and @@ -40,7 +44,8 @@ section { */ h1 { font-size: 2em; - margin: 0.67em 0; } + margin: 0.67em 0; +} /* Grouping content ========================================================================== */ @@ -52,13 +57,15 @@ figcaption, figure, main { /* 1 */ - display: block; } + display: block; +} /** * Add the correct margin in IE 8. */ figure { - margin: 1em 40px; } + margin: 1em 40px; +} /** * 1. Add the correct box sizing in Firefox. @@ -70,7 +77,8 @@ hr { height: 0; /* 1 */ overflow: visible; - /* 2 */ } + /* 2 */ +} /** * 1. Correct the inheritance and scaling of font size in all browsers. @@ -80,7 +88,8 @@ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; - /* 2 */ } + /* 2 */ +} /* Text-level semantics ========================================================================== */ @@ -92,7 +101,8 @@ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; - /* 2 */ } + /* 2 */ +} /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. @@ -104,21 +114,24 @@ abbr[title] { text-decoration: underline; /* 2 */ text-decoration: underline dotted; - /* 2 */ } + /* 2 */ +} /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: inherit; } + font-weight: inherit; +} /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { - font-weight: bolder; } + font-weight: bolder; +} /** * 1. Correct the inheritance and scaling of font size in all browsers. @@ -130,26 +143,30 @@ samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; - /* 2 */ } + /* 2 */ +} /** * Add the correct font style in Android 4.3-. */ dfn { - font-style: italic; } + font-style: italic; +} /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; - color: #000; } + color: #000; +} /** * Add the correct font size in all browsers. */ small { - font-size: 80%; } + font-size: 80%; +} /** * Prevent `sub` and `sup` elements from affecting the line height in @@ -160,13 +177,16 @@ sup { font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; } + vertical-align: baseline; +} sub { - bottom: -0.25em; } + bottom: -0.25em; +} sup { - top: -0.5em; } + top: -0.5em; +} /* Embedded content ========================================================================== */ @@ -175,26 +195,30 @@ sup { */ audio, video { - display: inline-block; } + display: inline-block; +} /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; - height: 0; } + height: 0; +} /** * Remove the border on images inside links in IE 10-. */ img { - border-style: none; } + border-style: none; +} /** * Hide the overflow in IE. */ svg:not(:root) { - overflow: hidden; } + overflow: hidden; +} /* Forms ========================================================================== */ @@ -214,7 +238,8 @@ textarea { line-height: 1.15; /* 1 */ margin: 0; - /* 2 */ } + /* 2 */ +} /** * Show the overflow in IE. @@ -223,7 +248,8 @@ textarea { button, input { /* 1 */ - overflow: visible; } + overflow: visible; +} /** * Remove the inheritance of text transform in Edge, Firefox, and IE. @@ -232,7 +258,8 @@ input { button, select { /* 1 */ - text-transform: none; } + text-transform: none; +} /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` @@ -244,7 +271,8 @@ html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; - /* 2 */ } + /* 2 */ +} /** * Remove the inner border and padding in Firefox. @@ -254,7 +282,8 @@ button::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; - padding: 0; } + padding: 0; +} /** * Restore the focus styles unset by the previous rule. @@ -263,13 +292,15 @@ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; } + outline: 1px dotted ButtonText; +} /** * Correct the padding in Firefox. */ fieldset { - padding: 0.35em 0.75em 0.625em; } + padding: 0.35em 0.75em 0.625em; +} /** * 1. Correct the text wrapping in Edge and IE. @@ -289,7 +320,8 @@ legend { padding: 0; /* 3 */ white-space: normal; - /* 1 */ } + /* 1 */ +} /** * 1. Add the correct display in IE 9-. @@ -299,13 +331,15 @@ progress { display: inline-block; /* 1 */ vertical-align: baseline; - /* 2 */ } + /* 2 */ +} /** * Remove the default vertical scrollbar in IE. */ textarea { - overflow: auto; } + overflow: auto; +} /** * 1. Add the correct box sizing in IE 10-. @@ -316,14 +350,16 @@ textarea { box-sizing: border-box; /* 1 */ padding: 0; - /* 2 */ } + /* 2 */ +} /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; } + height: auto; +} /** * 1. Correct the odd appearance in Chrome and Safari. @@ -333,14 +369,16 @@ textarea { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; - /* 2 */ } + /* 2 */ +} /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + -webkit-appearance: none; +} /** * 1. Correct the inability to style clickable types in iOS and Safari. @@ -350,7 +388,8 @@ textarea { -webkit-appearance: button; /* 1 */ font: inherit; - /* 2 */ } + /* 2 */ +} /* Interactive ========================================================================== */ @@ -360,13 +399,15 @@ textarea { */ details, menu { - display: block; } + display: block; +} /* * Add the correct display in all browsers. */ summary { - display: list-item; } + display: list-item; +} /* Scripting ========================================================================== */ @@ -374,13 +415,15 @@ summary { * Add the correct display in IE 9-. */ canvas { - display: inline-block; } + display: inline-block; +} /** * Add the correct display in IE. */ template { - display: none; } + display: none; +} /* Hidden ========================================================================== */ @@ -388,7 +431,8 @@ template { * Add the correct display in IE 10-. */ [hidden] { - display: none; } + display: none; +} /* @@ -405,13 +449,16 @@ template { */ .debug * { - outline: 1px solid gold; } + outline: 1px solid gold; +} .debug-white * { - outline: 1px solid white; } + outline: 1px solid white; +} .debug-black * { - outline: 1px solid black; } + outline: 1px solid black; +} /* @@ -424,16 +471,20 @@ template { */ .debug-grid { - background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; } + background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; +} .debug-grid-16 { - background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; } + background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; +} .debug-grid-8-solid { - background: white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; } + background: white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; +} .debug-grid-16-solid { - background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; } + background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; +} /* @@ -454,7 +505,12 @@ legend, pre, code, a, -h1, h2, h3, h4, h5, h6, +h1, +h2, +h3, +h4, +h5, +h6, p, ul, ol, @@ -474,7 +530,8 @@ input[type="tel"], input[type="text"], input[type="url"], .border-box { - box-sizing: border-box; } + box-sizing: border-box; +} /* @@ -493,44 +550,59 @@ input[type="url"], * * * */ -.aspect-ratio, .timeline-item .timeline-content-box.embed { +.aspect-ratio, +.timeline-item .timeline-content-box.embed { height: 0; - position: relative; } + position: relative; +} -.aspect-ratio--16x9, .timeline-item .timeline-content-box.embed { - padding-bottom: 56.25%; } +.aspect-ratio--16x9, +.timeline-item .timeline-content-box.embed { + padding-bottom: 56.25%; +} .aspect-ratio--9x16 { - padding-bottom: 177.77%; } + padding-bottom: 177.77%; +} .aspect-ratio--4x3 { - padding-bottom: 75%; } + padding-bottom: 75%; +} .aspect-ratio--3x4 { - padding-bottom: 133.33%; } + padding-bottom: 133.33%; +} .aspect-ratio--6x4 { - padding-bottom: 66.6%; } + padding-bottom: 66.6%; +} .aspect-ratio--4x6 { - padding-bottom: 150%; } + padding-bottom: 150%; +} .aspect-ratio--8x5 { - padding-bottom: 62.5%; } + padding-bottom: 62.5%; +} .aspect-ratio--5x8 { - padding-bottom: 160%; } + padding-bottom: 160%; +} .aspect-ratio--7x5 { - padding-bottom: 71.42%; } + padding-bottom: 71.42%; +} .aspect-ratio--5x7 { - padding-bottom: 140%; } + padding-bottom: 140%; +} .aspect-ratio--1x1 { - padding-bottom: 100%; } + padding-bottom: 100%; +} -.aspect-ratio--object, .timeline-item .timeline-content-box.embed > iframe { +.aspect-ratio--object, +.timeline-item .timeline-content-box.embed>iframe { position: absolute; top: 0; right: 0; @@ -538,34 +610,59 @@ input[type="url"], left: 0; width: 100%; height: 100%; - z-index: 100; } + z-index: 100; +} @media screen and (min-width: 35em) { .aspect-ratio-ns { height: 0; - position: relative; } + position: relative; + } + .aspect-ratio--16x9-ns { - padding-bottom: 56.25%; } + padding-bottom: 56.25%; + } + .aspect-ratio--9x16-ns { - padding-bottom: 177.77%; } + padding-bottom: 177.77%; + } + .aspect-ratio--4x3-ns { - padding-bottom: 75%; } + padding-bottom: 75%; + } + .aspect-ratio--3x4-ns { - padding-bottom: 133.33%; } + padding-bottom: 133.33%; + } + .aspect-ratio--6x4-ns { - padding-bottom: 66.6%; } + padding-bottom: 66.6%; + } + .aspect-ratio--4x6-ns { - padding-bottom: 150%; } + padding-bottom: 150%; + } + .aspect-ratio--8x5-ns { - padding-bottom: 62.5%; } + padding-bottom: 62.5%; + } + .aspect-ratio--5x8-ns { - padding-bottom: 160%; } + padding-bottom: 160%; + } + .aspect-ratio--7x5-ns { - padding-bottom: 71.42%; } + padding-bottom: 71.42%; + } + .aspect-ratio--5x7-ns { - padding-bottom: 140%; } + padding-bottom: 140%; + } + .aspect-ratio--1x1-ns { - padding-bottom: 100%; } + padding-bottom: 100%; + } + .aspect-ratio--object-ns { position: absolute; top: 0; @@ -574,34 +671,60 @@ input[type="url"], left: 0; width: 100%; height: 100%; - z-index: 100; } } + z-index: 100; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .aspect-ratio-m { height: 0; - position: relative; } + position: relative; + } + .aspect-ratio--16x9-m { - padding-bottom: 56.25%; } + padding-bottom: 56.25%; + } + .aspect-ratio--9x16-m { - padding-bottom: 177.77%; } + padding-bottom: 177.77%; + } + .aspect-ratio--4x3-m { - padding-bottom: 75%; } + padding-bottom: 75%; + } + .aspect-ratio--3x4-m { - padding-bottom: 133.33%; } + padding-bottom: 133.33%; + } + .aspect-ratio--6x4-m { - padding-bottom: 66.6%; } + padding-bottom: 66.6%; + } + .aspect-ratio--4x6-m { - padding-bottom: 150%; } + padding-bottom: 150%; + } + .aspect-ratio--8x5-m { - padding-bottom: 62.5%; } + padding-bottom: 62.5%; + } + .aspect-ratio--5x8-m { - padding-bottom: 160%; } + padding-bottom: 160%; + } + .aspect-ratio--7x5-m { - padding-bottom: 71.42%; } + padding-bottom: 71.42%; + } + .aspect-ratio--5x7-m { - padding-bottom: 140%; } + padding-bottom: 140%; + } + .aspect-ratio--1x1-m { - padding-bottom: 100%; } + padding-bottom: 100%; + } + .aspect-ratio--object-m { position: absolute; top: 0; @@ -610,34 +733,60 @@ input[type="url"], left: 0; width: 100%; height: 100%; - z-index: 100; } } + z-index: 100; + } +} @media screen and (min-width: 60em) { .aspect-ratio-l { height: 0; - position: relative; } + position: relative; + } + .aspect-ratio--16x9-l { - padding-bottom: 56.25%; } + padding-bottom: 56.25%; + } + .aspect-ratio--9x16-l { - padding-bottom: 177.77%; } + padding-bottom: 177.77%; + } + .aspect-ratio--4x3-l { - padding-bottom: 75%; } + padding-bottom: 75%; + } + .aspect-ratio--3x4-l { - padding-bottom: 133.33%; } + padding-bottom: 133.33%; + } + .aspect-ratio--6x4-l { - padding-bottom: 66.6%; } + padding-bottom: 66.6%; + } + .aspect-ratio--4x6-l { - padding-bottom: 150%; } + padding-bottom: 150%; + } + .aspect-ratio--8x5-l { - padding-bottom: 62.5%; } + padding-bottom: 62.5%; + } + .aspect-ratio--5x8-l { - padding-bottom: 160%; } + padding-bottom: 160%; + } + .aspect-ratio--7x5-l { - padding-bottom: 71.42%; } + padding-bottom: 71.42%; + } + .aspect-ratio--5x7-l { - padding-bottom: 140%; } + padding-bottom: 140%; + } + .aspect-ratio--1x1-l { - padding-bottom: 100%; } + padding-bottom: 100%; + } + .aspect-ratio--object-l { position: absolute; top: 0; @@ -646,7 +795,9 @@ input[type="url"], left: 0; width: 100%; height: 100%; - z-index: 100; } } + z-index: 100; + } +} /* @@ -655,8 +806,10 @@ input[type="url"], */ /* Responsive images! */ -img, video { - max-width: 100%; } +img, +video { + max-width: 100%; +} /* @@ -674,28 +827,42 @@ img, video { on an html element. */ .cover { - background-size: cover !important; } + background-size: cover !important; +} .contain { - background-size: contain !important; } + background-size: contain !important; +} @media screen and (min-width: 35em) { .cover-ns { - background-size: cover !important; } + background-size: cover !important; + } + .contain-ns { - background-size: contain !important; } } + background-size: contain !important; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .cover-m { - background-size: cover !important; } + background-size: cover !important; + } + .contain-m { - background-size: contain !important; } } + background-size: contain !important; + } +} @media screen and (min-width: 60em) { .cover-l { - background-size: cover !important; } + background-size: cover !important; + } + .contain-l { - background-size: contain !important; } } + background-size: contain !important; + } +} /* @@ -719,74 +886,109 @@ img, video { */ .bg-center { background-repeat: no-repeat; - background-position: center center; } + background-position: center center; +} .bg-top { background-repeat: no-repeat; - background-position: top center; } + background-position: top center; +} .bg-right { background-repeat: no-repeat; - background-position: center right; } + background-position: center right; +} .bg-bottom { background-repeat: no-repeat; - background-position: bottom center; } + background-position: bottom center; +} .bg-left { background-repeat: no-repeat; - background-position: center left; } + background-position: center left; +} @media screen and (min-width: 35em) { .bg-center-ns { background-repeat: no-repeat; - background-position: center center; } + background-position: center center; + } + .bg-top-ns { background-repeat: no-repeat; - background-position: top center; } + background-position: top center; + } + .bg-right-ns { background-repeat: no-repeat; - background-position: center right; } + background-position: center right; + } + .bg-bottom-ns { background-repeat: no-repeat; - background-position: bottom center; } + background-position: bottom center; + } + .bg-left-ns { background-repeat: no-repeat; - background-position: center left; } } + background-position: center left; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .bg-center-m { background-repeat: no-repeat; - background-position: center center; } + background-position: center center; + } + .bg-top-m { background-repeat: no-repeat; - background-position: top center; } + background-position: top center; + } + .bg-right-m { background-repeat: no-repeat; - background-position: center right; } + background-position: center right; + } + .bg-bottom-m { background-repeat: no-repeat; - background-position: bottom center; } + background-position: bottom center; + } + .bg-left-m { background-repeat: no-repeat; - background-position: center left; } } + background-position: center left; + } +} @media screen and (min-width: 60em) { .bg-center-l { background-repeat: no-repeat; - background-position: center center; } + background-position: center center; + } + .bg-top-l { background-repeat: no-repeat; - background-position: top center; } + background-position: top center; + } + .bg-right-l { background-repeat: no-repeat; - background-position: center right; } + background-position: center right; + } + .bg-bottom-l { background-repeat: no-repeat; - background-position: bottom center; } + background-position: bottom center; + } + .bg-left-l { background-repeat: no-repeat; - background-position: center left; } } + background-position: center left; + } +} /* @@ -799,37 +1001,58 @@ img, video { */ .outline { - outline: 1px solid; } + outline: 1px solid; +} .outline-transparent { - outline: 1px solid transparent; } + outline: 1px solid transparent; +} .outline-0 { - outline: 0; } + outline: 0; +} @media screen and (min-width: 35em) { .outline-ns { - outline: 1px solid; } + outline: 1px solid; + } + .outline-transparent-ns { - outline: 1px solid transparent; } + outline: 1px solid transparent; + } + .outline-0-ns { - outline: 0; } } + outline: 0; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .outline-m { - outline: 1px solid; } + outline: 1px solid; + } + .outline-transparent-m { - outline: 1px solid transparent; } + outline: 1px solid transparent; + } + .outline-0-m { - outline: 0; } } + outline: 0; + } +} @media screen and (min-width: 60em) { .outline-l { - outline: 1px solid; } + outline: 1px solid; + } + .outline-transparent-l { - outline: 1px solid transparent; } + outline: 1px solid transparent; + } + .outline-0-l { - outline: 0; } } + outline: 0; + } +} /* @@ -853,89 +1076,134 @@ img, video { -l = large */ -.ba, .post-content th, .post-content td { +.ba, +.post-content th, +.post-content td { border-style: solid; - border-width: 1px; } + border-width: 1px; +} .bt { border-top-style: solid; - border-top-width: 1px; } + border-top-width: 1px; +} .br { border-right-style: solid; - border-right-width: 1px; } + border-right-width: 1px; +} .bb { border-bottom-style: solid; - border-bottom-width: 1px; } + border-bottom-width: 1px; +} -.bl, blockquote { +.bl, +blockquote { border-left-style: solid; - border-left-width: 1px; } + border-left-width: 1px; +} .bn { border-style: none; - border-width: 0; } + border-width: 0; +} @media screen and (min-width: 35em) { .ba-ns { border-style: solid; - border-width: 1px; } + border-width: 1px; + } + .bt-ns { border-top-style: solid; - border-top-width: 1px; } + border-top-width: 1px; + } + .br-ns { border-right-style: solid; - border-right-width: 1px; } + border-right-width: 1px; + } + .bb-ns { border-bottom-style: solid; - border-bottom-width: 1px; } + border-bottom-width: 1px; + } + .bl-ns { border-left-style: solid; - border-left-width: 1px; } + border-left-width: 1px; + } + .bn-ns { border-style: none; - border-width: 0; } } + border-width: 0; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .ba-m { border-style: solid; - border-width: 1px; } + border-width: 1px; + } + .bt-m { border-top-style: solid; - border-top-width: 1px; } + border-top-width: 1px; + } + .br-m { border-right-style: solid; - border-right-width: 1px; } + border-right-width: 1px; + } + .bb-m { border-bottom-style: solid; - border-bottom-width: 1px; } + border-bottom-width: 1px; + } + .bl-m { border-left-style: solid; - border-left-width: 1px; } + border-left-width: 1px; + } + .bn-m { border-style: none; - border-width: 0; } } + border-width: 0; + } +} @media screen and (min-width: 60em) { .ba-l { border-style: solid; - border-width: 1px; } + border-width: 1px; + } + .bt-l { border-top-style: solid; - border-top-width: 1px; } + border-top-width: 1px; + } + .br-l { border-right-style: solid; - border-right-width: 1px; } + border-right-width: 1px; + } + .bb-l { border-bottom-style: solid; - border-bottom-width: 1px; } + border-bottom-width: 1px; + } + .bl-l { border-left-style: solid; - border-left-width: 1px; } + border-left-width: 1px; + } + .bn-l { border-style: none; - border-width: 0; } } + border-width: 0; + } +} /* @@ -957,190 +1225,252 @@ img, video { */ .b--black { - border-color: #000; } + border-color: #000; +} .b--near-black { - border-color: #111; } + border-color: #111; +} .b--dark-gray { - border-color: #333; } + border-color: #333; +} .b--mid-gray { - border-color: #555; } + border-color: #555; +} .b--gray { - border-color: #777; } + border-color: #777; +} .b--silver { - border-color: #999; } + border-color: #999; +} .b--light-silver { - border-color: #aaa; } + border-color: #aaa; +} .b--moon-gray { - border-color: #ccc; } + border-color: #ccc; +} .b--light-gray { - border-color: #eee; } + border-color: #eee; +} .b--near-white { - border-color: #f4f4f4; } + border-color: #f4f4f4; +} .b--white { - border-color: #fff; } + border-color: #fff; +} .b--white-90 { - border-color: rgba(255, 255, 255, 0.9); } + border-color: rgba(255, 255, 255, 0.9); +} .b--white-80 { - border-color: rgba(255, 255, 255, 0.8); } + border-color: rgba(255, 255, 255, 0.8); +} .b--white-70 { - border-color: rgba(255, 255, 255, 0.7); } + border-color: rgba(255, 255, 255, 0.7); +} .b--white-60 { - border-color: rgba(255, 255, 255, 0.6); } + border-color: rgba(255, 255, 255, 0.6); +} .b--white-50 { - border-color: rgba(255, 255, 255, 0.5); } + border-color: rgba(255, 255, 255, 0.5); +} .b--white-40 { - border-color: rgba(255, 255, 255, 0.4); } + border-color: rgba(255, 255, 255, 0.4); +} .b--white-30 { - border-color: rgba(255, 255, 255, 0.3); } + border-color: rgba(255, 255, 255, 0.3); +} .b--white-20 { - border-color: rgba(255, 255, 255, 0.2); } + border-color: rgba(255, 255, 255, 0.2); +} .b--white-10 { - border-color: rgba(255, 255, 255, 0.1); } + border-color: rgba(255, 255, 255, 0.1); +} .b--white-05 { - border-color: rgba(255, 255, 255, 0.05); } + border-color: rgba(255, 255, 255, 0.05); +} .b--white-025 { - border-color: rgba(255, 255, 255, 0.025); } + border-color: rgba(255, 255, 255, 0.025); +} .b--white-0125 { - border-color: rgba(255, 255, 255, 0.0125); } + border-color: rgba(255, 255, 255, 0.0125); +} .b--black-90 { - border-color: rgba(0, 0, 0, 0.9); } + border-color: rgba(0, 0, 0, 0.9); +} .b--black-80 { - border-color: rgba(0, 0, 0, 0.8); } + border-color: rgba(0, 0, 0, 0.8); +} .b--black-70 { - border-color: rgba(0, 0, 0, 0.7); } + border-color: rgba(0, 0, 0, 0.7); +} .b--black-60 { - border-color: rgba(0, 0, 0, 0.6); } + border-color: rgba(0, 0, 0, 0.6); +} .b--black-50 { - border-color: rgba(0, 0, 0, 0.5); } + border-color: rgba(0, 0, 0, 0.5); +} .b--black-40 { - border-color: rgba(0, 0, 0, 0.4); } + border-color: rgba(0, 0, 0, 0.4); +} .b--black-30 { - border-color: rgba(0, 0, 0, 0.3); } + border-color: rgba(0, 0, 0, 0.3); +} .b--black-20 { - border-color: rgba(0, 0, 0, 0.2); } + border-color: rgba(0, 0, 0, 0.2); +} .b--black-10 { - border-color: rgba(0, 0, 0, 0.1); } + border-color: rgba(0, 0, 0, 0.1); +} .b--black-05 { - border-color: rgba(0, 0, 0, 0.05); } + border-color: rgba(0, 0, 0, 0.05); +} .b--black-025 { - border-color: rgba(0, 0, 0, 0.025); } + border-color: rgba(0, 0, 0, 0.025); +} .b--black-0125 { - border-color: rgba(0, 0, 0, 0.0125); } + border-color: rgba(0, 0, 0, 0.0125); +} .b--dark-red { - border-color: #e7040f; } + border-color: #e7040f; +} .b--red { - border-color: #ff4136; } + border-color: #ff4136; +} .b--light-red { - border-color: #ff725c; } + border-color: #ff725c; +} .b--orange { - border-color: #ff6300; } + border-color: #ff6300; +} .b--gold { - border-color: #ffb700; } + border-color: #ffb700; +} .b--yellow { - border-color: #ffd700; } + border-color: #ffd700; +} .b--light-yellow { - border-color: #fbf1a9; } + border-color: #fbf1a9; +} .b--purple { - border-color: #5e2ca5; } + border-color: #5e2ca5; +} .b--light-purple { - border-color: #a463f2; } + border-color: #a463f2; +} .b--dark-pink { - border-color: #d5008f; } + border-color: #d5008f; +} .b--hot-pink { - border-color: #ff41b4; } + border-color: #ff41b4; +} .b--pink { - border-color: #ff80cc; } + border-color: #ff80cc; +} .b--light-pink { - border-color: #ffa3d7; } + border-color: #ffa3d7; +} .b--dark-green { - border-color: #137752; } + border-color: #137752; +} .b--green { - border-color: #19a974; } + border-color: #19a974; +} .b--light-green { - border-color: #9eebcf; } + border-color: #9eebcf; +} .b--navy { - border-color: #001b44; } + border-color: #001b44; +} .b--dark-blue { - border-color: #00449e; } + border-color: #00449e; +} .b--blue { - border-color: #357edd; } + border-color: #357edd; +} .b--light-blue { - border-color: #96ccff; } + border-color: #96ccff; +} .b--lightest-blue { - border-color: #cdecff; } + border-color: #cdecff; +} .b--washed-blue { - border-color: #f6fffe; } + border-color: #f6fffe; +} .b--washed-green { - border-color: #e8fdf5; } + border-color: #e8fdf5; +} .b--washed-yellow { - border-color: #fffceb; } + border-color: #fffceb; +} .b--washed-red { - border-color: #ffdfdf; } + border-color: #ffdfdf; +} .b--transparent { - border-color: transparent; } + border-color: transparent; +} .b--inherit { - border-color: inherit; } + border-color: inherit; +} /* @@ -1168,125 +1498,207 @@ img, video { */ .br0 { - border-radius: 0; } + border-radius: 0; +} .br1 { - border-radius: 0.125rem; } + border-radius: 0.125rem; +} -.br2, .post-content code, .post-content pre > code, .post-content pre.hmn-code { - border-radius: 0.25rem; } +.br2, +.post-content code, +.post-content pre>code, +.post-content pre.hmn-code { + border-radius: 0.25rem; +} -.br3, figure { - border-radius: 0.5rem; } +.br3, +figure { + border-radius: 0.5rem; +} .br4 { - border-radius: 1rem; } + border-radius: 1rem; +} .br-100 { - border-radius: 100%; } + border-radius: 100%; +} .br-pill { - border-radius: 9999px; } + border-radius: 9999px; +} .br--bottom { border-top-left-radius: 0; - border-top-right-radius: 0; } + border-top-right-radius: 0; +} .br--top { border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } + border-bottom-right-radius: 0; +} .br--right { border-top-left-radius: 0; - border-bottom-left-radius: 0; } + border-bottom-left-radius: 0; +} .br--left { border-top-right-radius: 0; - border-bottom-right-radius: 0; } + border-bottom-right-radius: 0; +} @media screen and (min-width: 35em) { .br0-ns { - border-radius: 0; } + border-radius: 0; + } + .br1-ns { - border-radius: 0.125rem; } - .br2-ns, .notice { - border-radius: 0.25rem; } + border-radius: 0.125rem; + } + + .br2-ns, + .notice { + border-radius: 0.25rem; + } + .br3-ns { - border-radius: 0.5rem; } + border-radius: 0.5rem; + } + .br4-ns { - border-radius: 1rem; } + border-radius: 1rem; + } + .br-100-ns { - border-radius: 100%; } + border-radius: 100%; + } + .br-pill-ns { - border-radius: 9999px; } + border-radius: 9999px; + } + .br--bottom-ns { border-top-left-radius: 0; - border-top-right-radius: 0; } + border-top-right-radius: 0; + } + .br--top-ns { border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } + border-bottom-right-radius: 0; + } + .br--right-ns { border-top-left-radius: 0; - border-bottom-left-radius: 0; } + border-bottom-left-radius: 0; + } + .br--left-ns { border-top-right-radius: 0; - border-bottom-right-radius: 0; } } + border-bottom-right-radius: 0; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .br0-m { - border-radius: 0; } + border-radius: 0; + } + .br1-m { - border-radius: 0.125rem; } + border-radius: 0.125rem; + } + .br2-m { - border-radius: 0.25rem; } + border-radius: 0.25rem; + } + .br3-m { - border-radius: 0.5rem; } + border-radius: 0.5rem; + } + .br4-m { - border-radius: 1rem; } + border-radius: 1rem; + } + .br-100-m { - border-radius: 100%; } + border-radius: 100%; + } + .br-pill-m { - border-radius: 9999px; } + border-radius: 9999px; + } + .br--bottom-m { border-top-left-radius: 0; - border-top-right-radius: 0; } + border-top-right-radius: 0; + } + .br--top-m { border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } + border-bottom-right-radius: 0; + } + .br--right-m { border-top-left-radius: 0; - border-bottom-left-radius: 0; } + border-bottom-left-radius: 0; + } + .br--left-m { border-top-right-radius: 0; - border-bottom-right-radius: 0; } } + border-bottom-right-radius: 0; + } +} @media screen and (min-width: 60em) { .br0-l { - border-radius: 0; } + border-radius: 0; + } + .br1-l { - border-radius: 0.125rem; } + border-radius: 0.125rem; + } + .br2-l { - border-radius: 0.25rem; } + border-radius: 0.25rem; + } + .br3-l { - border-radius: 0.5rem; } + border-radius: 0.5rem; + } + .br4-l { - border-radius: 1rem; } + border-radius: 1rem; + } + .br-100-l { - border-radius: 100%; } + border-radius: 100%; + } + .br-pill-l { - border-radius: 9999px; } + border-radius: 9999px; + } + .br--bottom-l { border-top-left-radius: 0; - border-top-right-radius: 0; } + border-top-right-radius: 0; + } + .br--top-l { border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } + border-bottom-right-radius: 0; + } + .br--right-l { border-top-left-radius: 0; - border-bottom-left-radius: 0; } + border-bottom-left-radius: 0; + } + .br--left-l { border-top-right-radius: 0; - border-bottom-right-radius: 0; } } + border-bottom-right-radius: 0; + } +} /* @@ -1311,46 +1723,74 @@ img, video { */ .b--dotted { - border-style: dotted; } + border-style: dotted; +} .b--dashed { - border-style: dashed; } + border-style: dashed; +} .b--solid { - border-style: solid; } + border-style: solid; +} .b--none { - border-style: none; } + border-style: none; +} @media screen and (min-width: 35em) { .b--dotted-ns { - border-style: dotted; } + border-style: dotted; + } + .b--dashed-ns { - border-style: dashed; } + border-style: dashed; + } + .b--solid-ns { - border-style: solid; } + border-style: solid; + } + .b--none-ns { - border-style: none; } } + border-style: none; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .b--dotted-m { - border-style: dotted; } + border-style: dotted; + } + .b--dashed-m { - border-style: dashed; } + border-style: dashed; + } + .b--solid-m { - border-style: solid; } + border-style: solid; + } + .b--none-m { - border-style: none; } } + border-style: none; + } +} @media screen and (min-width: 60em) { .b--dotted-l { - border-style: dotted; } + border-style: dotted; + } + .b--dashed-l { - border-style: dashed; } + border-style: dashed; + } + .b--solid-l { - border-style: solid; } + border-style: solid; + } + .b--none-l { - border-style: none; } } + border-style: none; + } +} /* @@ -1375,101 +1815,172 @@ img, video { */ .bw0 { - border-width: 0; } + border-width: 0; +} -.bw1, header .submenu { - border-width: 0.125rem; } +.bw1, +header .submenu { + border-width: 0.125rem; +} .bw2 { - border-width: 0.25rem; } + border-width: 0.25rem; +} .bw3 { - border-width: 0.5rem; } + border-width: 0.5rem; +} .bw4 { - border-width: 1rem; } + border-width: 1rem; +} .bw5 { - border-width: 2rem; } + border-width: 2rem; +} /* Resets */ .bt-0 { - border-top-width: 0; } + border-top-width: 0; +} .br-0 { - border-right-width: 0; } + border-right-width: 0; +} .bb-0 { - border-bottom-width: 0; } + border-bottom-width: 0; +} .bl-0 { - border-left-width: 0; } + border-left-width: 0; +} @media screen and (min-width: 35em) { .bw0-ns { - border-width: 0; } + border-width: 0; + } + .bw1-ns { - border-width: 0.125rem; } + border-width: 0.125rem; + } + .bw2-ns { - border-width: 0.25rem; } + border-width: 0.25rem; + } + .bw3-ns { - border-width: 0.5rem; } + border-width: 0.5rem; + } + .bw4-ns { - border-width: 1rem; } + border-width: 1rem; + } + .bw5-ns { - border-width: 2rem; } + border-width: 2rem; + } + .bt-0-ns { - border-top-width: 0; } + border-top-width: 0; + } + .br-0-ns { - border-right-width: 0; } + border-right-width: 0; + } + .bb-0-ns { - border-bottom-width: 0; } + border-bottom-width: 0; + } + .bl-0-ns { - border-left-width: 0; } } + border-left-width: 0; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .bw0-m { - border-width: 0; } + border-width: 0; + } + .bw1-m { - border-width: 0.125rem; } + border-width: 0.125rem; + } + .bw2-m { - border-width: 0.25rem; } + border-width: 0.25rem; + } + .bw3-m { - border-width: 0.5rem; } + border-width: 0.5rem; + } + .bw4-m { - border-width: 1rem; } + border-width: 1rem; + } + .bw5-m { - border-width: 2rem; } + border-width: 2rem; + } + .bt-0-m { - border-top-width: 0; } + border-top-width: 0; + } + .br-0-m { - border-right-width: 0; } + border-right-width: 0; + } + .bb-0-m { - border-bottom-width: 0; } + border-bottom-width: 0; + } + .bl-0-m { - border-left-width: 0; } } + border-left-width: 0; + } +} @media screen and (min-width: 60em) { .bw0-l { - border-width: 0; } + border-width: 0; + } + .bw1-l { - border-width: 0.125rem; } + border-width: 0.125rem; + } + .bw2-l { - border-width: 0.25rem; } + border-width: 0.25rem; + } + .bw3-l { - border-width: 0.5rem; } + border-width: 0.5rem; + } + .bw4-l { - border-width: 1rem; } + border-width: 1rem; + } + .bw5-l { - border-width: 2rem; } + border-width: 2rem; + } + .bt-0-l { - border-top-width: 0; } + border-top-width: 0; + } + .br-0-l { - border-right-width: 0; } + border-right-width: 0; + } + .bb-0-l { - border-bottom-width: 0; } + border-bottom-width: 0; + } + .bl-0-l { - border-left-width: 0; } } + border-left-width: 0; + } +} /* @@ -1483,55 +1994,90 @@ img, video { */ .shadow-1 { - box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); +} .shadow-2 { - box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); +} .shadow-3 { - box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); +} .shadow-4 { - box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); +} .shadow-5 { - box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); +} @media screen and (min-width: 35em) { .shadow-1-ns { - box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); + } + .shadow-2-ns { - box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); + } + .shadow-3-ns { - box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); + } + .shadow-4-ns { - box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); + } + .shadow-5-ns { - box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } } + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .shadow-1-m { - box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); + } + .shadow-2-m { - box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); + } + .shadow-3-m { - box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); + } + .shadow-4-m { - box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); + } + .shadow-5-m { - box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } } + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); + } +} @media screen and (min-width: 60em) { .shadow-1-l { - box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); + } + .shadow-2-l { - box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); + } + .shadow-3-l { - box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); + } + .shadow-4-l { - box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); + } + .shadow-5-l { - box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } } + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); + } +} /* @@ -1541,7 +2087,8 @@ img, video { .pre { overflow-x: auto; overflow-y: hidden; - overflow: scroll; } + overflow: scroll; +} /* @@ -1570,211 +2117,358 @@ img, video { */ .top-0 { - top: 0; } + top: 0; +} .right-0 { - right: 0; } + right: 0; +} .bottom-0 { - bottom: 0; } + bottom: 0; +} .left-0 { - left: 0; } + left: 0; +} .top-1 { - top: 1rem; } + top: 1rem; +} .right-1 { - right: 1rem; } + right: 1rem; +} .bottom-1 { - bottom: 1rem; } + bottom: 1rem; +} .left-1 { - left: 1rem; } + left: 1rem; +} .top-2 { - top: 2rem; } + top: 2rem; +} .right-2 { - right: 2rem; } + right: 2rem; +} .bottom-2 { - bottom: 2rem; } + bottom: 2rem; +} .left-2 { - left: 2rem; } + left: 2rem; +} .top--1 { - top: -1rem; } + top: -1rem; +} .right--1 { - right: -1rem; } + right: -1rem; +} .bottom--1 { - bottom: -1rem; } + bottom: -1rem; +} .left--1 { - left: -1rem; } + left: -1rem; +} .top--2 { - top: -2rem; } + top: -2rem; +} .right--2 { - right: -2rem; } + right: -2rem; +} .bottom--2 { - bottom: -2rem; } + bottom: -2rem; +} .left--2 { - left: -2rem; } + left: -2rem; +} .absolute--fill { top: 0; right: 0; bottom: 0; - left: 0; } + left: 0; +} @media screen and (min-width: 35em) { .top-0-ns { - top: 0; } + top: 0; + } + .left-0-ns { - left: 0; } + left: 0; + } + .right-0-ns { - right: 0; } + right: 0; + } + .bottom-0-ns { - bottom: 0; } + bottom: 0; + } + .top-1-ns { - top: 1rem; } + top: 1rem; + } + .left-1-ns { - left: 1rem; } + left: 1rem; + } + .right-1-ns { - right: 1rem; } + right: 1rem; + } + .bottom-1-ns { - bottom: 1rem; } + bottom: 1rem; + } + .top-2-ns { - top: 2rem; } + top: 2rem; + } + .left-2-ns { - left: 2rem; } + left: 2rem; + } + .right-2-ns { - right: 2rem; } + right: 2rem; + } + .bottom-2-ns { - bottom: 2rem; } + bottom: 2rem; + } + .top--1-ns { - top: -1rem; } + top: -1rem; + } + .right--1-ns { - right: -1rem; } + right: -1rem; + } + .bottom--1-ns { - bottom: -1rem; } + bottom: -1rem; + } + .left--1-ns { - left: -1rem; } + left: -1rem; + } + .top--2-ns { - top: -2rem; } + top: -2rem; + } + .right--2-ns { - right: -2rem; } + right: -2rem; + } + .bottom--2-ns { - bottom: -2rem; } + bottom: -2rem; + } + .left--2-ns { - left: -2rem; } + left: -2rem; + } + .absolute--fill-ns { top: 0; right: 0; bottom: 0; - left: 0; } } + left: 0; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .top-0-m { - top: 0; } + top: 0; + } + .left-0-m { - left: 0; } + left: 0; + } + .right-0-m { - right: 0; } + right: 0; + } + .bottom-0-m { - bottom: 0; } + bottom: 0; + } + .top-1-m { - top: 1rem; } + top: 1rem; + } + .left-1-m { - left: 1rem; } + left: 1rem; + } + .right-1-m { - right: 1rem; } + right: 1rem; + } + .bottom-1-m { - bottom: 1rem; } + bottom: 1rem; + } + .top-2-m { - top: 2rem; } + top: 2rem; + } + .left-2-m { - left: 2rem; } + left: 2rem; + } + .right-2-m { - right: 2rem; } + right: 2rem; + } + .bottom-2-m { - bottom: 2rem; } + bottom: 2rem; + } + .top--1-m { - top: -1rem; } + top: -1rem; + } + .right--1-m { - right: -1rem; } + right: -1rem; + } + .bottom--1-m { - bottom: -1rem; } + bottom: -1rem; + } + .left--1-m { - left: -1rem; } + left: -1rem; + } + .top--2-m { - top: -2rem; } + top: -2rem; + } + .right--2-m { - right: -2rem; } + right: -2rem; + } + .bottom--2-m { - bottom: -2rem; } + bottom: -2rem; + } + .left--2-m { - left: -2rem; } + left: -2rem; + } + .absolute--fill-m { top: 0; right: 0; bottom: 0; - left: 0; } } + left: 0; + } +} @media screen and (min-width: 60em) { .top-0-l { - top: 0; } + top: 0; + } + .left-0-l { - left: 0; } + left: 0; + } + .right-0-l { - right: 0; } + right: 0; + } + .bottom-0-l { - bottom: 0; } + bottom: 0; + } + .top-1-l { - top: 1rem; } + top: 1rem; + } + .left-1-l { - left: 1rem; } + left: 1rem; + } + .right-1-l { - right: 1rem; } + right: 1rem; + } + .bottom-1-l { - bottom: 1rem; } + bottom: 1rem; + } + .top-2-l { - top: 2rem; } + top: 2rem; + } + .left-2-l { - left: 2rem; } + left: 2rem; + } + .right-2-l { - right: 2rem; } + right: 2rem; + } + .bottom-2-l { - bottom: 2rem; } + bottom: 2rem; + } + .top--1-l { - top: -1rem; } + top: -1rem; + } + .right--1-l { - right: -1rem; } + right: -1rem; + } + .bottom--1-l { - bottom: -1rem; } + bottom: -1rem; + } + .left--1-l { - left: -1rem; } + left: -1rem; + } + .top--2-l { - top: -2rem; } + top: -2rem; + } + .right--2-l { - right: -2rem; } + right: -2rem; + } + .bottom--2-l { - bottom: -2rem; } + bottom: -2rem; + } + .left--2-l { - left: -2rem; } + left: -2rem; + } + .absolute--fill-l { top: 0; right: 0; bottom: 0; - left: 0; } } + left: 0; + } +} /* @@ -1787,55 +2481,86 @@ img, video { .cf:before, .cf:after { content: " "; - display: table; } + display: table; +} .cf:after { - clear: both; } + clear: both; +} .cf { - *zoom: 1; } + *zoom: 1; +} .cl { - clear: left; } + clear: left; +} .cr { - clear: right; } + clear: right; +} .cb { - clear: both; } + clear: both; +} .cn { - clear: none; } + clear: none; +} @media screen and (min-width: 35em) { .cl-ns { - clear: left; } + clear: left; + } + .cr-ns { - clear: right; } + clear: right; + } + .cb-ns { - clear: both; } + clear: both; + } + .cn-ns { - clear: none; } } + clear: none; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .cl-m { - clear: left; } + clear: left; + } + .cr-m { - clear: right; } + clear: right; + } + .cb-m { - clear: both; } + clear: both; + } + .cn-m { - clear: none; } } + clear: none; + } +} @media screen and (min-width: 60em) { .cl-l { - clear: left; } + clear: left; + } + .cr-l { - clear: right; } + clear: right; + } + .cb-l { - clear: both; } + clear: both; + } + .cn-l { - clear: none; } } + clear: none; + } +} /* @@ -1863,37 +2588,48 @@ img, video { */ .dn { - display: none; } + display: none; +} .di { - display: inline; } + display: inline; +} .db { - display: block; } + display: block; +} .dib { - display: inline-block; } + display: inline-block; +} .dit { - display: inline-table; } + display: inline-table; +} .dt { - display: table; } + display: table; +} .dtc { - display: table-cell; } + display: table-cell; +} .dt-row { - display: table-row; } + display: table-row; +} .dt-row-group { - display: table-row-group; } + display: table-row-group; +} .dt-column { - display: table-column; } + display: table-column; +} .dt-column-group { - display: table-column-group; } + display: table-column-group; +} /* This will set table to full width and then @@ -1901,88 +2637,161 @@ img, video { */ .dt--fixed { table-layout: fixed; - width: 100%; } + width: 100%; +} @media screen and (min-width: 35em) { .dn-ns { - display: none; } + display: none; + } + .di-ns { - display: inline; } + display: inline; + } + .db-ns { - display: block; } + display: block; + } + .dib-ns { - display: inline-block; } + display: inline-block; + } + .dit-ns { - display: inline-table; } + display: inline-table; + } + .dt-ns { - display: table; } + display: table; + } + .dtc-ns { - display: table-cell; } + display: table-cell; + } + .dt-row-ns { - display: table-row; } + display: table-row; + } + .dt-row-group-ns { - display: table-row-group; } + display: table-row-group; + } + .dt-column-ns { - display: table-column; } + display: table-column; + } + .dt-column-group-ns { - display: table-column-group; } + display: table-column-group; + } + .dt--fixed-ns { table-layout: fixed; - width: 100%; } } + width: 100%; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .dn-m { - display: none; } + display: none; + } + .di-m { - display: inline; } + display: inline; + } + .db-m { - display: block; } + display: block; + } + .dib-m { - display: inline-block; } + display: inline-block; + } + .dit-m { - display: inline-table; } + display: inline-table; + } + .dt-m { - display: table; } + display: table; + } + .dtc-m { - display: table-cell; } + display: table-cell; + } + .dt-row-m { - display: table-row; } + display: table-row; + } + .dt-row-group-m { - display: table-row-group; } + display: table-row-group; + } + .dt-column-m { - display: table-column; } + display: table-column; + } + .dt-column-group-m { - display: table-column-group; } + display: table-column-group; + } + .dt--fixed-m { table-layout: fixed; - width: 100%; } } + width: 100%; + } +} @media screen and (min-width: 60em) { .dn-l { - display: none; } + display: none; + } + .di-l { - display: inline; } + display: inline; + } + .db-l { - display: block; } + display: block; + } + .dib-l { - display: inline-block; } + display: inline-block; + } + .dit-l { - display: inline-table; } + display: inline-table; + } + .dt-l { - display: table; } + display: table; + } + .dtc-l { - display: table-cell; } + display: table-cell; + } + .dt-row-l { - display: table-row; } + display: table-row; + } + .dt-row-group-l { - display: table-row-group; } + display: table-row-group; + } + .dt-column-l { - display: table-column; } + display: table-column; + } + .dt-column-group-l { - display: table-column-group; } + display: table-column-group; + } + .dt--fixed-l { table-layout: fixed; - width: 100%; } } + width: 100%; + } +} /* @@ -1994,11 +2803,15 @@ img, video { -l = large */ -.flex, .tab-bar, .edit-form .edit-form-row { - display: flex; } +.flex, +.tab-bar, +.edit-form .edit-form-row { + display: flex; +} .inline-flex { - display: inline-flex; } + display: inline-flex; +} /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ @@ -2007,430 +2820,756 @@ img, video { min-width: 0; /* 1 */ min-height: 0; - /* 1 */ } + /* 1 */ +} .flex-none { - flex: none; } + flex: none; +} -.flex-column, .edit-form .edit-form-row { - flex-direction: column; } +.flex-column, +.edit-form .edit-form-row { + flex-direction: column; +} -.flex-row, .tab-bar { - flex-direction: row; } +.flex-row, +.tab-bar { + flex-direction: row; +} .flex-wrap { - flex-wrap: wrap; } + flex-wrap: wrap; +} .flex-nowrap { - flex-wrap: nowrap; } + flex-wrap: nowrap; +} .flex-wrap-reverse { - flex-wrap: wrap-reverse; } + flex-wrap: wrap-reverse; +} .flex-column-reverse { - flex-direction: column-reverse; } + flex-direction: column-reverse; +} .flex-row-reverse { - flex-direction: row-reverse; } + flex-direction: row-reverse; +} .items-start { - align-items: flex-start; } + align-items: flex-start; +} .items-end { - align-items: flex-end; } + align-items: flex-end; +} .items-center { - align-items: center; } + align-items: center; +} .items-baseline { - align-items: baseline; } + align-items: baseline; +} .items-stretch { - align-items: stretch; } + align-items: stretch; +} .self-start { - align-self: flex-start; } + align-self: flex-start; +} .self-end { - align-self: flex-end; } + align-self: flex-end; +} .self-center { - align-self: center; } + align-self: center; +} .self-baseline { - align-self: baseline; } + align-self: baseline; +} .self-stretch { - align-self: stretch; } + align-self: stretch; +} .justify-start { - justify-content: flex-start; } + justify-content: flex-start; +} .justify-end { - justify-content: flex-end; } + justify-content: flex-end; +} .justify-center { - justify-content: center; } + justify-content: center; +} .justify-between { - justify-content: space-between; } + justify-content: space-between; +} .justify-around { - justify-content: space-around; } + justify-content: space-around; +} .content-start { - align-content: flex-start; } + align-content: flex-start; +} .content-end { - align-content: flex-end; } + align-content: flex-end; +} .content-center { - align-content: center; } + align-content: center; +} .content-between { - align-content: space-between; } + align-content: space-between; +} .content-around { - align-content: space-around; } + align-content: space-around; +} .content-stretch { - align-content: stretch; } + align-content: stretch; +} .order-0 { - order: 0; } + order: 0; +} .order-1 { - order: 1; } + order: 1; +} .order-2 { - order: 2; } + order: 2; +} .order-3 { - order: 3; } + order: 3; +} .order-4 { - order: 4; } + order: 4; +} .order-5 { - order: 5; } + order: 5; +} .order-6 { - order: 6; } + order: 6; +} .order-7 { - order: 7; } + order: 7; +} .order-8 { - order: 8; } + order: 8; +} .order-last { - order: 99999; } + order: 99999; +} -.flex-grow-0, .edit-form .edit-form-row > :first-child { - flex-grow: 0; } +.flex-grow-0, +.edit-form .edit-form-row> :first-child { + flex-grow: 0; +} -.flex-grow-1, .edit-form .edit-form-row > :nth-child(2) { - flex-grow: 1; } +.flex-grow-1, +.edit-form .edit-form-row> :nth-child(2) { + flex-grow: 1; +} -.flex-shrink-0, .edit-form .edit-form-row > :first-child { - flex-shrink: 0; } +.flex-shrink-0, +.edit-form .edit-form-row> :first-child { + flex-shrink: 0; +} .flex-shrink-1 { - flex-shrink: 1; } + flex-shrink: 1; +} @media screen and (min-width: 35em) { .flex-ns { - display: flex; } + display: flex; + } + .inline-flex-ns { - display: inline-flex; } + display: inline-flex; + } + .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; - /* 1 */ } + /* 1 */ + } + .flex-none-ns { - flex: none; } + flex: none; + } + .flex-column-ns { - flex-direction: column; } - .flex-row-ns, .edit-form .edit-form-row { - flex-direction: row; } + flex-direction: column; + } + + .flex-row-ns, + .edit-form .edit-form-row { + flex-direction: row; + } + .flex-wrap-ns { - flex-wrap: wrap; } + flex-wrap: wrap; + } + .flex-nowrap-ns { - flex-wrap: nowrap; } + flex-wrap: nowrap; + } + .flex-wrap-reverse-ns { - flex-wrap: wrap-reverse; } + flex-wrap: wrap-reverse; + } + .flex-column-reverse-ns { - flex-direction: column-reverse; } + flex-direction: column-reverse; + } + .flex-row-reverse-ns { - flex-direction: row-reverse; } + flex-direction: row-reverse; + } + .items-start-ns { - align-items: flex-start; } + align-items: flex-start; + } + .items-end-ns { - align-items: flex-end; } + align-items: flex-end; + } + .items-center-ns { - align-items: center; } + align-items: center; + } + .items-baseline-ns { - align-items: baseline; } + align-items: baseline; + } + .items-stretch-ns { - align-items: stretch; } + align-items: stretch; + } + .self-start-ns { - align-self: flex-start; } + align-self: flex-start; + } + .self-end-ns { - align-self: flex-end; } + align-self: flex-end; + } + .self-center-ns { - align-self: center; } + align-self: center; + } + .self-baseline-ns { - align-self: baseline; } + align-self: baseline; + } + .self-stretch-ns { - align-self: stretch; } + align-self: stretch; + } + .justify-start-ns { - justify-content: flex-start; } + justify-content: flex-start; + } + .justify-end-ns { - justify-content: flex-end; } + justify-content: flex-end; + } + .justify-center-ns { - justify-content: center; } + justify-content: center; + } + .justify-between-ns { - justify-content: space-between; } + justify-content: space-between; + } + .justify-around-ns { - justify-content: space-around; } + justify-content: space-around; + } + .content-start-ns { - align-content: flex-start; } + align-content: flex-start; + } + .content-end-ns { - align-content: flex-end; } + align-content: flex-end; + } + .content-center-ns { - align-content: center; } + align-content: center; + } + .content-between-ns { - align-content: space-between; } + align-content: space-between; + } + .content-around-ns { - align-content: space-around; } + align-content: space-around; + } + .content-stretch-ns { - align-content: stretch; } + align-content: stretch; + } + .order-0-ns { - order: 0; } + order: 0; + } + .order-1-ns { - order: 1; } + order: 1; + } + .order-2-ns { - order: 2; } + order: 2; + } + .order-3-ns { - order: 3; } + order: 3; + } + .order-4-ns { - order: 4; } + order: 4; + } + .order-5-ns { - order: 5; } + order: 5; + } + .order-6-ns { - order: 6; } + order: 6; + } + .order-7-ns { - order: 7; } + order: 7; + } + .order-8-ns { - order: 8; } + order: 8; + } + .order-last-ns { - order: 99999; } + order: 99999; + } + .flex-grow-0-ns { - flex-grow: 0; } + flex-grow: 0; + } + .flex-grow-1-ns { - flex-grow: 1; } + flex-grow: 1; + } + .flex-shrink-0-ns { - flex-shrink: 0; } + flex-shrink: 0; + } + .flex-shrink-1-ns { - flex-shrink: 1; } } + flex-shrink: 1; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .flex-m { - display: flex; } + display: flex; + } + .inline-flex-m { - display: inline-flex; } + display: inline-flex; + } + .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; - /* 1 */ } + /* 1 */ + } + .flex-none-m { - flex: none; } + flex: none; + } + .flex-column-m { - flex-direction: column; } + flex-direction: column; + } + .flex-row-m { - flex-direction: row; } + flex-direction: row; + } + .flex-wrap-m { - flex-wrap: wrap; } + flex-wrap: wrap; + } + .flex-nowrap-m { - flex-wrap: nowrap; } + flex-wrap: nowrap; + } + .flex-wrap-reverse-m { - flex-wrap: wrap-reverse; } + flex-wrap: wrap-reverse; + } + .flex-column-reverse-m { - flex-direction: column-reverse; } + flex-direction: column-reverse; + } + .flex-row-reverse-m { - flex-direction: row-reverse; } + flex-direction: row-reverse; + } + .items-start-m { - align-items: flex-start; } + align-items: flex-start; + } + .items-end-m { - align-items: flex-end; } + align-items: flex-end; + } + .items-center-m { - align-items: center; } + align-items: center; + } + .items-baseline-m { - align-items: baseline; } + align-items: baseline; + } + .items-stretch-m { - align-items: stretch; } + align-items: stretch; + } + .self-start-m { - align-self: flex-start; } + align-self: flex-start; + } + .self-end-m { - align-self: flex-end; } + align-self: flex-end; + } + .self-center-m { - align-self: center; } + align-self: center; + } + .self-baseline-m { - align-self: baseline; } + align-self: baseline; + } + .self-stretch-m { - align-self: stretch; } + align-self: stretch; + } + .justify-start-m { - justify-content: flex-start; } + justify-content: flex-start; + } + .justify-end-m { - justify-content: flex-end; } + justify-content: flex-end; + } + .justify-center-m { - justify-content: center; } + justify-content: center; + } + .justify-between-m { - justify-content: space-between; } + justify-content: space-between; + } + .justify-around-m { - justify-content: space-around; } + justify-content: space-around; + } + .content-start-m { - align-content: flex-start; } + align-content: flex-start; + } + .content-end-m { - align-content: flex-end; } + align-content: flex-end; + } + .content-center-m { - align-content: center; } + align-content: center; + } + .content-between-m { - align-content: space-between; } + align-content: space-between; + } + .content-around-m { - align-content: space-around; } + align-content: space-around; + } + .content-stretch-m { - align-content: stretch; } + align-content: stretch; + } + .order-0-m { - order: 0; } + order: 0; + } + .order-1-m { - order: 1; } + order: 1; + } + .order-2-m { - order: 2; } + order: 2; + } + .order-3-m { - order: 3; } + order: 3; + } + .order-4-m { - order: 4; } + order: 4; + } + .order-5-m { - order: 5; } + order: 5; + } + .order-6-m { - order: 6; } + order: 6; + } + .order-7-m { - order: 7; } + order: 7; + } + .order-8-m { - order: 8; } + order: 8; + } + .order-last-m { - order: 99999; } + order: 99999; + } + .flex-grow-0-m { - flex-grow: 0; } + flex-grow: 0; + } + .flex-grow-1-m { - flex-grow: 1; } + flex-grow: 1; + } + .flex-shrink-0-m { - flex-shrink: 0; } + flex-shrink: 0; + } + .flex-shrink-1-m { - flex-shrink: 1; } } + flex-shrink: 1; + } +} @media screen and (min-width: 60em) { .flex-l { - display: flex; } + display: flex; + } + .inline-flex-l { - display: inline-flex; } + display: inline-flex; + } + .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; - /* 1 */ } + /* 1 */ + } + .flex-none-l { - flex: none; } + flex: none; + } + .flex-column-l { - flex-direction: column; } + flex-direction: column; + } + .flex-row-l { - flex-direction: row; } + flex-direction: row; + } + .flex-wrap-l { - flex-wrap: wrap; } + flex-wrap: wrap; + } + .flex-nowrap-l { - flex-wrap: nowrap; } + flex-wrap: nowrap; + } + .flex-wrap-reverse-l { - flex-wrap: wrap-reverse; } + flex-wrap: wrap-reverse; + } + .flex-column-reverse-l { - flex-direction: column-reverse; } + flex-direction: column-reverse; + } + .flex-row-reverse-l { - flex-direction: row-reverse; } + flex-direction: row-reverse; + } + .items-start-l { - align-items: flex-start; } + align-items: flex-start; + } + .items-end-l { - align-items: flex-end; } + align-items: flex-end; + } + .items-center-l { - align-items: center; } + align-items: center; + } + .items-baseline-l { - align-items: baseline; } + align-items: baseline; + } + .items-stretch-l { - align-items: stretch; } + align-items: stretch; + } + .self-start-l { - align-self: flex-start; } + align-self: flex-start; + } + .self-end-l { - align-self: flex-end; } + align-self: flex-end; + } + .self-center-l { - align-self: center; } + align-self: center; + } + .self-baseline-l { - align-self: baseline; } + align-self: baseline; + } + .self-stretch-l { - align-self: stretch; } + align-self: stretch; + } + .justify-start-l { - justify-content: flex-start; } + justify-content: flex-start; + } + .justify-end-l { - justify-content: flex-end; } + justify-content: flex-end; + } + .justify-center-l { - justify-content: center; } + justify-content: center; + } + .justify-between-l { - justify-content: space-between; } + justify-content: space-between; + } + .justify-around-l { - justify-content: space-around; } + justify-content: space-around; + } + .content-start-l { - align-content: flex-start; } + align-content: flex-start; + } + .content-end-l { - align-content: flex-end; } + align-content: flex-end; + } + .content-center-l { - align-content: center; } + align-content: center; + } + .content-between-l { - align-content: space-between; } + align-content: space-between; + } + .content-around-l { - align-content: space-around; } + align-content: space-around; + } + .content-stretch-l { - align-content: stretch; } + align-content: stretch; + } + .order-0-l { - order: 0; } + order: 0; + } + .order-1-l { - order: 1; } + order: 1; + } + .order-2-l { - order: 2; } + order: 2; + } + .order-3-l { - order: 3; } + order: 3; + } + .order-4-l { - order: 4; } + order: 4; + } + .order-5-l { - order: 5; } + order: 5; + } + .order-6-l { - order: 6; } + order: 6; + } + .order-7-l { - order: 7; } + order: 7; + } + .order-8-l { - order: 8; } + order: 8; + } + .order-last-l { - order: 99999; } + order: 99999; + } + .flex-grow-0-l { - flex-grow: 0; } + flex-grow: 0; + } + .flex-grow-1-l { - flex-grow: 1; } + flex-grow: 1; + } + .flex-shrink-0-l { - flex-shrink: 0; } + flex-shrink: 0; + } + .flex-shrink-1-l { - flex-shrink: 1; } } + flex-shrink: 1; + } +} /* @@ -2459,44 +3598,65 @@ img, video { */ .fl { float: left; - _display: inline; } + _display: inline; +} .fr { float: right; - _display: inline; } + _display: inline; +} .fn { - float: none; } + float: none; +} @media screen and (min-width: 35em) { .fl-ns { float: left; - _display: inline; } + _display: inline; + } + .fr-ns { float: right; - _display: inline; } + _display: inline; + } + .fn-ns { - float: none; } } + float: none; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .fl-m { float: left; - _display: inline; } + _display: inline; + } + .fr-m { float: right; - _display: inline; } + _display: inline; + } + .fn-m { - float: none; } } + float: none; + } +} @media screen and (min-width: 60em) { .fl-l { float: left; - _display: inline; } + _display: inline; + } + .fr-l { float: right; - _display: inline; } + _display: inline; + } + .fn-l { - float: none; } } + float: none; + } +} /* @@ -2505,53 +3665,69 @@ img, video { */ .sans-serif { - font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; } + font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; +} .serif { - font-family: georgia, serif; } + font-family: georgia, serif; +} .system-sans-serif { - font-family: sans-serif; } + font-family: sans-serif; +} .system-serif { - font-family: serif; } + font-family: serif; +} /* Monospaced Typefaces (for code) */ /* From http://cssfontstack.com */ -code, .code { - font-family: Consolas, monaco, monospace; } +code, +.code { + font-family: Consolas, monaco, monospace; +} .courier { - font-family: 'Courier Next', courier, monospace; } + font-family: 'Courier Next', courier, monospace; +} /* Sans-Serif Typefaces */ .helvetica { - font-family: 'helvetica neue', helvetica, sans-serif; } + font-family: 'helvetica neue', helvetica, sans-serif; +} .avenir { - font-family: 'avenir next', avenir, sans-serif; } + font-family: 'avenir next', avenir, sans-serif; +} /* Serif Typefaces */ .athelas { - font-family: athelas, georgia, serif; } + font-family: athelas, georgia, serif; +} .georgia { - font-family: georgia, serif; } + font-family: georgia, serif; +} .times { - font-family: times, serif; } + font-family: times, serif; +} .bodoni { - font-family: "Bodoni MT", serif; } + font-family: "Bodoni MT", serif; +} .calisto { - font-family: "Calisto MT", serif; } + font-family: "Calisto MT", serif; +} .garamond { - font-family: garamond, serif; } + font-family: garamond, serif; +} .baskerville { - font-family: baskerville, serif; } + font-family: baskerville, serif; +} /* @@ -2565,28 +3741,42 @@ code, .code { */ .i { - font-style: italic; } + font-style: italic; +} .fs-normal { - font-style: normal; } + font-style: normal; +} @media screen and (min-width: 35em) { .i-ns { - font-style: italic; } + font-style: italic; + } + .fs-normal-ns { - font-style: normal; } } + font-style: normal; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .i-m { - font-style: italic; } + font-style: italic; + } + .fs-normal-m { - font-style: normal; } } + font-style: normal; + } +} @media screen and (min-width: 60em) { .i-l { - font-style: italic; } + font-style: italic; + } + .fs-normal-l { - font-style: normal; } } + font-style: normal; + } +} /* @@ -2614,109 +3804,186 @@ code, .code { */ .normal { - font-weight: normal; } + font-weight: normal; +} .b { - font-weight: bold; } + font-weight: bold; +} .fw1 { - font-weight: 100; } + font-weight: 100; +} .fw2 { - font-weight: 200; } + font-weight: 200; +} .fw3 { - font-weight: 300; } + font-weight: 300; +} .fw4 { - font-weight: 400; } + font-weight: 400; +} .fw5 { - font-weight: 500; } + font-weight: 500; +} .fw6 { - font-weight: 600; } + font-weight: 600; +} .fw7 { - font-weight: 700; } + font-weight: 700; +} .fw8 { - font-weight: 800; } + font-weight: 800; +} .fw9 { - font-weight: 900; } + font-weight: 900; +} @media screen and (min-width: 35em) { .normal-ns { - font-weight: normal; } + font-weight: normal; + } + .b-ns { - font-weight: bold; } + font-weight: bold; + } + .fw1-ns { - font-weight: 100; } + font-weight: 100; + } + .fw2-ns { - font-weight: 200; } + font-weight: 200; + } + .fw3-ns { - font-weight: 300; } + font-weight: 300; + } + .fw4-ns { - font-weight: 400; } + font-weight: 400; + } + .fw5-ns { - font-weight: 500; } + font-weight: 500; + } + .fw6-ns { - font-weight: 600; } + font-weight: 600; + } + .fw7-ns { - font-weight: 700; } + font-weight: 700; + } + .fw8-ns { - font-weight: 800; } + font-weight: 800; + } + .fw9-ns { - font-weight: 900; } } + font-weight: 900; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .normal-m { - font-weight: normal; } + font-weight: normal; + } + .b-m { - font-weight: bold; } + font-weight: bold; + } + .fw1-m { - font-weight: 100; } + font-weight: 100; + } + .fw2-m { - font-weight: 200; } + font-weight: 200; + } + .fw3-m { - font-weight: 300; } + font-weight: 300; + } + .fw4-m { - font-weight: 400; } + font-weight: 400; + } + .fw5-m { - font-weight: 500; } + font-weight: 500; + } + .fw6-m { - font-weight: 600; } + font-weight: 600; + } + .fw7-m { - font-weight: 700; } + font-weight: 700; + } + .fw8-m { - font-weight: 800; } + font-weight: 800; + } + .fw9-m { - font-weight: 900; } } + font-weight: 900; + } +} @media screen and (min-width: 60em) { .normal-l { - font-weight: normal; } + font-weight: normal; + } + .b-l { - font-weight: bold; } + font-weight: bold; + } + .fw1-l { - font-weight: 100; } + font-weight: 100; + } + .fw2-l { - font-weight: 200; } + font-weight: 200; + } + .fw3-l { - font-weight: 300; } + font-weight: 300; + } + .fw4-l { - font-weight: 400; } + font-weight: 400; + } + .fw5-l { - font-weight: 500; } + font-weight: 500; + } + .fw6-l { - font-weight: 600; } + font-weight: 600; + } + .fw7-l { - font-weight: 700; } + font-weight: 700; + } + .fw8-l { - font-weight: 800; } + font-weight: 800; + } + .fw9-l { - font-weight: 900; } } + font-weight: 900; + } +} /* @@ -2725,12 +3992,14 @@ code, .code { */ .input-reset { -webkit-appearance: none; - -moz-appearance: none; } + -moz-appearance: none; +} .button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; - padding: 0; } + padding: 0; +} /* @@ -2766,166 +4035,286 @@ code, .code { */ /* Height Scale */ .h1 { - height: 1rem; } + height: 1rem; +} .h2 { - height: 2rem; } + height: 2rem; +} -.h3, .edit-form textarea { - height: 4rem; } +.h3, +.edit-form textarea { + height: 4rem; +} .h4 { - height: 8rem; } + height: 8rem; +} .h5 { - height: 16rem; } + height: 16rem; +} /* Height Percentages - Based off of height of parent */ .h-25 { - height: 25%; } + height: 25%; +} .h-50 { - height: 50%; } + height: 50%; +} .h-75 { - height: 75%; } + height: 75%; +} .h-100 { - height: 100%; } + height: 100%; +} .min-h-100 { - min-height: 100%; } + min-height: 100%; +} /* Screen Height Percentage */ .vh-25 { - height: 25vh; } + height: 25vh; +} .vh-50 { - height: 50vh; } + height: 50vh; +} .vh-75 { - height: 75vh; } + height: 75vh; +} .vh-100 { - height: 100vh; } + height: 100vh; +} .min-vh-100 { - min-height: 100vh; } + min-height: 100vh; +} /* String Properties */ .h-auto { - height: auto; } + height: auto; +} .h-inherit { - height: inherit; } + height: inherit; +} @media screen and (min-width: 35em) { .h1-ns { - height: 1rem; } + height: 1rem; + } + .h2-ns { - height: 2rem; } + height: 2rem; + } + .h3-ns { - height: 4rem; } + height: 4rem; + } + .h4-ns { - height: 8rem; } + height: 8rem; + } + .h5-ns { - height: 16rem; } + height: 16rem; + } + .h-25-ns { - height: 25%; } + height: 25%; + } + .h-50-ns { - height: 50%; } + height: 50%; + } + .h-75-ns { - height: 75%; } + height: 75%; + } + .h-100-ns { - height: 100%; } + height: 100%; + } + .min-h-100-ns { - min-height: 100%; } + min-height: 100%; + } + .vh-25-ns { - height: 25vh; } + height: 25vh; + } + .vh-50-ns { - height: 50vh; } + height: 50vh; + } + .vh-75-ns { - height: 75vh; } + height: 75vh; + } + .vh-100-ns { - height: 100vh; } + height: 100vh; + } + .min-vh-100-ns { - min-height: 100vh; } + min-height: 100vh; + } + .h-auto-ns { - height: auto; } + height: auto; + } + .h-inherit-ns { - height: inherit; } } + height: inherit; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .h1-m { - height: 1rem; } + height: 1rem; + } + .h2-m { - height: 2rem; } + height: 2rem; + } + .h3-m { - height: 4rem; } + height: 4rem; + } + .h4-m { - height: 8rem; } + height: 8rem; + } + .h5-m { - height: 16rem; } + height: 16rem; + } + .h-25-m { - height: 25%; } + height: 25%; + } + .h-50-m { - height: 50%; } + height: 50%; + } + .h-75-m { - height: 75%; } + height: 75%; + } + .h-100-m { - height: 100%; } + height: 100%; + } + .min-h-100-m { - min-height: 100%; } + min-height: 100%; + } + .vh-25-m { - height: 25vh; } + height: 25vh; + } + .vh-50-m { - height: 50vh; } + height: 50vh; + } + .vh-75-m { - height: 75vh; } + height: 75vh; + } + .vh-100-m { - height: 100vh; } + height: 100vh; + } + .min-vh-100-m { - min-height: 100vh; } + min-height: 100vh; + } + .h-auto-m { - height: auto; } + height: auto; + } + .h-inherit-m { - height: inherit; } } + height: inherit; + } +} @media screen and (min-width: 60em) { .h1-l { - height: 1rem; } + height: 1rem; + } + .h2-l { - height: 2rem; } + height: 2rem; + } + .h3-l { - height: 4rem; } + height: 4rem; + } + .h4-l { - height: 8rem; } + height: 8rem; + } + .h5-l { - height: 16rem; } + height: 16rem; + } + .h-25-l { - height: 25%; } + height: 25%; + } + .h-50-l { - height: 50%; } + height: 50%; + } + .h-75-l { - height: 75%; } + height: 75%; + } + .h-100-l { - height: 100%; } + height: 100%; + } + .min-h-100-l { - min-height: 100%; } + min-height: 100%; + } + .vh-25-l { - height: 25vh; } + height: 25vh; + } + .vh-50-l { - height: 50vh; } + height: 50vh; + } + .vh-75-l { - height: 75vh; } + height: 75vh; + } + .vh-100-l { - height: 100vh; } + height: 100vh; + } + .min-vh-100-l { - min-height: 100vh; } + min-height: 100vh; + } + .h-auto-l { - height: auto; } + height: auto; + } + .h-inherit-l { - height: inherit; } } + height: inherit; + } +} /* @@ -2939,37 +4328,58 @@ code, .code { */ .tracked { - letter-spacing: 0.1em; } + letter-spacing: 0.1em; +} .tracked-tight { - letter-spacing: -0.05em; } + letter-spacing: -0.05em; +} .tracked-mega { - letter-spacing: 0.25em; } + letter-spacing: 0.25em; +} @media screen and (min-width: 35em) { .tracked-ns { - letter-spacing: 0.1em; } + letter-spacing: 0.1em; + } + .tracked-tight-ns { - letter-spacing: -0.05em; } + letter-spacing: -0.05em; + } + .tracked-mega-ns { - letter-spacing: 0.25em; } } + letter-spacing: 0.25em; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .tracked-m { - letter-spacing: 0.1em; } + letter-spacing: 0.1em; + } + .tracked-tight-m { - letter-spacing: -0.05em; } + letter-spacing: -0.05em; + } + .tracked-mega-m { - letter-spacing: 0.25em; } } + letter-spacing: 0.25em; + } +} @media screen and (min-width: 60em) { .tracked-l { - letter-spacing: 0.1em; } + letter-spacing: 0.1em; + } + .tracked-tight-l { - letter-spacing: -0.05em; } + letter-spacing: -0.05em; + } + .tracked-mega-l { - letter-spacing: 0.25em; } } + letter-spacing: 0.25em; + } +} /* @@ -2983,37 +4393,58 @@ code, .code { */ .lh-solid { - line-height: 1; } + line-height: 1; +} .lh-title { - line-height: 1.25; } + line-height: 1.25; +} .lh-copy { - line-height: 1.5; } + line-height: 1.5; +} @media screen and (min-width: 35em) { .lh-solid-ns { - line-height: 1; } + line-height: 1; + } + .lh-title-ns { - line-height: 1.25; } + line-height: 1.25; + } + .lh-copy-ns { - line-height: 1.5; } } + line-height: 1.5; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .lh-solid-m { - line-height: 1; } + line-height: 1; + } + .lh-title-m { - line-height: 1.25; } + line-height: 1.25; + } + .lh-copy-m { - line-height: 1.5; } } + line-height: 1.5; + } +} @media screen and (min-width: 60em) { .lh-solid-l { - line-height: 1; } + line-height: 1; + } + .lh-title-l { - line-height: 1.25; } + line-height: 1.25; + } + .lh-copy-l { - line-height: 1.5; } } + line-height: 1.5; + } +} /* @@ -3023,21 +4454,26 @@ code, .code { */ .link { text-decoration: none; - transition: color .15s ease-in; } + transition: color .15s ease-in; +} .link:link, .link:visited { - transition: color .15s ease-in; } + transition: color .15s ease-in; +} .link:hover { - transition: color .15s ease-in; } + transition: color .15s ease-in; +} .link:active { - transition: color .15s ease-in; } + transition: color .15s ease-in; +} .link:focus { transition: color .15s ease-in; - outline: 1px dotted currentColor; } + outline: 1px dotted currentColor; +} /* @@ -3046,7 +4482,8 @@ code, .code { */ .list { - list-style-type: none; } + list-style-type: none; +} /* @@ -3079,112 +4516,191 @@ code, .code { */ /* Max Width Percentages */ -.mw-100, .edit-form textarea { - max-width: 100%; } +.mw-100, +.edit-form textarea { + max-width: 100%; +} /* Max Width Scale */ .mw1 { - max-width: 1rem; } + max-width: 1rem; +} .mw2 { - max-width: 2rem; } + max-width: 2rem; +} .mw3 { - max-width: 4rem; } + max-width: 4rem; +} .mw4 { - max-width: 8rem; } + max-width: 8rem; +} .mw5 { - max-width: 16rem; } + max-width: 16rem; +} .mw6 { - max-width: 32rem; } + max-width: 32rem; +} .mw7 { - max-width: 48rem; } + max-width: 48rem; +} .mw8 { - max-width: 64rem; } + max-width: 64rem; +} .mw9 { - max-width: 96rem; } + max-width: 96rem; +} /* Max Width String Properties */ .mw-none { - max-width: none; } + max-width: none; +} @media screen and (min-width: 35em) { .mw-100-ns { - max-width: 100%; } + max-width: 100%; + } + .mw1-ns { - max-width: 1rem; } + max-width: 1rem; + } + .mw2-ns { - max-width: 2rem; } + max-width: 2rem; + } + .mw3-ns { - max-width: 4rem; } + max-width: 4rem; + } + .mw4-ns { - max-width: 8rem; } - .mw5-ns, .edit-form input[type=text] { - max-width: 16rem; } + max-width: 8rem; + } + + .mw5-ns, + .edit-form input[type=text] { + max-width: 16rem; + } + .mw6-ns { - max-width: 32rem; } + max-width: 32rem; + } + .mw7-ns { - max-width: 48rem; } + max-width: 48rem; + } + .mw8-ns { - max-width: 64rem; } + max-width: 64rem; + } + .mw9-ns { - max-width: 96rem; } + max-width: 96rem; + } + .mw-none-ns { - max-width: none; } } + max-width: none; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .mw-100-m { - max-width: 100%; } + max-width: 100%; + } + .mw1-m { - max-width: 1rem; } + max-width: 1rem; + } + .mw2-m { - max-width: 2rem; } + max-width: 2rem; + } + .mw3-m { - max-width: 4rem; } + max-width: 4rem; + } + .mw4-m { - max-width: 8rem; } + max-width: 8rem; + } + .mw5-m { - max-width: 16rem; } + max-width: 16rem; + } + .mw6-m { - max-width: 32rem; } + max-width: 32rem; + } + .mw7-m { - max-width: 48rem; } + max-width: 48rem; + } + .mw8-m { - max-width: 64rem; } + max-width: 64rem; + } + .mw9-m { - max-width: 96rem; } + max-width: 96rem; + } + .mw-none-m { - max-width: none; } } + max-width: none; + } +} @media screen and (min-width: 60em) { .mw-100-l { - max-width: 100%; } + max-width: 100%; + } + .mw1-l { - max-width: 1rem; } + max-width: 1rem; + } + .mw2-l { - max-width: 2rem; } + max-width: 2rem; + } + .mw3-l { - max-width: 4rem; } + max-width: 4rem; + } + .mw4-l { - max-width: 8rem; } + max-width: 8rem; + } + .mw5-l { - max-width: 16rem; } + max-width: 16rem; + } + .mw6-l { - max-width: 32rem; } + max-width: 32rem; + } + .mw7-l { - max-width: 48rem; } + max-width: 48rem; + } + .mw8-l { - max-width: 64rem; } + max-width: 64rem; + } + .mw9-l { - max-width: 96rem; } + max-width: 96rem; + } + .mw-none-l { - max-width: none; } } + max-width: none; + } +} /* @@ -3229,235 +4745,416 @@ code, .code { */ /* Width Scale */ .w1 { - width: 1rem; } + width: 1rem; +} -.w2, .carousel-container .carousel-button.active { - width: 2rem; } +.w2, +.carousel-container .carousel-button.active { + width: 2rem; +} .w3 { - width: 4rem; } + width: 4rem; +} .w4 { - width: 8rem; } + width: 8rem; +} .w5 { - width: 16rem; } + width: 16rem; +} .w6 { - width: 32rem; } + width: 32rem; +} .w7 { - width: 48rem; } + width: 48rem; +} .w8 { - width: 64rem; } + width: 64rem; +} .w-10 { - width: 10%; } + width: 10%; +} .w-20 { - width: 20%; } + width: 20%; +} .w-25 { - width: 25%; } + width: 25%; +} .w-30 { - width: 30%; } + width: 30%; +} .w-33 { - width: 33%; } + width: 33%; +} .w-34 { - width: 34%; } + width: 34%; +} .w-40 { - width: 40%; } + width: 40%; +} .w-50 { - width: 50%; } + width: 50%; +} .w-60 { - width: 60%; } + width: 60%; +} .w-70 { - width: 70%; } + width: 70%; +} .w-75 { - width: 75%; } + width: 75%; +} .w-80 { - width: 80%; } + width: 80%; +} .w-90 { - width: 90%; } + width: 90%; +} -.w-100, .edit-form .edit-form-row > :first-child, .edit-form input[type=text], .edit-form textarea { - width: 100%; } +.w-100, +.edit-form .edit-form-row> :first-child, +.edit-form input[type=text], +.edit-form textarea { + width: 100%; +} .w-third { - width: 33.33333%; } + width: 33.33333%; +} .w-two-thirds { - width: 66.66667%; } + width: 66.66667%; +} .w-auto { - width: auto; } + width: auto; +} @media screen and (min-width: 35em) { .w1-ns { - width: 1rem; } + width: 1rem; + } + .w2-ns { - width: 2rem; } + width: 2rem; + } + .w3-ns { - width: 4rem; } - .w4-ns, .edit-form .edit-form-row > :first-child { - width: 8rem; } + width: 4rem; + } + + .w4-ns, + .edit-form .edit-form-row> :first-child { + width: 8rem; + } + .w5-ns { - width: 16rem; } - .w6-ns, .edit-form textarea { - width: 32rem; } + width: 16rem; + } + + .w6-ns, + .edit-form textarea { + width: 32rem; + } + .w7-ns { - width: 48rem; } + width: 48rem; + } + .w8-ns { - width: 64rem; } + width: 64rem; + } + .w-10-ns { - width: 10%; } + width: 10%; + } + .w-20-ns { - width: 20%; } + width: 20%; + } + .w-25-ns { - width: 25%; } + width: 25%; + } + .w-30-ns { - width: 30%; } + width: 30%; + } + .w-33-ns { - width: 33%; } + width: 33%; + } + .w-34-ns { - width: 34%; } + width: 34%; + } + .w-40-ns { - width: 40%; } + width: 40%; + } + .w-50-ns { - width: 50%; } + width: 50%; + } + .w-60-ns { - width: 60%; } + width: 60%; + } + .w-70-ns { - width: 70%; } + width: 70%; + } + .w-75-ns { - width: 75%; } + width: 75%; + } + .w-80-ns { - width: 80%; } + width: 80%; + } + .w-90-ns { - width: 90%; } + width: 90%; + } + .w-100-ns { - width: 100%; } + width: 100%; + } + .w-third-ns { - width: 33.33333%; } + width: 33.33333%; + } + .w-two-thirds-ns { - width: 66.66667%; } + width: 66.66667%; + } + .w-auto-ns { - width: auto; } } + width: auto; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .w1-m { - width: 1rem; } + width: 1rem; + } + .w2-m { - width: 2rem; } + width: 2rem; + } + .w3-m { - width: 4rem; } + width: 4rem; + } + .w4-m { - width: 8rem; } + width: 8rem; + } + .w5-m { - width: 16rem; } + width: 16rem; + } + .w6-m { - width: 32rem; } + width: 32rem; + } + .w7-m { - width: 48rem; } + width: 48rem; + } + .w8-m { - width: 64rem; } + width: 64rem; + } + .w-10-m { - width: 10%; } + width: 10%; + } + .w-20-m { - width: 20%; } + width: 20%; + } + .w-25-m { - width: 25%; } + width: 25%; + } + .w-30-m { - width: 30%; } + width: 30%; + } + .w-33-m { - width: 33%; } + width: 33%; + } + .w-34-m { - width: 34%; } + width: 34%; + } + .w-40-m { - width: 40%; } + width: 40%; + } + .w-50-m { - width: 50%; } + width: 50%; + } + .w-60-m { - width: 60%; } + width: 60%; + } + .w-70-m { - width: 70%; } + width: 70%; + } + .w-75-m { - width: 75%; } + width: 75%; + } + .w-80-m { - width: 80%; } + width: 80%; + } + .w-90-m { - width: 90%; } + width: 90%; + } + .w-100-m { - width: 100%; } + width: 100%; + } + .w-third-m { - width: 33.33333%; } + width: 33.33333%; + } + .w-two-thirds-m { - width: 66.66667%; } + width: 66.66667%; + } + .w-auto-m { - width: auto; } } + width: auto; + } +} @media screen and (min-width: 60em) { .w1-l { - width: 1rem; } + width: 1rem; + } + .w2-l { - width: 2rem; } + width: 2rem; + } + .w3-l { - width: 4rem; } + width: 4rem; + } + .w4-l { - width: 8rem; } + width: 8rem; + } + .w5-l { - width: 16rem; } + width: 16rem; + } + .w6-l { - width: 32rem; } + width: 32rem; + } + .w7-l { - width: 48rem; } + width: 48rem; + } + .w8-l { - width: 64rem; } + width: 64rem; + } + .w-10-l { - width: 10%; } + width: 10%; + } + .w-20-l { - width: 20%; } + width: 20%; + } + .w-25-l { - width: 25%; } + width: 25%; + } + .w-30-l { - width: 30%; } + width: 30%; + } + .w-33-l { - width: 33%; } + width: 33%; + } + .w-34-l { - width: 34%; } + width: 34%; + } + .w-40-l { - width: 40%; } + width: 40%; + } + .w-50-l { - width: 50%; } + width: 50%; + } + .w-60-l { - width: 60%; } + width: 60%; + } + .w-70-l { - width: 70%; } + width: 70%; + } + .w-75-l { - width: 75%; } + width: 75%; + } + .w-80-l { - width: 80%; } + width: 80%; + } + .w-90-l { - width: 90%; } + width: 90%; + } + .w-100-l { - width: 100%; } + width: 100%; + } + .w-third-l { - width: 33.33333%; } + width: 33.33333%; + } + .w-two-thirds-l { - width: 66.66667%; } + width: 66.66667%; + } + .w-auto-l { - width: auto; } } + width: auto; + } +} /* @@ -3470,118 +5167,203 @@ code, .code { */ .overflow-visible { - overflow: visible; } + overflow: visible; +} -.overflow-hidden, .edit-form .edit-form-row > :nth-child(2) { - overflow: hidden; } +.overflow-hidden, +.edit-form .edit-form-row> :nth-child(2) { + overflow: hidden; +} .overflow-scroll { - overflow: scroll; } + overflow: scroll; +} .overflow-auto { - overflow: auto; } + overflow: auto; +} .overflow-x-visible { - overflow-x: visible; } + overflow-x: visible; +} .overflow-x-hidden { - overflow-x: hidden; } + overflow-x: hidden; +} .overflow-x-scroll { - overflow-x: scroll; } + overflow-x: scroll; +} .overflow-x-auto { - overflow-x: auto; } + overflow-x: auto; +} .overflow-y-visible { - overflow-y: visible; } + overflow-y: visible; +} .overflow-y-hidden { - overflow-y: hidden; } + overflow-y: hidden; +} .overflow-y-scroll { - overflow-y: scroll; } + overflow-y: scroll; +} .overflow-y-auto { - overflow-y: auto; } + overflow-y: auto; +} @media screen and (min-width: 35em) { .overflow-visible-ns { - overflow: visible; } + overflow: visible; + } + .overflow-hidden-ns { - overflow: hidden; } + overflow: hidden; + } + .overflow-scroll-ns { - overflow: scroll; } + overflow: scroll; + } + .overflow-auto-ns { - overflow: auto; } + overflow: auto; + } + .overflow-x-visible-ns { - overflow-x: visible; } + overflow-x: visible; + } + .overflow-x-hidden-ns { - overflow-x: hidden; } + overflow-x: hidden; + } + .overflow-x-scroll-ns { - overflow-x: scroll; } + overflow-x: scroll; + } + .overflow-x-auto-ns { - overflow-x: auto; } + overflow-x: auto; + } + .overflow-y-visible-ns { - overflow-y: visible; } + overflow-y: visible; + } + .overflow-y-hidden-ns { - overflow-y: hidden; } + overflow-y: hidden; + } + .overflow-y-scroll-ns { - overflow-y: scroll; } + overflow-y: scroll; + } + .overflow-y-auto-ns { - overflow-y: auto; } } + overflow-y: auto; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .overflow-visible-m { - overflow: visible; } + overflow: visible; + } + .overflow-hidden-m { - overflow: hidden; } + overflow: hidden; + } + .overflow-scroll-m { - overflow: scroll; } + overflow: scroll; + } + .overflow-auto-m { - overflow: auto; } + overflow: auto; + } + .overflow-x-visible-m { - overflow-x: visible; } + overflow-x: visible; + } + .overflow-x-hidden-m { - overflow-x: hidden; } + overflow-x: hidden; + } + .overflow-x-scroll-m { - overflow-x: scroll; } + overflow-x: scroll; + } + .overflow-x-auto-m { - overflow-x: auto; } + overflow-x: auto; + } + .overflow-y-visible-m { - overflow-y: visible; } + overflow-y: visible; + } + .overflow-y-hidden-m { - overflow-y: hidden; } + overflow-y: hidden; + } + .overflow-y-scroll-m { - overflow-y: scroll; } + overflow-y: scroll; + } + .overflow-y-auto-m { - overflow-y: auto; } } + overflow-y: auto; + } +} @media screen and (min-width: 60em) { .overflow-visible-l { - overflow: visible; } + overflow: visible; + } + .overflow-hidden-l { - overflow: hidden; } + overflow: hidden; + } + .overflow-scroll-l { - overflow: scroll; } + overflow: scroll; + } + .overflow-auto-l { - overflow: auto; } + overflow: auto; + } + .overflow-x-visible-l { - overflow-x: visible; } + overflow-x: visible; + } + .overflow-x-hidden-l { - overflow-x: hidden; } + overflow-x: hidden; + } + .overflow-x-scroll-l { - overflow-x: scroll; } + overflow-x: scroll; + } + .overflow-x-auto-l { - overflow-x: auto; } + overflow-x: auto; + } + .overflow-y-visible-l { - overflow-y: visible; } + overflow-y: visible; + } + .overflow-y-hidden-l { - overflow-y: hidden; } + overflow-y: hidden; + } + .overflow-y-scroll-l { - overflow-y: scroll; } + overflow-y: scroll; + } + .overflow-y-auto-l { - overflow-y: auto; } } + overflow-y: auto; + } +} /* @@ -3595,46 +5377,74 @@ code, .code { */ .static { - position: static; } + position: static; +} .relative { - position: relative; } + position: relative; +} .absolute { - position: absolute; } + position: absolute; +} .fixed { - position: fixed; } + position: fixed; +} @media screen and (min-width: 35em) { .static-ns { - position: static; } + position: static; + } + .relative-ns { - position: relative; } + position: relative; + } + .absolute-ns { - position: absolute; } + position: absolute; + } + .fixed-ns { - position: fixed; } } + position: fixed; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .static-m { - position: static; } + position: static; + } + .relative-m { - position: relative; } + position: relative; + } + .absolute-m { - position: absolute; } + position: absolute; + } + .fixed-m { - position: fixed; } } + position: fixed; + } +} @media screen and (min-width: 60em) { .static-l { - position: static; } + position: static; + } + .relative-l { - position: relative; } + position: relative; + } + .absolute-l { - position: absolute; } + position: absolute; + } + .fixed-l { - position: fixed; } } + position: fixed; + } +} /* @@ -3643,43 +5453,56 @@ code, .code { */ .o-100 { - opacity: 1; } + opacity: 1; +} .o-90 { - opacity: .9; } + opacity: .9; +} .o-80 { - opacity: .8; } + opacity: .8; +} .o-70 { - opacity: .7; } + opacity: .7; +} .o-60 { - opacity: .6; } + opacity: .6; +} .o-50 { - opacity: .5; } + opacity: .5; +} .o-40 { - opacity: .4; } + opacity: .4; +} .o-30 { - opacity: .3; } + opacity: .3; +} .o-20 { - opacity: .2; } + opacity: .2; +} .o-10 { - opacity: .1; } + opacity: .1; +} .o-05 { - opacity: .05; } + opacity: .05; +} .o-025 { - opacity: .025; } + opacity: .025; +} .o-0 { - opacity: 0; } + opacity: 0; +} /* @@ -3687,73 +5510,122 @@ code, .code { */ .rotate-45 { - transform: rotate(45deg); } + transform: rotate(45deg); +} .rotate-90 { - transform: rotate(90deg); } + transform: rotate(90deg); +} .rotate-135 { - transform: rotate(135deg); } + transform: rotate(135deg); +} .rotate-180 { - transform: rotate(180deg); } + transform: rotate(180deg); +} .rotate-225 { - transform: rotate(225deg); } + transform: rotate(225deg); +} .rotate-270 { - transform: rotate(270deg); } + transform: rotate(270deg); +} .rotate-315 { - transform: rotate(315deg); } + transform: rotate(315deg); +} @media screen and (min-width: 35em) { .rotate-45-ns { - transform: rotate(45deg); } + transform: rotate(45deg); + } + .rotate-90-ns { - transform: rotate(90deg); } + transform: rotate(90deg); + } + .rotate-135-ns { - transform: rotate(135deg); } + transform: rotate(135deg); + } + .rotate-180-ns { - transform: rotate(180deg); } + transform: rotate(180deg); + } + .rotate-225-ns { - transform: rotate(225deg); } + transform: rotate(225deg); + } + .rotate-270-ns { - transform: rotate(270deg); } + transform: rotate(270deg); + } + .rotate-315-ns { - transform: rotate(315deg); } } + transform: rotate(315deg); + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .rotate-45-m { - transform: rotate(45deg); } + transform: rotate(45deg); + } + .rotate-90-m { - transform: rotate(90deg); } + transform: rotate(90deg); + } + .rotate-135-m { - transform: rotate(135deg); } + transform: rotate(135deg); + } + .rotate-180-m { - transform: rotate(180deg); } + transform: rotate(180deg); + } + .rotate-225-m { - transform: rotate(225deg); } + transform: rotate(225deg); + } + .rotate-270-m { - transform: rotate(270deg); } + transform: rotate(270deg); + } + .rotate-315-m { - transform: rotate(315deg); } } + transform: rotate(315deg); + } +} @media screen and (min-width: 60em) { .rotate-45-l { - transform: rotate(45deg); } + transform: rotate(45deg); + } + .rotate-90-l { - transform: rotate(90deg); } + transform: rotate(90deg); + } + .rotate-135-l { - transform: rotate(135deg); } + transform: rotate(135deg); + } + .rotate-180-l { - transform: rotate(180deg); } + transform: rotate(180deg); + } + .rotate-225-l { - transform: rotate(225deg); } + transform: rotate(225deg); + } + .rotate-270-l { - transform: rotate(270deg); } + transform: rotate(270deg); + } + .rotate-315-l { - transform: rotate(315deg); } } + transform: rotate(315deg); + } +} /* @@ -3767,344 +5639,457 @@ code, .code { */ /* Text colors */ .black-90 { - color: rgba(0, 0, 0, 0.9); } + color: rgba(0, 0, 0, 0.9); +} .black-80 { - color: rgba(0, 0, 0, 0.8); } + color: rgba(0, 0, 0, 0.8); +} .black-70 { - color: rgba(0, 0, 0, 0.7); } + color: rgba(0, 0, 0, 0.7); +} .black-60 { - color: rgba(0, 0, 0, 0.6); } + color: rgba(0, 0, 0, 0.6); +} .black-50 { - color: rgba(0, 0, 0, 0.5); } + color: rgba(0, 0, 0, 0.5); +} .black-40 { - color: rgba(0, 0, 0, 0.4); } + color: rgba(0, 0, 0, 0.4); +} .black-30 { - color: rgba(0, 0, 0, 0.3); } + color: rgba(0, 0, 0, 0.3); +} .black-20 { - color: rgba(0, 0, 0, 0.2); } + color: rgba(0, 0, 0, 0.2); +} .black-10 { - color: rgba(0, 0, 0, 0.1); } + color: rgba(0, 0, 0, 0.1); +} .black-05 { - color: rgba(0, 0, 0, 0.05); } + color: rgba(0, 0, 0, 0.05); +} .white-90 { - color: rgba(255, 255, 255, 0.9); } + color: rgba(255, 255, 255, 0.9); +} .white-80 { - color: rgba(255, 255, 255, 0.8); } + color: rgba(255, 255, 255, 0.8); +} .white-70 { - color: rgba(255, 255, 255, 0.7); } + color: rgba(255, 255, 255, 0.7); +} .white-60 { - color: rgba(255, 255, 255, 0.6); } + color: rgba(255, 255, 255, 0.6); +} .white-50 { - color: rgba(255, 255, 255, 0.5); } + color: rgba(255, 255, 255, 0.5); +} .white-40 { - color: rgba(255, 255, 255, 0.4); } + color: rgba(255, 255, 255, 0.4); +} .white-30 { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.3); +} .white-20 { - color: rgba(255, 255, 255, 0.2); } + color: rgba(255, 255, 255, 0.2); +} .white-10 { - color: rgba(255, 255, 255, 0.1); } + color: rgba(255, 255, 255, 0.1); +} .black { - color: #000; } + color: #000; +} .near-black { - color: #111; } + color: #111; +} .dark-gray { - color: #333; } + color: #333; +} .mid-gray { - color: #555; } + color: #555; +} .gray { - color: #777; } + color: #777; +} .silver { - color: #999; } + color: #999; +} .light-silver { - color: #aaa; } + color: #aaa; +} .moon-gray { - color: #ccc; } + color: #ccc; +} .light-gray { - color: #eee; } + color: #eee; +} .near-white { - color: #f4f4f4; } + color: #f4f4f4; +} .white { - color: #fff; } + color: #fff; +} .dark-red { - color: #e7040f; } + color: #e7040f; +} .red { - color: #ff4136; } + color: #ff4136; +} .light-red { - color: #ff725c; } + color: #ff725c; +} .orange { - color: #ff6300; } + color: #ff6300; +} .gold { - color: #ffb700; } + color: #ffb700; +} .yellow { - color: #ffd700; } + color: #ffd700; +} .light-yellow { - color: #fbf1a9; } + color: #fbf1a9; +} .purple { - color: #5e2ca5; } + color: #5e2ca5; +} .light-purple { - color: #a463f2; } + color: #a463f2; +} .dark-pink { - color: #d5008f; } + color: #d5008f; +} .hot-pink { - color: #ff41b4; } + color: #ff41b4; +} .pink { - color: #ff80cc; } + color: #ff80cc; +} .light-pink { - color: #ffa3d7; } + color: #ffa3d7; +} .dark-green { - color: #137752; } + color: #137752; +} .green { - color: #19a974; } + color: #19a974; +} .light-green { - color: #9eebcf; } + color: #9eebcf; +} .navy { - color: #001b44; } + color: #001b44; +} .dark-blue { - color: #00449e; } + color: #00449e; +} .blue { - color: #357edd; } + color: #357edd; +} .light-blue { - color: #96ccff; } + color: #96ccff; +} .lightest-blue { - color: #cdecff; } + color: #cdecff; +} .washed-blue { - color: #f6fffe; } + color: #f6fffe; +} .washed-green { - color: #e8fdf5; } + color: #e8fdf5; +} .washed-yellow { - color: #fffceb; } + color: #fffceb; +} .washed-red { - color: #ffdfdf; } + color: #ffdfdf; +} .color-inherit { - color: inherit; } + color: inherit; +} .bg-black-90 { - background-color: rgba(0, 0, 0, 0.9); } + background-color: rgba(0, 0, 0, 0.9); +} .bg-black-80 { - background-color: rgba(0, 0, 0, 0.8); } + background-color: rgba(0, 0, 0, 0.8); +} .bg-black-70 { - background-color: rgba(0, 0, 0, 0.7); } + background-color: rgba(0, 0, 0, 0.7); +} .bg-black-60 { - background-color: rgba(0, 0, 0, 0.6); } + background-color: rgba(0, 0, 0, 0.6); +} .bg-black-50 { - background-color: rgba(0, 0, 0, 0.5); } + background-color: rgba(0, 0, 0, 0.5); +} .bg-black-40 { - background-color: rgba(0, 0, 0, 0.4); } + background-color: rgba(0, 0, 0, 0.4); +} .bg-black-30 { - background-color: rgba(0, 0, 0, 0.3); } + background-color: rgba(0, 0, 0, 0.3); +} .bg-black-20 { - background-color: rgba(0, 0, 0, 0.2); } + background-color: rgba(0, 0, 0, 0.2); +} .bg-black-10 { - background-color: rgba(0, 0, 0, 0.1); } + background-color: rgba(0, 0, 0, 0.1); +} .bg-black-05 { - background-color: rgba(0, 0, 0, 0.05); } + background-color: rgba(0, 0, 0, 0.05); +} .bg-white-90 { - background-color: rgba(255, 255, 255, 0.9); } + background-color: rgba(255, 255, 255, 0.9); +} .bg-white-80 { - background-color: rgba(255, 255, 255, 0.8); } + background-color: rgba(255, 255, 255, 0.8); +} .bg-white-70 { - background-color: rgba(255, 255, 255, 0.7); } + background-color: rgba(255, 255, 255, 0.7); +} .bg-white-60 { - background-color: rgba(255, 255, 255, 0.6); } + background-color: rgba(255, 255, 255, 0.6); +} .bg-white-50 { - background-color: rgba(255, 255, 255, 0.5); } + background-color: rgba(255, 255, 255, 0.5); +} .bg-white-40 { - background-color: rgba(255, 255, 255, 0.4); } + background-color: rgba(255, 255, 255, 0.4); +} .bg-white-30 { - background-color: rgba(255, 255, 255, 0.3); } + background-color: rgba(255, 255, 255, 0.3); +} .bg-white-20 { - background-color: rgba(255, 255, 255, 0.2); } + background-color: rgba(255, 255, 255, 0.2); +} .bg-white-10 { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(255, 255, 255, 0.1); +} /* Background colors */ .bg-black { - background-color: #000; } + background-color: #000; +} .bg-near-black { - background-color: #111; } + background-color: #111; +} .bg-dark-gray { - background-color: #333; } + background-color: #333; +} .bg-mid-gray { - background-color: #555; } + background-color: #555; +} .bg-gray { - background-color: #777; } + background-color: #777; +} .bg-silver { - background-color: #999; } + background-color: #999; +} .bg-light-silver { - background-color: #aaa; } + background-color: #aaa; +} .bg-moon-gray { - background-color: #ccc; } + background-color: #ccc; +} .bg-light-gray { - background-color: #eee; } + background-color: #eee; +} .bg-near-white { - background-color: #f4f4f4; } + background-color: #f4f4f4; +} .bg-white { - background-color: #fff; } + background-color: #fff; +} .bg-transparent { - background-color: transparent; } + background-color: transparent; +} .bg-dark-red { - background-color: #e7040f; } + background-color: #e7040f; +} .bg-red { - background-color: #ff4136; } + background-color: #ff4136; +} .bg-light-red { - background-color: #ff725c; } + background-color: #ff725c; +} .bg-orange { - background-color: #ff6300; } + background-color: #ff6300; +} .bg-gold { - background-color: #ffb700; } + background-color: #ffb700; +} .bg-yellow { - background-color: #ffd700; } + background-color: #ffd700; +} .bg-light-yellow { - background-color: #fbf1a9; } + background-color: #fbf1a9; +} .bg-purple { - background-color: #5e2ca5; } + background-color: #5e2ca5; +} .bg-light-purple { - background-color: #a463f2; } + background-color: #a463f2; +} .bg-dark-pink { - background-color: #d5008f; } + background-color: #d5008f; +} .bg-hot-pink { - background-color: #ff41b4; } + background-color: #ff41b4; +} .bg-pink { - background-color: #ff80cc; } + background-color: #ff80cc; +} .bg-light-pink { - background-color: #ffa3d7; } + background-color: #ffa3d7; +} .bg-dark-green { - background-color: #137752; } + background-color: #137752; +} .bg-green { - background-color: #19a974; } + background-color: #19a974; +} .bg-light-green { - background-color: #9eebcf; } + background-color: #9eebcf; +} .bg-navy { - background-color: #001b44; } + background-color: #001b44; +} .bg-dark-blue { - background-color: #00449e; } + background-color: #00449e; +} .bg-blue { - background-color: #357edd; } + background-color: #357edd; +} .bg-light-blue { - background-color: #96ccff; } + background-color: #96ccff; +} .bg-lightest-blue { - background-color: #cdecff; } + background-color: #cdecff; +} .bg-washed-blue { - background-color: #f6fffe; } + background-color: #f6fffe; +} .bg-washed-green { - background-color: #e8fdf5; } + background-color: #e8fdf5; +} .bg-washed-yellow { - background-color: #fffceb; } + background-color: #fffceb; +} .bg-washed-red { - background-color: #ffdfdf; } + background-color: #ffdfdf; +} .bg-inherit { - background-color: inherit; } + background-color: inherit; +} /* @@ -4116,447 +6101,558 @@ code, .code { */ .hover-black:hover, .hover-black:focus { - color: #000; } + color: #000; +} .hover-near-black:hover, .hover-near-black:focus { - color: #111; } + color: #111; +} .hover-dark-gray:hover, .hover-dark-gray:focus { - color: #333; } + color: #333; +} .hover-mid-gray:hover, .hover-mid-gray:focus { - color: #555; } + color: #555; +} .hover-gray:hover, .hover-gray:focus { - color: #777; } + color: #777; +} .hover-silver:hover, .hover-silver:focus { - color: #999; } + color: #999; +} .hover-light-silver:hover, .hover-light-silver:focus { - color: #aaa; } + color: #aaa; +} .hover-moon-gray:hover, .hover-moon-gray:focus { - color: #ccc; } + color: #ccc; +} .hover-light-gray:hover, .hover-light-gray:focus { - color: #eee; } + color: #eee; +} .hover-near-white:hover, .hover-near-white:focus { - color: #f4f4f4; } + color: #f4f4f4; +} .hover-white:hover, .hover-white:focus { - color: #fff; } + color: #fff; +} .hover-black-90:hover, .hover-black-90:focus { - color: rgba(0, 0, 0, 0.9); } + color: rgba(0, 0, 0, 0.9); +} .hover-black-80:hover, .hover-black-80:focus { - color: rgba(0, 0, 0, 0.8); } + color: rgba(0, 0, 0, 0.8); +} .hover-black-70:hover, .hover-black-70:focus { - color: rgba(0, 0, 0, 0.7); } + color: rgba(0, 0, 0, 0.7); +} .hover-black-60:hover, .hover-black-60:focus { - color: rgba(0, 0, 0, 0.6); } + color: rgba(0, 0, 0, 0.6); +} .hover-black-50:hover, .hover-black-50:focus { - color: rgba(0, 0, 0, 0.5); } + color: rgba(0, 0, 0, 0.5); +} .hover-black-40:hover, .hover-black-40:focus { - color: rgba(0, 0, 0, 0.4); } + color: rgba(0, 0, 0, 0.4); +} .hover-black-30:hover, .hover-black-30:focus { - color: rgba(0, 0, 0, 0.3); } + color: rgba(0, 0, 0, 0.3); +} .hover-black-20:hover, .hover-black-20:focus { - color: rgba(0, 0, 0, 0.2); } + color: rgba(0, 0, 0, 0.2); +} .hover-black-10:hover, .hover-black-10:focus { - color: rgba(0, 0, 0, 0.1); } + color: rgba(0, 0, 0, 0.1); +} .hover-white-90:hover, .hover-white-90:focus { - color: rgba(255, 255, 255, 0.9); } + color: rgba(255, 255, 255, 0.9); +} .hover-white-80:hover, .hover-white-80:focus { - color: rgba(255, 255, 255, 0.8); } + color: rgba(255, 255, 255, 0.8); +} .hover-white-70:hover, .hover-white-70:focus { - color: rgba(255, 255, 255, 0.7); } + color: rgba(255, 255, 255, 0.7); +} .hover-white-60:hover, .hover-white-60:focus { - color: rgba(255, 255, 255, 0.6); } + color: rgba(255, 255, 255, 0.6); +} .hover-white-50:hover, .hover-white-50:focus { - color: rgba(255, 255, 255, 0.5); } + color: rgba(255, 255, 255, 0.5); +} .hover-white-40:hover, .hover-white-40:focus { - color: rgba(255, 255, 255, 0.4); } + color: rgba(255, 255, 255, 0.4); +} .hover-white-30:hover, .hover-white-30:focus { - color: rgba(255, 255, 255, 0.3); } + color: rgba(255, 255, 255, 0.3); +} .hover-white-20:hover, .hover-white-20:focus { - color: rgba(255, 255, 255, 0.2); } + color: rgba(255, 255, 255, 0.2); +} .hover-white-10:hover, .hover-white-10:focus { - color: rgba(255, 255, 255, 0.1); } + color: rgba(255, 255, 255, 0.1); +} .hover-inherit:hover, .hover-inherit:focus { - color: inherit; } + color: inherit; +} .hover-bg-black:hover, .hover-bg-black:focus { - background-color: #000; } + background-color: #000; +} .hover-bg-near-black:hover, .hover-bg-near-black:focus { - background-color: #111; } + background-color: #111; +} .hover-bg-dark-gray:hover, .hover-bg-dark-gray:focus { - background-color: #333; } + background-color: #333; +} .hover-bg-mid-gray:hover, .hover-bg-mid-gray:focus { - background-color: #555; } + background-color: #555; +} .hover-bg-gray:hover, .hover-bg-gray:focus { - background-color: #777; } + background-color: #777; +} .hover-bg-silver:hover, .hover-bg-silver:focus { - background-color: #999; } + background-color: #999; +} .hover-bg-light-silver:hover, .hover-bg-light-silver:focus { - background-color: #aaa; } + background-color: #aaa; +} .hover-bg-moon-gray:hover, .hover-bg-moon-gray:focus { - background-color: #ccc; } + background-color: #ccc; +} .hover-bg-light-gray:hover, .hover-bg-light-gray:focus { - background-color: #eee; } + background-color: #eee; +} .hover-bg-near-white:hover, .hover-bg-near-white:focus { - background-color: #f4f4f4; } + background-color: #f4f4f4; +} .hover-bg-white:hover, .hover-bg-white:focus { - background-color: #fff; } + background-color: #fff; +} .hover-bg-transparent:hover, .hover-bg-transparent:focus { - background-color: transparent; } + background-color: transparent; +} .hover-bg-black-90:hover, .hover-bg-black-90:focus { - background-color: rgba(0, 0, 0, 0.9); } + background-color: rgba(0, 0, 0, 0.9); +} .hover-bg-black-80:hover, .hover-bg-black-80:focus { - background-color: rgba(0, 0, 0, 0.8); } + background-color: rgba(0, 0, 0, 0.8); +} .hover-bg-black-70:hover, .hover-bg-black-70:focus { - background-color: rgba(0, 0, 0, 0.7); } + background-color: rgba(0, 0, 0, 0.7); +} .hover-bg-black-60:hover, .hover-bg-black-60:focus { - background-color: rgba(0, 0, 0, 0.6); } + background-color: rgba(0, 0, 0, 0.6); +} .hover-bg-black-50:hover, .hover-bg-black-50:focus { - background-color: rgba(0, 0, 0, 0.5); } + background-color: rgba(0, 0, 0, 0.5); +} .hover-bg-black-40:hover, .hover-bg-black-40:focus { - background-color: rgba(0, 0, 0, 0.4); } + background-color: rgba(0, 0, 0, 0.4); +} .hover-bg-black-30:hover, .hover-bg-black-30:focus { - background-color: rgba(0, 0, 0, 0.3); } + background-color: rgba(0, 0, 0, 0.3); +} .hover-bg-black-20:hover, .hover-bg-black-20:focus { - background-color: rgba(0, 0, 0, 0.2); } + background-color: rgba(0, 0, 0, 0.2); +} .hover-bg-black-10:hover, .hover-bg-black-10:focus { - background-color: rgba(0, 0, 0, 0.1); } + background-color: rgba(0, 0, 0, 0.1); +} .hover-bg-white-90:hover, .hover-bg-white-90:focus { - background-color: rgba(255, 255, 255, 0.9); } + background-color: rgba(255, 255, 255, 0.9); +} .hover-bg-white-80:hover, .hover-bg-white-80:focus { - background-color: rgba(255, 255, 255, 0.8); } + background-color: rgba(255, 255, 255, 0.8); +} .hover-bg-white-70:hover, .hover-bg-white-70:focus { - background-color: rgba(255, 255, 255, 0.7); } + background-color: rgba(255, 255, 255, 0.7); +} .hover-bg-white-60:hover, .hover-bg-white-60:focus { - background-color: rgba(255, 255, 255, 0.6); } + background-color: rgba(255, 255, 255, 0.6); +} .hover-bg-white-50:hover, .hover-bg-white-50:focus { - background-color: rgba(255, 255, 255, 0.5); } + background-color: rgba(255, 255, 255, 0.5); +} .hover-bg-white-40:hover, .hover-bg-white-40:focus { - background-color: rgba(255, 255, 255, 0.4); } + background-color: rgba(255, 255, 255, 0.4); +} .hover-bg-white-30:hover, .hover-bg-white-30:focus { - background-color: rgba(255, 255, 255, 0.3); } + background-color: rgba(255, 255, 255, 0.3); +} .hover-bg-white-20:hover, .hover-bg-white-20:focus { - background-color: rgba(255, 255, 255, 0.2); } + background-color: rgba(255, 255, 255, 0.2); +} .hover-bg-white-10:hover, .hover-bg-white-10:focus { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(255, 255, 255, 0.1); +} .hover-dark-red:hover, .hover-dark-red:focus { - color: #e7040f; } + color: #e7040f; +} .hover-red:hover, .hover-red:focus { - color: #ff4136; } + color: #ff4136; +} .hover-light-red:hover, .hover-light-red:focus { - color: #ff725c; } + color: #ff725c; +} .hover-orange:hover, .hover-orange:focus { - color: #ff6300; } + color: #ff6300; +} .hover-gold:hover, .hover-gold:focus { - color: #ffb700; } + color: #ffb700; +} .hover-yellow:hover, .hover-yellow:focus { - color: #ffd700; } + color: #ffd700; +} .hover-light-yellow:hover, .hover-light-yellow:focus { - color: #fbf1a9; } + color: #fbf1a9; +} .hover-purple:hover, .hover-purple:focus { - color: #5e2ca5; } + color: #5e2ca5; +} .hover-light-purple:hover, .hover-light-purple:focus { - color: #a463f2; } + color: #a463f2; +} .hover-dark-pink:hover, .hover-dark-pink:focus { - color: #d5008f; } + color: #d5008f; +} .hover-hot-pink:hover, .hover-hot-pink:focus { - color: #ff41b4; } + color: #ff41b4; +} .hover-pink:hover, .hover-pink:focus { - color: #ff80cc; } + color: #ff80cc; +} .hover-light-pink:hover, .hover-light-pink:focus { - color: #ffa3d7; } + color: #ffa3d7; +} .hover-dark-green:hover, .hover-dark-green:focus { - color: #137752; } + color: #137752; +} .hover-green:hover, .hover-green:focus { - color: #19a974; } + color: #19a974; +} .hover-light-green:hover, .hover-light-green:focus { - color: #9eebcf; } + color: #9eebcf; +} .hover-navy:hover, .hover-navy:focus { - color: #001b44; } + color: #001b44; +} .hover-dark-blue:hover, .hover-dark-blue:focus { - color: #00449e; } + color: #00449e; +} .hover-blue:hover, .hover-blue:focus { - color: #357edd; } + color: #357edd; +} .hover-light-blue:hover, .hover-light-blue:focus { - color: #96ccff; } + color: #96ccff; +} .hover-lightest-blue:hover, .hover-lightest-blue:focus { - color: #cdecff; } + color: #cdecff; +} .hover-washed-blue:hover, .hover-washed-blue:focus { - color: #f6fffe; } + color: #f6fffe; +} .hover-washed-green:hover, .hover-washed-green:focus { - color: #e8fdf5; } + color: #e8fdf5; +} .hover-washed-yellow:hover, .hover-washed-yellow:focus { - color: #fffceb; } + color: #fffceb; +} .hover-washed-red:hover, .hover-washed-red:focus { - color: #ffdfdf; } + color: #ffdfdf; +} .hover-bg-dark-red:hover, .hover-bg-dark-red:focus { - background-color: #e7040f; } + background-color: #e7040f; +} .hover-bg-red:hover, .hover-bg-red:focus { - background-color: #ff4136; } + background-color: #ff4136; +} .hover-bg-light-red:hover, .hover-bg-light-red:focus { - background-color: #ff725c; } + background-color: #ff725c; +} .hover-bg-orange:hover, .hover-bg-orange:focus { - background-color: #ff6300; } + background-color: #ff6300; +} .hover-bg-gold:hover, .hover-bg-gold:focus { - background-color: #ffb700; } + background-color: #ffb700; +} .hover-bg-yellow:hover, .hover-bg-yellow:focus { - background-color: #ffd700; } + background-color: #ffd700; +} .hover-bg-light-yellow:hover, .hover-bg-light-yellow:focus { - background-color: #fbf1a9; } + background-color: #fbf1a9; +} .hover-bg-purple:hover, .hover-bg-purple:focus { - background-color: #5e2ca5; } + background-color: #5e2ca5; +} .hover-bg-light-purple:hover, .hover-bg-light-purple:focus { - background-color: #a463f2; } + background-color: #a463f2; +} .hover-bg-dark-pink:hover, .hover-bg-dark-pink:focus { - background-color: #d5008f; } + background-color: #d5008f; +} .hover-bg-hot-pink:hover, .hover-bg-hot-pink:focus { - background-color: #ff41b4; } + background-color: #ff41b4; +} .hover-bg-pink:hover, .hover-bg-pink:focus { - background-color: #ff80cc; } + background-color: #ff80cc; +} .hover-bg-light-pink:hover, .hover-bg-light-pink:focus { - background-color: #ffa3d7; } + background-color: #ffa3d7; +} .hover-bg-dark-green:hover, .hover-bg-dark-green:focus { - background-color: #137752; } + background-color: #137752; +} .hover-bg-green:hover, .hover-bg-green:focus { - background-color: #19a974; } + background-color: #19a974; +} .hover-bg-light-green:hover, .hover-bg-light-green:focus { - background-color: #9eebcf; } + background-color: #9eebcf; +} .hover-bg-navy:hover, .hover-bg-navy:focus { - background-color: #001b44; } + background-color: #001b44; +} .hover-bg-dark-blue:hover, .hover-bg-dark-blue:focus { - background-color: #00449e; } + background-color: #00449e; +} .hover-bg-blue:hover, .hover-bg-blue:focus { - background-color: #357edd; } + background-color: #357edd; +} .hover-bg-light-blue:hover, .hover-bg-light-blue:focus { - background-color: #96ccff; } + background-color: #96ccff; +} .hover-bg-lightest-blue:hover, .hover-bg-lightest-blue:focus { - background-color: #cdecff; } + background-color: #cdecff; +} .hover-bg-washed-blue:hover, .hover-bg-washed-blue:focus { - background-color: #f6fffe; } + background-color: #f6fffe; +} .hover-bg-washed-green:hover, .hover-bg-washed-green:focus { - background-color: #e8fdf5; } + background-color: #e8fdf5; +} .hover-bg-washed-yellow:hover, .hover-bg-washed-yellow:focus { - background-color: #fffceb; } + background-color: #fffceb; +} .hover-bg-washed-red:hover, .hover-bg-washed-red:focus { - background-color: #ffdfdf; } + background-color: #ffdfdf; +} .hover-bg-inherit:hover, .hover-bg-inherit:focus { - background-color: inherit; } + background-color: inherit; +} /* Variables */ /* @@ -4594,1174 +6690,1992 @@ code, .code { */ .pa0 { - padding: 0; } + padding: 0; +} .pa1 { - padding: 0.25rem; } + padding: 0.25rem; +} -.pa2, .tab, figure, header .root-item > a, header .submenu > a { - padding: 0.5rem; } +.pa2, +.tab, +figure, +header .root-item>a, +header .submenu>a { + padding: 0.5rem; +} .pa3 { - padding: 1rem; } + padding: 1rem; +} .pa4 { - padding: 2rem; } + padding: 2rem; +} .pa5 { - padding: 4rem; } + padding: 4rem; +} .pa6 { - padding: 8rem; } + padding: 8rem; +} .pa7 { - padding: 16rem; } + padding: 16rem; +} .pl0 { - padding-left: 0; } + padding-left: 0; +} .pl1 { - padding-left: 0.25rem; } + padding-left: 0.25rem; +} -.pl2, blockquote { - padding-left: 0.5rem; } +.pl2, +blockquote { + padding-left: 0.5rem; +} .pl3 { - padding-left: 1rem; } + padding-left: 1rem; +} .pl4 { - padding-left: 2rem; } + padding-left: 2rem; +} .pl5 { - padding-left: 4rem; } + padding-left: 4rem; +} .pl6 { - padding-left: 8rem; } + padding-left: 8rem; +} .pl7 { - padding-left: 16rem; } + padding-left: 16rem; +} -.pr0, .edit-form .edit-form-row > :first-child { - padding-right: 0; } +.pr0, +.edit-form .edit-form-row> :first-child { + padding-right: 0; +} .pr1 { - padding-right: 0.25rem; } + padding-right: 0.25rem; +} .pr2 { - padding-right: 0.5rem; } + padding-right: 0.5rem; +} .pr3 { - padding-right: 1rem; } + padding-right: 1rem; +} .pr4 { - padding-right: 2rem; } + padding-right: 2rem; +} .pr5 { - padding-right: 4rem; } + padding-right: 4rem; +} .pr6 { - padding-right: 8rem; } + padding-right: 8rem; +} .pr7 { - padding-right: 16rem; } + padding-right: 16rem; +} .pb0 { - padding-bottom: 0; } + padding-bottom: 0; +} -.pb1, .edit-form .edit-form-row > :first-child { - padding-bottom: 0.25rem; } +.pb1, +.edit-form .edit-form-row> :first-child { + padding-bottom: 0.25rem; +} .pb2 { - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; +} .pb3 { - padding-bottom: 1rem; } + padding-bottom: 1rem; +} .pb4 { - padding-bottom: 2rem; } + padding-bottom: 2rem; +} .pb5 { - padding-bottom: 4rem; } + padding-bottom: 4rem; +} .pb6 { - padding-bottom: 8rem; } + padding-bottom: 8rem; +} .pb7 { - padding-bottom: 16rem; } + padding-bottom: 16rem; +} .pt0 { - padding-top: 0; } + padding-top: 0; +} .pt1 { - padding-top: 0.25rem; } + padding-top: 0.25rem; +} .pt2 { - padding-top: 0.5rem; } + padding-top: 0.5rem; +} .pt3 { - padding-top: 1rem; } + padding-top: 1rem; +} .pt4 { - padding-top: 2rem; } + padding-top: 2rem; +} .pt5 { - padding-top: 4rem; } + padding-top: 4rem; +} .pt6 { - padding-top: 8rem; } + padding-top: 8rem; +} .pt7 { - padding-top: 16rem; } + padding-top: 16rem; +} -.pv0, .pagination .button { +.pv0, +.pagination .button { padding-top: 0; - padding-bottom: 0; } + padding-bottom: 0; +} .pv1, .optionbar .options button, .optionbar .options .button, .optionbar .options input[type=button], -.optionbar .options input[type=submit], .post-content th, .post-content td, figure figcaption, +.optionbar .options input[type=submit], +.post-content th, +.post-content td, +figure figcaption, button.button-small, .button.button-small, input.button-small[type=button], input.button-small[type=submit] { padding-top: 0.25rem; - padding-bottom: 0.25rem; } + padding-bottom: 0.25rem; +} -.pv2, .tab-bar .tab-button, +.pv2, +.tab-bar .tab-button, button:not(.button-small), .button:not(.button-small), input[type=button]:not(.button-small), -input[type=submit]:not(.button-small), .notice { +input[type=submit]:not(.button-small), +.notice { padding-top: 0.5rem; - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; +} .pv3 { padding-top: 1rem; - padding-bottom: 1rem; } + padding-bottom: 1rem; +} .pv4 { padding-top: 2rem; - padding-bottom: 2rem; } + padding-bottom: 2rem; +} .pv5 { padding-top: 4rem; - padding-bottom: 4rem; } + padding-bottom: 4rem; +} .pv6 { padding-top: 8rem; - padding-bottom: 8rem; } + padding-bottom: 8rem; +} .pv7 { padding-top: 16rem; - padding-bottom: 16rem; } + padding-bottom: 16rem; +} .ph0 { padding-left: 0; - padding-right: 0; } + padding-right: 0; +} .ph1 { padding-left: 0.25rem; - padding-right: 0.25rem; } + padding-right: 0.25rem; +} .ph2, .optionbar .options button, .optionbar .options .button, .optionbar .options input[type=button], -.optionbar .options input[type=submit], .pagination .button, .post-content th, .post-content td, +.optionbar .options input[type=submit], +.pagination .button, +.post-content th, +.post-content td, button.button-small, .button.button-small, input.button-small[type=button], input.button-small[type=submit] { padding-left: 0.5rem; - padding-right: 0.5rem; } + padding-right: 0.5rem; +} -.ph3, .tab-bar .tab-button, +.ph3, +.tab-bar .tab-button, button:not(.button-small), .button:not(.button-small), input[type=button]:not(.button-small), -input[type=submit]:not(.button-small), .notice { +input[type=submit]:not(.button-small), +.notice { padding-left: 1rem; - padding-right: 1rem; } + padding-right: 1rem; +} .ph4 { padding-left: 2rem; - padding-right: 2rem; } + padding-right: 2rem; +} .ph5 { padding-left: 4rem; - padding-right: 4rem; } + padding-right: 4rem; +} .ph6 { padding-left: 8rem; - padding-right: 8rem; } + padding-right: 8rem; +} .ph7 { padding-left: 16rem; - padding-right: 16rem; } + padding-right: 16rem; +} -.ma0, .thread { - margin: 0; } +.ma0, +.thread { + margin: 0; +} .ma1 { - margin: 0.25rem; } + margin: 0.25rem; +} .ma2 { - margin: 0.5rem; } + margin: 0.5rem; +} .ma3 { - margin: 1rem; } + margin: 1rem; +} .ma4 { - margin: 2rem; } + margin: 2rem; +} .ma5 { - margin: 4rem; } + margin: 4rem; +} .ma6 { - margin: 8rem; } + margin: 8rem; +} .ma7 { - margin: 16rem; } + margin: 16rem; +} .ml0 { - margin-left: 0; } + margin-left: 0; +} .ml1 { - margin-left: 0.25rem; } + margin-left: 0.25rem; +} -.ml2, blockquote { - margin-left: 0.5rem; } +.ml2, +blockquote { + margin-left: 0.5rem; +} .ml3 { - margin-left: 1rem; } + margin-left: 1rem; +} .ml4 { - margin-left: 2rem; } + margin-left: 2rem; +} .ml5 { - margin-left: 4rem; } + margin-left: 4rem; +} .ml6 { - margin-left: 8rem; } + margin-left: 8rem; +} .ml7 { - margin-left: 16rem; } + margin-left: 16rem; +} -.mr0, blockquote { - margin-right: 0; } +.mr0, +blockquote { + margin-right: 0; +} .mr1 { - margin-right: 0.25rem; } + margin-right: 0.25rem; +} .mr2 { - margin-right: 0.5rem; } + margin-right: 0.5rem; +} .mr3 { - margin-right: 1rem; } + margin-right: 1rem; +} .mr4 { - margin-right: 2rem; } + margin-right: 2rem; +} .mr5 { - margin-right: 4rem; } + margin-right: 4rem; +} .mr6 { - margin-right: 8rem; } + margin-right: 8rem; +} .mr7 { - margin-right: 16rem; } + margin-right: 16rem; +} .mb0 { - margin-bottom: 0; } + margin-bottom: 0; +} .mb1 { - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; +} .mb2 { - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; +} .mb3 { - margin-bottom: 1rem; } + margin-bottom: 1rem; +} .mb4 { - margin-bottom: 2rem; } + margin-bottom: 2rem; +} .mb5 { - margin-bottom: 4rem; } + margin-bottom: 4rem; +} .mb6 { - margin-bottom: 8rem; } + margin-bottom: 8rem; +} .mb7 { - margin-bottom: 16rem; } + margin-bottom: 16rem; +} .mt0 { - margin-top: 0; } + margin-top: 0; +} .mt1 { - margin-top: 0.25rem; } + margin-top: 0.25rem; +} .mt2 { - margin-top: 0.5rem; } + margin-top: 0.5rem; +} .mt3 { - margin-top: 1rem; } + margin-top: 1rem; +} .mt4 { - margin-top: 2rem; } + margin-top: 2rem; +} .mt5 { - margin-top: 4rem; } + margin-top: 4rem; +} .mt6 { - margin-top: 8rem; } + margin-top: 8rem; +} .mt7 { - margin-top: 16rem; } + margin-top: 16rem; +} .mv0 { margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; +} .mv1 { margin-top: 0.25rem; - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; +} -.mv2, .post-content table, figure { +.mv2, +.post-content table, +figure { margin-top: 0.5rem; - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; +} -.mv3, hr, .edit-form .edit-form-row { +.mv3, +hr, +.edit-form .edit-form-row { margin-top: 1rem; - margin-bottom: 1rem; } + margin-bottom: 1rem; +} .mv4 { margin-top: 2rem; - margin-bottom: 2rem; } + margin-bottom: 2rem; +} .mv5 { margin-top: 4rem; - margin-bottom: 4rem; } + margin-bottom: 4rem; +} .mv6 { margin-top: 8rem; - margin-bottom: 8rem; } + margin-bottom: 8rem; +} .mv7 { margin-top: 16rem; - margin-bottom: 16rem; } + margin-bottom: 16rem; +} -.mh0, figure { +.mh0, +figure { margin-left: 0; - margin-right: 0; } + margin-right: 0; +} .mh1 { margin-left: 0.25rem; - margin-right: 0.25rem; } + margin-right: 0.25rem; +} .mh2 { margin-left: 0.5rem; - margin-right: 0.5rem; } + margin-right: 0.5rem; +} -.mh3, .post-content hr { +.mh3, +.post-content hr { margin-left: 1rem; - margin-right: 1rem; } + margin-right: 1rem; +} .mh4 { margin-left: 2rem; - margin-right: 2rem; } + margin-right: 2rem; +} .mh5 { margin-left: 4rem; - margin-right: 4rem; } + margin-right: 4rem; +} .mh6 { margin-left: 8rem; - margin-right: 8rem; } + margin-right: 8rem; +} .mh7 { margin-left: 16rem; - margin-right: 16rem; } + margin-right: 16rem; +} @media screen and (min-width: 35em) { .pa0-ns { - padding: 0; } + padding: 0; + } + .pa1-ns { - padding: 0.25rem; } + padding: 0.25rem; + } + .pa2-ns { - padding: 0.5rem; } - .pa3-ns, figure { - padding: 1rem; } + padding: 0.5rem; + } + + .pa3-ns, + figure { + padding: 1rem; + } + .pa4-ns { - padding: 2rem; } + padding: 2rem; + } + .pa5-ns { - padding: 4rem; } + padding: 4rem; + } + .pa6-ns { - padding: 8rem; } + padding: 8rem; + } + .pa7-ns { - padding: 16rem; } + padding: 16rem; + } + .pl0-ns { - padding-left: 0; } + padding-left: 0; + } + .pl1-ns { - padding-left: 0.25rem; } + padding-left: 0.25rem; + } + .pl2-ns { - padding-left: 0.5rem; } + padding-left: 0.5rem; + } + .pl3-ns { - padding-left: 1rem; } + padding-left: 1rem; + } + .pl4-ns { - padding-left: 2rem; } + padding-left: 2rem; + } + .pl5-ns { - padding-left: 4rem; } + padding-left: 4rem; + } + .pl6-ns { - padding-left: 8rem; } + padding-left: 8rem; + } + .pl7-ns { - padding-left: 16rem; } + padding-left: 16rem; + } + .pr0-ns { - padding-right: 0; } + padding-right: 0; + } + .pr1-ns { - padding-right: 0.25rem; } - .pr2-ns, .edit-form .edit-form-row > :first-child { - padding-right: 0.5rem; } + padding-right: 0.25rem; + } + + .pr2-ns, + .edit-form .edit-form-row> :first-child { + padding-right: 0.5rem; + } + .pr3-ns { - padding-right: 1rem; } + padding-right: 1rem; + } + .pr4-ns { - padding-right: 2rem; } + padding-right: 2rem; + } + .pr5-ns { - padding-right: 4rem; } + padding-right: 4rem; + } + .pr6-ns { - padding-right: 8rem; } + padding-right: 8rem; + } + .pr7-ns { - padding-right: 16rem; } - .pb0-ns, .edit-form .edit-form-row > :first-child { - padding-bottom: 0; } + padding-right: 16rem; + } + + .pb0-ns, + .edit-form .edit-form-row> :first-child { + padding-bottom: 0; + } + .pb1-ns { - padding-bottom: 0.25rem; } + padding-bottom: 0.25rem; + } + .pb2-ns { - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; + } + .pb3-ns { - padding-bottom: 1rem; } + padding-bottom: 1rem; + } + .pb4-ns { - padding-bottom: 2rem; } + padding-bottom: 2rem; + } + .pb5-ns { - padding-bottom: 4rem; } + padding-bottom: 4rem; + } + .pb6-ns { - padding-bottom: 8rem; } + padding-bottom: 8rem; + } + .pb7-ns { - padding-bottom: 16rem; } + padding-bottom: 16rem; + } + .pt0-ns { - padding-top: 0; } + padding-top: 0; + } + .pt1-ns { - padding-top: 0.25rem; } + padding-top: 0.25rem; + } + .pt2-ns { - padding-top: 0.5rem; } + padding-top: 0.5rem; + } + .pt3-ns { - padding-top: 1rem; } + padding-top: 1rem; + } + .pt4-ns { - padding-top: 2rem; } + padding-top: 2rem; + } + .pt5-ns { - padding-top: 4rem; } + padding-top: 4rem; + } + .pt6-ns { - padding-top: 8rem; } + padding-top: 8rem; + } + .pt7-ns { - padding-top: 16rem; } + padding-top: 16rem; + } + .pv0-ns { padding-top: 0; - padding-bottom: 0; } + padding-bottom: 0; + } + .pv1-ns { padding-top: 0.25rem; - padding-bottom: 0.25rem; } + padding-bottom: 0.25rem; + } + .pv2-ns, .optionbar .options button, .optionbar .options .button, .optionbar .options input[type=button], - .optionbar .options input[type=submit], figure figcaption { + .optionbar .options input[type=submit], + figure figcaption { padding-top: 0.5rem; - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; + } + .pv3-ns { padding-top: 1rem; - padding-bottom: 1rem; } + padding-bottom: 1rem; + } + .pv4-ns { padding-top: 2rem; - padding-bottom: 2rem; } + padding-bottom: 2rem; + } + .pv5-ns { padding-top: 4rem; - padding-bottom: 4rem; } + padding-bottom: 4rem; + } + .pv6-ns { padding-top: 8rem; - padding-bottom: 8rem; } + padding-bottom: 8rem; + } + .pv7-ns { padding-top: 16rem; - padding-bottom: 16rem; } + padding-bottom: 16rem; + } + .ph0-ns { padding-left: 0; - padding-right: 0; } + padding-right: 0; + } + .ph1-ns { padding-left: 0.25rem; - padding-right: 0.25rem; } + padding-right: 0.25rem; + } + .ph2-ns { padding-left: 0.5rem; - padding-right: 0.5rem; } + padding-right: 0.5rem; + } + .ph3-ns { padding-left: 1rem; - padding-right: 1rem; } + padding-right: 1rem; + } + .ph4-ns { padding-left: 2rem; - padding-right: 2rem; } + padding-right: 2rem; + } + .ph5-ns { padding-left: 4rem; - padding-right: 4rem; } + padding-right: 4rem; + } + .ph6-ns { padding-left: 8rem; - padding-right: 8rem; } + padding-right: 8rem; + } + .ph7-ns { padding-left: 16rem; - padding-right: 16rem; } + padding-right: 16rem; + } + .ma0-ns { - margin: 0; } + margin: 0; + } + .ma1-ns { - margin: 0.25rem; } + margin: 0.25rem; + } + .ma2-ns { - margin: 0.5rem; } + margin: 0.5rem; + } + .ma3-ns { - margin: 1rem; } + margin: 1rem; + } + .ma4-ns { - margin: 2rem; } + margin: 2rem; + } + .ma5-ns { - margin: 4rem; } + margin: 4rem; + } + .ma6-ns { - margin: 8rem; } + margin: 8rem; + } + .ma7-ns { - margin: 16rem; } + margin: 16rem; + } + .ml0-ns { - margin-left: 0; } + margin-left: 0; + } + .ml1-ns { - margin-left: 0.25rem; } + margin-left: 0.25rem; + } + .ml2-ns { - margin-left: 0.5rem; } + margin-left: 0.5rem; + } + .ml3-ns { - margin-left: 1rem; } + margin-left: 1rem; + } + .ml4-ns { - margin-left: 2rem; } + margin-left: 2rem; + } + .ml5-ns { - margin-left: 4rem; } + margin-left: 4rem; + } + .ml6-ns { - margin-left: 8rem; } + margin-left: 8rem; + } + .ml7-ns { - margin-left: 16rem; } + margin-left: 16rem; + } + .mr0-ns { - margin-right: 0; } + margin-right: 0; + } + .mr1-ns { - margin-right: 0.25rem; } + margin-right: 0.25rem; + } + .mr2-ns { - margin-right: 0.5rem; } + margin-right: 0.5rem; + } + .mr3-ns { - margin-right: 1rem; } + margin-right: 1rem; + } + .mr4-ns { - margin-right: 2rem; } + margin-right: 2rem; + } + .mr5-ns { - margin-right: 4rem; } + margin-right: 4rem; + } + .mr6-ns { - margin-right: 8rem; } + margin-right: 8rem; + } + .mr7-ns { - margin-right: 16rem; } + margin-right: 16rem; + } + .mb0-ns { - margin-bottom: 0; } + margin-bottom: 0; + } + .mb1-ns { - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; + } + .mb2-ns { - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; + } + .mb3-ns { - margin-bottom: 1rem; } + margin-bottom: 1rem; + } + .mb4-ns { - margin-bottom: 2rem; } + margin-bottom: 2rem; + } + .mb5-ns { - margin-bottom: 4rem; } + margin-bottom: 4rem; + } + .mb6-ns { - margin-bottom: 8rem; } + margin-bottom: 8rem; + } + .mb7-ns { - margin-bottom: 16rem; } + margin-bottom: 16rem; + } + .mt0-ns { - margin-top: 0; } + margin-top: 0; + } + .mt1-ns { - margin-top: 0.25rem; } + margin-top: 0.25rem; + } + .mt2-ns { - margin-top: 0.5rem; } + margin-top: 0.5rem; + } + .mt3-ns { - margin-top: 1rem; } + margin-top: 1rem; + } + .mt4-ns { - margin-top: 2rem; } + margin-top: 2rem; + } + .mt5-ns { - margin-top: 4rem; } + margin-top: 4rem; + } + .mt6-ns { - margin-top: 8rem; } + margin-top: 8rem; + } + .mt7-ns { - margin-top: 16rem; } + margin-top: 16rem; + } + .mv0-ns { margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; + } + .mv1-ns { margin-top: 0.25rem; - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; + } + .mv2-ns { margin-top: 0.5rem; - margin-bottom: 0.5rem; } - .mv3-ns, figure { + margin-bottom: 0.5rem; + } + + .mv3-ns, + figure { margin-top: 1rem; - margin-bottom: 1rem; } + margin-bottom: 1rem; + } + .mv4-ns { margin-top: 2rem; - margin-bottom: 2rem; } + margin-bottom: 2rem; + } + .mv5-ns { margin-top: 4rem; - margin-bottom: 4rem; } + margin-bottom: 4rem; + } + .mv6-ns { margin-top: 8rem; - margin-bottom: 8rem; } + margin-bottom: 8rem; + } + .mv7-ns { margin-top: 16rem; - margin-bottom: 16rem; } + margin-bottom: 16rem; + } + .mh0-ns { margin-left: 0; - margin-right: 0; } + margin-right: 0; + } + .mh1-ns { margin-left: 0.25rem; - margin-right: 0.25rem; } + margin-right: 0.25rem; + } + .mh2-ns { margin-left: 0.5rem; - margin-right: 0.5rem; } + margin-right: 0.5rem; + } + .mh3-ns { margin-left: 1rem; - margin-right: 1rem; } + margin-right: 1rem; + } + .mh4-ns { margin-left: 2rem; - margin-right: 2rem; } + margin-right: 2rem; + } + .mh5-ns { margin-left: 4rem; - margin-right: 4rem; } + margin-right: 4rem; + } + .mh6-ns { margin-left: 8rem; - margin-right: 8rem; } + margin-right: 8rem; + } + .mh7-ns { margin-left: 16rem; - margin-right: 16rem; } } + margin-right: 16rem; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .pa0-m { - padding: 0; } + padding: 0; + } + .pa1-m { - padding: 0.25rem; } + padding: 0.25rem; + } + .pa2-m { - padding: 0.5rem; } + padding: 0.5rem; + } + .pa3-m { - padding: 1rem; } + padding: 1rem; + } + .pa4-m { - padding: 2rem; } + padding: 2rem; + } + .pa5-m { - padding: 4rem; } + padding: 4rem; + } + .pa6-m { - padding: 8rem; } + padding: 8rem; + } + .pa7-m { - padding: 16rem; } + padding: 16rem; + } + .pl0-m { - padding-left: 0; } + padding-left: 0; + } + .pl1-m { - padding-left: 0.25rem; } + padding-left: 0.25rem; + } + .pl2-m { - padding-left: 0.5rem; } + padding-left: 0.5rem; + } + .pl3-m { - padding-left: 1rem; } + padding-left: 1rem; + } + .pl4-m { - padding-left: 2rem; } + padding-left: 2rem; + } + .pl5-m { - padding-left: 4rem; } + padding-left: 4rem; + } + .pl6-m { - padding-left: 8rem; } + padding-left: 8rem; + } + .pl7-m { - padding-left: 16rem; } + padding-left: 16rem; + } + .pr0-m { - padding-right: 0; } + padding-right: 0; + } + .pr1-m { - padding-right: 0.25rem; } + padding-right: 0.25rem; + } + .pr2-m { - padding-right: 0.5rem; } + padding-right: 0.5rem; + } + .pr3-m { - padding-right: 1rem; } + padding-right: 1rem; + } + .pr4-m { - padding-right: 2rem; } + padding-right: 2rem; + } + .pr5-m { - padding-right: 4rem; } + padding-right: 4rem; + } + .pr6-m { - padding-right: 8rem; } + padding-right: 8rem; + } + .pr7-m { - padding-right: 16rem; } + padding-right: 16rem; + } + .pb0-m { - padding-bottom: 0; } + padding-bottom: 0; + } + .pb1-m { - padding-bottom: 0.25rem; } + padding-bottom: 0.25rem; + } + .pb2-m { - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; + } + .pb3-m { - padding-bottom: 1rem; } + padding-bottom: 1rem; + } + .pb4-m { - padding-bottom: 2rem; } + padding-bottom: 2rem; + } + .pb5-m { - padding-bottom: 4rem; } + padding-bottom: 4rem; + } + .pb6-m { - padding-bottom: 8rem; } + padding-bottom: 8rem; + } + .pb7-m { - padding-bottom: 16rem; } + padding-bottom: 16rem; + } + .pt0-m { - padding-top: 0; } + padding-top: 0; + } + .pt1-m { - padding-top: 0.25rem; } + padding-top: 0.25rem; + } + .pt2-m { - padding-top: 0.5rem; } + padding-top: 0.5rem; + } + .pt3-m { - padding-top: 1rem; } + padding-top: 1rem; + } + .pt4-m { - padding-top: 2rem; } + padding-top: 2rem; + } + .pt5-m { - padding-top: 4rem; } + padding-top: 4rem; + } + .pt6-m { - padding-top: 8rem; } + padding-top: 8rem; + } + .pt7-m { - padding-top: 16rem; } + padding-top: 16rem; + } + .pv0-m { padding-top: 0; - padding-bottom: 0; } + padding-bottom: 0; + } + .pv1-m { padding-top: 0.25rem; - padding-bottom: 0.25rem; } + padding-bottom: 0.25rem; + } + .pv2-m { padding-top: 0.5rem; - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; + } + .pv3-m { padding-top: 1rem; - padding-bottom: 1rem; } + padding-bottom: 1rem; + } + .pv4-m { padding-top: 2rem; - padding-bottom: 2rem; } + padding-bottom: 2rem; + } + .pv5-m { padding-top: 4rem; - padding-bottom: 4rem; } + padding-bottom: 4rem; + } + .pv6-m { padding-top: 8rem; - padding-bottom: 8rem; } + padding-bottom: 8rem; + } + .pv7-m { padding-top: 16rem; - padding-bottom: 16rem; } + padding-bottom: 16rem; + } + .ph0-m { padding-left: 0; - padding-right: 0; } + padding-right: 0; + } + .ph1-m { padding-left: 0.25rem; - padding-right: 0.25rem; } + padding-right: 0.25rem; + } + .ph2-m { padding-left: 0.5rem; - padding-right: 0.5rem; } + padding-right: 0.5rem; + } + .ph3-m { padding-left: 1rem; - padding-right: 1rem; } + padding-right: 1rem; + } + .ph4-m { padding-left: 2rem; - padding-right: 2rem; } + padding-right: 2rem; + } + .ph5-m { padding-left: 4rem; - padding-right: 4rem; } + padding-right: 4rem; + } + .ph6-m { padding-left: 8rem; - padding-right: 8rem; } + padding-right: 8rem; + } + .ph7-m { padding-left: 16rem; - padding-right: 16rem; } + padding-right: 16rem; + } + .ma0-m { - margin: 0; } + margin: 0; + } + .ma1-m { - margin: 0.25rem; } + margin: 0.25rem; + } + .ma2-m { - margin: 0.5rem; } + margin: 0.5rem; + } + .ma3-m { - margin: 1rem; } + margin: 1rem; + } + .ma4-m { - margin: 2rem; } + margin: 2rem; + } + .ma5-m { - margin: 4rem; } + margin: 4rem; + } + .ma6-m { - margin: 8rem; } + margin: 8rem; + } + .ma7-m { - margin: 16rem; } + margin: 16rem; + } + .ml0-m { - margin-left: 0; } + margin-left: 0; + } + .ml1-m { - margin-left: 0.25rem; } + margin-left: 0.25rem; + } + .ml2-m { - margin-left: 0.5rem; } + margin-left: 0.5rem; + } + .ml3-m { - margin-left: 1rem; } + margin-left: 1rem; + } + .ml4-m { - margin-left: 2rem; } + margin-left: 2rem; + } + .ml5-m { - margin-left: 4rem; } + margin-left: 4rem; + } + .ml6-m { - margin-left: 8rem; } + margin-left: 8rem; + } + .ml7-m { - margin-left: 16rem; } + margin-left: 16rem; + } + .mr0-m { - margin-right: 0; } + margin-right: 0; + } + .mr1-m { - margin-right: 0.25rem; } + margin-right: 0.25rem; + } + .mr2-m { - margin-right: 0.5rem; } + margin-right: 0.5rem; + } + .mr3-m { - margin-right: 1rem; } + margin-right: 1rem; + } + .mr4-m { - margin-right: 2rem; } + margin-right: 2rem; + } + .mr5-m { - margin-right: 4rem; } + margin-right: 4rem; + } + .mr6-m { - margin-right: 8rem; } + margin-right: 8rem; + } + .mr7-m { - margin-right: 16rem; } + margin-right: 16rem; + } + .mb0-m { - margin-bottom: 0; } + margin-bottom: 0; + } + .mb1-m { - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; + } + .mb2-m { - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; + } + .mb3-m { - margin-bottom: 1rem; } + margin-bottom: 1rem; + } + .mb4-m { - margin-bottom: 2rem; } + margin-bottom: 2rem; + } + .mb5-m { - margin-bottom: 4rem; } + margin-bottom: 4rem; + } + .mb6-m { - margin-bottom: 8rem; } + margin-bottom: 8rem; + } + .mb7-m { - margin-bottom: 16rem; } + margin-bottom: 16rem; + } + .mt0-m { - margin-top: 0; } + margin-top: 0; + } + .mt1-m { - margin-top: 0.25rem; } + margin-top: 0.25rem; + } + .mt2-m { - margin-top: 0.5rem; } + margin-top: 0.5rem; + } + .mt3-m { - margin-top: 1rem; } + margin-top: 1rem; + } + .mt4-m { - margin-top: 2rem; } + margin-top: 2rem; + } + .mt5-m { - margin-top: 4rem; } + margin-top: 4rem; + } + .mt6-m { - margin-top: 8rem; } + margin-top: 8rem; + } + .mt7-m { - margin-top: 16rem; } + margin-top: 16rem; + } + .mv0-m { margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; + } + .mv1-m { margin-top: 0.25rem; - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; + } + .mv2-m { margin-top: 0.5rem; - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; + } + .mv3-m { margin-top: 1rem; - margin-bottom: 1rem; } + margin-bottom: 1rem; + } + .mv4-m { margin-top: 2rem; - margin-bottom: 2rem; } + margin-bottom: 2rem; + } + .mv5-m { margin-top: 4rem; - margin-bottom: 4rem; } + margin-bottom: 4rem; + } + .mv6-m { margin-top: 8rem; - margin-bottom: 8rem; } + margin-bottom: 8rem; + } + .mv7-m { margin-top: 16rem; - margin-bottom: 16rem; } + margin-bottom: 16rem; + } + .mh0-m { margin-left: 0; - margin-right: 0; } + margin-right: 0; + } + .mh1-m { margin-left: 0.25rem; - margin-right: 0.25rem; } + margin-right: 0.25rem; + } + .mh2-m { margin-left: 0.5rem; - margin-right: 0.5rem; } + margin-right: 0.5rem; + } + .mh3-m { margin-left: 1rem; - margin-right: 1rem; } + margin-right: 1rem; + } + .mh4-m { margin-left: 2rem; - margin-right: 2rem; } + margin-right: 2rem; + } + .mh5-m { margin-left: 4rem; - margin-right: 4rem; } + margin-right: 4rem; + } + .mh6-m { margin-left: 8rem; - margin-right: 8rem; } + margin-right: 8rem; + } + .mh7-m { margin-left: 16rem; - margin-right: 16rem; } } + margin-right: 16rem; + } +} @media screen and (min-width: 60em) { .pa0-l { - padding: 0; } + padding: 0; + } + .pa1-l { - padding: 0.25rem; } + padding: 0.25rem; + } + .pa2-l { - padding: 0.5rem; } + padding: 0.5rem; + } + .pa3-l { - padding: 1rem; } + padding: 1rem; + } + .pa4-l { - padding: 2rem; } + padding: 2rem; + } + .pa5-l { - padding: 4rem; } + padding: 4rem; + } + .pa6-l { - padding: 8rem; } + padding: 8rem; + } + .pa7-l { - padding: 16rem; } + padding: 16rem; + } + .pl0-l { - padding-left: 0; } + padding-left: 0; + } + .pl1-l { - padding-left: 0.25rem; } + padding-left: 0.25rem; + } + .pl2-l { - padding-left: 0.5rem; } + padding-left: 0.5rem; + } + .pl3-l { - padding-left: 1rem; } + padding-left: 1rem; + } + .pl4-l { - padding-left: 2rem; } + padding-left: 2rem; + } + .pl5-l { - padding-left: 4rem; } + padding-left: 4rem; + } + .pl6-l { - padding-left: 8rem; } + padding-left: 8rem; + } + .pl7-l { - padding-left: 16rem; } + padding-left: 16rem; + } + .pr0-l { - padding-right: 0; } + padding-right: 0; + } + .pr1-l { - padding-right: 0.25rem; } + padding-right: 0.25rem; + } + .pr2-l { - padding-right: 0.5rem; } + padding-right: 0.5rem; + } + .pr3-l { - padding-right: 1rem; } + padding-right: 1rem; + } + .pr4-l { - padding-right: 2rem; } + padding-right: 2rem; + } + .pr5-l { - padding-right: 4rem; } + padding-right: 4rem; + } + .pr6-l { - padding-right: 8rem; } + padding-right: 8rem; + } + .pr7-l { - padding-right: 16rem; } + padding-right: 16rem; + } + .pb0-l { - padding-bottom: 0; } + padding-bottom: 0; + } + .pb1-l { - padding-bottom: 0.25rem; } + padding-bottom: 0.25rem; + } + .pb2-l { - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; + } + .pb3-l { - padding-bottom: 1rem; } + padding-bottom: 1rem; + } + .pb4-l { - padding-bottom: 2rem; } + padding-bottom: 2rem; + } + .pb5-l { - padding-bottom: 4rem; } + padding-bottom: 4rem; + } + .pb6-l { - padding-bottom: 8rem; } + padding-bottom: 8rem; + } + .pb7-l { - padding-bottom: 16rem; } + padding-bottom: 16rem; + } + .pt0-l { - padding-top: 0; } + padding-top: 0; + } + .pt1-l { - padding-top: 0.25rem; } + padding-top: 0.25rem; + } + .pt2-l { - padding-top: 0.5rem; } + padding-top: 0.5rem; + } + .pt3-l { - padding-top: 1rem; } + padding-top: 1rem; + } + .pt4-l { - padding-top: 2rem; } + padding-top: 2rem; + } + .pt5-l { - padding-top: 4rem; } + padding-top: 4rem; + } + .pt6-l { - padding-top: 8rem; } + padding-top: 8rem; + } + .pt7-l { - padding-top: 16rem; } + padding-top: 16rem; + } + .pv0-l { padding-top: 0; - padding-bottom: 0; } + padding-bottom: 0; + } + .pv1-l { padding-top: 0.25rem; - padding-bottom: 0.25rem; } + padding-bottom: 0.25rem; + } + .pv2-l { padding-top: 0.5rem; - padding-bottom: 0.5rem; } + padding-bottom: 0.5rem; + } + .pv3-l { padding-top: 1rem; - padding-bottom: 1rem; } + padding-bottom: 1rem; + } + .pv4-l { padding-top: 2rem; - padding-bottom: 2rem; } + padding-bottom: 2rem; + } + .pv5-l { padding-top: 4rem; - padding-bottom: 4rem; } + padding-bottom: 4rem; + } + .pv6-l { padding-top: 8rem; - padding-bottom: 8rem; } + padding-bottom: 8rem; + } + .pv7-l { padding-top: 16rem; - padding-bottom: 16rem; } + padding-bottom: 16rem; + } + .ph0-l { padding-left: 0; - padding-right: 0; } + padding-right: 0; + } + .ph1-l { padding-left: 0.25rem; - padding-right: 0.25rem; } + padding-right: 0.25rem; + } + .ph2-l { padding-left: 0.5rem; - padding-right: 0.5rem; } - .ph3-l, header .root-item > a, header .submenu > a { + padding-right: 0.5rem; + } + + .ph3-l, + header .root-item>a, + header .submenu>a { padding-left: 1rem; - padding-right: 1rem; } + padding-right: 1rem; + } + .ph4-l { padding-left: 2rem; - padding-right: 2rem; } + padding-right: 2rem; + } + .ph5-l { padding-left: 4rem; - padding-right: 4rem; } + padding-right: 4rem; + } + .ph6-l { padding-left: 8rem; - padding-right: 8rem; } + padding-right: 8rem; + } + .ph7-l { padding-left: 16rem; - padding-right: 16rem; } + padding-right: 16rem; + } + .ma0-l { - margin: 0; } + margin: 0; + } + .ma1-l { - margin: 0.25rem; } + margin: 0.25rem; + } + .ma2-l { - margin: 0.5rem; } + margin: 0.5rem; + } + .ma3-l { - margin: 1rem; } + margin: 1rem; + } + .ma4-l { - margin: 2rem; } + margin: 2rem; + } + .ma5-l { - margin: 4rem; } + margin: 4rem; + } + .ma6-l { - margin: 8rem; } + margin: 8rem; + } + .ma7-l { - margin: 16rem; } + margin: 16rem; + } + .ml0-l { - margin-left: 0; } + margin-left: 0; + } + .ml1-l { - margin-left: 0.25rem; } + margin-left: 0.25rem; + } + .ml2-l { - margin-left: 0.5rem; } + margin-left: 0.5rem; + } + .ml3-l { - margin-left: 1rem; } + margin-left: 1rem; + } + .ml4-l { - margin-left: 2rem; } + margin-left: 2rem; + } + .ml5-l { - margin-left: 4rem; } + margin-left: 4rem; + } + .ml6-l { - margin-left: 8rem; } + margin-left: 8rem; + } + .ml7-l { - margin-left: 16rem; } + margin-left: 16rem; + } + .mr0-l { - margin-right: 0; } + margin-right: 0; + } + .mr1-l { - margin-right: 0.25rem; } + margin-right: 0.25rem; + } + .mr2-l { - margin-right: 0.5rem; } + margin-right: 0.5rem; + } + .mr3-l { - margin-right: 1rem; } + margin-right: 1rem; + } + .mr4-l { - margin-right: 2rem; } + margin-right: 2rem; + } + .mr5-l { - margin-right: 4rem; } + margin-right: 4rem; + } + .mr6-l { - margin-right: 8rem; } + margin-right: 8rem; + } + .mr7-l { - margin-right: 16rem; } + margin-right: 16rem; + } + .mb0-l { - margin-bottom: 0; } + margin-bottom: 0; + } + .mb1-l { - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; + } + .mb2-l { - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; + } + .mb3-l { - margin-bottom: 1rem; } + margin-bottom: 1rem; + } + .mb4-l { - margin-bottom: 2rem; } + margin-bottom: 2rem; + } + .mb5-l { - margin-bottom: 4rem; } + margin-bottom: 4rem; + } + .mb6-l { - margin-bottom: 8rem; } + margin-bottom: 8rem; + } + .mb7-l { - margin-bottom: 16rem; } + margin-bottom: 16rem; + } + .mt0-l { - margin-top: 0; } + margin-top: 0; + } + .mt1-l { - margin-top: 0.25rem; } + margin-top: 0.25rem; + } + .mt2-l { - margin-top: 0.5rem; } + margin-top: 0.5rem; + } + .mt3-l { - margin-top: 1rem; } + margin-top: 1rem; + } + .mt4-l { - margin-top: 2rem; } + margin-top: 2rem; + } + .mt5-l { - margin-top: 4rem; } + margin-top: 4rem; + } + .mt6-l { - margin-top: 8rem; } + margin-top: 8rem; + } + .mt7-l { - margin-top: 16rem; } + margin-top: 16rem; + } + .mv0-l { margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; + } + .mv1-l { margin-top: 0.25rem; - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; + } + .mv2-l { margin-top: 0.5rem; - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; + } + .mv3-l { margin-top: 1rem; - margin-bottom: 1rem; } + margin-bottom: 1rem; + } + .mv4-l { margin-top: 2rem; - margin-bottom: 2rem; } + margin-bottom: 2rem; + } + .mv5-l { margin-top: 4rem; - margin-bottom: 4rem; } + margin-bottom: 4rem; + } + .mv6-l { margin-top: 8rem; - margin-bottom: 8rem; } + margin-bottom: 8rem; + } + .mv7-l { margin-top: 16rem; - margin-bottom: 16rem; } + margin-bottom: 16rem; + } + .mh0-l { margin-left: 0; - margin-right: 0; } + margin-right: 0; + } + .mh1-l { margin-left: 0.25rem; - margin-right: 0.25rem; } + margin-right: 0.25rem; + } + .mh2-l { margin-left: 0.5rem; - margin-right: 0.5rem; } + margin-right: 0.5rem; + } + .mh3-l { margin-left: 1rem; - margin-right: 1rem; } + margin-right: 1rem; + } + .mh4-l { margin-left: 2rem; - margin-right: 2rem; } + margin-right: 2rem; + } + .mh5-l { margin-left: 4rem; - margin-right: 4rem; } + margin-right: 4rem; + } + .mh6-l { margin-left: 8rem; - margin-right: 8rem; } + margin-right: 8rem; + } + .mh7-l { margin-left: 16rem; - margin-right: 16rem; } } + margin-right: 16rem; + } +} /* NEGATIVE MARGINS @@ -5791,325 +8705,570 @@ input[type=submit]:not(.button-small), .notice { */ .na1 { - margin: -0.25rem; } + margin: -0.25rem; +} .na2 { - margin: -0.5rem; } + margin: -0.5rem; +} .na3 { - margin: -1rem; } + margin: -1rem; +} .na4 { - margin: -2rem; } + margin: -2rem; +} .na5 { - margin: -4rem; } + margin: -4rem; +} .na6 { - margin: -8rem; } + margin: -8rem; +} .na7 { - margin: -16rem; } + margin: -16rem; +} .nl1 { - margin-left: -0.25rem; } + margin-left: -0.25rem; +} .nl2 { - margin-left: -0.5rem; } + margin-left: -0.5rem; +} .nl3 { - margin-left: -1rem; } + margin-left: -1rem; +} .nl4 { - margin-left: -2rem; } + margin-left: -2rem; +} .nl5 { - margin-left: -4rem; } + margin-left: -4rem; +} .nl6 { - margin-left: -8rem; } + margin-left: -8rem; +} .nl7 { - margin-left: -16rem; } + margin-left: -16rem; +} .nr1 { - margin-right: -0.25rem; } + margin-right: -0.25rem; +} .nr2 { - margin-right: -0.5rem; } + margin-right: -0.5rem; +} .nr3 { - margin-right: -1rem; } + margin-right: -1rem; +} .nr4 { - margin-right: -2rem; } + margin-right: -2rem; +} .nr5 { - margin-right: -4rem; } + margin-right: -4rem; +} .nr6 { - margin-right: -8rem; } + margin-right: -8rem; +} .nr7 { - margin-right: -16rem; } + margin-right: -16rem; +} .nb1 { - margin-bottom: -0.25rem; } + margin-bottom: -0.25rem; +} .nb2 { - margin-bottom: -0.5rem; } + margin-bottom: -0.5rem; +} .nb3 { - margin-bottom: -1rem; } + margin-bottom: -1rem; +} .nb4 { - margin-bottom: -2rem; } + margin-bottom: -2rem; +} .nb5 { - margin-bottom: -4rem; } + margin-bottom: -4rem; +} .nb6 { - margin-bottom: -8rem; } + margin-bottom: -8rem; +} .nb7 { - margin-bottom: -16rem; } + margin-bottom: -16rem; +} .nt1 { - margin-top: -0.25rem; } + margin-top: -0.25rem; +} .nt2 { - margin-top: -0.5rem; } + margin-top: -0.5rem; +} .nt3 { - margin-top: -1rem; } + margin-top: -1rem; +} .nt4 { - margin-top: -2rem; } + margin-top: -2rem; +} .nt5 { - margin-top: -4rem; } + margin-top: -4rem; +} .nt6 { - margin-top: -8rem; } + margin-top: -8rem; +} .nt7 { - margin-top: -16rem; } + margin-top: -16rem; +} @media screen and (min-width: 35em) { .na1-ns { - margin: -0.25rem; } + margin: -0.25rem; + } + .na2-ns { - margin: -0.5rem; } + margin: -0.5rem; + } + .na3-ns { - margin: -1rem; } + margin: -1rem; + } + .na4-ns { - margin: -2rem; } + margin: -2rem; + } + .na5-ns { - margin: -4rem; } + margin: -4rem; + } + .na6-ns { - margin: -8rem; } + margin: -8rem; + } + .na7-ns { - margin: -16rem; } + margin: -16rem; + } + .nl1-ns { - margin-left: -0.25rem; } + margin-left: -0.25rem; + } + .nl2-ns { - margin-left: -0.5rem; } + margin-left: -0.5rem; + } + .nl3-ns { - margin-left: -1rem; } + margin-left: -1rem; + } + .nl4-ns { - margin-left: -2rem; } + margin-left: -2rem; + } + .nl5-ns { - margin-left: -4rem; } + margin-left: -4rem; + } + .nl6-ns { - margin-left: -8rem; } + margin-left: -8rem; + } + .nl7-ns { - margin-left: -16rem; } + margin-left: -16rem; + } + .nr1-ns { - margin-right: -0.25rem; } + margin-right: -0.25rem; + } + .nr2-ns { - margin-right: -0.5rem; } + margin-right: -0.5rem; + } + .nr3-ns { - margin-right: -1rem; } + margin-right: -1rem; + } + .nr4-ns { - margin-right: -2rem; } + margin-right: -2rem; + } + .nr5-ns { - margin-right: -4rem; } + margin-right: -4rem; + } + .nr6-ns { - margin-right: -8rem; } + margin-right: -8rem; + } + .nr7-ns { - margin-right: -16rem; } + margin-right: -16rem; + } + .nb1-ns { - margin-bottom: -0.25rem; } + margin-bottom: -0.25rem; + } + .nb2-ns { - margin-bottom: -0.5rem; } + margin-bottom: -0.5rem; + } + .nb3-ns { - margin-bottom: -1rem; } + margin-bottom: -1rem; + } + .nb4-ns { - margin-bottom: -2rem; } + margin-bottom: -2rem; + } + .nb5-ns { - margin-bottom: -4rem; } + margin-bottom: -4rem; + } + .nb6-ns { - margin-bottom: -8rem; } + margin-bottom: -8rem; + } + .nb7-ns { - margin-bottom: -16rem; } + margin-bottom: -16rem; + } + .nt1-ns { - margin-top: -0.25rem; } + margin-top: -0.25rem; + } + .nt2-ns { - margin-top: -0.5rem; } + margin-top: -0.5rem; + } + .nt3-ns { - margin-top: -1rem; } + margin-top: -1rem; + } + .nt4-ns { - margin-top: -2rem; } + margin-top: -2rem; + } + .nt5-ns { - margin-top: -4rem; } + margin-top: -4rem; + } + .nt6-ns { - margin-top: -8rem; } + margin-top: -8rem; + } + .nt7-ns { - margin-top: -16rem; } } + margin-top: -16rem; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .na1-m { - margin: -0.25rem; } + margin: -0.25rem; + } + .na2-m { - margin: -0.5rem; } + margin: -0.5rem; + } + .na3-m { - margin: -1rem; } + margin: -1rem; + } + .na4-m { - margin: -2rem; } + margin: -2rem; + } + .na5-m { - margin: -4rem; } + margin: -4rem; + } + .na6-m { - margin: -8rem; } + margin: -8rem; + } + .na7-m { - margin: -16rem; } + margin: -16rem; + } + .nl1-m { - margin-left: -0.25rem; } + margin-left: -0.25rem; + } + .nl2-m { - margin-left: -0.5rem; } + margin-left: -0.5rem; + } + .nl3-m { - margin-left: -1rem; } + margin-left: -1rem; + } + .nl4-m { - margin-left: -2rem; } + margin-left: -2rem; + } + .nl5-m { - margin-left: -4rem; } + margin-left: -4rem; + } + .nl6-m { - margin-left: -8rem; } + margin-left: -8rem; + } + .nl7-m { - margin-left: -16rem; } + margin-left: -16rem; + } + .nr1-m { - margin-right: -0.25rem; } + margin-right: -0.25rem; + } + .nr2-m { - margin-right: -0.5rem; } + margin-right: -0.5rem; + } + .nr3-m { - margin-right: -1rem; } + margin-right: -1rem; + } + .nr4-m { - margin-right: -2rem; } + margin-right: -2rem; + } + .nr5-m { - margin-right: -4rem; } + margin-right: -4rem; + } + .nr6-m { - margin-right: -8rem; } + margin-right: -8rem; + } + .nr7-m { - margin-right: -16rem; } + margin-right: -16rem; + } + .nb1-m { - margin-bottom: -0.25rem; } + margin-bottom: -0.25rem; + } + .nb2-m { - margin-bottom: -0.5rem; } + margin-bottom: -0.5rem; + } + .nb3-m { - margin-bottom: -1rem; } + margin-bottom: -1rem; + } + .nb4-m { - margin-bottom: -2rem; } + margin-bottom: -2rem; + } + .nb5-m { - margin-bottom: -4rem; } + margin-bottom: -4rem; + } + .nb6-m { - margin-bottom: -8rem; } + margin-bottom: -8rem; + } + .nb7-m { - margin-bottom: -16rem; } + margin-bottom: -16rem; + } + .nt1-m { - margin-top: -0.25rem; } + margin-top: -0.25rem; + } + .nt2-m { - margin-top: -0.5rem; } + margin-top: -0.5rem; + } + .nt3-m { - margin-top: -1rem; } + margin-top: -1rem; + } + .nt4-m { - margin-top: -2rem; } + margin-top: -2rem; + } + .nt5-m { - margin-top: -4rem; } + margin-top: -4rem; + } + .nt6-m { - margin-top: -8rem; } + margin-top: -8rem; + } + .nt7-m { - margin-top: -16rem; } } + margin-top: -16rem; + } +} @media screen and (min-width: 60em) { .na1-l { - margin: -0.25rem; } + margin: -0.25rem; + } + .na2-l { - margin: -0.5rem; } + margin: -0.5rem; + } + .na3-l { - margin: -1rem; } + margin: -1rem; + } + .na4-l { - margin: -2rem; } + margin: -2rem; + } + .na5-l { - margin: -4rem; } + margin: -4rem; + } + .na6-l { - margin: -8rem; } + margin: -8rem; + } + .na7-l { - margin: -16rem; } + margin: -16rem; + } + .nl1-l { - margin-left: -0.25rem; } + margin-left: -0.25rem; + } + .nl2-l { - margin-left: -0.5rem; } + margin-left: -0.5rem; + } + .nl3-l { - margin-left: -1rem; } + margin-left: -1rem; + } + .nl4-l { - margin-left: -2rem; } + margin-left: -2rem; + } + .nl5-l { - margin-left: -4rem; } + margin-left: -4rem; + } + .nl6-l { - margin-left: -8rem; } + margin-left: -8rem; + } + .nl7-l { - margin-left: -16rem; } + margin-left: -16rem; + } + .nr1-l { - margin-right: -0.25rem; } + margin-right: -0.25rem; + } + .nr2-l { - margin-right: -0.5rem; } + margin-right: -0.5rem; + } + .nr3-l { - margin-right: -1rem; } + margin-right: -1rem; + } + .nr4-l { - margin-right: -2rem; } + margin-right: -2rem; + } + .nr5-l { - margin-right: -4rem; } + margin-right: -4rem; + } + .nr6-l { - margin-right: -8rem; } + margin-right: -8rem; + } + .nr7-l { - margin-right: -16rem; } + margin-right: -16rem; + } + .nb1-l { - margin-bottom: -0.25rem; } + margin-bottom: -0.25rem; + } + .nb2-l { - margin-bottom: -0.5rem; } + margin-bottom: -0.5rem; + } + .nb3-l { - margin-bottom: -1rem; } + margin-bottom: -1rem; + } + .nb4-l { - margin-bottom: -2rem; } + margin-bottom: -2rem; + } + .nb5-l { - margin-bottom: -4rem; } + margin-bottom: -4rem; + } + .nb6-l { - margin-bottom: -8rem; } + margin-bottom: -8rem; + } + .nb7-l { - margin-bottom: -16rem; } + margin-bottom: -16rem; + } + .nt1-l { - margin-top: -0.25rem; } + margin-top: -0.25rem; + } + .nt2-l { - margin-top: -0.5rem; } + margin-top: -0.5rem; + } + .nt3-l { - margin-top: -1rem; } + margin-top: -1rem; + } + .nt4-l { - margin-top: -2rem; } + margin-top: -2rem; + } + .nt5-l { - margin-top: -4rem; } + margin-top: -4rem; + } + .nt6-l { - margin-top: -8rem; } + margin-top: -8rem; + } + .nt7-l { - margin-top: -16rem; } } + margin-top: -16rem; + } +} /* @@ -6119,25 +9278,32 @@ input[type=submit]:not(.button-small), .notice { */ .collapse { border-collapse: collapse; - border-spacing: 0; } + border-spacing: 0; +} .striped--light-silver:nth-child(odd) { - background-color: #aaa; } + background-color: #aaa; +} .striped--moon-gray:nth-child(odd) { - background-color: #ccc; } + background-color: #ccc; +} .striped--light-gray:nth-child(odd) { - background-color: #eee; } + background-color: #eee; +} .striped--near-white:nth-child(odd) { - background-color: #f4f4f4; } + background-color: #f4f4f4; +} .stripe-light:nth-child(odd) { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(255, 255, 255, 0.1); +} .stripe-dark:nth-child(odd) { - background-color: rgba(0, 0, 0, 0.1); } + background-color: rgba(0, 0, 0, 0.1); +} /* @@ -6152,37 +9318,58 @@ input[type=submit]:not(.button-small), .notice { */ .strike { - text-decoration: line-through; } + text-decoration: line-through; +} .underline { - text-decoration: underline; } + text-decoration: underline; +} .no-underline { - text-decoration: none; } + text-decoration: none; +} @media screen and (min-width: 35em) { .strike-ns { - text-decoration: line-through; } + text-decoration: line-through; + } + .underline-ns { - text-decoration: underline; } + text-decoration: underline; + } + .no-underline-ns { - text-decoration: none; } } + text-decoration: none; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .strike-m { - text-decoration: line-through; } + text-decoration: line-through; + } + .underline-m { - text-decoration: underline; } + text-decoration: underline; + } + .no-underline-m { - text-decoration: none; } } + text-decoration: none; + } +} @media screen and (min-width: 60em) { .strike-l { - text-decoration: line-through; } + text-decoration: line-through; + } + .underline-l { - text-decoration: underline; } + text-decoration: underline; + } + .no-underline-l { - text-decoration: none; } } + text-decoration: none; + } +} /* @@ -6204,47 +9391,77 @@ input[type=submit]:not(.button-small), .notice { -l = large */ -.tl, .edit-form .edit-form-row > :first-child { - text-align: left; } +.tl, +.edit-form .edit-form-row> :first-child { + text-align: left; +} .tr { - text-align: right; } + text-align: right; +} .tc { - text-align: center; } + text-align: center; +} .tj { - text-align: justify; } + text-align: justify; +} @media screen and (min-width: 35em) { .tl-ns { - text-align: left; } - .tr-ns, .edit-form .edit-form-row > :first-child { - text-align: right; } + text-align: left; + } + + .tr-ns, + .edit-form .edit-form-row> :first-child { + text-align: right; + } + .tc-ns { - text-align: center; } + text-align: center; + } + .tj-ns { - text-align: justify; } } + text-align: justify; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .tl-m { - text-align: left; } + text-align: left; + } + .tr-m { - text-align: right; } + text-align: right; + } + .tc-m { - text-align: center; } + text-align: center; + } + .tj-m { - text-align: justify; } } + text-align: justify; + } +} @media screen and (min-width: 60em) { .tl-l { - text-align: left; } + text-align: left; + } + .tr-l { - text-align: right; } + text-align: right; + } + .tc-l { - text-align: center; } + text-align: center; + } + .tj-l { - text-align: justify; } } + text-align: justify; + } +} /* @@ -6267,46 +9484,74 @@ input[type=submit]:not(.button-small), .notice { */ .ttc { - text-transform: capitalize; } + text-transform: capitalize; +} .ttl { - text-transform: lowercase; } + text-transform: lowercase; +} .ttu { - text-transform: uppercase; } + text-transform: uppercase; +} .ttn { - text-transform: none; } + text-transform: none; +} @media screen and (min-width: 35em) { .ttc-ns { - text-transform: capitalize; } + text-transform: capitalize; + } + .ttl-ns { - text-transform: lowercase; } + text-transform: lowercase; + } + .ttu-ns { - text-transform: uppercase; } + text-transform: uppercase; + } + .ttn-ns { - text-transform: none; } } + text-transform: none; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .ttc-m { - text-transform: capitalize; } + text-transform: capitalize; + } + .ttl-m { - text-transform: lowercase; } + text-transform: lowercase; + } + .ttu-m { - text-transform: uppercase; } + text-transform: uppercase; + } + .ttn-m { - text-transform: none; } } + text-transform: none; + } +} @media screen and (min-width: 60em) { .ttc-l { - text-transform: capitalize; } + text-transform: capitalize; + } + .ttl-l { - text-transform: lowercase; } + text-transform: lowercase; + } + .ttu-l { - text-transform: uppercase; } + text-transform: uppercase; + } + .ttn-l { - text-transform: none; } } + text-transform: none; + } +} /* @@ -6337,99 +9582,165 @@ input[type=submit]:not(.button-small), .notice { * */ .f-6, .f-headline { - font-size: 6rem; } + font-size: 6rem; +} .f-5, .f-subheadline { - font-size: 5rem; } + font-size: 5rem; +} /* Type Scale */ .f1 { - font-size: 3rem; } + font-size: 3rem; +} .f2 { - font-size: 2.25rem; } + font-size: 2.25rem; +} .f3 { - font-size: 1.5rem; } + font-size: 1.5rem; +} .f4 { - font-size: 1.25rem; } + font-size: 1.25rem; +} .f5 { - font-size: 1rem; } + font-size: 1rem; +} .f6 { - font-size: 0.875rem; } + font-size: 0.875rem; +} .f7 { - font-size: 0.75rem; } + font-size: 0.75rem; +} @media screen and (min-width: 35em) { + .f-6-ns, .f-headline-ns { - font-size: 6rem; } + font-size: 6rem; + } + .f-5-ns, .f-subheadline-ns { - font-size: 5rem; } + font-size: 5rem; + } + .f1-ns { - font-size: 3rem; } + font-size: 3rem; + } + .f2-ns { - font-size: 2.25rem; } + font-size: 2.25rem; + } + .f3-ns { - font-size: 1.5rem; } + font-size: 1.5rem; + } + .f4-ns { - font-size: 1.25rem; } + font-size: 1.25rem; + } + .f5-ns { - font-size: 1rem; } + font-size: 1rem; + } + .f6-ns { - font-size: 0.875rem; } + font-size: 0.875rem; + } + .f7-ns { - font-size: 0.75rem; } } + font-size: 0.75rem; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { + .f-6-m, .f-headline-m { - font-size: 6rem; } + font-size: 6rem; + } + .f-5-m, .f-subheadline-m { - font-size: 5rem; } + font-size: 5rem; + } + .f1-m { - font-size: 3rem; } + font-size: 3rem; + } + .f2-m { - font-size: 2.25rem; } + font-size: 2.25rem; + } + .f3-m { - font-size: 1.5rem; } + font-size: 1.5rem; + } + .f4-m { - font-size: 1.25rem; } + font-size: 1.25rem; + } + .f5-m { - font-size: 1rem; } + font-size: 1rem; + } + .f6-m { - font-size: 0.875rem; } + font-size: 0.875rem; + } + .f7-m { - font-size: 0.75rem; } } + font-size: 0.75rem; + } +} @media screen and (min-width: 60em) { + .f-6-l, .f-headline-l { - font-size: 6rem; } + font-size: 6rem; + } + .f-5-l, .f-subheadline-l { - font-size: 5rem; } + font-size: 5rem; + } + .f1-l { - font-size: 3rem; } + font-size: 3rem; + } + .f2-l { - font-size: 2.25rem; } + font-size: 2.25rem; + } + .f3-l { - font-size: 1.5rem; } + font-size: 1.5rem; + } + .f4-l { - font-size: 1.25rem; } + font-size: 1.25rem; + } + .f5-l { - font-size: 1rem; } + font-size: 1rem; + } + .f6-l { - font-size: 0.875rem; } + font-size: 0.875rem; + } + .f7-l { - font-size: 0.75rem; } } + font-size: 0.75rem; + } +} /* @@ -6444,84 +9755,126 @@ input[type=submit]:not(.button-small), .notice { */ /* Measure is limited to ~66 characters */ .measure { - max-width: 30em; } + max-width: 30em; +} /* Measure is limited to ~80 characters */ .measure-wide { - max-width: 34em; } + max-width: 34em; +} /* Measure is limited to ~45 characters */ .measure-narrow { - max-width: 20em; } + max-width: 20em; +} /* Book paragraph style - paragraphs are indented with no vertical spacing. */ .indent { text-indent: 1em; margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; +} .small-caps { - font-variant: small-caps; } + font-variant: small-caps; +} /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ .truncate { white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; } + text-overflow: ellipsis; +} @media screen and (min-width: 35em) { .measure-ns { - max-width: 30em; } + max-width: 30em; + } + .measure-wide-ns { - max-width: 34em; } + max-width: 34em; + } + .measure-narrow-ns { - max-width: 20em; } + max-width: 20em; + } + .indent-ns { text-indent: 1em; margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; + } + .small-caps-ns { - font-variant: small-caps; } + font-variant: small-caps; + } + .truncate-ns { white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; } } + text-overflow: ellipsis; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .measure-m { - max-width: 30em; } + max-width: 30em; + } + .measure-wide-m { - max-width: 34em; } + max-width: 34em; + } + .measure-narrow-m { - max-width: 20em; } + max-width: 20em; + } + .indent-m { text-indent: 1em; margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; + } + .small-caps-m { - font-variant: small-caps; } + font-variant: small-caps; + } + .truncate-m { white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; } } + text-overflow: ellipsis; + } +} @media screen and (min-width: 60em) { .measure-l { - max-width: 30em; } + max-width: 30em; + } + .measure-wide-l { - max-width: 34em; } + max-width: 34em; + } + .measure-narrow-l { - max-width: 20em; } + max-width: 20em; + } + .indent-l { text-indent: 1em; margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; + } + .small-caps-l { - font-variant: small-caps; } + font-variant: small-caps; + } + .truncate-l { white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; } } + text-overflow: ellipsis; + } +} /* @@ -6535,44 +9888,66 @@ input[type=submit]:not(.button-small), .notice { */ /* Equivalent to .overflow-y-scroll */ .overflow-container { - overflow-y: scroll; } + overflow-y: scroll; +} .center { margin-right: auto; - margin-left: auto; } + margin-left: auto; +} .mr-auto { - margin-right: auto; } + margin-right: auto; +} .ml-auto { - margin-left: auto; } + margin-left: auto; +} @media screen and (min-width: 35em) { .center-ns { margin-right: auto; - margin-left: auto; } + margin-left: auto; + } + .mr-auto-ns { - margin-right: auto; } + margin-right: auto; + } + .ml-auto-ns { - margin-left: auto; } } + margin-left: auto; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .center-m { margin-right: auto; - margin-left: auto; } + margin-left: auto; + } + .mr-auto-m { - margin-right: auto; } + margin-right: auto; + } + .ml-auto-m { - margin-left: auto; } } + margin-left: auto; + } +} @media screen and (min-width: 60em) { .center-l { margin-right: auto; - margin-left: auto; } + margin-left: auto; + } + .mr-auto-l { - margin-right: auto; } + margin-right: auto; + } + .ml-auto-l { - margin-left: auto; } } + margin-left: auto; + } +} /* @@ -6593,7 +9968,8 @@ input[type=submit]:not(.button-small), .notice { _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); } + clip: rect(1px, 1px, 1px, 1px); +} @media screen and (min-width: 35em) { .clip-ns { @@ -6601,7 +9977,9 @@ input[type=submit]:not(.button-small), .notice { _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); } } + clip: rect(1px, 1px, 1px, 1px); + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .clip-m { @@ -6609,7 +9987,9 @@ input[type=submit]:not(.button-small), .notice { _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); } } + clip: rect(1px, 1px, 1px, 1px); + } +} @media screen and (min-width: 60em) { .clip-l { @@ -6617,7 +9997,9 @@ input[type=submit]:not(.button-small), .notice { _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); } } + clip: rect(1px, 1px, 1px, 1px); + } +} /* @@ -6630,37 +10012,58 @@ input[type=submit]:not(.button-small), .notice { */ .ws-normal { - white-space: normal; } + white-space: normal; +} .nowrap { - white-space: nowrap; } + white-space: nowrap; +} .pre { - white-space: pre; } + white-space: pre; +} @media screen and (min-width: 35em) { .ws-normal-ns { - white-space: normal; } + white-space: normal; + } + .nowrap-ns { - white-space: nowrap; } + white-space: nowrap; + } + .pre-ns { - white-space: pre; } } + white-space: pre; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .ws-normal-m { - white-space: normal; } + white-space: normal; + } + .nowrap-m { - white-space: nowrap; } + white-space: nowrap; + } + .pre-m { - white-space: pre; } } + white-space: pre; + } +} @media screen and (min-width: 60em) { .ws-normal-l { - white-space: normal; } + white-space: normal; + } + .nowrap-l { - white-space: nowrap; } + white-space: nowrap; + } + .pre-l { - white-space: pre; } } + white-space: pre; + } +} /* @@ -6673,46 +10076,74 @@ input[type=submit]:not(.button-small), .notice { */ .v-base { - vertical-align: baseline; } + vertical-align: baseline; +} .v-mid { - vertical-align: middle; } + vertical-align: middle; +} .v-top { - vertical-align: top; } + vertical-align: top; +} .v-btm { - vertical-align: bottom; } + vertical-align: bottom; +} @media screen and (min-width: 35em) { .v-base-ns { - vertical-align: baseline; } + vertical-align: baseline; + } + .v-mid-ns { - vertical-align: middle; } + vertical-align: middle; + } + .v-top-ns { - vertical-align: top; } + vertical-align: top; + } + .v-btm-ns { - vertical-align: bottom; } } + vertical-align: bottom; + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .v-base-m { - vertical-align: baseline; } + vertical-align: baseline; + } + .v-mid-m { - vertical-align: middle; } + vertical-align: middle; + } + .v-top-m { - vertical-align: top; } + vertical-align: top; + } + .v-btm-m { - vertical-align: bottom; } } + vertical-align: bottom; + } +} @media screen and (min-width: 60em) { .v-base-l { - vertical-align: baseline; } + vertical-align: baseline; + } + .v-mid-l { - vertical-align: middle; } + vertical-align: middle; + } + .v-top-l { - vertical-align: top; } + vertical-align: top; + } + .v-btm-l { - vertical-align: bottom; } } + vertical-align: bottom; + } +} /* @@ -6735,16 +10166,19 @@ input[type=submit]:not(.button-small), .notice { */ .dim { opacity: 1; - transition: opacity .15s ease-in; } + transition: opacity .15s ease-in; +} .dim:hover, .dim:focus { opacity: .5; - transition: opacity .15s ease-in; } + transition: opacity .15s ease-in; +} .dim:active { opacity: .8; - transition: opacity .15s ease-out; } + transition: opacity .15s ease-out; +} /* @@ -6752,12 +10186,14 @@ input[type=submit]:not(.button-small), .notice { */ .glow { - transition: opacity .15s ease-in; } + transition: opacity .15s ease-in; +} .glow:hover, .glow:focus { opacity: 1; - transition: opacity .15s ease-in; } + transition: opacity .15s ease-in; +} /* @@ -6775,17 +10211,20 @@ input[type=submit]:not(.button-small), .notice { */ .hide-child .child { opacity: 0; - transition: opacity .15s ease-in; } + transition: opacity .15s ease-in; +} .hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; - transition: opacity .15s ease-in; } + transition: opacity .15s ease-in; +} .underline-hover:hover, .underline-hover:focus { - text-decoration: underline; } + text-decoration: underline; +} /* Can combine this with overflow-hidden to make background images grow on hover * even if you are using background-size: cover */ @@ -6793,31 +10232,38 @@ input[type=submit]:not(.button-small), .notice { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); - transition: transform 0.25s ease-out; } + transition: transform 0.25s ease-out; +} .grow:hover, .grow:focus { - transform: scale(1.05); } + transform: scale(1.05); +} .grow:active { - transform: scale(0.9); } + transform: scale(0.9); +} .grow-large { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); - transition: transform .25s ease-in-out; } + transition: transform .25s ease-in-out; +} .grow-large:hover, .grow-large:focus { - transform: scale(1.2); } + transform: scale(1.2); +} .grow-large:active { - transform: scale(0.95); } + transform: scale(0.95); +} /* Add pointer on hover */ .pointer:hover { - cursor: pointer; } + cursor: pointer; +} /* Add shadow on hover. @@ -6828,7 +10274,8 @@ input[type=submit]:not(.button-small), .notice { .shadow-hover { cursor: pointer; position: relative; - transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } + transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} .shadow-hover::after { content: ''; @@ -6841,18 +10288,21 @@ input[type=submit]:not(.button-small), .notice { width: 100%; height: 100%; z-index: -1; - transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } + transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} .shadow-hover:hover::after, .shadow-hover:focus::after { - opacity: 1; } + opacity: 1; +} /* Combine with classes in skins and skins-pseudo for * many different transition possibilities. */ .bg-animate, .bg-animate:hover, .bg-animate:focus { - transition: background-color .15s ease-in-out; } + transition: background-color .15s ease-in-out; +} /* @@ -6889,40 +10339,52 @@ input[type=submit]:not(.button-small), .notice { */ .z-0 { - z-index: 0; } + z-index: 0; +} .z-1 { - z-index: 1; } + z-index: 1; +} .z-2 { - z-index: 2; } + z-index: 2; +} .z-3 { - z-index: 3; } + z-index: 3; +} .z-4 { - z-index: 4; } + z-index: 4; +} .z-5 { - z-index: 5; } + z-index: 5; +} .z-999 { - z-index: 999; } + z-index: 999; +} .z-9999 { - z-index: 9999; } + z-index: 9999; +} .z-max { - z-index: 2147483647; } + z-index: 2147483647; +} .z-inherit { - z-index: inherit; } + z-index: inherit; +} .z-initial { - z-index: initial; } + z-index: initial; +} .z-unset { - z-index: unset; } + z-index: unset; +} /* @@ -6934,7 +10396,8 @@ input[type=submit]:not(.button-small), .notice { .nested-copy-line-height p, .nested-copy-line-height ul, .nested-copy-line-height ol { - line-height: 1.5; } + line-height: 1.5; +} .nested-headline-line-height h1, .nested-headline-line-height h2, @@ -6942,35 +10405,42 @@ input[type=submit]:not(.button-small), .notice { .nested-headline-line-height h4, .nested-headline-line-height h5, .nested-headline-line-height h6 { - line-height: 1.25; } + line-height: 1.25; +} .nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; - list-style-type: none; } + list-style-type: none; +} -.nested-copy-indent p + p { +.nested-copy-indent p+p { text-indent: 0.1em; margin-top: 0; - margin-bottom: 0; } + margin-bottom: 0; +} -.nested-copy-seperator p + p { - margin-top: 1.5em; } +.nested-copy-seperator p+p { + margin-top: 1.5em; +} .nested-img img { width: 100%; max-width: 100%; - display: block; } + display: block; +} .nested-links a { color: #357edd; - transition: color .15s ease-in; } + transition: color .15s ease-in; +} .nested-links a:hover, .nested-links a:focus { color: #96ccff; - transition: color .15s ease-in; } + transition: color .15s ease-in; +} /* @@ -6999,7 +10469,9 @@ For convenience in common cases, if only a single argument is provided and it does not match an existing variable, this will throw an error. */ -pre, code, .codeblock { +pre, +code, +.codeblock { /* Comment */ /* Error */ /* Keyword */ @@ -7059,155 +10531,401 @@ pre, code, .codeblock { /* Name.Variable.Class */ /* Name.Variable.Global */ /* Name.Variable.Instance */ - /* Literal.Number.Integer.Long */ } - pre .hll, code .hll, .codeblock .hll { - background-color: #ffffcc; } - pre .c, code .c, .codeblock .c { - color: #60a0b0; - font-style: italic; } - pre .err, code .err, .codeblock .err { - color: #FF0000; } - pre .k, code .k, .codeblock .k { - color: #007020; - font-weight: bold; } - pre .o, code .o, .codeblock .o { - color: #666666; } - pre .cm, code .cm, .codeblock .cm { - color: #60a0b0; - font-style: italic; } - pre .cp, code .cp, .codeblock .cp { - color: #007020; } - pre .c1, code .c1, .codeblock .c1 { - color: #60a0b0; - font-style: italic; } - pre .cs, code .cs, .codeblock .cs { - color: #60a0b0; - background-color: #fff0f0; } - pre .gd, code .gd, .codeblock .gd { - color: #A00000; } - pre .ge, code .ge, .codeblock .ge { - font-style: italic; } - pre .gr, code .gr, .codeblock .gr { - color: #FF0000; } - pre .gh, code .gh, .codeblock .gh { - color: #000080; - font-weight: bold; } - pre .gi, code .gi, .codeblock .gi { - color: #00A000; } - pre .go, code .go, .codeblock .go { - color: #808080; } - pre .gp, code .gp, .codeblock .gp { - color: #c65d09; - font-weight: bold; } - pre .gs, code .gs, .codeblock .gs { - font-weight: bold; } - pre .gu, code .gu, .codeblock .gu { - color: #800080; - font-weight: bold; } - pre .gt, code .gt, .codeblock .gt { - color: #0040D0; } - pre .kc, code .kc, .codeblock .kc { - color: #007020; - font-weight: bold; } - pre .kd, code .kd, .codeblock .kd { - color: #007020; - font-weight: bold; } - pre .kn, code .kn, .codeblock .kn { - color: #007020; - font-weight: bold; } - pre .kp, code .kp, .codeblock .kp { - color: #007020; } - pre .kr, code .kr, .codeblock .kr { - color: #007020; - font-weight: bold; } - pre .kt, code .kt, .codeblock .kt { - color: #902000; } - pre .m, code .m, .codeblock .m { - color: #40a070; } - pre .s, code .s, .codeblock .s { - color: #4070a0; } - pre .na, code .na, .codeblock .na { - color: #4070a0; } - pre .nb, code .nb, .codeblock .nb { - color: #007020; } - pre .nc, code .nc, .codeblock .nc { - color: #0e84b5; - font-weight: bold; } - pre .no, code .no, .codeblock .no { - color: #60add5; } - pre .nd, code .nd, .codeblock .nd { - color: #555555; - font-weight: bold; } - pre .ni, code .ni, .codeblock .ni { - color: #d55537; - font-weight: bold; } - pre .ne, code .ne, .codeblock .ne { - color: #007020; } - pre .nf, code .nf, .codeblock .nf { - color: #06287e; } - pre .nl, code .nl, .codeblock .nl { - color: #002070; - font-weight: bold; } - pre .nn, code .nn, .codeblock .nn { - color: #0e84b5; - font-weight: bold; } - pre .nt, code .nt, .codeblock .nt { - color: #062873; - font-weight: bold; } - pre .nv, code .nv, .codeblock .nv { - color: #bb60d5; } - pre .ow, code .ow, .codeblock .ow { - color: #007020; - font-weight: bold; } - pre .w, code .w, .codeblock .w { - color: #bbbbbb; } - pre .mf, code .mf, .codeblock .mf { - color: #40a070; } - pre .mh, code .mh, .codeblock .mh { - color: #40a070; } - pre .mi, code .mi, .codeblock .mi { - color: #40a070; } - pre .mo, code .mo, .codeblock .mo { - color: #40a070; } - pre .sb, code .sb, .codeblock .sb { - color: #4070a0; } - pre .sc, code .sc, .codeblock .sc { - color: #4070a0; } - pre .sd, code .sd, .codeblock .sd { - color: #4070a0; - font-style: italic; } - pre .s2, code .s2, .codeblock .s2 { - color: #4070a0; } - pre .se, code .se, .codeblock .se { - color: #4070a0; - font-weight: bold; } - pre .sh, code .sh, .codeblock .sh { - color: #4070a0; } - pre .si, code .si, .codeblock .si { - color: #70a0d0; - font-style: italic; } - pre .sx, code .sx, .codeblock .sx { - color: #c65d09; } - pre .sr, code .sr, .codeblock .sr { - color: #235388; } - pre .s1, code .s1, .codeblock .s1 { - color: #4070a0; } - pre .ss, code .ss, .codeblock .ss { - color: #517918; } - pre .bp, code .bp, .codeblock .bp { - color: #007020; } - pre .vc, code .vc, .codeblock .vc { - color: #bb60d5; } - pre .vg, code .vg, .codeblock .vg { - color: #bb60d5; } - pre .vi, code .vi, .codeblock .vi { - color: #bb60d5; } - pre .il, code .il, .codeblock .il { - color: #40a070; } + /* Literal.Number.Integer.Long */ +} + +pre .hll, +code .hll, +.codeblock .hll { + background-color: #ffffcc; +} + +pre .c, +code .c, +.codeblock .c { + color: #60a0b0; + font-style: italic; +} + +pre .err, +code .err, +.codeblock .err { + color: #FF0000; +} + +pre .k, +code .k, +.codeblock .k { + color: #007020; + font-weight: bold; +} + +pre .o, +code .o, +.codeblock .o { + color: #666666; +} + +pre .cm, +code .cm, +.codeblock .cm { + color: #60a0b0; + font-style: italic; +} + +pre .cp, +code .cp, +.codeblock .cp { + color: #007020; +} + +pre .c1, +code .c1, +.codeblock .c1 { + color: #60a0b0; + font-style: italic; +} + +pre .cs, +code .cs, +.codeblock .cs { + color: #60a0b0; + background-color: #fff0f0; +} + +pre .gd, +code .gd, +.codeblock .gd { + color: #A00000; +} + +pre .ge, +code .ge, +.codeblock .ge { + font-style: italic; +} + +pre .gr, +code .gr, +.codeblock .gr { + color: #FF0000; +} + +pre .gh, +code .gh, +.codeblock .gh { + color: #000080; + font-weight: bold; +} + +pre .gi, +code .gi, +.codeblock .gi { + color: #00A000; +} + +pre .go, +code .go, +.codeblock .go { + color: #808080; +} + +pre .gp, +code .gp, +.codeblock .gp { + color: #c65d09; + font-weight: bold; +} + +pre .gs, +code .gs, +.codeblock .gs { + font-weight: bold; +} + +pre .gu, +code .gu, +.codeblock .gu { + color: #800080; + font-weight: bold; +} + +pre .gt, +code .gt, +.codeblock .gt { + color: #0040D0; +} + +pre .kc, +code .kc, +.codeblock .kc { + color: #007020; + font-weight: bold; +} + +pre .kd, +code .kd, +.codeblock .kd { + color: #007020; + font-weight: bold; +} + +pre .kn, +code .kn, +.codeblock .kn { + color: #007020; + font-weight: bold; +} + +pre .kp, +code .kp, +.codeblock .kp { + color: #007020; +} + +pre .kr, +code .kr, +.codeblock .kr { + color: #007020; + font-weight: bold; +} + +pre .kt, +code .kt, +.codeblock .kt { + color: #902000; +} + +pre .m, +code .m, +.codeblock .m { + color: #40a070; +} + +pre .s, +code .s, +.codeblock .s { + color: #4070a0; +} + +pre .na, +code .na, +.codeblock .na { + color: #4070a0; +} + +pre .nb, +code .nb, +.codeblock .nb { + color: #007020; +} + +pre .nc, +code .nc, +.codeblock .nc { + color: #0e84b5; + font-weight: bold; +} + +pre .no, +code .no, +.codeblock .no { + color: #60add5; +} + +pre .nd, +code .nd, +.codeblock .nd { + color: #555555; + font-weight: bold; +} + +pre .ni, +code .ni, +.codeblock .ni { + color: #d55537; + font-weight: bold; +} + +pre .ne, +code .ne, +.codeblock .ne { + color: #007020; +} + +pre .nf, +code .nf, +.codeblock .nf { + color: #06287e; +} + +pre .nl, +code .nl, +.codeblock .nl { + color: #002070; + font-weight: bold; +} + +pre .nn, +code .nn, +.codeblock .nn { + color: #0e84b5; + font-weight: bold; +} + +pre .nt, +code .nt, +.codeblock .nt { + color: #062873; + font-weight: bold; +} + +pre .nv, +code .nv, +.codeblock .nv { + color: #bb60d5; +} + +pre .ow, +code .ow, +.codeblock .ow { + color: #007020; + font-weight: bold; +} + +pre .w, +code .w, +.codeblock .w { + color: #bbbbbb; +} + +pre .mf, +code .mf, +.codeblock .mf { + color: #40a070; +} + +pre .mh, +code .mh, +.codeblock .mh { + color: #40a070; +} + +pre .mi, +code .mi, +.codeblock .mi { + color: #40a070; +} + +pre .mo, +code .mo, +.codeblock .mo { + color: #40a070; +} + +pre .sb, +code .sb, +.codeblock .sb { + color: #4070a0; +} + +pre .sc, +code .sc, +.codeblock .sc { + color: #4070a0; +} + +pre .sd, +code .sd, +.codeblock .sd { + color: #4070a0; + font-style: italic; +} + +pre .s2, +code .s2, +.codeblock .s2 { + color: #4070a0; +} + +pre .se, +code .se, +.codeblock .se { + color: #4070a0; + font-weight: bold; +} + +pre .sh, +code .sh, +.codeblock .sh { + color: #4070a0; +} + +pre .si, +code .si, +.codeblock .si { + color: #70a0d0; + font-style: italic; +} + +pre .sx, +code .sx, +.codeblock .sx { + color: #c65d09; +} + +pre .sr, +code .sr, +.codeblock .sr { + color: #235388; +} + +pre .s1, +code .s1, +.codeblock .s1 { + color: #4070a0; +} + +pre .ss, +code .ss, +.codeblock .ss { + color: #517918; +} + +pre .bp, +code .bp, +.codeblock .bp { + color: #007020; +} + +pre .vc, +code .vc, +.codeblock .vc { + color: #bb60d5; +} + +pre .vg, +code .vg, +.codeblock .vg { + color: #bb60d5; +} + +pre .vi, +code .vi, +.codeblock .vi { + color: #bb60d5; +} + +pre .il, +code .il, +.codeblock .il { + color: #40a070; +} .dark { background-color: #222; - color: #bbb; } + color: #bbb; +} .noselect { -webkit-touch-callout: none; @@ -7221,13 +10939,16 @@ pre, code, .codeblock { -ms-user-select: none; /* IE/Edge */ user-select: none; - /* non-prefixed version, currently */ } + /* non-prefixed version, currently */ +} * { - box-sizing: border-box; } + box-sizing: border-box; +} br { - border-style: none; } + border-style: none; +} body { background-color: #fff; @@ -7240,470 +10961,689 @@ body { box-sizing: border-box; font-size: 0.875rem; line-height: 1.5; - font-weight: 400; } + font-weight: 400; +} -a, .link { +a, +.link { color: #666; color: var(--link-color); border-bottom-color: #666; border-bottom-color: var(--link-border-color); border-bottom: none; - text-decoration: none; } - a:hover, .link:hover { - /* text-decoration:underline; */ } - a.external::after, .link.external::after { - font-family: "icons"; - content: " 1"; - vertical-align: middle; } + text-decoration: none; +} + +a:hover, +.link:hover { + /* text-decoration:underline; */ +} + +a.external::after, +.link.external::after { + font-family: "icons"; + content: " 1"; + vertical-align: middle; +} ol { - list-style-type: decimal; } + list-style-type: decimal; +} ul { list-style-type: circle; padding: 0; - margin: 0; } + margin: 0; +} .list-none { - list-style-type: none; } + list-style-type: none; +} li { padding: 0; margin: 0; padding-left: 5px; - margin-left: 15px; } + margin-left: 15px; +} -h1, h2, h3, h4, h5 { +h1, +h2, +h3, +h4, +h5 { font-weight: 500; margin: 0; margin-bottom: 0.5rem; font-size: 1.5rem; - line-height: 1.25em; } + line-height: 1.25em; +} strong { - font-weight: 600; } + font-weight: 600; +} em { - font-style: italic; } + font-style: italic; +} p { box-sizing: border-box; margin: 0; - padding: 0; } + padding: 0; +} .p-spaced p:not(:first-child) { - margin-top: 0.6em; } + margin-top: 0.6em; +} .p-spaced p:not(:last-child) { - margin-bottom: 0.6em; } + margin-bottom: 0.6em; +} table { border-collapse: collapse; - table-layout: fixed; } + table-layout: fixed; +} -th, td { +th, +td { color: black; - color: var(--fg-font-color); } + color: var(--fg-font-color); +} td { - vertical-align: baseline; } + vertical-align: baseline; +} hr { border-top-color: #444; border-top-color: var(--hr-color); border-width: 1px 0 0; - border-top-style: solid; } + border-top-style: solid; +} .mono { - font-family: "Fira Mono", monospace; } + font-family: "Fira Mono", monospace; +} article code { - font-family: "Fira Mono", monospace; } + font-family: "Fira Mono", monospace; +} .big { - font-size: 120%; } + font-size: 120%; +} .title { - font-weight: bold; } + font-weight: bold; +} .clear { - width: 0; } + width: 0; +} .full { - width: 100%; } + width: 100%; +} .hidden { - display: none; } + display: none; +} .empty { - padding-left: 20px; } + padding-left: 20px; +} .column h2 { text-align: center; - margin-bottom: 20px; } + margin-bottom: 20px; +} .margin-center { margin-left: auto; - margin-right: auto; } + margin-right: auto; +} -.flex-shrink-0, .edit-form .edit-form-row > :first-child { - flex-shrink: 0; } +.flex-shrink-0, +.edit-form .edit-form-row> :first-child { + flex-shrink: 0; +} -.flex-grow-1, .edit-form .edit-form-row > :nth-child(2) { - flex-grow: 1; } +.flex-grow-1, +.edit-form .edit-form-row> :nth-child(2) { + flex-grow: 1; +} .flex-fair { flex-basis: 1px; flex-grow: 1; - flex-shrink: 1; } + flex-shrink: 1; +} @media screen and (min-width: 35em) { .flex-fair-ns { flex-basis: 1px; flex-grow: 1; - flex-shrink: 1; } } + flex-shrink: 1; + } +} @media screen and (min-width: 60em) { .flex-fair-l { flex-basis: 1px; flex-grow: 1; - flex-shrink: 1; } } + flex-shrink: 1; + } +} .c--normal { color: black; - color: var(--fg-font-color); } + color: var(--fg-font-color); +} .c--inherit { - color: inherit; } - .c--inherit:hover, .c--inherit:active { - color: inherit; } + color: inherit; +} + +.c--inherit:hover, +.c--inherit:active { + color: inherit; +} .b--theme { border-color: #666; - border-color: var(--theme-color); } + border-color: var(--theme-color); +} .c--dim { color: #333; - color: var(--dim-color); } + color: var(--dim-color); +} .c--theme-dim { color: #aaa; - color: var(--theme-color-dim); } + color: var(--theme-color-dim); +} .b--dim { border-color: #333; - border-color: var(--dim-color); } + border-color: var(--dim-color); +} .b--theme-dim { border-color: #aaa; - border-color: var(--theme-color-dim); } + border-color: var(--theme-color-dim); +} -.c--dimmer, footer .list li:not(:last-child)::after, .edu-course .edu-article.coming-soon { +.c--dimmer, +footer .list li:not(:last-child)::after, +.edu-course .edu-article.coming-soon { color: #999; - color: var(--dimmer-color); } + color: var(--dimmer-color); +} .c--theme-dimmer { color: #bbb; - color: var(--theme-color-dimmer); } + color: var(--theme-color-dimmer); +} -.b--dimmer, .post-content div.code { +.b--dimmer, +.post-content div.code { border-color: #999; - border-color: var(--dimmer-color); } + border-color: var(--dimmer-color); +} .b--theme-dimmer { border-color: #bbb; - border-color: var(--theme-color-dimmer); } + border-color: var(--theme-color-dimmer); +} .c--dimmest { color: #bbb; - color: var(--dimmest-color); } + color: var(--dimmest-color); +} .c--theme-dimmest { color: #ccc; - color: var(--theme-color-dimmest); } + color: var(--theme-color-dimmest); +} -.b--dimmest, .optionbar, blockquote, .post-content th, .post-content td { +.b--dimmest, +.optionbar, +blockquote, +.post-content th, +.post-content td { border-color: #bbb; - border-color: var(--dimmest-color); } + border-color: var(--dimmest-color); +} .b--theme-dimmest { border-color: #ccc; - border-color: var(--theme-color-dimmest); } + border-color: var(--theme-color-dimmest); +} -.bg--dim, .post-content code, .post-content pre > code, .post-content pre.hmn-code, figure { +.bg--dim, +.post-content code, +.post-content pre>code, +.post-content pre.hmn-code, +figure { background-color: #f0f0f0; - background-color: var(--dim-background); } + background-color: var(--dim-background); +} .bg--content { background-color: #f8f8f8; - background-color: var(--content-background); } + background-color: var(--content-background); +} .bg--card { background-color: #e8e8e8; - background-color: var(--card-background); } + background-color: var(--card-background); +} .f8 { - font-size: 0.65rem; } + font-size: 0.65rem; +} .mw-site { - max-width: 80rem; } + max-width: 80rem; +} .mh-3 { - max-height: 4rem; } + max-height: 4rem; +} .mh-4 { - max-height: 8rem; } + max-height: 8rem; +} .mh-5 { - max-height: 16rem; } + max-height: 16rem; +} .mh-6 { - max-height: 32rem; } + max-height: 32rem; +} .mh-100 { - max-height: 100%; } + max-height: 100%; +} .mh-50vh { - max-height: 50vh; } + max-height: 50vh; +} .mh-60vh { - max-height: 60vh; } + max-height: 60vh; +} .mh-70vh { - max-height: 70vh; } + max-height: 70vh; +} .mh-80vh { - max-height: 80vh; } + max-height: 80vh; +} .minw-100 { - min-width: 100%; } + min-width: 100%; +} .minh-1 { - min-height: 1rem; } + min-height: 1rem; +} .minh-2 { - min-height: 2rem; } + min-height: 2rem; +} .minh-3 { - min-height: 4rem; } + min-height: 4rem; +} .minh-4 { - min-height: 8rem; } + min-height: 8rem; +} .minh-5 { - min-height: 16rem; } + min-height: 16rem; +} .minh-6 { - min-height: 32rem; } + min-height: 32rem; +} .h1-5 { - height: 1.5rem; } + height: 1.5rem; +} .fira { - font-family: "Fira Sans", sans-serif; } + font-family: "Fira Sans", sans-serif; +} .bi-avoid { - break-inside: avoid; } + break-inside: avoid; +} .cc-auto { - column-count: auto; } + column-count: auto; +} .cc1 { - column-count: 1; } + column-count: 1; +} .cc2 { - column-count: 2; } + column-count: 2; +} .cc3 { - column-count: 3; } + column-count: 3; +} .cg0 { - column-gap: 0; } + column-gap: 0; +} .cg1 { - column-gap: 0.25rem; } + column-gap: 0.25rem; +} .cg2 { - column-gap: 0.5rem; } + column-gap: 0.5rem; +} .cg3 { - column-gap: 1rem; } + column-gap: 1rem; +} .cg4 { - column-gap: 2rem; } + column-gap: 2rem; +} .cg5 { - column-gap: 4rem; } + column-gap: 4rem; +} .g0 { - gap: 0; } + gap: 0; +} .g1 { - gap: 0.25rem; } + gap: 0.25rem; +} .g2 { - gap: 0.5rem; } + gap: 0.5rem; +} .g3 { - gap: 1rem; } + gap: 1rem; +} .g4 { - gap: 2rem; } + gap: 2rem; +} .g5 { - gap: 4rem; } + gap: 4rem; +} .grid { - display: grid; } + display: grid; +} .grid-1 { - grid-template-columns: 1fr; } + grid-template-columns: 1fr; +} .grid-2 { - grid-template-columns: 1fr 1fr; } + grid-template-columns: 1fr 1fr; +} .aspect-ratio--2x1 { - padding-bottom: 50%; } + padding-bottom: 50%; +} .hide-if-empty:empty { - display: none !important; } + display: none !important; +} @media screen and (min-width: 35em) { .bi-avoid-ns { - break-inside: avoid; } + break-inside: avoid; + } + .cc-auto-ns { - column-count: auto; } + column-count: auto; + } + .cc1-ns { - column-count: 1; } + column-count: 1; + } + .cc2-ns { - column-count: 2; } + column-count: 2; + } + .cc3-ns { - column-count: 3; } + column-count: 3; + } + .cg0-ns { - column-gap: 0; } + column-gap: 0; + } + .cg1-ns { - column-gap: 0.25rem; } + column-gap: 0.25rem; + } + .cg2-ns { - column-gap: 0.5rem; } + column-gap: 0.5rem; + } + .cg3-ns { - column-gap: 1rem; } + column-gap: 1rem; + } + .cg4-ns { - column-gap: 2rem; } + column-gap: 2rem; + } + .cg5-ns { - column-gap: 4rem; } + column-gap: 4rem; + } + .grid-1-ns { - grid-template-columns: 1fr; } + grid-template-columns: 1fr; + } + .grid-2-ns { - grid-template-columns: 1fr 1fr; } + grid-template-columns: 1fr 1fr; + } + .bg--dim-ns { background-color: #f0f0f0; - background-color: var(--dim-background); } } + background-color: var(--dim-background); + } +} @media screen and (min-width: 35em) and (max-width: 60em) { .bi-avoid-m { - break-inside: avoid; } + break-inside: avoid; + } + .cc-auto-m { - column-count: auto; } + column-count: auto; + } + .cc1-m { - column-count: 1; } + column-count: 1; + } + .cc2-m { - column-count: 2; } + column-count: 2; + } + .cc3-m { - column-count: 3; } + column-count: 3; + } + .cg1-m { - column-gap: 0.25rem; } + column-gap: 0.25rem; + } + .cg2-m { - column-gap: 0.5rem; } + column-gap: 0.5rem; + } + .cg3-m { - column-gap: 1rem; } + column-gap: 1rem; + } + .cg4-m { - column-gap: 2rem; } + column-gap: 2rem; + } + .cg5-m { - column-gap: 4rem; } + column-gap: 4rem; + } + .grid-1-m { - grid-template-columns: 1fr; } + grid-template-columns: 1fr; + } + .grid-2-m { - grid-template-columns: 1fr 1fr; } + grid-template-columns: 1fr 1fr; + } + .bg--dim-m { background-color: #f0f0f0; - background-color: var(--dim-background); } } + background-color: var(--dim-background); + } +} @media screen and (min-width: 60em) { .bi-avoid-l { - break-inside: avoid; } + break-inside: avoid; + } + .cc-auto-l { - column-count: auto; } + column-count: auto; + } + .cc1-l { - column-count: 1; } + column-count: 1; + } + .cc2-l { - column-count: 2; } + column-count: 2; + } + .cc3-l { - column-count: 3; } + column-count: 3; + } + .cg1-l { - column-gap: 0.25rem; } + column-gap: 0.25rem; + } + .cg2-l { - column-gap: 0.5rem; } + column-gap: 0.5rem; + } + .cg3-l { - column-gap: 1rem; } + column-gap: 1rem; + } + .cg4-l { - column-gap: 2rem; } + column-gap: 2rem; + } + .cg5-l { - column-gap: 4rem; } + column-gap: 4rem; + } + .grid-1-l { - grid-template-columns: 1fr; } + grid-template-columns: 1fr; + } + .grid-2-l { - grid-template-columns: 1fr 1fr; } + grid-template-columns: 1fr 1fr; + } + .bg--dim-l { background-color: #f0f0f0; - background-color: var(--dim-background); } } + background-color: var(--dim-background); + } +} .not-first:first-child { - display: none; } + display: none; +} .not-first-of-type:first-of-type { - display: none; } + display: none; +} .not-last:last-child { - display: none; } + display: none; +} .not-last-of-type:last-of-type { - display: none; } + display: none; +} .svgicon svg { fill: currentColor; stroke: currentColor; width: 1em; - height: 1em; } + height: 1em; +} .svgicon:not(.svgicon-nofix) svg { - transform: translate(0px, 0.1em); } + transform: translate(0px, 0.1em); +} .center-layout { margin-right: auto; - margin-left: auto; } + margin-left: auto; +} @media screen and (min-width: 35em) { footer .list li:not(:last-child)::after { - content: ' / '; } } + content: ' / '; + } +} .content { background-color: #f8f8f8; background-color: var(--content-background); - margin: auto; } - .content p { - -moz-text-size-adjust: auto; - -webkit-text-size-adjust: auto; - text-size-adjust: auto; - margin: 0.6rem 0; } - .content .description { - line-height: 1.42em; - text-align: left; - margin: auto; } - .content .description p { - margin-bottom: 0.5rem; - text-align: left; } - .content > .top-bar { - text-align: left; } + margin: auto; +} + +.content p { + -moz-text-size-adjust: auto; + -webkit-text-size-adjust: auto; + text-size-adjust: auto; + margin: 0.6rem 0; +} + +.content .description { + line-height: 1.42em; + text-align: left; + margin: auto; +} + +.content .description p { + margin-bottom: 0.5rem; + text-align: left; +} + +.content>.top-bar { + text-align: left; +} .content-block { /* Background color given by theme */ @@ -7713,46 +11653,64 @@ article code { width: 100%; /* box-shadow: 0px 4px 7px rgba(0,0,0,0.5); /* Not themed */ position: relative; - box-sizing: border-box; } - .content-block.top-bar { - background-image: none; } - .content-block.language-desc { - padding: 10px; } - .content-block.language-desc h3 { - margin-left: 10px; } - .content-block .no-bg { - background-image: none; - background-color: transparent; - box-shadow: none; } + box-sizing: border-box; +} + +.content-block.top-bar { + background-image: none; +} + +.content-block.language-desc { + padding: 10px; +} + +.content-block.language-desc h3 { + margin-left: 10px; +} + +.content-block .no-bg { + background-image: none; + background-color: transparent; + box-shadow: none; +} .sidebar .content-block.single { padding: 0px; /* for project list, TODO */ - margin-top: 20px; } + margin-top: 20px; +} .sidebar .content-block.top-bar { /* box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Not themed */ width: 80%; display: block; - margin: 10px auto; } + margin: 10px auto; +} .sidebar br.sidebar-filler { - line-height: 20px; } + line-height: 20px; +} .sidebar .projectlist { - background-color: transparent; } + background-color: transparent; +} -.content-block .bottom-padding, .sidebar .bottom-padding { - margin-top: 1rem; } +.content-block .bottom-padding, +.sidebar .bottom-padding { + margin-top: 1rem; +} .breadcrumb:hover { - text-decoration: underline; } + text-decoration: underline; +} .breadcrumb.current { - text-overflow: clip ellipsis; } + text-overflow: clip ellipsis; +} .breadcrumb-before:nth-of-type(n+2)::before { - content: '≫'; } + content: '≫'; +} .optionbar { width: 100%; @@ -7764,76 +11722,107 @@ article code { border-style: dashed; border-width: 0px; border-bottom-width: 1px; - padding-bottom: 0.5rem; } - @media screen and (min-width: 35em) { - .optionbar { - flex-direction: row; - text-align: left; - padding-bottom: 0; } } - .optionbar.bottom { - border-bottom-width: 0px; - border-top-width: 1px; + padding-bottom: 0.5rem; +} + +@media screen and (min-width: 35em) { + .optionbar { + flex-direction: row; + text-align: left; padding-bottom: 0; - padding-top: 0.5rem; } - @media screen and (min-width: 35em) { - .optionbar.bottom { - padding-top: 0; } } - .optionbar.center { - text-align: center; } + } +} + +.optionbar.bottom { + border-bottom-width: 0px; + border-top-width: 1px; + padding-bottom: 0; + padding-top: 0.5rem; +} + +@media screen and (min-width: 35em) { + .optionbar.bottom { + padding-top: 0; + } +} + +.optionbar.center { + text-align: center; +} + +.optionbar .options { + display: flex; + flex-direction: column; +} + +@media screen and (min-width: 35em) { .optionbar .options { - display: flex; - flex-direction: column; } - @media screen and (min-width: 35em) { - .optionbar .options { - flex-direction: row; } } - - .optionbar .options button, - .optionbar .options .button, - .optionbar .options input[type=button], - .optionbar .options input[type=submit] { - display: inline-flex; - align-items: center; - justify-content: center; - border: none; - background: none; - font-weight: normal; - font-family: inherit; - line-height: inherit; } - .optionbar .group { - display: inline-block; - height: 100%; - margin: auto; } + flex-direction: row; + } +} + +.optionbar .options button, +.optionbar .options .button, +.optionbar .options input[type=button], +.optionbar .options input[type=submit] { + display: inline-flex; + align-items: center; + justify-content: center; + border: none; + background: none; + font-weight: normal; + font-family: inherit; + line-height: inherit; +} + +.optionbar .group { + display: inline-block; + height: 100%; + margin: auto; +} .tab { background-color: #fff; - background-color: var(--tab-background); } + background-color: var(--tab-background); +} .tab-bar { border-color: #d8d8d8; border-color: var(--tab-border-color); - width: 100%; } - .tab-bar .tab-button { - background-color: #dfdfdf; - background-color: var(--tab-button-background); - border-color: #d8d8d8; - border-color: var(--tab-border-color); - cursor: pointer; } - .tab-bar .tab-button:hover { - background-color: #efefef; - background-color: var(--tab-button-background-hover); } - .tab-bar .tab-button.current { - background-color: #fff; - background-color: var(--tab-button-background-current); - font-weight: 500; } + width: 100%; +} + +.tab-bar .tab-button { + background-color: #dfdfdf; + background-color: var(--tab-button-background); + border-color: #d8d8d8; + border-color: var(--tab-border-color); + cursor: pointer; +} + +.tab-bar .tab-button:hover { + background-color: #efefef; + background-color: var(--tab-button-background-hover); +} + +.tab-bar .tab-button.current { + background-color: #fff; + background-color: var(--tab-button-background-current); + font-weight: 500; +} .pagination .page.current { cursor: default; - font-weight: 600; } - .pagination .page.current:hover { - text-decoration: none; } + font-weight: 600; +} + +.pagination .page.current:hover { + text-decoration: none; +} .user-link { - position: relative; } + position: relative; +} .user-popup { opacity: 0; @@ -7844,40 +11833,56 @@ article code { box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); overflow: hidden; position: absolute; - bottom: 0px; } - .user-popup.expanded { - visibility: visible; - max-height: 250px; - opacity: 1; } - .user-popup table { - /* Background color given by theme */ - width: 100%; - position: relative; - border-radius: 3px; - z-index: 10; } - .user-popup td { - vertical-align: top; - padding: 15px 9px; } - .user-popup #avatar { - width: 100px; - height: 100px; - background-size: contain; - background-position: center center; - background-repeat: no-repeat; - border-radius: 3px; - margin: 0px auto; } - .user-popup .username { - font-weight: bold; } - .user-popup .bottom { - /* Border color given by theme */ - border-top: 1px solid transparent; - padding: 15px; } - .user-popup .bottom .bio { - vertical-align: top; - width: 90%; } + bottom: 0px; +} + +.user-popup.expanded { + visibility: visible; + max-height: 250px; + opacity: 1; +} + +.user-popup table { + /* Background color given by theme */ + width: 100%; + position: relative; + border-radius: 3px; + z-index: 10; +} + +.user-popup td { + vertical-align: top; + padding: 15px 9px; +} + +.user-popup #avatar { + width: 100px; + height: 100px; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + border-radius: 3px; + margin: 0px auto; +} + +.user-popup .username { + font-weight: bold; +} + +.user-popup .bottom { + /* Border color given by theme */ + border-top: 1px solid transparent; + padding: 15px; +} + +.user-popup .bottom .bio { + vertical-align: top; + width: 90%; +} .site-search[type=text].lite { - transition: border-bottom-color 60ms ease-in-out, width 300ms ease; } + transition: border-bottom-color 60ms ease-in-out, width 300ms ease; +} #search_button_homepage { margin: 0px; @@ -7885,15 +11890,18 @@ article code { height: calc(100% - 2px); border-radius: 0px; display: inline-block; - display: none; } + display: none; +} .background-even:nth-of-type(even) { background-color: #f8f8f8; background-color: var(--background-even-background); --fade-color: #f8f8f8; - --fade-color: var(--background-even-background); } + --fade-color: var(--background-even-background); +} -.sr-only, .sr-focusable { +.sr-only, +.sr-focusable { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); @@ -7904,7 +11912,8 @@ article code { position: absolute; width: 1px; word-wrap: normal !important; - transition: 0.2s all; } + transition: 0.2s all; +} .sr-focusable:focus { padding: 15px 10px; @@ -7913,7 +11922,8 @@ article code { background: var(--content-background); clip: initial; clip-path: initial; - z-index: 99999; } + z-index: 99999; +} .userlist { text-align: center; @@ -7921,132 +11931,185 @@ article code { margin: 0px auto; padding-top: 30px; position: relative; - line-height: 0em; } - .userlist .user { - margin: 5px; - display: inline-block; - height: 200px; - max-height: 180px; - text-align: left; - position: relative; - width: 296px; - border-radius: 3px; - line-height: 1.4em; - overflow: hidden; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); - top: 0px; - transition: box-shadow 0.2s, background-color 0.2s; } - .userlist .user:hover { - box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2); } - .userlist .user table { - /* Border and background color given by theme */ - border: 1px solid transparent; - width: 100%; - height: 100%; } - .userlist .user .bottom { - transition: background-color 0.2s; } - .userlist .user td { - vertical-align: top; } - .userlist .user td.avatar { - width: 100px; - height: 80px; } - .userlist .user .name { - text-align: left; } - .userlist .user .name .username { - vertical-align: middle; } - .userlist .user .avatar .image { - display: block; - float: left; - width: 80px; - height: 80px; - background-size: cover; - margin-right: 10px; } - .userlist .user .bio { - padding: 5px; } + line-height: 0em; +} + +.userlist .user { + margin: 5px; + display: inline-block; + height: 200px; + max-height: 180px; + text-align: left; + position: relative; + width: 296px; + border-radius: 3px; + line-height: 1.4em; + overflow: hidden; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); + top: 0px; + transition: box-shadow 0.2s, background-color 0.2s; +} + +.userlist .user:hover { + box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2); +} + +.userlist .user table { + /* Border and background color given by theme */ + border: 1px solid transparent; + width: 100%; + height: 100%; +} + +.userlist .user .bottom { + transition: background-color 0.2s; +} + +.userlist .user td { + vertical-align: top; +} + +.userlist .user td.avatar { + width: 100px; + height: 80px; +} + +.userlist .user .name { + text-align: left; +} + +.userlist .user .name .username { + vertical-align: middle; +} + +.userlist .user .avatar .image { + display: block; + float: left; + width: 80px; + height: 80px; + background-size: cover; + margin-right: 10px; +} + +.userlist .user .bio { + padding: 5px; +} strong { - font-weight: 500; } + font-weight: 500; +} .text { background-color: #f9f9f9; - background-color: var(--text-background); } + background-color: var(--text-background); +} .underline { - text-decoration: underline; } + text-decoration: underline; +} .monospace { font-family: "Fira Mono", monospace; background-color: rgba(0, 0, 0, 0.1); padding: 0.2em 0 0.05em; - border-radius: 3px; } - .monospace::before, .monospace::after { - content: "\00a0"; - letter-spacing: -0.2em; } + border-radius: 3px; +} + +.monospace::before, +.monospace::after { + content: "\00a0"; + letter-spacing: -0.2em; +} .center { - text-align: center; } + text-align: center; +} .right { - text-align: right; } + text-align: right; +} .left { - text-align: left; } + text-align: left; +} .justify { text-align: justify; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; - hyphens: manual; } + hyphens: manual; +} .spoiler { border-color: #aaa; border-color: var(--spoiler-border); border-width: 1px; border-style: dashed; - color: transparent; } - .spoiler::selection { - color: white; - background-color: black; } + color: transparent; +} + +.spoiler::selection { + color: white; + background-color: black; +} blockquote .quotewho { - line-height: 2em; } - blockquote .quotewho::after { - content: " said:"; } + line-height: 2em; +} + +blockquote .quotewho::after { + content: " said:"; +} pre { - font-family: "Fira Mono", monospace; } + font-family: "Fira Mono", monospace; +} .post-content *:first-child { - margin-top: 0; } + margin-top: 0; +} .post-content *:last-child { - margin-bottom: 0; } + margin-bottom: 0; +} .post-content h1 { - font-size: 2rem; } + font-size: 2rem; +} .post-content h2 { - font-size: 1.5rem; } + font-size: 1.5rem; +} .post-content h3 { - font-size: 1.25rem; } + font-size: 1.25rem; +} .post-content h4 { - font-size: 1rem; } + font-size: 1rem; +} .post-content h5 { - font-size: 0.8rem; } + font-size: 0.8rem; +} -.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5 { +.post-content h1, +.post-content h2, +.post-content h3, +.post-content h4, +.post-content h5 { margin-top: 0.5em; - margin-bottom: 0.5em; } + margin-bottom: 0.5em; +} .post-content li:not(:last-child) { - margin-bottom: 0.2em; } + margin-bottom: 0.2em; +} .post-content img { - max-width: 100%; } + max-width: 100%; +} .post-content div.code { max-width: 100%; @@ -8056,30 +12119,39 @@ pre { -moz-tab-size: 4; tab-size: 4; border-width: 1px; - border-style: solid; } + border-style: solid; +} -.post-content div + br, -.post-content blockquote + br, -.post-content ul + br, -.post-content ol + br { - display: none; } +.post-content div+br, +.post-content blockquote+br, +.post-content ul+br, +.post-content ol+br { + display: none; +} .post-content code { padding: .2em 0; - white-space: nowrap; } - .post-content code::before, .post-content code::after { - content: "\00a0"; - letter-spacing: -0.2em; - display: inline-block; } + white-space: nowrap; +} -.post-content pre > code, .post-content pre.hmn-code { +.post-content code::before, +.post-content code::after { + content: "\00a0"; + letter-spacing: -0.2em; + display: inline-block; +} + +.post-content pre>code, +.post-content pre.hmn-code { padding: 0.7em; - overflow-x: auto; } + overflow-x: auto; +} figure { display: flex; flex-direction: column; - padding-bottom: 0; } + padding-bottom: 0; +} .toolbar { background-color: #fff; @@ -8090,108 +12162,142 @@ figure { height: 2.2em; overflow-y: scroll; transition: all 0.3s; - border: 1px solid transparent; } - .toolbar .button, .toolbar input[type=button] { - background-color: transparent; - background-color: var(--editor-toolbar-button-background); - border-color: #ccc; - border-color: var(--editor-toolbar-button-border-color); - line-height: 2.2em; - box-shadow: none; - border: 0px; - border-right: 1px solid transparent; - border-radius: 0px; - margin: 0px; - padding: 0px 10px; - height: 100%; - vertical-align: bottom; - text-transform: none; - font-weight: 300; } - .toolbar .button:hover, .toolbar input[type=button]:hover { - background-color: #ddd; - background-color: var(--editor-toolbar-button-background-hover); } - .toolbar input[type="text"] { - height: 2.2em; - border: 0px solid transparent; - /* Not themed */ } + border: 1px solid transparent; +} + +.toolbar .button, +.toolbar input[type=button] { + background-color: transparent; + background-color: var(--editor-toolbar-button-background); + border-color: #ccc; + border-color: var(--editor-toolbar-button-border-color); + line-height: 2.2em; + box-shadow: none; + border: 0px; + border-right: 1px solid transparent; + border-radius: 0px; + margin: 0px; + padding: 0px 10px; + height: 100%; + vertical-align: bottom; + text-transform: none; + font-weight: 300; +} + +.toolbar .button:hover, +.toolbar input[type=button]:hover { + background-color: #ddd; + background-color: var(--editor-toolbar-button-background-hover); +} + +.toolbar input[type="text"] { + height: 2.2em; + border: 0px solid transparent; + /* Not themed */ +} #preview:empty::after { content: 'A preview of your post will appear here.'; color: #999; color: var(--dimmer-color); - font-style: italic; } + font-style: italic; +} @media screen and (min-width: 35em) { #preview-container { max-height: calc(100vh - 20rem); - overflow: auto; } } + overflow: auto; + } +} -.edit-form .edit-form-row > :first-child { - font-weight: 500; } +.edit-form .edit-form-row> :first-child { + font-weight: 500; +} @media screen and (min-width: 35em) { .edit-form .edit-form-row .pt-input-ns { - padding-top: 0.3rem; } } + padding-top: 0.3rem; + } +} .edit-form input[type=text]:invalid { border-color: #c61d24; - border-color: var(--form-error-color); } + border-color: var(--form-error-color); +} .edit-form.project-edit .project_description { width: 100%; min-height: 400px; - height: 30vh; } + height: 30vh; +} .edit-form.project-edit input.project_blurb, .edit-form.project-edit input.project_name { min-width: 300px; - width: 50%; } + width: 50%; +} .edit-form.project-edit .quota-bar { width: 500px; border-width: 1px; - margin-bottom: 10px; } - .edit-form.project-edit .quota-bar .quota-filled { - height: 100%; } + margin-bottom: 10px; +} + +.edit-form.project-edit .quota-bar .quota-filled { + height: 100%; +} .episode-list .description p { - line-height: 1.42em; } + line-height: 1.42em; +} -.episode-list h2, .episode-list h3 { +.episode-list h2, +.episode-list h3 { font-size: 1em; - font-weight: bold; } + font-weight: bold; +} .episode-list ul { margin-bottom: 30px; list-style-type: none; - margin-top: -2px; } + margin-top: -2px; +} #outer_holder .back { - margin: 0px auto 20px auto; } - #outer_holder .back .outer { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - align-items: flex-start; - -webkit-justify-content: center; - justify-content: center; } - #outer_holder .back .outer > .sidebar { - max-width: 260px; } - #outer_holder .back .outer > .sidebar > div { - margin: 6px; - background-color: #ddd; - width: 200px; - margin-bottom: 12px; } - #outer_holder .back article { - -webkit-box-flex: 1 1 40%; - -moz-box-flex: 1 1 40%; - -webkit-flex: 1 1 40%; - -ms-flex: 1 1 40%; - flex: 1 1 40%; } + margin: 0px auto 20px auto; +} + +#outer_holder .back .outer { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + align-items: flex-start; + -webkit-justify-content: center; + justify-content: center; +} + +#outer_holder .back .outer>.sidebar { + max-width: 260px; +} + +#outer_holder .back .outer>.sidebar>div { + margin: 6px; + background-color: #ddd; + width: 200px; + margin-bottom: 12px; +} + +#outer_holder .back article { + -webkit-box-flex: 1 1 40%; + -moz-box-flex: 1 1 40%; + -webkit-flex: 1 1 40%; + -ms-flex: 1 1 40%; + flex: 1 1 40%; +} #player-wrapper { display: inline-block; @@ -8200,32 +12306,43 @@ figure { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; - box-shadow: 0px 0px 4px #000; } + box-shadow: 0px 0px 4px #000; +} @media screen { #player-wrapper #player { width: 320px; - height: 210px; } } + height: 210px; + } +} @media screen and (min-width: 500px) { #player-wrapper #player { width: 480px; - height: 300px; } } + height: 300px; + } +} @media screen and (min-width: 670px) { #player-wrapper #player { width: 640px; - height: 390px; } } + height: 390px; + } +} @media screen and (min-width: 890px) { #player-wrapper #player { width: 854px; - height: 510px; } } + height: 510px; + } +} @media screen and (min-width: 1320px) { #player-wrapper #player { width: 1280px; - height: 750px; } } + height: 750px; + } +} .annotation { display: -webkit-box; @@ -8235,12 +12352,17 @@ figure { display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; - align-items: flex-start; } - .annotation .navigation { - width: 450px; - display: inline-block; } - .annotation .notes { - display: inline-block; } + align-items: flex-start; +} + +.annotation .navigation { + width: 450px; + display: inline-block; +} + +.annotation .notes { + display: inline-block; +} nav.timecodes { margin: 0px; @@ -8251,41 +12373,57 @@ nav.timecodes { -moz-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; - flex: 0 0 auto; } - nav.timecodes a { - color: #ccc; } - nav.timecodes ul[name=markers] { - margin: 0px; - padding: 0px; - list-style-type: none; - font-size: 15px; } - nav.timecodes ul[name=markers] > li { - padding: 4px; - display: block; - border-bottom: 1px solid #333; } - nav.timecodes ul[name=markers] > li:hover { - background-color: rgba(0, 90, 0, 0.3); } - nav.timecodes ul[name=markers] > li a { - display: block; - text-decoration: none; } - nav.timecodes ul[name=markers] > li a span.timecode { - color: #777777; - float: left; - font-size: 86%; - margin-right: .5em; - text-align: right; - width: 42px; } + flex: 0 0 auto; +} + +nav.timecodes a { + color: #ccc; +} + +nav.timecodes ul[name=markers] { + margin: 0px; + padding: 0px; + list-style-type: none; + font-size: 15px; +} + +nav.timecodes ul[name=markers]>li { + padding: 4px; + display: block; + border-bottom: 1px solid #333; +} + +nav.timecodes ul[name=markers]>li:hover { + background-color: rgba(0, 90, 0, 0.3); +} + +nav.timecodes ul[name=markers]>li a { + display: block; + text-decoration: none; +} + +nav.timecodes ul[name=markers]>li a span.timecode { + color: #777777; + float: left; + font-size: 86%; + margin-right: .5em; + text-align: right; + width: 42px; +} #video-notes { min-height: 700px; - margin-top: 0px; } - #video-notes pre { - margin-top: 1.5em; - margin-left: 10px; - margin-right: 30px; - margin-bottom: 1.5em; - padding: 10px; - overflow: auto; } + margin-top: 0px; +} + +#video-notes pre { + margin-top: 1.5em; + margin-left: 10px; + margin-right: 30px; + margin-bottom: 1.5em; + padding: 10px; + overflow: auto; +} #game_icon { background-position: 0px 0px; @@ -8293,7 +12431,8 @@ nav.timecodes { background-image: url("/images/hero_home_200x114.png"); background-size: cover; height: 113px; - margin: 0px 0px 4px 0px; } + margin: 0px 0px 4px 0px; +} .sidebar-heading { margin: 0px 0px 16px; @@ -8303,27 +12442,34 @@ nav.timecodes { color: #00547c; white-space: nowrap; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); - text-align: center; } + text-align: center; +} .queryContainer { width: 1000px; margin: 15px auto; display: flex; - flex-direction: horizontal; } - .queryContainer label { - flex-grow: 0; - flex-shrink: 0; - padding-right: 15px; } + flex-direction: horizontal; +} + +.queryContainer label { + flex-grow: 0; + flex-shrink: 0; + padding-right: 15px; +} #query { - flex-grow: 1; } + flex-grow: 1; +} #results { width: 800px; - margin: 0 auto; } + margin: 0 auto; +} .dayContainer:nth-child(2n) { - background-color: rgba(0, 0, 0, 0.05); } + background-color: rgba(0, 0, 0, 0.05); +} .dayName { width: 200px; @@ -8331,40 +12477,52 @@ nav.timecodes { vertical-align: top; line-height: 16px; box-sizing: border-box; - padding: 5px; } + padding: 5px; +} .markerList { display: inline-block; width: 600px; box-sizing: border-box; - vertical-align: top; } + vertical-align: top; +} .marker { cursor: pointer; border-top: 1px solid rgba(255, 255, 255, 0.1); display: block; - text-decoration: none; } - .marker:first-child { - border: none; } - .marker:hover { - background-color: rgba(0, 0, 0, 0.1); } - .marker b { - color: black; - background-color: #ff9b00; } + text-decoration: none; +} + +.marker:first-child { + border: none; +} + +.marker:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.marker b { + color: black; + background-color: #ff9b00; +} #resultsSummary { text-align: center; - margin: 10px 0; } + margin: 10px 0; +} .edu-course.highlight { border-left: 0.25rem solid black; border-color: #666; border-color: var(--link-color); background-color: #ccc; - background-color: var(--theme-color-dimmest); } + background-color: var(--theme-color-dimmest); +} .edu-course .edu-article.coming-soon { - font-style: italic; } + font-style: italic; +} .edu-course .edu-article::after { content: ''; @@ -8377,62 +12535,84 @@ nav.timecodes { border-color: var(--dimmest-color); left: -1.5rem; top: -9rem; - border-bottom-left-radius: 0.5rem; } + border-bottom-left-radius: 0.5rem; +} .edu-topic img { width: 100%; height: 14rem; - object-fit: cover; } + object-fit: cover; +} .edu-article .note { - color: red; } + color: red; +} form { - margin: 0; } + margin: 0; +} -.radio, .checkbox { +.radio, +.checkbox { position: relative; display: flex; flex-direction: column; - padding-left: 1.8rem; } - .radio input, .checkbox input { - visibility: hidden; - position: absolute; } - .radio label::before, .checkbox label::before { - color: black; - color: var(--fg-font-color); - background-color: #fafafc; - background-color: var(--form-check-background); - border-color: #999; - border-color: var(--form-check-border-color); - position: absolute; - left: 0; - display: flex; - justify-content: center; - align-items: center; - border-width: 1px; - border-style: solid; - content: ""; - width: 1.3rem; - height: 1.3rem; - transition: border-color 0.2s; } - .radio label::before:hover, .checkbox label::before:hover { - border-color: #4c9ed9; - border-color: var(--form-check-border-color-hover); } - .radio input:disabled ~ *, .checkbox input:disabled ~ * { - opacity: 0.5; } + padding-left: 1.8rem; +} + +.radio input, +.checkbox input { + visibility: hidden; + position: absolute; +} + +.radio label::before, +.checkbox label::before { + color: black; + color: var(--fg-font-color); + background-color: #fafafc; + background-color: var(--form-check-background); + border-color: #999; + border-color: var(--form-check-border-color); + position: absolute; + left: 0; + display: flex; + justify-content: center; + align-items: center; + border-width: 1px; + border-style: solid; + content: ""; + width: 1.3rem; + height: 1.3rem; + transition: border-color 0.2s; +} + +.radio label::before:hover, +.checkbox label::before:hover { + border-color: #4c9ed9; + border-color: var(--form-check-border-color-hover); +} + +.radio input:disabled~*, +.checkbox input:disabled~* { + opacity: 0.5; +} .radio label:before { - border-radius: 50px; } + border-radius: 50px; +} -.radio input:checked + label:before { - content: "\25cf"; } +.radio input:checked+label:before { + content: "\25cf"; +} .checkbox label:before { - border-radius: 0.1cm; } + border-radius: 0.1cm; +} -.checkbox input:checked + label:before { - content: "\2713"; } +.checkbox input:checked+label:before { + content: "\2713"; +} input[type=text], input[type=password], @@ -8448,63 +12628,80 @@ select { border-width: 1px; border-radius: 2px; transition: border-color 0.3s, background-color 0.3s; - outline: none; } - input[type=text].lite, - input[type=password].lite, - input[type=email].lite, - textarea.lite, - select.lite { - background-color: transparent; - border-radius: 0; - border-width: 2px 0 2px; - border-style: solid; - border-color: transparent; - transition: border-bottom-color 60ms ease-in-out; } - input[type=text].lite:focus, input[type=text].lite:active, - input[type=password].lite:focus, - input[type=password].lite:active, - input[type=email].lite:focus, - input[type=email].lite:active, - textarea.lite:focus, - textarea.lite:active, - select.lite:focus, - select.lite:active { - background-color: transparent; - border-top-color: transparent; - border-bottom-color: var(--input-lite-border); } - input[type=text]:active, input[type=text]:focus, - input[type=password]:active, - input[type=password]:focus, - input[type=email]:active, - input[type=email]:focus, - textarea:active, - textarea:focus, - select:active, - select:focus { - background-color: #fafafc; - background-color: var(--form-text-background-active); - border-color: #4c9ed9; - border-color: var(--form-text-border-color-active); } + outline: none; +} + +input[type=text].lite, +input[type=password].lite, +input[type=email].lite, +textarea.lite, +select.lite { + background-color: transparent; + border-radius: 0; + border-width: 2px 0 2px; + border-style: solid; + border-color: transparent; + transition: border-bottom-color 60ms ease-in-out; +} + +input[type=text].lite:focus, +input[type=text].lite:active, +input[type=password].lite:focus, +input[type=password].lite:active, +input[type=email].lite:focus, +input[type=email].lite:active, +textarea.lite:focus, +textarea.lite:active, +select.lite:focus, +select.lite:active { + background-color: transparent; + border-top-color: transparent; + border-bottom-color: var(--input-lite-border); +} + +input[type=text]:active, +input[type=text]:focus, +input[type=password]:active, +input[type=password]:focus, +input[type=email]:active, +input[type=email]:focus, +textarea:active, +textarea:focus, +select:active, +select:focus { + background-color: #fafafc; + background-color: var(--form-text-background-active); + border-color: #4c9ed9; + border-color: var(--form-text-border-color-active); +} input[type=text]:not(.lite), input[type=password]:not(.lite), input[type=email]:not(.lite) { - padding: 0.3rem; } + padding: 0.3rem; +} textarea { - padding: 0.3rem; } + padding: 0.3rem; +} form .note { - font-style: italic; } + font-style: italic; +} select { - padding: 0.3rem 0.6rem; } + padding: 0.3rem 0.6rem; +} option[selected] { - font-weight: bold; } + font-weight: bold; +} -input[disabled], select[disabled], textarea[disabled] { - opacity: 0.5; } +input[disabled], +select[disabled], +textarea[disabled] { + opacity: 0.5; +} button, @@ -8523,54 +12720,63 @@ input[type=submit] { border-radius: 2px; transition: background-color 0.1s, border-color 0.1s; cursor: pointer; - font-weight: 600; } - - button:hover, - .button:hover, - input[type=button]:hover, - input[type=submit]:hover { - color: #4c9ed9; - color: var(--form-button-color-active); - background-color: #666; - background-color: var(--theme-color-light); - border-color: #666; - border-color: var(--theme-color-light); } - - button.lite, - .button.lite, - input[type=button].lite, - input[type=submit].lite { - display: inline-flex; - align-items: center; - justify-content: center; - border: none; - background: none; - font-weight: normal; - font-family: inherit; - line-height: inherit; } - - button.inline-button, - .button.inline-button, - input[type=button].inline-button, - input[type=submit].inline-button { - border-color: #999; - border-color: var(--form-button-inline-border-color); - margin: 5px; - box-shadow: none; - border-width: 1px; - border-style: solid; - padding: 5px 7px; } + font-weight: 600; +} + +button:hover, +.button:hover, +input[type=button]:hover, +input[type=submit]:hover { + color: #4c9ed9; + color: var(--form-button-color-active); + background-color: #666; + background-color: var(--theme-color-light); + border-color: #666; + border-color: var(--theme-color-light); +} + +button.lite, +.button.lite, +input[type=button].lite, +input[type=submit].lite { + display: inline-flex; + align-items: center; + justify-content: center; + border: none; + background: none; + font-weight: normal; + font-family: inherit; + line-height: inherit; +} + +button.inline-button, +.button.inline-button, +input[type=button].inline-button, +input[type=submit].inline-button { + border-color: #999; + border-color: var(--form-button-inline-border-color); + margin: 5px; + box-shadow: none; + border-width: 1px; + border-style: solid; + padding: 5px 7px; +} .tabbar { height: 40px; padding-left: 50px; - margin-bottom: 20px; } - .tabbar .tab { - padding: 10px; - border-bottom: none; } - .tabbar .tab.current { - /* Border color given by theme */ - border-bottom: 2px solid transparent; } + margin-bottom: 20px; +} + +.tabbar .tab { + padding: 10px; + border-bottom: none; +} + +.tabbar .tab.current { + /* Border color given by theme */ + border-bottom: 2px solid transparent; +} .generic-form { width: 60%; @@ -8581,58 +12787,85 @@ input[type=submit] { border: 1px solid transparent; border-bottom-width: 0px; border-top-left-radius: 3px; - border-top-right-radius: 3px; } - .generic-form table { - border-collapse: separate; - border-spacing: 4px; } - .generic-form th { - padding-right: 10px; - text-align: right; } - .generic-form th.error { - color: red; - text-align: center; } + border-top-right-radius: 3px; +} + +.generic-form table { + border-collapse: separate; + border-spacing: 4px; +} + +.generic-form th { + padding-right: 10px; + text-align: right; +} + +.generic-form th.error { + color: red; + text-align: center; +} #search_form_input_homepage { background-color: #f8f8f8; - background-color: var(--landing-search-background); } - #search_form_input_homepage:hover, #search_form_input_homepage:focus { - background-color: #fefeff; - background-color: var(--landing-search-background-hover); } + background-color: var(--landing-search-background); +} + +#search_form_input_homepage:hover, +#search_form_input_homepage:focus { + background-color: #fefeff; + background-color: var(--landing-search-background-hover); +} .display-options { height: 100%; - padding: 0px 20px 0px 20px; } - .display-options > * { - display: inline-block; - vertical-align: middle; } + padding: 0px 20px 0px 20px; +} + +.display-options>* { + display: inline-block; + vertical-align: middle; +} .forum h3 { margin: 0px 80px 0px 20px; - font-weight: bold; } + font-weight: bold; +} .forum-narrow .forum-narrow-hide { - display: none; } + display: none; +} .post-bg-alternate:nth-of-type(odd) { background-color: #f0f0f0; - background-color: var(--forum-even-background); } + background-color: var(--forum-even-background); +} .thread-list-item .latestpost { - width: 16.5rem; } + width: 16.5rem; +} .thread { color: black; - color: var(--fg-font-color); } - .profile .thread { - padding-left: 15px; } - .thread .title { - font-weight: bold; - transition: border-bottom-color 0.1s; - border-bottom-color: transparent; } - .thread .title:hover { - border-bottom-color: initial; } - .forum .thread .info th { - width: 50px; } + color: var(--fg-font-color); +} + +.profile .thread { + padding-left: 15px; +} + +.thread .title { + font-weight: bold; + transition: border-bottom-color 0.1s; + border-bottom-color: transparent; +} + +.thread .title:hover { + border-bottom-color: initial; +} + +.forum .thread .info th { + width: 50px; +} .avatar-icon { width: 40px; @@ -8643,38 +12876,51 @@ input[type=submit] { overflow: hidden; object-fit: cover; background-color: #bbb; - background-color: var(--dimmest-color); } + background-color: var(--dimmest-color); +} :root { --fade-color: #f8f8f8; - --fade-color: var(--content-background); } + --fade-color: var(--content-background); +} .excerpt-fade { background-image: linear-gradient(to top, var(--fade-color), rgba(0, 0, 0, 0)); - pointer-events: none; } + pointer-events: none; +} .read { color: #555; - color: var(--forum-thread-read-color); } - .read td { - color: #555; - color: var(--forum-thread-read-color); } - .read a { - color: #888; - color: var(--forum-thread-read-link-color); } - .read .title { - font-weight: 500; } + color: var(--forum-thread-read-color); +} + +.read td { + color: #555; + color: var(--forum-thread-read-color); +} + +.read a { + color: #888; + color: var(--forum-thread-read-link-color); +} + +.read .title { + font-weight: 500; +} .goto { font-size: 200%; - width: 30px; } - .goto a { - display: block; - padding: 0px 10px; - box-sizing: border-box; - position: relative; - line-height: 100%; - background-color: transparent; } + width: 30px; +} + +.goto a { + display: block; + padding: 0px 10px; + box-sizing: border-box; + position: relative; + line-height: 100%; + background-color: transparent; +} .badge { display: inline-block; @@ -8682,36 +12928,49 @@ input[type=submit] { padding: 0 0.8em; font-size: 0.9em; line-height: 1.8em; - font-weight: bold; } - .badge.staff { - background-color: #17b2c6; - color: white; } - .badge.staff::before { - content: 'Staff'; } + font-weight: bold; +} + +.badge.staff { + background-color: #17b2c6; + color: white; +} + +.badge.staff::before { + content: 'Staff'; +} .postid a { margin-top: -4rem; padding-top: 4rem; - outline: none; } + outline: none; +} .codeblocktable { font-family: "Fira Mono", monospace; font-size: 14px; overflow: auto; - line-height: 1.5em; } - .codeblocktable tbody { - width: 100%; } - .codeblocktable .linenos { - color: #777; - color: var(--code-line-number-color); - font-weight: 500; - padding: 5px; - background: rgba(0, 0, 0, 0.15); } - .codeblocktable .code { - /* Background color given by theme */ - padding-right: 20px; - padding-left: 10px; - max-width: 80em; } + line-height: 1.5em; +} + +.codeblocktable tbody { + width: 100%; +} + +.codeblocktable .linenos { + color: #777; + color: var(--code-line-number-color); + font-weight: 500; + padding: 5px; + background: rgba(0, 0, 0, 0.15); +} + +.codeblocktable .code { + /* Background color given by theme */ + padding-right: 20px; + padding-left: 10px; + max-width: 80em; +} .post .action.button { padding: 0px 10px; @@ -8722,146 +12981,197 @@ input[type=submit] { border-radius: 0px; border-width: 0px; border-bottom-width: 2px; - transition: border-bottom-width 0.1s; } - .post .action.button:hover { - border-bottom-width: 4px; } + transition: border-bottom-width 0.1s; +} + +.post .action.button:hover { + border-bottom-width: 4px; +} .blog .post .meta { - position: relative; } + position: relative; +} .blog .post.op .meta { - margin-bottom: 10px; } + margin-bottom: 10px; +} .blog .post .badges { width: 40px; font-size: 0.7em; - text-align: center; } + text-align: center; +} -.blog .sidebar .post > .author { +.blog .sidebar .post>.author { padding: 15px; - text-align: center; } + text-align: center; +} .blog .sidebar .recent-posts { text-align: center; - padding: 15px; } - .blog .sidebar .recent-posts h2 { - display: inline; } + padding: 15px; +} + +.blog .sidebar .recent-posts h2 { + display: inline; +} .blog .sidebar .archive ul { list-style-type: none; - text-align: left; } + text-align: left; +} .blog .post-list .post:nth-child(even) { - background-color: transparent; } + background-color: transparent; +} .featured-post .meta .avatar-icon { left: -60px; - bottom: -5px; } + bottom: -5px; +} .content-block.blog p.title { - font-weight: bold; } - .content-block.blog p.title a { - border-bottom-width: 0px; } - .content-block.blog p.title a:hover { - border-bottom-width: 1px; } + font-weight: bold; +} + +.content-block.blog p.title a { + border-bottom-width: 0px; +} + +.content-block.blog p.title a:hover { + border-bottom-width: 1px; +} a.mark_as_read { - float: right; } + float: right; +} .mark_as_read_toplevel_forum { margin-left: auto; margin-right: auto; width: 100%; - text-align: center; } - .mark_as_read_toplevel_forum a { - text-decoration: underline; } + text-align: center; +} + +.mark_as_read_toplevel_forum a { + text-decoration: underline; +} div.mark_as_read_toplevel_blog { margin-left: auto; margin-right: auto; width: 100%; - text-align: center; } - div.mark_as_read_toplevel_blog a { - text-decoration: none; } + text-align: center; +} + +div.mark_as_read_toplevel_blog a { + text-decoration: none; +} .mark_as_read_toplevel_blog div.mark_as_read_site { margin-left: auto; margin-right: auto; width: 100%; - text-align: center; } - .mark_as_read_toplevel_blog div.mark_as_read_site a { - text-decoration: none; } + text-align: center; +} + +.mark_as_read_toplevel_blog div.mark_as_read_site a { + text-decoration: none; +} .mark_as_read_site li.post-entry { margin-left: 0px; - margin-bottom: 3px; } + margin-bottom: 3px; +} .diff { width: 100%; max-height: 100vh; overflow-y: scroll; - margin-top: 20px; } - .diff > .post-source { - color: black; - color: var(--fg-font-color); - background-color: #fff; - background-color: var(--forum-diff-source-background); - border-color: #999; - border-color: var(--forum-diff-source-border-color); - border-width: 1px; - border-radius: 2px; - font-family: "Fira Mono", monospace; - width: 49%; - box-sizing: border-box; - padding: 4px; - display: inline-block; - vertical-align: top; } - .diff .diff-replace, - .diff .diff-delete, - .diff .diff-insert { - border-width: 1px; - border-radius: 2px; - padding: 1px; } - .diff .diff-replace { - background-color: #adcef4; - background-color: var(--forum-diff-replace-background); - border-color: #4787d1; - border-color: var(--forum-diff-replace-border-color); } - .diff .diff-delete { - background-color: #e57979; - background-color: var(--forum-diff-delete-background); - border-color: #c12626; - border-color: var(--forum-diff-delete-border-color); } - .diff .diff-insert { - background-color: #96e579; - background-color: var(--forum-diff-insert-background); - border-color: #5baa3f; - border-color: var(--forum-diff-insert-border-color); } + margin-top: 20px; +} + +.diff>.post-source { + color: black; + color: var(--fg-font-color); + background-color: #fff; + background-color: var(--forum-diff-source-background); + border-color: #999; + border-color: var(--forum-diff-source-border-color); + border-width: 1px; + border-radius: 2px; + font-family: "Fira Mono", monospace; + width: 49%; + box-sizing: border-box; + padding: 4px; + display: inline-block; + vertical-align: top; +} + +.diff .diff-replace, +.diff .diff-delete, +.diff .diff-insert { + border-width: 1px; + border-radius: 2px; + padding: 1px; +} + +.diff .diff-replace { + background-color: #adcef4; + background-color: var(--forum-diff-replace-background); + border-color: #4787d1; + border-color: var(--forum-diff-replace-border-color); +} + +.diff .diff-delete { + background-color: #e57979; + background-color: var(--forum-diff-delete-background); + border-color: #c12626; + border-color: var(--forum-diff-delete-border-color); +} + +.diff .diff-insert { + background-color: #96e579; + background-color: var(--forum-diff-insert-background); + border-color: #5baa3f; + border-color: var(--forum-diff-insert-border-color); +} .index { list-style-type: none; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; - margin-top: 20px; } - .index .index-category { - margin-bottom: 20px; - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid-column; } + margin-top: 20px; +} + +.index .index-category { + margin-bottom: 20px; + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid-column; +} .bbtable { width: 100%; - border: 1px solid; } - .bbtable td, .bbtable th { - border: 1px solid; - padding: 4px; } - .bbtable th { - background: rgba(0, 0, 0, 0.15); - font-weight: bold; - border-bottom-width: 2px; } - .bbtable tbody tr:nth-child(even) { - background: rgba(0, 0, 0, 0.05); } + border: 1px solid; +} + +.bbtable td, +.bbtable th { + border: 1px solid; + padding: 4px; +} + +.bbtable th { + background: rgba(0, 0, 0, 0.15); + font-weight: bold; + border-bottom-width: 2px; +} + +.bbtable tbody tr:nth-child(even) { + background: rgba(0, 0, 0, 0.05); +} header .hmn-logo { height: 3.75rem; @@ -8872,49 +13182,64 @@ header .hmn-logo { display: flex; align-items: center; justify-content: center; - color: white !important; } - @media screen and (min-width: 35em) { - header .hmn-logo.big { - width: 11.25rem; } } - @media screen and (min-width: 35em) { - header .hmn-logo.small { - width: 3.75rem; - padding: 0.8rem; - text-align: justify; - text-align-last: justify; - text-justify: inter-character; - flex-direction: column; - font-size: 1rem; - line-height: 1em; - align-items: stretch; } } + color: white !important; +} + +@media screen and (min-width: 35em) { + header .hmn-logo.big { + width: 11.25rem; + } +} + +@media screen and (min-width: 35em) { + header .hmn-logo.small { + width: 3.75rem; + padding: 0.8rem; + text-align: justify; + text-align-last: justify; + text-justify: inter-character; + flex-direction: column; + font-size: 1rem; + line-height: 1em; + align-items: stretch; + } +} header .items { - position: relative; } + position: relative; +} @media screen and (min-width: 35em) { header .root-item { position: relative; - height: 3.75rem; } } + height: 3.75rem; + } +} -header .root-item:not(:hover):not(.clicked) > .submenu { - display: none; } +header .root-item:not(:hover):not(.clicked)>.submenu { + display: none; +} header .root-item.clicked .svgicon { - transform: rotate(180deg); } + transform: rotate(180deg); +} -header .root-item > a { +header .root-item>a { display: flex; justify-content: center; align-items: center; height: 100%; - font-weight: bold; } + font-weight: bold; +} header .root-item .svgicon { - font-size: 0.7em; } + font-size: 0.7em; +} -header:not(.clicked) .root-item:not(:hover) > .submenu, -header.clicked .root-item:not(.clicked) > .submenu { - display: none; } +header:not(.clicked) .root-item:not(:hover)>.submenu, +header.clicked .root-item:not(.clicked)>.submenu { + display: none; +} header .submenu { background-color: #f8f8f8; @@ -8927,30 +13252,41 @@ header .submenu { z-index: 100; min-width: 10rem; border-top-style: solid; - border-bottom-style: solid; } - @media screen and (min-width: 35em) { - header .submenu { - border-top-style: none; - border-left-style: solid; - border-right-style: solid; - left: initial; - right: initial; } } - header .submenu > a { - display: block; - white-space: nowrap; - z-index: 1; - font-weight: bold; - text-align: center; } - @media screen and (min-width: 35em) { - header .submenu > a { - text-align: left; } } + border-bottom-style: solid; +} + +@media screen and (min-width: 35em) { + header .submenu { + border-top-style: none; + border-left-style: solid; + border-right-style: solid; + left: initial; + right: initial; + } +} + +header .submenu>a { + display: block; + white-space: nowrap; + z-index: 1; + font-weight: bold; + text-align: center; +} + +@media screen and (min-width: 35em) { + header .submenu>a { + text-align: left; + } +} header .menu-bar { width: 100%; - z-index: 10; } + z-index: 10; +} header #login-link { - cursor: pointer; } + cursor: pointer; +} header #login-popup { background-color: #fbfbfb; @@ -8963,72 +13299,93 @@ header #login-popup { overflow: hidden; right: 0; top: 100%; - width: 100%; } - header #login-popup.open { - visibility: visible; } - @media screen and (min-width: 35em) { - header #login-popup { - top: 2.2rem; - width: 17rem; } } + width: 100%; +} + +header #login-popup.open { + visibility: visible; +} + +@media screen and (min-width: 35em) { + header #login-popup { + top: 2.2rem; + width: 17rem; + } +} @font-face { font-family: icons; - src: url("/public/icons.ttf?v=4"); } + src: url("/public/icons.ttf?v=4"); +} span.icon { - font-family: "icons"; } + font-family: "icons"; +} span.icon-settings::before { font-family: "icons"; - content: "0"; } + content: "0"; +} span.icon-link::before { font-family: "icons"; - content: "1"; } + content: "1"; +} span.icon-logout::before { font-family: "icons"; - content: "2"; } + content: "2"; +} span.icon-twitter::before { font-family: "icons"; - content: "#"; } + content: "#"; +} span.icon-twitch::before { font-family: "icons"; - content: "$"; } + content: "$"; +} span.icon-github::before { font-family: "icons"; - content: "%"; } + content: "%"; +} span.icon-patreon::before { font-family: "icons"; - content: "&"; } + content: "&"; +} span.icon-youtube::before { font-family: "icons"; - content: "'"; } + content: "'"; +} span.icon-soundcloud::before { font-family: "icons"; - content: "*"; } + content: "*"; +} span.icon-web::before { font-family: "icons"; - content: "3"; } + content: "3"; +} span.icon-itchio::before { font-family: "icons"; - content: "+"; } + content: "+"; +} span.icon-hitbox::before { font-family: "icons"; - content: ","; } + content: ","; +} span.icon-rss::before { font-family: "icons"; - content: "4"; } + content: "4"; +} .chat { border-color: #ddd; @@ -9039,239 +13396,328 @@ span.icon-rss::before { position: relative; overflow: hidden; padding-right: 8px; - box-sizing: border-box; } - .chat #tabs { - overflow-y: scroll; - box-sizing: border-box; } - .chat #tabs .hidden { - display: none; } - .chat #tabs .current { - box-shadow: 0px 0px 5px #bbb inset; - box-shadow: var(--irc-tab-current-shadow); } - .chat #tabs .button { - padding-left: 10px; - padding-right: 3px; - transition: width 0.2s; - text-transform: none; - vertical-align: top; } - .chat #tabs .button .close-btn { - visibility: hidden; - opacity: 0; - transition: opacity 0.2s; - display: inline-block; - font-size: 9pt; - vertical-align: middle; - height: 13px; - line-height: 11px; - width: 13px; - margin-left: 5px; - padding-left: 2px; - padding-right: 3px; - border-radius: 3px; - border: 1px solid transparent; - /* Not themed */ - position: relative; - top: -2px; } - .chat #tabs .button:hover .close-btn { - color: #fff; - color: var(--irc-tab-close-button-color); - background-color: #aaa; - background-color: var(--irc-tab-close-button-background); - visibility: visible; - opacity: 1; } - .chat #tabs .new-tab { - padding: 0px; - padding-left: 10px; } - .chat #history { - width: 100%; - min-height: 300px; - height: 50vh; - overflow-y: auto; - padding-top: 3px; - box-sizing: border-box; } - .chat #history .channel { - width: 100%; - display: none; } - .chat #history .channel.current { - display: table; } - .chat #history .channel.hidden { - display: none; } - .chat #history .entry { - display: table-row; - width: 100%; - font-size: 11pt; } - .chat #history .entry.minor { - color: #777; - font-size: 10pt; } - .chat #history .entry.alert { - color: #dd683b; } - .chat #history .entry.error { - color: #880000; - font-style: italic; } - .chat #history .entry.action { - font-style: italic; } - .chat #history .entry.action .msg .action-name { - font-weight: bold; } - .chat #history .entry .nick, .chat #history .entry .msg { - display: table-cell; - padding: 0px 4px; } - .chat #history .entry .nick { - border-color: #ccc; - border-color: var(--irc-nick-border-color); - font-weight: bold; - text-align: right; - border-right-width: 1px; - border-right-style: solid; } - .chat #history .entry .msg { - width: 100%; } - .chat #history .entry .msg .highlight { - background-color: #dd683b; - color: #fff; - padding: 0px 5px; } - .chat #history .entry .msg .emote { - height: 1.6em; - vertical-align: middle; } - .chat #chatbox { - width: 100%; } - .chat #users { - color: black; - color: var(--irc-users-color); - background-color: #fff; - background-color: var(--irc-users-background); - border-color: #ccc; - border-color: var(--irc-users-border-color); - position: absolute; - border-left-width: 1px; - border-left-style: solid; - padding: 5px; - right: 0px; - top: 0px; - color: #333; - height: 100%; - max-width: 20%; - width: 20%; - transition: right 0.2s; - max-height: 100%; - overflow-y: auto; - box-sizing: border-box; } - .chat #users.collapsed { - right: -20%; } - .chat #users .popout { - background-color: #fff; - background-color: var(--irc-users-popout-background); - border-left-color: #bbb; - border-left-color: var(--irc-users-popout-border-color-left); - border-right-color: #ccc; - border-right-color: var(--irc-users-popout-border-color-right); - width: 8px; - font-size: 7pt; - height: 100%; - border-radius: 2px; - border: 0px solid transparent; - /* Not themed */ - border-left-width: 1px; - border-left-style: solid; - border-right-width: 1px; - border-right-style: solid; - position: absolute; - top: 0px; - left: -8px; - box-shadow: 0px 0px 0px transparent; - /* Not themed */ - text-align: center; - margin: 0px; - cursor: pointer; } - .chat #users .op { - font-weight: bold; } - .chat #users .user { - cursor: pointer; } + box-sizing: border-box; +} + +.chat #tabs { + overflow-y: scroll; + box-sizing: border-box; +} + +.chat #tabs .hidden { + display: none; +} + +.chat #tabs .current { + box-shadow: 0px 0px 5px #bbb inset; + box-shadow: var(--irc-tab-current-shadow); +} + +.chat #tabs .button { + padding-left: 10px; + padding-right: 3px; + transition: width 0.2s; + text-transform: none; + vertical-align: top; +} + +.chat #tabs .button .close-btn { + visibility: hidden; + opacity: 0; + transition: opacity 0.2s; + display: inline-block; + font-size: 9pt; + vertical-align: middle; + height: 13px; + line-height: 11px; + width: 13px; + margin-left: 5px; + padding-left: 2px; + padding-right: 3px; + border-radius: 3px; + border: 1px solid transparent; + /* Not themed */ + position: relative; + top: -2px; +} + +.chat #tabs .button:hover .close-btn { + color: #fff; + color: var(--irc-tab-close-button-color); + background-color: #aaa; + background-color: var(--irc-tab-close-button-background); + visibility: visible; + opacity: 1; +} + +.chat #tabs .new-tab { + padding: 0px; + padding-left: 10px; +} + +.chat #history { + width: 100%; + min-height: 300px; + height: 50vh; + overflow-y: auto; + padding-top: 3px; + box-sizing: border-box; +} + +.chat #history .channel { + width: 100%; + display: none; +} + +.chat #history .channel.current { + display: table; +} + +.chat #history .channel.hidden { + display: none; +} + +.chat #history .entry { + display: table-row; + width: 100%; + font-size: 11pt; +} + +.chat #history .entry.minor { + color: #777; + font-size: 10pt; +} + +.chat #history .entry.alert { + color: #dd683b; +} + +.chat #history .entry.error { + color: #880000; + font-style: italic; +} + +.chat #history .entry.action { + font-style: italic; +} + +.chat #history .entry.action .msg .action-name { + font-weight: bold; +} + +.chat #history .entry .nick, +.chat #history .entry .msg { + display: table-cell; + padding: 0px 4px; +} + +.chat #history .entry .nick { + border-color: #ccc; + border-color: var(--irc-nick-border-color); + font-weight: bold; + text-align: right; + border-right-width: 1px; + border-right-style: solid; +} + +.chat #history .entry .msg { + width: 100%; +} + +.chat #history .entry .msg .highlight { + background-color: #dd683b; + color: #fff; + padding: 0px 5px; +} + +.chat #history .entry .msg .emote { + height: 1.6em; + vertical-align: middle; +} + +.chat #chatbox { + width: 100%; +} + +.chat #users { + color: black; + color: var(--irc-users-color); + background-color: #fff; + background-color: var(--irc-users-background); + border-color: #ccc; + border-color: var(--irc-users-border-color); + position: absolute; + border-left-width: 1px; + border-left-style: solid; + padding: 5px; + right: 0px; + top: 0px; + color: #333; + height: 100%; + max-width: 20%; + width: 20%; + transition: right 0.2s; + max-height: 100%; + overflow-y: auto; + box-sizing: border-box; +} + +.chat #users.collapsed { + right: -20%; +} + +.chat #users .popout { + background-color: #fff; + background-color: var(--irc-users-popout-background); + border-left-color: #bbb; + border-left-color: var(--irc-users-popout-border-color-left); + border-right-color: #ccc; + border-right-color: var(--irc-users-popout-border-color-right); + width: 8px; + font-size: 7pt; + height: 100%; + border-radius: 2px; + border: 0px solid transparent; + /* Not themed */ + border-left-width: 1px; + border-left-style: solid; + border-right-width: 1px; + border-right-style: solid; + position: absolute; + top: 0px; + left: -8px; + box-shadow: 0px 0px 0px transparent; + /* Not themed */ + text-align: center; + margin: 0px; + cursor: pointer; +} + +.chat #users .op { + font-weight: bold; +} + +.chat #users .user { + cursor: pointer; +} .landing-layout { display: grid; - gap: 1rem; } - .landing-layout > * { - overflow: hidden; } + gap: 1rem; +} + +.landing-layout>* { + overflow: hidden; +} @media screen and (min-width: 60em) { .landing-layout { grid-template-columns: 1fr; - grid-auto-columns: 1fr; } - .landing-layout > * { - grid-column: 1 / 2; } - .landing-layout > *.landing-right { - grid-column: 2 / 3; - grid-row: 1 / 20; } } + grid-auto-columns: 1fr; + } + + .landing-layout>* { + grid-column: 1 / 2; + } + + .landing-layout>*.landing-right { + grid-column: 2 / 3; + grid-row: 1 / 20; + } +} .star-btn { border-bottom-width: 2px; background-color: #fff; background-color: var(--library-star-btn-background); border-color: #999; - border-color: var(--library-star-btn-border-color); } - .star-btn a { - border-color: #aaa; - border-color: var(--library-star-btn-a-border-color); } - .star-btn a:hover { - background-color: #fafafa; - background-color: var(--library-star-btn-a-hover-background); } + border-color: var(--library-star-btn-border-color); +} + +.star-btn a { + border-color: #aaa; + border-color: var(--library-star-btn-a-border-color); +} + +.star-btn a:hover { + background-color: #fafafa; + background-color: var(--library-star-btn-a-hover-background); +} .library-dropcap { width: 1em; height: 1.1em; padding-top: 0.19em; text-align: center; - font-size: 2rem; } + font-size: 2rem; +} .profile .content .description { margin: 0px auto; - max-width: 40em; } + max-width: 40em; +} .profile .content h2 { - margin-bottom: 10px; } + margin-bottom: 10px; +} -.profile ul.recent-posts, .profile ul.recent-comments { - list-style-type: none; } +.profile ul.recent-posts, +.profile ul.recent-comments { + list-style-type: none; +} .profile ul .entry { - margin-left: 20px; } + margin-left: 20px; +} .profile .entry .context { font-weight: bold; - border-bottom: 0px; } + border-bottom: 0px; +} .profile .content-block.projects { background-image: none; - overflow-y: visible; } + overflow-y: visible; +} .profile .content-block.avatar, .project .content-block.logo { background-color: transparent; background-image: none; box-shadow: none; - min-height: 200px; } + min-height: 200px; +} .project .content-block.screenshots, .profile .content-block.projects { padding: 0px; - min-height: 0em; } + min-height: 0em; +} .project-carousel .carousel-item { position: absolute; top: 0; - left: 0; } - .project-carousel .carousel-item br { - line-height: 0.6em; } + left: 0; +} + +.project-carousel .carousel-item br { + line-height: 0.6em; +} .project-carousel .carousel-item-small { position: absolute; top: 0; - left: 0; } - .project-carousel .carousel-item-small:not(.active) { - display: none; } + left: 0; +} + +.project-carousel .carousel-item-small:not(.active) { + display: none; +} .project-carousel .carousel-description { max-height: 14rem; - overflow: hidden; } + overflow: hidden; +} .project-carousel .carousel-fade { position: absolute; @@ -9279,18 +13725,24 @@ span.icon-rss::before { right: 0; bottom: 0; height: 30px; - background: linear-gradient( rgba(240, 240, 240, 0) , #f0f0f0 ); - background: linear-gradient( var(--dim-background-transparent) , var(--dim-background) ); } + background: linear-gradient(rgba(240, 240, 240, 0), #f0f0f0); + background: linear-gradient(var(--dim-background-transparent), var(--dim-background)); +} .project .pair { display: flex; - align-items: flex-start; } - .project .pair .key { - font-weight: bold; - flex-shrink: 0; } - .project .pair .value { - text-align: right; - flex-grow: 1; } + align-items: flex-start; +} + +.project .pair .key { + font-weight: bold; + flex-shrink: 0; +} + +.project .pair .value { + text-align: right; + flex-grow: 1; +} .project .settings-icon { z-index: 10; @@ -9304,26 +13756,36 @@ span.icon-rss::before { padding: 3px; border-radius: 5px; line-height: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} .project .screenshots .slideshow { - background-color: black; } + background-color: black; +} .project .tags { - text-align: center; } - .project .tags h2 { - margin-bottom: 5px; } - .project .tags li { - display: inline-block; } + text-align: center; +} + +.project .tags h2 { + margin-bottom: 5px; +} + +.project .tags li { + display: inline-block; +} .project .button-bar { - border: none; } + border: none; +} .project .forum h3 { - margin: 0; } + margin: 0; +} .project .forum .thread-entry-right { - display: none; } + display: none; +} .project-card { color: black; @@ -9332,127 +13794,183 @@ span.icon-rss::before { background-color: var(--card-background); border-color: #aaa; border-color: var(--project-card-border-color); - transition: box-shadow 0.2s, background-color 0.2s; } - .slideshow .project-card { - margin-top: 8px; } - .project-card:hover { - background-color: #f0f0f0; - background-color: var(--card-background-hover); } - .project-card:hover > .title { - text-decoration: underline; } - .project-card .image-container { - width: 8rem; - min-height: 8rem; } - .project-card .image-container .image { - position: absolute; - width: 8rem; - top: 0; - bottom: 0; } - .project-card .details { - /* Background color given by theme */ - transition: background-color 0.2s; } - .project-card .badges:empty { - display: none; } - .project-card .badge { - color: white; - border-radius: 5px; } + transition: box-shadow 0.2s, background-color 0.2s; +} + +.slideshow .project-card { + margin-top: 8px; +} + +.project-card:hover { + background-color: #f0f0f0; + background-color: var(--card-background-hover); +} + +.project-card:hover>.title { + text-decoration: underline; +} + +.project-card .image-container { + width: 8rem; + min-height: 8rem; +} + +.project-card .image-container .image { + position: absolute; + width: 8rem; + top: 0; + bottom: 0; +} + +.project-card .details { + /* Background color given by theme */ + transition: background-color 0.2s; +} + +.project-card .badges:empty { + display: none; +} + +.project-card .badge { + color: white; + border-radius: 5px; +} .sidebar .projectlist { padding: 0px; - width: 340px; } - .sidebar .projectlist .project-card.more { - height: 40px; - width: 326px; - padding-top: 5px; } + width: 340px; +} + +.sidebar .projectlist .project-card.more { + height: 40px; + width: 326px; + padding-top: 5px; +} .screenshots .slide { - max-width: 100%; } + max-width: 100%; +} .slideshow { /* Background color and color given by theme */ position: relative; background-image: none; - overflow: hidden; } - .slideshow .optionbar { - height: 30px; - text-align: center; } - .slideshow .buttons { - display: inline-block; - height: 100%; } - .slideshow .button { - line-height: 100%; - padding: 5px 8px; - font-weight: 400; } - .slideshow .button.current { - font-weight: 600; } - .slideshow #slide-deck { - width: 100%; - position: relative; - transition: left 0.3s; - left: 0px; - text-align: center; - display: flex; - flex-direction: horizontal; - justify-content: space-around; - align-items: center; } - .slideshow .slide { - flex: 1 1 100%; - position: relative; } - .slideshow .slide img { - margin: auto; - max-height: 60vh; - max-width: 100%; } - .slideshow.cards #slide-deck { - justify-content: flex-start; } - .slideshow.cards .slide { - flex: 0 1 auto; } + overflow: hidden; +} + +.slideshow .optionbar { + height: 30px; + text-align: center; +} + +.slideshow .buttons { + display: inline-block; + height: 100%; +} + +.slideshow .button { + line-height: 100%; + padding: 5px 8px; + font-weight: 400; +} + +.slideshow .button.current { + font-weight: 600; +} + +.slideshow #slide-deck { + width: 100%; + position: relative; + transition: left 0.3s; + left: 0px; + text-align: center; + display: flex; + flex-direction: horizontal; + justify-content: space-around; + align-items: center; +} + +.slideshow .slide { + flex: 1 1 100%; + position: relative; +} + +.slideshow .slide img { + margin: auto; + max-height: 60vh; + max-width: 100%; +} + +.slideshow.cards #slide-deck { + justify-content: flex-start; +} + +.slideshow.cards .slide { + flex: 0 1 auto; +} #project_owner_suggestions { max-height: 300px; overflow: auto; position: absolute; - border: 1px solid transparent; } - #project_owner_suggestions #user_template { - display: none; } + border: 1px solid transparent; +} + +#project_owner_suggestions #user_template { + display: none; +} .user_suggestions { background-color: #fff; background-color: var(--project-user-suggestions-background); padding-top: 5px; - padding-bottom: 5px; } - .user_suggestions#project_owner_suggestions .user { - border-color: #ddd; - border-color: var(--project-user-suggestions-border-color); - border-bottom-width: 1px; - width: 200px; - box-sizing: border-box; - cursor: pointer; } - .user_suggestions .user { - position: relative; - margin-left: 50px; - display: inline-block; - margin-right: 10px; } - .user_suggestions .user .avatar-icon { - left: -50px; - bottom: 0px; - border-radius: 50%; - border: 2px solid transparent; } + padding-bottom: 5px; +} + +.user_suggestions#project_owner_suggestions .user { + border-color: #ddd; + border-color: var(--project-user-suggestions-border-color); + border-bottom-width: 1px; + width: 200px; + box-sizing: border-box; + cursor: pointer; +} + +.user_suggestions .user { + position: relative; + margin-left: 50px; + display: inline-block; + margin-right: 10px; +} + +.user_suggestions .user .avatar-icon { + left: -50px; + bottom: 0px; + border-radius: 50%; + border: 2px solid transparent; +} #project_owners { - min-width: 50%; } + min-width: 50%; +} .showcase-item .gradient { width: 100%; height: 114px; - background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); } + background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); +} .streams-container #empty-message { - display: none; } + display: none; +} .streams-container .streams:empty { - display: none; } - .streams-container .streams:empty + #empty-message { - display: block; } + display: none; +} + +.streams-container .streams:empty+#empty-message { + display: block; +} .streams-container .stream .live { position: absolute; @@ -9460,26 +13978,35 @@ span.icon-rss::before { top: 0.5rem; color: white; background-color: #e91916; - font-weight: bold; } + font-weight: bold; +} .streams-container .stream .viewers { position: absolute; left: 0.5rem; bottom: 0.5rem; color: white; - background-color: rgba(0, 0, 0, 0.7); } + background-color: rgba(0, 0, 0, 0.7); +} .streams-container .stream .avatar { - padding: 1.5rem; } + padding: 1.5rem; +} .streams-container .twitch-embed-container { padding-bottom: 0%; - transition: padding-bottom 400ms ease-in-out; } + transition: padding-bottom 400ms ease-in-out; +} + +.streams-container .twitch-embed-container.open { + padding-bottom: 150%; +} + +@media screen and (min-width: 713px) { .streams-container .twitch-embed-container.open { - padding-bottom: 150%; } - @media screen and (min-width: 713px) { - .streams-container .twitch-embed-container.open { - padding-bottom: 40.6%; } } + padding-bottom: 40.6%; + } +} .timeline-item { background-color: #e8e8e8; @@ -9487,116 +14014,158 @@ span.icon-rss::before { --fade-color: #e8e8e8; --fade-color: var(--card-background); color: black; - color: var(--main-color); } - .timeline-item .avatar-icon { - border: 2px solid; - border-color: #666; - border-color: var(--theme-color); } - .timeline-item .avatar-icon.big { - width: 3rem; - height: 3rem; } - @media screen and (min-width: 35em) { - .timeline-item .avatar-icon.big { - width: 3.875rem; - height: 3.875rem; } } - .timeline-item .timeline-content-box.timeline-item-bg { - background-color: rgba(0, 0, 0, 0.2); - background-color: var(--timeline-content-background); } - .timeline-item .timeline-content-box > * { - display: block; - max-width: 100%; - max-height: 80vh; } + color: var(--main-color); +} + +.timeline-item .avatar-icon { + border: 2px solid; + border-color: #666; + border-color: var(--theme-color); +} + +.timeline-item .avatar-icon.big { + width: 3rem; + height: 3rem; +} + +@media screen and (min-width: 35em) { + .timeline-item .avatar-icon.big { + width: 3.875rem; + height: 3.875rem; + } +} + +.timeline-item .timeline-content-box.timeline-item-bg { + background-color: rgba(0, 0, 0, 0.2); + background-color: var(--timeline-content-background); +} + +.timeline-item .timeline-content-box>* { + display: block; + max-width: 100%; + max-height: 80vh; +} .timeline-modal .container { max-height: 100vh; - max-width: 100%; } - @media screen and (min-width: 35em) { - .timeline-modal .container { - width: auto; - max-width: calc(100% - 2rem); - max-height: calc(100vh - 2rem); } } + max-width: 100%; +} + +@media screen and (min-width: 35em) { + .timeline-modal .container { + width: auto; + max-width: calc(100% - 2rem); + max-height: calc(100vh - 2rem); + } +} .carousel-container .carousel { - position: relative; } + position: relative; +} .carousel-container .carousel-item:not(.active) { - display: none; } + display: none; +} .carousel-container .carousel-buttons { display: flex; - justify-content: center; } + justify-content: center; +} .carousel-container .carousel-button { border: 1px solid; border-color: #999; border-color: var(--dimmer-color); cursor: pointer; - transition: all 100ms ease-in-out; } - .carousel-container .carousel-button:hover { - background-color: #bbb; - background-color: var(--dimmest-color); } - .carousel-container .carousel-button.active { - border-color: #666; - border-color: var(--theme-color); } - .carousel-container .carousel-button.active:hover { - background-color: #ccc; - background-color: var(--theme-color-dimmest); } + transition: all 100ms ease-in-out; +} + +.carousel-container .carousel-button:hover { + background-color: #bbb; + background-color: var(--dimmest-color); +} + +.carousel-container .carousel-button.active { + border-color: #666; + border-color: var(--theme-color); +} + +.carousel-container .carousel-button.active:hover { + background-color: #ccc; + background-color: var(--theme-color-dimmest); +} .notice { color: #fff; - color: var(--notice-text-color); } - .notice a { - color: #fff; - color: var(--notice-text-color); - border-bottom-color: #fff; - border-bottom-color: var(--notice-text-color); } + color: var(--notice-text-color); +} + +.notice a { + color: #fff; + color: var(--notice-text-color); + border-bottom-color: #fff; + border-bottom-color: var(--notice-text-color); +} .notice-unapproved { background-color: #b42222; - background-color: var(--notice-unapproved-color); } + background-color: var(--notice-unapproved-color); +} .notice-hidden { background-color: #b6b6b6; - background-color: var(--notice-hidden-color); } + background-color: var(--notice-hidden-color); +} .notice-hiatus { background-color: #aa7d30; - background-color: var(--notice-hiatus-color); } + background-color: var(--notice-hiatus-color); +} .notice-dead { background-color: #b42222; - background-color: var(--notice-dead-color); } + background-color: var(--notice-dead-color); +} .notice-lts { background-color: #43a52f; - background-color: var(--notice-lts-color); } + background-color: var(--notice-lts-color); +} .notice-lts-reqd { background-color: #aa7d30; - background-color: var(--notice-lts-reqd-color); } + background-color: var(--notice-lts-reqd-color); +} .notice-success { background-color: #43a52f; - background-color: var(--notice-success-color); } + background-color: var(--notice-success-color); +} .notice-warn { background-color: #aa7d30; - background-color: var(--notice-warn-color); } + background-color: var(--notice-warn-color); +} .notice-failure { background-color: #b42222; - background-color: var(--notice-failure-color); } + background-color: var(--notice-failure-color); +} -.upload_bar.uploading .instructions, .upload_bar:not(.uploading) .progress { - display: none; } +.upload_bar.uploading .instructions, +.upload_bar:not(.uploading) .progress { + display: none; +} .upload_bar .progress_bar { border: 2px solid; border-color: #666; border-color: var(--link-color); - padding: 2px; } + padding: 2px; +} -.upload_bar .progress_bar > div { +.upload_bar .progress_bar>div { background-color: #666; background-color: var(--link-color); - height: 100%; } + height: 100%; +} \ No newline at end of file diff --git a/src/rawdata/scss/core.css b/src/rawdata/scss/core.css index e9af9f9..a2f0435 100644 --- a/src/rawdata/scss/core.css +++ b/src/rawdata/scss/core.css @@ -11,8 +11,8 @@ br { } body { - background-color: var(--main-background-color); - color: var(--main-color); + background-color: var(--background-color); + color: var(--color); font-family: "Fira Sans", sans-serif; min-height: 100vh; box-sizing: border-box; @@ -38,6 +38,10 @@ code, /* Utility */ +.bg--main { + background-color: var(--main-background-color); +} + .m--center { margin-left: auto; margin-right: auto; @@ -74,7 +78,7 @@ code, } .c--normal { - color: var(--main-color); + color: var(--color); } .c--inherit { diff --git a/src/rawdata/scss/vars.css b/src/rawdata/scss/vars.css index 0b32c69..a07e18f 100644 --- a/src/rawdata/scss/vars.css +++ b/src/rawdata/scss/vars.css @@ -9,8 +9,8 @@ $breakpoint-large: screen and (min-width: 60em) @import "tachyons-vars.css"; :root { - --main-background-color: white; - --main-color: black; + --background-color: white; + --color: black; --link-color: #cc3b95; /* Default theme colors in case the project.css is busted */ @@ -21,12 +21,15 @@ $breakpoint-large: screen and (min-width: 60em) --theme-color-dark: #666; --theme-color-light: #666; + + --main-background-color: #f8f8f8; + --main-background-color-transparent: rgba(#f8f8f8, 0); } @media (prefers-color-scheme: dark) { :root { - --main-background-color: #202020; - --main-color: #eee; + --background-color: #202020; + --color: #eee; --link-color: #cc3b95; --theme-color: #666; @@ -36,5 +39,8 @@ $breakpoint-large: screen and (min-width: 60em) --theme-color-dark: #666; --theme-color-light: #666; + + --main-background-color: #202020; + --main-background-color-transparent: rgba(#202020, 0); } } \ No newline at end of file diff --git a/src/templates/src/layouts/base.html b/src/templates/src/layouts/base.html index f5d62ec..e1cd25b 100644 --- a/src/templates/src/layouts/base.html +++ b/src/templates/src/layouts/base.html @@ -42,7 +42,6 @@ } - @@ -73,7 +72,7 @@ -
+
{{ template "header.html" . }} {{ template "notices.html" .Notices }} {{ with .Breadcrumbs }}