From: Bjørn Erik Pedersen Date: Fri, 20 Oct 2023 07:43:56 +0000 (+0200) Subject: Merge commit 'e509cac533600cf4fa8382c9cdab78ddd82db688' X-Git-Url: http://git.maquefel.me/?a=commitdiff_plain;h=e2dd4cd05fa96a08d49b3b198edf0ccf9a94970e;p=brevno-suite%2Fhugo Merge commit 'e509cac533600cf4fa8382c9cdab78ddd82db688' --- e2dd4cd05fa96a08d49b3b198edf0ccf9a94970e diff --cc docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/css/_social-icons.css index 04ea11ec5,000000000..6cfa7b1b4 mode 100644,000000..100644 --- a/docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/css/_social-icons.css +++ b/docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/css/_social-icons.css @@@ -1,23 -1,0 +1,52 @@@ - .facebook, .twitter, .instagram, .youtube { - fill: #BABABA; ++.facebook, ++.twitter, ++.instagram, ++.youtube { ++ fill: #bababa; +} +.facebook:hover { + fill: #3b5998; +} + +.twitter { + fill: #55acee; +} + +.twitter:hover { - fill: #BABABA; ++ fill: #bababa; +} + - +.instagram:hover { + fill: #e95950; +} + +.youtube:hover { + fill: #bb0000; +} ++ ++.mstdn { ++ display: inline-block; ++ background-color: #282c37; ++ color: #d9e1e8; ++ text-decoration: none; ++ padding: 4px 10px 4px 30px; ++ border-radius: 4px; ++ font-size: 16px; ++ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2261.076954mm%22%20height%3D%2265.47831mm%22%20viewBox%3D%220%200%20216.4144%20232.00976%22%3E%3Cpath%20d%3D%22M211.80734%20139.0875c-3.18125%2016.36625-28.4925%2034.2775-57.5625%2037.74875-15.15875%201.80875-30.08375%203.47125-45.99875%202.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125%200%202.53375.15625%204.94625.46875%207.2025%203.38375%2025.68625%2025.47%2027.225%2046.39125%2027.9425%2021.11625.7225%2039.91875-5.20625%2039.91875-5.20625l.8675%2019.09s-14.77%207.93125-41.08125%209.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234%20213.82%201.40609%20165.31125.20859%20116.09125c-.365-14.61375-.14-28.39375-.14-39.91875%200-50.33%2032.97625-65.0825%2032.97625-65.0825C49.67234%203.45375%2078.20359.2425%20107.86484%200h.72875c29.66125.2425%2058.21125%203.45375%2074.8375%2011.09%200%200%2032.975%2014.7525%2032.975%2065.0825%200%200%20.41375%2037.13375-4.59875%2062.915%22%20fill%3D%22%233088d4%22%2F%3E%3Cpath%20d%3D%22M177.50984%2080.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025%200-17.4175%207.5075-17.4175%2022.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375%200-15.74%206.32875-15.74%2018.7975v59.15H38.90484V80.077c0-12.455%203.17125-22.3525%209.54125-29.675%206.56875-7.3225%2015.17125-11.07625%2025.85-11.07625%2012.355%200%2021.71125%204.74875%2027.8975%2014.2475l6.01375%2010.08125%206.015-10.08125c6.185-9.49875%2015.54125-14.2475%2027.8975-14.2475%2010.6775%200%2019.28%203.75375%2025.85%2011.07625%206.36875%207.3225%209.54%2017.22%209.54%2029.675%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); ++ background-size: 16px; ++ background-repeat: no-repeat; ++ background-position: top 50% left 8px; ++ transition: all 0.5s; ++} ++.mstdn:hover { ++ background-color: #484c56; ++} ++ ++.mstdn > span { ++ color: #9baec8; ++ font-size: 12px; ++ padding-left: 3px; ++} ++.mstdn > span:before { ++ content: "@"; ++} diff --cc docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/output/css/app.css index af648c759,000000000..f5e09aeb1 mode 100644,000000..100644 --- a/docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/output/css/app.css +++ b/docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/output/css/app.css @@@ -1,5307 -1,0 +1,5317 @@@ +/* muli-200normal - latin */ +@font-face { + font-family: 'Muli'; + font-style: normal; + font-display: swap; + font-weight: 200; + src: + local('Muli Extra Light '), + local('Muli-Extra Light'), + url(/fonts/muli-latin-200.woff2) format('woff2'), + url(/fonts/muli-latin-200.woff) format('woff'); /* Modern Browsers */ +} +/* muli-200italic - latin */ +@font-face { + font-family: 'Muli'; + font-style: italic; + font-display: swap; + font-weight: 200; + src: + local('Muli Extra Light italic'), + local('Muli-Extra Lightitalic'), + url(/fonts/muli-latin-200italic.woff2) format('woff2'), + url(/fonts/muli-latin-200italic.woff) format('woff'); /* Modern Browsers */ +} +/* muli-300normal - latin */ +@font-face { + font-family: 'Muli'; + font-style: normal; + font-display: swap; + font-weight: 300; + src: + local('Muli Light '), + local('Muli-Light'), + url(/fonts/muli-latin-300.woff2) format('woff2'), + url(/fonts/muli-latin-300.woff) format('woff'); /* Modern Browsers */ +} +/* muli-300italic - latin */ +@font-face { + font-family: 'Muli'; + font-style: italic; + font-display: swap; + font-weight: 300; + src: + local('Muli Light italic'), + local('Muli-Lightitalic'), + url(/fonts/muli-latin-300italic.woff2) format('woff2'), + url(/fonts/muli-latin-300italic.woff) format('woff'); /* Modern Browsers */ +} +/* muli-400normal - latin */ +@font-face { + font-family: 'Muli'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: + local('Muli Regular '), + local('Muli-Regular'), + url(/fonts/muli-latin-400.woff2) format('woff2'), + url(/fonts/muli-latin-400.woff) format('woff'); /* Modern Browsers */ +} +/* muli-400italic - latin */ +@font-face { + font-family: 'Muli'; + font-style: italic; + font-display: swap; + font-weight: 400; + src: + local('Muli Regular italic'), + local('Muli-Regularitalic'), + url(/fonts/muli-latin-400italic.woff2) format('woff2'), + url(/fonts/muli-latin-400italic.woff) format('woff'); /* Modern Browsers */ +} +/* muli-600normal - latin */ +@font-face { + font-family: 'Muli'; + font-style: normal; + font-display: swap; + font-weight: 600; + src: + local('Muli SemiBold '), + local('Muli-SemiBold'), + url(/fonts/muli-latin-600.woff2) format('woff2'), + url(/fonts/muli-latin-600.woff) format('woff'); /* Modern Browsers */ +} +/* muli-600italic - latin */ +@font-face { + font-family: 'Muli'; + font-style: italic; + font-display: swap; + font-weight: 600; + src: + local('Muli SemiBold italic'), + local('Muli-SemiBolditalic'), + url(/fonts/muli-latin-600italic.woff2) format('woff2'), + url(/fonts/muli-latin-600italic.woff) format('woff'); /* Modern Browsers */ +} +/* muli-700normal - latin */ +@font-face { + font-family: 'Muli'; + font-style: normal; + font-display: swap; + font-weight: 700; + src: + local('Muli Bold '), + local('Muli-Bold'), + url(/fonts/muli-latin-700.woff2) format('woff2'), + url(/fonts/muli-latin-700.woff) format('woff'); /* Modern Browsers */ +} +/* muli-700italic - latin */ +@font-face { + font-family: 'Muli'; + font-style: italic; + font-display: swap; + font-weight: 700; + src: + local('Muli Bold italic'), + local('Muli-Bolditalic'), + url(/fonts/muli-latin-700italic.woff2) format('woff2'), + url(/fonts/muli-latin-700italic.woff) format('woff'); /* Modern Browsers */ +} +/* muli-800normal - latin */ +@font-face { + font-family: 'Muli'; + font-style: normal; + font-display: swap; + font-weight: 800; + src: + local('Muli ExtraBold '), + local('Muli-ExtraBold'), + url(/fonts/muli-latin-800.woff2) format('woff2'), + url(/fonts/muli-latin-800.woff) format('woff'); /* Modern Browsers */ +} +/* muli-800italic - latin */ +@font-face { + font-family: 'Muli'; + font-style: italic; + font-display: swap; + font-weight: 800; + src: + local('Muli ExtraBold italic'), + local('Muli-ExtraBolditalic'), + url(/fonts/muli-latin-800italic.woff2) format('woff2'), + url(/fonts/muli-latin-800italic.woff) format('woff'); /* Modern Browsers */ +} +/* muli-900normal - latin */ +@font-face { + font-family: 'Muli'; + font-style: normal; + font-display: swap; + font-weight: 900; + src: + local('Muli Black '), + local('Muli-Black'), + url(/fonts/muli-latin-900.woff2) format('woff2'), + url(/fonts/muli-latin-900.woff) format('woff'); /* Modern Browsers */ +} +/* muli-900italic - latin */ +@font-face { + font-family: 'Muli'; + font-style: italic; + font-display: swap; + font-weight: 900; + src: + local('Muli Black italic'), + local('Muli-Blackitalic'), + url(/fonts/muli-latin-900italic.woff2) format('woff2'), + url(/fonts/muli-latin-900italic.woff) format('woff'); /* Modern Browsers */ +} + + +/*Base Styles*/ +/*! TACHYONS v4.7.0 | http://tachyons.io */ +/* + * NOTE: The Tachyons folder is for backup/reference only. This file references the module + * ________ ______ + * ___ __/_____ _________ /______ ______________________ + * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ + * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) + * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ + * /____/ + * + * TABLE OF CONTENTS + * + * 1. External Library Includes + * - Normalize.css | http://normalize.css.github.io + * 2. Tachyons Modules + * 3. Variables + * - Media Queries + * - Colors + * 4. Debugging + * - Debug all + * - Debug children + * + */ +/* External Library Includes */ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} +/** + * 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 + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + -webkit-box-sizing: content-box; + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + 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. + */ +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ +} +/** + * 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. + */ +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} +/** + * 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. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} +/** + * 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. + */ +button, +select { /* 1 */ + text-transform: none; +} +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} +/** + * 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. + */ +legend { + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ + padding: 0; /* 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; +} +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[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. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} +/* Modules */ +/* + + BOX SIZING + +*/ +html, +body, +div, +article, +aside, +section, +main, +nav, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1,h2,h3,h4,h5,h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +blockquote, +figcaption, +figure, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +/*@import 'tachyons/src/_aspect-ratios';*/ +/* + + IMAGES + Docs: http://tachyons.io/docs/elements/images/ + +*/ +/* Responsive images! */ +img { max-width: 100%; } +/* + + 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. +*/ +.cover { background-size: cover!important; } +.contain { background-size: contain!important; } +@media screen and (min-width: 30em) { + .cover-ns { background-size: cover!important; } + .contain-ns { background-size: contain!important; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .cover-m { background-size: cover!important; } + .contain-m { background-size: contain!important; } +} +@media screen and (min-width: 60em) { + .cover-l { background-size: cover!important; } + .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 + + */ +.bg-center { + background-repeat: no-repeat; + background-position: center center; +} +.bg-top { + background-repeat: no-repeat; + background-position: top center; +} +.bg-right { + background-repeat: no-repeat; + background-position: center right; +} +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; +} +.bg-left { + background-repeat: no-repeat; + background-position: center left; +} +@media screen and (min-width: 30em) { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; + } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; + } +} +@media screen and (min-width: 60em) { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; + } +} +/*@import 'tachyons/src/_outlines';*/ +/* + + 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 { border-style: solid; border-width: 1px; } +.bt { border-top-style: solid; border-top-width: 1px; } +.br { border-right-style: solid; border-right-width: 1px; } +.bb { border-bottom-style: solid; border-bottom-width: 1px; } +.bl { border-left-style: solid; border-left-width: 1px; } +.bn { border-style: none; border-width: 0; } +@media screen and (min-width: 30em) { + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } + .bn-m { border-style: none; border-width: 0; } +} +@media screen and (min-width: 60em) { + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } + .bn-l { 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 + +*/ +.b--black { border-color: #000; } +.b--near-black { border-color: #111; } +.b--dark-gray { border-color: #333; } +.b--mid-gray { border-color: #555; } +.b--gray { border-color: #777; } +.b--silver { border-color: #999; } +.b--light-silver { border-color: #aaa; } +.b--moon-gray { border-color: #ccc; } +.b--light-gray { border-color: #eee; } +.b--near-white { border-color: #f4f4f4; } +.b--white { border-color: #fff; } +.b--white-90 { border-color: rgba(255, 255, 255, .9); } +.b--white-80 { border-color: rgba(255, 255, 255, .8); } +.b--white-70 { border-color: rgba(255, 255, 255, .7); } +.b--white-60 { border-color: rgba(255, 255, 255, .6); } +.b--white-50 { border-color: rgba(255, 255, 255, .5); } +.b--white-40 { border-color: rgba(255, 255, 255, .4); } +.b--white-30 { border-color: rgba(255, 255, 255, .3); } +.b--white-20 { border-color: rgba(255, 255, 255, .2); } +.b--white-10 { border-color: rgba(255, 255, 255, .1); } +.b--white-05 { border-color: rgba(255, 255, 255, .05); } +.b--white-025 { border-color: rgba(255, 255, 255, .025); } +.b--white-0125 { border-color: rgba(255, 255, 255, .0125); } +.b--black-90 { border-color: rgba(0, 0, 0, .9); } +.b--black-80 { border-color: rgba(0, 0, 0, .8); } +.b--black-70 { border-color: rgba(0, 0, 0, .7); } +.b--black-60 { border-color: rgba(0, 0, 0, .6); } +.b--black-50 { border-color: rgba(0, 0, 0, .5); } +.b--black-40 { border-color: rgba(0, 0, 0, .4); } +.b--black-30 { border-color: rgba(0, 0, 0, .3); } +.b--black-20 { border-color: rgba(0, 0, 0, .2); } +.b--black-10 { border-color: rgba(0, 0, 0, .1); } +.b--black-05 { border-color: rgba(0, 0, 0, .05); } +.b--black-025 { border-color: rgba(0, 0, 0, .025); } +.b--black-0125 { border-color: rgba(0, 0, 0, .0125); } +.b--dark-red { border-color: #e7040f; } +.b--red { border-color: #ff4136; } +.b--light-red { border-color: #ff725c; } +.b--orange { border-color: #ff6300; } +.b--gold { border-color: #ffb700; } +.b--yellow { border-color: #ffd700; } +.b--light-yellow { border-color: #fbf1a9; } +.b--purple { border-color: #5e2ca5; } +.b--light-purple { border-color: #a463f2; } +.b--dark-pink { border-color: #d5008f; } +.b--hot-pink { border-color: #ff41b4; } +.b--pink { border-color: #ff80cc; } +.b--light-pink { border-color: #ffa3d7; } +.b--dark-green { border-color: #137752; } +.b--green { border-color: #19a974; } +.b--light-green { border-color: #9eebcf; } +.b--navy { border-color: #001b44; } +.b--dark-blue { border-color: #00449e; } +.b--blue { border-color: #0594CB; } +.b--light-blue { border-color: #96ccff; } +.b--lightest-blue { border-color: #cdecff; } +.b--washed-blue { border-color: #f6fffe; } +.b--washed-green { border-color: #e8fdf5; } +.b--washed-yellow { border-color: #fffceb; } +.b--washed-red { border-color: #ffdfdf; } +.b--transparent { border-color: transparent; } +.b--inherit { border-color: inherit; } - .b--initial { border-color: currentColor; border-color: initial; } - .b--unset { border-color: unset; } +/* + + 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; } +.br1 { border-radius: .125rem; } +.br2 { border-radius: .25rem; } +.br3 { border-radius: .5rem; } +.br4 { border-radius: 1rem; } +.br-100 { border-radius: 100%; } +.br-pill { border-radius: 9999px; } +.br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +.br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +.br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +.br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - .br-inherit { border-radius: inherit; } - .br-initial { border-radius: 0; border-radius: initial; } - .br-unset { border-radius: unset; } +@media screen and (min-width: 30em) { + .br0-ns { border-radius: 0; } + .br1-ns { border-radius: .125rem; } + .br2-ns { border-radius: .25rem; } + .br3-ns { border-radius: .5rem; } + .br4-ns { border-radius: 1rem; } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - .br-inherit-ns { border-radius: inherit; } - .br-initial-ns { border-radius: 0; border-radius: initial; } - .br-unset-ns { border-radius: unset; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .br0-m { border-radius: 0; } + .br1-m { border-radius: .125rem; } + .br2-m { border-radius: .25rem; } + .br3-m { border-radius: .5rem; } + .br4-m { border-radius: 1rem; } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } + .br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - .br-inherit-m { border-radius: inherit; } - .br-initial-m { border-radius: 0; border-radius: initial; } - .br-unset-m { border-radius: unset; } +} +@media screen and (min-width: 60em) { + .br0-l { border-radius: 0; } + .br1-l { border-radius: .125rem; } + .br2-l { border-radius: .25rem; } + .br3-l { border-radius: .5rem; } + .br4-l { border-radius: 1rem; } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } + .br--bottom-l { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - .br-inherit-l { border-radius: inherit; } - .br-initial-l { border-radius: 0; border-radius: initial; } - .br-unset-l { border-radius: unset; } +} +/* + + 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; } +.b--dashed { border-style: dashed; } +.b--solid { border-style: solid; } +.b--none { border-style: none; } +@media screen and (min-width: 30em) { + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .b--dotted-m { border-style: dotted; } + .b--dashed-m { border-style: dashed; } + .b--solid-m { border-style: solid; } + .b--none-m { border-style: none; } +} +@media screen and (min-width: 60em) { + .b--dotted-l { border-style: dotted; } + .b--dashed-l { border-style: dashed; } + .b--solid-l { border-style: solid; } + .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 + +*/ +.bw0 { border-width: 0; } +.bw1 { border-width: .125rem; } +.bw2 { border-width: .25rem; } +.bw3 { border-width: .5rem; } +.bw4 { border-width: 1rem; } +.bw5 { border-width: 2rem; } +/* Resets */ +.bt-0 { border-top-width: 0; } +.br-0 { border-right-width: 0; } +.bb-0 { border-bottom-width: 0; } +.bl-0 { border-left-width: 0; } +@media screen and (min-width: 30em) { + .bw0-ns { border-width: 0; } + .bw1-ns { border-width: .125rem; } + .bw2-ns { border-width: .25rem; } + .bw3-ns { border-width: .5rem; } + .bw4-ns { border-width: 1rem; } + .bw5-ns { border-width: 2rem; } + .bt-0-ns { border-top-width: 0; } + .br-0-ns { border-right-width: 0; } + .bb-0-ns { border-bottom-width: 0; } + .bl-0-ns { border-left-width: 0; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .bw0-m { border-width: 0; } + .bw1-m { border-width: .125rem; } + .bw2-m { border-width: .25rem; } + .bw3-m { border-width: .5rem; } + .bw4-m { border-width: 1rem; } + .bw5-m { border-width: 2rem; } + .bt-0-m { border-top-width: 0; } + .br-0-m { border-right-width: 0; } + .bb-0-m { border-bottom-width: 0; } + .bl-0-m { border-left-width: 0; } +} +@media screen and (min-width: 60em) { + .bw0-l { border-width: 0; } + .bw1-l { border-width: .125rem; } + .bw2-l { border-width: .25rem; } + .bw3-l { border-width: .5rem; } + .bw4-l { border-width: 1rem; } + .bw5-l { border-width: 2rem; } + .bt-0-l { border-top-width: 0; } + .br-0-l { border-right-width: 0; } + .bb-0-l { border-bottom-width: 0; } + .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 + + */ +.shadow-1 { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } +.shadow-2 { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } +.shadow-3 { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } +.shadow-4 { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } +.shadow-5 { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +@media screen and (min-width: 30em) { + .shadow-1-ns { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-ns { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-ns { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-ns { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-ns { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .shadow-1-m { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-m { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-m { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-m { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-m { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} +@media screen and (min-width: 60em) { + .shadow-1-l { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-l { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-l { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-l { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-l { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} +/*@import 'tachyons/src/_code';*/ +/* + + 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; } +.right-0 { right: 0; } +.bottom-0 { bottom: 0; } +.left-0 { left: 0; } +.top-1 { top: 1rem; } +.right-1 { right: 1rem; } +.bottom-1 { bottom: 1rem; } +.left-1 { left: 1rem; } +.top-2 { top: 2rem; } +.right-2 { right: 2rem; } +.bottom-2 { bottom: 2rem; } +.left-2 { left: 2rem; } +.top--1 { top: -1rem; } +.right--1 { right: -1rem; } +.bottom--1 { bottom: -1rem; } +.left--1 { left: -1rem; } +.top--2 { top: -2rem; } +.right--2 { right: -2rem; } +.bottom--2 { bottom: -2rem; } +.left--2 { left: -2rem; } +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; +} +@media screen and (min-width: 30em) { + .top-0-ns { top: 0; } + .left-0-ns { left: 0; } + .right-0-ns { right: 0; } + .bottom-0-ns { bottom: 0; } + .top-1-ns { top: 1rem; } + .left-1-ns { left: 1rem; } + .right-1-ns { right: 1rem; } + .bottom-1-ns { bottom: 1rem; } + .top-2-ns { top: 2rem; } + .left-2-ns { left: 2rem; } + .right-2-ns { right: 2rem; } + .bottom-2-ns { bottom: 2rem; } + .top--1-ns { top: -1rem; } + .right--1-ns { right: -1rem; } + .bottom--1-ns { bottom: -1rem; } + .left--1-ns { left: -1rem; } + .top--2-ns { top: -2rem; } + .right--2-ns { right: -2rem; } + .bottom--2-ns { bottom: -2rem; } + .left--2-ns { left: -2rem; } + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .top-0-m { top: 0; } + .left-0-m { left: 0; } + .right-0-m { right: 0; } + .bottom-0-m { bottom: 0; } + .top-1-m { top: 1rem; } + .left-1-m { left: 1rem; } + .right-1-m { right: 1rem; } + .bottom-1-m { bottom: 1rem; } + .top-2-m { top: 2rem; } + .left-2-m { left: 2rem; } + .right-2-m { right: 2rem; } + .bottom-2-m { bottom: 2rem; } + .top--1-m { top: -1rem; } + .right--1-m { right: -1rem; } + .bottom--1-m { bottom: -1rem; } + .left--1-m { left: -1rem; } + .top--2-m { top: -2rem; } + .right--2-m { right: -2rem; } + .bottom--2-m { bottom: -2rem; } + .left--2-m { left: -2rem; } + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} +@media screen and (min-width: 60em) { + .top-0-l { top: 0; } + .left-0-l { left: 0; } + .right-0-l { right: 0; } + .bottom-0-l { bottom: 0; } + .top-1-l { top: 1rem; } + .left-1-l { left: 1rem; } + .right-1-l { right: 1rem; } + .bottom-1-l { bottom: 1rem; } + .top-2-l { top: 2rem; } + .left-2-l { left: 2rem; } + .right-2-l { right: 2rem; } + .bottom-2-l { bottom: 2rem; } + .top--1-l { top: -1rem; } + .right--1-l { right: -1rem; } + .bottom--1-l { bottom: -1rem; } + .left--1-l { left: -1rem; } + .top--2-l { top: -2rem; } + .right--2-l { right: -2rem; } + .bottom--2-l { bottom: -2rem; } + .left--2-l { left: -2rem; } + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} +/* + + CLEARFIX + http://tachyons.io/docs/layout/clearfix/ + +*/ +/* Nicolas Gallaghers Clearfix solution + Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ +.cf:before, +.cf:after { content: " "; display: table; } +.cf:after { clear: both; } +.cf { *zoom: 1; } +.cl { clear: left; } +.cr { clear: right; } +.cb { clear: both; } +.cn { clear: none; } +@media screen and (min-width: 30em) { + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } +} +@media screen and (min-width: 60em) { + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .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 + t-row = table-row + t-columm = table-column + t-column-group = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.dn { display: none; } +.di { display: inline; } +.db { display: block; } +.dib { display: inline-block; } +.dit { display: inline-table; } +.dt { display: table; } +.dtc { display: table-cell; } +.dt-row { display: table-row; } +.dt-row-group { display: table-row-group; } +.dt-column { display: table-column; } +.dt-column-group { display: table-column-group; } +/* + This will set table to full width and then + all cells will be equal width +*/ +.dt--fixed { + table-layout: fixed; + width: 100%; +} +@media screen and (min-width: 30em) { + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } + + .dt--fixed-ns { + table-layout: fixed; + width: 100%; + } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } + + .dt--fixed-m { + table-layout: fixed; + width: 100%; + } +} +@media screen and (min-width: 60em) { + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } + + .dt--fixed-l { + table-layout: fixed; + width: 100%; + } +} +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.flex { display: -webkit-box; display: -ms-flexbox; display: flex; } +.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ +.flex-auto { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} +.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } +.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } +.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } +.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } +.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } +.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } +.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } +.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } +.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } +.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } +.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } +.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } +.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } +.self-start { -ms-flex-item-align: start; align-self: flex-start; } +.self-end { -ms-flex-item-align: end; align-self: flex-end; } +.self-center { -ms-flex-item-align: center; align-self: center; } +.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } +.self-stretch { -ms-flex-item-align: stretch; align-self: stretch; } +.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } +.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } +.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } +.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } +.justify-around { -ms-flex-pack: distribute; justify-content: space-around; } +.content-start { -ms-flex-line-pack: start; align-content: flex-start; } +.content-end { -ms-flex-line-pack: end; align-content: flex-end; } +.content-center { -ms-flex-line-pack: center; align-content: center; } +.content-between { -ms-flex-line-pack: justify; align-content: space-between; } +.content-around { -ms-flex-line-pack: distribute; align-content: space-around; } +.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } +.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } +.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } +.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } +.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } +.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } +.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } +.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } +.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } +.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } +.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } +.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } +.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } +.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; } +.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; } +@media screen and (min-width: 30em) { + .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-ns { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-ns { -ms-flex-item-align: center; align-self: center; } + .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-ns { -ms-flex-item-align: stretch; align-self: stretch; } + + .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-ns { -ms-flex-line-pack: center; align-content: center; } + .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-m { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-m { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-m { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-m { -ms-flex-item-align: center; align-self: center; } + .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-m { -ms-flex-item-align: stretch; align-self: stretch; } + + .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-m { -ms-flex-line-pack: center; align-content: center; } + .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; } +} +@media screen and (min-width: 60em) { + .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-l { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + + .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-l { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-l { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-l { -ms-flex-item-align: center; align-self: center; } + .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-l { -ms-flex-item-align: stretch; align-self: stretch; } + + .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-l { -ms-flex-line-pack: center; align-content: center; } + .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-l { -ms-flex-negative: 1; 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 + +*/ +.fl { float: left; _display: inline; } +.fr { float: right; _display: inline; } +.fn { float: none; } +@media screen and (min-width: 30em) { + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } + .fn-m { float: none; } +} +@media screen and (min-width: 60em) { + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } + .fn-l { float: none; } +} +/*@import 'tachyons/src/_font-family';*/ +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.i { font-style: italic; } +.fs-normal { font-style: normal; } +@media screen and (min-width: 30em) { + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } +} +@media screen and (min-width: 60em) { + .i-l { font-style: italic; } + .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 + +*/ +.normal { font-weight: normal; } +.b { font-weight: bold; } +.fw1 { font-weight: 100; } +.fw2 { font-weight: 200; } +.fw3 { font-weight: 300; } +.fw4 { font-weight: 400; } +.fw5 { font-weight: 500; } +.fw6 { font-weight: 600; } +.fw7 { font-weight: 700; } +.fw8 { font-weight: 800; } +.fw9 { font-weight: 900; } +@media screen and (min-width: 30em) { + .normal-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .normal-m { font-weight: normal; } + .b-m { font-weight: bold; } + .fw1-m { font-weight: 100; } + .fw2-m { font-weight: 200; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw5-m { font-weight: 500; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } + .fw8-m { font-weight: 800; } + .fw9-m { font-weight: 900; } +} +@media screen and (min-width: 60em) { + .normal-l { font-weight: normal; } + .b-l { font-weight: bold; } + .fw1-l { font-weight: 100; } + .fw2-l { font-weight: 200; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw5-l { font-weight: 500; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } + .fw8-l { font-weight: 800; } + .fw9-l { font-weight: 900; } +} +/* + + FORMS + +*/ +.input-reset { + -webkit-appearance: none; + -moz-appearance: none; +} +.button-reset::-moz-focus-inner, +.input-reset::-moz-focus-inner { + 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 + +*/ +/* Height Scale */ +.h1 { height: 1rem; } +.h2 { height: 2rem; } +.h3 { height: 4rem; } +.h4 { height: 8rem; } +.h5 { height: 16rem; } +/* Height Percentages - Based off of height of parent */ +.h-25 { height: 25%; } +.h-50 { height: 50%; } +.h-75 { height: 75%; } +.h-100 { height: 100%; } +.min-h-100 { min-height: 100%; } +/* Screen Height Percentage */ +.vh-25 { height: 25vh; } +.vh-50 { height: 50vh; } +.vh-75 { height: 75vh; } +.vh-100 { height: 100vh; } +.min-vh-100 { min-height: 100vh; } +/* String Properties */ +.h-auto { height: auto; } +.h-inherit { height: inherit; } +@media screen and (min-width: 30em) { + .h1-ns { height: 1rem; } + .h2-ns { height: 2rem; } + .h3-ns { height: 4rem; } + .h4-ns { height: 8rem; } + .h5-ns { height: 16rem; } + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + .min-h-100-ns { min-height: 100%; } + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + .min-vh-100-ns { min-height: 100vh; } + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .h1-m { height: 1rem; } + .h2-m { height: 2rem; } + .h3-m { height: 4rem; } + .h4-m { height: 8rem; } + .h5-m { height: 16rem; } + .h-25-m { height: 25%; } + .h-50-m { height: 50%; } + .h-75-m { height: 75%; } + .h-100-m { height: 100%; } + .min-h-100-m { min-height: 100%; } + .vh-25-m { height: 25vh; } + .vh-50-m { height: 50vh; } + .vh-75-m { height: 75vh; } + .vh-100-m { height: 100vh; } + .min-vh-100-m { min-height: 100vh; } + .h-auto-m { height: auto; } + .h-inherit-m { height: inherit; } +} +@media screen and (min-width: 60em) { + .h1-l { height: 1rem; } + .h2-l { height: 2rem; } + .h3-l { height: 4rem; } + .h4-l { height: 8rem; } + .h5-l { height: 16rem; } + .h-25-l { height: 25%; } + .h-50-l { height: 50%; } + .h-75-l { height: 75%; } + .h-100-l { height: 100%; } + .min-h-100-l { min-height: 100%; } + .vh-25-l { height: 25vh; } + .vh-50-l { height: 50vh; } + .vh-75-l { height: 75vh; } + .vh-100-l { height: 100vh; } + .min-vh-100-l { min-height: 100vh; } + .h-auto-l { height: auto; } + .h-inherit-l { height: inherit; } +} +/* + + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.tracked { letter-spacing: .1em; } +.tracked-tight { letter-spacing: -.05em; } +.tracked-mega { letter-spacing: .25em; } +@media screen and (min-width: 30em) { + .tracked-ns { letter-spacing: .1em; } + .tracked-tight-ns { letter-spacing: -.05em; } + .tracked-mega-ns { letter-spacing: .25em; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .tracked-m { letter-spacing: .1em; } + .tracked-tight-m { letter-spacing: -.05em; } + .tracked-mega-m { letter-spacing: .25em; } +} +@media screen and (min-width: 60em) { + .tracked-l { letter-spacing: .1em; } + .tracked-tight-l { letter-spacing: -.05em; } + .tracked-mega-l { letter-spacing: .25em; } +} +/* + + 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; } +.lh-title { line-height: 1.25; } +.lh-copy { line-height: 1.5; } +@media screen and (min-width: 30em) { + .lh-solid-ns { line-height: 1; } + .lh-title-ns { line-height: 1.25; } + .lh-copy-ns { line-height: 1.5; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .lh-solid-m { line-height: 1; } + .lh-title-m { line-height: 1.25; } + .lh-copy-m { line-height: 1.5; } +} +@media screen and (min-width: 60em) { + .lh-solid-l { line-height: 1; } + .lh-title-l { line-height: 1.25; } + .lh-copy-l { line-height: 1.5; } +} +/* + + LINKS + Docs: http://tachyons.io/docs/elements/links/ + +*/ +.link { + text-decoration: none; + -webkit-transition: color .15s ease-in; + transition: color .15s ease-in; +} +.link:link, +.link:visited { + -webkit-transition: color .15s ease-in; + transition: color .15s ease-in; +} +.link:hover { + -webkit-transition: color .15s ease-in; + transition: color .15s ease-in; +} +.link:active { + -webkit-transition: color .15s ease-in; + transition: color .15s ease-in; +} +.link:focus { + -webkit-transition: color .15s ease-in; + transition: color .15s ease-in; + outline: 1px dotted currentColor; +} +/* + + 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 Width Percentages */ +.mw-100 { max-width: 100%; } +/* Max Width Scale */ +.mw1 { max-width: 1rem; } +.mw2 { max-width: 2rem; } +.mw3 { max-width: 4rem; } +.mw4 { max-width: 8rem; } +.mw5 { max-width: 16rem; } +.mw6 { max-width: 32rem; } +.mw7 { max-width: 48rem; } +.mw8 { max-width: 64rem; } +.mw9 { max-width: 96rem; } +/* Max Width String Properties */ +.mw-none { max-width: none; } +@media screen and (min-width: 30em) { + .mw-100-ns { max-width: 100%; } + + .mw1-ns { max-width: 1rem; } + .mw2-ns { max-width: 2rem; } + .mw3-ns { max-width: 4rem; } + .mw4-ns { max-width: 8rem; } + .mw5-ns { max-width: 16rem; } + .mw6-ns { max-width: 32rem; } + .mw7-ns { max-width: 48rem; } + .mw8-ns { max-width: 64rem; } + .mw9-ns { max-width: 96rem; } + + .mw-none-ns { max-width: none; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .mw-100-m { max-width: 100%; } + + .mw1-m { max-width: 1rem; } + .mw2-m { max-width: 2rem; } + .mw3-m { max-width: 4rem; } + .mw4-m { max-width: 8rem; } + .mw5-m { max-width: 16rem; } + .mw6-m { max-width: 32rem; } + .mw7-m { max-width: 48rem; } + .mw8-m { max-width: 64rem; } + .mw9-m { max-width: 96rem; } + + .mw-none-m { max-width: none; } +} +@media screen and (min-width: 60em) { + .mw-100-l { max-width: 100%; } + + .mw1-l { max-width: 1rem; } + .mw2-l { max-width: 2rem; } + .mw3-l { max-width: 4rem; } + .mw4-l { max-width: 8rem; } + .mw5-l { max-width: 16rem; } + .mw6-l { max-width: 32rem; } + .mw7-l { max-width: 48rem; } + .mw8-l { max-width: 64rem; } + .mw9-l { max-width: 96rem; } + + .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 + +*/ +/* Width Scale */ +.w1 { width: 1rem; } +.w2 { width: 2rem; } +.w3 { width: 4rem; } +.w4 { width: 8rem; } +.w5 { width: 16rem; } +.w-10 { width: 10%; } +.w-20 { width: 20%; } +.w-25 { width: 25%; } +.w-30 { width: 30%; } +.w-33 { width: 33%; } +.w-34 { width: 34%; } +.w-40 { width: 40%; } +.w-50 { width: 50%; } +.w-60 { width: 60%; } +.w-70 { width: 70%; } +.w-75 { width: 75%; } +.w-80 { width: 80%; } +.w-90 { width: 90%; } +.w-100 { width: 100%; } +.w-third { width: 33.33333%; } +.w-two-thirds { width: 66.66667%; } +.w-auto { width: auto; } +@media screen and (min-width: 30em) { + .w1-ns { width: 1rem; } + .w2-ns { width: 2rem; } + .w3-ns { width: 4rem; } + .w4-ns { width: 8rem; } + .w5-ns { width: 16rem; } + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + .w-third-ns { width: 33.33333%; } + .w-two-thirds-ns { width: 66.66667%; } + .w-auto-ns { width: auto; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .w1-m { width: 1rem; } + .w2-m { width: 2rem; } + .w3-m { width: 4rem; } + .w4-m { width: 8rem; } + .w5-m { width: 16rem; } + .w-10-m { width: 10%; } + .w-20-m { width: 20%; } + .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } + .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } + .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } + .w-100-m { width: 100%; } + .w-third-m { width: 33.33333%; } + .w-two-thirds-m { width: 66.66667%; } + .w-auto-m { width: auto; } +} +@media screen and (min-width: 60em) { + .w1-l { width: 1rem; } + .w2-l { width: 2rem; } + .w3-l { width: 4rem; } + .w4-l { width: 8rem; } + .w5-l { width: 16rem; } + .w-10-l { width: 10%; } + .w-20-l { width: 20%; } + .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } + .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } + .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } + .w-100-l { width: 100%; } + .w-third-l { width: 33.33333%; } + .w-two-thirds-l { width: 66.66667%; } + .w-auto-l { width: auto; } +} +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ +.overflow-visible { overflow: visible; } +.overflow-hidden { overflow: hidden; } +.overflow-scroll { overflow: scroll; } +.overflow-auto { overflow: auto; } +.overflow-x-visible { overflow-x: visible; } +.overflow-x-hidden { overflow-x: hidden; } +.overflow-x-scroll { overflow-x: scroll; } +.overflow-x-auto { overflow-x: auto; } +.overflow-y-visible { overflow-y: visible; } +.overflow-y-hidden { overflow-y: hidden; } +.overflow-y-scroll { overflow-y: scroll; } +.overflow-y-auto { overflow-y: auto; } +@media screen and (min-width: 30em) { + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } + + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .overflow-visible-m { overflow: visible; } + .overflow-hidden-m { overflow: hidden; } + .overflow-scroll-m { overflow: scroll; } + .overflow-auto-m { overflow: auto; } + + .overflow-x-visible-m { overflow-x: visible; } + .overflow-x-hidden-m { overflow-x: hidden; } + .overflow-x-scroll-m { overflow-x: scroll; } + .overflow-x-auto-m { overflow-x: auto; } + + .overflow-y-visible-m { overflow-y: visible; } + .overflow-y-hidden-m { overflow-y: hidden; } + .overflow-y-scroll-m { overflow-y: scroll; } + .overflow-y-auto-m { overflow-y: auto; } +} +@media screen and (min-width: 60em) { + .overflow-visible-l { overflow: visible; } + .overflow-hidden-l { overflow: hidden; } + .overflow-scroll-l { overflow: scroll; } + .overflow-auto-l { overflow: auto; } + + .overflow-x-visible-l { overflow-x: visible; } + .overflow-x-hidden-l { overflow-x: hidden; } + .overflow-x-scroll-l { overflow-x: scroll; } + .overflow-x-auto-l { overflow-x: auto; } + + .overflow-y-visible-l { overflow-y: visible; } + .overflow-y-hidden-l { overflow-y: hidden; } + .overflow-y-scroll-l { overflow-y: scroll; } + .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 + +*/ +.static { position: static; } +.relative { position: relative; } +.absolute { position: absolute; } +.fixed { position: fixed; } +@media screen and (min-width: 30em) { + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .static-m { position: static; } + .relative-m { position: relative; } + .absolute-m { position: absolute; } + .fixed-m { position: fixed; } +} +@media screen and (min-width: 60em) { + .static-l { position: static; } + .relative-l { position: relative; } + .absolute-l { position: absolute; } + .fixed-l { position: fixed; } +} +/* + + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ + +*/ +.o-100 { opacity: 1; } +.o-90 { opacity: .9; } +.o-80 { opacity: .8; } +.o-70 { opacity: .7; } +.o-60 { opacity: .6; } +.o-50 { opacity: .5; } +.o-40 { opacity: .4; } +.o-30 { opacity: .3; } +.o-20 { opacity: .2; } +.o-10 { opacity: .1; } +.o-05 { opacity: .05; } +.o-025 { opacity: .025; } +.o-0 { opacity: 0; } +/*@import 'tachyons/src/_rotations';*/ +/* + + 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 { color: rgba(0, 0, 0, .9); } +.black-80 { color: rgba(0, 0, 0, .8); } +.black-70 { color: rgba(0, 0, 0, .7); } +.black-60 { color: rgba(0, 0, 0, .6); } +.black-50 { color: rgba(0, 0, 0, .5); } +.black-40 { color: rgba(0, 0, 0, .4); } +.black-30 { color: rgba(0, 0, 0, .3); } +.black-20 { color: rgba(0, 0, 0, .2); } +.black-10 { color: rgba(0, 0, 0, .1); } +.black-05 { color: rgba(0, 0, 0, .05); } +.white-90 { color: rgba(255, 255, 255, .9); } +.white-80 { color: rgba(255, 255, 255, .8); } +.white-70 { color: rgba(255, 255, 255, .7); } +.white-60 { color: rgba(255, 255, 255, .6); } +.white-50 { color: rgba(255, 255, 255, .5); } +.white-40 { color: rgba(255, 255, 255, .4); } +.white-30 { color: rgba(255, 255, 255, .3); } +.white-20 { color: rgba(255, 255, 255, .2); } +.white-10 { color: rgba(255, 255, 255, .1); } +.black { color: #000; } +.near-black { color: #111; } +.dark-gray { color: #333; } +.mid-gray { color: #555; } +.gray { color: #777; } +.silver { color: #999; } +.light-silver { color: #aaa; } +.moon-gray { color: #ccc; } +.light-gray { color: #eee; } +.near-white { color: #f4f4f4; } +.white { color: #fff; } +.dark-red { color: #e7040f; } +.red { color: #ff4136; } +.light-red { color: #ff725c; } +.orange { color: #ff6300; } +.gold { color: #ffb700; } +.yellow { color: #ffd700; } +.light-yellow { color: #fbf1a9; } +.purple { color: #5e2ca5; } +.light-purple { color: #a463f2; } +.dark-pink { color: #d5008f; } +.hot-pink { color: #ff41b4; } +.pink { color: #ff80cc; } +.light-pink { color: #ffa3d7; } +.dark-green { color: #137752; } +.green { color: #19a974; } +.light-green { color: #9eebcf; } +.navy { color: #001b44; } +.dark-blue { color: #00449e; } +.blue { color: #0594CB; } +.light-blue { color: #96ccff; } +.lightest-blue { color: #cdecff; } +.washed-blue { color: #f6fffe; } +.washed-green { color: #e8fdf5; } +.washed-yellow { color: #fffceb; } +.washed-red { color: #ffdfdf; } +.color-inherit { color: inherit; } - /* Background colors */ +.bg-black-90 { background-color: rgba(0, 0, 0, .9); } +.bg-black-80 { background-color: rgba(0, 0, 0, .8); } +.bg-black-70 { background-color: rgba(0, 0, 0, .7); } +.bg-black-60 { background-color: rgba(0, 0, 0, .6); } +.bg-black-50 { background-color: rgba(0, 0, 0, .5); } +.bg-black-40 { background-color: rgba(0, 0, 0, .4); } +.bg-black-30 { background-color: rgba(0, 0, 0, .3); } +.bg-black-20 { background-color: rgba(0, 0, 0, .2); } +.bg-black-10 { background-color: rgba(0, 0, 0, .1); } +.bg-black-05 { background-color: rgba(0, 0, 0, .05); } +.bg-white-90 { background-color: rgba(255, 255, 255, .9); } +.bg-white-80 { background-color: rgba(255, 255, 255, .8); } +.bg-white-70 { background-color: rgba(255, 255, 255, .7); } +.bg-white-60 { background-color: rgba(255, 255, 255, .6); } +.bg-white-50 { background-color: rgba(255, 255, 255, .5); } +.bg-white-40 { background-color: rgba(255, 255, 255, .4); } +.bg-white-30 { background-color: rgba(255, 255, 255, .3); } +.bg-white-20 { background-color: rgba(255, 255, 255, .2); } +.bg-white-10 { background-color: rgba(255, 255, 255, .1); } ++/* Background colors */ +.bg-black { background-color: #000; } +.bg-near-black { background-color: #111; } +.bg-dark-gray { background-color: #333; } +.bg-mid-gray { background-color: #555; } +.bg-gray { background-color: #777; } +.bg-silver { background-color: #999; } +.bg-light-silver { background-color: #aaa; } +.bg-moon-gray { background-color: #ccc; } +.bg-light-gray { background-color: #eee; } +.bg-near-white { background-color: #f4f4f4; } +.bg-white { background-color: #fff; } +.bg-transparent { background-color: transparent; } +.bg-dark-red { background-color: #e7040f; } +.bg-red { background-color: #ff4136; } +.bg-light-red { background-color: #ff725c; } +.bg-orange { background-color: #ff6300; } +.bg-gold { background-color: #ffb700; } +.bg-yellow { background-color: #ffd700; } +.bg-light-yellow { background-color: #fbf1a9; } +.bg-purple { background-color: #5e2ca5; } +.bg-light-purple { background-color: #a463f2; } +.bg-dark-pink { background-color: #d5008f; } +.bg-hot-pink { background-color: #ff41b4; } +.bg-pink { background-color: #ff80cc; } +.bg-light-pink { background-color: #ffa3d7; } +.bg-dark-green { background-color: #137752; } +.bg-green { background-color: #19a974; } +.bg-light-green { background-color: #9eebcf; } +.bg-navy { background-color: #001b44; } +.bg-dark-blue { background-color: #00449e; } +.bg-blue { background-color: #0594CB; } +.bg-light-blue { background-color: #96ccff; } +.bg-lightest-blue { background-color: #cdecff; } +.bg-washed-blue { background-color: #f6fffe; } +.bg-washed-green { background-color: #e8fdf5; } +.bg-washed-yellow { background-color: #fffceb; } +.bg-washed-red { background-color: #ffdfdf; } +.bg-inherit { background-color: inherit; } +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + + */ +.hover-black:hover, +.hover-black:focus { color: #000; } +.hover-near-black:hover, +.hover-near-black:focus { color: #111; } +.hover-dark-gray:hover, +.hover-dark-gray:focus { color: #333; } +.hover-mid-gray:hover, +.hover-mid-gray:focus { color: #555; } +.hover-gray:hover, +.hover-gray:focus { color: #777; } +.hover-silver:hover, +.hover-silver:focus { color: #999; } +.hover-light-silver:hover, +.hover-light-silver:focus { color: #aaa; } +.hover-moon-gray:hover, +.hover-moon-gray:focus { color: #ccc; } +.hover-light-gray:hover, +.hover-light-gray:focus { color: #eee; } +.hover-near-white:hover, +.hover-near-white:focus { color: #f4f4f4; } +.hover-white:hover, +.hover-white:focus { color: #fff; } +.hover-black-90:hover, +.hover-black-90:focus { color: rgba(0, 0, 0, .9); } +.hover-black-80:hover, +.hover-black-80:focus { color: rgba(0, 0, 0, .8); } +.hover-black-70:hover, +.hover-black-70:focus { color: rgba(0, 0, 0, .7); } +.hover-black-60:hover, +.hover-black-60:focus { color: rgba(0, 0, 0, .6); } +.hover-black-50:hover, +.hover-black-50:focus { color: rgba(0, 0, 0, .5); } +.hover-black-40:hover, +.hover-black-40:focus { color: rgba(0, 0, 0, .4); } +.hover-black-30:hover, +.hover-black-30:focus { color: rgba(0, 0, 0, .3); } +.hover-black-20:hover, +.hover-black-20:focus { color: rgba(0, 0, 0, .2); } +.hover-black-10:hover, +.hover-black-10:focus { color: rgba(0, 0, 0, .1); } +.hover-white-90:hover, +.hover-white-90:focus { color: rgba(255, 255, 255, .9); } +.hover-white-80:hover, +.hover-white-80:focus { color: rgba(255, 255, 255, .8); } +.hover-white-70:hover, +.hover-white-70:focus { color: rgba(255, 255, 255, .7); } +.hover-white-60:hover, +.hover-white-60:focus { color: rgba(255, 255, 255, .6); } +.hover-white-50:hover, +.hover-white-50:focus { color: rgba(255, 255, 255, .5); } +.hover-white-40:hover, +.hover-white-40:focus { color: rgba(255, 255, 255, .4); } +.hover-white-30:hover, +.hover-white-30:focus { color: rgba(255, 255, 255, .3); } +.hover-white-20:hover, +.hover-white-20:focus { color: rgba(255, 255, 255, .2); } +.hover-white-10:hover, +.hover-white-10:focus { color: rgba(255, 255, 255, .1); } +.hover-inherit:hover, +.hover-inherit:focus { color: inherit; } +.hover-bg-black:hover, +.hover-bg-black:focus { background-color: #000; } +.hover-bg-near-black:hover, +.hover-bg-near-black:focus { background-color: #111; } +.hover-bg-dark-gray:hover, +.hover-bg-dark-gray:focus { background-color: #333; } +.hover-bg-mid-gray:hover, +.hover-bg-mid-gray:focus { background-color: #555; } +.hover-bg-gray:hover, +.hover-bg-gray:focus { background-color: #777; } +.hover-bg-silver:hover, +.hover-bg-silver:focus { background-color: #999; } +.hover-bg-light-silver:hover, +.hover-bg-light-silver:focus { background-color: #aaa; } +.hover-bg-moon-gray:hover, +.hover-bg-moon-gray:focus { background-color: #ccc; } +.hover-bg-light-gray:hover, +.hover-bg-light-gray:focus { background-color: #eee; } +.hover-bg-near-white:hover, +.hover-bg-near-white:focus { background-color: #f4f4f4; } +.hover-bg-white:hover, +.hover-bg-white:focus { background-color: #fff; } +.hover-bg-transparent:hover, +.hover-bg-transparent:focus { background-color: transparent; } +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); } +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); } +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); } +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); } +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); } +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); } +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); } +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); } +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); } +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); } +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); } +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); } +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); } +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); } +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); } +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); } +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); } +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); } +.hover-dark-red:hover, +.hover-dark-red:focus { color: #e7040f; } +.hover-red:hover, +.hover-red:focus { color: #ff4136; } +.hover-light-red:hover, +.hover-light-red:focus { color: #ff725c; } +.hover-orange:hover, +.hover-orange:focus { color: #ff6300; } +.hover-gold:hover, +.hover-gold:focus { color: #ffb700; } +.hover-yellow:hover, +.hover-yellow:focus { color: #ffd700; } +.hover-light-yellow:hover, +.hover-light-yellow:focus { color: #fbf1a9; } +.hover-purple:hover, +.hover-purple:focus { color: #5e2ca5; } +.hover-light-purple:hover, +.hover-light-purple:focus { color: #a463f2; } +.hover-dark-pink:hover, +.hover-dark-pink:focus { color: #d5008f; } +.hover-hot-pink:hover, +.hover-hot-pink:focus { color: #ff41b4; } +.hover-pink:hover, +.hover-pink:focus { color: #ff80cc; } +.hover-light-pink:hover, +.hover-light-pink:focus { color: #ffa3d7; } +.hover-dark-green:hover, +.hover-dark-green:focus { color: #137752; } +.hover-green:hover, +.hover-green:focus { color: #19a974; } +.hover-light-green:hover, +.hover-light-green:focus { color: #9eebcf; } +.hover-navy:hover, +.hover-navy:focus { color: #001b44; } +.hover-dark-blue:hover, +.hover-dark-blue:focus { color: #00449e; } +.hover-blue:hover, +.hover-blue:focus { color: #0594CB; } +.hover-light-blue:hover, +.hover-light-blue:focus { color: #96ccff; } +.hover-lightest-blue:hover, +.hover-lightest-blue:focus { color: #cdecff; } +.hover-washed-blue:hover, +.hover-washed-blue:focus { color: #f6fffe; } +.hover-washed-green:hover, +.hover-washed-green:focus { color: #e8fdf5; } +.hover-washed-yellow:hover, +.hover-washed-yellow:focus { color: #fffceb; } +.hover-washed-red:hover, +.hover-washed-red:focus { color: #ffdfdf; } +.hover-bg-dark-red:hover, +.hover-bg-dark-red:focus { background-color: #e7040f; } +.hover-bg-red:hover, +.hover-bg-red:focus { background-color: #ff4136; } +.hover-bg-light-red:hover, +.hover-bg-light-red:focus { background-color: #ff725c; } +.hover-bg-orange:hover, +.hover-bg-orange:focus { background-color: #ff6300; } +.hover-bg-gold:hover, +.hover-bg-gold:focus { background-color: #ffb700; } +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { background-color: #ffd700; } +.hover-bg-light-yellow:hover, +.hover-bg-light-yellow:focus { background-color: #fbf1a9; } +.hover-bg-purple:hover, +.hover-bg-purple:focus { background-color: #5e2ca5; } +.hover-bg-light-purple:hover, +.hover-bg-light-purple:focus { background-color: #a463f2; } +.hover-bg-dark-pink:hover, +.hover-bg-dark-pink:focus { background-color: #d5008f; } +.hover-bg-hot-pink:hover, +.hover-bg-hot-pink:focus { background-color: #ff41b4; } +.hover-bg-pink:hover, +.hover-bg-pink:focus { background-color: #ff80cc; } +.hover-bg-light-pink:hover, +.hover-bg-light-pink:focus { background-color: #ffa3d7; } +.hover-bg-dark-green:hover, +.hover-bg-dark-green:focus { background-color: #137752; } +.hover-bg-green:hover, +.hover-bg-green:focus { background-color: #19a974; } +.hover-bg-light-green:hover, +.hover-bg-light-green:focus { background-color: #9eebcf; } +.hover-bg-navy:hover, +.hover-bg-navy:focus { background-color: #001b44; } +.hover-bg-dark-blue:hover, +.hover-bg-dark-blue:focus { background-color: #00449e; } +.hover-bg-blue:hover, +.hover-bg-blue:focus { background-color: #0594CB; } +.hover-bg-light-blue:hover, +.hover-bg-light-blue:focus { background-color: #96ccff; } +.hover-bg-lightest-blue:hover, +.hover-bg-lightest-blue:focus { background-color: #cdecff; } +.hover-bg-washed-blue:hover, +.hover-bg-washed-blue:focus { background-color: #f6fffe; } +.hover-bg-washed-green:hover, +.hover-bg-washed-green:focus { background-color: #e8fdf5; } +.hover-bg-washed-yellow:hover, +.hover-bg-washed-yellow:focus { background-color: #fffceb; } +.hover-bg-washed-red:hover, +.hover-bg-washed-red:focus { background-color: #ffdfdf; } +.hover-bg-inherit:hover, +.hover-bg-inherit:focus { 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 + +*/ +.pa0 { padding: 0; } +.pa1 { padding: .25rem; } +.pa2 { padding: .5rem; } +.pa3 { padding: 1rem; } +.pa4 { padding: 2rem; } +.pa5 { padding: 4rem; } +.pa6 { padding: 8rem; } +.pa7 { padding: 16rem; } +.pl0 { padding-left: 0; } +.pl1 { padding-left: .25rem; } +.pl2 { padding-left: .5rem; } +.pl3 { padding-left: 1rem; } +.pl4 { padding-left: 2rem; } +.pl5 { padding-left: 4rem; } +.pl6 { padding-left: 8rem; } +.pl7 { padding-left: 16rem; } +.pr0 { padding-right: 0; } +.pr1 { padding-right: .25rem; } +.pr2 { padding-right: .5rem; } +.pr3 { padding-right: 1rem; } +.pr4 { padding-right: 2rem; } +.pr5 { padding-right: 4rem; } +.pr6 { padding-right: 8rem; } +.pr7 { padding-right: 16rem; } +.pb0 { padding-bottom: 0; } +.pb1 { padding-bottom: .25rem; } +.pb2 { padding-bottom: .5rem; } +.pb3 { padding-bottom: 1rem; } +.pb4 { padding-bottom: 2rem; } +.pb5 { padding-bottom: 4rem; } +.pb6 { padding-bottom: 8rem; } +.pb7 { padding-bottom: 16rem; } +.pt0 { padding-top: 0; } +.pt1 { padding-top: .25rem; } +.pt2 { padding-top: .5rem; } +.pt3 { padding-top: 1rem; } +.pt4 { padding-top: 2rem; } +.pt5 { padding-top: 4rem; } +.pt6 { padding-top: 8rem; } +.pt7 { padding-top: 16rem; } +.pv0 { + padding-top: 0; + padding-bottom: 0; +} +.pv1 { + padding-top: .25rem; + padding-bottom: .25rem; +} +.pv2 { + padding-top: .5rem; + padding-bottom: .5rem; +} +.pv3 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.pv4 { + padding-top: 2rem; + padding-bottom: 2rem; +} +.pv5 { + padding-top: 4rem; + padding-bottom: 4rem; +} +.pv6 { + padding-top: 8rem; + padding-bottom: 8rem; +} +.pv7 { + padding-top: 16rem; + padding-bottom: 16rem; +} +.ph0 { + padding-left: 0; + padding-right: 0; +} +.ph1 { + padding-left: .25rem; + padding-right: .25rem; +} +.ph2 { + padding-left: .5rem; + padding-right: .5rem; +} +.ph3 { + padding-left: 1rem; + padding-right: 1rem; +} +.ph4 { + padding-left: 2rem; + padding-right: 2rem; +} +.ph5 { + padding-left: 4rem; + padding-right: 4rem; +} +.ph6 { + padding-left: 8rem; + padding-right: 8rem; +} +.ph7 { + padding-left: 16rem; + padding-right: 16rem; +} +.ma0 { margin: 0; } +.ma1 { margin: .25rem; } +.ma2 { margin: .5rem; } +.ma3 { margin: 1rem; } +.ma4 { margin: 2rem; } +.ma5 { margin: 4rem; } +.ma6 { margin: 8rem; } +.ma7 { margin: 16rem; } +.ml0 { margin-left: 0; } +.ml1 { margin-left: .25rem; } +.ml2 { margin-left: .5rem; } +.ml3 { margin-left: 1rem; } +.ml4 { margin-left: 2rem; } +.ml5 { margin-left: 4rem; } +.ml6 { margin-left: 8rem; } +.ml7 { margin-left: 16rem; } +.mr0 { margin-right: 0; } +.mr1 { margin-right: .25rem; } +.mr2 { margin-right: .5rem; } +.mr3 { margin-right: 1rem; } +.mr4 { margin-right: 2rem; } +.mr5 { margin-right: 4rem; } +.mr6 { margin-right: 8rem; } +.mr7 { margin-right: 16rem; } +.mb0 { margin-bottom: 0; } +.mb1 { margin-bottom: .25rem; } +.mb2 { margin-bottom: .5rem; } +.mb3 { margin-bottom: 1rem; } +.mb4 { margin-bottom: 2rem; } +.mb5 { margin-bottom: 4rem; } +.mb6 { margin-bottom: 8rem; } +.mb7 { margin-bottom: 16rem; } +.mt0 { margin-top: 0; } +.mt1 { margin-top: .25rem; } +.mt2 { margin-top: .5rem; } +.mt3 { margin-top: 1rem; } +.mt4 { margin-top: 2rem; } +.mt5 { margin-top: 4rem; } +.mt6 { margin-top: 8rem; } +.mt7 { margin-top: 16rem; } +.mv0 { + margin-top: 0; + margin-bottom: 0; +} +.mv1 { + margin-top: .25rem; + margin-bottom: .25rem; +} +.mv2 { + margin-top: .5rem; + margin-bottom: .5rem; +} +.mv3 { + margin-top: 1rem; + margin-bottom: 1rem; +} +.mv4 { + margin-top: 2rem; + margin-bottom: 2rem; +} +.mv5 { + margin-top: 4rem; + margin-bottom: 4rem; +} +.mv6 { + margin-top: 8rem; + margin-bottom: 8rem; +} +.mv7 { + margin-top: 16rem; + margin-bottom: 16rem; +} +.mh0 { + margin-left: 0; + margin-right: 0; +} +.mh1 { + margin-left: .25rem; + margin-right: .25rem; +} +.mh2 { + margin-left: .5rem; + margin-right: .5rem; +} +.mh3 { + margin-left: 1rem; + margin-right: 1rem; +} +.mh4 { + margin-left: 2rem; + margin-right: 2rem; +} +.mh5 { + margin-left: 4rem; + margin-right: 4rem; +} +.mh6 { + margin-left: 8rem; + margin-right: 8rem; +} +.mh7 { + margin-left: 16rem; + margin-right: 16rem; +} +@media screen and (min-width: 30em) { + .pa0-ns { padding: 0; } + .pa1-ns { padding: .25rem; } + .pa2-ns { padding: .5rem; } + .pa3-ns { padding: 1rem; } + .pa4-ns { padding: 2rem; } + .pa5-ns { padding: 4rem; } + .pa6-ns { padding: 8rem; } + .pa7-ns { padding: 16rem; } + + .pl0-ns { padding-left: 0; } + .pl1-ns { padding-left: .25rem; } + .pl2-ns { padding-left: .5rem; } + .pl3-ns { padding-left: 1rem; } + .pl4-ns { padding-left: 2rem; } + .pl5-ns { padding-left: 4rem; } + .pl6-ns { padding-left: 8rem; } + .pl7-ns { padding-left: 16rem; } + + .pr0-ns { padding-right: 0; } + .pr1-ns { padding-right: .25rem; } + .pr2-ns { padding-right: .5rem; } + .pr3-ns { padding-right: 1rem; } + .pr4-ns { padding-right: 2rem; } + .pr5-ns { padding-right: 4rem; } + .pr6-ns { padding-right: 8rem; } + .pr7-ns { padding-right: 16rem; } + + .pb0-ns { padding-bottom: 0; } + .pb1-ns { padding-bottom: .25rem; } + .pb2-ns { padding-bottom: .5rem; } + .pb3-ns { padding-bottom: 1rem; } + .pb4-ns { padding-bottom: 2rem; } + .pb5-ns { padding-bottom: 4rem; } + .pb6-ns { padding-bottom: 8rem; } + .pb7-ns { padding-bottom: 16rem; } + + .pt0-ns { padding-top: 0; } + .pt1-ns { padding-top: .25rem; } + .pt2-ns { padding-top: .5rem; } + .pt3-ns { padding-top: 1rem; } + .pt4-ns { padding-top: 2rem; } + .pt5-ns { padding-top: 4rem; } + .pt6-ns { padding-top: 8rem; } + .pt7-ns { padding-top: 16rem; } + + .pv0-ns { + padding-top: 0; + padding-bottom: 0; + } + .pv1-ns { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-ns { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-ns { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-ns { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-ns { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-ns { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-ns { + padding-top: 16rem; + padding-bottom: 16rem; + } + .ph0-ns { + padding-left: 0; + padding-right: 0; + } + .ph1-ns { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-ns { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-ns { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-ns { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-ns { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-ns { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-ns { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-ns { margin: 0; } + .ma1-ns { margin: .25rem; } + .ma2-ns { margin: .5rem; } + .ma3-ns { margin: 1rem; } + .ma4-ns { margin: 2rem; } + .ma5-ns { margin: 4rem; } + .ma6-ns { margin: 8rem; } + .ma7-ns { margin: 16rem; } + + .ml0-ns { margin-left: 0; } + .ml1-ns { margin-left: .25rem; } + .ml2-ns { margin-left: .5rem; } + .ml3-ns { margin-left: 1rem; } + .ml4-ns { margin-left: 2rem; } + .ml5-ns { margin-left: 4rem; } + .ml6-ns { margin-left: 8rem; } + .ml7-ns { margin-left: 16rem; } + + .mr0-ns { margin-right: 0; } + .mr1-ns { margin-right: .25rem; } + .mr2-ns { margin-right: .5rem; } + .mr3-ns { margin-right: 1rem; } + .mr4-ns { margin-right: 2rem; } + .mr5-ns { margin-right: 4rem; } + .mr6-ns { margin-right: 8rem; } + .mr7-ns { margin-right: 16rem; } + + .mb0-ns { margin-bottom: 0; } + .mb1-ns { margin-bottom: .25rem; } + .mb2-ns { margin-bottom: .5rem; } + .mb3-ns { margin-bottom: 1rem; } + .mb4-ns { margin-bottom: 2rem; } + .mb5-ns { margin-bottom: 4rem; } + .mb6-ns { margin-bottom: 8rem; } + .mb7-ns { margin-bottom: 16rem; } + + .mt0-ns { margin-top: 0; } + .mt1-ns { margin-top: .25rem; } + .mt2-ns { margin-top: .5rem; } + .mt3-ns { margin-top: 1rem; } + .mt4-ns { margin-top: 2rem; } + .mt5-ns { margin-top: 4rem; } + .mt6-ns { margin-top: 8rem; } + .mt7-ns { margin-top: 16rem; } + + .mv0-ns { + margin-top: 0; + margin-bottom: 0; + } + .mv1-ns { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-ns { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-ns { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-ns { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-ns { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-ns { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-ns { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-ns { + margin-left: 0; + margin-right: 0; + } + .mh1-ns { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-ns { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-ns { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-ns { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-ns { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-ns { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-ns { + margin-left: 16rem; + margin-right: 16rem; + } + +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .pa0-m { padding: 0; } + .pa1-m { padding: .25rem; } + .pa2-m { padding: .5rem; } + .pa3-m { padding: 1rem; } + .pa4-m { padding: 2rem; } + .pa5-m { padding: 4rem; } + .pa6-m { padding: 8rem; } + .pa7-m { padding: 16rem; } + + .pl0-m { padding-left: 0; } + .pl1-m { padding-left: .25rem; } + .pl2-m { padding-left: .5rem; } + .pl3-m { padding-left: 1rem; } + .pl4-m { padding-left: 2rem; } + .pl5-m { padding-left: 4rem; } + .pl6-m { padding-left: 8rem; } + .pl7-m { padding-left: 16rem; } + + .pr0-m { padding-right: 0; } + .pr1-m { padding-right: .25rem; } + .pr2-m { padding-right: .5rem; } + .pr3-m { padding-right: 1rem; } + .pr4-m { padding-right: 2rem; } + .pr5-m { padding-right: 4rem; } + .pr6-m { padding-right: 8rem; } + .pr7-m { padding-right: 16rem; } + + .pb0-m { padding-bottom: 0; } + .pb1-m { padding-bottom: .25rem; } + .pb2-m { padding-bottom: .5rem; } + .pb3-m { padding-bottom: 1rem; } + .pb4-m { padding-bottom: 2rem; } + .pb5-m { padding-bottom: 4rem; } + .pb6-m { padding-bottom: 8rem; } + .pb7-m { padding-bottom: 16rem; } + + .pt0-m { padding-top: 0; } + .pt1-m { padding-top: .25rem; } + .pt2-m { padding-top: .5rem; } + .pt3-m { padding-top: 1rem; } + .pt4-m { padding-top: 2rem; } + .pt5-m { padding-top: 4rem; } + .pt6-m { padding-top: 8rem; } + .pt7-m { padding-top: 16rem; } + + .pv0-m { + padding-top: 0; + padding-bottom: 0; + } + .pv1-m { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-m { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-m { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-m { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-m { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-m { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-m { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-m { + padding-left: 0; + padding-right: 0; + } + .ph1-m { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-m { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-m { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-m { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-m { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-m { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-m { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-m { margin: 0; } + .ma1-m { margin: .25rem; } + .ma2-m { margin: .5rem; } + .ma3-m { margin: 1rem; } + .ma4-m { margin: 2rem; } + .ma5-m { margin: 4rem; } + .ma6-m { margin: 8rem; } + .ma7-m { margin: 16rem; } + + .ml0-m { margin-left: 0; } + .ml1-m { margin-left: .25rem; } + .ml2-m { margin-left: .5rem; } + .ml3-m { margin-left: 1rem; } + .ml4-m { margin-left: 2rem; } + .ml5-m { margin-left: 4rem; } + .ml6-m { margin-left: 8rem; } + .ml7-m { margin-left: 16rem; } + + .mr0-m { margin-right: 0; } + .mr1-m { margin-right: .25rem; } + .mr2-m { margin-right: .5rem; } + .mr3-m { margin-right: 1rem; } + .mr4-m { margin-right: 2rem; } + .mr5-m { margin-right: 4rem; } + .mr6-m { margin-right: 8rem; } + .mr7-m { margin-right: 16rem; } + + .mb0-m { margin-bottom: 0; } + .mb1-m { margin-bottom: .25rem; } + .mb2-m { margin-bottom: .5rem; } + .mb3-m { margin-bottom: 1rem; } + .mb4-m { margin-bottom: 2rem; } + .mb5-m { margin-bottom: 4rem; } + .mb6-m { margin-bottom: 8rem; } + .mb7-m { margin-bottom: 16rem; } + + .mt0-m { margin-top: 0; } + .mt1-m { margin-top: .25rem; } + .mt2-m { margin-top: .5rem; } + .mt3-m { margin-top: 1rem; } + .mt4-m { margin-top: 2rem; } + .mt5-m { margin-top: 4rem; } + .mt6-m { margin-top: 8rem; } + .mt7-m { margin-top: 16rem; } + + .mv0-m { + margin-top: 0; + margin-bottom: 0; + } + .mv1-m { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-m { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-m { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-m { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-m { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-m { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-m { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-m { + margin-left: 0; + margin-right: 0; + } + .mh1-m { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-m { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-m { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-m { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-m { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-m { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-m { + margin-left: 16rem; + margin-right: 16rem; + } + +} +@media screen and (min-width: 60em) { + .pa0-l { padding: 0; } + .pa1-l { padding: .25rem; } + .pa2-l { padding: .5rem; } + .pa3-l { padding: 1rem; } + .pa4-l { padding: 2rem; } + .pa5-l { padding: 4rem; } + .pa6-l { padding: 8rem; } + .pa7-l { padding: 16rem; } + + .pl0-l { padding-left: 0; } + .pl1-l { padding-left: .25rem; } + .pl2-l { padding-left: .5rem; } + .pl3-l { padding-left: 1rem; } + .pl4-l { padding-left: 2rem; } + .pl5-l { padding-left: 4rem; } + .pl6-l { padding-left: 8rem; } + .pl7-l { padding-left: 16rem; } + + .pr0-l { padding-right: 0; } + .pr1-l { padding-right: .25rem; } + .pr2-l { padding-right: .5rem; } + .pr3-l { padding-right: 1rem; } + .pr4-l { padding-right: 2rem; } + .pr5-l { padding-right: 4rem; } + .pr6-l { padding-right: 8rem; } + .pr7-l { padding-right: 16rem; } + + .pb0-l { padding-bottom: 0; } + .pb1-l { padding-bottom: .25rem; } + .pb2-l { padding-bottom: .5rem; } + .pb3-l { padding-bottom: 1rem; } + .pb4-l { padding-bottom: 2rem; } + .pb5-l { padding-bottom: 4rem; } + .pb6-l { padding-bottom: 8rem; } + .pb7-l { padding-bottom: 16rem; } + + .pt0-l { padding-top: 0; } + .pt1-l { padding-top: .25rem; } + .pt2-l { padding-top: .5rem; } + .pt3-l { padding-top: 1rem; } + .pt4-l { padding-top: 2rem; } + .pt5-l { padding-top: 4rem; } + .pt6-l { padding-top: 8rem; } + .pt7-l { padding-top: 16rem; } + + .pv0-l { + padding-top: 0; + padding-bottom: 0; + } + .pv1-l { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-l { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-l { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-l { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-l { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-l { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-l { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-l { + padding-left: 0; + padding-right: 0; + } + .ph1-l { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-l { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-l { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-l { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-l { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-l { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-l { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-l { margin: 0; } + .ma1-l { margin: .25rem; } + .ma2-l { margin: .5rem; } + .ma3-l { margin: 1rem; } + .ma4-l { margin: 2rem; } + .ma5-l { margin: 4rem; } + .ma6-l { margin: 8rem; } + .ma7-l { margin: 16rem; } + + .ml0-l { margin-left: 0; } + .ml1-l { margin-left: .25rem; } + .ml2-l { margin-left: .5rem; } + .ml3-l { margin-left: 1rem; } + .ml4-l { margin-left: 2rem; } + .ml5-l { margin-left: 4rem; } + .ml6-l { margin-left: 8rem; } + .ml7-l { margin-left: 16rem; } + + .mr0-l { margin-right: 0; } + .mr1-l { margin-right: .25rem; } + .mr2-l { margin-right: .5rem; } + .mr3-l { margin-right: 1rem; } + .mr4-l { margin-right: 2rem; } + .mr5-l { margin-right: 4rem; } + .mr6-l { margin-right: 8rem; } + .mr7-l { margin-right: 16rem; } + + .mb0-l { margin-bottom: 0; } + .mb1-l { margin-bottom: .25rem; } + .mb2-l { margin-bottom: .5rem; } + .mb3-l { margin-bottom: 1rem; } + .mb4-l { margin-bottom: 2rem; } + .mb5-l { margin-bottom: 4rem; } + .mb6-l { margin-bottom: 8rem; } + .mb7-l { margin-bottom: 16rem; } + + .mt0-l { margin-top: 0; } + .mt1-l { margin-top: .25rem; } + .mt2-l { margin-top: .5rem; } + .mt3-l { margin-top: 1rem; } + .mt4-l { margin-top: 2rem; } + .mt5-l { margin-top: 4rem; } + .mt6-l { margin-top: 8rem; } + .mt7-l { margin-top: 16rem; } + + .mv0-l { + margin-top: 0; + margin-bottom: 0; + } + .mv1-l { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-l { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-l { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-l { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-l { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-l { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-l { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-l { + margin-left: 0; + margin-right: 0; + } + .mh1-l { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-l { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-l { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-l { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-l { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-l { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-l { + 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 + +*/ +.na1 { margin: -0.25rem; } +.na2 { margin: -0.5rem; } +.na3 { margin: -1rem; } +.na4 { margin: -2rem; } +.na5 { margin: -4rem; } +.na6 { margin: -8rem; } +.na7 { margin: -16rem; } +.nl1 { margin-left: -0.25rem; } +.nl2 { margin-left: -0.5rem; } +.nl3 { margin-left: -1rem; } +.nl4 { margin-left: -2rem; } +.nl5 { margin-left: -4rem; } +.nl6 { margin-left: -8rem; } +.nl7 { margin-left: -16rem; } +.nr1 { margin-right: -0.25rem; } +.nr2 { margin-right: -0.5rem; } +.nr3 { margin-right: -1rem; } +.nr4 { margin-right: -2rem; } +.nr5 { margin-right: -4rem; } +.nr6 { margin-right: -8rem; } +.nr7 { margin-right: -16rem; } +.nb1 { margin-bottom: -0.25rem; } +.nb2 { margin-bottom: -0.5rem; } +.nb3 { margin-bottom: -1rem; } +.nb4 { margin-bottom: -2rem; } +.nb5 { margin-bottom: -4rem; } +.nb6 { margin-bottom: -8rem; } +.nb7 { margin-bottom: -16rem; } +.nt1 { margin-top: -0.25rem; } +.nt2 { margin-top: -0.5rem; } +.nt3 { margin-top: -1rem; } +.nt4 { margin-top: -2rem; } +.nt5 { margin-top: -4rem; } +.nt6 { margin-top: -8rem; } +.nt7 { margin-top: -16rem; } +@media screen and (min-width: 30em) { + + .na1-ns { margin: -0.25rem; } + .na2-ns { margin: -0.5rem; } + .na3-ns { margin: -1rem; } + .na4-ns { margin: -2rem; } + .na5-ns { margin: -4rem; } + .na6-ns { margin: -8rem; } + .na7-ns { margin: -16rem; } + + .nl1-ns { margin-left: -0.25rem; } + .nl2-ns { margin-left: -0.5rem; } + .nl3-ns { margin-left: -1rem; } + .nl4-ns { margin-left: -2rem; } + .nl5-ns { margin-left: -4rem; } + .nl6-ns { margin-left: -8rem; } + .nl7-ns { margin-left: -16rem; } + + .nr1-ns { margin-right: -0.25rem; } + .nr2-ns { margin-right: -0.5rem; } + .nr3-ns { margin-right: -1rem; } + .nr4-ns { margin-right: -2rem; } + .nr5-ns { margin-right: -4rem; } + .nr6-ns { margin-right: -8rem; } + .nr7-ns { margin-right: -16rem; } + + .nb1-ns { margin-bottom: -0.25rem; } + .nb2-ns { margin-bottom: -0.5rem; } + .nb3-ns { margin-bottom: -1rem; } + .nb4-ns { margin-bottom: -2rem; } + .nb5-ns { margin-bottom: -4rem; } + .nb6-ns { margin-bottom: -8rem; } + .nb7-ns { margin-bottom: -16rem; } + + .nt1-ns { margin-top: -0.25rem; } + .nt2-ns { margin-top: -0.5rem; } + .nt3-ns { margin-top: -1rem; } + .nt4-ns { margin-top: -2rem; } + .nt5-ns { margin-top: -4rem; } + .nt6-ns { margin-top: -8rem; } + .nt7-ns { margin-top: -16rem; } + +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .na1-m { margin: -0.25rem; } + .na2-m { margin: -0.5rem; } + .na3-m { margin: -1rem; } + .na4-m { margin: -2rem; } + .na5-m { margin: -4rem; } + .na6-m { margin: -8rem; } + .na7-m { margin: -16rem; } + + .nl1-m { margin-left: -0.25rem; } + .nl2-m { margin-left: -0.5rem; } + .nl3-m { margin-left: -1rem; } + .nl4-m { margin-left: -2rem; } + .nl5-m { margin-left: -4rem; } + .nl6-m { margin-left: -8rem; } + .nl7-m { margin-left: -16rem; } + + .nr1-m { margin-right: -0.25rem; } + .nr2-m { margin-right: -0.5rem; } + .nr3-m { margin-right: -1rem; } + .nr4-m { margin-right: -2rem; } + .nr5-m { margin-right: -4rem; } + .nr6-m { margin-right: -8rem; } + .nr7-m { margin-right: -16rem; } + + .nb1-m { margin-bottom: -0.25rem; } + .nb2-m { margin-bottom: -0.5rem; } + .nb3-m { margin-bottom: -1rem; } + .nb4-m { margin-bottom: -2rem; } + .nb5-m { margin-bottom: -4rem; } + .nb6-m { margin-bottom: -8rem; } + .nb7-m { margin-bottom: -16rem; } + + .nt1-m { margin-top: -0.25rem; } + .nt2-m { margin-top: -0.5rem; } + .nt3-m { margin-top: -1rem; } + .nt4-m { margin-top: -2rem; } + .nt5-m { margin-top: -4rem; } + .nt6-m { margin-top: -8rem; } + .nt7-m { margin-top: -16rem; } + +} +@media screen and (min-width: 60em) { + .na1-l { margin: -0.25rem; } + .na2-l { margin: -0.5rem; } + .na3-l { margin: -1rem; } + .na4-l { margin: -2rem; } + .na5-l { margin: -4rem; } + .na6-l { margin: -8rem; } + .na7-l { margin: -16rem; } + + .nl1-l { margin-left: -0.25rem; } + .nl2-l { margin-left: -0.5rem; } + .nl3-l { margin-left: -1rem; } + .nl4-l { margin-left: -2rem; } + .nl5-l { margin-left: -4rem; } + .nl6-l { margin-left: -8rem; } + .nl7-l { margin-left: -16rem; } + + .nr1-l { margin-right: -0.25rem; } + .nr2-l { margin-right: -0.5rem; } + .nr3-l { margin-right: -1rem; } + .nr4-l { margin-right: -2rem; } + .nr5-l { margin-right: -4rem; } + .nr6-l { margin-right: -8rem; } + .nr7-l { margin-right: -16rem; } + + .nb1-l { margin-bottom: -0.25rem; } + .nb2-l { margin-bottom: -0.5rem; } + .nb3-l { margin-bottom: -1rem; } + .nb4-l { margin-bottom: -2rem; } + .nb5-l { margin-bottom: -4rem; } + .nb6-l { margin-bottom: -8rem; } + .nb7-l { margin-bottom: -16rem; } + + .nt1-l { margin-top: -0.25rem; } + .nt2-l { margin-top: -0.5rem; } + .nt3-l { margin-top: -1rem; } + .nt4-l { margin-top: -2rem; } + .nt5-l { margin-top: -4rem; } + .nt6-l { margin-top: -8rem; } + .nt7-l { margin-top: -16rem; } +} +/* + + TABLES + Docs: http://tachyons.io/docs/elements/tables/ + +*/ +.collapse { + border-collapse: collapse; + border-spacing: 0; +} +.striped--light-silver:nth-child(odd) { + background-color: #aaa; +} +.striped--moon-gray:nth-child(odd) { + background-color: #ccc; +} +.striped--light-gray:nth-child(odd) { + background-color: #eee; +} +.striped--near-white:nth-child(odd) { + background-color: #f4f4f4; +} +.stripe-light:nth-child(odd) { + background-color: rgba(255, 255, 255, .1); +} +.stripe-dark:nth-child(odd) { + background-color: rgba(0, 0, 0, .1); +} +/* + + 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; } +.underline { text-decoration: underline; } +.no-underline { text-decoration: none; } +@media screen and (min-width: 30em) { + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } +} +@media screen and (min-width: 60em) { + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .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 + +*/ +.tl { text-align: left; } +.tr { text-align: right; } +.tc { text-align: center; } +.tj { text-align: justify; } +@media screen and (min-width: 30em) { + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .tl-m { text-align: left; } + .tr-m { text-align: right; } + .tc-m { text-align: center; } + .tj-m { text-align: justify; } +} +@media screen and (min-width: 60em) { + .tl-l { text-align: left; } + .tr-l { text-align: right; } + .tc-l { text-align: center; } + .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 + +*/ +.ttc { text-transform: capitalize; } +.ttl { text-transform: lowercase; } +.ttu { text-transform: uppercase; } +.ttn { text-transform: none; } +@media screen and (min-width: 30em) { + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .ttc-m { text-transform: capitalize; } + .ttl-m { text-transform: lowercase; } + .ttu-m { text-transform: uppercase; } + .ttn-m { text-transform: none; } +} +@media screen and (min-width: 60em) { + .ttc-l { text-transform: capitalize; } + .ttl-l { text-transform: lowercase; } + .ttu-l { text-transform: uppercase; } + .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 + 7 = 7th 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. + * */ +.f-6, +.f-headline { + font-size: 6rem; +} +.f-5, +.f-subheadline { + font-size: 5rem; +} +/* Type Scale */ +.f1 { font-size: 3rem; } +.f2 { font-size: 2.25rem; } +.f3 { font-size: 1.5rem; } +.f4 { font-size: 1.25rem; } +.f5 { font-size: 1rem; } +.f6 { font-size: .875rem; } +.f7 { font-size: .75rem; } +/* Small and hard to read for many people so use with extreme caution */ +@media screen and (min-width: 30em){ + .f-6-ns, + .f-headline-ns { font-size: 6rem; } + .f-5-ns, + .f-subheadline-ns { font-size: 5rem; } + .f1-ns { font-size: 3rem; } + .f2-ns { font-size: 2.25rem; } + .f3-ns { font-size: 1.5rem; } + .f4-ns { font-size: 1.25rem; } + .f5-ns { font-size: 1rem; } + .f6-ns { font-size: .875rem; } + .f7-ns { font-size: .75rem; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .f-6-m, + .f-headline-m { font-size: 6rem; } + .f-5-m, + .f-subheadline-m { font-size: 5rem; } + .f1-m { font-size: 3rem; } + .f2-m { font-size: 2.25rem; } + .f3-m { font-size: 1.5rem; } + .f4-m { font-size: 1.25rem; } + .f5-m { font-size: 1rem; } + .f6-m { font-size: .875rem; } + .f7-m { font-size: .75rem; } +} +@media screen and (min-width: 60em) { + .f-6-l, + .f-headline-l { + font-size: 6rem; + } + .f-5-l, + .f-subheadline-l { + font-size: 5rem; + } + .f1-l { font-size: 3rem; } + .f2-l { font-size: 2.25rem; } + .f3-l { font-size: 1.5rem; } + .f4-l { font-size: 1.25rem; } + .f5-l { font-size: 1rem; } + .f6-l { font-size: .875rem; } + .f7-l { font-size: .75rem; } +} +/* + + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* Measure is limited to ~66 characters */ +.measure { + max-width: 30em; +} +/* Measure is limited to ~80 characters */ +.measure-wide { + max-width: 34em; +} +/* Measure is limited to ~45 characters */ +.measure-narrow { + max-width: 20em; +} +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ +.indent { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} +.small-caps { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + 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; +} +@media screen and (min-width: 30em) { + .measure-ns { + max-width: 30em; + } + .measure-wide-ns { + max-width: 34em; + } + .measure-narrow-ns { + max-width: 20em; + } + .indent-ns { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-ns { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-ns { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .measure-m { + max-width: 30em; + } + .measure-wide-m { + max-width: 34em; + } + .measure-narrow-m { + max-width: 20em; + } + .indent-m { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-m { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-m { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} +@media screen and (min-width: 60em) { + .measure-l { + max-width: 30em; + } + .measure-wide-l { + max-width: 34em; + } + .measure-narrow-l { + max-width: 20em; + } + .indent-l { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-l { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-l { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* Equivalent to .overflow-y-scroll */ +.overflow-container { + overflow-y: scroll; +} +.center { + margin-right: auto; + margin-left: auto; +} +.mr-auto { margin-right: auto; } +.ml-auto { margin-left: auto; } +@media screen and (min-width: 30em){ + .center-ns { + margin-right: auto; + margin-left: auto; + } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } +} +@media screen and (min-width: 30em) and (max-width: 60em){ + .center-m { + margin-right: auto; + margin-left: auto; + } + .mr-auto-m { margin-right: auto; } + .ml-auto-m { margin-left: auto; } +} +@media screen and (min-width: 60em){ + .center-l { + margin-right: auto; + margin-left: auto; + } + .mr-auto-l { margin-right: auto; } + .ml-auto-l { margin-left: auto; } +} +/* + + 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 +*/ +.clip { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} +@media screen and (min-width: 30em) { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .clip-m { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} +@media screen and (min-width: 60em) { + .clip-l { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.ws-normal { white-space: normal; } +.nowrap { white-space: nowrap; } +.pre { white-space: pre; } +@media screen and (min-width: 30em) { + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .ws-normal-m { white-space: normal; } + .nowrap-m { white-space: nowrap; } + .pre-m { white-space: pre; } +} +@media screen and (min-width: 60em) { + .ws-normal-l { white-space: normal; } + .nowrap-l { white-space: nowrap; } + .pre-l { white-space: pre; } +} +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.v-base { vertical-align: baseline; } +.v-mid { vertical-align: middle; } +.v-top { vertical-align: top; } +.v-btm { vertical-align: bottom; } +@media screen and (min-width: 30em) { + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .v-base-m { vertical-align: baseline; } + .v-mid-m { vertical-align: middle; } + .v-top-m { vertical-align: top; } + .v-btm-m { vertical-align: bottom; } +} +@media screen and (min-width: 60em) { + .v-base-l { vertical-align: baseline; } + .v-mid-l { vertical-align: middle; } + .v-top-l { vertical-align: top; } + .v-btm-l { vertical-align: bottom; } +} +/* + + 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 { + opacity: 1; + -webkit-transition: opacity .15s ease-in; + transition: opacity .15s ease-in; +} +.dim:hover, +.dim:focus { + opacity: .5; + -webkit-transition: opacity .15s ease-in; + transition: opacity .15s ease-in; +} +.dim:active { + opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; +} +/* + + Animate opacity to 100% on hover by adding the glow class. + +*/ +.glow { + -webkit-transition: opacity .15s ease-in; + transition: opacity .15s ease-in; +} +.glow:hover, +.glow:focus { + opacity: 1; + -webkit-transition: opacity .15s ease-in; + 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 .child { + opacity: 0; + -webkit-transition: opacity .15s ease-in; + transition: opacity .15s ease-in; +} +.hide-child:hover .child, +.hide-child:focus .child, +.hide-child:active .child { + opacity: 1; + -webkit-transition: opacity .15s ease-in; + transition: opacity .15s ease-in; +} +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; +} +/* 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; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition: -webkit-transform 0.25s ease-out; + transition: -webkit-transform 0.25s ease-out; + transition: transform 0.25s ease-out; + transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; +} +.grow:hover, +.grow:focus { + -webkit-transform: scale(1.05); + transform: scale(1.05); +} +.grow:active { + -webkit-transform: scale(.90); + transform: scale(.90); +} +.grow-large { + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out; + transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; +} +.grow-large:hover, +.grow-large:focus { + -webkit-transform: scale(1.2); + transform: scale(1.2); +} +.grow-large:active { + -webkit-transform: scale(.95); + transform: scale(.95); +} +/* Add pointer on hover */ +.pointer:hover { + cursor: pointer; +} +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ +.shadow-hover { + cursor: pointer; + position: relative; + -webkit-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: ''; + -webkit-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2); + box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2); + border-radius: inherit; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + -webkit-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; +} +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + -webkit-transition: background-color .15s ease-in-out; + 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-0 { z-index: 0; } +.z-1 { z-index: 1; } +.z-2 { z-index: 2; } +.z-3 { z-index: 3; } +.z-4 { z-index: 4; } +.z-5 { z-index: 5; } +.z-999 { z-index: 999; } +.z-9999 { z-index: 9999; } +.z-max { + z-index: 2147483647; +} +.z-inherit { z-index: inherit; } +.z-initial { z-index: auto; z-index: initial; } +.z-unset { z-index: unset; } +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + +*/ +.nested-copy-line-height p, +.nested-copy-line-height ul, +.nested-copy-line-height ol { + line-height: 1.5; +} +.nested-headline-line-height h1, +.nested-headline-line-height h2, +.nested-headline-line-height h3, +.nested-headline-line-height h4, +.nested-headline-line-height h5, +.nested-headline-line-height h6 { + line-height: 1.25; +} +.nested-list-reset ul, +.nested-list-reset ol { + padding-left: 0; + margin-left: 0; + list-style-type: none; +} +.nested-copy-indent p+p { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} +.nested-copy-separator p+p { + margin-top: 1.5em; +} +.nested-img img { + width: 100%; + max-width: 100%; + display: block; +} +.nested-links a { + color: #0594CB; + -webkit-transition: color .15s ease-in; + transition: color .15s ease-in; +} +.nested-links a:hover, +.nested-links a:focus { + color: #96ccff; + -webkit-transition: color .15s ease-in; + transition: color .15s ease-in; +} +/*@import 'tachyons/src/_styles';*/ +/* Variables */ +/* Importing here will allow you to override any variables in the modules */ +/* + + Tachyons + COLOR VARIABLES + + Grayscale + - Solids + - Transparencies + Colors + +*/ +/* + + CUSTOM MEDIA QUERIES + + Media query values can be changed to fit your own content. + There are no magic bullets when it comes to media query width values. + They should be declared in em units - and they should be set to meet + the needs of your content. You can also add additional media queries, + or remove some of the existing ones. + + These media queries can be referenced like so: + + @media (--breakpoint-not-small) { + .medium-and-larger-specific-style { + background-color: red; + } + } + + @media (--breakpoint-medium) { + .medium-screen-specific-style { + background-color: red; + } + } + + @media (--breakpoint-large) { + .large-and-larger-screen-specific-style { + background-color: red; + } + } + +*/ +/* Media Queries */ +/* Debugging */ +/*@import 'tachyons/src/_debug-children'; +@import 'tachyons/src/_debug-grid';*/ +/* Uncomment out the line below to help debug layout issues */ +/* @import 'tachyons/src/_debug'; */ +/* purgecss start ignore */ +.header-link:after { + position: relative; + left: 0.5em; + opacity: 0; + font-size: 0.8em; + -moz-transition: opacity 0.2s ease-in-out 0.1s; + -ms-transition: opacity 0.2s ease-in-out 0.1s; +} +h2:hover .header-link, +h3:hover .header-link, +h4:hover .header-link, +h5:hover .header-link, +h6:hover .header-link { + opacity: 1; +} +.animated { + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} +.animated-delay-1 { + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +.note, +.warning { + + border-left-width: 4px; + border-left-style: solid; + position: relative; + border-color: #0594CB; + + display: block; +} +.note #exclamation-icon, +.warning #exclamation-icon { + + fill: #0594CB; + position: absolute; + top: 35%; + left: -12px; + /*background-color: white;*/ +} +.admonition-content { + display: block; + margin: 0px; + padding: .125em 1em; + /*margin-left: 1em;*/ + margin-top: 2em; + margin-bottom: 2em; + overflow-x: auto; + /*font-size: .9375em;*/ + background-color: rgba(0, 0, 0, .05); + } +.hide-child-menu .child-menu { + display: none; + } +.hide-child-menu:hover .child-menu, + .hide-child-menu:focus .child-menu, + .hide-child-menu:active .child-menu { + display: block; + } +/*documentation-copy headings exaggerate spacing and size to chunk content */ +.documentation-copy h2 { + margin-top: 3em + } +.documentation-copy h2.minor { + font-size: inherit; + margin-top: inherit; + border-bottom: none; +} +.searchbox{display:inline-block;position:relative;width:200px;height:32px!important;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;visibility:visible!important} +.searchbox .algolia-autocomplete{display:block;width:100%;height:100%} +.searchbox__wrapper{width:100%;height:100%;z-index:999;position:relative} +.searchbox__input{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background .4s ease,-webkit-box-shadow .4s ease;transition:background .4s ease,-webkit-box-shadow .4s ease;transition:box-shadow .4s ease,background .4s ease;transition:box-shadow .4s ease,background .4s ease,-webkit-box-shadow .4s ease;border:0;border-radius:16px;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;background:#fff!important;padding:0 26px 0 32px;width:100%;height:100%;vertical-align:middle;white-space:normal;font-size:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none} +.searchbox__input::-webkit-search-cancel-button,.searchbox__input::-webkit-search-decoration,.searchbox__input::-webkit-search-results-button,.searchbox__input::-webkit-search-results-decoration{display:none} +.searchbox__input:hover{-webkit-box-shadow:inset 0 0 0 1px #b3b3b3;box-shadow:inset 0 0 0 1px #b3b3b3} +.searchbox__input:active,.searchbox__input:focus{outline:0;-webkit-box-shadow:inset 0 0 0 1px #aaa;box-shadow:inset 0 0 0 1px #aaa;background:#fff} +.searchbox__input::-webkit-input-placeholder{color:#aaa} +.searchbox__input:-ms-input-placeholder{color:#aaa} +.searchbox__input::-ms-input-placeholder{color:#aaa} - .searchbox__input::-moz-placeholder{color:#aaa} +.searchbox__input::placeholder{color:#aaa} +.searchbox__submit{position:absolute;top:0;margin:0;border:0;border-radius:16px 0 0 16px;background-color:rgba(69, 142, 225, 0);padding:0;width:32px;height:100%;vertical-align:middle;text-align:center;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;right:inherit;left:0} +.searchbox__submit:before{display:inline-block;margin-right:-4px;height:100%;vertical-align:middle;content:""} +.searchbox__submit:active,.searchbox__submit:hover{cursor:pointer} +.searchbox__submit:focus{outline:0} +.searchbox__submit svg{width:14px;height:14px;vertical-align:middle;fill:#6d7e96} +.searchbox__reset{display:block;position:absolute;top:8px;right:8px;margin:0;border:0;background:none;cursor:pointer;padding:0;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:rgba(0, 0, 0, .5)} +.searchbox__reset.hide{display:none} +.searchbox__reset:focus{outline:0} +.searchbox__reset svg{display:block;margin:4px;width:8px;height:8px} +.searchbox__input:valid~.searchbox__reset{display:block;-webkit-animation-name:sbx-reset-in;animation-name:sbx-reset-in;-webkit-animation-duration:.15s;animation-duration:.15s} +@-webkit-keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}} +@keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}} +.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu{right:0!important;left:inherit!important} +.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before{right:48px} +.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu{left:0!important;right:inherit!important} +.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before{left:48px} +.algolia-autocomplete .ds-dropdown-menu{top:-6px;border-radius:4px;margin:6px 0 0;padding:0;text-align:left;height:auto;position:relative;background:transparent;border:none;z-index:999;max-width:600px;min-width:500px;-webkit-box-shadow:0 1px 0 0 rgba(0, 0, 0, .2),0 2px 3px 0 rgba(0, 0, 0, .1);box-shadow:0 1px 0 0 rgba(0, 0, 0, .2),0 2px 3px 0 rgba(0, 0, 0, .1)} +.algolia-autocomplete .ds-dropdown-menu:before{display:block;position:absolute;content:"";width:14px;height:14px;background:#fff;z-index:1000;top:-7px;border-top:1px solid #d9d9d9;border-right:1px solid #d9d9d9;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border-radius:2px} +.algolia-autocomplete .ds-dropdown-menu .ds-suggestions{position:relative;z-index:1000;margin-top:8px} +.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a:hover{text-decoration:none} +.algolia-autocomplete .ds-dropdown-menu .ds-suggestion{cursor:pointer} +.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple,.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content{background-color:rgba(69, 142, 225, .05)} +.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{position:relative;border:1px solid #d9d9d9;background:#fff;border-radius:4px;overflow:auto;padding:0 8px 8px} +.algolia-autocomplete .ds-dropdown-menu *{-webkit-box-sizing:border-box;box-sizing:border-box} +.algolia-autocomplete .algolia-docsearch-suggestion{display:block;position:relative;padding:0 8px;background:#fff;color:#02060c;overflow:hidden} +.algolia-autocomplete .algolia-docsearch-suggestion--highlight{color:#174d8c;background:rgba(143, 187, 237, .1);padding:.1em .05em} +.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{padding:0 0 1px;background:inherit;-webkit-box-shadow:inset 0 -2px 0 0 rgba(69, 142, 225, .8);box-shadow:inset 0 -2px 0 0 rgba(69, 142, 225, .8);color:inherit} +.algolia-autocomplete .algolia-docsearch-suggestion--content{display:block;float:right;width:70%;position:relative;padding:5.33333px 0 5.33333px 10.66667px;cursor:pointer} +.algolia-autocomplete .algolia-docsearch-suggestion--content:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;left:-1px} +.algolia-autocomplete .algolia-docsearch-suggestion--category-header{position:relative;border-bottom:1px solid #ddd;display:none;margin-top:8px;padding:4px 0;font-size:1em;color:#33363d} +.algolia-autocomplete .algolia-docsearch-suggestion--wrapper{width:100%;float:left;padding:8px 0 0} +.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column{float:left;width:30%;text-align:right;position:relative;padding:5.33333px 10.66667px;color:#a4a7ae;font-size:.9em;word-wrap:break-word} +.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;right:0} +.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline{display:none} +.algolia-autocomplete .algolia-docsearch-suggestion--title{margin-bottom:4px;color:#02060c;font-size:.9em;font-weight:700} +.algolia-autocomplete .algolia-docsearch-suggestion--text{display:block;line-height:1.2em;font-size:.85em;color:#63676d} +.algolia-autocomplete .algolia-docsearch-suggestion--no-results{width:100%;padding:8px 0;text-align:center;font-size:1.2em} +.algolia-autocomplete .algolia-docsearch-suggestion--no-results:before{display:none} +.algolia-autocomplete .algolia-docsearch-suggestion code{padding:1px 5px;font-size:90%;border:none;color:#222;background-color:#ebebeb;border-radius:3px;font-family:Menlo,Monaco,Consolas,Courier New,monospace} +.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight{background:none} +.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header,.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary{display:block} +@media (min-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:block}} +@media (max-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:inline-block;width:auto;float:left;padding:0;color:#02060c;font-size:.9em;font-weight:700;text-align:left;opacity:.5}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:before{display:none}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after{content:"|"}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content{display:inline-block;width:auto;text-align:left;float:left;padding:0}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content:before{display:none}} +.algolia-autocomplete .suggestion-layout-simple.algolia-docsearch-suggestion{border-bottom:1px solid #eee;padding:8px;margin:0} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content{width:100%;padding:0} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content:before{display:none} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header{margin:0;padding:0;display:block;width:100%;border:none} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl0,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1{opacity:.6;font-size:.85em} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1:before{background-image:url('data:image/svg+xml;utf8,');content:"";width:10px;height:10px;display:inline-block} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8} +.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;-webkit-box-shadow:none;box-shadow:none} +.algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0} +.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block} +/* These styles enhance the home page carousel, located here: themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html */ +.overflow-x-scroll{ + -webkit-overflow-scrolling: touch; +} +.row { + -webkit-transition: 450ms -webkit-transform; + transition: 450ms -webkit-transform; + transition: 450ms transform; + transition: 450ms transform, 450ms -webkit-transform; + font-size: 0; +} +.tile { + -webkit-transition: 450ms all; + transition: 450ms all; +} +.details { + background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .9)), to(rgba(0, 0, 0, 0))); + background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 100%); + -webkit-transition: 450ms opacity; + transition: 450ms opacity; +} +.tile:hover .details { + opacity: 1; +} +.row:hover .tile { + opacity: 0.3; +} +.row:hover .tile:hover { + opacity: 1; +} +.chroma .lntable pre { + padding: 0; + margin: 0; + border: 0; +} +.chroma .lntable pre code { + padding: 0; + margin: 0; +} +code { + padding: 0.2em; + margin: 0; + font-size: 85%; + background-color: rgba(27, 31, 35, .05); + border-radius: 3px; +} +pre code { + display: block; + padding: 1.5em 1.5em; + font-size: .875rem; + line-height: 2; + overflow-x: auto; +} +pre { + background-color: #fff; + color: #333; + white-space: pre; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + position: relative; + border-width: 1px; + border-color: #ccc; + border-style: solid; +} +/* The Pygments highlighter comes with its own styles. */ +.highlight pre { + background-color: inherit; + color: inherit; + padding: 0.5em; + font-size: .875rem; +} +/*We are adding the copy button content here so we can change it with javascript. See the "Clipboard scripts"*/ +.copy:after { + content: "Copy" +} +.copied:after { + content: "Copied" +} +@media screen and (min-width: 60em) { + .full-width + { + /*width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw;*/ + /*width: 60vw;*/ + /*position: relative; + left: 50%; + right: 50%;*/ + /*margin-left: -30vw;*/ + margin-right: -30vw; + max-width: 100vw; + } +} +.code-block .line-numbers-rows { + background: #2f3a46; + border: none; + bottom: -50px; + color: #98a4b3; + left: -178px; + padding: 50px 0; + top: -50px; + width: 138px +} +.code-block .line-numbers-rows>span:before { + color: inherit; + padding-right: 30px +} +.tab-button{ + margin-bottom:1px; + position: relative; + z-index: 1; + color:#333; + border-color:#ccc; + outline: none; + background-color:white; +} +.tab-pane code{ + background:#f1f2f2; + border-radius:0; +} +.tab-pane .chroma{ + background:none; + padding:0; +} +.tab-button.active{ + border-bottom-color:#f1f2f2; + background-color: #f1f2f2; +} +.tab-content .tab-pane{ + display: none; +} +.tab-content .tab-pane.active{ + display: block; +} +/* Treatment of copy buttons inside a tab module */ +.tab-content .copy, .tab-content .copied{ + display: none; +} +.tab-content .tab-pane.active + .copy, .tab-content .tab-pane.active + .copied{ + display: block; +} +.primary-color {color: #0594CB} +.bg-primary-color {background-color: #0594CB} +.hover-bg-primary-color:hover {background-color: #0594CB} +.primary-color-dark {color: #0A1922} +.bg-primary-color-dark {background-color: #0A1922} +.hover-bg-primary-color-dark:hover {background-color: #0A1922} +.primary-color-light {color: #f9f9f9} +.bg-primary-color-light {background-color: #f9f9f9} +.hover-bg-primary-color-light:hover {background-color: #f9f9f9} +.accent-color {color: #EBB951} +.bg-accent-color {background-color: #EBB951} +.hover-bg-accent-color:hover {background-color: #EBB951} +.accent-color-light {color: #FF4088} +.hover-accent-color-light:hover {color: #FF4088} +.bg-accent-color-light {background-color: #FF4088} +.hover-bg-accent-color-light:hover {background-color: #FF4088} +.accent-color-dark {color: #33ba91} +.bg-accent-color-dark {background-color: #33ba91} +.hover-bg-accent-color-dark:hover {background-color: #33ba91} +.text-color-primary {color: #373737} +.text-on-primary-color {color: #fff} +.text-color-secondary {color: #ccc} +.text-color-disabled {color: #F7f7f7} +.divider-color {color: #f6f6f6} +.warn-color {color: red} +.nested-links a { + color: #0594CB; + text-decoration: none; + +} - .column-count-2 {-webkit-column-count: 1;-moz-column-count: 1;column-count: 1} - .column-gap-1 {-webkit-column-gap: 0;-moz-column-gap: 0;column-gap: 0} - .break-inside-avoid {-webkit-column-break-inside: auto;page-break-inside: auto;break-inside: auto} ++.column-count-2 {-webkit-column-count: 1;column-count: 1} ++.column-gap-1 {-webkit-column-gap: 0;column-gap: 0} ++.break-inside-avoid {-webkit-column-break-inside: auto;break-inside: auto} +@media screen and (min-width: 60em) { - .column-count-3-l {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3} - .column-count-2-l {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2} - .column-gap-1-l {-webkit-column-gap: 1;-moz-column-gap: 1;column-gap: 1} - .break-inside-avoid-l {-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid} ++ .column-count-3-l {-webkit-column-count: 3;column-count: 3} ++ .column-count-2-l {-webkit-column-count: 2;column-count: 2} ++ .column-gap-1-l {-webkit-column-gap: 1;column-gap: 1} ++ .break-inside-avoid-l {-webkit-column-break-inside: avoid;break-inside: avoid} +} +.prose ul, .prose ol { + margin-bottom: 2em; +} +.prose ul li, .prose ol li { + margin-bottom: .5em; +} +.prose li:hover { + background-color: #eee +} - .prose ::-moz-selection { - background: #0594CB; /* WebKit/Blink Browsers */ - color: white; - } +.prose ::selection { + background: #0594CB; /* WebKit/Blink Browsers */ + color: white; +} +.prose-glossary h3 { + margin-top: 0; + font-size: 1.125rem; +} +.prose-glossary h3:first-of-type { + margin-top: 3em; +} +.prose-glossary h3 ~ p { + margin: 0.5em 0 2em 0; +} +body { + +line-height: 1.45; + +} +p {margin-bottom: 1.3em;} +h1, h2, h3, h4 { +margin: 1.414em 0 0.5em; + +line-height: 1.2; +} +h1 { +margin-top: 0; +font-size: 2.441em; +} +h2 {font-size: 1.953em;} +h3 {font-size: 1.563em;} +h4 {font-size: 1.25em;} +small, .font_small {font-size: 0.8em;} +.prose table { + width: 100%; + margin-bottom: 3em; + border-collapse: collapse; + border-spacing: 0; + font-size: 1em; + border: 1px solid #eee + +} +.prose table th { + background-color: #0594CB; + border-bottom: 1px solid #0594CB; + color: white; + font-weight: 400; + text-align: left; + padding: .375em .5em; +} +.prose table td, .prose table tc { + padding: .75em .5em; + text-align: left; + border-right: 1px solid #eee; +} +.prose table tr:nth-child(even) { + background-color: #eee; +} +dl dt { + font-weight: bold; + font-size: 1.125rem; +} +dd { + margin: .5em 0 2em 0; + padding: 0; +} +.f2-fluid { + font-size: 2.25rem; +} +@media screen and (min-width: 60em) { + .f2-fluid { + font-size: 1.25rem; + font-size: calc(0.70833rem + 0.83333vw); + } +} +/* From https://www.cssfontstack.com */ +code, .code, pre code, .highlight pre { + font-family: 'inconsolata',Menlo,Monaco,'Courier New',monospace; +} +.sans-serif { + font-family: 'Muli', + avenir, + 'helvetica neue', helvetica, + ubuntu, + roboto, noto, + 'segoe ui', arial, + sans-serif; +} +.serif { + font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif; +} +/* Monospaced Typefaces (for code) */ +.courier { + font-family: 'Courier Next', + courier, + monospace; +} +/* Sans-Serif Typefaces */ +.helvetica { + font-family: 'helvetica neue', helvetica, + sans-serif; +} +.avenir { + font-family: 'avenir next', avenir, + sans-serif; +} +/* Serif Typefaces */ +.athelas { + font-family: athelas, + georgia, + serif; +} +.georgia { + font-family: georgia, + serif; +} +.times { + font-family: times, + serif; +} +.bodoni { + font-family: "Bodoni MT", + serif; +} +.calisto { + font-family: "Calisto MT", + serif; +} +.garamond { + font-family: garamond, + serif; +} +.baskerville { + font-family: baskerville, + serif; +} +/* pagination.html: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */ +.pagination { + margin: 3rem 0; +} +.pagination li { + display: inline-block; + margin-right: .375rem; + font-size: .875rem; + margin-bottom: 2.5em; +} +.pagination li a { + padding: .5rem .625rem; + background-color: white; + color: #333; + border: 1px solid #ddd; + border-radius: 3px; + text-decoration: none; +} +.pagination li.disabled { + display: none; +} +.pagination li.active a:link, +.pagination li.active a:active, +.pagination li.active a:visited { + background-color: #ddd; +} +/* Hides non-meaningful TOC items*/ +#TableOfContents ul li ul li ul li{ + display: none; + } +#TableOfContents ul li { + color: black; + display: block; + margin-bottom: .375em; + line-height: 1.375; +} +#TableOfContents ul li a{ + width: 100%; + padding: .25em .375em; + margin-left: -.375em; + +} +#TableOfContents ul li a:hover { + background-color: #999; + color: white; + +} +.no-js .needs-js { + opacity: 0 +} +.js .needs-js { + opacity: 1; + -webkit-transition: opacity .15s ease-in; + transition: opacity .15s ease-in; +} - .facebook, .twitter, .instagram, .youtube { - fill: #BABABA; ++.facebook, ++.twitter, ++.instagram, ++.youtube { ++ fill: #bababa; +} +.facebook:hover { + fill: #3b5998; +} +.twitter { + fill: #55acee; +} +.twitter:hover { - fill: #BABABA; ++ fill: #bababa; +} +.instagram:hover { + fill: #e95950; +} +.youtube:hover { + fill: #bb0000; +} ++.mstdn { ++ display: inline-block; ++ background-color: #282c37; ++ color: #d9e1e8; ++ text-decoration: none; ++ padding: 4px 10px 4px 30px; ++ border-radius: 4px; ++ font-size: 16px; ++ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2261.076954mm%22%20height%3D%2265.47831mm%22%20viewBox%3D%220%200%20216.4144%20232.00976%22%3E%3Cpath%20d%3D%22M211.80734%20139.0875c-3.18125%2016.36625-28.4925%2034.2775-57.5625%2037.74875-15.15875%201.80875-30.08375%203.47125-45.99875%202.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125%200%202.53375.15625%204.94625.46875%207.2025%203.38375%2025.68625%2025.47%2027.225%2046.39125%2027.9425%2021.11625.7225%2039.91875-5.20625%2039.91875-5.20625l.8675%2019.09s-14.77%207.93125-41.08125%209.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234%20213.82%201.40609%20165.31125.20859%20116.09125c-.365-14.61375-.14-28.39375-.14-39.91875%200-50.33%2032.97625-65.0825%2032.97625-65.0825C49.67234%203.45375%2078.20359.2425%20107.86484%200h.72875c29.66125.2425%2058.21125%203.45375%2074.8375%2011.09%200%200%2032.975%2014.7525%2032.975%2065.0825%200%200%20.41375%2037.13375-4.59875%2062.915%22%20fill%3D%22%233088d4%22%2F%3E%3Cpath%20d%3D%22M177.50984%2080.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025%200-17.4175%207.5075-17.4175%2022.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375%200-15.74%206.32875-15.74%2018.7975v59.15H38.90484V80.077c0-12.455%203.17125-22.3525%209.54125-29.675%206.56875-7.3225%2015.17125-11.07625%2025.85-11.07625%2012.355%200%2021.71125%204.74875%2027.8975%2014.2475l6.01375%2010.08125%206.015-10.08125c6.185-9.49875%2015.54125-14.2475%2027.8975-14.2475%2010.6775%200%2019.28%203.75375%2025.85%2011.07625%206.36875%207.3225%209.54%2017.22%209.54%2029.675%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); ++ background-size: 16px; ++ background-repeat: no-repeat; ++ background-position: top 50% left 8px; ++ -webkit-transition: all 0.5s; ++ transition: all 0.5s; ++} ++.mstdn:hover { ++ background-color: #484c56; ++} ++.mstdn > span { ++ color: #9baec8; ++ font-size: 12px; ++ padding-left: 3px; ++} ++.mstdn > span:before { ++ content: "@"; ++} +@media (min-width: 75em) { + + [data-scrolldir="down"] .sticky { + position: fixed; + top:100px; + right:0; + } + + [data-scrolldir="up"] .sticky { + position: fixed; + top:100px; + right:0; + } +} +.fill-current { fill: currentColor; } +/* Background */ +.chroma { background-color: #ffffff } +/* Error */ +.chroma .err { color: #a61717; background-color: #e3d2d2 } +/* LineTableTD */ +.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ +.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ +.chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ +.chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* LineNumbers */ +.chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* Keyword */ +.chroma .k { font-weight: bold } +/* KeywordConstant */ +.chroma .kc { font-weight: bold } +/* KeywordDeclaration */ +.chroma .kd { font-weight: bold } +/* KeywordNamespace */ +.chroma .kn { font-weight: bold } +/* KeywordPseudo */ +.chroma .kp { font-weight: bold } +/* KeywordReserved */ +.chroma .kr { font-weight: bold } +/* KeywordType */ +.chroma .kt { color: #445588; font-weight: bold } +/* NameAttribute */ +.chroma .na { color: #008080 } +/* NameBuiltin */ +.chroma .nb { color: #999999 } +/* NameClass */ +.chroma .nc { color: #445588; font-weight: bold } +/* NameConstant */ +.chroma .no { color: #008080 } +/* NameEntity */ +.chroma .ni { color: #800080 } +/* NameException */ +.chroma .ne { color: #990000; font-weight: bold } +/* NameFunction */ +.chroma .nf { color: #990000; font-weight: bold } +/* NameNamespace */ +.chroma .nn { color: #555555 } +/* NameTag */ +.chroma .nt { color: #000080 } +/* NameVariable */ +.chroma .nv { color: #008080 } +/* LiteralString */ +.chroma .s { color: #bb8844 } +/* LiteralStringAffix */ +.chroma .sa { color: #bb8844 } +/* LiteralStringBacktick */ +.chroma .sb { color: #bb8844 } +/* LiteralStringChar */ +.chroma .sc { color: #bb8844 } +/* LiteralStringDelimiter */ +.chroma .dl { color: #bb8844 } +/* LiteralStringDoc */ +.chroma .sd { color: #bb8844 } +/* LiteralStringDouble */ +.chroma .s2 { color: #bb8844 } +/* LiteralStringEscape */ +.chroma .se { color: #bb8844 } +/* LiteralStringHeredoc */ +.chroma .sh { color: #bb8844 } +/* LiteralStringInterpol */ +.chroma .si { color: #bb8844 } +/* LiteralStringOther */ +.chroma .sx { color: #bb8844 } +/* LiteralStringRegex */ +.chroma .sr { color: #808000 } +/* LiteralStringSingle */ +.chroma .s1 { color: #bb8844 } +/* LiteralStringSymbol */ +.chroma .ss { color: #bb8844 } +/* LiteralNumber */ +.chroma .m { color: #009999 } +/* LiteralNumberBin */ +.chroma .mb { color: #009999 } +/* LiteralNumberFloat */ +.chroma .mf { color: #009999 } +/* LiteralNumberHex */ +.chroma .mh { color: #009999 } +/* LiteralNumberInteger */ +.chroma .mi { color: #009999 } +/* LiteralNumberIntegerLong */ +.chroma .il { color: #009999 } +/* LiteralNumberOct */ +.chroma .mo { color: #009999 } +/* Operator */ +.chroma .o { font-weight: bold } +/* OperatorWord */ +.chroma .ow { font-weight: bold } +/* Comment */ +.chroma .c { color: #999988; font-style: italic } +/* CommentHashbang */ +.chroma .ch { color: #999988; font-style: italic } +/* CommentMultiline */ +.chroma .cm { color: #999988; font-style: italic } +/* CommentSingle */ +.chroma .c1 { color: #999988; font-style: italic } +/* CommentSpecial */ +.chroma .cs { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreproc */ +.chroma .cp { color: #999999; font-weight: bold } +/* CommentPreprocFile */ +.chroma .cpf { color: #999999; font-weight: bold } +/* GenericDeleted */ +.chroma .gd { color: #000000; background-color: #ffdddd } +/* GenericEmph */ +.chroma .ge { font-style: italic } +/* GenericError */ +.chroma .gr { color: #aa0000 } +/* GenericHeading */ +.chroma .gh { color: #999999 } +/* GenericInserted */ +.chroma .gi { color: #000000; background-color: #ddffdd } +/* GenericOutput */ +.chroma .go { color: #888888 } +/* GenericPrompt */ +.chroma .gp { color: #555555 } +/* GenericStrong */ +.chroma .gs { font-weight: bold } +/* GenericSubheading */ +.chroma .gu { color: #aaaaaa } +/* GenericTraceback */ +.chroma .gt { color: #aa0000 } +/* TextWhitespace */ +.chroma .w { color: #bbbbbb } +.nested-blockquote blockquote { + border-left: 4px solid #0594CB; + padding-left: 1em; + /*margin: 0;*/ +} +.mw-90 { + max-width:90%; +} +/* purgecss end ignore */ + diff --cc docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/output/js/app.js index 346f209ba,000000000..a3e1801f8 mode 100644,000000..100644 --- a/docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/output/js/app.js +++ b/docs/_vendor/github.com/gohugoio/gohugoioTheme/assets/output/js/app.js @@@ -1,24 -1,0 +1,17 @@@ - !function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){!function(e,n){var r=function(t,e,n){"use strict";var r,i;if(function(){var e,n={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};for(e in i=t.lazySizesConfig||t.lazysizesConfig||{},n)e in i||(i[e]=n[e])}(),!e||!e.getElementsByClassName)return{init:function(){},cfg:i,noSupport:!0};var o=e.documentElement,s=t.HTMLPictureElement,a=t.addEventListener.bind(t),u=t.setTimeout,c=t.requestAnimationFrame||u,l=t.requestIdleCallback,h=/^picture$/i,f=["load","error","lazyincluded","_lazyloaded"],p={},d=Array.prototype.forEach,g=function(t,e){return p[e]||(p[e]=new RegExp("(\\s|^)"+e+"(\\s|$)")),p[e].test(t.getAttribute("class")||"")&&p[e]},m=function(t,e){g(t,e)||t.setAttribute("class",(t.getAttribute("class")||"").trim()+" "+e)},y=function(t,e){var n;(n=g(t,e))&&t.setAttribute("class",(t.getAttribute("class")||"").replace(n," "))},v=function(t,e,n){var r=n?"addEventListener":"removeEventListener";n&&v(t,e),f.forEach((function(n){t[r](n,e)}))},b=function(t,n,i,o,s){var a=e.createEvent("Event");return i||(i={}),i.instance=r,a.initEvent(n,!o,!s),a.detail=i,t.dispatchEvent(a),a},w=function(e,n){var r;!s&&(r=t.picturefill||i.pf)?(n&&n.src&&!e.getAttribute("srcset")&&e.setAttribute("srcset",n.src),r({reevaluate:!0,elements:[e]})):n&&n.src&&(e.src=n.src)},_=function(t,e){return(getComputedStyle(t,null)||{})[e]},x=function(t,e,n){for(n=n||t.offsetWidth;n0)&&"visible"!=_(i,"overflow")&&(r=i.getBoundingClientRect(),s=z>r.left&&Fr.top-1&&H500&&o.clientWidth>500?500:370:i.expand,r._defEx=p,d=p*i.expFactor,g=i.hFac,U=null,W2&&D>2&&!e.hidden?(W=d,X=0):W=D>1&&X>1&&Q<6?p:0),f!==c&&($=innerWidth+c*g,M=innerHeight+c,l=-1*c,f=c),s=m[n].getBoundingClientRect(),(B=s.bottom)>=l&&(H=s.top)<=M&&(z=s.right)>=l*g&&(F=s.left)<=$&&(B||z||F||H)&&(i.loadHidden||Z(m[n]))&&(R&&Q<3&&!h&&(D<3||X<4)||Y(m[n],c))){if(at(m[n]),u=!0,Q>9)break}else!u&&R&&!a&&Q<4&&X<4&&D>2&&(L[0]||i.preloadAfterLoad)&&(L[0]||!h&&(B||z||F||H||"auto"!=m[n].getAttribute(i.sizesAttr)))&&(a=L[0]||m[n]);a&&!u&&at(a)}},et=function(t){var e,r=0,o=i.throttleDelay,s=i.ricTimeout,a=function(){e=!1,r=n.now(),t()},c=l&&s>49?function(){l(a,{timeout:s}),s!==i.ricTimeout&&(s=i.ricTimeout)}:C((function(){u(a)}),!0);return function(t){var i;(t=!0===t)&&(s=33),e||(e=!0,(i=o-(n.now()-r))<0&&(i=0),t||i<9?c():u(c,i))}}(tt),nt=function(t){var e=t.target;e._lazyCache?delete e._lazyCache:(G(t),m(e,i.loadedClass),y(e,i.loadingClass),v(e,it),b(e,"lazyloaded"))},rt=C(nt),it=function(t){rt({target:t.target})},ot=function(t){var e,n=t.getAttribute(i.srcsetAttr);(e=i.customMedia[t.getAttribute("data-media")||t.getAttribute("media")])&&t.setAttribute("media",e),n&&t.setAttribute("srcset",n)},st=C((function(t,e,n,r,o){var s,a,c,l,f,p;(f=b(t,"lazybeforeunveil",e)).defaultPrevented||(r&&(n?m(t,i.autosizesClass):t.setAttribute("sizes",r)),a=t.getAttribute(i.srcsetAttr),s=t.getAttribute(i.srcAttr),o&&(l=(c=t.parentNode)&&h.test(c.nodeName||"")),p=e.firesLoad||"src"in t&&(a||s||l),f={target:t},m(t,i.loadingClass),p&&(clearTimeout(P),P=u(G,2500),v(t,it,!0)),l&&d.call(c.getElementsByTagName("source"),ot),a?t.setAttribute("srcset",a):s&&!l&&(K.test(t.nodeName)?function(t,e){var n=t.getAttribute("data-load-mode")||i.iframeLoadMode;0==n?t.contentWindow.location.replace(e):1==n&&(t.src=e)}(t,s):t.src=s),o&&(a||l)&&w(t,{src:s})),t._lazyRace&&delete t._lazyRace,y(t,i.lazyClass),S((function(){var e=t.complete&&t.naturalWidth>1;p&&!e||(e&&m(t,i.fastLoadedClass),nt(f),t._lazyCache=!0,u((function(){"_lazyCache"in t&&delete t._lazyCache}),9)),"lazy"==t.loading&&Q--}),!0)})),at=function(t){if(!t._lazyRace){var e,n=V.test(t.nodeName),r=n&&(t.getAttribute(i.sizesAttr)||t.getAttribute("sizes")),o="auto"==r;(!o&&R||!n||!t.getAttribute("src")&&!t.srcset||t.complete||g(t,i.errorClass)||!g(t,i.lazyClass))&&(e=b(t,"lazyunveilread").detail,o&&T.updateElem(t,!0,t.offsetWidth),t._lazyRace=!0,Q++,st(t,e,o,r,n))}},ut=A((function(){i.loadMode=3,et()})),ct=function(){3==i.loadMode&&(i.loadMode=2),ut()},lt=function(){R||(n.now()-q<999?u(lt,999):(R=!0,i.loadMode=3,et(),a("scroll",ct,!0)))},{_:function(){q=n.now(),r.elements=e.getElementsByClassName(i.lazyClass),L=e.getElementsByClassName(i.lazyClass+" "+i.preloadClass),a("scroll",et,!0),a("resize",et,!0),a("pageshow",(function(t){if(t.persisted){var n=e.querySelectorAll("."+i.loadingClass);n.length&&n.forEach&&c((function(){n.forEach((function(t){t.complete&&at(t)}))}))}})),t.MutationObserver?new MutationObserver(et).observe(o,{childList:!0,subtree:!0,attributes:!0}):(o.addEventListener("DOMNodeInserted",et,!0),o.addEventListener("DOMAttrModified",et,!0),setInterval(et,999)),a("hashchange",et,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach((function(t){e.addEventListener(t,et,!0)})),/d$|^c/.test(e.readyState)?lt():(a("load",lt),e.addEventListener("DOMContentLoaded",et),u(lt,2e4)),r.elements.length?(tt(),S._lsFlush()):et()},checkElems:et,unveil:at,_aLSL:ct}),T=(N=C((function(t,e,n,r){var i,o,s;if(t._lazysizesWidth=r,r+="px",t.setAttribute("sizes",r),h.test(e.nodeName||""))for(o=0,s=(i=e.getElementsByTagName("source")).length;o0)&&"visible"!=_(i,"overflow")&&(r=i.getBoundingClientRect(),s=z>r.left&&Fr.top-1&&H500&&o.clientWidth>500?500:370:i.expand,r._defEx=d,p=d*i.expFactor,g=i.hFac,U=null,W2&&D>2&&!e.hidden?(W=p,X=0):W=D>1&&X>1&&Q<6?d:0),f!==c&&($=innerWidth+c*g,M=innerHeight+c,l=-1*c,f=c),s=m[n].getBoundingClientRect(),(B=s.bottom)>=l&&(H=s.top)<=M&&(z=s.right)>=l*g&&(F=s.left)<=$&&(B||z||F||H)&&(i.loadHidden||Z(m[n]))&&(R&&Q<3&&!h&&(D<3||X<4)||Y(m[n],c))){if(at(m[n]),u=!0,Q>9)break}else!u&&R&&!a&&Q<4&&X<4&&D>2&&(L[0]||i.preloadAfterLoad)&&(L[0]||!h&&(B||z||F||H||"auto"!=m[n].getAttribute(i.sizesAttr)))&&(a=L[0]||m[n]);a&&!u&&at(a)}},et=function(t){var e,r=0,o=i.throttleDelay,s=i.ricTimeout,a=function(){e=!1,r=n.now(),t()},c=l&&s>49?function(){l(a,{timeout:s}),s!==i.ricTimeout&&(s=i.ricTimeout)}:C((function(){u(a)}),!0);return function(t){var i;(t=!0===t)&&(s=33),e||(e=!0,(i=o-(n.now()-r))<0&&(i=0),t||i<9?c():u(c,i))}}(tt),nt=function(t){var e=t.target;e._lazyCache?delete e._lazyCache:(G(t),m(e,i.loadedClass),y(e,i.loadingClass),v(e,it),b(e,"lazyloaded"))},rt=C(nt),it=function(t){rt({target:t.target})},ot=function(t){var e,n=t.getAttribute(i.srcsetAttr);(e=i.customMedia[t.getAttribute("data-media")||t.getAttribute("media")])&&t.setAttribute("media",e),n&&t.setAttribute("srcset",n)},st=C((function(t,e,n,r,o){var s,a,c,l,f,d;(f=b(t,"lazybeforeunveil",e)).defaultPrevented||(r&&(n?m(t,i.autosizesClass):t.setAttribute("sizes",r)),a=t.getAttribute(i.srcsetAttr),s=t.getAttribute(i.srcAttr),o&&(l=(c=t.parentNode)&&h.test(c.nodeName||"")),d=e.firesLoad||"src"in t&&(a||s||l),f={target:t},m(t,i.loadingClass),d&&(clearTimeout(P),P=u(G,2500),v(t,it,!0)),l&&p.call(c.getElementsByTagName("source"),ot),a?t.setAttribute("srcset",a):s&&!l&&(K.test(t.nodeName)?function(t,e){var n=t.getAttribute("data-load-mode")||i.iframeLoadMode;0==n?t.contentWindow.location.replace(e):1==n&&(t.src=e)}(t,s):t.src=s),o&&(a||l)&&w(t,{src:s})),t._lazyRace&&delete t._lazyRace,y(t,i.lazyClass),S((function(){var e=t.complete&&t.naturalWidth>1;d&&!e||(e&&m(t,i.fastLoadedClass),nt(f),t._lazyCache=!0,u((function(){"_lazyCache"in t&&delete t._lazyCache}),9)),"lazy"==t.loading&&Q--}),!0)})),at=function(t){if(!t._lazyRace){var e,n=V.test(t.nodeName),r=n&&(t.getAttribute(i.sizesAttr)||t.getAttribute("sizes")),o="auto"==r;(!o&&R||!n||!t.getAttribute("src")&&!t.srcset||t.complete||g(t,i.errorClass)||!g(t,i.lazyClass))&&(e=b(t,"lazyunveilread").detail,o&&T.updateElem(t,!0,t.offsetWidth),t._lazyRace=!0,Q++,st(t,e,o,r,n))}},ut=A((function(){i.loadMode=3,et()})),ct=function(){3==i.loadMode&&(i.loadMode=2),ut()},lt=function(){R||(n.now()-q<999?u(lt,999):(R=!0,i.loadMode=3,et(),a("scroll",ct,!0)))},{_:function(){q=n.now(),r.elements=e.getElementsByClassName(i.lazyClass),L=e.getElementsByClassName(i.lazyClass+" "+i.preloadClass),a("scroll",et,!0),a("resize",et,!0),a("pageshow",(function(t){if(t.persisted){var n=e.querySelectorAll("."+i.loadingClass);n.length&&n.forEach&&c((function(){n.forEach((function(t){t.complete&&at(t)}))}))}})),t.MutationObserver?new MutationObserver(et).observe(o,{childList:!0,subtree:!0,attributes:!0}):(o.addEventListener("DOMNodeInserted",et,!0),o.addEventListener("DOMAttrModified",et,!0),setInterval(et,999)),a("hashchange",et,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach((function(t){e.addEventListener(t,et,!0)})),/d$|^c/.test(e.readyState)?lt():(a("load",lt),e.addEventListener("DOMContentLoaded",et),u(lt,2e4)),r.elements.length?(tt(),S._lsFlush()):et()},checkElems:et,unveil:at,_aLSL:ct}),T=(N=C((function(t,e,n,r){var i,o,s;if(t._lazysizesWidth=r,r+="px",t.setAttribute("sizes",r),h.test(e.nodeName||""))for(o=0,s=(i=e.getElementsByTagName("source")).length;o1&&void 0!==arguments[1]?arguments[1]:{container:document.body},n="";return"string"==typeof t?n=h(t,e):t instanceof HTMLInputElement&&!["text","search","url","tel","password"].includes(null==t?void 0:t.type)?n=h(t.value,e):(n=u()(t),c("copy")),n};function p(t){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var d=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.action,n=void 0===e?"copy":e,r=t.container,i=t.target,o=t.text;if("copy"!==n&&"cut"!==n)throw new Error('Invalid "action" value, use either "copy" or "cut"');if(void 0!==i){if(!i||"object"!==p(i)||1!==i.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===n&&i.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===n&&(i.hasAttribute("readonly")||i.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes')}return o?f(o,{container:r}):i?"cut"===n?l(i):f(i,{container:r}):void 0};function g(t){return(g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function m(t,e){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:{container:document.body};return f(t,e)}},{key:"cut",value:function(t){return l(t)}},{key:"isSupported",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],e="string"==typeof t?[t]:t,n=!!document.queryCommandSupported;return e.forEach((function(t){n=n&&!!document.queryCommandSupported(t)})),n}}],(n=[{key:"resolveOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText,this.container="object"===g(t.container)?t.container:document.body}},{key:"listenClick",value:function(t){var e=this;this.listener=s()(t,"click",(function(t){return e.onClick(t)}))}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget,n=this.action(e)||"copy",r=d({action:n,container:this.container,target:this.target(e),text:this.text(e)});this.emit(r?"success":"error",{action:n,text:r,trigger:e,clearSelection:function(){e&&e.focus(),window.getSelection().removeAllRanges()}})}},{key:"defaultAction",value:function(t){return _("action",t)}},{key:"defaultTarget",value:function(t){var e=_("target",t);if(e)return document.querySelector(e)}},{key:"defaultText",value:function(t){return _("text",t)}},{key:"destroy",value:function(){this.listener.destroy()}}])&&m(e.prototype,n),r&&m(e,r),o}(i())},828:function(t){if("undefined"!=typeof Element&&!Element.prototype.matches){var e=Element.prototype;e.matches=e.matchesSelector||e.mozMatchesSelector||e.msMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector}t.exports=function(t,e){for(;t&&9!==t.nodeType;){if("function"==typeof t.matches&&t.matches(e))return t;t=t.parentNode}}},438:function(t,e,n){var r=n(828);function i(t,e,n,r,i){var s=o.apply(this,arguments);return t.addEventListener(n,s,i),{destroy:function(){t.removeEventListener(n,s,i)}}}function o(t,e,n,i){return function(n){n.delegateTarget=r(n.target,e),n.delegateTarget&&i.call(t,n)}}t.exports=function(t,e,n,r,o){return"function"==typeof t.addEventListener?i.apply(null,arguments):"function"==typeof n?i.bind(null,document).apply(null,arguments):("string"==typeof t&&(t=document.querySelectorAll(t)),Array.prototype.map.call(t,(function(t){return i(t,e,n,r,o)})))}},879:function(t,e){e.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},e.nodeList=function(t){var n=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===n||"[object HTMLCollection]"===n)&&"length"in t&&(0===t.length||e.node(t[0]))},e.string=function(t){return"string"==typeof t||t instanceof String},e.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},370:function(t,e,n){var r=n(879),i=n(438);t.exports=function(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!r.string(e))throw new TypeError("Second argument must be a String");if(!r.fn(n))throw new TypeError("Third argument must be a Function");if(r.node(t))return function(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}(t,e,n);if(r.nodeList(t))return function(t,e,n){return Array.prototype.forEach.call(t,(function(t){t.addEventListener(e,n)})),{destroy:function(){Array.prototype.forEach.call(t,(function(t){t.removeEventListener(e,n)}))}}}(t,e,n);if(r.string(t))return function(t,e,n){return i(document.body,t,e,n)}(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}},817:function(t){t.exports=function(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var r=window.getSelection(),i=document.createRange();i.selectNodeContents(t),r.removeAllRanges(),r.addRange(i),e=r.toString()}return e}},279:function(t){function e(){}e.prototype={on:function(t,e,n){var r=this.e||(this.e={});return(r[t]||(r[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var r=this;function i(){r.off(t,i),e.apply(n,arguments)}return i._=e,this.on(t,i,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),r=0,i=n.length;r";var r=document.createElement("div");r.appendChild(document.createTextNode(e)),n=n||"";var i=document.createElement("div");i.appendChild(document.createTextNode(n));var s=document.createElement("div");return s.appendChild(document.createTextNode(t)),s.innerHTML.replace(RegExp(o(r.innerHTML),"g"),e).replace(RegExp(o(i.innerHTML),"g"),n)}}},function(t,e,n){"use strict";t.exports={element:null}},function(t,e){var n=Object.prototype.hasOwnProperty,r=Object.prototype.toString;t.exports=function(t,e,i){if("[object Function]"!==r.call(e))throw new TypeError("iterator must be a function");var o=t.length;if(o===+o)for(var s=0;s was loaded but did not call our provided callback"),JSONPScriptError:o("JSONPScriptError","` → `` ++* `` → `` diff --cc docs/content/en/functions/safe/JSStr.md index 000000000,000000000..790de3a73 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/safe/JSStr.md @@@ -1,0 -1,0 +1,61 @@@ ++--- ++title: safe.JSStr ++linkTitle: safeJSStr ++description: Declares the provided string as a known safe JavaScript string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [safeJSStr] ++ returnType: template.JSStr ++ signatures: [safe.JSStr INPUT] ++relatedFunctions: ++ - safe.CSS ++ - safe.HTML ++ - safe.HTMLAttr ++ - safe.JS ++ - safe.JSStr ++ - safe.URL ++aliases: [/functions/safejsstr] ++--- ++ ++Encapsulates a sequence of characters meant to be embedded between quotes in a JavaScript expression. Use of this type presents a security risk: the encapsulated content should come from a trusted source, as it will be included verbatim in the template output. ++ ++Without declaring a variable to be a safe JavaScript string: ++ ++```go-html-template ++{{ $title := "Lilo & Stitch" }} ++ ++``` ++ ++Rendered: ++ ++ ++```html ++ ++``` ++ ++To avoid escaping by Go's [html/template] package: ++ ++```go-html-template ++{{ $title := "Lilo & Stitch" }} ++ ++``` ++ ++Rendered: ++ ++```html ++ ++``` ++ ++[html/template]: https://pkg.go.dev/html/template diff --cc docs/content/en/functions/safe/URL.md index 000000000,000000000..edc62ff9d new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/safe/URL.md @@@ -1,0 -1,0 +1,75 @@@ ++--- ++title: safe.URL ++linkTitle: safeURL ++description: Declares the provided string as a safe URL or URL substring. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [safeURL] ++ returnType: template.URL ++ signatures: [safe.URL INPUT] ++relatedFunctions: ++ - safe.CSS ++ - safe.HTML ++ - safe.HTMLAttr ++ - safe.JS ++ - safe.JSStr ++ - safe.URL ++aliases: [/functions/safeurl] ++--- ++ ++`safeURL` declares the provided string as a "safe" URL or URL substring (see [RFC 3986]). A URL like `javascript:checkThatFormNotEditedBeforeLeavingPage()` from a trusted source should go in the page, but by default dynamic `javascript:` URLs are filtered out since they are a frequently exploited injection vector. ++ ++Without `safeURL`, only the URI schemes `http:`, `https:` and `mailto:` are considered safe by Go templates. If any other URI schemes (e.g., `irc:` and `javascript:`) are detected, the whole URL will be replaced with `#ZgotmplZ`. This is to "defang" any potential attack in the URL by rendering it useless. ++ ++The following examples use a [site `hugo.toml`][configuration] with the following [menu entry][menus]: ++ ++{{< code-toggle file="hugo" copy=false >}} ++[[menu.main]] ++name = "IRC: #golang at freenode" ++url = "irc://irc.freenode.net/#golang" ++{{< /code-toggle >}} ++ ++The following is an example of a sidebar partial that may be used in conjunction with the preceding front matter example: ++ ++{{< code file="layouts/partials/bad-url-sidebar-menu.html" copy=false >}} ++ ++
    ++ {{ range .Site.Menus.main }} ++
  • {{ .Name }}
  • ++ {{ end }} ++
++{{< /code >}} ++ ++This partial would produce the following HTML output: ++ ++```html ++ ++ ++``` ++ ++The odd output can be remedied by adding ` | safeURL` to our `.URL` page variable: ++ ++{{< code file="layouts/partials/correct-url-sidebar-menu.html" copy=false >}} ++ ++ ++{{< /code >}} ++ ++With the `.URL` page variable piped through `safeURL`, we get the desired output: ++ ++```html ++ ++``` ++ ++[configuration]: /getting-started/configuration/ ++[menus]: /content-management/menus/ ++[RFC 3986]: https://tools.ietf.org/html/rfc3986 diff --cc docs/content/en/functions/site/index.md index 000000000,000000000..3341bff98 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/site/index.md @@@ -1,0 -1,0 +1,35 @@@ ++--- ++title: site ++description: Provides global access to the .Site object. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: ++ signatures: [site] ++relatedFunctions: ++ - hugo ++ - page ++ - site ++aliases: [/functions/site] ++--- ++ ++At the top level of a template that receives the `Site` object in context, these are equivalent: ++ ++```go-html-template ++{{ .Site.Params.foo }} ++{{ site.Params.foo }} ++``` ++ ++When the `Site` object is not in context, use the global `site` function: ++ ++```go-html-template ++{{ site.Params.foo }} ++``` ++ ++{{% note %}} ++To simplify your templates, use the global `site` function regardless of whether the `Site` object is in context. ++{{% /note %}} diff --cc docs/content/en/functions/strings/Chomp.md index 000000000,000000000..22e2b546b new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Chomp.md @@@ -1,0 -1,0 +1,31 @@@ ++--- ++title: chomp ++linkTitle: chomp ++description: Removes any trailing newline characters. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [chomp] ++ returnType: any ++ signatures: [strings.Chomp STRING] ++relatedFunctions: ++ - strings.Chomp ++ - strings.Trim ++ - strings.TrimLeft ++ - strings.TrimPrefix ++ - strings.TrimRight ++ - strings.TrimSuffix ++aliases: [/functions/chomp] ++--- ++ ++If the argument is of type template.HTML, returns template.HTML, else returns a string. ++ ++ ++Useful in a pipeline to remove newlines added by other processing (e.g., [`markdownify`](/functions/transform/markdownify)). ++ ++```go-html-template ++{{ chomp "

Blockhead

\n" }} → "

Blockhead

" ++``` diff --cc docs/content/en/functions/strings/Contains.md index 000000000,000000000..66a90aeea new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Contains.md @@@ -1,0 -1,0 +1,29 @@@ ++--- ++title: strings.Contains ++description: Reports whether the string contains a substring. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: bool ++ signatures: [strings.Contains STRING SUBSTRING] ++relatedFunctions: ++ - strings.Contains ++ - strings.ContainsAny ++ - strings.ContainsNonSpace ++ - strings.HasPrefix ++ - strings.HasSuffix ++aliases: [/functions/strings.contains] ++--- ++ ++```go-html-template ++{{ strings.Contains "Hugo" "go" }} → true ++``` ++The check is case sensitive: ++ ++```go-html-template ++{{ strings.Contains "Hugo" "Go" }} → false ++``` diff --cc docs/content/en/functions/strings/ContainsAny.md index 000000000,000000000..4f324358a new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/ContainsAny.md @@@ -1,0 -1,0 +1,30 @@@ ++--- ++title: strings.ContainsAny ++description: Reports whether a string contains any character from a given string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: bool ++ signatures: [strings.ContainsAny STRING CHARACTERS] ++relatedFunctions: ++ - strings.Contains ++ - strings.ContainsAny ++ - strings.ContainsNonSpace ++ - strings.HasPrefix ++ - strings.HasSuffix ++aliases: [/functions/strings.containsany] ++--- ++ ++```go-html-template ++{{ strings.ContainsAny "Hugo" "gm" }} → true ++``` ++ ++The check is case sensitive: ++ ++```go-html-template ++{{ strings.ContainsAny "Hugo" "Gm" }} → false ++``` diff --cc docs/content/en/functions/strings/ContainsNonSpace.md index 000000000,000000000..d2e6114b3 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/ContainsNonSpace.md @@@ -1,0 -1,0 +1,36 @@@ ++--- ++title: strings.ContainsNonSpace ++description: Reports whether a string contains any non-space characters as defined by Unicode’s White Space property. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: bool ++ signatures: [strings.ContainsNonSpace STRING] ++relatedFunctions: ++ - strings.Contains ++ - strings.ContainsAny ++ - strings.ContainsNonSpace ++ - strings.HasPrefix ++ - strings.HasSuffix ++aliases: [/functions/strings.containsnonspace] ++--- ++ ++```go-html-template ++{{ strings.ContainsNonSpace "\n" }} → false ++{{ strings.ContainsNonSpace " " }} → false ++{{ strings.ContainsNonSpace "\n abc" }} → true ++``` ++ ++Common white space characters include: ++ ++```text ++'\t', '\n', '\v', '\f', '\r', ' ' ++``` ++ ++See the [Unicode Character Database] for a complete list. ++ ++[Unicode Character Database]: https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt diff --cc docs/content/en/functions/strings/Count.md index 000000000,000000000..25ea58967 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Count.md @@@ -1,0 -1,0 +1,29 @@@ ++--- ++title: strings.Count ++description: Returns the number of non-overlapping instances of a substring within a string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: int ++ signatures: [strings.Count SUBSTR STRING] ++relatedFunctions: ++ - len ++ - strings.Count ++ - strings.CountRunes ++ - strings.CountWords ++ - strings.RuneCount ++aliases: [/functions/strings.count] ++--- ++ ++If `SUBSTR` is an empty string, this function returns 1 plus the number of Unicode code points in `STRING`. ++ ++```go-html-template ++{{ "aaabaab" | strings.Count "a" }} → 5 ++{{ "aaabaab" | strings.Count "aa" }} → 2 ++{{ "aaabaab" | strings.Count "aaa" }} → 1 ++{{ "aaabaab" | strings.Count "" }} → 8 ++``` diff --cc docs/content/en/functions/strings/CountRunes.md index 000000000,000000000..4a17d04ab new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/CountRunes.md @@@ -1,0 -1,0 +1,29 @@@ ++--- ++title: strings.CountRunes ++linkTitle: countrunes ++description: Returns the number of runes in a string excluding whitespace. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [countrunes] ++ returnType: int ++ signatures: [strings.CountRunes INPUT] ++relatedFunctions: ++ - len ++ - strings.Count ++ - strings.CountRunes ++ - strings.CountWords ++ - strings.RuneCount ++aliases: [/functions/countrunes] ++--- ++ ++In contrast with the [`strings.RuneCount`] function, which counts every rune in a string, `strings.CountRunes` excludes whitespace. ++ ++```go-html-template ++{{ "Hello, 世界" | strings.CountRunes }} → 8 ++``` ++ ++[`strings.RuneCount`]: /functions/strings/runecount diff --cc docs/content/en/functions/strings/CountWords.md index 000000000,000000000..e6915e6cd new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/CountWords.md @@@ -1,0 -1,0 +1,31 @@@ ++--- ++title: strings.CountWords ++linkTitle: countwords ++description: Counts the number of words in a string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [countwords] ++ returnType: int ++ signatures: [strings.CountWords INPUT] ++relatedFunctions: ++ - len ++ - strings.Count ++ - strings.CountRunes ++ - strings.CountWords ++ - strings.RuneCount ++aliases: [/functions/countwords] ++--- ++ ++The template function works similar to the [.WordCount page variable][pagevars]. ++ ++```go-html-template ++{{ "Hugo is a static site generator." | countwords }} ++ ++``` ++ ++ ++[pagevars]: /variables/page/ diff --cc docs/content/en/functions/strings/FindRESubmatch.md index 000000000,000000000..5a0410fdb new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/FindRESubmatch.md @@@ -1,0 -1,0 +1,95 @@@ ++--- ++title: strings.FindRESubmatch ++linkTitle: findRESubmatch ++description: Returns a slice of all successive matches of the regular expression. Each element is a slice of strings holding the text of the leftmost match of the regular expression and the matches, if any, of its subexpressions. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [findRESubmatch] ++ returnType: '[]string' ++ signatures: ['strings.FindRESubmatch PATTERN INPUT [LIMIT]'] ++relatedFunctions: ++ - strings.FindRE ++ - strings.FindRESubmatch ++ - strings.Replace ++ - strings.ReplaceRE ++aliases: [/functions/findresubmatch] ++--- ++ ++By default, `findRESubmatch` finds all matches. You can limit the number of matches with an optional LIMIT argument. A return value of nil indicates no match. ++ ++{{% readfile file="/functions/_common/regular-expressions.md" %}} ++ ++## Demonstrative examples ++ ++```go-html-template ++{{ findRESubmatch `a(x*)b` "-ab-" }} → [["ab" ""]] ++{{ findRESubmatch `a(x*)b` "-axxb-" }} → [["axxb" "xx"]] ++{{ findRESubmatch `a(x*)b` "-ab-axb-" }} → [["ab" ""] ["axb" "x"]] ++{{ findRESubmatch `a(x*)b` "-axxb-ab-" }} → [["axxb" "xx"] ["ab" ""]] ++{{ findRESubmatch `a(x*)b` "-axxb-ab-" 1 }} → [["axxb" "xx"]] ++``` ++ ++## Practical example ++ ++This markdown: ++ ++```text ++- [Example](https://example.org) ++- [Hugo](https://gohugo.io) ++``` ++ ++Produces this HTML: ++ ++```html ++ ++``` ++ ++To match the anchor elements, capturing the link destination and text: ++ ++```go-html-template ++{{ $regex := `(.+?)` }} ++{{ $matches := findRESubmatch $regex .Content }} ++``` ++ ++Viewed as JSON, the data structure of `$matches` in the code above is: ++ ++```json ++[ ++ [ ++ "Example", ++ "https://example.org", ++ "Example" ++ ], ++ [ ++ "Hugo", ++ "https://gohugo.io", ++ "Hugo" ++ ] ++] ++``` ++ ++To render the `href` attributes: ++ ++```go-html-template ++{{ range $matches }} ++ {{ index . 1 }} ++{{ end }} ++``` ++ ++Result: ++ ++```text ++https://example.org ++https://gohugo.io ++``` ++ ++{{% note %}} ++You can write and test your regular expression using [regex101.com](https://regex101.com/). Be sure to select the Go flavor before you begin. ++{{% /note %}} diff --cc docs/content/en/functions/strings/FindRe.md index 000000000,000000000..4a7811f3d new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/FindRe.md @@@ -1,0 -1,0 +1,41 @@@ ++--- ++title: strings.FindRE ++linkTitle: findRE ++description: Returns a slice of strings that match the regular expression. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [findRE] ++ returnType: string ++ signatures: ['strings.FindRE PATTERN INPUT [LIMIT]'] ++relatedFunctions: ++ - strings.FindRE ++ - strings.FindRESubmatch ++ - strings.Replace ++ - strings.ReplaceRE ++aliases: [/functions/findre] ++--- ++By default, `findRE` finds all matches. You can limit the number of matches with an optional LIMIT argument. ++ ++{{% readfile file="/functions/_common/regular-expressions.md" %}} ++ ++This example returns a slice of all second level headings (`h2` elements) within the rendered `.Content`: ++ ++```go-html-template ++{{ findRE `(?s).*?` .Content }} ++``` ++ ++The `s` flag causes `.` to match `\n` as well, allowing us to find an `h2` element that contains newlines. ++ ++To limit the number of matches to one: ++ ++```go-html-template ++{{ findRE `(?s).*?` .Content 1 }} ++``` ++ ++{{% note %}} ++You can write and test your regular expression using [regex101.com](https://regex101.com/). Be sure to select the Go flavor before you begin. ++{{% /note %}} diff --cc docs/content/en/functions/strings/FirstUpper.md index 000000000,000000000..320f01eda new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/FirstUpper.md @@@ -1,0 -1,0 +1,23 @@@ ++--- ++title: strings.FirstUpper ++description: Capitalizes the first character of a given string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: string ++ signatures: [strings.FirstUpper STRING] ++relatedFunctions: ++ - strings.FirstUpper ++ - strings.Title ++ - strings.ToLower ++ - strings.ToUpper ++aliases: [/functions/strings.firstupper] ++--- ++ ++```go-html-template ++{{ strings.FirstUpper "foo" }} → "Foo" ++``` diff --cc docs/content/en/functions/strings/HasPrefix.md index 000000000,000000000..88a79a935 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/HasPrefix.md @@@ -1,0 -1,0 +1,24 @@@ ++--- ++title: strings.HasPrefix ++description: Reports whether a string begins with prefix. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [hasPrefix] ++ returnType: bool ++ signatures: [strings.HasPrefix STRING PREFIX] ++relatedFunctions: ++ - strings.Contains ++ - strings.ContainsAny ++ - strings.ContainsNonSpace ++ - strings.HasPrefix ++ - strings.HasSuffix ++aliases: [/functions/hasprefix,/functions/strings.hasprefix] ++--- ++ ++```go-html-template ++{{ hasPrefix "Hugo" "Hu" }} → true ++``` diff --cc docs/content/en/functions/strings/HasSuffix.md index 000000000,000000000..d11f3e8cf new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/HasSuffix.md @@@ -1,0 -1,0 +1,24 @@@ ++--- ++title: strings.HasSuffix ++description: Reports whether a string ends with suffix. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [hasSuffix] ++ returnType: bool ++ signatures: [strings.HasSuffix STRING SUFFIX] ++relatedFunctions: ++ - strings.Contains ++ - strings.ContainsAny ++ - strings.ContainsNonSpace ++ - strings.HasPrefix ++ - strings.HasSuffix ++aliases: [/functions/hassuffix,/functions/strings/hassuffix] ++--- ++ ++```go-html-template ++{{ hasSuffix "Hugo" "go" }} → true ++``` diff --cc docs/content/en/functions/strings/Repeat.md index 000000000,000000000..718f24984 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Repeat.md @@@ -1,0 -1,0 +1,20 @@@ ++--- ++title: strings.Repeat ++description: Returns a new string consisting of zero or more copies of another string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: string ++ signatures: [strings.Repeat COUNT INPUT] ++relatedFunctions: [] ++aliases: [/functions/strings.repeat] ++--- ++ ++```go-html-template ++{{ strings.Repeat 3 "yo" }} → "yoyoyo" ++{{ "yo" | strings.Repeat 3 }} → "yoyoyo" ++``` diff --cc docs/content/en/functions/strings/Replace.md index 000000000,000000000..8d5e54859 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Replace.md @@@ -1,0 -1,0 +1,30 @@@ ++--- ++title: strings.Replace ++linkTitle: replace ++description: Replaces all occurrences of the search string with the replacement string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [replace] ++ returnType: string ++ signatures: ['strings.Replace INPUT OLD NEW [LIMIT]'] ++relatedFunctions: ++ - strings.FindRE ++ - strings.FindRESubmatch ++ - strings.Replace ++ - strings.ReplaceRE ++aliases: [/functions/replace] ++--- ++ ++Replace returns a copy of `INPUT` with all occurrences of `OLD` replaced with `NEW`. ++The number of replacements can be limited with an optional `LIMIT` argument. ++ ++``` ++{{ replace "Batman and Robin" "Robin" "Catwoman" }} ++→ "Batman and Catwoman" ++ ++{{ replace "aabbaabb" "a" "z" 2 }} → "zzbbaabb" ++``` diff --cc docs/content/en/functions/strings/ReplaceRE.md index 000000000,000000000..247595877 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/ReplaceRE.md @@@ -1,0 -1,0 +1,51 @@@ ++--- ++title: strings.ReplaceRE ++linkTitle: replaceRE ++description: Returns a string, replacing all occurrences of a regular expression with a replacement pattern. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [replaceRE] ++ returnType: string ++ signatures: ['strings.ReplaceRE PATTERN REPLACEMENT INPUT [LIMIT]'] ++relatedFunctions: ++ - strings.FindRE ++ - strings.FindRESubmatch ++ - strings.Replace ++ - strings.ReplaceRE ++aliases: [/functions/replacere] ++--- ++By default, `replaceRE` replaces all matches. You can limit the number of matches with an optional LIMIT argument. ++ ++{{% readfile file="/functions/_common/regular-expressions.md" %}} ++ ++This example replaces two or more consecutive hyphens with a single hyphen: ++ ++```go-html-template ++{{ $s := "a-b--c---d" }} ++{{ replaceRE `(-{2,})` "-" $s }} → a-b-c-d ++``` ++ ++To limit the number of replacements to one: ++ ++```go-html-template ++{{ $s := "a-b--c---d" }} ++{{ replaceRE `(-{2,})` "-" $s 1 }} → a-b-c---d ++``` ++ ++You can use `$1`, `$2`, etc. within the replacement string to insert the groups captured within the regular expression: ++ ++```go-html-template ++{{ $s := "http://gohugo.io/docs" }} ++{{ replaceRE "^https?://([^/]+).*" "$1" $s }} → gohugo.io ++``` ++ ++{{% note %}} ++You can write and test your regular expression using [regex101.com](https://regex101.com/). Be sure to select the Go flavor before you begin. ++{{% /note %}} ++ ++[RE2]: https://github.com/google/re2/wiki/Syntax ++[string literal]: https://go.dev/ref/spec#String_literals diff --cc docs/content/en/functions/strings/RuneCount.md index 000000000,000000000..a4d5a8dbe new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/RuneCount.md @@@ -1,0 -1,0 +1,28 @@@ ++--- ++title: strings.RuneCount ++description: Returns the number of runes in a string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: int ++ signatures: [strings.RuneCount INPUT] ++relatedFunctions: ++ - len ++ - strings.Count ++ - strings.CountRunes ++ - strings.CountWords ++ - strings.RuneCount ++aliases: [/functions/strings.runecount] ++--- ++ ++In contrast with the [`strings.CountRunes`] function, which excludes whitespace, `strings.RuneCount` counts every rune in a string. ++ ++```go-html-template ++{{ "Hello, 世界" | strings.RuneCount }} → 9 ++``` ++ ++[`strings.CountRunes`]: /functions/strings/countrunes diff --cc docs/content/en/functions/strings/SliceString.md index 000000000,000000000..8d26d76e4 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/SliceString.md @@@ -1,0 -1,0 +1,24 @@@ ++--- ++title: strings.SliceString ++linkTitle: slicestr ++description: Creates a slice of a half-open range, including start and end indices. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [slicestr] ++ returnType: string ++ signatures: ['strings.SliceString STRING START [END]'] ++relatedFunctions: [] ++aliases: [/functions/slicestr] ++--- ++ ++For example, 1 and 4 creates a slice including elements 1 through 3. ++The `end` index can be omitted; it defaults to the string's length. ++ ++```go-html-template ++{{ slicestr "BatMan" 3 }}` → "Man" ++{{ slicestr "BatMan" 0 3 }}` → "Bat" ++``` diff --cc docs/content/en/functions/strings/Split.md index 000000000,000000000..7d15704b2 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Split.md @@@ -1,0 -1,0 +1,30 @@@ ++--- ++title: strings.Split ++linkTitle: split ++description: Returns a slice of strings by splitting STRING by DELIM. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [split] ++ returnType: string ++ signatures: [strings.Split STRING DELIM] ++relatedFunctions: ++ - collections.Delimit ++ - strings.Split ++aliases: [/functions/split] ++--- ++ ++Examples: ++ ++```go-html-template ++{{ split "tag1,tag2,tag3" "," }} → ["tag1", "tag2", "tag3"] ++{{ split "abc" "" }} → ["a", "b", "c"] ++``` ++ ++ ++{{% note %}} ++`split` essentially does the opposite of [delimit](/functions/collections/delimit). While `split` creates a slice from a string, `delimit` creates a string from a slice. ++{{% /note %}} diff --cc docs/content/en/functions/strings/Substr.md index 000000000,000000000..9dafa0737 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Substr.md @@@ -1,0 -1,0 +1,42 @@@ ++--- ++title: strings.Substr ++linkTitle: substr ++description: Extracts parts of a string from a specified character's position and returns the specified number of characters. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [substr] ++ returnType: string ++ signatures: ['strings.Substr STRING START [LENGTH]'] ++relatedFunctions: [] ++aliases: [/functions/substr] ++--- ++ ++It normally takes two argument: `start` and `length`. It can also take one argument: `start`, i.e. `length` is omitted, in which case the substring starting from start until the end of the string will be returned. ++ ++To extract characters from the end of the string, use a negative start number. ++ ++If `length` is given and is negative, that number of characters will be omitted from the end of string. ++ ++```go-html-template ++{{ substr "abcdef" 0 }} → "abcdef" ++{{ substr "abcdef" 1 }} → "bcdef" ++ ++{{ substr "abcdef" 0 1 }} → "a" ++{{ substr "abcdef" 1 1 }} → "b" ++ ++{{ substr "abcdef" 0 -1 }} → "abcde" ++{{ substr "abcdef" 1 -1 }} → "bcde" ++ ++{{ substr "abcdef" -1 }} → "f" ++{{ substr "abcdef" -2 }} → "ef" ++ ++{{ substr "abcdef" -1 1 }} → "f" ++{{ substr "abcdef" -2 1 }} → "e" ++ ++{{ substr "abcdef" -3 -1 }} → "de" ++{{ substr "abcdef" -3 -2 }} → "d" ++``` diff --cc docs/content/en/functions/strings/Title.md index 000000000,000000000..1e20d1f59 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Title.md @@@ -1,0 -1,0 +1,30 @@@ ++--- ++title: strings.Title ++linkTitle: title ++description: Converts the provided string to title case. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [title] ++ returnType: string ++ signatures: [strings.Title STRING] ++relatedFunctions: ++ - strings.FirstUpper ++ - strings.Title ++ - strings.ToLower ++ - strings.ToUpper ++aliases: [/functions/title] ++--- ++ ++```go-html-template ++{{ title "table of contents (TOC)" }} → "Table of Contents (TOC)" ++``` ++ ++By default, Hugo adheres to the capitalization rules in the [Associated Press (AP) Stylebook]. Change your [site configuration] if you would prefer to follow the [Chicago Manual of Style], or to use Go's convention of capitalizing every word. ++ ++[Associated Press (AP) Stylebook]: https://www.apstylebook.com/ ++[Chicago Manual of Style]: https://www.chicagomanualofstyle.org/home.html ++[site configuration]: /getting-started/configuration/#configure-title-case diff --cc docs/content/en/functions/strings/ToLower.md index 000000000,000000000..cb76462ea new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/ToLower.md @@@ -1,0 -1,0 +1,28 @@@ ++--- ++title: strings.ToLower ++linkTitle: lower ++description: Converts all characters in the provided string to lowercase. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [lower] ++ returnType: string ++ signatures: [strings.ToLower INPUT] ++relatedFunctions: ++ - strings.FirstUpper ++ - strings.Title ++ - strings.ToLower ++ - strings.ToUpper ++aliases: [/functions/lower] ++--- ++ ++ ++Note that `lower` can be applied in your templates in more than one way: ++ ++```go-html-template ++{{ lower "BatMan" }} → "batman" ++{{ "BatMan" | lower }} → "batman" ++``` diff --cc docs/content/en/functions/strings/ToUpper.md index 000000000,000000000..d46491637 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/ToUpper.md @@@ -1,0 -1,0 +1,27 @@@ ++--- ++title: strings.ToUpper ++linkTitle: upper ++description: Converts all characters in a string to uppercase ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [upper] ++ returnType: string ++ signatures: [strings.ToUpper INPUT] ++relatedFunctions: ++ - strings.FirstUpper ++ - strings.Title ++ - strings.ToLower ++ - strings.ToUpper ++aliases: [/functions/upper] ++--- ++ ++Note that `upper` can be applied in your templates in more than one way: ++ ++```go-html-template ++{{ upper "BatMan" }} → "BATMAN" ++{{ "BatMan" | upper }} → "BATMAN" ++``` diff --cc docs/content/en/functions/strings/Trim.md index 000000000,000000000..9eae9ee45 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Trim.md @@@ -1,0 -1,0 +1,45 @@@ ++--- ++title: strings.Trim ++linkTitle: trim ++description: Returns a slice of a passed string with all leading and trailing characters from cutset removed. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [title] ++ returnType: string ++ signatures: [strings.Trim INPUT CUTSET] ++relatedFunctions: ++ - strings.Chomp ++ - strings.Trim ++ - strings.TrimLeft ++ - strings.TrimPrefix ++ - strings.TrimRight ++ - strings.TrimSuffix ++aliases: [/functions/trim] ++--- ++ ++```go-html-template ++{{ trim "++Batman--" "+-" }} → "Batman" ++``` ++ ++`trim` *requires* the second argument, which tells the function specifically what to remove from the first argument. There is no default value for the second argument, so **the following usage will not work**: ++ ++```go-html-template ++{{ trim .Inner }} ++``` ++ ++Instead, the following example tells `trim` to remove extra new lines from the content contained in the [shortcode `.Inner` variable][shortcodevars]: ++ ++```go-html-template ++{{ trim .Inner "\n" }} ++``` ++ ++{{% note %}} ++Go templates also provide a simple [method for trimming whitespace](/templates/introduction/#whitespace) from either side of a Go tag by including a hyphen (`-`). ++{{% /note %}} ++ ++ ++[shortcodevars]: /variables/shortcodes/ diff --cc docs/content/en/functions/strings/TrimLeft.md index 000000000,000000000..3924e492f new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/TrimLeft.md @@@ -1,0 -1,0 +1,33 @@@ ++--- ++title: strings.TrimLeft ++description: Returns a slice of a given string with all leading characters contained in the cutset removed. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: string ++ signatures: [strings.TrimLeft CUTSET STRING] ++relatedFunctions: ++ - strings.Chomp ++ - strings.Trim ++ - strings.TrimLeft ++ - strings.TrimPrefix ++ - strings.TrimRight ++ - strings.TrimSuffix ++aliases: [/functions/strings.trimleft] ++--- ++ ++Given the string `"abba"`, leading `"a"`'s can be removed a follows: ++ ++```go-html-template ++{{ strings.TrimLeft "a" "abba" }} → "bba" ++``` ++ ++Numbers can be handled as well: ++ ++```go-html-template ++{{ strings.TrimLeft 12 1221341221 }} → "341221" ++``` diff --cc docs/content/en/functions/strings/TrimPrefix.md index 000000000,000000000..37657732d new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/TrimPrefix.md @@@ -1,0 -1,0 +1,29 @@@ ++--- ++title: strings.TrimPrefix ++description: Returns a given string s without the provided leading prefix string. If s doesn't start with prefix, s is returned unchanged. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: string ++ signatures: [strings.TrimPrefix PREFIX STRING] ++relatedFunctions: ++ - strings.Chomp ++ - strings.Trim ++ - strings.TrimLeft ++ - strings.TrimPrefix ++ - strings.TrimRight ++ - strings.TrimSuffix ++aliases: [/functions/strings.trimprefix] ++--- ++ ++Given the string `"aabbaa"`, the specified prefix is only removed if `"aabbaa"` starts with it: ++ ++```go-html-template ++{{ strings.TrimPrefix "a" "aabbaa" }} → "abbaa" ++{{ strings.TrimPrefix "aa" "aabbaa" }} → "bbaa" ++{{ strings.TrimPrefix "aaa" "aabbaa" }} → "aabbaa" ++``` diff --cc docs/content/en/functions/strings/TrimRight.md index 000000000,000000000..fa538b605 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/TrimRight.md @@@ -1,0 -1,0 +1,33 @@@ ++--- ++title: strings.TrimRight ++description: Returns a slice of a given string with all trailing characters contained in the cutset removed. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: string ++ signatures: [strings.TrimRight CUTSET STRING] ++relatedFunctions: ++ - strings.Chomp ++ - strings.Trim ++ - strings.TrimLeft ++ - strings.TrimPrefix ++ - strings.TrimRight ++ - strings.TrimSuffix ++aliases: [/functions/strings.trimright] ++--- ++ ++Given the string `"abba"`, trailing `"a"`'s can be removed a follows: ++ ++```go-html-template ++{{ strings.TrimRight "a" "abba" }} → "abb" ++``` ++ ++Numbers can be handled as well: ++ ++```go-html-template ++{{ strings.TrimRight 12 1221341221 }} → "122134" ++``` diff --cc docs/content/en/functions/strings/TrimSuffix.md index 000000000,000000000..6dc9becfc new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/TrimSuffix.md @@@ -1,0 -1,0 +1,29 @@@ ++--- ++title: strings.TrimSuffix ++description: Returns a given string s without the provided trailing suffix string. If s doesn't end with suffix, s is returned unchanged. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: string ++ signatures: [strings.TrimSuffix SUFFIX STRING] ++relatedFunctions: ++ - strings.Chomp ++ - strings.Trim ++ - strings.TrimLeft ++ - strings.TrimPrefix ++ - strings.TrimRight ++ - strings.TrimSuffix ++aliases: [/functions/strings.trimsuffix] ++--- ++ ++Given the string `"aabbaa"`, the specified suffix is only removed if `"aabbaa"` ends with it: ++ ++```go-html-template ++{{ strings.TrimSuffix "a" "aabbaa" }} → "aabba" ++{{ strings.TrimSuffix "aa" "aabbaa" }} → "aabb" ++{{ strings.TrimSuffix "aaa" "aabbaa" }} → "aabbaa" ++``` diff --cc docs/content/en/functions/strings/Truncate.md index 000000000,000000000..0bd78d840 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/strings/Truncate.md @@@ -1,0 -1,0 +1,26 @@@ ++--- ++title: strings.Truncate ++linkTitle: truncate ++description: Truncates a text to a max length without cutting words or leaving unclosed HTML tags. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [truncate] ++ returnType: template.HTML ++ signatures: ['strings.Truncate SIZE [ELLIPSIS] INPUT'] ++relatedFunctions: [] ++aliases: [/functions/truncate] ++--- ++ ++Since Go templates are HTML-aware, `truncate` will intelligently handle normal strings vs HTML strings: ++ ++```go-html-template ++{{ "Keep my HTML" | safeHTML | truncate 10 }} → Keep my … ++``` ++ ++{{% note %}} ++If you have a raw string that contains HTML tags you want to remain treated as HTML, you will need to convert the string to HTML using the [`safeHTML` template function](/functions/safe/html) before sending the value to truncate. Otherwise, the HTML tags will be escaped when passed through the `truncate` function. ++{{% /note %}} diff --cc docs/content/en/functions/templates/Exists.md index 000000000,000000000..d4a8fab76 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/templates/Exists.md @@@ -1,0 -1,0 +1,29 @@@ ++--- ++title: templates.Exists ++description: Reports whether a template file exists under the given path relative to the `layouts` directory. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: bool ++ signatures: [templates.Exists PATH] ++namespace: templates ++relatedFunctions: [] ++aliases: [/functions/templates.exists] ++--- ++ ++A template file is any file living below the `layouts` directories of either the project or any of its theme components including partials and shortcodes. ++ ++The function is particularly handy with dynamic path. The following example ensures the build will not break on a `.Type` missing its dedicated `header` partial. ++ ++```go-html-template ++{{ $partialPath := printf "headers/%s.html" .Type }} ++{{ if templates.Exists ( printf "partials/%s" $partialPath ) }} ++ {{ partial $partialPath . }} ++{{ else }} ++ {{ partial "headers/default.html" . }} ++{{ end }} ++``` diff --cc docs/content/en/functions/time/AsTime.md index 000000000,000000000..1244eeb5c new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/time/AsTime.md @@@ -1,0 -1,0 +1,64 @@@ ++--- ++title: time.AsTime ++linkTitle: time ++description: Converts a timestamp string into a `time.Time` structure. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [time] ++ returnType: time.Time ++ signatures: ['time.AsTime INPUT [TIMEZONE]'] ++relatedFunctions: ++ - time.AsTime ++ - time.Duration ++ - time.Format ++ - time.Now ++ - time.ParseDuration ++aliases: [/functions/time] ++--- ++ ++ ++`time` converts a timestamp string with an optional default location into a [`time.Time`](https://godoc.org/time#Time) structure so you can access its fields: ++ ++```go-html-template ++{{ time "2016-05-28" }} → "2016-05-28T00:00:00Z" ++{{ (time "2016-05-28").YearDay }} → 149 ++{{ mul 1000 (time "2016-05-28T10:30:00.00+10:00").Unix }} → 1464395400000, or Unix time in milliseconds ++``` ++ ++## Using locations ++ ++The optional `TIMEZONE` argument is a string that sets a default time zone (or more specific, the location, which represents the collection of time offsets in a geographical area) that is associated with the specified time value. If the time value has an explicit timezone or offset specified, it will take precedence over the `TIMEZONE` argument. ++ ++The list of valid locations may be system dependent, but should include `UTC`, `Local`, or any location in the [IANA Time Zone database](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). ++ ++If no `TIMEZONE` is set, the `timeZone` from site configuration will be used. ++ ++```go-html-template ++{{ time "2020-10-20" }} → 2020-10-20 00:00:00 +0000 UTC ++{{ time "2020-10-20" "America/Los_Angeles" }} → 2020-10-20 00:00:00 -0700 PDT ++{{ time "2020-01-20" "America/Los_Angeles" }} → 2020-01-20 00:00:00 -0800 PST ++``` ++ ++## Example: Using `time` to get month index ++ ++The following example takes a UNIX timestamp---set as `utimestamp: "1489276800"` in a content's front matter---converts the timestamp (string) to an integer using the [`int` function][int], and then uses [`printf`] to convert the `Month` property of `time` into an index. ++ ++The following example may be useful when setting up [multilingual sites][multilingual]: ++ ++{{< code file="unix-to-month-integer.html" >}} ++{{ $time := time (int .Params.addDate)}} ++=> $time = 1489276800 ++{{ $time.Month }} ++=> "March" ++{{ $monthindex := printf "%d" $time.Month }} ++=> $monthindex = 3 ++{{< /code >}} ++ ++ ++[int]: /functions/cast/toint ++[multilingual]: /content-management/multilingual/ ++[`printf`]: /functions/fmt/printf diff --cc docs/content/en/functions/time/Duration.md index 000000000,000000000..921f25a96 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/time/Duration.md @@@ -1,0 -1,0 +1,46 @@@ ++--- ++title: time.Duration ++linkTitle: duration ++description: Returns a `time.Duration` structure, using the given time unit and duration number. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [duration] ++ returnType: time.Duration ++ signatures: [time.Duration TIME_UNIT DURATION_NUMBER] ++relatedFunctions: ++ - time.AsTime ++ - time.Duration ++ - time.Format ++ - time.Now ++ - time.ParseDuration ++aliases: [/functions/duration] ++--- ++ ++`time.Duration` converts a given number into a [`time.Duration`](https://pkg.go.dev/time#Duration) structure so you can access its fields. E.g. you can perform [time operations](https://pkg.go.dev/time#Duration) on the returned `time.Duration` value: ++ ++```go-html-template ++{{ printf "There are %.0f seconds in one day." (duration "hour" 24).Seconds }} ++ ++``` ++ ++Make your code simpler to understand by using a [chained pipeline](https://pkg.go.dev/text/template#hdr-Pipelines): ++ ++```go-html-template ++{{ mul 7.75 60 | duration "minute" }} → 7h45m0s ++{{ mul 120 60 | mul 1000 | duration "millisecond" }} → 2h0m0s ++``` ++ ++You have to specify a time unit for the number given to the function. Valid time units are: ++ ++Duration|Valid time units ++:--|:-- ++hours|`hour`, `h` ++minutes|`minute`, `m` ++seconds|`second`, `s` ++milliseconds|`millisecond`, `ms` ++microseconds|`microsecond`, `us`, `µs` ++nanoseconds|`nanosecond`, `ns` diff --cc docs/content/en/functions/time/Format.md index 000000000,000000000..3a0b1eb2a new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/time/Format.md @@@ -1,0 -1,0 +1,76 @@@ ++--- ++title: time.Format ++description: Returns a formatted and localized time.Time value. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [dateFormat] ++ returnType: string ++ signatures: [time.Format LAYOUT INPUT] ++relatedFunctions: ++ - time.AsTime ++ - time.Duration ++ - time.Format ++ - time.Now ++ - time.ParseDuration ++aliases: [/functions/dateformat] ++toc: true ++--- ++ ++```go-template ++{{ $t := "2023-01-27T23:44:58-08:00" }} ++{{ $format := "2 Jan 2006" }} ++ ++{{ $t | time.Format $format }} → 27 Jan 2023 ++ ++{{ $t = time.AsTime $t }} ++{{ $t | time.Format $format }} → 27 Jan 2023 ++``` ++ ++## Layout string ++ ++{{% readfile file="/functions/_common/time-layout-string.md" %}} ++ ++## Localization ++ ++Use the `time.Format` function to localize `time.Time` values for the current language and region. ++ ++{{% note %}} ++{{% readfile file="/functions/_common/locales.md" %}} ++{{% /note %}} ++ ++ ++Use the layout string as described above, or one of the tokens below. For example: ++ ++```go-template ++{{ .Date | time.Format ":date_medium" }} → Jan 27, 2023 ++``` ++ ++Localized to en-US: ++ ++Token|Result ++:--|:-- ++`:date_full`|`Friday, January 27, 2023` ++`:date_long`|`January 27, 2023` ++`:date_medium`|`Jan 27, 2023` ++`:date_short`|`1/27/23` ++`:time_full`|`11:44:58 pm Pacific Standard Time` ++`:time_long`|`11:44:58 pm PST` ++`:time_medium`|`11:44:58 pm` ++`:time_short`|`11:44 pm` ++ ++Localized to de-DE: ++ ++Token|Result ++:--|:-- ++`:date_full`|`Freitag, 27. Januar 2023` ++`:date_long`|`27. Januar 2023` ++`:date_medium`|`27.01.2023` ++`:date_short`|`27.01.23` ++`:time_full`|`23:44:58 Nordamerikanische Westküsten-Normalzeit` ++`:time_long`|`23:44:58 PST` ++`:time_medium`|`23:44:58` ++`:time_short`|`23:44` diff --cc docs/content/en/functions/time/Now.md index 000000000,000000000..74b01ecc5 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/time/Now.md @@@ -1,0 -1,0 +1,51 @@@ ++--- ++title: time.Now ++linkTitle: now ++description: Returns the current local time ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [now] ++ returnType: time.Time ++ signatures: [time.Now] ++relatedFunctions: ++ - time.AsTime ++ - time.Duration ++ - time.Format ++ - time.Now ++ - time.ParseDuration ++aliases: [/functions/now] ++--- ++ ++See [`time.Time`](https://godoc.org/time#Time). ++ ++For example, building your site on June 24, 2017, with the following templating: ++ ++```go-html-template ++
++ © {{ now.Format "2006" }} ++
++``` ++ ++would produce the following: ++ ++```html ++
++ © 2017 ++
++``` ++ ++The above example uses the [`.Format` function](/functions/format), which page includes a full listing of date formatting using Go's layout string. ++ ++{{% note %}} ++Older Hugo themes may still be using the obsolete Page’s `.Now` (uppercase with leading dot), which causes build error that looks like the following: ++ ++ ERROR ... Error while rendering "..." in "...": ... ++ executing "..." at <.Now.Format>: ++ can't evaluate field Now in type *hugolib.PageOutput ++ ++Be sure to use `now` (lowercase with _**no**_ leading dot) in your templating. ++{{% /note %}} diff --cc docs/content/en/functions/time/ParseDuration.md index 000000000,000000000..e3abc7c15 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/time/ParseDuration.md @@@ -1,0 -1,0 +1,30 @@@ ++--- ++title: time.ParseDuration ++description: Parses a given duration string into a `time.Duration` structure. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: time.Duration ++ signatures: [time.ParseDuration DURATION] ++relatedFunctions: ++ - time.AsTime ++ - time.Duration ++ - time.Format ++ - time.Now ++ - time.ParseDuration ++aliases: [/functions/time.parseduration] ++--- ++ ++`time.ParseDuration` parses a duration string into a [`time.Duration`](https://pkg.go.dev/time#Duration) structure so you can access its fields. ++A duration string is a possibly signed sequence of decimal numbers, each with optional fraction and a unit suffix, such as `300ms`, `-1.5h` or `2h45m`. Valid time units are `ns`, `us` (or `µs`), `ms`, `s`, `m`, `h`. ++ ++You can perform [time operations](https://pkg.go.dev/time#Duration) on the returned `time.Duration` value: ++ ++```go-html-template ++{{ printf "There are %.0f seconds in one day." (time.ParseDuration "24h").Seconds }} ++ ++``` diff --cc docs/content/en/functions/transform/CanHighlight.md index 000000000,000000000..eabef933b new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/transform/CanHighlight.md @@@ -1,0 -1,0 +1,22 @@@ ++--- ++title: transform.CanHighlight ++description: Reports whether the given code language is supported by the Chroma highlighter. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: bool ++ signatures: [transform.CanHighlight LANGUAGE] ++relatedFunctions: ++ - transform.CanHighlight ++ - transform.Highlight ++ - transform.HighlightCodeBlock ++--- ++ ++```go-html-template ++{{ transform.CanHighlight "go" }} → true ++{{ transform.CanHighlight "klingon" }} → false ++``` diff --cc docs/content/en/functions/transform/Emojify.md index 000000000,000000000..324c41851 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/transform/Emojify.md @@@ -1,0 -1,0 +1,31 @@@ ++--- ++title: transform.Emojify ++linkTitle: emojify ++description: Runs a string through the Emoji emoticons processor. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [emojify] ++ returnType: template.HTML ++ signatures: [transform.Emojify INPUT] ++namespace: transform ++relatedFunctions: [] ++aliases: [/functions/emojify] ++--- ++ ++`emojify` runs a passed string through the Emoji emoticons processor. ++ ++See the [Emoji cheat sheet][emojis] for available emoticons. ++ ++The `emojify` function can be called in your templates but not directly in your content files by default. For emojis in content files, set `enableEmoji` to `true` in your site's [configuration]. Then you can write emoji shorthand directly into your content files; e.g. I :heart: Hugo!: ++ ++I :heart: Hugo! ++ ++ ++[configuration]: /getting-started/configuration/ ++[emojis]: https://www.webfx.com/tools/emoji-cheat-sheet/ ++[sc]: /templates/shortcode-templates/ ++[scsource]: https://github.com/gohugoio/hugo/tree/master/docs/layouts/shortcodes diff --cc docs/content/en/functions/transform/HTMLEscape.md index 000000000,000000000..62249367b new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/transform/HTMLEscape.md @@@ -1,0 -1,0 +1,24 @@@ ++--- ++title: transform.HTMLEscape ++linkTitle: htmlEscape ++description: Returns the given string with the reserved HTML codes escaped. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [htmlEscape] ++ returnType: string ++ signatures: [transform.HTMLEscape INPUT] ++relatedFunctions: ++ - transform.HTMLEscape ++ - transform.HTMLUnescape ++aliases: [/functions/htmlescape] ++--- ++ ++In the result `&` becomes `&` and so on. It escapes only: `<`, `>`, `&`, `'` and `"`. ++ ++```go-html-template ++{{ htmlEscape "Hugo & Caddy > WordPress & Apache" }} → "Hugo & Caddy > WordPress & Apache" ++``` diff --cc docs/content/en/functions/transform/HTMLUnescape.md index 000000000,000000000..c0774232f new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/transform/HTMLUnescape.md @@@ -1,0 -1,0 +1,24 @@@ ++--- ++title: transform.HTMLUnescape ++linkTitle: htmlUnescape ++description: Returns the given string with HTML escape codes un-escaped. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [htmlUnescape] ++ returnType: string ++ signatures: [transform.HTMLUnescape INPUT] ++relatedFunctions: ++ - transform.HTMLEscape ++ - transform.HTMLUnescape ++aliases: [/functions/htmlunescape] ++--- ++ ++Remember to pass the output of this to `safeHTML` if fully un-escaped characters are desired. Otherwise, the output will be escaped again as normal. ++ ++```go-html-template ++{{ htmlUnescape "Hugo & Caddy > WordPress & Apache" }} → "Hugo & Caddy > WordPress & Apache" ++``` diff --cc docs/content/en/functions/transform/Highlight.md index 000000000,000000000..93043b4a1 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/transform/Highlight.md @@@ -1,0 -1,0 +1,113 @@@ ++--- ++title: transform.Highlight ++linkTitle: highlight ++description: Renders code with a syntax highlighter. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [highlight] ++ returnType: template.HTML ++ signatures: ['transform.Highlight INPUT LANG [OPTIONS]'] ++namespace: transform ++relatedFunctions: ++ - transform.CanHighlight ++ - transform.Highlight ++ - transform.HighlightCodeBlock ++aliases: [/functions/highlight] ++toc: true ++--- ++ ++The `highlight` function uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 available styles. ++ ++## Arguments ++ ++INPUT ++: The code to highlight. ++ ++LANG ++: The language of the code to highlight. Choose from one of the [supported languages]. Case-insensitive. ++ ++OPTIONS ++: An optional, comma-separated list of zero or more [options]. Set default values in [site configuration]. ++ ++## Options ++ ++lineNos ++: Boolean. Default is `false`.\ ++Display a number at the beginning of each line. ++ ++lineNumbersInTable ++: Boolean. Default is `true`.\ ++Render the highlighted code in an HTML table with two cells. The left table cell contains the line numbers. The right table cell contains the code, allowing a user to select and copy the code without line numbers. Irrelevant if `lineNos` is `false`. ++ ++anchorLineNos ++: Boolean. Default is `false`.\ ++Render each line number as an HTML anchor element, and set the `id` attribute of the surrounding `` to the line number. Irrelevant if `lineNos` is `false`. ++ ++lineAnchors ++: String. Default is `""`.\ ++When rendering a line number as an HTML anchor element, prepend this value to the `id` attribute of the surrounding ``. This provides unique `id` attributes when a page contains two or more code blocks. Irrelevant if `lineNos` or `anchorLineNos` is `false`. ++ ++lineNoStart ++: Integer. Default is `1`.\ ++The number to display at the beginning of the first line. Irrelevant if `lineNos` is `false`. ++ ++hl_Lines ++: String. Default is `""`.\ ++A space-separated list of lines to emphasize within the highlighted code. To emphasize lines 2, 3, 4, and 7, set this value to `2-4 7`. This option is independent of the `lineNoStart` option. ++ ++hl_inline ++: Boolean. Default is `false`.\ ++Render the highlighted code without a wrapping container. ++ ++style ++: String. Default is `monokai`.\ ++The CSS styles to apply to the highlighted code. See the [style gallery] for examples. Case-sensitive. ++ ++noClasses ++: Boolean. Default is `true`.\ ++Use inline CSS styles instead of an external CSS file. To use an external CSS file, set this value to `false` and [generate the file with the hugo client][hugo client]. ++ ++tabWidth ++: Integer. Default is `4`.\ ++Substitute this number of spaces for each tab character in your highlighted code. Irrelevant if `noClasses` is `false`. ++ ++guessSyntax ++: Boolean. Default is `false`.\ ++If the `LANG` argument is blank or an unrecognized language, auto-detect the language if possible, otherwise use a fallback language. ++ ++{{% note %}} ++Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation: ++ ++`lineNos=inline` ++: equivalent to `lineNos=true` and `lineNumbersInTable=false` ++ ++`lineNos=table` ++: equivalent to `lineNos=true` and `lineNumbersInTable=true` ++{{% /note %}} ++ ++## Examples ++ ++```go-html-template ++{{ $input := `fmt.Println("Hello World!")` }} ++{{ transform.Highlight $input "go" }} ++ ++{{ $input := `console.log('Hello World!');` }} ++{{ $lang := "js" }} ++{{ transform.Highlight $input $lang "lineNos=table, style=api" }} ++ ++{{ $input := `echo "Hello World!"` }} ++{{ $lang := "bash" }} ++{{ $options := dict "lineNos" "table" "style" "dracula" }} ++{{ transform.Highlight $input $lang $options }} ++``` ++ ++[Chroma]: https://github.com/alecthomas/chroma ++[hugo client]: /commands/hugo_gen_chromastyles ++[options]: #options ++[site configuration]: /getting-started/configuration-markup#highlight ++[style gallery]: https://xyproto.github.io/splash/docs/ ++[supported languages]: /content-management/syntax-highlighting#list-of-chroma-highlighting-languages diff --cc docs/content/en/functions/transform/HighlightCodeBlock.md index 000000000,000000000..fa7045641 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/transform/HighlightCodeBlock.md @@@ -1,0 -1,0 +1,43 @@@ ++--- ++title: transform.HighlightCodeBlock ++description: Highlights code received in context within a code block render hook. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: highlight.HighlightResult ++ signatures: ['transform.HighlightCodeBlock CONTEXT [OPTIONS]'] ++relatedFunctions: ++ - transform.CanHighlight ++ - transform.Highlight ++ - transform.HighlightCodeBlock ++--- ++ ++This function is only useful within a code block render hook. ++ ++Given the context passed into a code block render hook, `transform.HighlightCodeBlock` returns a `HighlightResult` object with two methods. ++ ++.Wrapped ++: (`template.HTML`) Returns highlighted code wrapped in `
`, `
`, and `` elements. This is identical to the value returned by the transform.Highlight function.
++
++.Inner
++: (`template.HTML`) Returns highlighted code without any wrapping elements, allowing you to create your own wrapper.
++
++
++```go-html-template
++{{ $result := transform.HighlightCodeBlock . }}
++{{ $result.Wrapped }}
++```
++
++To override the default [highlighting options]:
++
++```go-html-template
++{{ $options := merge .Options (dict "linenos" true) }}
++{{ $result := transform.HighlightCodeBlock . $options }}
++{{ $result.Wrapped }}
++```
++
++[highlighting options]: /functions/transform/highlight/#options
diff --cc docs/content/en/functions/transform/Markdownify.md
index 000000000,000000000..b0be902ce
new file mode 100644
--- /dev/null
+++ b/docs/content/en/functions/transform/Markdownify.md
@@@ -1,0 -1,0 +1,35 @@@
++---
++title: transform.Markdownify
++linkTitle: markdownify
++description: Renders markdown to HTML.
++categories: [functions]
++keywords: []
++menu:
++  docs:
++    parent: functions
++function:
++  aliases: [markdownify]
++  returnType: template.HTML
++  signatures: [transform.Markdownify INPUT]
++relatedFunctions: []
++aliases: [/functions/markdownify]
++---
++
++```go-html-template
++{{ .Title | markdownify }}
++```
++
++If the resulting HTML is a single paragraph, Hugo removes the wrapping `p` tags to produce inline HTML as required per the example above.
++
++To keep the wrapping `p` tags for a single paragraph, use the [`.Page.RenderString`] method, setting the `display` option to `block`.
++
++If the resulting HTML is two or more paragraphs, Hugo leaves the wrapping `p` tags in place.
++
++[`.Page.RenderString`]: /functions/renderstring/
++
++{{% note %}}
++Although the `markdownify` function honors [markdown render hooks] when rendering markdown to HTML, use the `.Page.RenderString` method instead of `markdownify` if a render hook accesses `.Page` context. See issue [#9692] for details.
++
++[markdown render hooks]: /templates/render-hooks/
++[#9692]: https://github.com/gohugoio/hugo/issues/9692
++{{% /note %}}
diff --cc docs/content/en/functions/transform/Plainify.md
index 000000000,000000000..163233d4a
new file mode 100644
--- /dev/null
+++ b/docs/content/en/functions/transform/Plainify.md
@@@ -1,0 -1,0 +1,24 @@@
++---
++title: transform.Plainify
++linkTitle: plainify
++description: Returns a string with all HTML tags removed.
++categories: [functions]
++keywords: []
++menu:
++  docs:
++    parent: functions
++function:
++  aliases: [plainify]
++  returnType: string
++  signatures: [transform.Plainify INPUT]
++relatedFunctions: []
++aliases: [/functions/plainify]
++---
++
++```go-html-template
++{{ "BatMan" | plainify }} → "BatMan"
++```
++
++See also the `.PlainWords`, `.Plain`, and `.RawContent` [page variables][pagevars].
++
++[pagevars]: /variables/page/
diff --cc docs/content/en/functions/transform/Remarshal.md
index 000000000,000000000..8f6e58247
new file mode 100644
--- /dev/null
+++ b/docs/content/en/functions/transform/Remarshal.md
@@@ -1,0 -1,0 +1,96 @@@
++---
++title: transform.Remarshal
++description: Marshals a string of serialized data, or a map, into a string of serialized data in the specified format.
++categories: [functions]
++keywords: []
++menu:
++  docs:
++    parent: functions
++function:
++  aliases: []
++  returnType: string
++  signatures: [transform.Remarshal FORMAT INPUT]
++relatedFunctions:
++  - encoding.Jsonify
++  - transform.Remarshal
++  - transform.Unmarshal
++aliases: [/functions/transform.remarshal]
++---
++
++The FORMAT must be one of `json`, `toml`, `yaml`, or `xml`. If the INPUT is a string of serialized data, it must be valid JSON, TOML, YAML, or XML.
++
++{{% note %}}
++This function is primarily a helper for Hugo's documentation, used to convert configuration and front matter examples to JSON, TOML, and YAML.
++
++This is not a general purpose converter, and may change without notice if required for Hugo's documentation site.
++{{% /note %}}
++
++Example 1
++: Convert a string of TOML to JSON.
++
++```go-html-template
++{{ $s := `
++  baseURL = 'https://example.org/'
++  languageCode = 'en-US'
++  title = 'ABC Widgets'
++`}}
++
{{ transform.Remarshal "json" $s }}
++``` ++ ++Resulting HTML: ++ ++```html ++
{
++   "baseURL": "https://example.org/",
++   "languageCode": "en-US",
++   "title": "ABC Widgets"
++}
++
++``` ++ ++Rendered in browser: ++ ++```text ++{ ++ "baseURL": "https://example.org/", ++ "languageCode": "en-US", ++ "title": "ABC Widgets" ++} ++``` ++ ++Example 2 ++: Convert a map to YAML. ++ ++```go-html-template ++{{ $m := dict ++ "a" "Hugo rocks!" ++ "b" (dict "question" "What is 6x7?" "answer" 42) ++ "c" (slice "foo" "bar") ++}} ++
{{ transform.Remarshal "yaml" $m }}
++``` ++ ++Resulting HTML: ++ ++```html ++
a: Hugo rocks!
++b:
++  answer: 42
++  question: What is 6x7?
++c:
++- foo
++- bar
++
++``` ++ ++Rendered in browser: ++ ++```text ++a: Hugo rocks! ++b: ++ answer: 42 ++ question: What is 6x7? ++c: ++- foo ++- bar ++``` diff --cc docs/content/en/functions/transform/Unmarshal.md index 000000000,000000000..ab32d13de new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/transform/Unmarshal.md @@@ -1,0 -1,0 +1,83 @@@ ++--- ++title: transform.Unmarshal ++description: Parses the input and converts it into a map or an array. Supported formats are JSON, TOML, YAML, XML and CSV. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [unmarshal] ++ returnType: any ++ signatures: ++ - RESOURCE or STRING | transform.Unmarshal [OPTIONS] ++ - RESOURCE or STRING | unmarshal [OPTIONS] ++relatedFunctions: ++ - encoding.Jsonify ++ - transform.Remarshal ++ - transform.Unmarshal ++aliases: [/functions/transform.unmarshal] ++--- ++ ++The function accepts either a `Resource` created in [Hugo Pipes](/hugo-pipes/) or via [Page Bundles](/content-management/page-bundles/), or simply a string. The two examples below will produce the same map: ++ ++```go-html-template ++{{ $greetings := "hello = \"Hello Hugo\"" | transform.Unmarshal }}` ++``` ++ ++```go-html-template ++{{ $greetings := "hello = \"Hello Hugo\"" | resources.FromString "data/greetings.toml" | transform.Unmarshal }} ++``` ++ ++In both the above examples, you get a map you can work with: ++ ++```go-html-template ++{{ $greetings.hello }} ++``` ++ ++The above prints `Hello Hugo`. ++ ++## CSV options ++ ++Unmarshal with CSV as input has some options you can set: ++ ++delimiter ++: The delimiter used, default is `,`. ++ ++comment ++: The comment character used in the CSV. If set, lines beginning with the comment character without preceding whitespace are ignored.: ++ ++Example: ++ ++```go-html-template ++{{ $csv := "a;b;c" | transform.Unmarshal (dict "delimiter" ";") }} ++``` ++ ++## XML data ++ ++As a convenience, Hugo allows you to access XML data in the same way that you access JSON, TOML, and YAML: you do not need to specify the root node when accessing the data. ++ ++To get the contents of `` in the document below, you use `{{ .message.title }}`: ++ ++```xml ++<root> ++ <message> ++ <title>Hugo rocks! ++ Thanks for using Hugo ++ ++ ++``` ++ ++The following example lists the items of an RSS feed: ++ ++```go-html-template ++{{ with resources.GetRemote "https://example.com/rss.xml" | transform.Unmarshal }} ++ {{ range .channel.item }} ++ {{ .title | plainify | htmlUnescape }}
++

{{ .description | plainify | htmlUnescape }}

++ {{ $link := .link | plainify | htmlUnescape }} ++ {{ $link }}
++
++ {{ end }} ++{{ end }} ++``` diff --cc docs/content/en/functions/urls/AbsLangURL.md index 000000000,000000000..ad73bbff0 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/AbsLangURL.md @@@ -1,0 -1,0 +1,72 @@@ ++--- ++title: urls.AbsLangURL ++linkTitle: absLangURL ++description: Returns an absolute URL with a language prefix, if any. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [absLangURL] ++ returnType: template.HTML ++ signatures: [urls.AbsLangURL INPUT] ++relatedFunctions: ++ - urls.AbsLangURL ++ - urls.AbsURL ++ - urls.RelLangURL ++ - urls.RelURL ++aliases: [/functions/abslangurl] ++--- ++ ++Use this function with both monolingual and multilingual configurations. The URL returned by this function depends on: ++ ++- Whether the input begins with a slash ++- The `baseURL` in site configuration ++- The language prefix, if any ++ ++In examples that follow, the project is multilingual with content in both Español (`es`) and English (`en`). The default language is Español. The returned values are from the English site. ++ ++### Input does not begin with a slash ++ ++If the input does not begin with a slash, the resulting URL will be correct regardless of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ absLangURL "" }} → https://example.org/en/ ++{{ absLangURL "articles" }} → https://example.org/en/articles ++{{ absLangURL "style.css" }} → https://example.org/en/style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ absLangURL "" }} → https://example.org/docs/en/ ++{{ absLangURL "articles" }} → https://example.org/docs/en/articles ++{{ absLangURL "style.css" }} → https://example.org/docs/en/style.css ++``` ++ ++### Input begins with a slash ++ ++If the input begins with a slash, the resulting URL will be incorrect when the `baseURL` includes a subdirectory. With a leading slash, the function returns a URL relative to the protocol+host section of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ absLangURL "/" }} → https://example.org/en/ ++{{ absLangURL "/articles" }} → https://example.org/en/articles ++{{ absLangURL "/style.css" }} → https://example.org/en/style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ absLangURL "/" }} → https://example.org/en/ ++{{ absLangURL "/articles" }} → https://example.org/en/articles ++{{ absLangURL "/style.css" }} → https://example.org/en/style.css ++``` ++ ++{{% note %}} ++The last three examples are not desirable in most situations. As a best practice, never include a leading slash when using this function. ++{{% /note %}} diff --cc docs/content/en/functions/urls/AbsURL.md index 000000000,000000000..bb6816f57 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/AbsURL.md @@@ -1,0 -1,0 +1,71 @@@ ++--- ++title: urls.AbsURL ++linkTitle: absURL ++description: Returns an absolute URL. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [absURL] ++ returnType: template.html ++ signatures: [urls.AbsURL INPUT] ++relatedFunctions: ++ - urls.AbsLangURL ++ - urls.AbsURL ++ - urls.RelLangURL ++ - urls.RelURL ++aliases: [/functions/absurl] ++--- ++ ++With multilingual configurations, use the [`absLangURL`] function instead. The URL returned by this function depends on: ++ ++- Whether the input begins with a slash ++- The `baseURL` in site configuration ++ ++### Input does not begin with a slash ++ ++If the input does not begin with a slash, the resulting URL will be correct regardless of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ absURL "" }} → https://example.org/ ++{{ absURL "articles" }} → https://example.org/articles ++{{ absURL "style.css" }} → https://example.org/style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ absURL "" }} → https://example.org/docs/ ++{{ absURL "articles" }} → https://example.org/docs/articles ++{{ absURL "style.css" }} → https://example.org/docs/style.css ++``` ++ ++#### Input begins with a slash ++ ++If the input begins with a slash, the resulting URL will be incorrect when the `baseURL` includes a subdirectory. With a leading slash, the function returns a URL relative to the protocol+host section of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ absURL "/" }} → https://example.org/ ++{{ absURL "/articles" }} → https://example.org/articles ++{{ absURL "/style.css" }} → https://example.org/style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ absURL "/" }} → https://example.org/ ++{{ absURL "/articles" }} → https://example.org/articles ++{{ absURL "/style.css" }} → https://example.org/style.css ++``` ++ ++{{% note %}} ++The last three examples are not desirable in most situations. As a best practice, never include a leading slash when using this function. ++{{% /note %}} ++ ++[`absLangURL`]: /functions/urls/abslangurl/ diff --cc docs/content/en/functions/urls/Anchorize.md index 000000000,000000000..15efe9a5e new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/Anchorize.md @@@ -1,0 -1,0 +1,31 @@@ ++--- ++title: urls.Anchorize ++linkTitle: anchorize ++description: Takes a string and sanitizes it the same way as the [`defaultMarkdownHandler`](/getting-started/configuration-markup#default-configuration) does for markdown headers. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [anchorize] ++ returnType: string ++ signatures: [urls.Anchorize INPUT] ++relatedFunctions: ++ - urls.Anchorize ++ - urls.URLize ++aliases: [/functions/anchorize] ++--- ++ ++If [Goldmark](/getting-started/configuration-markup#goldmark) is set as `defaultMarkdownHandler`, the sanitizing logic adheres to the setting [`markup.goldmark.parser.autoHeadingIDType`](/getting-started/configuration-markup#goldmark). ++ ++Since the `defaultMarkdownHandler` and this template function use the same sanitizing logic, you can use the latter to determine the ID of a header for linking with anchor tags. ++ ++```go-html-template ++{{ anchorize "This is a header" }} → "this-is-a-header" ++{{ anchorize "This is also a header" }} → "this-is-also----a-header" ++{{ anchorize "main.go" }} → "maingo" ++{{ anchorize "Article 123" }} → "article-123" ++{{ anchorize "<- Let's try this, shall we?" }} → "--lets-try-this-shall-we" ++{{ anchorize "Hello, 世界" }} → "hello-世界" ++``` diff --cc docs/content/en/functions/urls/JoinPath.md index 000000000,000000000..41adf7ee7 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/JoinPath.md @@@ -1,0 -1,0 +1,32 @@@ ++--- ++title: urls.JoinPath ++description: Joins the provided elements into a URL string and cleans the result of any ./ or ../ elements. If the argument list is empty, JoinPath returns an empty string. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: string ++ signatures: [urls.JoinPath ELEMENT...] ++relatedFunctions: ++ - path.Join ++ - urls.JoinPath ++aliases: [/functions/urls.joinpath] ++--- ++ ++```go-html-template ++{{ urls.JoinPath }} → "" ++{{ urls.JoinPath "" }} → "/" ++{{ urls.JoinPath "a" }} → "a" ++{{ urls.JoinPath "a" "b" }} → "a/b" ++{{ urls.JoinPath "/a" "b" }} → "/a/b" ++{{ urls.JoinPath "https://example.org" "b" }} → "https://example.org/b" ++ ++{{ urls.JoinPath (slice "a" "b") }} → "a/b" ++``` ++ ++Unlike the [`path.Join`] function, `urls.JoinPath` retains consecutive leading slashes. ++ ++[`path.Join`]: /functions/path/join diff --cc docs/content/en/functions/urls/Parse.md index 000000000,000000000..17c924d51 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/Parse.md @@@ -1,0 -1,0 +1,37 @@@ ++--- ++title: urls.Parse ++description: Parses a URL into a URL structure. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [] ++ returnType: URL ++ signatures: [urls.Parse URL] ++relatedFunctions: [] ++aliases: [/functions/urls.parse] ++--- ++ ++The `urls.Parse` function parses a URL into a [URL structure](https://godoc.org/net/url#URL). The URL may be relative (a path, without a host) or absolute (starting with a [scheme]). Hugo throws an error when parsing an invalid URL. ++ ++[scheme]: https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml#uri-schemes-1 ++ ++ ++```go-html-template ++{{ $url := "https://example.org:123/foo?a=6&b=7#bar" }} ++{{ $u := urls.Parse $url }} ++ ++{{ $u.IsAbs }} → true ++{{ $u.Scheme }} → https ++{{ $u.Host }} → example.org:123 ++{{ $u.Hostname }} → example.org ++{{ $u.RequestURI }} → /foo?a=6&b=7 ++{{ $u.Path }} → /foo ++{{ $u.Query }} → map[a:[6] b:[7]] ++{{ $u.Query.a }} → [6] ++{{ $u.Query.Get "a" }} → 6 ++{{ $u.Query.Has "b" }} → true ++{{ $u.Fragment }} → bar ++``` diff --cc docs/content/en/functions/urls/Ref.md index 000000000,000000000..908fd6ca8 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/Ref.md @@@ -1,0 -1,0 +1,49 @@@ ++--- ++title: urls.Ref ++linkTitle: ref ++description: Returns the absolute permalink to a page. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [ref] ++ returnType: template.HTML ++ signatures: [urls.Ref . PAGE] ++relatedFunctions: ++ - urls.Ref ++ - urls.RelRef ++aliases: [/functions/ref] ++--- ++ ++This function takes two arguments: ++ ++- The context of the page from which to resolve relative paths, typically the current page (`.`) ++- The path to a page, with or without a file extension, with or without an anchor. A path without a leading `/` is first resolved relative to the given context, then to the remainder of the site. ++ ++```go-html-template ++{{ ref . "about" }} ++{{ ref . "about#anchor" }} ++{{ ref . "about.md" }} ++{{ ref . "about.md#anchor" }} ++{{ ref . "#anchor" }} ++{{ ref . "/blog/my-post" }} ++{{ ref . "/blog/my-post.md" }} ++``` ++ ++To return the absolute permalink to another language version of a page: ++ ++```go-html-template ++{{ ref . (dict "path" "about.md" "lang" "fr") }} ++``` ++ ++To return the absolute permalink to another Output Format of a page: ++ ++```go-html-template ++{{ ref . (dict "path" "about.md" "outputFormat" "rss") }} ++``` ++ ++Hugo emits an error or warning if the page cannot be uniquely resolved. The error behavior is configurable; see [Ref and RelRef Configuration](/content-management/cross-references/#ref-and-relref-configuration). ++ ++This function is used by Hugo's built-in [`ref`](/content-management/shortcodes/#ref-and-relref) shortcode. For a detailed explanation of how to leverage this shortcode for content management, see [Links and Cross References](/content-management/cross-references/). diff --cc docs/content/en/functions/urls/RelLangURL.md index 000000000,000000000..b8850c71d new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/RelLangURL.md @@@ -1,0 -1,0 +1,72 @@@ ++--- ++title: urls.RelLangURL ++linkTitle: relLangURL ++description: Returns a relative URL with a language prefix, if any. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [relLangURL] ++ returnType: template.HTML ++ signatures: [urls.RelLangURL INPUT] ++relatedFunctions: ++ - urls.AbsLangURL ++ - urls.AbsURL ++ - urls.RelLangURL ++ - urls.RelURL ++aliases: [/functions/rellangurl] ++--- ++ ++Use this function with both monolingual and multilingual configurations. The URL returned by this function depends on: ++ ++- Whether the input begins with a slash ++- The `baseURL` in site configuration ++- The language prefix, if any ++ ++In examples that follow, the project is multilingual with content in both Español (`es`) and English (`en`). The default language is Español. The returned values are from the English site. ++ ++### Input does not begin with a slash ++ ++If the input does not begin with a slash, the resulting URL will be correct regardless of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ relLangURL "" }} → /en/ ++{{ relLangURL "articles" }} → /en/articles ++{{ relLangURL "style.css" }} → /en/style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ relLangURL "" }} → /docs/en/ ++{{ relLangURL "articles" }} → /docs/en/articles ++{{ relLangURL "style.css" }} → /docs/en/style.css ++``` ++ ++#### Input begins with a slash ++ ++If the input begins with a slash, the resulting URL will be incorrect when the `baseURL` includes a subdirectory. With a leading slash, the function returns a URL relative to the protocol+host section of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ relLangURL "/" }} → /en/ ++{{ relLangURL "/articles" }} → /en/articles ++{{ relLangURL "/style.css" }} → /en/style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ relLangURL "/" }} → /en/ ++{{ relLangURL "/articles" }} → /en/articles ++{{ relLangURL "/style.css" }} → /en/style.css ++``` ++ ++{{% note %}} ++The last three examples are not desirable in most situations. As a best practice, never include a leading slash when using this function. ++{{% /note %}} diff --cc docs/content/en/functions/urls/RelRef.md index 000000000,000000000..1ff213b70 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/RelRef.md @@@ -1,0 -1,0 +1,56 @@@ ++--- ++title: urls.RelRef ++linkTitle: relref ++description: Returns the relative permalink to a page. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [relref] ++ returnType: template.HTML ++ signatures: [urls.RelRef . PAGE] ++relatedFunctions: ++ - urls.Ref ++ - urls.RelRef ++aliases: [/functions/relref] ++--- ++ ++This function takes two arguments: ++ ++- The context of the page from which to resolve relative paths, typically the current page (`.`) ++- The path to a page, with or without a file extension, with or without an anchor. A path without a leading `/` is first resolved relative to the given context, then to the remainder of the site. ++ ++```go-html-template ++{{ relref . "about" }} ++{{ relref . "about#anchor" }} ++{{ relref . "about.md" }} ++{{ relref . "about.md#anchor" }} ++{{ relref . "#anchor" }} ++{{ relref . "/blog/my-post" }} ++{{ relref . "/blog/my-post.md" }} ++``` ++ ++The permalink returned is relative to the protocol+host portion of the baseURL specified in the site configuration. For example: ++ ++Code|baseURL|Permalink ++:--|:--|:-- ++`{{ relref . "/about" }}`|`http://example.org/`|`/about/` ++`{{ relref . "/about" }}`|`http://example.org/x/`|`/x/about/` ++ ++To return the relative permalink to another language version of a page: ++ ++```go-html-template ++{{ relref . (dict "path" "about.md" "lang" "fr") }} ++``` ++ ++To return the relative permalink to another Output Format of a page: ++ ++```go-html-template ++{{ relref . (dict "path" "about.md" "outputFormat" "rss") }} ++``` ++ ++Hugo emits an error or warning if the page cannot be uniquely resolved. The error behavior is configurable; see [Ref and RelRef Configuration](/content-management/cross-references/#ref-and-relref-configuration). ++ ++This function is used by Hugo's built-in [`relref`](/content-management/shortcodes/#ref-and-relref) shortcode. For a detailed explanation of how to leverage this shortcode for content management, see [Links and Cross References](/content-management/cross-references/). diff --cc docs/content/en/functions/urls/RelURL.md index 000000000,000000000..fa1f9af73 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/RelURL.md @@@ -1,0 -1,0 +1,71 @@@ ++--- ++title: urls.RelURL ++linkTitle: relURL ++description: Returns a relative URL. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [relURL] ++ returnType: template.HTML ++ signatures: [urls.RelURL INPUT] ++relatedFunctions: ++ - urls.AbsLangURL ++ - urls.AbsURL ++ - urls.RelLangURL ++ - urls.RelURL ++aliases: [/functions/relurl] ++--- ++ ++With multilingual configurations, use the [`relLangURL`] function instead. The URL returned by this function depends on: ++ ++- Whether the input begins with a slash ++- The `baseURL` in site configuration ++ ++### Input does not begin with a slash ++ ++If the input does not begin with a slash, the resulting URL will be correct regardless of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ relURL "" }} → / ++{{ relURL "articles" }} → /articles ++{{ relURL "style.css" }} → /style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ relURL "" }} → /docs/ ++{{ relURL "articles" }} → /docs/articles ++{{ relURL "style.css" }} → /docs/style.css ++``` ++ ++#### Input begins with a slash ++ ++If the input begins with a slash, the resulting URL will be incorrect when the `baseURL` includes a subdirectory. With a leading slash, the function returns a URL relative to the protocol+host section of the `baseURL`. ++ ++With `baseURL = https://example.org/` ++ ++```go-html-template ++{{ relURL "/" }} → / ++{{ relURL "/articles" }} → /articles ++{{ relURL "style.css" }} → /style.css ++``` ++ ++With `baseURL = https://example.org/docs/` ++ ++```go-html-template ++{{ relURL "/" }} → / ++{{ relURL "/articles" }} → /articles ++{{ relURL "/style.css" }} → /style.css ++``` ++ ++{{% note %}} ++The last three examples are not desirable in most situations. As a best practice, never include a leading slash when using this function. ++{{% /note %}} ++ ++[`relLangURL`]: /functions/urls/rellangurl/ diff --cc docs/content/en/functions/urls/URLize.md index 000000000,000000000..3c80a92f8 new file mode 100644 --- /dev/null +++ b/docs/content/en/functions/urls/URLize.md @@@ -1,0 -1,0 +1,69 @@@ ++--- ++title: urls.URLize ++linkTitle: urlize ++description: Takes a string, sanitizes it for usage in URLs, and converts spaces to hyphens. ++categories: [functions] ++keywords: [] ++menu: ++ docs: ++ parent: functions ++function: ++ aliases: [urlize] ++ returnType: string ++ signatures: [urls.URLize INPUT] ++relatedFunctions: ++ - urls.Anchorize ++ - urls.URLize ++aliases: [/functions/urlize] ++--- ++ ++The following examples pull from a content file with the following front matter: ++ ++{{< code-toggle file="content/blog/greatest-city.md" fm=true copy=false >}} ++title = "The World's Greatest City" ++location = "Chicago IL" ++tags = ["pizza","beer","hot dogs"] ++{{< /code-toggle >}} ++ ++The following might be used as a partial within a [single page template][singletemplate]: ++ ++{{< code file="layouts/partials/content-header.html" >}} ++
++

{{ .Title }}

++ {{ with .Params.location }} ++ ++ {{ end }} ++ ++ {{ with .Params.tags }} ++
    ++ {{ range .}} ++
  • ++ {{ . }} ++
  • ++ {{ end }} ++
++ {{ end }} ++
++{{< /code >}} ++ ++The preceding partial would then output to the rendered page as follows: ++ ++```html ++
++

The World's Greatest City

++ ++ ++
++``` ++ ++[singletemplate]: /templates/single-page-templates/ diff --cc docs/content/en/getting-started/configuration-markup.md index dca2b3c52,000000000..02c4ea998 mode 100644,000000..100644 --- a/docs/content/en/getting-started/configuration-markup.md +++ b/docs/content/en/getting-started/configuration-markup.md @@@ -1,115 -1,0 +1,219 @@@ +--- +title: Configure markup +description: Configure rendering of markup to HTML. +categories: [fundamentals, getting started] +keywords: [configuration,highlighting] +menu: + docs: + parent: getting-started + weight: 50 +weight: 50 +slug: configuration-markup +toc: true +--- + - ## Default configuration ++## Default handler + - See [Goldmark](#goldmark) for settings related to the default markdown handler in Hugo. ++By default, Hugo uses [Goldmark] to render markdown to HTML. + - Below are all markup related configuration in Hugo with their default settings: ++{{< code-toggle file=hugo copy=false >}} ++[markup] ++defaultMarkdownHandler = 'goldmark' ++{{< /code-toggle >}} + - {{< code-toggle config="markup" />}} ++Files with the `.md` or `.markdown` extension are processed as markdown, provided that you have not specified a different [content format] using the `markup` field in front matter. + - **See each section below for details.** ++To use a different renderer for markdown files, specify one of `asciidocext`, `org`, `pandoc`, or `rst` in your site configuration. + - ## Goldmark ++defaultMarkdownHandler|Description ++:--|:-- ++`asciidocext`|[AsciiDoc] ++`goldmark`|[Goldmark] ++`org`|[Emacs Org Mode] ++`pandoc`|[Pandoc] ++`rst`|[reStructuredText] ++ ++To use Asciidoc, Pandoc, or reStructuredText you must install the relevant renderer and update your [security policy]. ++ ++{{% note %}} ++Unless you need a unique capability provided by one of the alternate markdown handlers, we strongly recommend that you use the default setting. Goldmark is fast, well maintained, conforms to the [CommonMark] specification, and is compatible with [GitHub Flavored Markdown] (GFM). ++ ++[commonmark]: https://spec.commonmark.org/0.30/ ++[github flavored markdown]: https://github.github.com/gfm/ ++{{% /note %}} + - [Goldmark](https://github.com/yuin/goldmark/) is from Hugo 0.60 the default library used for Markdown. It's fast, it's [CommonMark](https://spec.commonmark.org/current/) compliant and it's very flexible. ++[asciidoc]: https://asciidoc.org/ ++[content format]: /content-management/formats/#list-of-content-formats ++[emacs org mode]: https://orgmode.org/ ++[goldmark]: https://github.com/yuin/goldmark/ ++[pandoc]: https://pandoc.org/ ++[restructuredtext]: https://docutils.sourceforge.io/rst.html ++[security policy]: /about/security-model/#security-policy + - This is the default configuration: ++## Goldmark ++ ++This is the default configuration for the Goldmark markdown renderer: + +{{< code-toggle config="markup.goldmark" />}} + +For details on the extensions, refer to [this section](https://github.com/yuin/goldmark/#built-in-extensions) of the Goldmark documentation + +Some settings explained: + +hardWraps +: By default, Goldmark ignores newlines within a paragraph. Set to `true` to render newlines as `
` elements. + +unsafe +: By default, Goldmark does not render raw HTML and potentially dangerous links. If you have lots of inline HTML and/or JavaScript, you may need to turn this on. + +typographer - : This extension substitutes punctuations with typographic entities like [smartypants](https://daringfireball.net/projects/smartypants/). ++: The typographer extension replaces certain character combinations with HTML entities as specified below: ++ ++Markdown|Replaced by|Description ++:--|:--|:-- ++`...`|`…`|horizontal ellipsis ++`'`|`’`|apostrophe ++`--`|`–`|en dash ++`---`|`—`|em dash ++`«`|`«`|left angle quote ++`“`|`“`|left double quote ++`‘`|`‘`|left single quote ++`»`|`»`|right angle quote ++`”`|`”`|right double quote ++`’`|`’`|right single quote ++ + +attribute +: Enable custom attribute support for titles and blocks by adding attribute lists inside single curly brackets (`{.myclass class="class1 class2" }`) and placing it _after the Markdown element it decorates_, on the same line for titles and on a new line directly below for blocks. + +Hugo supports adding attributes (e.g. CSS classes) to Markdown blocks, e.g. tables, lists, paragraphs etc. + +A blockquote with a CSS class: + +```md +> foo +> bar +{.myclass} +``` + +There are some current limitations: For tables you can currently only apply it to the full table, and for lists the `ul`/`ol`-nodes only, e.g.: + +```md +* Fruit + * Apple + * Orange + * Banana + {.fruits} +* Dairy + * Milk + * Cheese + {.dairies} +{.list} +``` + +Note that attributes in [code fences](/content-management/syntax-highlighting/#highlighting-in-code-fences) must come after the opening tag, with any other highlighting processing instruction, e.g.: + +````txt +```go {.myclass linenos=table,hl_lines=[8,"15-17"],linenostart=199} +// ... code +``` +```` + +autoHeadingIDType ("github") - : The strategy used for creating auto IDs (anchor names). Available types are `github`, `github-ascii` and `blackfriday`. `github` produces GitHub-compatible IDs, `github-ascii` will drop any non-Ascii characters after accent normalization, and `blackfriday` will make the IDs compatible with Blackfriday, the default Markdown engine before Hugo 0.60. Note that if Goldmark is your default Markdown engine, this is also the strategy used in the [anchorize](/functions/anchorize/) template func. ++: The strategy used for creating auto IDs (anchor names). Available types are `github`, `github-ascii` and `blackfriday`. `github` produces GitHub-compatible IDs, `github-ascii` will drop any non-Ascii characters after accent normalization, and `blackfriday` will make the IDs compatible with Blackfriday, the default Markdown engine before Hugo 0.60. Note that if Goldmark is your default Markdown engine, this is also the strategy used in the [anchorize](/functions/urls/anchorize) template func. ++ ++## Asciidoc ++ ++This is the default configuration for the AsciiDoc markdown renderer: ++ ++{{< code-toggle config="markup.asciidocExt" />}} ++ ++attributes ++: (`map`) Variables to be referenced in your AsciiDoc file. This is a list of variable name/value maps. See Asciidoctor’s [attributes]. ++ ++[attributes]: https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#attributes-and-substitutions ++ ++backend: ++: (`string`) Don’t change this unless you know what you are doing. ++ ++extensions ++: (`[]string`) Possible extensions are `asciidoctor-html5s`, `asciidoctor-bibtex`, `asciidoctor-diagram`, `asciidoctor-interdoc-reftext`, `asciidoctor-katex`, `asciidoctor-latex`, `asciidoctor-mathematical`, and `asciidoctor-question`. ++ ++failureLevel ++: (`string`) The minimum logging level that triggers a non-zero exit code (failure). ++ ++noHeaderOrFooter ++: (`bool`) Output an embeddable document, which excludes the header, the footer, and everything outside the body of the document. Don’t change this unless you know what you are doing. ++ ++preserveTOC ++: (`bool`) By default, Hugo removes the table of contents generated by Asciidoctor and provides it through the built-in variable `.TableOfContents` to enable further customization and better integration with the various Hugo themes. This option can be set to true to preserve Asciidoctor’s TOC in the generated page. ++ ++safeMode ++: (`string`) Safe mode level `unsafe`, `safe`, `server`, or `secure`. Don’t change this unless you know what you are doing. ++ ++sectionNumbers ++: (`bool`) Auto-number section titles. ++ ++trace ++: (`bool`) Include backtrace information on errors. ++ ++verbose ++: (`bool`) Verbosely print processing information and configuration file checks to stderr. ++ ++workingFolderCurrent ++: (`bool`) Sets the working directory to be the same as that of the AsciiDoc file being processed, so that [include] will work with relative paths. This setting uses the asciidoctor cli parameter --base-dir and attribute outdir=. For rendering diagrams with [asciidoctor-diagram], `workingFolderCurrent` must be set to `true`. ++ ++[asciidoctor-diagram]: https://asciidoctor.org/docs/asciidoctor-diagram/ ++[include]: https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#include-files ++ ++Notice that for security concerns only extensions that do not have path separators (either `\`, `/` or `.`) are allowed. That means that extensions can only be invoked if they are in the Ruby's `$LOAD_PATH` (ie. most likely, the extension has been installed by the user). Any extension declared relative to the website's path will not be accepted. ++ ++Example of how to set extensions and attributes: ++ ++```yml ++[markup.asciidocExt] ++ extensions = ["asciidoctor-html5s", "asciidoctor-diagram"] ++ workingFolderCurrent = true ++ [markup.asciidocExt.attributes] ++ my-base-url = "https://example.com/" ++ my-attribute-name = "my value" ++``` ++ ++In a complex Asciidoctor environment it is sometimes helpful to debug the exact call to your external helper with all ++parameters. Run Hugo with `-v`. You will get an output like ++ ++```txt ++INFO 2019/12/22 09:08:48 Rendering book-as-pdf.adoc with C:\Ruby26-x64\bin\asciidoctor.bat using asciidoc args [--no-header-footer -r asciidoctor-html5s -b html5s -r asciidoctor-diagram --base-dir D:\prototypes\hugo_asciidoc_ddd\docs -a outdir=D:\prototypes\hugo_asciidoc_ddd\build -] ... ++``` + +## Highlight + +This is the default `highlight` configuration. Note that some of these settings can be set per code block, see [Syntax Highlighting](/content-management/syntax-highlighting/). + +{{< code-toggle config="markup.highlight" />}} + +For `style`, see these galleries: + +* [Short snippets](https://xyproto.github.io/splash/docs/all.html) +* [Long snippets](https://xyproto.github.io/splash/docs/longer/all.html) + +For CSS, see [Generate Syntax Highlighter CSS](/content-management/syntax-highlighting/#generate-syntax-highlighter-css). + +## Table of contents + +{{< code-toggle config="markup.tableOfContents" />}} + +These settings only works for the Goldmark renderer: + +startLevel +: The heading level, values starting at 1 (`h1`), to start render the table of contents. + +endLevel +: The heading level, inclusive, to stop render the table of contents. + +ordered +: If `true`, generates an ordered list instead of an unordered list. + - ## Markdown render hooks ++## Render hooks + +See [Markdown Render Hooks](/templates/render-hooks/). diff --cc docs/content/en/getting-started/configuration.md index 978412bb9,000000000..2187540ae mode 100644,000000..100644 --- a/docs/content/en/getting-started/configuration.md +++ b/docs/content/en/getting-started/configuration.md @@@ -1,851 -1,0 +1,848 @@@ +--- +title: Configure Hugo +linkTitle: Configuration +description: How to configure your Hugo site. +categories: [fundamentals,getting started] +keywords: [configuration,toml,yaml,json] +menu: + docs: + parent: getting-started + weight: 40 +weight: 40 +aliases: [/overview/source-directory/,/overview/configuration/] +toc: true +--- + +## Configuration file + +Hugo uses the `hugo.toml`, `hugo.yaml`, or `hugo.json` (if found in the +site root) as the default site configuration file. + +The user can choose to override that default with one or more site configuration files using the command-line `--config` switch. + +Examples: + +```txt +hugo --config debugconfig.toml +hugo --config a.toml,b.toml,c.toml +``` + +{{% note %}} +Multiple site configuration files can be specified as a comma-separated string to the `--config` switch. +{{% /note %}} + +## hugo.toml vs config.toml + +In Hugo 0.110.0 we changed the default configuration base file name to `hugo`, e.g. `hugo.toml`. We will still look for `config.toml` etc., but we recommend you eventually rename it (but you need to wait if you want to support older Hugo versions). The main reason we're doing this is to make it easier for code editors and build tools to identify this as a Hugo configuration file and project. + +{{< new-in "0.110.0" >}} + +## Configuration directory + +In addition to using a single site configuration file, one can use the `configDir` directory (default to `config/`) to maintain easier organization and environment specific settings. + +- Each file represents a configuration root object, such as `params.toml` for `[Params]`, `menu(s).toml` for `[Menu]`, `languages.toml` for `[Languages]` etc... +- Each file's content must be top-level, for example: + +{{< code-toggle file="hugo" copy=false >}} +[Params] + foo = "bar" +{{< /code-toggle >}} + +{{< code-toggle file="params" copy=false >}} +foo = "bar" +{{< /code-toggle >}} + +- Each directory holds a group of files containing settings unique to an environment. +- Files can be localized to become language specific. + +```txt +├── config +│ ├── _default +│ │ ├── hugo.toml +│ │ ├── languages.toml +│ │ ├── menus.en.toml +│ │ ├── menus.zh.toml +│ │ └── params.toml +│ ├── production +│ │ ├── hugo.toml +│ │ └── params.toml +│ └── staging +│ ├── hugo.toml +│ └── params.toml +``` + +Considering the structure above, when running `hugo --environment staging`, Hugo will use every setting from `config/_default` and merge `staging`'s on top of those. + +Let's take an example to understand this better. Let's say you are using Google Analytics for your website. This requires you to specify a [Google tag ID] in your site configuration: + +[Google tag ID]: https://support.google.com/tagmanager/answer/12326985?hl=en + +{{< code-toggle file=hugo copy=false >}} +[services.googleAnalytics] +ID = 'G-XXXXXXXXX' +{{< /code-toggle >}} + +Now consider the following scenario: + +1. You don't want to load the analytics code when running `hugo server`. +2. You want to use different Google tag IDs for your production and staging environments. For example: + + - `G-PPPPPPPPP` for production + - `G-SSSSSSSSS` for staging + +To satisfy these requirements, configure your site as follows: + +1. `config/_default/hugo.toml` + + Exclude the `services.googleAnalytics` section. This will prevent loading of the analytics code when you run `hugo server`. + + By default, Hugo sets its `environment` to `development` when running `hugo server`. In the absence of a `config/development` directory, Hugo uses the `config/_default` directory. + +2. `config/production/hugo.toml` + + Include this section only: + + {{< code-toggle file=hugo copy=false >}} + [services.googleAnalytics] + ID = 'G-PPPPPPPPP' + {{< /code-toggle >}} + + You do not need to include other parameters in this file. Include only those parameters that are specific to your production environment. Hugo will merge these parameters with the default configuration. + + By default, Hugo sets its `environment` to `production` when running `hugo`. The analytics code will use the `G-PPPPPPPPP` tag ID. + +3. `config/staging/hugo.toml` + + Include this section only: + + {{< code-toggle file=hugo copy=false >}} + [services.googleAnalytics] + ID = 'G-SSSSSSSSS' + {{< /code-toggle >}} + + You do not need to include other parameters in this file. Include only those parameters that are specific to your staging environment. Hugo will merge these parameters with the default configuration. + + To build your staging site, run `hugo --environment staging`. The analytics code will use the `G-SSSSSSSSS` tag ID. + +## Merge configuration from themes + +The configuration value for `_merge` can be one of: + +none +: No merge. + +shallow +: Only add values for new keys. + +deep +: Add values for new keys, merge existing. + +Note that you don't need to be so verbose as in the default setup below; a `_merge` value higher up will be inherited if not set. + +{{< code-toggle file="hugo" dataKey="config_helpers.mergeStrategy" skipHeader=true />}} + +## All configuration settings + +The following is the full list of Hugo-defined variables. Users may choose to override those values in their site configuration file(s). + +### archetypeDir + +**Default value:** "archetypes" + +The directory where Hugo finds archetype files (content templates). {{% module-mounts-note %}} + +### assetDir + +**Default value:** "assets" + +The directory where Hugo finds asset files used in [Hugo Pipes](/hugo-pipes/). {{% module-mounts-note %}} + +### baseURL + +The absolute URL (protocol, host, path, and trailing slash) of your published site (e.g., `https://www.example.org/docs/`). + +### build + +See [Configure Build](#configure-build) + +### buildDrafts (false) + +**Default value:** false + +Include drafts when building. + +### buildExpired + +**Default value:** false + +Include content already expired. + +### buildFuture + +**Default value:** false + +Include content with publishdate in the future. + +### caches + +See [Configure File Caches](#configure-file-caches) + +### cascade + +Pass down default configuration values (front matter) to pages in the content tree. The options in site configuration is the same as in page front matter, see [Front Matter Cascade](/content-management/front-matter#front-matter-cascade). + +### canonifyURLs + +**Default value:** false + +Enable to turn relative URLs into absolute. See [details](/content-management/urls/#canonical-urls). + +### cleanDestinationDir + +**Default value:** false + +When building, removes files from destination not found in static directories. + +### contentDir + +**Default value:** "content" + +The directory from where Hugo reads content files. {{% module-mounts-note %}} + +### copyright + +**Default value:** "" + +Copyright notice for your site, typically displayed in the footer. + +### dataDir + +**Default value:** "data" + +The directory from where Hugo reads data files. {{% module-mounts-note %}} + +### defaultContentLanguage + +**Default value:** "en" + +Content without language indicator will default to this language. + +### defaultContentLanguageInSubdir + +**Default value:** false + +Render the default content language in subdir, e.g. `content/en/`. The site root `/` will then redirect to `/en/`. + +### disableAliases + +**Default value:** false + +Will disable generation of alias redirects. Note that even if `disableAliases` is set, the aliases themselves are preserved on the page. The motivation with this is to be able to generate 301 redirects in an `.htaccess`, a Netlify `_redirects` file or similar using a custom output format. + +### disableHugoGeneratorInject + +**Default value:** false + +Hugo will, by default, inject a generator meta tag in the HTML head on the _home page only_. You can turn it off, but we would really appreciate if you don't, as this is a good way to watch Hugo's popularity on the rise. + +### disableKinds + +**Default value:** [] + +Enable disabling of all pages of the specified *Kinds*. Allowed values in this list: `"page"`, `"home"`, `"section"`, `"taxonomy"`, `"term"`, `"RSS"`, `"sitemap"`, `"robotsTXT"`, `"404"`. + +### disableLiveReload + +**Default value:** false + +Disable automatic live reloading of browser window. + +### disablePathToLower + +**Default value:** false + +Do not convert the url/path to lowercase. + +### enableEmoji + +**Default value:** false + +Enable Emoji emoticons support for page content; see the [Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet/). + +### enableGitInfo + +**Default value:** false + +Enable `.GitInfo` object for each page (if the Hugo site is versioned by Git). This will then update the `Lastmod` parameter for each page using the last git commit date for that content file. + +### enableInlineShortcodes + +**Default value:** false + +Enable inline shortcode support. See [Inline Shortcodes](/templates/shortcode-templates/#inline-shortcodes). + +### enableMissingTranslationPlaceholders + +**Default value:** false + +Show a placeholder instead of the default value or an empty string if a translation is missing. + +### enableRobotsTXT + +**Default value:** false + +Enable generation of `robots.txt` file. + +### frontmatter + +See [Front matter Configuration](#configure-front-matter). + +### googleAnalytics + +**Default value:** "" + +Google Analytics tracking ID. + +### hasCJKLanguage + +**Default value:** false + +If true, auto-detect Chinese/Japanese/Korean Languages in the content. This will make `.Summary` and `.WordCount` behave correctly for CJK languages. + +### imaging + +See [image processing configuration](/content-management/image-processing/#imaging-configuration). + +### languageCode + +**Default value:** "" + +A language tag as defined by [RFC 5646](https://datatracker.ietf.org/doc/html/rfc5646). This value is used to populate: + +- The `` element in the internal [RSS template](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/rss.xml) +- The `lang` attribute of the `` element in the internal [alias template](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/alias.html) + +### languages + +See [Configure Languages](/content-management/multilingual/#configure-languages). + +### disableLanguages + +See [Disable a Language](/content-management/multilingual/#disable-a-language) + +### markup + +See [Configure Markup](/getting-started/configuration-markup). + +### mediaTypes + +See [Configure Media Types](/templates/output-formats/#media-types). + +### menus + +See [Menus](/content-management/menus/#define-in-site-configuration). + +### minify + +See [Configure Minify](#configure-minify) + +### module + +Module configuration see [module configuration](/hugo-modules/configuration/). + +### newContentEditor + +**Default value:** "" + +The editor to use when creating new content. + +### noChmod + +**Default value:** false + +Don't sync permission mode of files. + +### noTimes + +**Default value:** false + +Don't sync modification time of files. + +### outputFormats + +See [Configure Output Formats](#configure-additional-output-formats). + +### paginate + +**Default value:** 10 + +Default number of elements per page in [pagination](/templates/pagination/). + +### paginatePath + +**Default value:** "page" + +The path element used during pagination (`https://example.com/page/2`). + +### permalinks + +See [Content Management](/content-management/urls/#permalinks). + +### pluralizeListTitles + +**Default value:** true + +Pluralize titles in lists. + +### publishDir + +**Default value:** "public" + +The directory to where Hugo will write the final static site (the HTML files etc.). + +### related + +See [Related Content](/content-management/related/#configure-related-content). + +### relativeURLs + +**Default value:** false + +Enable this to make all relative URLs relative to content root. Note that this does not affect absolute URLs. See [details](/content-management/urls/#relative-urls). + +### refLinksErrorLevel + +**Default value:** "ERROR" + +When using `ref` or `relref` to resolve page links and a link cannot be resolved, it will be logged with this log level. Valid values are `ERROR` (default) or `WARNING`. Any `ERROR` will fail the build (`exit -1`). + +### refLinksNotFoundURL + +URL to be used as a placeholder when a page reference cannot be found in `ref` or `relref`. Is used as-is. + +### removePathAccents + +**Default value:** false + +Removes [non-spacing marks](https://www.compart.com/en/unicode/category/Mn) from [composite characters](https://en.wikipedia.org/wiki/Precomposed_character) in content paths. + +```text - content/post/hügó.md --> https://example.org/post/hugo/ ++content/post/hügó.md → https://example.org/post/hugo/ +``` + +### rssLimit + +**Default value:** -1 (unlimited) + +Maximum number of items in the RSS feed. + +### sectionPagesMenu + +See [Menus](/content-management/menus/#define-automatically). + +### security + +See [Security Policy](/about/security-model/#security-policy) + +### sitemap + +Default [sitemap configuration](/templates/sitemap-template/#configuration). + +### summaryLength + +**Default value:** 70 + +The length of text in words to show in a [`.Summary`](/content-management/summaries/#automatic-summary-splitting). + +### taxonomies + +See [Configure Taxonomies](/content-management/taxonomies#configure-taxonomies). + +### theme + +: See [module configuration](/hugo-modules/configuration/#module-configuration-imports) for how to import a theme. + +### themesDir + +**Default value:** "themes" + +The directory where Hugo reads the themes from. + +### timeout + +**Default value:** "30s" + +Timeout for generating page contents, specified as a [duration](https://pkg.go.dev/time#Duration) or in seconds. *Note:* this is used to bail out of recursive content generation. You might need to raise this limit if your pages are slow to generate (e.g., because they require large image processing or depend on remote contents). + +### timeZone + - The time zone (or location), e.g. `Europe/Oslo`, used to parse front matter dates without such information and in the [`time` function](/functions/time/). The list of valid values may be system dependent, but should include `UTC`, `Local`, and any location in the [IANA Time Zone database](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). ++The time zone (or location), e.g. `Europe/Oslo`, used to parse front matter dates without such information and in the [`time`] function. The list of valid values may be system dependent, but should include `UTC`, `Local`, and any location in the [IANA Time Zone database](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). + +### title + +Site title. + +### titleCaseStyle + +**Default value:** "ap" + +See [Configure Title Case](#configure-title-case) + +### uglyURLs + +**Default value:** false + +When enabled, creates URL of the form `/filename.html` instead of `/filename/`. + +### watch + +**Default value:** false + +Watch filesystem for changes and recreate as needed. + +{{% note %}} +If you are developing your site on a \*nix machine, here is a handy shortcut for finding a configuration option from the command line: +```txt +cd ~/sites/yourhugosite +hugo config | grep emoji +``` + +which shows output like + +```txt +enableemoji: true +``` +{{% /note %}} + +## Configure build + +The `build` configuration section contains global build-related configuration options. + +{{< code-toggle config="build" />}} + +buildStats {{< new-in "0.115.1" >}} +: When enabled, creates a `hugo_stats.json` file in the root of your project. This file contains arrays of the `class` attributes, `id` attributes, and tags of every HTML element within your published site. Use this file as data source when [removing unused CSS] from your site. This process is also known as pruning, purging, or tree shaking. + +[removing unused CSS]: /hugo-pipes/postprocess/#css-purging-with-postcss + +Exclude `class` attributes, `id` attributes, or tags from `hugo_stats.json` with the `disableClasses`, `disableIDs`, and `disableTags` keys. + +{{% note %}} +With v0.115.0 and earlier this feature was enabled by setting `writeStats` to `true`. Although still functional, the `writeStats` key will be deprecated in a future release. + +Given that CSS purging is typically limited to production builds, place the `buildStats` object below [config/production]. + +[config/production]: /getting-started/configuration/#configuration-directory + +Built for speed, there may be "false positive" detections (e.g., HTML elements that are not HTML elements) while parsing the published site. These "false positives" are infrequent and inconsequential. +{{% /note %}} + +Due to the nature of partial server builds, new HTML entities are added while the server is running, but old values will not be removed until you restart the server or run a regular `hugo` build. + +cachebusters +: See [Configure Cache Busters](#configure-cache-busters) + +noJSConfigInAssets +: Turn off writing a `jsconfig.json` into your `/assets` folder with mapping of imports from running [js.Build](/hugo-pipes/js). This file is intended to help with intellisense/navigation inside code editors such as [VS Code](https://code.visualstudio.com/). Note that if you do not use `js.Build`, no file will be written. + +useResourceCacheWhen +: When to use the cached resources in `/resources/_gen` for PostCSS and ToCSS. Valid values are `never`, `always` and `fallback`. The last value means that the cache will be tried if PostCSS/extended version is not available. + +## Configure cache busters + +{{< new-in "0.112.0" >}} + +The `build.cachebusters` configuration option was added to support development using Tailwind 3.x's JIT compiler where a `build` configuration may look like this: + - - +{{< code-toggle file="hugo" >}} +[build] + [build.buildStats] + enable = true + [[build.cachebusters]] + source = "assets/watching/hugo_stats\\.json" + target = "styles\\.css" + [[build.cachebusters]] + source = "(postcss|tailwind)\\.config\\.js" + target = "css" + [[build.cachebusters]] + source = "assets/.*\\.(js|ts|jsx|tsx)" + target = "js" + [[build.cachebusters]] + source = "assets/.*\\.(.*)$" + target = "$1" +{{< /code-toggle >}} + +Some key points in the above are `writeStats = true`, which writes a `hugo_stats.json` file on each build with HTML classes etc. that's used in the rendered output. Changes to this file will trigger a rebuild of the `styles.css` file. You also need to add `hugo_stats.json` to Hugo's server watcher. See [Hugo Starter Tailwind Basic](https://github.com/bep/hugo-starter-tailwind-basic) for a running example. + +source +: A regexp matching file(s) relative to one of the virtual component directories in Hugo, typically `assets/...`. + +target +: A regexp matching the keys in the resource cache that should be expired when `source` changes. You can use the matching regexp groups from `source` in the expression, e.g. `$1`. + +## Configure server + +This is only relevant when running `hugo server`, and it allows to set HTTP headers during development, which allows you to test out your Content Security Policy and similar. The configuration format matches [Netlify's](https://docs.netlify.com/routing/headers/#syntax-for-the-netlify-configuration-file) with slightly more powerful [Glob matching](https://github.com/gobwas/glob): + + +{{< code-toggle file="hugo" >}} +[server] +[[server.headers]] +for = "/**" + +[server.headers.values] +X-Frame-Options = "DENY" +X-XSS-Protection = "1; mode=block" +X-Content-Type-Options = "nosniff" +Referrer-Policy = "strict-origin-when-cross-origin" +Content-Security-Policy = "script-src localhost:1313" +{{< /code-toggle >}} + +Since this is "development only", it may make sense to put it below the `development` environment: + +{{< code-toggle file="config/development/server">}} +[[headers]] +for = "/**" + +[headers.values] +X-Frame-Options = "DENY" +X-XSS-Protection = "1; mode=block" +X-Content-Type-Options = "nosniff" +Referrer-Policy = "strict-origin-when-cross-origin" +Content-Security-Policy = "script-src localhost:1313" +{{< /code-toggle >}} + +You can also specify simple redirects rules for the server. The syntax is again similar to Netlify's. + +Note that a `status` code of 200 will trigger a [URL rewrite](https://docs.netlify.com/routing/redirects/rewrites-proxies/), which is what you want in SPA situations, e.g: + +{{< code-toggle file="config/development/server">}} +[[redirects]] +from = "/myspa/**" +to = "/myspa/" +status = 200 +force = false +{{< /code-toggle >}} + +Setting `force=true` will make a redirect even if there is existing content in the path. Note that before Hugo 0.76 `force` was the default behavior, but this is inline with how Netlify does it. + +## 404 server error page {#_404-server-error-page} + +{{< new-in "0.103.0" >}} + +Hugo will, by default, render all 404 errors when running `hugo server` with the `404.html` template. Note that if you have already added one or more redirects to your [server configuration](#configure-server), you need to add the 404 redirect explicitly, e.g: + +{{< code-toggle file="config/development/server" copy=false >}} +[[redirects]] +from = "/**" +to = "/404.html" +status = 404 +{{< /code-toggle >}} + +## Configure title case + - Set `titleCaseStyle` to specify the title style used by the [title](/functions/title/) template function and the automatic section titles in Hugo. ++Set `titleCaseStyle` to specify the title style used by the [title](/functions/strings/title) template function and the automatic section titles in Hugo. + +Can be one of: + +* `ap` (default), the capitalization rules in the [Associated Press (AP) Stylebook] +* `chicago`, the [Chicago Manual of Style] +* `go`, Go's convention of capitalizing every word. +* `firstupper`, capitalize the first letter of the first word. +* `none`, no capitalization. + +[Associated Press (AP) Stylebook]: https://www.apstylebook.com/ +[Chicago Manual of Style]: https://www.chicagomanualofstyle.org/home.html +[site configuration]: /getting-started/configuration/#configure-title-case + +## Configuration environment variables + +HUGO_NUMWORKERMULTIPLIER +: Can be set to increase or reduce the number of workers used in parallel processing in Hugo. If not set, the number of logical CPUs will be used. + +## Configuration lookup order + +Similar to the template [lookup order], Hugo has a default set of rules for searching for a configuration file in the root of your website's source directory as a default behavior: + +1. `./hugo.toml` +2. `./hugo.yaml` +3. `./hugo.json` + +In your configuration file, you can direct Hugo as to how you want your website rendered, control your website's menus, and arbitrarily define site-wide parameters specific to your project. + +## Example configuration + +The following is a typical example of a configuration file. The values nested under `params:` will populate the [`.Site.Params`] variable for use in [templates]: + +{{< code-toggle file="hugo" >}} +baseURL: "https://yoursite.example.com/" +title: "My Hugo Site" +permalinks: + posts: /:year/:month/:title/ +params: + Subtitle: "Hugo is Absurdly Fast!" + AuthorName: "Jon Doe" + GitHubUser: "spf13" + ListOfFoo: + - "foo1" + - "foo2" + SidebarRecentLimit: 5 +{{< /code-toggle >}} + +## Configure with environment variables + +In addition to the 3 configuration options already mentioned, configuration key-values can be defined through operating system environment variables. + +For example, the following command will effectively set a website's title on Unix-like systems: + +```txt +$ env HUGO_TITLE="Some Title" hugo +``` + +This is really useful if you use a service such as Netlify to deploy your site. Look at the Hugo docs [Netlify configuration file](https://github.com/gohugoio/hugoDocs/blob/master/netlify.toml) for an example. + +{{% note %}} +Names must be prefixed with `HUGO_` and the configuration key must be set in uppercase when setting operating system environment variables. + +To set configuration parameters, prefix the name with `HUGO_PARAMS_` +{{% /note %}} + +If you are using snake_cased variable names, the above will not work. Hugo determines the delimiter to use by the first character after `HUGO`. This allows you to define environment variables on the form `HUGOxPARAMSxAPI_KEY=abcdefgh`, using any [allowed](https://stackoverflow.com/questions/2821043/allowed-characters-in-linux-environment-variable-names#:~:text=So%20names%20may%20contain%20any,not%20begin%20with%20a%20digit.) delimiter. + - {{< todo >}} - Test and document setting parameters via JSON env var. - {{< /todo >}} - +## Ignore content and data files when rendering + +**Note:** This works, but we recommend you use the newer and more powerful [includeFiles and excludeFiles](/hugo-modules/configuration/#module-configuration-mounts) mount options. + +To exclude specific files from the `content`, `data`, and `i18n` directories when rendering your site, set `ignoreFiles` to one or more regular expressions to match against the absolute file path. + +To ignore files ending with `.foo` or `.boo`: + +{{< code-toggle copy=false file="hugo" >}} +ignoreFiles = ['\.foo$', '\.boo$'] +{{< /code-toggle >}} + +To ignore a file using the absolute file path: + +{{< code-toggle copy=false file="hugo" >}} +ignoreFiles = ['^/home/user/project/content/test\.md$'] +{{< /code-toggle >}} + +## Configure front matter + +### Configure dates + +Dates are important in Hugo, and you can configure how Hugo assigns dates to your content pages. You do this by adding a `frontmatter` section to your `hugo.toml`. + +The default configuration is: + +{{< code-toggle config="frontmatter" />}} + +If you, as an example, have a non-standard date parameter in some of your content, you can override the setting for `date`: + +{{< code-toggle file="hugo" >}} +[frontmatter] +date = ["myDate", ":default"] +{{< /code-toggle >}} + +The `:default` is a shortcut to the default settings. The above will set `.Date` to the date value in `myDate` if present, if not we will look in `date`,`publishDate`, `lastmod` and pick the first valid date. + +In the list to the right, values starting with ":" are date handlers with a special meaning (see below). The others are just names of date parameters (case insensitive) in your front matter configuration. Also note that Hugo have some built-in aliases to the above: `lastmod` => `modified`, `publishDate` => `pubdate`, `published` and `expiryDate` => `unpublishdate`. With that, as an example, using `pubDate` as a date in front matter, will, by default, be assigned to `.PublishDate`. + +The special date handlers are: + +`:fileModTime` +: Fetches the date from the content file's last modification timestamp. + +An example: + +{{< code-toggle file="hugo" >}} +[frontmatter] +lastmod = ["lastmod", ":fileModTime", ":default"] +{{< /code-toggle >}} + +The above will try first to extract the value for `.Lastmod` starting with the `lastmod` front matter parameter, then the content file's modification timestamp. The last, `:default` should not be needed here, but Hugo will finally look for a valid date in `:git`, `date` and then `publishDate`. + +`:filename` +: Fetches the date from the content file's file name. For example, `2018-02-22-mypage.md` will extract the date `2018-02-22`. Also, if `slug` is not set, `mypage` will be used as the value for `.Slug`. + +An example: + +{{< code-toggle file="hugo" >}} +[frontmatter] +date = [":filename", ":default"] +{{< /code-toggle >}} + +The above will try first to extract the value for `.Date` from the file name, then it will look in front matter parameters `date`, `publishDate` and lastly `lastmod`. + +`:git` +: This is the Git author date for the last revision of this content file. This will only be set if `--enableGitInfo` is set or `enableGitInfo = true` is set in site configuration. + +## Configure additional output formats + +Hugo v0.20 introduced the ability to render your content to multiple output formats (e.g., to JSON, AMP html, or CSV). See [Output Formats] for information on how to add these values to your Hugo project's configuration file. + +## Configure minify + +Default configuration: + +{{< code-toggle config="minify" />}} + +## Configure file caches + +Since Hugo 0.52 you can configure more than just the `cacheDir`. This is the default configuration: + +{{< code-toggle config="caches" />}} + +You can override any of these cache settings in your own `hugo.toml`. + +### The keywords explained + +`:cacheDir` +: See [Configure cacheDir](#configure-cachedir). + +`:project` +: The base directory name of the current Hugo project. This means that, in its default setting, every project will have separated file caches, which means that when you do `hugo --gc` you will not touch files related to other Hugo projects running on the same PC. + +`:resourceDir` +: This is the value of the `resourceDir` configuration option. + +maxAge +: This is the duration before a cache entry will be evicted, -1 means forever and 0 effectively turns that particular cache off. Uses Go's `time.Duration`, so valid values are `"10s"` (10 seconds), `"10m"` (10 minutes) and `"10h"` (10 hours). + +dir +: The absolute path to where the files for this cache will be stored. Allowed starting placeholders are `:cacheDir` and `:resourceDir` (see above). + +## Configuration format specs + +- [TOML Spec][toml] +- [YAML Spec][yaml] +- [JSON Spec][json] + +[`.Site.Params`]: /variables/site/ +[directory structure]: /getting-started/directory-structure - [json]: https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf "Specification for JSON, JavaScript Object Notation" ++[json]: https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf +[lookup order]: /templates/lookup-order/ +[Output Formats]: /templates/output-formats/ +[templates]: /templates/ +[toml]: https://toml.io/en/latest +[yaml]: https://yaml.org/spec/ +[static-files]: /content-management/static-files/ + + +## Configure cacheDir + +This is the directory where Hugo by default will store its file caches. See [Configure File Caches](#configure-file-caches). + +This can be set using the `cacheDir` config option or via the OS env variable `HUGO_CACHEDIR`. + +If this is not set, Hugo will use, in order of preference: + +1. If running on Netlify: `/opt/build/cache/hugo_cache/`. This means that if you run your builds on Netlify, all caches configured with `:cacheDir` will be saved and restored on the next build. For other CI vendors, please read their documentation. For an CircleCI example, see [this configuration](https://github.com/bep/hugo-sass-test/blob/6c3960a8f4b90e8938228688bc49bdcdd6b2d99e/.circleci/config.yml). +1. In a `hugo_cache` directory below the OS user cache directory as defined by Go's [os.UserCacheDir](https://pkg.go.dev/os#UserCacheDir). On Unix systems, this is `$XDG_CACHE_HOME` as specified by [basedir-spec-latest](https://specifications.freedesktop.org/basedir-spec/basedir-spec-latest.html) if non-empty, else `$HOME/.cache`. On MacOS, this is `$HOME/Library/Caches`. On Windows, this is`%LocalAppData%`. On Plan 9, this is `$home/lib/cache`. {{< new-in "0.116.0" >}} +1. In a `hugo_cache_$USER` directory below the OS temp dir. + +If you want to know the current value of `cacheDir`, you can run `hugo config`, e.g: `hugo config | grep cachedir`. ++ ++ ++[`time`]: /functions/time/astime diff --cc docs/content/en/getting-started/glossary.md index 834f72ec5,000000000..c15af5170 mode 100644,000000..100644 --- a/docs/content/en/getting-started/glossary.md +++ b/docs/content/en/getting-started/glossary.md @@@ -1,266 -1,0 +1,270 @@@ +--- +title: Glossary of terms +description: Terms commonly used throughout the documentation. +keywords: [glossary] +menu: + docs: + parent: getting-started + weight: 60 +weight: 60 +type: glossary +--- + + + +### action + +See [template action](#template-action). + +### archetype + +A template for new content. See [details](/content-management/archetypes/). + +### argument + +A [scalar](#scalar), [array](#array), [slice](#slice), [map](#map), or [object](#object) passed to a [function](#function), [method](#method), or [shortcode](#shortcode). + +### array + +A numbered sequence of elements. Unlike Go's [slice](#slice) data type, an array has a fixed length. See the [Go documentation](https://go.dev/ref/spec#Array_types) for details. + +### bool + +See [boolean](#boolean). + +### boolean + +A data type with two possible values, either `true` or `false`. + +### branch bundle + +A [page bundle](#page-bundle) with an _index.md file and zero or more [resources](#resource). Analogous to a physical branch, a branch bundle may have descendants including regular pages, [leaf bundles](/getting-started/glossary/#leaf-bundle), and other branch bundles. See [details](/content-management/page-bundles/). + +### build + +To generate a static site that includes HTML files and assets such as images, CSS, and JavaScript. The build process includes rendering and resource transformations. + +### bundle + +See [page bundle](#page-bundle). + +### cache + +A software component that stores data so that future requests for the same data are faster. + +### collection + +Typically, a collection of pages, but may also refer to an [array](#array), [slice](#slice), or [map](#map). For example, the pages within a site's "articles" section are a page collection. + +### content format + +A markup language for creating content. Typically markdown, but may also be HTML, AsciiDoc, Org, Pandoc, or reStructuredText. See [details](/content-management/formats/). + +### content type + +A classification of content inferred from the top-level directory name or the `type` set in [front matter](#front-matter). Pages in the root of the content directory, including the home page, are of type "page". Accessed via `.Page.Type` in [templates](#template). See [details](/content-management/types/). + ++### content view ++ ++A template called with the `.Page.Render` method. See [details](/templates/views/). ++ +### context + +Represented by a period "." within a [template action](#template-action), context is the current location in a data structure. For example, while iterating over a [collection](#collection) of pages, the context within each iteration is the page's data structure. The context received by each template depends on template type and/or how it was called. See [details](/templates/introduction/#the-dot). + +### flag + +An option passed to a command-line program, beginning with one or two hyphens. See [details](/commands/hugo/). + +### float + +See [floating point](#floating-point). + +### floating point + +A numeric data type with a fractional component. For example, `3.14159`. + +### function + +Used within a [template action](#template-action), a function takes one or more [arguments](#argument) and returns a value. Unlike [methods](#method), functions are not associated with an [object](#object). See [details](/functions/). + +### front matter + +Metadata at the beginning of each content page, separated from the content by format-specific delimiters. See [details](/content-management/front-matter/). + +### int + +See [integer](#integer). + +### integer + +A numeric data type without a fractional component. For example, `42`. + +### internationalization + +Software design and development efforts that enable [localization](#localization). See the [W3C definition](https://www.w3.org/International/questions/qa-i18n). Abbreviated i18n. + +### kind + +See [page kind](#page-kind). + +### layout + +See [template](#template). + +### leaf bundle + +A [page bundle](#page-bundle) with an index.md file and zero or more [resources](#resource). Analogous to a physical leaf, a leaf bundle is at the end of a branch. Hugo ignores content (but not resources) beneath the leaf bundle. See [details](/content-management/page-bundles/). + +### list page + +Any [page kind](#page-kind) that receives a page [collection](#collection) in [context](#context). This includes the home page, [section pages](#section-page), [taxonomy pages](#taxonomy-page), and [term pages](#term-page). + +### localization + +Adaptation of a site to meet language and regional requirements. This includes translations, language-specific media, date and currency formats, etc. See [details](/content-management/multilingual/) and the [W3C definition](https://www.w3.org/International/questions/qa-i18n). Abbreviated l10n. + +### map + +An unordered group of elements, each indexed by a unique key. See the [Go documentation](https://go.dev/ref/spec#Map_types) for details. + +### method + +Used within a [template action](#template-action) and associated with an [object](#object), a method takes zero or more [arguments](#argument) and either returns a value or performs an action. For example, `.IsHome` is a method on the `.Page` object which returns `true` if the current page is the home page. See also [function](#function). + +### module + +Like a [theme](#theme), a module is a packaged combination of [archetypes](#archetype), assets, content, data, [templates](#template), translation tables, static files, or configuration settings. A module may serve as the basis for a new site, or to augment an existing site. See [details](/hugo-modules/). + +### object + +A data structure with or without associated [methods](#method). + +### page bundle + +A directory that encapsulates both content and associated [resources](#resource). There are two types of page bundles: [leaf bundles](/getting-started/glossary/#leaf-bundle) and [branch bundles](/getting-started/glossary/#branch-bundle). See [details](/content-management/page-bundles/). + +### page kind + +A classification of rendered pages, one of "home", "page", "section", "taxonomy", or "term". Accessed via `.Page.Kind` in [templates](#template). See [details](/templates/section-templates/#page-kinds). + +### pager + +Created during [pagination](#pagination), a pager contains a subset of a section list, and navigation links to other pagers. + +### paginate + +To split a [section](#section) list into two or more [pagers](#pager) See [details](/templates/pagination/). + +### pagination + +The process of [paginating](#paginate) a [section](#section) list. + +### parameter + +Typically, a user-defined key/value pair at the site or page level, but may also refer to a configuration setting or an [argument](#argument). + +### partial + +A [template](#template) called from any other template including [shortcodes](#shortcode), [render hooks](#render-hook), and other partials. A partial either renders something or returns something. A partial can also call itself, for example, to [walk](#walk) a data structure. + +### permalink + +The absolute URL of a rendered page, including scheme and host. + +### pipe + +See [pipeline](#pipeline). + +### pipeline + +Within a [template action](#template-action), a pipeline is a possibly chained sequence of values, [function](#function) calls, or [method](#method) calls. Functions and methods in the pipeline may take multiple [arguments](#argument). + +A pipeline may be *chained* by separating a sequence of commands with pipeline characters "|". In a chained pipeline, the result of each command is passed as the last argument to the following command. The output of the final command in the pipeline is the value of the pipeline. See the [Go documentation](https://pkg.go.dev/text/template#hdr-Pipelines) for details. + +### publish + +See [build](#build). + +### regular page + +Content with the "page" [page kind](#page-kind). See also [section page](#section-page). + +### render hook + +A [template](#template) that overrides standard markdown rendering. See [details](/templates/render-hooks/). + +### resource + +Any file consumed by the build process to augment or generate content, structure, behavior, or presentation. For example: images, videos, content snippets, CSS, Sass, JavaScript, and data. + +Hugo supports three types of resources: page resources (located in a [page bundle](/getting-started/glossary/#page-bundle)), global resources (located in the assets directory), and remote resources (typically accessed via HTTPS). + +### scalar + +A single value, one of [string](#string), [integer](#integer), [floating point](#floating-point), or [boolean](#boolean). + +### section + +A top-level content directory, or any content directory with an _index.md file. A content directory with an _index.md file is also known as a [branch bundle](/getting-started/glossary/#branch-bundle). Section templates receive one or more page [collections](#collection) in [context](#context). See [details](/content-management/sections/). + +### section page + +Content with the "section" [page kind](#page-kind). Typically a listing of [regular pages](#regular-page) and/or [section pages](#section-page) within the current [section](#section). See also [regular page](#regular-page). + +### shortcode + +A [template](#template) called from within markdown, taking zero or more [arguments](#argument). See [details](/content-management/shortcodes/). + +### slice + +A numbered sequence of elements. Unlike Go's [array](#array) data type, slices are dynamically sized. See the [Go documentation](https://go.dev/ref/spec#Slice_types) for details. + +### string + +A sequence of bytes. For example, `"What is 6 times 7?"` . + +### taxonomy + +A group of related [terms](#term) used to classify content. For example, a "colors" taxonomy might include the terms "red", "green", and "blue". See [details](/content-management/taxonomies/). + +### taxonomy page + +Content with the "taxonomy" [page kind](#page-kind). Typically a listing of [terms](#term) within a given [taxonomy](#taxonomy). + +### template + +A file with [template actions](#template-action), located within the layouts directory of a project, theme, or module. See [details](/templates/). + +### template action + +A data evaluation or control structure within a [template](#template), delimited by "{{" and "}}". See the [Go documentation](https://pkg.go.dev/text/template#hdr-Actions) for details. + +### term + +A member of a [taxonomy](#taxonomy), used to classify content. See [details](/content-management/taxonomies/). + +### term page + +Content with the "term" [page kind](#page-kind). Typically a listing of [regular pages](#regular-page) and [section pages](#section-page) with a given [term](#term). + +### theme + +A packaged combination of [archetypes](#archetype), assets, content, data, [templates](#template), translation tables, static files, or configuration settings. A theme may serve as the basis for a new site, or to augment an existing site. See also [module](#module). + +### token + - An identifier within a format string, beginning with a colon and replaced with a value when rendered. For example, use tokens in format strings for both [permalinks](/content-management/urls/#permalinks) and [dates](/functions/dateformat/#datetime-formatting-layouts). ++An identifier within a format string, beginning with a colon and replaced with a value when rendered. For example, use tokens in format strings for both [permalinks](/content-management/urls/#permalinks) and [dates](/functions/time/format/#localization). + + +### type + +See [content type](#content-type). + +### variable + +A variable initialized within a [template action](#template-action). + +### walk + +To recursively traverse a nested data structure. For example, rendering a multilevel menu. diff --cc docs/content/en/hosting-and-deployment/hosting-on-firebase.md index 3b1ba9dcd,000000000..c58f4b752 mode 100644,000000..100644 --- a/docs/content/en/hosting-and-deployment/hosting-on-firebase.md +++ b/docs/content/en/hosting-and-deployment/hosting-on-firebase.md @@@ -1,111 -1,0 +1,111 @@@ +--- +title: Host on Firebase +description: You can use Firebase's free tier to host your static website; this also gives you access to Firebase's NOSQL API. +categories: [hosting and deployment] +keywords: [hosting,firebase] +menu: + docs: + parent: hosting-and-deployment +toc: true +--- + +## Assumptions + +1. You have an account with [Firebase][signup]. (If you don't, you can sign up for free using your Google account.) +2. You have completed the [Quick Start] or have a completed Hugo website ready for deployment. + +## Initial setup + +Go to the [Firebase console][console] and create a new project (unless you already have a project). You will need to globally install `firebase-tools` (node.js): + +```txt +npm install -g firebase-tools +``` + +Log in to Firebase (setup on your local machine) using `firebase login`, which opens a browser where you can select your account. Use `firebase logout` in case you are already logged in but to the wrong account. + + +```txt +firebase login +``` + +In the root of your Hugo project, initialize the Firebase project with the `firebase init` command: + +```txt +firebase init +``` + +From here: + +1. Choose Hosting in the feature question +2. Choose the project you just set up +3. Accept the default for your database rules file +4. Accept the default for the publish directory, which is `public` +5. Choose "No" in the question if you are deploying a single-page app + +## Using Firebase & GitHub CI/CD + +In new versions of Firebase, some other questions apply: + - 6. Set up automatic builds and deploys with GitHub? ++6. Set up automatic builds and deploys with GitHub? + +Here you will be redirected to login in your GitHub account to get permissions. Confirm. + - 7. For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) ++7. For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) + +Include the repository you will use in the format above (Account/Repo) +Firebase script with retrieve credentials, create a service account you can later manage in your GitHub settings. + - 8. Set up the workflow to run a build script before every deploy? ++8. Set up the workflow to run a build script before every deploy? + +Here is your opportunity to include some commands before you run the deploy. + - 9. Set up automatic deployment to your site's live channel when a PR is merged? ++9. Set up automatic deployment to your site's live channel when a PR is merged? + +You can let in the default option (main) + +After that Firebase has been set in your project with CI/CD. After that run: + - ``` ++```sh +hugo && firebase deploy +``` + +With this you will have the app initialized manually. After that you can manage and fix your GitHub workflow from: https://github.com/your-account/your-repo/actions + +Don't forget to update your static pages before push! + +## Manual deploy + +To deploy your Hugo site, execute the `firebase deploy` command, and your site will be up in no time: + +```txt +hugo && firebase deploy +``` + +## CI setup (other tools) + +You can generate a deploy token using + +```txt +firebase login:ci +``` + +You can also set up your CI and add the token to a private variable like `$FIREBASE_DEPLOY_TOKEN`. + +{{% note %}} +This is a private secret and it should not appear in a public repository. Make sure you understand your chosen CI and that it's not visible to others. +{{% /note %}} + +You can then add a step in your build to do the deployment using the token: + +```txt +firebase deploy --token $FIREBASE_DEPLOY_TOKEN +``` + +## Reference links + +* [Firebase CLI Reference](https://firebase.google.com/docs/cli/#administrative_commands) + +[console]: https://console.firebase.google.com/ +[Quick Start]: /getting-started/quick-start/ +[signup]: https://console.firebase.google.com/ diff --cc docs/content/en/hugo-modules/use-modules.md index 27a1f6051,000000000..db269a5db mode 100644,000000..100644 --- a/docs/content/en/hugo-modules/use-modules.md +++ b/docs/content/en/hugo-modules/use-modules.md @@@ -1,162 -1,0 +1,162 @@@ +--- +title: Use Hugo Modules +description: How to use Hugo Modules to build and manage your site. +categories: [hugo modules] +keywords: [install, themes, source, organization, directories,usage,modules] +menu: + docs: + parent: modules + weight: 30 +weight: 30 +aliases: [/themes/usage/,/themes/installing/,/installing-and-using-themes/] +toc: true +--- + +## Prerequisite + +{{< gomodules-info >}} + +## Initialize a new module + +Use `hugo mod init` to initialize a new Hugo Module. If it fails to guess the module path, you must provide it as an argument, e.g.: + +```bash +hugo mod init github.com/gohugoio/myShortcodes +``` + +Also see the [CLI Doc](/commands/hugo_mod_init/). + +## Use a module for a theme + +The easiest way to use a Module for a theme is to import it in the configuration. + +1. Initialize the hugo module system: `hugo mod init github.com//` +2. Import the theme: + +{{< code-toggle file="hugo" >}} +[module] + [[module.imports]] + path = "github.com/spf13/hyde" +{{< /code-toggle >}} + +## Update modules + +Modules will be downloaded and added when you add them as imports to your configuration, see [Module Imports](/hugo-modules/configuration/#module-configuration-imports). + +To update or manage versions, you can use `hugo mod get`. + +Some examples: + +### Update all modules + +```bash +hugo mod get -u +``` + +### Update all modules recursively + +```bash +hugo mod get -u ./... +``` + +### Update one module + +```bash +hugo mod get -u github.com/gohugoio/myShortcodes +``` + +### Get a specific version + +```bash +hugo mod get github.com/gohugoio/myShortcodes@v1.0.7 +``` + +Also see the [CLI Doc](/commands/hugo_mod_get/). + +## Make and test changes in a module + +One way to do local development of a module imported in a project is to add a replace directive to a local directory with the source in `go.mod`: + +```bash +replace github.com/bep/hugotestmods/mypartials => /Users/bep/hugotestmods/mypartials +``` + +If you have the `hugo server` running, the configuration will be reloaded and `/Users/bep/hugotestmods/mypartials` put on the watch list. + +Instead of modifying the `go.mod` files, you can also use the modules configuration [`replacements`](/hugo-modules/configuration/#module-configuration-top-level) option. + +## Print dependency graph + +Use `hugo mod graph` from the relevant module directory and it will print the dependency graph, including vendoring, module replacement or disabled status. + +E.g.: + +```txt +hugo mod graph + +github.com/bep/my-modular-site github.com/bep/hugotestmods/mymounts@v1.2.0 +github.com/bep/my-modular-site github.com/bep/hugotestmods/mypartials@v1.0.7 +github.com/bep/hugotestmods/mypartials@v1.0.7 github.com/bep/hugotestmods/myassets@v1.0.4 +github.com/bep/hugotestmods/mypartials@v1.0.7 github.com/bep/hugotestmods/myv2@v1.0.0 +DISABLED github.com/bep/my-modular-site github.com/spf13/hyde@v0.0.0-20190427180251-e36f5799b396 +github.com/bep/my-modular-site github.com/bep/hugo-fresh@v1.0.1 +github.com/bep/my-modular-site in-themesdir + +``` + +Also see the [CLI Doc](/commands/hugo_mod_graph/). + +## Vendor your modules + +`hugo mod vendor` will write all the module dependencies to a `_vendor` folder, which will then be used for all subsequent builds. + +Note that: + +* You can run `hugo mod vendor` on any level in the module tree. +* Vendoring will not store modules stored in your `themes` folder. +* Most commands accept a `--ignoreVendorPaths` flag, which will then not use the vendored modules in `_vendor` for the module paths matching the [Glob](https://github.com/gobwas/glob) pattern given. + +Also see the [CLI Doc](/commands/hugo_mod_vendor/). + +## Tidy go.mod, go.sum + +Run `hugo mod tidy` to remove unused entries in `go.mod` and `go.sum`. + +Also see the [CLI Doc](/commands/hugo_mod_clean/). + +## Clean module cache + +Run `hugo mod clean` to delete the entire modules cache. + +Note that you can also configure the `modules` cache with a `maxAge`, see [File Caches](/getting-started/configuration/#configure-file-caches). + +Also see the [CLI Doc](/commands/hugo_mod_clean/). + +## Module workspaces + +{{< new-in "0.109.0" >}} + +Workspace support was added in [Go 1.18](https://go.dev/blog/get-familiar-with-workspaces) and Hugo got solid support for it in the `v0.109.0` version. + +A common use case for a workspace is to simplify local development of a site with its theme modules. + +A workspace can be configured in a `*.work` file and activated with the [module.workspace](/hugo-modules/configuration/) setting, which for this use is commonly controlled via the `HUGO_MODULE_WORKSPACE` OS environment variable. + - See the [hugo.work](https://github.com/gohugoio/hugo/blob/master/hugo.work) file in the Hugo Docs repo for an example: ++See the [hugo.work](https://github.com/gohugoio/hugo/blob/master/docs/hugo.work) file in the Hugo Docs repo for an example: + +```text +go 1.19 + +use . +use ../gohugoioTheme +``` + +Using the `use` directive, list all the modules you want to work on, pointing to its relative location. As in the example above, it's recommended to always include the main project (the ".") in the list. + +With that you can start the Hugo server with that workspace enabled: + +```bash +HUGO_MODULE_WORKSPACE=hugo.work hugo server --ignoreVendorPaths "**" +``` + +The `--ignoreVendorPaths` flag is added above to ignore any of the vendored dependencies inside `_vendor`. If you don't use vendoring, you don't need that flag. But now the server is set up watching the files and directories in the workspace and you can see your local edits reloaded. diff --cc docs/content/en/hugo-pipes/babel.md index 222b5116b,000000000..44b4e670e mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/babel.md +++ b/docs/content/en/hugo-pipes/babel.md @@@ -1,76 -1,0 +1,76 @@@ +--- +title: Babel +description: Hugo Pipes can process JS files with Babel. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 70 +weight: 70 - signature: ["resources.Babel RESOURCE [OPTIONS]", "babel RESOURCE [OPTIONS]"] ++signatures: ["resources.Babel RESOURCE [OPTIONS]", "babel RESOURCE [OPTIONS]"] +--- + +## Usage + +Any JavaScript resource file can be transpiled to another JavaScript version using `resources.Babel` which takes for argument the resource object and an optional dict of options listed below. Babel uses the [babel cli](https://babeljs.io/docs/en/babel-cli). + + +{{% note %}} +Hugo Pipe's Babel requires the `@babel/cli` and `@babel/core` JavaScript packages to be installed in the project or globally (`npm install -g @babel/cli @babel/core`) along with any Babel plugin(s) or preset(s) used (e.g., `npm install @babel/preset-env --save-dev`). + +If you are using the Hugo Snap package, Babel and plugin(s) need to be installed locally within your Hugo site directory, e.g., `npm install @babel/cli @babel/core --save-dev` without the `-g` flag. +{{% /note %}} + +### configuration + +We add the main project's `node_modules` to `NODE_PATH` when running Babel and similar tools. There are some known [issues](https://github.com/babel/babel/issues/5618) with Babel in this area, so if you have a `babel.config.js` living in a Hugo Module (and not in the project itself), we recommend using `require` to load the presets/plugins, e.g.: + + +```js +module.exports = { + presets: [ + [ + require("@babel/preset-env"), + { + useBuiltIns: "entry", + corejs: 3, + }, + ], + ], +}; +``` + +### Options + +config [string] +: Path to the Babel configuration file. Hugo will, by default, look for a `babel.config.js` in your project. More information on these configuration files can be found here: [babel configuration](https://babeljs.io/docs/en/configuration). + +minified [bool] +: Save as many bytes as possible when printing + +noComments [bool] +: Write comments to generated output (true by default) + +compact [bool] +: Do not include superfluous whitespace characters and line terminators. Defaults to `auto` if not set. + +verbose [bool] +: Log everything + +sourceMap [string] +: Output `inline` or `external` sourcemap from the babel compile. External sourcemaps will be written to the target with the output file name + ".map". Input sourcemaps can be read from js.Build and node modules and combined into the output sourcemaps. + + +### Examples + +```go-html-template +{{- $transpiled := resources.Get "scripts/main.js" | babel -}} +``` + +Or with options: + +```go-html-template +{{ $opts := dict "noComments" true }} +{{- $transpiled := resources.Get "scripts/main.js" | babel $opts -}} +``` diff --cc docs/content/en/hugo-pipes/bundling.md index 8b9899432,000000000..f3ff42f9c mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/bundling.md +++ b/docs/content/en/hugo-pipes/bundling.md @@@ -1,23 -1,0 +1,23 @@@ +--- +title: Concat +linkTitle: Concatenating assets +description: Bundle any number of assets into one resource. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 90 +weight: 90 - signature: ["resources.Concat TARGET_PATH SLICE_RESOURCES"] ++signatures: ["resources.Concat TARGET_PATH SLICE_RESOURCES"] +--- + +## Usage + +Asset files of the same MIME type can be bundled into one resource using `resources.Concat` which takes two arguments, the target path for the created resource bundle and a slice of resource objects to be concatenated. + +```go-html-template +{{ $plugins := resources.Get "js/plugins.js" }} +{{ $global := resources.Get "js/global.js" }} +{{ $js := slice $plugins $global | resources.Concat "js/bundle.js" }} +``` diff --cc docs/content/en/hugo-pipes/fingerprint.md index bdabbe029,000000000..c492d4c70 mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/fingerprint.md +++ b/docs/content/en/hugo-pipes/fingerprint.md @@@ -1,27 -1,0 +1,27 @@@ +--- +title: Fingerprint +linkTitle: Fingerprinting and SRI hashing +description: Process a given resource, adding a hash string of the resource's content. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 100 +weight: 100 - signature: ["resources.Fingerprint RESOURCE [ALGORITHM]", "fingerprint RESOURCE [ALGORITHM]"] ++signatures: ["resources.Fingerprint RESOURCE [ALGORITHM]", "fingerprint RESOURCE [ALGORITHM]"] +--- + +## Usage + +Fingerprinting and [SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) can be applied to any asset file using `resources.Fingerprint` which takes two arguments, the resource object and an optional [hash algorithm](https://en.wikipedia.org/wiki/Secure_Hash_Algorithms). + +The default hash algorithm is `sha256`. Other available algorithms are `sha384` and (as of Hugo `0.55`) `sha512` and `md5`. + +Any so processed asset will bear a `.Data.Integrity` property containing an integrity string, which is made up of the name of the hash algorithm, one hyphen and the base64-encoded hash sum. + +```go-html-template +{{ $js := resources.Get "js/global.js" }} +{{ $secureJS := $js | resources.Fingerprint "sha512" }} + +``` diff --cc docs/content/en/hugo-pipes/js.md index 86c1564cf,000000000..ecf6dc33f mode 100644,000000..100644 --- a/docs/content/en/hugo-pipes/js.md +++ b/docs/content/en/hugo-pipes/js.md @@@ -1,164 -1,0 +1,164 @@@ +--- +title: js.Build +linkTitle: JavaScript building +description: Process a JavaScript file with [ESBuild](https://github.com/evanw/esbuild). +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 60 +weight: 60 - signature: ["js.Build RESOURCE [OPTIONS]"] ++signatures: ["js.Build RESOURCE [OPTIONS]"] +--- + +## Usage + +Any JavaScript resource file can be transpiled and "tree shaken" using `js.Build` which takes for argument either a string for the filepath or a dict of options listed below. + +### Options + +targetPath [string] +: If not set, the source path will be used as the base target path. +Note that the target path's extension may change if the target MIME type is different, e.g. when the source is TypeScript. + +params [map or slice] +: Params that can be imported as JSON in your JS files, e.g.: + +```go-html-template +{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }} +``` +And then in your JS file: + +```js +import * as params from '@params'; +``` + +Note that this is meant for small data sets, e.g. configuration settings. For larger data, please put/mount the files into `/assets` and import them directly. + +minify [bool] +: Let `js.Build` handle the minification. + +inject [slice] +: This option allows you to automatically replace a global variable with an import from another file. The path names must be relative to `assets`. See https://esbuild.github.io/api/#inject + +shims [map] +: This option allows swapping out a component with another. A common use case is to load dependencies like React from a CDN (with _shims_) when in production, but running with the full bundled `node_modules` dependency during development: + +```go-html-template +{{ $shims := dict "react" "js/shims/react.js" "react-dom" "js/shims/react-dom.js" }} +{{ $js = $js | js.Build dict "shims" $shims }} +``` + +The _shim_ files may look like these: + +```js +// js/shims/react.js +module.exports = window.React; +``` + +```js +// js/shims/react-dom.js +module.exports = window.ReactDOM; +``` + +With the above, these imports should work in both scenarios: + +```js +import * as React from 'react' +import * as ReactDOM from 'react-dom'; +``` + +target [string] +: The language target. + One of: `es5`, `es2015`, `es2016`, `es2017`, `es2018`, `es2019`, `es2020` or `esnext`. + Default is `esnext`. + +externals [slice] +: External dependencies. Use this to trim dependencies you know will never be executed. See https://esbuild.github.io/api/#external + + +defines [map] +: Allow to define a set of string replacement to be performed when building. Should be a map where each key is to be replaced by its value. + +```go-html-template +{{ $defines := dict "process.env.NODE_ENV" `"development"` }} +``` + +format [string] +: The output format. + One of: `iife`, `cjs`, `esm`. + Default is `iife`, a self-executing function, suitable for inclusion as a +``` diff --cc docs/content/en/hugo-pipes/minification.md index a32ef6e6f,000000000..74ddfaa89 mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/minification.md +++ b/docs/content/en/hugo-pipes/minification.md @@@ -1,24 -1,0 +1,24 @@@ +--- +title: Minify +linkTitle: Asset minification +description: Minifies a given resource. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 80 +weight: 80 - signature: ["resources.Minify RESOURCE", "minify RESOURCE"] ++signatures: ["resources.Minify RESOURCE", "minify RESOURCE"] +--- + +## Usage + +Any CSS, JS, JSON, HTML, SVG or XML resource can be minified using `resources.Minify` which takes for argument the resource object. + +```go-html-template +{{ $css := resources.Get "css/main.css" }} +{{ $style := $css | resources.Minify }} +``` + +Note that you can also minify the final HTML output to `/public` by running `hugo --minify`. diff --cc docs/content/en/hugo-pipes/postcss.md index 4e969caf2,000000000..2a08c7ad4 mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/postcss.md +++ b/docs/content/en/hugo-pipes/postcss.md @@@ -1,128 -1,0 +1,128 @@@ +--- +title: PostCSS +description: Process CSS files with PostCSS, using any of the available plugins. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 40 +toc: true +weight: 40 - signature: ["resources.PostCSS RESOURCE [OPTIONS]", "postCSS RESOURCE [OPTIONS]"] ++signatures: ["resources.PostCSS RESOURCE [OPTIONS]", "postCSS RESOURCE [OPTIONS]"] +--- + +## Setup + +Follow the steps below to transform CSS using any of the [available PostCSS plugins](https://www.postcss.parts/). + +Step 1 +: Install [Node.js](https://nodejs.org/en/download). + +Step 2 +: Install the required Node.js packages in the root of your project. For example, to add vendor prefixes to CSS rules: + +```bash +npm install postcss postcss-cli autoprefixer +``` + +Step 3 +: Create a PostCSS configuration file in the root of your project. You must name this file `postcss.config.js` or one of the other [supported file names]. For example: + +[supported file names]: https://github.com/postcss/postcss-load-config#usage + +{{< code file="postcss.config.js" >}} +module.exports = { + plugins: [ + require('autoprefixer') + ] +}; +{{< /code >}} + +{{% note %}} +If you are a Windows user, and the path to your project contains a space, you must place the PostCSS configuration within the package.json file. See [this example](https://github.com/postcss/postcss-load-config#packagejson) and issue [#7333](https://github.com/gohugoio/hugo/issues/7333). +{{% /note %}} + +Step 4 +: Place your CSS file within the `assets` directory. + +Step 5 +: Capture the CSS file as a resource and pipe it through `resources.PostCSS` (alias `postCSS`): + +{{< code file="layouts/partials/css.html" >}} +{{ with resources.Get "css/main.css" | postCSS }} + +{{ end }} +{{< /code >}} + +If starting with a Sass file within the `assets` directory: + +{{< code file="layouts/partials/css.html" >}} +{{ with resources.Get "sass/main.scss" | toCSS | postCSS }} + +{{ end }} +{{< /code >}} + +## Options + +The `resources.PostCSS` method takes an optional map of options. + +config +: (`string`) The directory that contains the PostCSS configuration file. Default is the root of the project directory. + +noMap +: (`bool`) Default is `false`. If `true`, disables inline sourcemaps. + +inlineImports +: (`bool`) Default is `false`. Enable inlining of @import statements. It does so recursively, but will only import a file once. +URL imports (e.g. `@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');`) and imports with media queries will be ignored. +Note that this import routine does not care about the CSS spec, so you can have @import anywhere in the file. +Hugo will look for imports relative to the module mount and will respect theme overrides. + +skipInlineImportsNotFound {{< new-in "0.99.0" >}} +: (`bool`) Default is `false`. Before Hugo 0.99.0 when `inlineImports` was enabled and we failed to resolve an import, we logged it as a warning. We now fail the build. If you have regular CSS imports in your CSS that you want to preserve, you can either use imports with URL or media queries (Hugo does not try to resolve those) or set `skipInlineImportsNotFound` to true. + +{{< code file="layouts/partials/css.html" >}} +{{ $opts := dict "config" "config-directory" "noMap" true }} +{{ with resources.Get "css/main.css" | postCSS $opts }} + +{{ end }} +{{< /code >}} + +## No configuration file + +To avoid using a PostCSS configuration file, you can specify a minimal configuration using the options map. + +use +: (`string`) A space-delimited list of PostCSS plugins to use. + +parser +: (`string`) A custom PostCSS parser. + +stringifier +: (`string`) A custom PostCSS stringifier. + +syntax +: (`string`) Custom postcss syntax. + +{{< code file="layouts/partials/css.html" >}} +{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }} +{{ with resources.Get "css/main.css" | postCSS $opts }} + +{{ end }} +{{< /code >}} + +## Check Hugo environment + +The current Hugo environment name (set by `--environment` or in configuration or OS environment) is available in the Node context, which allows constructs like this: + +{{< code file="postcss.config.js" >}} +module.exports = { + plugins: [ + require('autoprefixer'), + ...process.env.HUGO_ENVIRONMENT === 'production' + ? [purgecss] + : [] + ] +} +{{< /code >}} diff --cc docs/content/en/hugo-pipes/postprocess.md index 3b7d5c610,000000000..4b3cb8ad4 mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/postprocess.md +++ b/docs/content/en/hugo-pipes/postprocess.md @@@ -1,102 -1,0 +1,102 @@@ +--- +title: PostProcess +description: Allows delaying of resource transformations to after the build. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 50 +weight: 50 - signature: ["resources.PostProcess RESOURCE"] ++signatures: ["resources.PostProcess RESOURCE"] +--- + +## Usage + +Marking a resource with `resources.PostProcess` delays any transformations to after the build, typically because one or more of the steps in the transformation chain depends on the result of the build (e.g. files in `public`). + +A prime use case for this is [CSS purging with PostCSS](#css-purging-with-postcss). + +There are currently two limitations to this: + +1. This only works in `*.html` templates (i.e. templates that produces HTML files). +2. You cannot manipulate the values returned from the resource's methods. E.g. the `upper` in this example will not work as expected: + + ```go-html-template + {{ $css := resources.Get "css/main.css" }} + {{ $css = $css | resources.PostCSS | minify | fingerprint | resources.PostProcess }} + {{ $css.RelPermalink | upper }} + ``` + +## CSS purging with PostCSS + +{{% note %}} +There are several ways to set up CSS purging with PostCSS in Hugo. If you have a simple project, you should consider going the simpler route and drop the use of `resources.PostProcess` and just extract keywords from the templates. See the [Tailwind documentation](https://tailwindcss.com/docs/controlling-file-size/#app) for some examples. +{{% /note %}} + +The below configuration will write a `hugo_stats.json` file to the project root as part of the build. If you're only using this for the production build, you should consider placing it below [config/production](/getting-started/configuration/#configuration-directory). + +{{< code-toggle file="hugo" >}} +[build.buildStats] + enable = true +{{< /code-toggle >}} + +See the [configure build] documentation for details and options. + +[configure build]: /getting-started/configuration/#configure-build + +`postcss.config.js` + +```js +const purgecss = require('@fullhuman/postcss-purgecss')({ + content: [ './hugo_stats.json' ], + defaultExtractor: (content) => { + let els = JSON.parse(content).htmlElements; + return els.tags.concat(els.classes, els.ids); + } +}); + +module.exports = { + plugins: [ + ...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : []) + ] + }; +``` + +Note that in the example above, the "CSS purge step" will only be applied to the production build. This means that you need to do something like this in your head template to build and include your CSS: + +```go-html-template +{{ $css := resources.Get "css/main.css" }} +{{ $css = $css | resources.PostCSS }} +{{ if hugo.IsProduction }} +{{ $css = $css | minify | fingerprint | resources.PostProcess }} +{{ end }} + +``` + + +## Hugo environment variables available in PostCSS + +These are the environment variables Hugo passes down to PostCSS (and Babel), which allows you do do `process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : []` and similar: + +PWD +: The absolute path to the project working directory. + +HUGO_ENVIRONMENT +: The value e.g. set with `hugo -e production` (defaults to `production` for `hugo` and `development` for `hugo server`). + +HUGO_PUBLISHDIR +: {{< new-in "0.109.0" >}} The absolute path to the publish directory (the `public` directory). Note that the value will always point to a directory on disk even when running `hugo server` in memory mode. If you write to this folder from PostCSS when running the server, you could run the server with one of these flags: + +```text +hugo server --renderToDisk +hugo server --renderStaticToDisk +``` + +Also, Hugo will add environment variables for all files mounted below `assets/_jsconfig`. A default mount will be set up with files in the project root matching this regexp: `(babel|postcss|tailwind)\.config\.js`. + +These will get environment variables named on the form `HUGO_FILE_:filename:` where `:filename:` is all upper case with periods replaced with underscore. This allows you to do this and similar: + +```js +let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js'; +``` diff --cc docs/content/en/hugo-pipes/resource-from-string.md index f3f0cda4f,000000000..fa472715c mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/resource-from-string.md +++ b/docs/content/en/hugo-pipes/resource-from-string.md @@@ -1,31 -1,0 +1,31 @@@ +--- +title: FromString +linkTitle: Resource from string +description: Creates a resource from a string. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 110 +weight: 110 - signature: ["resources.FromString TARGET_PATH CONTENT"] ++signatures: ["resources.FromString TARGET_PATH CONTENT"] +--- + +## Usage + +It is possible to create a resource directly from the template using `resources.FromString` which takes two arguments, the target path for the created resource and the given content string. + +The result is cached using the target path as the cache key. + +The following example creates a resource file containing localized variables for every project's languages. + +```go-html-template +{{ $string := (printf "var rootURL = '%s'; var apiURL = '%s';" (absURL "/") (.Param "API_URL")) }} +{{ $targetPath := "js/vars.js" }} +{{ $vars := $string | resources.FromString $targetPath }} +{{ $global := resources.Get "js/global.js" | resources.Minify }} + + + +``` diff --cc docs/content/en/hugo-pipes/resource-from-template.md index 4f34817c0,000000000..c1c4cb316 mode 100755,000000..100755 --- a/docs/content/en/hugo-pipes/resource-from-template.md +++ b/docs/content/en/hugo-pipes/resource-from-template.md @@@ -1,35 -1,0 +1,35 @@@ +--- +title: ExecuteAsTemplate +linkTitle: Resource from template +description: Creates a resource from a template +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 120 +weight: 120 - signature: ["resources.ExecuteAsTemplate TARGET_PATH CONTEXT RESOURCE"] ++signatures: ["resources.ExecuteAsTemplate TARGET_PATH CONTEXT RESOURCE"] +--- + +## Usage + +In order to use Hugo Pipes function on an asset file containing Go Template magic the function `resources.ExecuteAsTemplate` must be used. + +The function takes three arguments: the target path for the created resource, the template context, and the resource object. The target path is used to cache the result. + +```go-html-template +// assets/sass/template.scss +$backgroundColor: {{ .Param "backgroundColor" }}; +$textColor: {{ .Param "textColor" }}; +body{ + background-color:$backgroundColor; + color: $textColor; +} +// [...] +``` + +```go-html-template +{{ $sassTemplate := resources.Get "sass/template.scss" }} +{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }} +``` diff --cc docs/content/en/hugo-pipes/transpile-sass-to-css.md index bf3d136f1,000000000..b09cc165b mode 100644,000000..100644 --- a/docs/content/en/hugo-pipes/transpile-sass-to-css.md +++ b/docs/content/en/hugo-pipes/transpile-sass-to-css.md @@@ -1,210 -1,0 +1,210 @@@ +--- +title: ToCSS +linkTitle: Transpile Sass to CSS +description: Transpile Sass to CSS. +categories: [asset management] +keywords: [] +menu: + docs: + parent: hugo-pipes + weight: 30 +weight: 30 - signature: ["resources.ToCSS RESOURCE [OPTIONS]", "toCSS RESOURCE [OPTIONS]"] ++signatures: ["resources.ToCSS RESOURCE [OPTIONS]", "toCSS RESOURCE [OPTIONS]"] +toc: true +aliases: [/hugo-pipes/transform-to-css/] +--- + +## Usage + +Transpile Sass to CSS using the LibSass transpiler included in Hugo's extended edition, or [install Dart Sass](#dart-sass) to use the latest features of the Sass language. + +```go-html-template +{{ $options := dict "transpiler" "libsass" "targetPath" "css/style.css" }} +{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }} + +{{ end }} +``` + +Sass has two forms of syntax: [SCSS] and [indented]. Hugo supports both. + +[scss]: https://sass-lang.com/documentation/syntax#scss +[indented]: https://sass-lang.com/documentation/syntax#the-indented-syntax + + +## Options + +transpiler +: (`string`) The transpiler to use, either `libsass` (default) or `dartsass`. Hugo's extended edition includes the LibSass transpiler. To use the Dart Sass transpiler, see the [installation instructions](#dart-sass) below. + +targetPath +: (`string`) If not set, the transformed resource's target path will be the original path of the asset file with its extension replaced by `.css`. + +vars {{< new-in "0.109.0" >}} +: (`map`) A map of key/value pairs that will be available in the `hugo:vars` namespace. Useful for [initializing Sass variables from Hugo templates](https://discourse.gohugo.io/t/42053/). + +```scss +// LibSass +@import "hugo:vars"; + +// Dart Sass +@use "hugo:vars" as v; +``` + +outputStyle +: (`string`) Output styles available to LibSass include `nested` (default), `expanded`, `compact`, and `compressed`. Output styles available to Dart Sass include `expanded` (default) and `compressed`. + +precision +: (`int`) Precision of floating point math. Not applicable to Dart Sass. + +enableSourceMap +: (`bool`) If `true`, generates a source map. + +sourceMapIncludeSources {{< new-in "0.108.0" >}} +: (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass. + +includePaths +: (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements. + +```go-html-template +{{ $options := dict + "transpiler" "dartsass" + "targetPath" "css/style.css" + "vars" site.Params.styles + "enableSourceMap" (not hugo.IsProduction) + "includePaths" (slice "node_modules/bootstrap/scss") +}} +{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }} + +{{ end }} +``` + +## Dart Sass + +The extended version of Hugo includes [LibSass] to transpile Sass to CSS. In 2020, the Sass team deprecated LibSass in favor of [Dart Sass]. + +Use the latest features of the Sass language by installing Dart Sass in your development and production environments. + +### Installation overview + +Dart Sass is compatible with Hugo v0.114.0 and later. + +If you have been using Embedded Dart Sass[^1] with Hugo v0.113.0 and earlier, uninstall Embedded Dart Sass, then install Dart Sass. If you have installed both, Hugo will use Dart Sass. + +If you install Hugo as a [Snap package] there is no need to install Dart Sass. The Hugo Snap package includes Dart Sass. + +[^1]: In 2023, the Sass team deprecated Embedded Dart Sass in favor of Dart Sass. + +### Installing in a development environment + +When you install Dart Sass somewhere in your PATH, Hugo will find it. + +OS|Package manager|Site|Installation +:--|:--|:--|:-- +Linux|Homebrew|[brew.sh]|`brew install sass/sass/sass` +Linux|Snap|[snapcraft.io]|`sudo snap install dart-sass` +macOS|Homebrew|[brew.sh]|`brew install sass/sass/sass` +Windows|Chocolatey|[chocolatey.org]|`choco install sass` +Windows|Scoop|[scoop.sh]|`scoop install sass` + +You may also install [prebuilt binaries] for Linux, macOS, and Windows. + +Run `hugo env` to list the active transpilers. + +### Installing in a production environment + +For [CI/CD] deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries. + +[^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your resources directory to your repository. + +#### GitHub Pages + +To install Dart Sass for your builds on GitHub Pages, add this step to the GitHub Pages workflow file: + +```yaml +- name: Install Dart Sass + run: sudo snap install dart-sass +``` + +If you are using GitHub Pages for the first time with your repository, GitHub provides a [starter workflow] for Hugo that includes Dart Sass. This is the simplest way to get started. + +#### GitLab Pages + +To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file should look something like this: + +```yaml +variables: + HUGO_VERSION: 0.115.1 + DART_SASS_VERSION: 1.63.6 + GIT_DEPTH: 0 + GIT_STRATEGY: clone + GIT_SUBMODULE_STRATEGY: recursive + TZ: America/Los_Angeles +image: + name: golang:1.20-buster +pages: + script: + # Install Dart Sass + - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz + - tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz + - cp -r dart-sass/* /usr/local/bin + - rm -rf dart-sass* + # Install Hugo + - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb + - apt install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb + - rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb + # Build + - hugo --gc --minify + artifacts: + paths: + - public + rules: + - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH +``` + +#### Netlify + +To install Dart Sass for your builds on Netlify, the `netlify.toml` file should look something like this: + +```toml +[build.environment] +HUGO_VERSION = "0.115.1" +DART_SASS_VERSION = "1.63.6" +TZ = "America/Los_Angeles" + +[build] +publish = "public" +command = """\ + curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + export PATH=/opt/build/repo/dart-sass:$PATH && \ + hugo --gc --minify \ + """ +``` + +### Example + +To transpile with Dart Sass, set `transpiler` to `dartsass` in the options map passed to `resources.ToCSS`. For example: + +```go-html-template +{{ $options := dict "transpiler" "dartsass" "targetPath" "css/style.css" }} +{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }} + +{{ end }} +``` + +### Miscellaneous + +If you build Hugo from source and run `mage test -v`, the test will fail if you install Dart Sass as a Snap package. This is due to the Snap package's strict confinement model. + +[brew.sh]: https://brew.sh/ +[chocolatey.org]: https://community.chocolatey.org/packages/sass +[ci/cd]: https://en.wikipedia.org/wiki/CI/CD +[dart sass]: https://sass-lang.com/dart-sass +[libsass]: https://sass-lang.com/libsass +[prebuilt binaries]: https://github.com/sass/dart-sass/releases/latest +[scoop.sh]: https://scoop.sh/#/apps?q=sass +[site configuration]: /getting-started/configuration/#configure-build +[snap package]: /installation/linux/#snap +[snapcraft.io]: https://snapcraft.io/dart-sass +[starter workflow]: https://github.com/actions/starter-workflows/blob/main/pages/hugo.yml diff --cc docs/content/en/installation/_common/01-editions.md index 000000000,000000000..cbc338665 new file mode 100644 --- /dev/null +++ b/docs/content/en/installation/_common/01-editions.md @@@ -1,0 -1,0 +1,12 @@@ ++## Editions ++ ++Hugo is available in two editions: standard and extended. With the extended edition you can: ++ ++- Encode to the WebP format when [processing images]. You can decode WebP images with either edition. ++- [Transpile Sass to CSS] using the embedded LibSass transpiler. The extended edition is not required to use the [Dart Sass] transpiler. ++ ++We recommend that you install the extended edition. ++ ++[dart sass]: /hugo-pipes/transpile-sass-to-css/#dart-sass ++[processing images]: /content-management/image-processing/ ++[transpile sass to css]: /hugo-pipes/transpile-sass-to-css/ diff --cc docs/content/en/installation/_common/02-prerequisites.md index 000000000,000000000..423950113 new file mode 100644 --- /dev/null +++ b/docs/content/en/installation/_common/02-prerequisites.md @@@ -1,0 -1,0 +1,36 @@@ ++## Prerequisites ++ ++Although not required in all cases, [Git], [Go], and [Dart Sass] are commonly used when working with Hugo. ++ ++Git is required to: ++ ++- Build Hugo from source ++- Use the [Hugo Modules] feature ++- Install a theme as a Git submodule ++- Access [commit information] from a local Git repository ++- Host your site with services such as [CloudCannon], [Cloudflare Pages], [GitHub Pages], [GitLab Pages], and [Netlify] ++ ++Go is required to: ++ ++- Build Hugo from source ++- Use the Hugo Modules feature ++ ++Dart Sass is required to transpile Sass to CSS when using the latest features of the Sass language. ++ ++Please refer to the relevant documentation for installation instructions: ++ ++- [Git][git install] ++- [Go][go install] ++- [Dart Sass][dart sass install] ++ ++[cloudcannon]: https://cloudcannon.com/ ++[cloudflare pages]: https://pages.cloudflare.com/ ++[dart sass install]: /hugo-pipes/transpile-sass-to-css/#dart-sass ++[dart sass]: https://sass-lang.com/dart-sass ++[git install]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git ++[git]: https://git-scm.com/ ++[github pages]: https://pages.github.com/ ++[gitlab pages]: https://docs.gitlab.com/ee/user/project/pages/ ++[go install]: https://go.dev/doc/install ++[go]: https://go.dev/ ++[netlify]: https://www.netlify.com/ diff --cc docs/content/en/installation/_common/03-prebuilt-binaries.md index 000000000,000000000..884869e1e new file mode 100644 --- /dev/null +++ b/docs/content/en/installation/_common/03-prebuilt-binaries.md @@@ -1,0 -1,0 +1,21 @@@ ++## Prebuilt binaries ++ ++Prebuilt binaries are available for a variety of operating systems and architectures. Visit the [latest release] page, and scroll down to the Assets section. ++ ++ ++1. Download the archive for the desired [edition], operating system, and architecture ++1. Extract the archive ++1. Move the executable to the desired directory ++1. Add this directory to the PATH environment variable ++1. Verify that you have _execute_ permission on the file ++ ++Please consult your operating system documentation if you need help setting file permissions or modifying your PATH environment variable. ++ ++If you do not see a prebuilt binary for the desired edition, operating system, and architecture, install Hugo using one of the methods described below. ++ ++[commit information]: /variables/git ++[edition]: #editions ++[Git]: https://git-scm.com/ ++[Go]: https://go.dev/ ++[Hugo Modules]: /hugo-modules/ ++[latest release]: https://github.com/gohugoio/hugo/releases/latest diff --cc docs/content/en/installation/_common/04-build-from-source.md index 000000000,000000000..7537882fd new file mode 100644 --- /dev/null +++ b/docs/content/en/installation/_common/04-build-from-source.md @@@ -1,0 -1,0 +1,23 @@@ ++## Build from source ++ ++To build the extended edition of Hugo from source you must: ++ ++1. Install [Git] ++1. Install [Go] version 1.19 or later ++1. Install a C compiler, either [GCC] or [Clang] ++1. Update your `PATH` environment variable as described in the [Go documentation] ++ ++> The install directory is controlled by the `GOPATH` and `GOBIN` environment variables. If `GOBIN` is set, binaries are installed to that directory. If `GOPATH` is set, binaries are installed to the bin subdirectory of the first directory in the `GOPATH` list. Otherwise, binaries are installed to the bin subdirectory of the default `GOPATH` (`$HOME/go` or `%USERPROFILE%\go`). ++ ++Then build and test: ++ ++```sh ++CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest ++hugo version ++``` ++ ++[Clang]: https://clang.llvm.org/ ++[GCC]: https://gcc.gnu.org/ ++[Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git ++[Go documentation]: https://go.dev/doc/code#Command ++[Go]: https://go.dev/doc/install diff --cc docs/content/en/installation/_common/homebrew.md index 000000000,000000000..7178a9f4f new file mode 100644 --- /dev/null +++ b/docs/content/en/installation/_common/homebrew.md @@@ -1,0 -1,0 +1,9 @@@ ++### Homebrew ++ ++[Homebrew] is a free and open source package manager for macOS and Linux. This will install the extended edition of Hugo: ++ ++```sh ++brew install hugo ++``` ++ ++[Homebrew]: https://brew.sh/ diff --cc docs/content/en/installation/_common/index.md index 000000000,000000000..cbb7365a6 new file mode 100644 --- /dev/null +++ b/docs/content/en/installation/_common/index.md @@@ -1,0 -1,0 +1,3 @@@ +++++ ++headless = true +++++ diff --cc docs/content/en/installation/bsd.md index 5fbc4bfad,000000000..999e52ad6 mode 100644,000000..100644 --- a/docs/content/en/installation/bsd.md +++ b/docs/content/en/installation/bsd.md @@@ -1,74 -1,0 +1,74 @@@ +--- +title: BSD +description: Install Hugo on BSD derivatives. +categories: [installation] +menu: + docs: + parent: installation + weight: 50 +toc: true +weight: 50 +--- - {{% readfile file="/installation/common/01-editions.md" %}} ++{{% readfile file="/installation/_common/01-editions.md" %}} + - {{% readfile file="/installation/common/02-prerequisites.md" %}} ++{{% readfile file="/installation/_common/02-prerequisites.md" %}} + - {{% readfile file="/installation/common/03-prebuilt-binaries.md" %}} ++{{% readfile file="/installation/_common/03-prebuilt-binaries.md" %}} + +## Repository packages + +Most BSD derivatives maintain a repository for commonly installed applications. Please note that these repositories may not contain the [latest release]. + +[latest release]: https://github.com/gohugoio/hugo/releases/latest + +### DragonFly BSD + +[DragonFly BSD] includes Hugo in its package repository. This will install the extended edition of Hugo: + +```sh +sudo pkg install gohugo +``` + +[DragonFly BSD]: https://www.dragonflybsd.org/ + +### FreeBSD + +[FreeBSD] includes Hugo in its package repository. This will install the extended edition of Hugo: + +```sh +sudo pkg install gohugo +``` + +[FreeBSD]: https://www.freebsd.org/ + +### NetBSD + +[NetBSD] includes Hugo in its package repository. This will install the extended edition of Hugo: + +```sh +sudo pkgin install go-hugo +``` + +[NetBSD]: https://www.netbsd.org/ + +### OpenBSD + +[OpenBSD] includes Hugo in its package repository. This will prompt you to select which edition of Hugo to install: + +```sh +doas pkg_add hugo +``` + +[OpenBSD]: https://www.openbsd.org/ + - {{% readfile file="/installation/common/05-build-from-source.md" %}} ++{{% readfile file="/installation/_common/04-build-from-source.md" %}} + +## Comparison + +||Prebuilt binaries|Repository packages|Build from source +:--|:--:|:--:|:--: +Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: +Easy to upgrade?|:heavy_check_mark:|varies|:heavy_check_mark: +Easy to downgrade?|:heavy_check_mark:|varies|:heavy_check_mark: +Automatic updates?|:x:|varies|:x: +Latest version available?|:heavy_check_mark:|varies|:heavy_check_mark: diff --cc docs/content/en/installation/linux.md index 4056b987a,000000000..2dbbd3720 mode 100644,000000..100644 --- a/docs/content/en/installation/linux.md +++ b/docs/content/en/installation/linux.md @@@ -1,143 -1,0 +1,140 @@@ +--- +title: Linux +description: Install Hugo on Linux. +categories: [installation] +menu: + docs: + parent: installation + weight: 30 +toc: true +weight: 30 +--- - {{% readfile file="/installation/common/01-editions.md" %}} ++{{% readfile file="/installation/_common/01-editions.md" %}} + - {{% readfile file="/installation/common/02-prerequisites.md" %}} ++{{% readfile file="/installation/_common/02-prerequisites.md" %}} + - {{% readfile file="/installation/common/03-prebuilt-binaries.md" %}} ++{{% readfile file="/installation/_common/03-prebuilt-binaries.md" %}} + +## Package managers + +### Snap + +[Snap] is a free and open source package manager for Linux. Available for [most distributions], snap packages are simple to install and are automatically updated. + +The Hugo snap package is [strictly confined]. Strictly confined snaps run in complete isolation, up to a minimal access level that’s deemed always safe. The sites you create and build must be located within your home directory, or on removable media. + +This will install the extended edition of Hugo: + +```sh +sudo snap install hugo +``` + +To enable or revoke access to removable media: + +```sh +sudo snap connect hugo:removable-media +sudo snap disconnect hugo:removable-media +``` + +To enable or revoke access to SSH keys: + +```sh +sudo snap connect hugo:ssh-keys +sudo snap disconnect hugo:ssh-keys +``` + +[most distributions]: https://snapcraft.io/docs/installing-snapd +[strictly confined]: https://snapcraft.io/docs/snap-confinement +[Snap]: https://snapcraft.io/ + - {{% readfile file="/installation/common/homebrew.md" %}} ++{{% readfile file="/installation/_common/homebrew.md" %}} + +## Repository packages + +Most Linux distributions maintain a repository for commonly installed applications. Please note that these repositories may not contain the [latest release]. + +[latest release]: https://github.com/gohugoio/hugo/releases/latest + +### Arch Linux + +Derivatives of the [Arch Linux] distribution of Linux include [EndeavourOS], [Garuda Linux], [Manjaro], and others. This will install the extended edition of Hugo: + +```sh +sudo pacman -S hugo +``` + +[Arch Linux]: https://archlinux.org/ +[EndeavourOS]: https://endeavouros.com/ +[Manjaro]: https://manjaro.org/ +[Garuda Linux]: https://garudalinux.org/ + +### Debian + +Derivatives of the [Debian] distribution of Linux include [elementary OS], [KDE neon], [Linux Lite], [Linux Mint], [MX Linux], [Pop!_OS], [Ubuntu], [Zorin OS], and others. This will install the extended edition of Hugo: + +```sh +sudo apt install hugo +``` + +You can also download Debian packages from the [latest release] page. + +[Debian]: https://www.debian.org/ +[elementary OS]: https://elementary.io/ +[KDE neon]: https://neon.kde.org/ +[Linux Lite]: https://www.linuxliteos.com/ +[Linux Mint]: https://linuxmint.com/ +[MX Linux]: https://mxlinux.org/ +[Pop!_OS]: https://pop.system76.com/ +[Ubuntu]: https://ubuntu.com/ +[Zorin OS]: https://zorin.com/os/ + +### Fedora + +Derivatives of the [Fedora] distribution of Linux include [CentOS], [Red Hat Enterprise Linux], and others. This will install the extended edition of Hugo: + + +```sh +sudo dnf install hugo +``` + +[CentOS]: https://www.centos.org/ +[Fedora]: https://getfedora.org/ +[Red Hat Enterprise Linux]: https://www.redhat.com/ + +### openSUSE + +Derivatives of the [openSUSE] distribution of Linux include [GeckoLinux], [Linux Karmada], and others. This will install the extended edition of Hugo: + + +```sh +sudo zypper install hugo +``` + +[GeckoLinux]: https://geckolinux.github.io/ +[Linux Karmada]: https://linuxkamarada.com/ +[openSUSE]: https://www.opensuse.org/ + +### Solus + +The [Solus] distribution of Linux includes Hugo in its package repository. This will install the _standard_ edition of Hugo: + +```sh +sudo eopkg install hugo +``` + +[Solus]: https://getsol.us/ + - {{% readfile file="/installation/common/04-docker.md" %}} - - {{% readfile file="/installation/common/05-build-from-source.md" %}} ++{{% readfile file="/installation/_common/04-build-from-source.md" %}} + +## Comparison + - ||Prebuilt binaries|Package managers|Repository packages|Docker|Build from source - :--|:--:|:--:|:--:|:--:|:--: - Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: - Easy to upgrade?|:heavy_check_mark:|:heavy_check_mark:|varies|:heavy_check_mark:|:heavy_check_mark: - Easy to downgrade?|:heavy_check_mark:|:heavy_check_mark: [^1]|varies|:heavy_check_mark:|:heavy_check_mark: - Automatic updates?|:x:|varies [^2]|:x:|:x: [^3]|:x: - Latest version available?|:heavy_check_mark:|:heavy_check_mark:|varies|:heavy_check_mark:|:heavy_check_mark: ++||Prebuilt binaries|Package managers|Repository packages|Build from source ++:--|:--:|:--:|:--:|:--: ++Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: ++Easy to upgrade?|:heavy_check_mark:|:heavy_check_mark:|varies|:heavy_check_mark: ++Easy to downgrade?|:heavy_check_mark:|:heavy_check_mark: [^1]|varies|:heavy_check_mark: ++Automatic updates?|:x:|varies [^2]|:x:|:x: ++Latest version available?|:heavy_check_mark:|:heavy_check_mark:|varies|:heavy_check_mark: + +[^1]: Easy if a previous version is still installed. +[^2]: Snap packages are automatically updated. Homebrew requires advanced configuration. - [^3]: Possible but requires advanced configuration. diff --cc docs/content/en/installation/macos.md index 9d10642de,000000000..ccae90b36 mode 100644,000000..100644 --- a/docs/content/en/installation/macos.md +++ b/docs/content/en/installation/macos.md @@@ -1,47 -1,0 +1,45 @@@ +--- +title: macOS +description: Install Hugo on macOS. +categories: [installation] +menu: + docs: + parent: installation + weight: 20 +toc: true +weight: 20 +--- - {{% readfile file="/installation/common/01-editions.md" %}} ++{{% readfile file="/installation/_common/01-editions.md" %}} + - {{% readfile file="/installation/common/02-prerequisites.md" %}} ++{{% readfile file="/installation/_common/02-prerequisites.md" %}} + - {{% readfile file="/installation/common/03-prebuilt-binaries.md" %}} ++{{% readfile file="/installation/_common/03-prebuilt-binaries.md" %}} + +## Package managers + - {{% readfile file="/installation/common/homebrew.md" %}} ++{{% readfile file="/installation/_common/homebrew.md" %}} + +### MacPorts + +[MacPorts] is a free and open source package manager for macOS. This will install the extended edition of Hugo: + +```sh +sudo port install hugo +``` + +[MacPorts]: https://www.macports.org/ + - {{% readfile file="/installation/common/04-docker.md" %}} - - {{% readfile file="/installation/common/05-build-from-source.md" %}} ++{{% readfile file="/installation/_common/04-build-from-source.md" %}} + +## Comparison + - ||Prebuilt binaries|Package managers|Docker|Build from source - :--|:--:|:--:|:--:|:--:|:--: - Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:| - Easy to upgrade?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: - Easy to downgrade?|:heavy_check_mark:|:heavy_check_mark: [^1]|:heavy_check_mark:|:heavy_check_mark: - Automatic updates?|:x:|:x: [^2]|:x: [^2]|:x: - Latest version available?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: ++||Prebuilt binaries|Package managers|Build from source ++:--|:--:|:--:|:--: ++Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:| ++Easy to upgrade?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: ++Easy to downgrade?|:heavy_check_mark:|:heavy_check_mark: [^1]|:heavy_check_mark: ++Automatic updates?|:x:|:x: [^2]|:x: ++Latest version available?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: + +[^1]: Easy if a previous version is still installed. +[^2]: Possible but requires advanced configuration. diff --cc docs/content/en/installation/windows.md index 92979d9f2,000000000..48c5f7006 mode 100644,000000..100644 --- a/docs/content/en/installation/windows.md +++ b/docs/content/en/installation/windows.md @@@ -1,69 -1,0 +1,67 @@@ +--- +title: Windows +description: Install Hugo on Windows. +categories: [installation] +menu: + docs: + parent: installation + weight: 40 +toc: true +weight: 40 +--- - {{% readfile file="/installation/common/01-editions.md" %}} ++{{% readfile file="/installation/_common/01-editions.md" %}} + - {{% readfile file="/installation/common/02-prerequisites.md" %}} ++{{% readfile file="/installation/_common/02-prerequisites.md" %}} + - {{% readfile file="/installation/common/03-prebuilt-binaries.md" %}} ++{{% readfile file="/installation/_common/03-prebuilt-binaries.md" %}} + +## Package managers + +### Chocolatey + +[Chocolatey] is a free and open source package manager for Windows. This will install the extended edition of Hugo: + +```sh +choco install hugo-extended +``` + +[Chocolatey]: https://chocolatey.org/ + +### Scoop + +[Scoop] is a free and open source package manager for Windows. This will install the extended edition of Hugo: + +```sh +scoop install hugo-extended +``` + +[Scoop]: https://scoop.sh/ + +### Winget + +[Winget] is Microsoft's official free and open source package manager for Windows. This will install the extended edition of Hugo: + +```sh +winget install Hugo.Hugo.Extended +``` + +[Winget]: https://learn.microsoft.com/en-us/windows/package-manager/ + - {{% readfile file="/installation/common/04-docker.md" %}} - - {{% readfile file="/installation/common/05-build-from-source.md" %}} ++{{% readfile file="/installation/_common/04-build-from-source.md" %}} + +{{% note %}} +See these [detailed instructions](https://discourse.gohugo.io/t/41370) to install GCC on Windows. +{{% /note %}} + +## Comparison + - ||Prebuilt binaries|Package managers|Docker|Build from source - :--|:--:|:--:|:--:|:--:|:--: - Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:| - Easy to upgrade?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: - Easy to downgrade?|:heavy_check_mark:|:heavy_check_mark: [^2]|:heavy_check_mark:|:heavy_check_mark: - Automatic updates?|:x:|:x: [^1]|:x: [^1]|:x: - Latest version available?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: ++||Prebuilt binaries|Package managers|Build from source ++:--|:--:|:--:|:--: ++Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:| ++Easy to upgrade?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: ++Easy to downgrade?|:heavy_check_mark:|:heavy_check_mark: [^2]|:heavy_check_mark: ++Automatic updates?|:x:|:x: [^1]|:x: ++Latest version available?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark: + +[^1]: Possible but requires advanced configuration. +[^2]: Easy if a previous version is still installed. diff --cc docs/content/en/showcase/overmindstudios/bio.md index 000000000,000000000..1bd870984 new file mode 100644 --- /dev/null +++ b/docs/content/en/showcase/overmindstudios/bio.md @@@ -1,0 -1,0 +1,7 @@@ ++ ++**Overmind Studios** is a visual effects studio headquartered in Southern Germany. ++ ++The site is built by: ++ ++* [Tobias Kummer](https://www.overmind-studios.de/about/) ++ diff --cc docs/content/en/showcase/overmindstudios/featured.png index 000000000,000000000..c3eaaaf4c new file mode 100644 Binary files differ diff --cc docs/content/en/showcase/overmindstudios/index.md index 000000000,000000000..3208b2b72 new file mode 100644 --- /dev/null +++ b/docs/content/en/showcase/overmindstudios/index.md @@@ -1,0 -1,0 +1,13 @@@ ++--- ++title: Overmind Studios ++description: "A fresh start to make things easier in the future." ++siteURL: https://www.overmind-studios.de/ ++byline: "[tobkum](https://github.com/tobkum), Co-Founder Overmind Studios" ++--- ++After many years of running our site on WordPress, we decided to switch to Hugo. ++ ++WordPress is a great CMS for many people, but it has some downsides, especially for those who need a fast, secure, and customizable site. Plugins can become outdated, customization can be difficult, and bloat can slow down page loading times. ++ ++Hugo is a static site generator that addresses many of these problems. It is fast to build and iterate, does not require PHP, is highly customizable, and is easy to learn and use. It is also secure, as it does not have a backend or MySQL database that can be hacked. ++ ++We are very happy with our switch to Hugo. It is easy to update our site with new projects, and our Lighthouse score and loading times are both excellent. We now have more time to be creative instead of troubleshooting WordPress quirks and updates. diff --cc docs/content/en/templates/data-templates.md index 0aadbb9ae,000000000..cf835af44 mode 100644,000000..100644 --- a/docs/content/en/templates/data-templates.md +++ b/docs/content/en/templates/data-templates.md @@@ -1,268 -1,0 +1,267 @@@ +--- +title: Data templates +description: In addition to Hugo's built-in variables, you can specify your own custom data in templates or shortcodes that pull from both local and dynamic sources. +categories: [templates] +keywords: [data,dynamic,csv,json,toml,yaml,xml] +menu: + docs: + parent: templates + weight: 150 +weight: 150 +aliases: [/extras/datafiles/,/extras/datadrivencontent/,/doc/datafiles/] +toc: true +--- + + + +Hugo supports loading data from YAML, JSON, XML, and TOML files located in the `data` directory at the root of your Hugo project. + +{{< youtube FyPgSuwIMWQ >}} + +## The data folder + - The `data` folder should store additional data for Hugo to use when generating your site. ++The `data` folder should store additional data for Hugo to use when generating your site. + +Data files are not for generating standalone pages. They should supplement content files by: + +- extending the content when the front matter fields grow out of control, or +- showing a larger dataset in a template (see the example below). + +In both cases, it's a good idea to outsource the data in their (own) files. + +These files must be YAML, JSON, XML, or TOML files (using the `.yml`, `.yaml`, `.json`, `.xml`, or `.toml` extension). The data will be accessible as a `map` in the `.Site.Data` variable. + +To access the data using the `site.Data.filename` notation, the file name must begin with an underscore or a Unicode letter, followed by zero or more underscores, Unicode letters, or Unicode digits. For example: + +- `123.json` - Invalid +- `x123.json` - Valid +- `_123.json` - Valid + - To access the data using the [`index`](/functions/index-function/) function, the file name is irrelevant. For example: ++To access the data using the [`index`](/functions/collections/indexfunction) function, the file name is irrelevant. For example: + +Data file|Template code +:--|:-- +`123.json`|`{{ index .Site.Data "123" }}` +`x123.json`|`{{ index .Site.Data "x123" }}` +`_123.json`|`{{ index .Site.Data "_123" }}` +`x-123.json`|`{{ index .Site.Data "x-123" }}` + +## Data files in themes + +Data Files can also be used in themes. + +However, note that the theme data files are merged with the project directory taking precedence. That is, Given two files with the same name and relative path, the data in the file in the root project `data` directory will override the data from the file in the `themes//data` directory *for keys that are duplicated*). + +Therefore, theme authors should be careful not to include data files that could be easily overwritten by a user who decides to [customize a theme][customize]. For theme-specific data items that shouldn't be overridden, it can be wise to prefix the folder structure with a namespace; e.g. `mytheme/data//somekey/...`. To check if any such duplicate exists, run hugo with the `-v` flag. + +The keys in the map created with data templates from data files will be a dot-chained set of `path`, `filename`, and `key` in the file (if applicable). + +This is best explained with an example: + +## Example: Jaco Pastorius' Solo Discography + +[Jaco Pastorius](https://en.wikipedia.org/wiki/Jaco_Pastorius_discography) was a great bass player, but his solo discography is short enough to use as an example. [John Patitucci](https://en.wikipedia.org/wiki/John_Patitucci) is another bass giant. + +The example below is a bit contrived, but it illustrates the flexibility of data Files. This example uses TOML as its file format with the two following data files: + +* `data/jazz/bass/jacopastorius.toml` +* `data/jazz/bass/johnpatitucci.toml` + +`jacopastorius.toml` contains the content below. `johnpatitucci.toml` contains a similar list: + +{{< code-toggle file="jacopastorius" >}} +discography = [ +"1974 - Modern American Music … Period! The Criteria Sessions", +"1974 - Jaco", +"1976 - Jaco Pastorius", +"1981 - Word of Mouth", +"1981 - The Birthday Concert (released in 1995)", +"1982 - Twins I & II (released in 1999)", +"1983 - Invitation", +"1986 - Broadway Blues (released in 1998)", +"1986 - Honestly Solo Live (released in 1990)", +"1986 - Live In Italy (released in 1991)", +"1986 - Heavy'n Jazz (released in 1992)", +"1991 - Live In New York City, Volumes 1-7.", +"1999 - Rare Collection (compilation)", +"2003 - Punk Jazz: The Jaco Pastorius Anthology (compilation)", +"2007 - The Essential Jaco Pastorius (compilation)" +] +{{< /code-toggle >}} + +The list of bass players can be accessed via `.Site.Data.jazz.bass`, a single bass player by adding the file name without the suffix, e.g. `.Site.Data.jazz.bass.jacopastorius`. + +You can now render the list of recordings for all the bass players in a template: + +```go-html-template +{{ range $.Site.Data.jazz.bass }} + {{ partial "artist.html" . }} +{{ end }} +``` + +And then in the `partials/artist.html`: + +```go-html-template +
    +{{ range .discography }} +
  • {{ . }}
  • +{{ end }} +
+``` + +Discover a new favorite bass player? Just add another `.toml` file in the same directory. + +## Example: accessing named values in a data file + +Assume you have the following data structure in your `User0123.[yml|toml|xml|json]` data file located directly in `data/`: + +{{< code-toggle file="User0123" >}} +Name: User0123 +"Short Description": "He is a **jolly good** fellow." +Achievements: + - "Can create a Key, Value list from Data File" + - "Learns Hugo" + - "Reads documentation" +{{}} + +You can use the following code to render the `Short Description` in your layout: + +```go-html-template +
Short Description of {{ .Site.Data.User0123.Name }}:

{{ index .Site.Data.User0123 "Short Description" | markdownify }}

+``` + - Note the use of the [`markdownify` template function][markdownify]. This will send the description through the Markdown rendering engine. - ++Note the use of the [`markdownify`] function. This will send the description through the Markdown rendering engine. + +## Get remote data + +Use `getJSON` or `getCSV` to get remote data: + +```go-html-template +{{ $dataJ := getJSON "url" }} +{{ $dataC := getCSV "separator" "url" }} +``` + +If you use a prefix or postfix for the URL, the functions accept [variadic arguments][variadic]: + +```go-html-template +{{ $dataJ := getJSON "url prefix" "arg1" "arg2" "arg n" }} +{{ $dataC := getCSV "separator" "url prefix" "arg1" "arg2" "arg n" }} +``` + +The separator for `getCSV` must be put in the first position and can only be one character long. + +All passed arguments will be joined to the final URL: + +```go-html-template +{{ $urlPre := "https://api.github.com" }} +{{ $gistJ := getJSON $urlPre "/users/GITHUB_USERNAME/gists" }} +``` + +This will resolve internally to the following: + +```go-html-template +{{ $gistJ := getJSON "https://api.github.com/users/GITHUB_USERNAME/gists" }} +``` + +### Add HTTP headers + +Both `getJSON` and `getCSV` takes an optional map as the last argument, e.g.: + +```go-html-template +{{ $data := getJSON "https://example.org/api" (dict "Authorization" "Bearer abcd") }} +``` + +If you need multiple values for the same header key, use a slice: + +```go-html-template +{{ $data := getJSON "https://example.org/api" (dict "X-List" (slice "a" "b" "c")) }} +``` + +### Example for CSV files + +For `getCSV`, the one-character-long separator must be placed in the first position followed by the URL. The following is an example of creating an HTML table in a [partial template][partials] from a published CSV: + +{{< code file="layouts/partials/get-csv.html" >}} + + + + + + + + + + {{ $url := "https://example.com/finance/employee-salaries.csv" }} + {{ $sep := "," }} + {{ range $i, $r := getCSV $sep $url }} + + + + + + {{ end }} + +
NamePositionSalary
{{ index $r 0 }}{{ index $r 1 }}{{ index $r 2 }}
+{{< /code >}} + +The expression `{{ index $r number }}` must be used to output the nth-column from the current row. + +### Cache URLs + +Each downloaded URL will be cached in the default folder `$TMPDIR/hugo_cache_$USER/`. The variable `$TMPDIR` will be resolved to your system-dependent temporary directory. + +With the command-line flag `--cacheDir`, you can specify any folder on your system as a caching directory. + +You can also set `cacheDir` in the [main configuration file][config]. + +If you don't like caching at all, you can fully disable caching with the command-line flag `--ignoreCache`. + +### Authentication when using REST URLs + +Currently, you can only use those authentication methods that can be put into an URL. [OAuth] and other authentication methods are not implemented. + +## Load local files + +To load local files with `getJSON` and `getCSV`, the source files must reside within Hugo's working directory. The file extension does not matter, but the content does. + +It applies the same output logic as above in [Get Remote Data](#get-remote-data). + +{{% note %}} +The local CSV files to be loaded using `getCSV` must be located **outside** the `data` directory. +{{% /note %}} + +## LiveReload with data files + +There is no chance to trigger a [LiveReload] when the content of a URL changes. However, when a *local* file changes (i.e., `data/*` and `themes//data/*`), a LiveReload will be triggered. Symlinks are not supported. Note too that because downloading data takes a while, Hugo stops processing your Markdown files until the data download has been completed. + +{{% warning "URL Data and LiveReload" %}} +If you change any local file and the LiveReload is triggered, Hugo will read the data-driven (URL) content from the cache. If you have disabled the cache (i.e., by running the server with `hugo server --ignoreCache`), Hugo will re-download the content every time LiveReload triggers. This can create *huge* traffic. You may reach API limits quickly. +{{% /note %}} + +## Examples of data-driven content + +- Photo gallery JSON powered: [https://github.com/pcdummy/hugo-lightslider-example](https://github.com/pcdummy/hugo-lightslider-example) +- GitHub Starred Repositories [in a post](https://github.com/SchumacherFM/blog-cs/blob/master/content%2Fposts%2Fgithub-starred.md) using data-driven content in a [custom short code](https://github.com/SchumacherFM/blog-cs/blob/master/layouts%2Fshortcodes%2FghStarred.html). + +## Specs for data formats + +* [TOML Spec][toml] +* [YAML Spec][yaml] +* [JSON Spec][json] +* [CSV Spec][csv] +* [XML Spec][xml] + +[config]: /getting-started/configuration/ +[csv]: https://tools.ietf.org/html/rfc4180 +[customize]: /hugo-modules/theme-components/ - [json]: https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf "Specification for JSON, JavaScript Object Notation" ++[json]: https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf +[LiveReload]: /getting-started/usage/#livereload +[lookup]: /templates/lookup-order/ - [markdownify]: /functions/markdownify/ ++[`markdownify`]: /functions/transform/markdownify +[OAuth]: https://en.wikipedia.org/wiki/OAuth +[partials]: /templates/partials/ +[toml]: https://toml.io/en/latest +[variadic]: https://en.wikipedia.org/wiki/Variadic_function +[vars]: /variables/ +[yaml]: https://yaml.org/spec/ +[xml]: https://www.w3.org/XML/ diff --cc docs/content/en/templates/files.md index 7b058d531,000000000..2e82688c0 mode 100644,000000..100644 --- a/docs/content/en/templates/files.md +++ b/docs/content/en/templates/files.md @@@ -1,57 -1,0 +1,56 @@@ +--- +title: Local file templates +description: Hugo's `readDir` and `readFile` functions make it easy to traverse your project's directory structure and write file contents to your templates. +categories: [templates] +keywords: [files,directories] +menu: + docs: + parent: templates + weight: 180 +weight: 180 +aliases: [/extras/localfiles/,/templates/local-files/] +toc: true +--- + +## Traverse local files + - With Hugo's [`readDir`][readDir] and [`readFile`][readFile] template functions, you can traverse your website's files on your server. ++With Hugo's [`readDir`] and [`readFile`] template functions, you can traverse your website's files on your server. + +## Use `readDir` + - The [`readDir` function][readDir] returns an array of [`os.FileInfo`][osfileinfo]. It takes the file's `path` as a single string argument. This path can be to any directory of your website (i.e., as found on your server's file system). ++The [`readDir`] function returns an array of [`os.FileInfo`] structures. It takes the file's `path` as a single string argument. This path can be to any directory of your website (i.e., as found on your server's file system). + +Whether the path is absolute or relative does not matter because---at least for `readDir`---the root of your website (typically `./public/`) in effect becomes both: + +1. The file system root +2. The current working directory + +## Use `readFile` + - The [`readfile` function][readFile] reads a file from disk and converts it into a string to be manipulated by other Hugo functions or added as-is. `readFile` takes the file, including path, as an argument passed to the function. ++The [`readfile`] function reads a file from disk and converts it into a string to be manipulated by other Hugo functions or added as-is. `readFile` takes the file, including path, as an argument passed to the function. + +To use the `readFile` function in your templates, make sure the path is relative to your *Hugo project's root directory*: + +```go-html-template +{{ readFile "/content/templates/local-file-templates" }} +``` + +### `readFile` Example: Add a Project File to Content + +As `readFile` is a function, it is only available to you in your templates and not your content. However, we can create a simple [shortcode template][sct] that calls `readFile`, passes the first argument through the function, and then allows an optional second argument to send the file through the Markdown processor. The pattern for adding this shortcode to your content will be as follows: + +```go-html-template +{{}} +``` + +{{% note %}} +If you are going to create [custom shortcodes](/templates/shortcode-templates/) with `readFile` for a theme, note that usage of the shortcode will refer to the project root and *not* your `themes` directory. +{{% /note %}} + +[called directly in the Hugo docs]: https://github.com/gohugoio/hugoDocs/blob/master/content/en/templates/files.md - [osfileinfo]: https://golang.org/pkg/os/#FileInfo - [readDir]: /functions/readdir/ - [readFile]: /functions/readfile/ ++[`os.FileInfo`]: https://pkg.go.dev/io/fs#FileInfo ++[`readDir`]: /functions/os/readdir ++[`readFile`]: /functions/os/readfile +[sc]: /content-management/shortcodes/ +[sct]: /templates/shortcode-templates/ +[readfilesource]: https://github.com/gohugoio/hugoDocs/blob/master/layouts/shortcodes/readfile.html - [testfile]: https://github.com/gohugoio/hugoDocs/blob/master/content/en/readfiles/testing.txt diff --cc docs/content/en/templates/introduction.md index 5d60e9ed1,000000000..93666de28 mode 100644,000000..100644 --- a/docs/content/en/templates/introduction.md +++ b/docs/content/en/templates/introduction.md @@@ -1,671 -1,0 +1,672 @@@ +--- +title: Templating +linkTitle: Templating +description: Hugo uses Go's `html/template` and `text/template` libraries as the basis for the templating. +categories: [fundamentals,templates] +keywords: [go] +menu: + docs: + parent: templates + weight: 20 +weight: 20 +aliases: [/layouts/introduction/,/layout/introduction/, /templates/go-templates/] +toc: true +--- + +{{% note %}} +The following is only a primer on Go Templates. For an in-depth look into Go Templates, check the official [Go docs](https://golang.org/pkg/text/template/). +{{% /note %}} + +Go Templates provide an extremely simple template language that adheres to the belief that only the most basic of logic belongs in the template or view layer. + +## Basic syntax + +Go Templates are HTML files with the addition of [variables][variables] and [functions][functions]. Go Template variables and functions are accessible within `{{ }}`. + +### Access a predefined variable + +A _predefined variable_ could be a variable already existing in the +current scope (like the `.Title` example in the [Variables](#variables) section below) or a custom variable (like the +`$address` example in that same section). + + +```go-html-template +{{ .Title }} +{{ $address }} +``` + +Parameters for functions are separated using spaces. The general syntax is: + +```go-html-template +{{ FUNCTION ARG1 ARG2 .. }} +``` + +The following example calls the `add` function with inputs of `1` and `2`: + +```go-html-template +{{ add 1 2 }} +``` + +#### Methods and fields are accessed via dot notation + +Accessing the Page Parameter `bar` defined in a piece of content's [front matter]. + +```go-html-template +{{ .Params.bar }} +``` + +#### Parentheses can be used to group items together + +```go-html-template +{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} +``` + +#### A single statement can be split over multiple lines + +```go-html-template +{{ if or + (isset .Params "alt") + (isset .Params "caption") +}} +``` + +#### Raw string literals can include newlines + +```go-html-template +{{ $msg := `Line one. +Line two.` }} +``` + +## Variables + +Each Go Template gets a data object. In Hugo, each template is passed +a `Page`. In the below example, `.Title` is one of the elements +accessible in that [`Page` variable][pagevars]. + +With the `Page` being the default scope of a template, the `Title` +element in current scope (`.` -- "the **dot**") is accessible simply +by the dot-prefix (`.Title`): + +```go-html-template +{{ .Title }} +``` + +Values can also be stored in custom variables and referenced later: + +{{% note %}} +The custom variables need to be prefixed with `$`. +{{% /note %}} + +```go-html-template +{{ $address := "123 Main St." }} +{{ $address }} +``` + +Variables can be re-defined using the `=` operator. The example below +prints "Var is Hugo Home" on the home page, and "Var is Hugo Page" on +all other pages: + +```go-html-template +{{ $var := "Hugo Page" }} +{{ if .IsHome }} + {{ $var = "Hugo Home" }} +{{ end }} +Var is {{ $var }} +``` + +## Functions + +Go Templates only ship with a few basic functions but also provide a mechanism for applications to extend the original set. + +[Hugo template functions][functions] provide additional functionality specific to building websites. Functions are called by using their name followed by the required parameters separated by spaces. Template functions cannot be added without recompiling Hugo. + +### Example 1: adding numbers + +```go-html-template +{{ add 1 2 }} + +``` + +### Example 2: comparing numbers + +```go-html-template +{{ lt 1 2 }} + +``` + +Note that both examples make use of Go Template's [math][math] functions. + +{{% note %}} +There are more boolean operators than those listed in the Hugo docs in the [Go Template documentation](https://golang.org/pkg/text/template/#hdr-Functions). +{{% /note %}} + +## Includes + +When including another template, you will need to pass it the data that it would +need to access. + +{{% note %}} +To pass along the current context, please remember to include a trailing **dot**. +{{% /note %}} + +The templates location will always be starting at the `layouts/` directory +within Hugo. + +### Partial + +The [`partial`][partials] function is used to include _partial_ templates using +the syntax `{{ partial "/." . }}`. + +Example of including a `layouts/partials/header.html` partial: + +```go-html-template +{{ partial "header.html" . }} +``` + +### Template + +The `template` function was used to include _partial_ templates +in much older Hugo versions. Now it's useful only for calling +[_internal_ templates][internal templates]. The syntax is `{{ template +"_internal/