From 9e786e132d5a4156e6491e02a2190f7e7ec0bdef Mon Sep 17 00:00:00 2001 From: giggs Date: Sat, 13 Aug 2022 02:13:13 +0000 Subject: [PATCH] New buttons with project colors + small bugfix (#80) Following the discussion on [#74](https://git.handmade.network/hmn/hmn/issues/74), here are changes to the submit buttons so that they match theme/project color. Border colors are set to match the button background. I've also included a "bugfix" where the `editor-toolbar-button-background` parameter in the dark theme.css and variables.scss were missing the # sign. I wasn't sure whether to remove the `form button` values from theme.css and variables.scss and left them, as I'm not sure they're used anywhere now Reviewed-on: https://git.handmade.network/hmn/hmn/pulls/80 Co-authored-by: giggs Co-committed-by: giggs --- public/style.css | 1877 +++++++++--------- public/themes/dark/theme.css | 2 +- src/rawdata/scss/_forms.scss | 7 +- src/rawdata/scss/_forum.scss | 1 + src/rawdata/scss/themes/dark/_variables.scss | 2 +- src/templates/src/project.css | 13 +- src/templates/src/project_edit.html | 4 +- src/templates/src/user_profile.html | 2 +- 8 files changed, 961 insertions(+), 947 deletions(-) diff --git a/public/style.css b/public/style.css index 6c7ee2a..45c2094 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: - * - *
- * - *
- * +/* 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: + * + *
+ * + *
+ * * */ .aspect-ratio, .timeline-item .timeline-content-box.embed { height: 0; @@ -648,30 +648,30 @@ input[type="url"], height: 100%; z-index: 100; } } -/* - - IMAGES - Docs: http://tachyons.io/docs/elements/images/ - +/* + + IMAGES + Docs: http://tachyons.io/docs/elements/images/ + */ /* Responsive images! */ img, video { max-width: 100%; } -/* - - BACKGROUND SIZE - Docs: http://tachyons.io/docs/themes/background-size/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + BACKGROUND SIZE + Docs: http://tachyons.io/docs/themes/background-size/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ -/* - Often used in combination with background image set as an inline style - on an html element. +/* + Often used in combination with background image set as an inline style + on an html element. */ .cover { background-size: cover !important; } @@ -697,25 +697,25 @@ img, video { .contain-l { background-size: contain !important; } } -/* - - BACKGROUND POSITION - - Base: - bg = background - - Modifiers: - -center = center center - -top = top center - -right = center right - -bottom = bottom center - -left = center left - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .bg-center { background-repeat: no-repeat; @@ -788,15 +788,15 @@ img, video { background-repeat: no-repeat; background-position: center left; } } -/* - - OUTLINES - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + OUTLINES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .outline { outline: 1px solid; } @@ -831,27 +831,27 @@ img, video { .outline-0-l { outline: 0; } } -/* - - BORDERS - Docs: http://tachyons.io/docs/themes/borders/ - - Base: - b = border - - Modifiers: - a = all - t = top - r = right - b = bottom - l = left - n = none - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + BORDERS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + b = border + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .ba, .post-content th, .post-content td { border-style: solid; @@ -937,24 +937,24 @@ img, video { border-style: none; border-width: 0; } } -/* - - BORDER COLORS - Docs: http://tachyons.io/docs/themes/borders/ - - Border colors can be used to extend the base - border classes ba,bt,bb,br,bl found in the _borders.css file. - - The base border class by default will set the color of the border - to that of the current text color. These classes are for the cases - where you desire for the text and border colors to be different. - - Base: - b = border - - Modifiers: - --color-name = each color variable name is also a border color name - +/* + + BORDER COLORS + Docs: http://tachyons.io/docs/themes/borders/ + + Border colors can be used to extend the base + border classes ba,bt,bb,br,bl found in the _borders.css file. + + The base border class by default will set the color of the border + to that of the current text color. These classes are for the cases + where you desire for the text and border colors to be different. + + Base: + b = border + + Modifiers: + --color-name = each color variable name is also a border color name + */ .b--black { border-color: #000; } @@ -1142,30 +1142,30 @@ img, video { .b--inherit { border-color: inherit; } -/* - - BORDER RADIUS - Docs: http://tachyons.io/docs/themes/border-radius/ - - Base: - br = border-radius - - Modifiers: - 0 = 0/none - 1 = 1st step in scale - 2 = 2nd step in scale - 3 = 3rd step in scale - 4 = 4th step in scale - - Literal values: - -100 = 100% - -pill = 9999px - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + BORDER RADIUS + Docs: http://tachyons.io/docs/themes/border-radius/ + + Base: + br = border-radius + + Modifiers: + 0 = 0/none + 1 = 1st step in scale + 2 = 2nd step in scale + 3 = 3rd step in scale + 4 = 4th step in scale + + Literal values: + -100 = 100% + -pill = 9999px + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .br0 { border-radius: 0; } @@ -1288,27 +1288,27 @@ img, video { border-top-right-radius: 0; border-bottom-right-radius: 0; } } -/* - - BORDER STYLES - Docs: http://tachyons.io/docs/themes/borders/ - - Depends on base border module in _borders.css - - Base: - b = border-style - - Modifiers: - --none = none - --dotted = dotted - --dashed = dashed - --solid = solid - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + BORDER STYLES + Docs: http://tachyons.io/docs/themes/borders/ + + Depends on base border module in _borders.css + + Base: + b = border-style + + Modifiers: + --none = none + --dotted = dotted + --dashed = dashed + --solid = solid + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .b--dotted { border-style: dotted; } @@ -1352,27 +1352,27 @@ img, video { .b--none-l { border-style: none; } } -/* - - BORDER WIDTHS - Docs: http://tachyons.io/docs/themes/borders/ - - Base: - bw = border-width - - Modifiers: - 0 = 0 width border - 1 = 1st step in border-width scale - 2 = 2nd step in border-width scale - 3 = 3rd step in border-width scale - 4 = 4th step in border-width scale - 5 = 5th step in border-width scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + BORDER WIDTHS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + bw = border-width + + Modifiers: + 0 = 0 width border + 1 = 1st step in border-width scale + 2 = 2nd step in border-width scale + 3 = 3rd step in border-width scale + 4 = 4th step in border-width scale + 5 = 5th step in border-width scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .bw0 { border-width: 0; } @@ -1471,16 +1471,16 @@ img, video { .bl-0-l { border-left-width: 0; } } -/* - - BOX-SHADOW - Docs: http://tachyons.io/docs/themes/box-shadow/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + BOX-SHADOW + Docs: http://tachyons.io/docs/themes/box-shadow/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .shadow-1 { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } @@ -1533,41 +1533,41 @@ img, video { .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } } -/* - - CODE - +/* + + CODE + */ .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } -/* - - COORDINATES - Docs: http://tachyons.io/docs/layout/position/ - - Use in combination with the position module. - - Base: - top - bottom - right - left - - Modifiers: - -0 = literal value 0 - -1 = literal value 1 - -2 = literal value 2 - --1 = literal value -1 - --2 = literal value -2 - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + COORDINATES + Docs: http://tachyons.io/docs/layout/position/ + + Use in combination with the position module. + + Base: + top + bottom + right + left + + Modifiers: + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + --1 = literal value -1 + --2 = literal value -2 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .top-0 { top: 0; } @@ -1776,13 +1776,13 @@ img, video { bottom: 0; left: 0; } } -/* - - CLEARFIX - http://tachyons.io/docs/layout/clearfix/ - +/* + + CLEARFIX + http://tachyons.io/docs/layout/clearfix/ + */ -/* Nicolas Gallaghers Clearfix solution +/* Nicolas Gallaghers Clearfix solution Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { @@ -1837,30 +1837,30 @@ img, video { .cn-l { clear: none; } } -/* - - DISPLAY - Docs: http://tachyons.io/docs/layout/display - - Base: - d = display - - Modifiers: - n = none - b = block - ib = inline-block - it = inline-table - t = table - tc = table-cell - tr = table-row - tcol = table-column - tcolg = table-column-group - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + DISPLAY + Docs: http://tachyons.io/docs/layout/display + + Base: + d = display + + Modifiers: + n = none + b = block + ib = inline-block + it = inline-table + t = table + tc = table-cell + tr = table-row + tcol = table-column + tcolg = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .dn { display: none; } @@ -1895,9 +1895,9 @@ img, video { .dt-column-group { display: table-column-group; } -/* - This will set table to full width and then - all cells will be equal width +/* + This will set table to full width and then + all cells will be equal width */ .dt--fixed { table-layout: fixed; @@ -1984,15 +1984,15 @@ img, video { table-layout: fixed; width: 100%; } } -/* - - FLEXBOX - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .flex, .tab-bar, .edit-form .edit-form-row { display: flex; } @@ -2000,7 +2000,7 @@ img, video { .inline-flex { display: inline-flex; } -/* 1. Fix for Chrome 44 bug. +/* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { flex: 1 1 auto; @@ -2432,30 +2432,30 @@ img, video { .flex-shrink-1-l { flex-shrink: 1; } } -/* - - FLOATS - http://tachyons.io/docs/layout/floats/ - - 1. Floated elements are automatically rendered as block level elements. - Setting floats to display inline will fix the double margin bug in - ie6. You know... just in case. - - 2. Don't forget to clearfix your floats with .cf - - Base: - f = float - - Modifiers: - l = left - r = right - n = none - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + FLOATS + http://tachyons.io/docs/layout/floats/ + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf + + Base: + f = float + + Modifiers: + l = left + r = right + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .fl { float: left; @@ -2498,11 +2498,11 @@ img, video { .fn-l { float: none; } } -/* - - FONT FAMILY GROUPS - Docs: http://tachyons.io/docs/typography/font-family/ - +/* + + FONT FAMILY GROUPS + Docs: http://tachyons.io/docs/typography/font-family/ + */ .sans-serif { font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; } @@ -2519,50 +2519,50 @@ img, video { /* Monospaced Typefaces (for code) */ /* From http://cssfontstack.com */ code, .code { - font-family: Consolas, monaco, monospace; } + 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 STYLE - Docs: http://tachyons.io/docs/typography/font-style/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large + font-family: baskerville, serif; } +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .i { font-style: italic; } @@ -2588,30 +2588,30 @@ code, .code { .fs-normal-l { font-style: normal; } } -/* - - FONT WEIGHT - Docs: http://tachyons.io/docs/typography/font-weight/ - - Base - fw = font-weight - - Modifiers: - 1 = literal value 100 - 2 = literal value 200 - 3 = literal value 300 - 4 = literal value 400 - 5 = literal value 500 - 6 = literal value 600 - 7 = literal value 700 - 8 = literal value 800 - 9 = literal value 900 - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + FONT WEIGHT + Docs: http://tachyons.io/docs/typography/font-weight/ + + Base + fw = font-weight + + Modifiers: + 1 = literal value 100 + 2 = literal value 200 + 3 = literal value 300 + 4 = literal value 400 + 5 = literal value 500 + 6 = literal value 600 + 7 = literal value 700 + 8 = literal value 800 + 9 = literal value 900 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .normal { font-weight: normal; } @@ -2718,10 +2718,10 @@ code, .code { .fw9-l { font-weight: 900; } } -/* - - FORMS - +/* + + FORMS + */ .input-reset { -webkit-appearance: none; @@ -2732,37 +2732,37 @@ code, .code { border: 0; padding: 0; } -/* - - HEIGHTS - Docs: http://tachyons.io/docs/layout/heights/ - - Base: - h = height - min-h = min-height - min-vh = min-height vertical screen height - vh = vertical screen height - - Modifiers - 1 = 1st step in height scale - 2 = 2nd step in height scale - 3 = 3rd step in height scale - 4 = 4th step in height scale - 5 = 5th step in height scale - - -25 = literal value 25% - -50 = literal value 50% - -75 = literal value 75% - -100 = literal value 100% - - -auto = string value of auto - -inherit = string value of inherit - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + HEIGHTS + Docs: http://tachyons.io/docs/layout/heights/ + + Base: + h = height + min-h = min-height + min-vh = min-height vertical screen height + vh = vertical screen height + + Modifiers + 1 = 1st step in height scale + 2 = 2nd step in height scale + 3 = 3rd step in height scale + 4 = 4th step in height scale + 5 = 5th step in height scale + + -25 = literal value 25% + -50 = literal value 50% + -75 = literal value 75% + -100 = literal value 100% + + -auto = string value of auto + -inherit = string value of inherit + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ /* Height Scale */ .h1 { @@ -2927,16 +2927,16 @@ code, .code { .h-inherit-l { height: inherit; } } -/* - - LETTER SPACING - Docs: http://tachyons.io/docs/typography/tracking/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .tracked { letter-spacing: 0.1em; } @@ -2971,16 +2971,16 @@ code, .code { .tracked-mega-l { letter-spacing: 0.25em; } } -/* - - LINE HEIGHT / LEADING - Docs: http://tachyons.io/docs/typography/line-height - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + LINE HEIGHT / LEADING + Docs: http://tachyons.io/docs/typography/line-height + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .lh-solid { line-height: 1; } @@ -3015,11 +3015,11 @@ code, .code { .lh-copy-l { line-height: 1.5; } } -/* - - LINKS - Docs: http://tachyons.io/docs/elements/links/ - +/* + + LINKS + Docs: http://tachyons.io/docs/elements/links/ + */ .link { text-decoration: none; @@ -3039,44 +3039,44 @@ code, .code { transition: color .15s ease-in; outline: 1px dotted currentColor; } -/* - - LISTS - http://tachyons.io/docs/elements/lists/ - +/* + + LISTS + http://tachyons.io/docs/elements/lists/ + */ .list { list-style-type: none; } -/* - - MAX WIDTHS - Docs: http://tachyons.io/docs/layout/max-widths/ - - Base: - mw = max-width - - Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - 6 = 6st step in width scale - 7 = 7nd step in width scale - 8 = 8rd step in width scale - 9 = 9th step in width scale - - -100 = literal value 100% - - -none = string value none - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + MAX WIDTHS + Docs: http://tachyons.io/docs/layout/max-widths/ + + Base: + mw = max-width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + 6 = 6st step in width scale + 7 = 7nd step in width scale + 8 = 8rd step in width scale + 9 = 9th step in width scale + + -100 = literal value 100% + + -none = string value none + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ /* Max Width Percentages */ .mw-100, .edit-form textarea { @@ -3186,46 +3186,46 @@ code, .code { .mw-none-l { max-width: none; } } -/* - - WIDTHS - Docs: http://tachyons.io/docs/layout/widths/ - - Base: - w = width - - Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - - -10 = literal value 10% - -20 = literal value 20% - -25 = literal value 25% - -30 = literal value 30% - -33 = literal value 33% - -34 = literal value 34% - -40 = literal value 40% - -50 = literal value 50% - -60 = literal value 60% - -70 = literal value 70% - -75 = literal value 75% - -80 = literal value 80% - -90 = literal value 90% - -100 = literal value 100% - - -third = 100% / 3 (Not supported in opera mini or IE8) - -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) - -auto = string value auto - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + WIDTHS + Docs: http://tachyons.io/docs/layout/widths/ + + Base: + w = width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + + -10 = literal value 10% + -20 = literal value 20% + -25 = literal value 25% + -30 = literal value 30% + -33 = literal value 33% + -34 = literal value 34% + -40 = literal value 40% + -50 = literal value 50% + -60 = literal value 60% + -70 = literal value 70% + -75 = literal value 75% + -80 = literal value 80% + -90 = literal value 90% + -100 = literal value 100% + + -third = 100% / 3 (Not supported in opera mini or IE8) + -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) + -auto = string value auto + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ /* Width Scale */ .w1 { @@ -3441,15 +3441,15 @@ code, .code { .w-auto-l { width: auto; } } -/* - - OVERFLOW - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .overflow-visible { overflow: visible; } @@ -3565,16 +3565,16 @@ code, .code { .overflow-y-auto-l { overflow-y: auto; } } -/* - - POSITIONING - Docs: http://tachyons.io/docs/layout/position/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + POSITIONING + Docs: http://tachyons.io/docs/layout/position/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .static { position: static; } @@ -3618,11 +3618,11 @@ code, .code { .fixed-l { position: fixed; } } -/* - - OPACITY - Docs: http://tachyons.io/docs/themes/opacity/ - +/* + + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ + */ .o-100 { opacity: 1; } @@ -3663,10 +3663,10 @@ code, .code { .o-0 { opacity: 0; } -/* - - ROTATIONS - +/* + + ROTATIONS + */ .rotate-45 { transform: rotate(45deg); } @@ -3737,15 +3737,15 @@ code, .code { .rotate-315-l { transform: rotate(315deg); } } -/* - - SKINS - Docs: http://tachyons.io/docs/themes/skins/ - - Classes for setting foreground and background colors on elements. - If you haven't declared a border color, but set border on an element, it will - be set to the current text color. - +/* + + SKINS + Docs: http://tachyons.io/docs/themes/skins/ + + Classes for setting foreground and background colors on elements. + If you haven't declared a border color, but set border on an element, it will + be set to the current text color. + */ /* Text colors */ .black-90 { @@ -4088,13 +4088,13 @@ code, .code { .bg-inherit { background-color: inherit; } -/* - - SKINS:PSEUDO - - Customize the color of an element when - it is focused or hovered over. - +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + */ .hover-black:hover, .hover-black:focus { @@ -4541,39 +4541,39 @@ code, .code { background-color: inherit; } /* Variables */ -/* - SPACING - Docs: http://tachyons.io/docs/layout/spacing/ - - An eight step powers of two scale ranging from 0 to 16rem. - - Base: - p = padding - m = margin - - Modifiers: - a = all - h = horizontal - v = vertical - t = top - r = right - b = bottom - l = left - - 0 = none - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + SPACING + Docs: http://tachyons.io/docs/layout/spacing/ + + An eight step powers of two scale ranging from 0 to 16rem. + + Base: + p = padding + m = margin + + Modifiers: + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom + l = left + + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .pa0 { padding: 0; } @@ -5745,32 +5745,32 @@ input[type=submit]:not(.button-small), .notice { margin-left: 16rem; margin-right: 16rem; } } -/* - NEGATIVE MARGINS - - Base: - n = negative - - Modifiers: - a = all - t = top - r = right - b = bottom - l = left - - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + NEGATIVE MARGINS + + Base: + n = negative + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .na1 { margin: -0.25rem; } @@ -6093,11 +6093,11 @@ input[type=submit]:not(.button-small), .notice { .nt7-l { margin-top: -16rem; } } -/* - - TABLES - Docs: http://tachyons.io/docs/elements/tables/ - +/* + + TABLES + Docs: http://tachyons.io/docs/elements/tables/ + */ .collapse { border-collapse: collapse; @@ -6121,17 +6121,17 @@ input[type=submit]:not(.button-small), .notice { .stripe-dark:nth-child(odd) { background-color: rgba(0, 0, 0, 0.1); } -/* - - TEXT DECORATION - Docs: http://tachyons.io/docs/typography/text-decoration/ - - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + TEXT DECORATION + Docs: http://tachyons.io/docs/typography/text-decoration/ + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .strike { text-decoration: line-through; } @@ -6166,25 +6166,25 @@ input[type=submit]:not(.button-small), .notice { .no-underline-l { text-decoration: none; } } -/* - - TEXT ALIGN - Docs: http://tachyons.io/docs/typography/text-align/ - - Base - t = text-align - - Modifiers - l = left - r = right - c = center - j = justify - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + TEXT ALIGN + Docs: http://tachyons.io/docs/typography/text-align/ + + Base + t = text-align + + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .tl, .edit-form .edit-form-row > :first-child { text-align: left; } @@ -6228,25 +6228,25 @@ input[type=submit]:not(.button-small), .notice { .tj-l { text-align: justify; } } -/* - - TEXT TRANSFORM - Docs: http://tachyons.io/docs/typography/text-transform/ - - Base: - tt = text-transform - - Modifiers - c = capitalize - l = lowercase - u = uppercase - n = none - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + TEXT TRANSFORM + Docs: http://tachyons.io/docs/typography/text-transform/ + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .ttc { text-transform: capitalize; } @@ -6290,32 +6290,32 @@ input[type=submit]:not(.button-small), .notice { .ttn-l { text-transform: none; } } -/* - - TYPE SCALE - Docs: http://tachyons.io/docs/typography/scale/ - - Base: - f = font-size - - Modifiers - 1 = 1st step in size scale - 2 = 2nd step in size scale - 3 = 3rd step in size scale - 4 = 4th step in size scale - 5 = 5th step in size scale - 6 = 6th step in size scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large +/* + + TYPE SCALE + Docs: http://tachyons.io/docs/typography/scale/ + + Base: + f = font-size + + Modifiers + 1 = 1st step in size scale + 2 = 2nd step in size scale + 3 = 3rd step in size scale + 4 = 4th step in size scale + 5 = 5th step in size scale + 6 = 6th step in size scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -/* - * For Hero/Marketing Titles - * - * These generally are too large for mobile - * so be careful using them on smaller screens. +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. * */ .f-6, .f-headline { @@ -6413,16 +6413,16 @@ input[type=submit]:not(.button-small), .notice { .f7-l { font-size: 0.75rem; } } -/* - - TYPOGRAPHY - http://tachyons.io/docs/typography/measure/ - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ /* Measure is limited to ~66 characters */ .measure { @@ -6505,15 +6505,15 @@ input[type=submit]:not(.button-small), .notice { overflow: hidden; text-overflow: ellipsis; } } -/* - - UTILITIES - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ /* Equivalent to .overflow-y-scroll */ .overflow-container { @@ -6556,19 +6556,19 @@ input[type=submit]:not(.button-small), .notice { .ml-auto-l { margin-left: auto; } } -/* - - VISIBILITY - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + VISIBILITY + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ -/* - Text that is hidden but accessible - Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .clip { position: fixed !important; @@ -6601,15 +6601,15 @@ input[type=submit]:not(.button-small), .notice { /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } } -/* - - WHITE SPACE - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .ws-normal { white-space: normal; } @@ -6644,15 +6644,15 @@ input[type=submit]:not(.button-small), .notice { .pre-l { white-space: pre; } } -/* - - VERTICAL ALIGN - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + */ .v-base { vertical-align: baseline; } @@ -6696,24 +6696,24 @@ input[type=submit]:not(.button-small), .notice { .v-btm-l { vertical-align: bottom; } } -/* - - HOVER EFFECTS - Docs: http://tachyons.io/docs/themes/hovers/ - - - Dim - - Glow - - Hide Child - - Underline text - - Grow - - Pointer - - Shadow - +/* + + HOVER EFFECTS + Docs: http://tachyons.io/docs/themes/hovers/ + + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow + */ -/* - - Dim element on hover by adding the dim class. - +/* + + Dim element on hover by adding the dim class. + */ .dim { opacity: 1; @@ -6728,10 +6728,10 @@ input[type=submit]:not(.button-small), .notice { opacity: .8; transition: opacity .15s ease-out; } -/* - - Animate opacity to 100% on hover by adding the glow class. - +/* + + Animate opacity to 100% on hover by adding the glow class. + */ .glow { transition: opacity .15s ease-in; } @@ -6741,19 +6741,19 @@ input[type=submit]:not(.button-small), .notice { opacity: 1; transition: opacity .15s ease-in; } -/* - - Hide child & reveal on hover: - - Put the hide-child class on a parent element and any nested element with the - child class will be hidden and displayed on hover or focus. - -
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
+/* + + Hide child & reveal on hover: + + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. + +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
*/ .hide-child .child { opacity: 0; @@ -6769,7 +6769,7 @@ input[type=submit]:not(.button-small), .notice { .underline-hover:focus { text-decoration: underline; } -/* Can combine this with overflow-hidden to make background images grow on hover +/* Can combine this with overflow-hidden to make background images grow on hover * even if you are using background-size: cover */ .grow { -moz-osx-font-smoothing: grayscale; @@ -6801,11 +6801,11 @@ input[type=submit]:not(.button-small), .notice { .pointer:hover { cursor: pointer; } -/* - Add shadow on hover. - - Performant box-shadow animation pattern from - http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ */ .shadow-hover { cursor: pointer; @@ -6829,46 +6829,46 @@ input[type=submit]:not(.button-small), .notice { .shadow-hover:focus::after { opacity: 1; } -/* Combine with classes in skins and skins-pseudo for +/* 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; } -/* - - Z-INDEX - - Base - z = z-index - - Modifiers - -0 = literal value 0 - -1 = literal value 1 - -2 = literal value 2 - -3 = literal value 3 - -4 = literal value 4 - -5 = literal value 5 - -999 = literal value 999 - -9999 = literal value 9999 - - -max = largest accepted z-index value as integer - - -inherit = string value inherit - -initial = string value initial - -unset = string value unset - - MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index - Spec: http://www.w3.org/TR/CSS2/zindex.html - Articles: - https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ - - Tips on extending: - There might be a time worth using negative z-index values. - Or if you are using tachyons with another project, you might need to - adjust these values to suit your needs. - +/* + + Z-INDEX + + Base + z = z-index + + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. + */ .z-0 { z-index: 0; } @@ -6906,12 +6906,12 @@ input[type=submit]:not(.button-small), .notice { .z-unset { z-index: unset; } -/* - - NESTED - Tachyons module for styling nested elements - that are generated by a cms. - +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + */ .nested-copy-line-height p, .nested-copy-line-height ul, @@ -6954,32 +6954,32 @@ input[type=submit]:not(.button-small), .notice { color: #96ccff; transition: color .15s ease-in; } -/* - - STYLES - - Add custom styles here. - +/* + + STYLES + + Add custom styles here. + */ -/* -Inserts a CSS expression with one or more custom variables. -You can provide an arbitrary number of strings in the second -argument, separated by spaces. Any strings corresponding to -variable names will be replaced by the correct values, while -other strings are left untouched. - -Example usage: - -@include usevar(border-color, dimmer-color); -@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")"); - -For clarity and to avoid syntax issues, you are encouraged to -use unquoted strings for variables and quoted strings for -everything else. - -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. +/* +Inserts a CSS expression with one or more custom variables. +You can provide an arbitrary number of strings in the second +argument, separated by spaces. Any strings corresponding to +variable names will be replaced by the correct values, while +other strings are left untouched. + +Example usage: + +@include usevar(border-color, dimmer-color); +@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")"); + +For clarity and to avoid syntax issues, you are encouraged to +use unquoted strings for variables and quoted strings for +everything else. + +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 { /* Comment */ @@ -8404,10 +8404,10 @@ input[type=button], input[type=submit] { color: black; color: var(--form-button-color); - background-color: #fff; - background-color: var(--form-button-background); - border-color: #ccc; - border-color: var(--form-button-border-color); + background-color: #666; + background-color: var(--theme-color); + border-color: #666; + border-color: var(--theme-color); border-width: 1px; border-style: solid; display: inline-block; @@ -8422,8 +8422,10 @@ input[type=submit] { input[type=submit]:hover { color: #4c9ed9; color: var(--form-button-color-active); - background-color: #f2f2f2; - background-color: var(--form-button-background-active); } + background-color: #aaa; + background-color: var(--theme-color-dim); + border-color: #aaa; + border-color: var(--theme-color-dim); } button.lite, .button.lite, @@ -8527,6 +8529,7 @@ input[type=submit] { width: 40px; height: 40px; flex-shrink: 0; + object-fit: cover; border-radius: 100%; overflow: hidden; object-fit: cover; diff --git a/public/themes/dark/theme.css b/public/themes/dark/theme.css index bcb5d54..d9a2d2e 100644 --- a/public/themes/dark/theme.css +++ b/public/themes/dark/theme.css @@ -270,7 +270,7 @@ pre, code, .codeblock { --landing-search-background-hover: #181818; --editor-toolbar-background: #282828; --editor-toolbar-border-color: #333; - --editor-toolbar-button-background: 282828; + --editor-toolbar-button-background: #282828; --editor-toolbar-button-background-hover: #333; --editor-toolbar-button-border-color: #333; --post-blockquote-border-color: #555; diff --git a/src/rawdata/scss/_forms.scss b/src/rawdata/scss/_forms.scss index c699a2c..b656b4b 100644 --- a/src/rawdata/scss/_forms.scss +++ b/src/rawdata/scss/_forms.scss @@ -150,8 +150,8 @@ input, select, textarea { } @include usevar('color', 'form-button-color'); - @include usevar('background-color', 'form-button-background'); - @include usevar('border-color', 'form-button-border-color'); + @include usevar('background-color', 'theme-color'); + @include usevar('border-color', 'theme-color'); border-width: 1px; border-style: solid; @@ -163,7 +163,8 @@ input, select, textarea { &:hover { @include usevar('color', 'form-button-color-active'); - @include usevar('background-color', 'form-button-background-active'); + @include usevar('background-color', 'theme-color-dim'); + @include usevar('border-color', 'theme-color-dim'); } &.lite { diff --git a/src/rawdata/scss/_forum.scss b/src/rawdata/scss/_forum.scss index c63b29f..0de6165 100644 --- a/src/rawdata/scss/_forum.scss +++ b/src/rawdata/scss/_forum.scss @@ -54,6 +54,7 @@ width: 40px; height: 40px; flex-shrink: 0; + object-fit: cover; border-radius: 100%; overflow: hidden; object-fit: cover; diff --git a/src/rawdata/scss/themes/dark/_variables.scss b/src/rawdata/scss/themes/dark/_variables.scss index 48f13e0..72ec76a 100644 --- a/src/rawdata/scss/themes/dark/_variables.scss +++ b/src/rawdata/scss/themes/dark/_variables.scss @@ -77,7 +77,7 @@ $vars: ( editor-toolbar-background: #282828, editor-toolbar-border-color: #333, - editor-toolbar-button-background: 282828, + editor-toolbar-button-background: #282828, editor-toolbar-button-background-hover: #333, editor-toolbar-button-border-color: #333, diff --git a/src/templates/src/project.css b/src/templates/src/project.css index 2c90d94..5ca4474 100644 --- a/src/templates/src/project.css +++ b/src/templates/src/project.css @@ -38,11 +38,20 @@ header .content-title .subtitle { border-top-color: var(--theme-dim); } -a, .thread:before, button, .button, input[type=button], input[type=submit] { +a, .thread:before, button, .button, input[type=button] { color: {{ $linkColor }}; color: var(--link-color); } -a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover { + +.submit, input[type=submit] { + color: white; +} + +a.submit:hover, .submit:hover, input[type=submit]:hover { + color: white; +} + +a:hover, button:hover, .button:hover, input[type=button]:hover { color: {{ $linkHoverColor }}; color: var(--link-hover-color); } diff --git a/src/templates/src/project_edit.html b/src/templates/src/project_edit.html index 5838783..c96548a 100644 --- a/src/templates/src/project_edit.html +++ b/src/templates/src/project_edit.html @@ -141,7 +141,7 @@ {{ if .Editing }} {{ else }} - Next + Next {{ end }} @@ -196,7 +196,7 @@ {{ if .Editing }} {{ else }} - Next + Next {{ end }} diff --git a/src/templates/src/user_profile.html b/src/templates/src/user_profile.html index 7994c85..961afbb 100644 --- a/src/templates/src/user_profile.html +++ b/src/templates/src/user_profile.html @@ -137,7 +137,7 @@ {{ end }} {{ if .OwnProfile }} {{ if .CanAddProject }} - Add New Project + Add New Project {{ else }} You have reached the maximum number of personal projects. {{ end }}