diff options
author | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-03-03 17:20:23 +0300 |
---|---|---|
committer | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-03-03 18:07:15 +0300 |
commit | 145527913c4a87e976e70af82b6eeb33c10340a5 (patch) | |
tree | 5d8958ab89b1a84a61b07cea26e3e5b48670fe5c | |
parent | 53dbfdb3cbf70d9444d50fa8ad9b0e58a1153405 (diff) |
Misc adjustments
Closes #5
Closes #6
Closes #7
-rw-r--r-- | .prettierrc | 2 | ||||
-rw-r--r-- | assets/css/styles.css | 2 | ||||
-rw-r--r-- | exampleSite/config.toml | 5 | ||||
-rw-r--r-- | layouts/_default/page.html | 24 | ||||
-rw-r--r-- | tailwind.config.js | 889 |
5 files changed, 477 insertions, 445 deletions
diff --git a/.prettierrc b/.prettierrc index 6da6623..98d650a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -9,9 +9,7 @@ { "files": ["*.js", "*.ts"], "options": { - "useTabs": true, "printWidth": 120, - "singleQuote": true, "spaceBeforeFunctionParen": false } } diff --git a/assets/css/styles.css b/assets/css/styles.css index 6027a38..b6802fc 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -76,7 +76,7 @@ body { } a { - @apply text-steel-700 hover:text-steel-500 no-underline; + @apply text-blue-700 hover:text-steel-500 no-underline; } .dark a { diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 6f7d527..ac3f825 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -9,6 +9,7 @@ footnotereturnlinkcontents = "↩" languageCode = "en-us" title = "Hugo" + # Error configuration. refLinksErrorLevel = "WARNING" ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"] @@ -23,6 +24,10 @@ disableAliases = true # Used by PurgeCSS writeStats = true +[params] +ghrepo = "https://github.com/gohugoio/hugoDocs/" + + # Make the categories listing share the layouts from documentation. [[cascade]] diff --git a/layouts/_default/page.html b/layouts/_default/page.html index af30fff..339df7d 100644 --- a/layouts/_default/page.html +++ b/layouts/_default/page.html @@ -29,4 +29,28 @@ {{- partial "docs/functions-signature.html" . -}} {{ .Content }} + + + <hr /> + {{ with .File }} + <div class="mt-8"> + <a + href="{{ path.Join site.Params.ghrepo `edit/master/content` .Lang .Path }}" + class="inline-flex items-center"> + <span class="mr-2">Edit this file on GitHub</span> + {{ partial "svg/link-ext.svg" (dict "fill" "#333" "size" "14") }} + </a> + </div> + {{ end }} + + + <div class="mt-4 text-gray-300 text-sm"> + Last updated: + {{ .Lastmod.Format "January 2, 2006" }}{{ with .GitInfo }} + : + <a href="{{ site.Params.ghrepo }}commit/{{ .Hash }}" + >{{ .Subject }} ({{ .AbbreviatedHash }})</a + > + {{ end }} + </div> </div> diff --git a/tailwind.config.js b/tailwind.config.js index 0f72db9..a062fdd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,454 +1,459 @@ -const theme = require("tailwindcss/defaultTheme"); -const typography = require("@tailwindcss/typography"); +const theme = require('tailwindcss/defaultTheme'); +const typography = require('@tailwindcss/typography'); -const colorPrimaryDark = "var(--primary-color-dark)"; -const colorPrimaryLight = "var(--primary-color-light)"; +const colorPrimaryDark = 'var(--primary-color-dark)'; +const colorPrimaryLight = 'var(--primary-color-light)'; // Utils const round = (num) => - num - .toFixed(7) - .replace(/(\.[0-9]+?)0+$/, "$1") - .replace(/\.0$/, ""); + num + .toFixed(7) + .replace(/(\.[0-9]+?)0+$/, '$1') + .replace(/\.0$/, ''); const rem = (px) => `${round(px / 16)}rem`; const em = (px, base) => `${round(px / base)}em`; const px = (px) => `${px}px`; +// https://tailwind.simeongriggs.dev/organge/EBB951 +const colors = { + primarydark: colorPrimaryDark, + primarylight: colorPrimaryLight, + blue: { + 50: '#B5E8FD', + 100: '#9CE1FC', + 200: '#6AD2FB', + 300: '#3EC4F9', + 400: '#0CB5F8', + 500: '#0694CB', + 600: '#0585B7', + 700: '#0577A4', + 800: '#04658B', + 900: '#035677', + }, + green: { + 50: '#C7F0E3', + 100: '#B3EADA', + 200: '#93E1CA', + 300: '#6FD7B8', + 400: '#4BCDA6', + 500: '#33B991', + 600: '#2DA480', + 700: '#289071', + 800: '#227C61', + 900: '#1C644E', + }, + steel: { + 50: '#f2fafc', + 100: '#ddf8fa', + 200: '#b0eef5', + 300: '#7adff2', + 400: '#36c2ec', + 500: '#0594cb', + 600: '#0f7dd3', + 700: '#1363ad', + 800: '#134c7f', + 900: '#113d61', + }, + orange: { + 50: '#F8E8C4', + 100: '#F7E2B6', + 200: '#F4D99F', + 300: '#F1CE83', + 400: '#EEC56D', + 500: '#EBB951', + 600: '#E9B33F', + 700: '#E6AA28', + 800: '#E0A11A', + 900: '#C99117', + }, + hotpink: { + 50: '#FFBDD6', + 100: '#FFADCD', + 200: '#FF94BD', + 300: '#FF75AA', + 400: '#FF5C9A', + 500: '#FF3F88', + 600: '#FF297B', + 700: '#FF0F6B', + 800: '#FA0060', + 900: '#E00056', + }, +}; + module.exports = { - darkMode: "class", // See https://tailwindcss.com/docs/dark-mode - important: "#gohugoio", // See https://tailwindcss.com/docs/configuration#important - plugins: [typography, require("nightwind")], - theme: { - nightwind: { - typography: { - pre: { - color: "#f8f8f2", - backgroundColor: theme.colors.gray[900], - }, - }, - transitionDuration: false, - }, - fontFamily: { - ...theme.fontFamily, - sans: ["Mulish", ...theme.fontFamily.sans], - }, - extend: { - spacing: { - "2/3": "66.666667%", - }, - // See https://github.com/tailwindcss/typography/blob/master/src/styles.js - typography: { - DEFAULT: { - css: { - maxWidth: "80ch", - fontWeight: "400", - lineHeight: "1.5", - strong: { - fontWeight: "600", - }, - a: { - textDecoration: "none", - }, - h1: { - fontWeight: "400", - marginBottom: "1rem", - }, - h2: { - fontWeight: "600", - marginTop: "1.5em", - marginBottom: "1rem", - }, - h3: { - fontWeight: "600", - marginTop: "1.5em", - marginBottom: "1rem", - }, - h4: { - fontWeight: "600", - marginTop: "1.5em", - marginBottom: "1rem", - }, - blockquote: { - fontWeight: "400", - fontStyle: "normal", - borderLeftWidth: "0.25rem", - borderLeftColor: theme.colors.gray[300], - quotes: '"\\201C""\\201D""\\2018""\\2019"', - marginTop: "1em", - marginBottom: "1em", - }, - "blockquote p:first-of-type::before": { - content: "", - }, - "blockquote p:last-of-type::after": { - content: "", - }, - code: { - backgroundColor: theme.colors.gray[100], - fontWeight: "400", - padding: "0.2em", - margin: 0, - fontSize: "85%", - borderRadius: "3px", - }, - "code::before": false, - "code::after": false, - pre: { - fontSize: em(14, 16), - lineHeight: round(24 / 14), - marginTop: "1em", - marginBottom: "1em", - borderRadius: rem(6), - paddingTop: "1em", - paddingRight: "1em", - paddingBottom: "1em", - paddingLeft: "1em", - }, + darkMode: 'class', // See https://tailwindcss.com/docs/dark-mode + important: '#gohugoio', // See https://tailwindcss.com/docs/configuration#important + plugins: [typography, require('nightwind')], + theme: { + nightwind: { + typography: { + pre: { + color: '#f8f8f2', + backgroundColor: theme.colors.gray[900], + }, + }, + transitionDuration: false, + }, + fontFamily: { + ...theme.fontFamily, + sans: ['Mulish', ...theme.fontFamily.sans], + }, + extend: { + spacing: { + '2/3': '66.666667%', + }, + // See https://github.com/tailwindcss/typography/blob/master/src/styles.js + typography: { + DEFAULT: { + css: { + maxWidth: '80ch', + fontWeight: '400', + lineHeight: '1.5', + strong: { + fontWeight: '600', + }, + a: { + color: colors.blue[900], + textDecoration: 'underline', + fontWeight: '500', + }, + h1: { + fontWeight: '400', + marginBottom: '1rem', + }, + h2: { + fontWeight: '600', + marginTop: '1.5em', + marginBottom: '1rem', + }, + h3: { + fontWeight: '600', + marginTop: '1.5em', + marginBottom: '1rem', + }, + h4: { + fontWeight: '600', + marginTop: '1.5em', + marginBottom: '1rem', + }, + blockquote: { + fontWeight: '400', + fontStyle: 'normal', + borderLeftWidth: '0.25rem', + borderLeftColor: theme.colors.gray[300], + quotes: '"\\201C""\\201D""\\2018""\\2019"', + marginTop: '1em', + marginBottom: '1em', + }, + 'blockquote p:first-of-type::before': { + content: '', + }, + 'blockquote p:last-of-type::after': { + content: '', + }, + code: { + backgroundColor: theme.colors.gray[100], + fontWeight: '400', + padding: '0.2em', + margin: 0, + fontSize: '85%', + borderRadius: '3px', + }, + 'code::before': false, + 'code::after': false, + pre: { + fontSize: em(14, 16), + lineHeight: round(24 / 14), + marginTop: '1em', + marginBottom: '1em', + borderRadius: rem(6), + paddingTop: '1em', + paddingRight: '1em', + paddingBottom: '1em', + paddingLeft: '1em', + }, + + p: { + marginTop: '1em', + marginBottom: '1em', + }, + ol: { + marginTop: '1em', + marginBottom: '1em', + }, + ul: { + marginTop: '1em', + marginBottom: '1em', + }, + li: { + marginTop: '.5em', + marginBottom: '.5em', + }, + '> ul > li p': { + marginTop: '.5em', + marginBottom: '.5em', + }, + '> ul > li > *:first-child': { + marginTop: '0px', + }, + '> ul > li > *:last-child': { + marginBottom: '0px', + }, + '> ol > li > *:first-child': { + marginTop: '0px', + }, + '> ol > li > *:last-child': { + marginBottom: '0px', + }, + 'ul ul, ul ol, ol ul, ol ol': { + marginTop: '1em', + marginBottom: '1em', + }, + hr: { + marginTop: '2em', + marginBottom: '2em', + }, + 'tbody td:first-child': false, + }, + }, + sm: { + css: { + fontSize: rem(14), + lineHeight: '1.5', + h1: { + marginBottom: '1rem', + }, + h2: { + fontSize: em(24, 12), + letterSpacing: '-0.38px', + marginTop: '1.5em', + marginBottom: '1rem', + }, + h3: { + marginTop: '1.5em', + marginBottom: '1rem', + }, + h4: { + marginTop: '1.5em', + marginBottom: '1rem', + }, + 'thead tr th': { + paddingLeft: '1rem', + paddingRight: '1rem', + paddingBottom: '0.75rem', + }, + td: { + padding: '1rem', + }, + 'tbody td:first-child': { + paddingLeft: 0, + }, + 'tbody td:last-child': { + paddingRight: 0, + }, + 'thead th:first-child': { + paddingLeft: 0, + }, + 'thead th:last-child': { + paddingRight: '0', + }, + 'thead th': { + fontSize: rem(16), + }, + table: { + fontSize: rem(16), + lineHeight: round(24 / 16), + }, + p: { + marginTop: '1em', + marginBottom: '1em', + }, + blockquote: { + marginTop: '1em', + marginBottom: '1em', + }, + pre: { + marginTop: '1em', + marginBottom: '1em', + paddingTop: '1em', + paddingRight: '1em', + paddingBottom: '1em', + paddingLeft: '1em', + }, + ol: { + marginTop: '1em', + marginBottom: '1em', + }, + ul: { + marginTop: '1em', + marginBottom: '1em', + }, + li: { + marginTop: '.5em', + marginBottom: '.5em', + }, + '> ul > li p': { + marginTop: '.5em', + marginBottom: '.5em', + }, + '> ul > li > *:first-child': { + marginTop: '0px', + }, + '> ul > li > *:last-child': { + marginBottom: '0px', + }, + '> ol > li > *:first-child': { + marginTop: '0px', + }, + '> ol > li > *:last-child': { + marginBottom: '0px', + }, + 'ul ul, ul ol, ol ul, ol ol': { + marginTop: '1em', + marginBottom: '1em', + }, + hr: { + marginTop: '2em', + marginBottom: '2em', + }, + }, + }, + lg: { + css: { + fontSize: rem(16), + lineHeight: '1.5', + h1: { + fontSize: '2em', + lineHeight: '1.25', + marginBottom: '1rem', + }, + h2: { + fontSize: '1.5em', + lineHeight: '1.25', + letterSpacing: '-0.5px', + marginTop: '1.5em', + marginBottom: '1rem', + }, + h3: { + fontSize: '1.25em', + lineHeight: '1.25', + marginTop: '1.5em', + marginBottom: '1rem', + }, + h4: { + fontSize: '1em', + lineHeight: '1.25', + marginTop: '1.5em', + marginBottom: '1rem', + }, + table: { + fontSize: rem(14), + lineHeight: round(24 / 16), + }, + 'tbody td:first-child': { + paddingLeft: rem(21), + }, + 'tbody td:last-child': { + paddingRight: rem(21), + }, + 'thead th': { + fontSize: rem(18), + }, - p: { - marginTop: "1em", - marginBottom: "1em", - }, - ol: { - marginTop: "1em", - marginBottom: "1em", - }, - ul: { - marginTop: "1em", - marginBottom: "1em", - }, - li: { - marginTop: ".5em", - marginBottom: ".5em", - }, - "> ul > li p": { - marginTop: ".5em", - marginBottom: ".5em", - }, - "> ul > li > *:first-child": { - marginTop: "0px", - }, - "> ul > li > *:last-child": { - marginBottom: "0px", - }, - "> ol > li > *:first-child": { - marginTop: "0px", - }, - "> ol > li > *:last-child": { - marginBottom: "0px", - }, - "ul ul, ul ol, ol ul, ol ol": { - marginTop: "1em", - marginBottom: "1em", - }, - hr: { - marginTop: "2em", - marginBottom: "2em", - }, - "tbody td:first-child": false, - }, - }, - sm: { - css: { - fontSize: rem(14), - lineHeight: "1.5", - h1: { - marginBottom: "1rem", - }, - h2: { - fontSize: em(24, 12), - letterSpacing: "-0.38px", - marginTop: "1.5em", - marginBottom: "1rem", - }, - h3: { - marginTop: "1.5em", - marginBottom: "1rem", - }, - h4: { - marginTop: "1.5em", - marginBottom: "1rem", - }, - "thead tr th": { - paddingLeft: "1rem", - paddingRight: "1rem", - paddingBottom: "0.75rem", - }, - td: { - padding: "1rem", - }, - "tbody td:first-child": { - paddingLeft: 0, - }, - "tbody td:last-child": { - paddingRight: 0, - }, - "thead th:first-child": { - paddingLeft: 0, - }, - "thead th:last-child": { - paddingRight: "0", - }, - "thead th": { - fontSize: rem(16), - }, - table: { - fontSize: rem(16), - lineHeight: round(24 / 16), - }, - p: { - marginTop: "1em", - marginBottom: "1em", - }, - blockquote: { - marginTop: "1em", - marginBottom: "1em", - }, - pre: { - marginTop: "1em", - marginBottom: "1em", - paddingTop: "1em", - paddingRight: "1em", - paddingBottom: "1em", - paddingLeft: "1em", - }, - ol: { - marginTop: "1em", - marginBottom: "1em", - }, - ul: { - marginTop: "1em", - marginBottom: "1em", - }, - li: { - marginTop: ".5em", - marginBottom: ".5em", - }, - "> ul > li p": { - marginTop: ".5em", - marginBottom: ".5em", - }, - "> ul > li > *:first-child": { - marginTop: "0px", - }, - "> ul > li > *:last-child": { - marginBottom: "0px", - }, - "> ol > li > *:first-child": { - marginTop: "0px", - }, - "> ol > li > *:last-child": { - marginBottom: "0px", - }, - "ul ul, ul ol, ol ul, ol ol": { - marginTop: "1em", - marginBottom: "1em", - }, - hr: { - marginTop: "2em", - marginBottom: "2em", - }, - }, - }, - lg: { - css: { - fontSize: rem(16), - lineHeight: "1.5", - h1: { - fontSize: "2em", - lineHeight: "1.25", - marginBottom: "1rem", - }, - h2: { - fontSize: "1.5em", - lineHeight: "1.25", - letterSpacing: "-0.5px", - marginTop: "1.5em", - marginBottom: "1rem", - }, - h3: { - fontSize: "1.25em", - lineHeight: "1.25", - marginTop: "1.5em", - marginBottom: "1rem", - }, - h4: { - fontSize: "1em", - lineHeight: "1.25", - marginTop: "1.5em", - marginBottom: "1rem", - }, - table: { - fontSize: rem(14), - lineHeight: round(24 / 16), - }, - "tbody td:first-child": { - paddingLeft: rem(21), - }, - "tbody td:last-child": { - paddingRight: rem(21), - }, - "thead th": { - fontSize: rem(18), - }, + // new margins + p: { + marginTop: '1em', + marginBottom: '1em', + }, + blockquote: { + marginTop: '1em', + marginBottom: '1em', + }, + pre: { + marginTop: '1em', + marginBottom: '1em', + paddingTop: '1em', + paddingRight: '1em', + paddingBottom: '1em', + paddingLeft: '1em', + borderRadius: rem(3), + }, + ol: { + marginTop: '1em', + marginBottom: '1em', + }, + ul: { + marginTop: '1em', + marginBottom: '1em', + }, + li: { + marginTop: '.5em', + marginBottom: '.5em', + }, + '> ul > li p': { + marginTop: '.5em', + marginBottom: '.5em', + }, + '> ul > li > *:first-child': { + marginTop: '0px', + }, + '> ul > li > *:last-child': { + marginBottom: '0px', + }, + '> ol > li > *:first-child': { + marginTop: '0px', + }, + '> ol > li > *:last-child': { + marginBottom: '0px', + }, + 'ul ul, ul ol, ol ul, ol ol': { + marginTop: '1em', + marginBottom: '1em', + }, + hr: { + marginTop: '2em', + marginBottom: '2em', + }, + table: { + fontSize: rem(16), + lineHeight: round(24 / 16), + }, + 'tbody td:first-child': { + paddingLeft: rem(21), + }, + 'tbody td:last-child': { + paddingRight: rem(21), + }, + 'thead th': { + fontSize: rem(16), + }, + }, + }, + }, - // new margins - p: { - marginTop: "1em", - marginBottom: "1em", - }, - blockquote: { - marginTop: "1em", - marginBottom: "1em", - }, - pre: { - marginTop: "1em", - marginBottom: "1em", - paddingTop: "1em", - paddingRight: "1em", - paddingBottom: "1em", - paddingLeft: "1em", - borderRadius: rem(3), - }, - ol: { - marginTop: "1em", - marginBottom: "1em", - }, - ul: { - marginTop: "1em", - marginBottom: "1em", - }, - li: { - marginTop: ".5em", - marginBottom: ".5em", - }, - "> ul > li p": { - marginTop: ".5em", - marginBottom: ".5em", - }, - "> ul > li > *:first-child": { - marginTop: "0px", - }, - "> ul > li > *:last-child": { - marginBottom: "0px", - }, - "> ol > li > *:first-child": { - marginTop: "0px", - }, - "> ol > li > *:last-child": { - marginBottom: "0px", - }, - "ul ul, ul ol, ol ul, ol ol": { - marginTop: "1em", - marginBottom: "1em", - }, - hr: { - marginTop: "2em", - marginBottom: "2em", - }, - table: { - fontSize: rem(16), - lineHeight: round(24 / 16), - }, - "tbody td:first-child": { - paddingLeft: rem(21), - }, - "tbody td:last-child": { - paddingRight: rem(21), - }, - "thead th": { - fontSize: rem(16), - }, - }, - }, - }, - // Partly from https://tailwind.simeongriggs.dev/organge/EBB951 - colors: { - primarydark: colorPrimaryDark, - primarylight: colorPrimaryLight, - blue: { - 50: "#B5E8FD", - 100: "#9CE1FC", - 200: "#6AD2FB", - 300: "#3EC4F9", - 400: "#0CB5F8", - 500: "#0694CB", - 600: "#0585B7", - 700: "#0577A4", - 800: "#04658B", - 900: "#035677", - }, - green: { - 50: "#C7F0E3", - 100: "#B3EADA", - 200: "#93E1CA", - 300: "#6FD7B8", - 400: "#4BCDA6", - 500: "#33B991", - 600: "#2DA480", - 700: "#289071", - 800: "#227C61", - 900: "#1C644E", - }, - steel: { - 50: "#f2fafc", - 100: "#ddf8fa", - 200: "#b0eef5", - 300: "#7adff2", - 400: "#36c2ec", - 500: "#0594cb", - 600: "#0f7dd3", - 700: "#1363ad", - 800: "#134c7f", - 900: "#113d61", - }, - orange: { - 50: "#F8E8C4", - 100: "#F7E2B6", - 200: "#F4D99F", - 300: "#F1CE83", - 400: "#EEC56D", - 500: "#EBB951", - 600: "#E9B33F", - 700: "#E6AA28", - 800: "#E0A11A", - 900: "#C99117", - }, - hotpink: { - 50: "#FFBDD6", - 100: "#FFADCD", - 200: "#FF94BD", - 300: "#FF75AA", - 400: "#FF5C9A", - 500: "#FF3F88", - 600: "#FF297B", - 700: "#FF0F6B", - 800: "#FA0060", - 900: "#E00056", - }, - }, - }, - }, - purge: { - enabled: process.env.HUGO_ENVIRONMENT === "production", - content: ["./hugo_stats.json", "./layouts/**/*.html"], - options: { - safelist: ["dark", "nightwind"], - }, - extractors: [ - { - extractor: (content) => { - let els = JSON.parse(content).htmlElements; - return els.tags.concat(els.classes, els.ids); - }, - extensions: ["json"], - }, - ], - mode: "all", - }, - variants: { - extend: { - typography: ["dark"], - }, - }, + colors: colors, + }, + }, + purge: { + enabled: process.env.HUGO_ENVIRONMENT === 'production', + content: ['./hugo_stats.json', './layouts/**/*.html'], + options: { + safelist: ['dark', 'nightwind'], + }, + extractors: [ + { + extractor: (content) => { + let els = JSON.parse(content).htmlElements; + return els.tags.concat(els.classes, els.ids); + }, + extensions: ['json'], + }, + ], + mode: 'all', + }, + variants: { + extend: { + typography: ['dark'], + }, + }, }; |