diff --git a/public/style.css b/public/style.css index 45c2094d..da157f3f 100644 --- a/public/style.css +++ b/public/style.css @@ -1,11 +1,11 @@ @charset "UTF-8"; /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ -/* Document +/* Document ========================================================================== */ -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { line-height: 1.15; @@ -15,16 +15,16 @@ html { -webkit-text-size-adjust: 100%; /* 2 */ } -/* Sections +/* Sections ========================================================================== */ -/** - * Remove the margin in all browsers (opinionated). +/** + * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/** - * Add the correct display in IE 9-. +/** + * Add the correct display in IE 9-. */ article, aside, @@ -34,19 +34,19 @@ nav, section { display: block; } -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } -/* Grouping content +/* Grouping content ========================================================================== */ -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. */ figcaption, figure, @@ -54,15 +54,15 @@ main { /* 1 */ display: block; } -/** - * Add the correct margin in IE 8. +/** + * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; @@ -72,9 +72,9 @@ hr { overflow: visible; /* 2 */ } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; @@ -82,11 +82,11 @@ pre { font-size: 1em; /* 2 */ } -/* Text-level semantics +/* Text-level semantics ========================================================================== */ -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; @@ -94,9 +94,9 @@ a { -webkit-text-decoration-skip: objects; /* 2 */ } -/** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; @@ -106,23 +106,23 @@ abbr[title] { text-decoration: underline dotted; /* 2 */ } -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } -/** - * Add the correct font weight in Chrome, Edge, and Safari. +/** + * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, @@ -132,28 +132,28 @@ samp { font-size: 1em; /* 2 */ } -/** - * Add the correct font style in Android 4.3-. +/** + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } -/** - * Add the correct background and color in IE 9-. +/** + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } -/** - * Add the correct font size in all browsers. +/** + * Add the correct font size in all browsers. */ small { font-size: 80%; } -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { @@ -168,39 +168,39 @@ sub { sup { top: -0.5em; } -/* Embedded content +/* Embedded content ========================================================================== */ -/** - * Add the correct display in IE 9-. +/** + * Add the correct display in IE 9-. */ audio, video { display: inline-block; } -/** - * Add the correct display in iOS 4-7. +/** + * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } -/** - * Remove the border on images inside links in IE 10-. +/** + * Remove the border on images inside links in IE 10-. */ img { border-style: none; } -/** - * Hide the overflow in IE. +/** + * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } -/* Forms +/* Forms ========================================================================== */ -/** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. */ button, input, @@ -216,28 +216,28 @@ textarea { margin: 0; /* 2 */ } -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], @@ -246,8 +246,8 @@ html [type="button"], -webkit-appearance: button; /* 2 */ } -/** - * Remove the inner border and padding in Firefox. +/** + * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, @@ -256,8 +256,8 @@ button::-moz-focus-inner, border-style: none; padding: 0; } -/** - * Restore the focus styles unset by the previous rule. +/** + * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, @@ -265,17 +265,17 @@ button:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } -/** - * Correct the padding in Firefox. +/** + * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; @@ -291,9 +291,9 @@ legend { white-space: normal; /* 1 */ } -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; @@ -301,15 +301,15 @@ progress { vertical-align: baseline; /* 2 */ } -/** - * Remove the default vertical scrollbar in IE. +/** + * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -318,16 +318,16 @@ textarea { padding: 0; /* 2 */ } -/** - * Correct the cursor style of increment and decrement buttons in Chrome. +/** + * 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; } -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; @@ -335,16 +335,16 @@ textarea { outline-offset: -2px; /* 2 */ } -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. +/** + * 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; } -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; @@ -352,57 +352,57 @@ textarea { font: inherit; /* 2 */ } -/* Interactive +/* Interactive ========================================================================== */ -/* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } -/* - * Add the correct display in all browsers. +/* + * Add the correct display in all browsers. */ summary { display: list-item; } -/* Scripting +/* Scripting ========================================================================== */ -/** - * Add the correct display in IE 9-. +/** + * Add the correct display in IE 9-. */ canvas { display: inline-block; } -/** - * Add the correct display in IE. +/** + * Add the correct display in IE. */ template { display: none; } -/* Hidden +/* Hidden ========================================================================== */ -/** - * Add the correct display in IE 10-. +/** + * Add the correct display in IE 10-. */ [hidden] { display: none; } -/* - - VARIABLES - +/* + + VARIABLES + */ -/* - - DEBUG CHILDREN - Docs: http://tachyons.io/docs/debug/ - - Just add the debug class to any element to see outlines on its - children. - +/* + + DEBUG CHILDREN + Docs: http://tachyons.io/docs/debug/ + + Just add the debug class to any element to see outlines on its + children. + */ .debug * { outline: 1px solid gold; } @@ -413,15 +413,15 @@ template { .debug-black * { outline: 1px solid black; } -/* - - DEBUG GRID - http://tachyons.io/docs/debug-grid/ - - Can be useful for debugging layout issues - or helping to make sure things line up perfectly. - Just tack one of these classes onto a parent element. - +/* + + DEBUG GRID + http://tachyons.io/docs/debug-grid/ + + Can be useful for debugging layout issues + or helping to make sure things line up perfectly. + Just tack one of these classes onto a parent element. + */ .debug-grid { background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; } @@ -435,10 +435,10 @@ template { .debug-grid-16-solid { background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; } -/* - - BOX SIZING - +/* + + BOX SIZING + */ html, body, @@ -476,22 +476,22 @@ input[type="url"], .border-box { box-sizing: border-box; } -/* - - ASPECT RATIOS - +/* + + ASPECT RATIOS + */ -/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. - * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e - * Make sure there are no height and width attributes on the embedded media. - * Adapted from: https://github.com/suitcss/components-flex-embed - * - * Example: - * - *