diff --git a/.prettierrc.js b/.prettierrc.js index 2e29a8a..1ec9f09 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,5 +1,4 @@ module.exports = { - printWidth: 100, singleQuote: true, // https://github.com/tailwindlabs/prettier-plugin-tailwindcss diff --git a/assets/main.css b/assets/main.css index 69694fb..660ea2a 100644 --- a/assets/main.css +++ b/assets/main.css @@ -48,9 +48,11 @@ html { -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; - tab-size: 4; + tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */ } @@ -87,7 +89,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. abbr:where([title]) { -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; } /* @@ -131,7 +133,8 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; /* 1 */ font-size: 1em; /* 2 */ @@ -356,7 +359,8 @@ textarea { 2. Set the default placeholder color to the user's configured gray 400 color. */ -input::-moz-placeholder, textarea::-moz-placeholder { +input::-moz-placeholder, +textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; @@ -376,7 +380,7 @@ Set the default cursor for buttons. */ button, -[role="button"] { +[role='button'] { cursor: pointer; } @@ -425,7 +429,7 @@ video { } html, - body { +body { height: 100%; } @@ -443,7 +447,9 @@ body { background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } -*, ::before, ::after { +*, +::before, +::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -453,16 +459,16 @@ body { --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -470,24 +476,24 @@ body { --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } ::-webkit-backdrop { @@ -500,16 +506,16 @@ body { --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -517,24 +523,24 @@ body { --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } ::backdrop { @@ -547,16 +553,16 @@ body { --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -564,24 +570,24 @@ body { --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .prose { @@ -589,7 +595,7 @@ body { max-width: 65ch; } -.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) { +.prose :where([class~='lead']):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; @@ -597,116 +603,119 @@ body { margin-bottom: 1.2em; } -.prose :where(a):not(:where([class~="not-prose"] *)) { +.prose :where(a):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } -.prose :where(strong):not(:where([class~="not-prose"] *)) { +.prose :where(strong):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-bold); font-weight: 600; } -.prose :where(a strong):not(:where([class~="not-prose"] *)) { +.prose :where(a strong):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) { +.prose :where(blockquote strong):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(thead th strong):not(:where([class~="not-prose"] *)) { +.prose :where(thead th strong):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(ol):not(:where([class~="not-prose"] *)) { +.prose :where(ol):not(:where([class~='not-prose'] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } -.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) { list-style-type: upper-alpha; } -.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='a']):not(:where([class~='not-prose'] *)) { list-style-type: lower-alpha; } -.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='A' s]):not(:where([class~='not-prose'] *)) { list-style-type: upper-alpha; } -.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='a' s]):not(:where([class~='not-prose'] *)) { list-style-type: lower-alpha; } -.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='I']):not(:where([class~='not-prose'] *)) { list-style-type: upper-roman; } -.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='i']):not(:where([class~='not-prose'] *)) { list-style-type: lower-roman; } -.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='I' s]):not(:where([class~='not-prose'] *)) { list-style-type: upper-roman; } -.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='i' s]):not(:where([class~='not-prose'] *)) { list-style-type: lower-roman; } -.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) { +.prose :where(ol[type='1']):not(:where([class~='not-prose'] *)) { list-style-type: decimal; } -.prose :where(ul):not(:where([class~="not-prose"] *)) { +.prose :where(ul):not(:where([class~='not-prose'] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } -.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker { +.prose :where(ol > li):not(:where([class~='not-prose'] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } -.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker { +.prose :where(ul > li):not(:where([class~='not-prose'] *))::marker { color: var(--tw-prose-bullets); } -.prose :where(hr):not(:where([class~="not-prose"] *)) { +.prose :where(hr):not(:where([class~='not-prose'] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } -.prose :where(blockquote):not(:where([class~="not-prose"] *)) { +.prose :where(blockquote):not(:where([class~='not-prose'] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-left-width: 0.25rem; border-left-color: var(--tw-prose-quote-borders); - quotes: "\201C""\201D""\2018""\2019"; + quotes: '\201C''\201D''\2018''\2019'; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; } -.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { +.prose + :where(blockquote p:first-of-type):not(:where([class~='not-prose'] + *))::before { content: open-quote; } -.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after { +.prose + :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after { content: close-quote; } -.prose :where(h1):not(:where([class~="not-prose"] *)) { +.prose :where(h1):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; @@ -715,12 +724,12 @@ body { line-height: 1.1111111; } -.prose :where(h1 strong):not(:where([class~="not-prose"] *)) { +.prose :where(h1 strong):not(:where([class~='not-prose'] *)) { font-weight: 900; color: inherit; } -.prose :where(h2):not(:where([class~="not-prose"] *)) { +.prose :where(h2):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; @@ -729,12 +738,12 @@ body { line-height: 1.3333333; } -.prose :where(h2 strong):not(:where([class~="not-prose"] *)) { +.prose :where(h2 strong):not(:where([class~='not-prose'] *)) { font-weight: 800; color: inherit; } -.prose :where(h3):not(:where([class~="not-prose"] *)) { +.prose :where(h3):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; @@ -743,12 +752,12 @@ body { line-height: 1.6; } -.prose :where(h3 strong):not(:where([class~="not-prose"] *)) { +.prose :where(h3 strong):not(:where([class~='not-prose'] *)) { font-weight: 700; color: inherit; } -.prose :where(h4):not(:where([class~="not-prose"] *)) { +.prose :where(h4):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; @@ -756,73 +765,73 @@ body { line-height: 1.5; } -.prose :where(h4 strong):not(:where([class~="not-prose"] *)) { +.prose :where(h4 strong):not(:where([class~='not-prose'] *)) { font-weight: 700; color: inherit; } -.prose :where(img):not(:where([class~="not-prose"] *)) { +.prose :where(img):not(:where([class~='not-prose'] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose :where(figure > *):not(:where([class~="not-prose"] *)) { +.prose :where(figure > *):not(:where([class~='not-prose'] *)) { margin-top: 0; margin-bottom: 0; } -.prose :where(figcaption):not(:where([class~="not-prose"] *)) { +.prose :where(figcaption):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } -.prose :where(code):not(:where([class~="not-prose"] *)) { +.prose :where(code):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } -.prose :where(code):not(:where([class~="not-prose"] *))::before { - content: "`"; +.prose :where(code):not(:where([class~='not-prose'] *))::before { + content: '`'; } -.prose :where(code):not(:where([class~="not-prose"] *))::after { - content: "`"; +.prose :where(code):not(:where([class~='not-prose'] *))::after { + content: '`'; } -.prose :where(a code):not(:where([class~="not-prose"] *)) { +.prose :where(a code):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(h1 code):not(:where([class~="not-prose"] *)) { +.prose :where(h1 code):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(h2 code):not(:where([class~="not-prose"] *)) { +.prose :where(h2 code):not(:where([class~='not-prose'] *)) { color: inherit; font-size: 0.875em; } -.prose :where(h3 code):not(:where([class~="not-prose"] *)) { +.prose :where(h3 code):not(:where([class~='not-prose'] *)) { color: inherit; font-size: 0.9em; } -.prose :where(h4 code):not(:where([class~="not-prose"] *)) { +.prose :where(h4 code):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(blockquote code):not(:where([class~="not-prose"] *)) { +.prose :where(blockquote code):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(thead th code):not(:where([class~="not-prose"] *)) { +.prose :where(thead th code):not(:where([class~='not-prose'] *)) { color: inherit; } -.prose :where(pre):not(:where([class~="not-prose"] *)) { +.prose :where(pre):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; @@ -838,7 +847,7 @@ body { padding-left: 1.1428571em; } -.prose :where(pre code):not(:where([class~="not-prose"] *)) { +.prose :where(pre code):not(:where([class~='not-prose'] *)) { background-color: transparent; border-width: 0; border-radius: 0; @@ -850,15 +859,15 @@ body { line-height: inherit; } -.prose :where(pre code):not(:where([class~="not-prose"] *))::before { +.prose :where(pre code):not(:where([class~='not-prose'] *))::before { content: none; } -.prose :where(pre code):not(:where([class~="not-prose"] *))::after { +.prose :where(pre code):not(:where([class~='not-prose'] *))::after { content: none; } -.prose :where(table):not(:where([class~="not-prose"] *)) { +.prose :where(table):not(:where([class~='not-prose'] *)) { width: 100%; table-layout: auto; text-align: left; @@ -868,12 +877,12 @@ body { line-height: 1.7142857; } -.prose :where(thead):not(:where([class~="not-prose"] *)) { +.prose :where(thead):not(:where([class~='not-prose'] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } -.prose :where(thead th):not(:where([class~="not-prose"] *)) { +.prose :where(thead th):not(:where([class~='not-prose'] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; @@ -882,25 +891,25 @@ body { padding-left: 0.5714286em; } -.prose :where(tbody tr):not(:where([class~="not-prose"] *)) { +.prose :where(tbody tr):not(:where([class~='not-prose'] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } -.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) { +.prose :where(tbody tr:last-child):not(:where([class~='not-prose'] *)) { border-bottom-width: 0; } -.prose :where(tbody td):not(:where([class~="not-prose"] *)) { +.prose :where(tbody td):not(:where([class~='not-prose'] *)) { vertical-align: baseline; } -.prose :where(tfoot):not(:where([class~="not-prose"] *)) { +.prose :where(tfoot):not(:where([class~='not-prose'] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } -.prose :where(tfoot td):not(:where([class~="not-prose"] *)) { +.prose :where(tfoot td):not(:where([class~='not-prose'] *)) { vertical-align: top; } @@ -941,249 +950,277 @@ body { line-height: 1.75; } -.prose :where(p):not(:where([class~="not-prose"] *)) { +.prose :where(p):not(:where([class~='not-prose'] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } -.prose :where(video):not(:where([class~="not-prose"] *)) { +.prose :where(video):not(:where([class~='not-prose'] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose :where(figure):not(:where([class~="not-prose"] *)) { +.prose :where(figure):not(:where([class~='not-prose'] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose :where(li):not(:where([class~="not-prose"] *)) { +.prose :where(li):not(:where([class~='not-prose'] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } -.prose :where(ol > li):not(:where([class~="not-prose"] *)) { +.prose :where(ol > li):not(:where([class~='not-prose'] *)) { padding-left: 0.375em; } -.prose :where(ul > li):not(:where([class~="not-prose"] *)) { +.prose :where(ul > li):not(:where([class~='not-prose'] *)) { padding-left: 0.375em; } -.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose + :where(.prose > ul > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.25em; } -.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose + :where(.prose > ul > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.25em; } -.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose + :where(.prose > ol > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.25em; } -.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose + :where(.prose > ol > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.25em; } -.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { +.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~='not-prose'] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose :where(hr + *):not(:where([class~="not-prose"] *)) { +.prose :where(hr + *):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose :where(h2 + *):not(:where([class~="not-prose"] *)) { +.prose :where(h2 + *):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose :where(h3 + *):not(:where([class~="not-prose"] *)) { +.prose :where(h3 + *):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose :where(h4 + *):not(:where([class~="not-prose"] *)) { +.prose :where(h4 + *):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) { +.prose :where(thead th:first-child):not(:where([class~='not-prose'] *)) { padding-left: 0; } -.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) { +.prose :where(thead th:last-child):not(:where([class~='not-prose'] *)) { padding-right: 0; } -.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { +.prose :where(tbody td, tfoot td):not(:where([class~='not-prose'] *)) { padding-top: 0.5714286em; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; } -.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { +.prose + :where(tbody td:first-child, tfoot + td:first-child):not(:where([class~='not-prose'] *)) { padding-left: 0; } -.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { +.prose + :where(tbody td:last-child, tfoot + td:last-child):not(:where([class~='not-prose'] *)) { padding-right: 0; } -.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > :first-child):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose :where(.prose > :last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 0; } -.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose-sm :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) { margin-top: 0.5714286em; margin-bottom: 0.5714286em; } -.prose-sm :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-sm + :where(.prose > ul > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.1428571em; } -.prose-sm :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-sm + :where(.prose > ul > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.1428571em; } -.prose-sm :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-sm + :where(.prose > ol > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.1428571em; } -.prose-sm :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-sm + :where(.prose > ol > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.1428571em; } -.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose-sm :where(.prose > :first-child):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose-sm :where(.prose > :last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 0; } -.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose-base :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose-base :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-base + :where(.prose > ul > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.25em; } -.prose-base :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-base + :where(.prose > ul > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.25em; } -.prose-base :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-base + :where(.prose > ol > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.25em; } -.prose-base :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-base + :where(.prose > ol > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.25em; } -.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose-base :where(.prose > :first-child):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose-base :where(.prose > :last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 0; } -.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose-lg :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) { margin-top: 0.8888889em; margin-bottom: 0.8888889em; } -.prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-lg + :where(.prose > ul > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.3333333em; } -.prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-lg + :where(.prose > ul > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.3333333em; } -.prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-lg + :where(.prose > ol > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.3333333em; } -.prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-lg + :where(.prose > ol > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.3333333em; } -.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose-lg :where(.prose > :first-child):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose-lg :where(.prose > :last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 0; } -.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose-xl :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) { margin-top: 0.8em; margin-bottom: 0.8em; } -.prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-xl + :where(.prose > ul > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.2em; } -.prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-xl + :where(.prose > ul > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.2em; } -.prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-xl + :where(.prose > ol > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.2em; } -.prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-xl + :where(.prose > ol > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.2em; } -.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose-xl :where(.prose > :first-child):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose-xl :where(.prose > :last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 0; } -.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { +.prose-2xl :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) { margin-top: 0.8333333em; margin-bottom: 0.8333333em; } -.prose-2xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-2xl + :where(.prose > ul > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.3333333em; } -.prose-2xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-2xl + :where(.prose > ul > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.3333333em; } -.prose-2xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { +.prose-2xl + :where(.prose > ol > li > *:first-child):not(:where([class~='not-prose'] *)) { margin-top: 1.3333333em; } -.prose-2xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { +.prose-2xl + :where(.prose > ol > li > *:last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 1.3333333em; } -.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { +.prose-2xl :where(.prose > :first-child):not(:where([class~='not-prose'] *)) { margin-top: 0; } -.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { +.prose-2xl :where(.prose > :last-child):not(:where([class~='not-prose'] *)) { margin-bottom: 0; } @@ -1235,16 +1272,21 @@ body { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); text-decoration-line: none; - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); transition-duration: 100ms; } .btn:active { - --tw-scale-x: .95; - --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-scale-x: 0.95; + --tw-scale-y: 0.95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .dark .btn { @@ -1485,17 +1527,23 @@ body { .-translate-x-\[1px\] { --tw-translate-x: -1px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-0\.5 { --tw-translate-y: -0.125rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-0 { --tw-translate-y: -0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-pointer { @@ -1504,8 +1552,8 @@ body { .select-none { -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + -moz-user-select: none; + user-select: none; } .flex-col { @@ -1692,9 +1740,12 @@ body { } .shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), + 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), + 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .duration-200 { @@ -1710,7 +1761,7 @@ body { } .btn-menu::before, - .btn-menu::after { +.btn-menu::after { display: block; height: 2px; width: 1.25rem; @@ -1721,10 +1772,12 @@ body { content: var(--tw-content); } -.dark .btn-menu::before,.dark - .btn-menu::after { +.dark .btn-menu::before, +.dark .btn-menu::after { --tw-invert: invert(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) + var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) + var(--tw-sepia) var(--tw-drop-shadow); } .nav-wrapper { @@ -1739,14 +1792,18 @@ body { width: 1.5rem; --tw-translate-y: 5.5px; --tw-rotate: 45deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .open .btn-menu::after { width: 1.5rem; --tw-translate-y: -5.5px; --tw-rotate: -45deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .open .nav-wrapper { @@ -1770,9 +1827,12 @@ article pre { margin-left: -2rem; margin-right: -2rem; padding: 2rem !important; - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } article blockquote { @@ -1820,7 +1880,7 @@ article blockquote { .hover\:animate-spin:hover { -webkit-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; + animation: spin 1s linear infinite; } .dark .dark\:bg-white\/80 { @@ -1866,7 +1926,9 @@ article blockquote { .dark .dark\:invert { --tw-invert: invert(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) + var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) + var(--tw-sepia) var(--tw-drop-shadow); } .dark .dark\:\[background-position\:right\] { diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md index 98e29d8..952bff9 100644 --- a/exampleSite/content/about.md +++ b/exampleSite/content/about.md @@ -10,11 +10,11 @@ Written in Go, Hugo is an open source static site generator available under the Hugo makes use of a variety of open source projects including: -* https://github.com/yuin/goldmark -* https://github.com/alecthomas/chroma -* https://github.com/muesli/smartcrop -* https://github.com/spf13/cobra -* https://github.com/spf13/viper +- https://github.com/yuin/goldmark +- https://github.com/alecthomas/chroma +- https://github.com/muesli/smartcrop +- https://github.com/spf13/cobra +- https://github.com/spf13/viper Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages. diff --git a/exampleSite/content/archives.md b/exampleSite/content/archives.md index db16eed..2212dc2 100644 --- a/exampleSite/content/archives.md +++ b/exampleSite/content/archives.md @@ -1,5 +1,5 @@ --- date: 2019-05-28 type: section -layout: "archives" +layout: 'archives' --- diff --git a/exampleSite/content/post/emoji-support.md b/exampleSite/content/post/emoji-support.md index 3bcb346..472149c 100644 --- a/exampleSite/content/post/emoji-support.md +++ b/exampleSite/content/post/emoji-support.md @@ -8,9 +8,11 @@ tags = [ ] +++ -Emoji can be enabled in a Hugo project in a number of ways. +Emoji can be enabled in a Hugo project in a number of ways. + -The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). + +The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g. @@ -19,17 +21,18 @@ To enable emoji globally, set `enableEmoji` to `true` in your site's [configurat The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes. -*** +--- **N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g. {{< highlight html >}} .emoji { - font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; +font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; } {{< /highlight >}} {{< css.inline >}} + + {{< /css.inline >}} diff --git a/exampleSite/content/post/markdown-syntax.md b/exampleSite/content/post/markdown-syntax.md index 9859ebf..7bc326d 100644 --- a/exampleSite/content/post/markdown-syntax.md +++ b/exampleSite/content/post/markdown-syntax.md @@ -17,6 +17,7 @@ aliases = ["migrate-from-jekyl"] +++ This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. + ## Headings @@ -24,10 +25,15 @@ This article offers a sample of basic Markdown syntax that can be used in Hugo c The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. # H1 + ## H2 + ### H3 + #### H4 + ##### H5 + ###### H6 ## Paragraph @@ -43,7 +49,7 @@ The blockquote element represents content that is quoted from another source, op #### Blockquote without attribution > Tiam, ad mint andaepu dandae nostion secatur sequo quae. -> **Note** that you can use *Markdown syntax* within a blockquote. +> **Note** that you can use _Markdown syntax_ within a blockquote. #### Blockquote with attribution @@ -56,31 +62,31 @@ The blockquote element represents content that is quoted from another source, op Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box. - Name | Age ---------|------ - Bob | 27 - Alice | 23 +| Name | Age | +| ----- | --- | +| Bob | 27 | +| Alice | 23 | #### Inline Markdown within tables | Italics | Bold | Code | -| -------- | -------- | ------ | -| *italics* | **bold** | `code` | +| --------- | -------- | ------ | +| _italics_ | **bold** | `code` | ## Code Blocks #### Code block with backticks ```html - + - - - Example HTML5 Document - - -

Test

- + + + Example HTML5 Document + + +

Test

+ ``` @@ -98,7 +104,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou #### Code block with Hugo's internal highlight shortcode + {{< highlight html >}} + @@ -121,19 +129,19 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou #### Unordered List -* List item -* Another item -* And another item +- List item +- Another item +- And another item #### Nested list -* Fruit - * Apple - * Orange - * Banana -* Dairy - * Milk - * Cheese +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese ## Other Elements — abbr, sub, sup, kbd, mark diff --git a/exampleSite/content/post/math-typesetting.md b/exampleSite/content/post/math-typesetting.md index 56cb111..0ecfae1 100644 --- a/exampleSite/content/post/math-typesetting.md +++ b/exampleSite/content/post/math-typesetting.md @@ -7,13 +7,14 @@ math: true --- Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries. + In this example we will be using [KaTeX](https://katex.org/) - Create a partial under `/layouts/partials/math.html` - Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally. -- Include the partial in your templates like so: +- Include the partial in your templates like so: ```bash {{ if or .Params.math .Site.Params.math }} @@ -28,6 +29,7 @@ In this example we will be using [KaTeX](https://katex.org/) {{< math.inline >}} {{ if or .Page.Params.math .Site.Params.math }} + @@ -38,12 +40,14 @@ In this example we will be using [KaTeX](https://katex.org/) ### Examples {{< math.inline >}} +

Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)

{{}} Block math: + $$ - \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } + \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$ diff --git a/exampleSite/content/post/placeholder-text.md b/exampleSite/content/post/placeholder-text.md index 818a7cf..2a48c21 100644 --- a/exampleSite/content/post/placeholder-text.md +++ b/exampleSite/content/post/placeholder-text.md @@ -36,10 +36,12 @@ Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et. -Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**. +Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**. {{< css.inline >}} + + {{< /css.inline >}} diff --git a/exampleSite/content/post/rich-content.md b/exampleSite/content/post/rich-content.md index db6c143..4dbe194 100644 --- a/exampleSite/content/post/rich-content.md +++ b/exampleSite/content/post/rich-content.md @@ -10,8 +10,8 @@ tags = [ +++ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. - ---- + +## ## YouTube Privacy Enhanced Shortcode diff --git a/layouts/404.html b/layouts/404.html index ab9e2da..4ad361b 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,3 +1,7 @@ {{ define "main" }} -

404

+

+ 404 +

{{ end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 14f63a6..c8263f1 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,8 +5,10 @@ {{ $.Scratch.Delete "avatar_url" }} -{{ $color_map := dict "linen" "#faf6f1" "wheat" "#f1efe1" "gray" "#fbfbfb" "light" "#fff" }} -{{ $.Scratch.Set "bg_color" (index $color_map (site.Params.color | default (print "linen"))) }} +{{ $color_map := dict "linen" "#faf6f1" "wheat" "#f1efe1" "gray" "#fbfbfb" +"light" "#fff" }} +{{ $.Scratch.Set "bg_color" (index $color_map (site.Params.color | default +(print "linen"))) }} {{ $social_params := slice "twitter" "github" "instagram" "rss" }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 29dfa53..9faad22 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -12,7 +12,8 @@ {{ end }} -{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }} +{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages +}} {{ if and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) }} @@ -34,7 +35,8 @@

{{ site.Params.name }}

- {{ site.Params.bio | default (print "Personal blog by " site.Params.name) }} + {{ site.Params.bio | default (print "Personal blog by " site.Params.name) + }}
{{ end }} @@ -45,7 +47,9 @@

{{ .Title }}

- +
{{ end }} @@ -57,7 +61,9 @@ ← {{ i18n "prev_page" }} {{ end }} {{ if $paginator.HasNext }} - {{ i18n "next_page" }} → + {{ i18n "next_page" }} → {{ end }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 64bda7b..586de86 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -37,7 +37,9 @@ {{ if and (gt (len $pages) 1) (in $pages . ) }}