diff --git a/CHANGELOG.md b/CHANGELOG.md index 87350fb7..405c7fb8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added - Chart.js support using `chart` shortcode +- Dark mode toggle with new theme parameters for managing light/dark appearance - French translation ([#18](https://github.com/jpanther/congo/pull/18)) - Grouping by year can now be specificed in front matter on list pages @@ -18,6 +19,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Bundled Mermaid for better vendor dependency management - Mermaid diagrams are now themed to match the configured colour scheme +### Fixed + +- Site logo image dimensions are unconstrained ([#19](https://github.com/jpanther/congo/issues/19)) +- Article summary styled incorrectly in dark mode + ## [1.4.0] - 2021-10-20 ### Added diff --git a/README.md b/README.md index 5c10ad75..af1f4b17 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io - Built with Tailwind CSS JIT for minified stylesheets without any excess code - Fully responsive layout - Multiple colour schemes (or fully customise your own) -- Dark mode (auto-switching based upon browser) +- Dark mode (forced on/off or auto-switching with user toggle) - Highly customisable configuration - Multiple homepage layouts - Flexible with any content types, taxonomies and menus diff --git a/archetypes/default.md b/archetypes/default.md index 09a04bbe..97f90a6b 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -3,6 +3,4 @@ title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} draft: true description: "" -slug: "{{ .File.BaseFileName }}" -topics: [] --- diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 7158c43a..d4b87fe5 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1057,10 +1057,8 @@ body a, body button { color: var(--color-primary-700); } -@media (prefers-color-scheme: dark) { - .article-pagination a:hover .article-pagination-direction { - color: var(--color-primary-400); - } +.dark .article-pagination a:hover .article-pagination-direction { + color: var(--color-primary-400); } /* -- Chroma Highlight -- */ @@ -1073,14 +1071,9 @@ body a, body button { color: var(--color-neutral-700); } -@media (prefers-color-scheme: dark) { - .prose .chroma { - background-color: var(--color-neutral-700); - } - - .prose .chroma { - color: var(--color-neutral-200); - } +.dark .prose .chroma { + background-color: var(--color-neutral-700); + color: var(--color-neutral-200); } /* Other */ @@ -1129,10 +1122,8 @@ body a, body button { padding-right: 1rem; } -@media (prefers-color-scheme: dark) { - .chroma .hl { - background-color: var(--color-primary-900); - } +.dark .chroma .hl { + background-color: var(--color-primary-900); } .chroma .lntd .hl { @@ -1146,10 +1137,8 @@ body a, body button { color: var(--color-neutral-600); } -@media (prefers-color-scheme: dark) { - .chroma .lnt { - color: var(--color-neutral-300); - } +.dark .chroma .lnt { + color: var(--color-neutral-300); } .chroma .lnt { @@ -1163,10 +1152,8 @@ body a, body button { color: var(--color-neutral-600); } -@media (prefers-color-scheme: dark) { - .chroma .ln { - color: var(--color-neutral-300); - } +.dark .chroma .ln { + color: var(--color-neutral-300); } .chroma .ln { @@ -1180,10 +1167,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .k { - color: var(--color-primary-300); - } +.dark .chroma .k { + color: var(--color-primary-300); } /* KeywordConstant */ @@ -1193,10 +1178,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .kc { - color: var(--color-secondary-500); - } +.dark .chroma .kc { + color: var(--color-secondary-500); } /* KeywordDeclaration */ @@ -1205,10 +1188,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kd { - color: var(--color-primary-300); - } +.dark .chroma .kd { + color: var(--color-primary-300); } /* KeywordNamespace */ @@ -1217,10 +1198,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kn { - color: var(--color-primary-300); - } +.dark .chroma .kn { + color: var(--color-primary-300); } /* KeywordPseudo */ @@ -1229,10 +1208,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kp { - color: var(--color-primary-300); - } +.dark .chroma .kp { + color: var(--color-primary-300); } /* KeywordReserved */ @@ -1241,10 +1218,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kr { - color: var(--color-primary-300); - } +.dark .chroma .kr { + color: var(--color-primary-300); } /* KeywordType */ @@ -1253,10 +1228,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .kt { - color: var(--color-secondary-600); - } +.dark .chroma .kt { + color: var(--color-secondary-600); } /* Name */ @@ -1265,10 +1238,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .n { - color: var(--color-secondary-200); - } +.dark .chroma .n { + color: var(--color-secondary-200); } /* NameAttribute */ @@ -1277,10 +1248,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .na { - color: var(--color-secondary-300); - } +.dark .chroma .na { + color: var(--color-secondary-300); } /* NameBuiltin */ @@ -1289,10 +1258,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .nb { - color: var(--color-secondary-300); - } +.dark .chroma .nb { + color: var(--color-secondary-300); } /* NameBuiltinPseudo */ @@ -1301,10 +1268,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .bp { - color: var(--color-secondary-300); - } +.dark .chroma .bp { + color: var(--color-secondary-300); } /* NameClass */ @@ -1313,10 +1278,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .nc { - color: var(--color-primary-300); - } +.dark .chroma .nc { + color: var(--color-primary-300); } /* NameConstant */ @@ -1326,10 +1289,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .no { - color: var(--color-secondary-500); - } +.dark .chroma .no { + color: var(--color-secondary-500); } /* NameDecorator */ @@ -1338,10 +1299,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .nd { - color: var(--color-secondary-200); - } +.dark .chroma .nd { + color: var(--color-secondary-200); } /* NameEntity */ @@ -1350,10 +1309,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .ni { - color: var(--color-secondary-200); - } +.dark .chroma .ni { + color: var(--color-secondary-200); } /* NameException */ @@ -1363,10 +1320,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .ne { - color: var(--color-secondary-500); - } +.dark .chroma .ne { + color: var(--color-secondary-500); } /* NameFunction */ @@ -1375,10 +1330,8 @@ body a, body button { color: var(--color-secondary-600); } -@media (prefers-color-scheme: dark) { - .chroma .nf { - color: var(--color-secondary-500); - } +.dark .chroma .nf { + color: var(--color-secondary-500); } /* NameFunctionMagic */ @@ -1387,10 +1340,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .fm { - color: var(--color-primary-300); - } +.dark .chroma .fm { + color: var(--color-primary-300); } /* NameLabel */ @@ -1399,10 +1350,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .nl { - color: var(--color-secondary-200); - } +.dark .chroma .nl { + color: var(--color-secondary-200); } /* NameNamespace */ @@ -1411,10 +1360,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .nn { - color: var(--color-primary-300); - } +.dark .chroma .nn { + color: var(--color-primary-300); } /* NameOther */ @@ -1423,10 +1370,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .nx { - color: var(--color-secondary-300); - } +.dark .chroma .nx { + color: var(--color-secondary-300); } /* NameProperty */ @@ -1441,10 +1386,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .nt { - color: var(--color-secondary-300); - } +.dark .chroma .nt { + color: var(--color-secondary-300); } /* NameVariable */ @@ -1453,10 +1396,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .nv { - color: var(--color-secondary-600); - } +.dark .chroma .nv { + color: var(--color-secondary-600); } /* NameVariableClass */ @@ -1465,10 +1406,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .vc { - color: var(--color-primary-300); - } +.dark .chroma .vc { + color: var(--color-primary-300); } /* NameVariableGlobal */ @@ -1478,10 +1417,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .vg { - color: var(--color-secondary-500); - } +.dark .chroma .vg { + color: var(--color-secondary-500); } /* NameVariableInstance */ @@ -1490,10 +1427,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .vi { - color: var(--color-secondary-600); - } +.dark .chroma .vi { + color: var(--color-secondary-600); } /* NameVariableMagic */ @@ -1502,10 +1437,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .vm { - color: var(--color-secondary-600); - } +.dark .chroma .vm { + color: var(--color-secondary-600); } /* Literal */ @@ -1514,10 +1447,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .l { - color: var(--color-primary-400); - } +.dark .chroma .l { + color: var(--color-primary-400); } /* LiteralDate */ @@ -1526,10 +1457,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .ld { - color: var(--color-primary-400); - } +.dark .chroma .ld { + color: var(--color-primary-400); } /* LiteralString */ @@ -1538,10 +1467,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .s { - color: var(--color-primary-400); - } +.dark .chroma .s { + color: var(--color-primary-400); } /* LiteralStringAffix */ @@ -1550,10 +1477,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sa { - color: var(--color-primary-400); - } +.dark .chroma .sa { + color: var(--color-primary-400); } /* LiteralStringBacktick */ @@ -1562,10 +1487,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sb { - color: var(--color-primary-400); - } +.dark .chroma .sb { + color: var(--color-primary-400); } /* LiteralStringChar */ @@ -1574,10 +1497,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sc { - color: var(--color-primary-400); - } +.dark .chroma .sc { + color: var(--color-primary-400); } /* LiteralStringDelimiter */ @@ -1586,10 +1507,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .dl { - color: var(--color-primary-400); - } +.dark .chroma .dl { + color: var(--color-primary-400); } /* LiteralStringDoc */ @@ -1598,10 +1517,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sd { - color: var(--color-primary-400); - } +.dark .chroma .sd { + color: var(--color-primary-400); } /* LiteralStringDouble */ @@ -1610,10 +1527,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .s2 { - color: var(--color-primary-400); - } +.dark .chroma .s2 { + color: var(--color-primary-400); } /* LiteralStringEscape */ @@ -1623,10 +1538,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .se { - color: var(--color-secondary-500); - } +.dark .chroma .se { + color: var(--color-secondary-500); } /* LiteralStringHeredoc */ @@ -1635,10 +1548,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sh { - color: var(--color-primary-400); - } +.dark .chroma .sh { + color: var(--color-primary-400); } /* LiteralStringInterpol */ @@ -1647,10 +1558,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .si { - color: var(--color-primary-400); - } +.dark .chroma .si { + color: var(--color-primary-400); } /* LiteralStringOther */ @@ -1659,10 +1568,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sx { - color: var(--color-primary-400); - } +.dark .chroma .sx { + color: var(--color-primary-400); } /* LiteralStringRegex */ @@ -1672,10 +1579,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sr { - color: var(--color-primary-400); - } +.dark .chroma .sr { + color: var(--color-primary-400); } /* LiteralStringSingle */ @@ -1684,10 +1589,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .s1 { - color: var(--color-primary-400); - } +.dark .chroma .s1 { + color: var(--color-primary-400); } /* LiteralStringSymbol */ @@ -1697,10 +1600,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .ss { - color: var(--color-primary-400); - } +.dark .chroma .ss { + color: var(--color-primary-400); } /* LiteralNumber */ @@ -1709,10 +1610,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .m { - color: var(--color-secondary-600); - } +.dark .chroma .m { + color: var(--color-secondary-600); } /* LiteralNumberBin */ @@ -1721,10 +1620,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mb { - color: var(--color-secondary-600); - } +.dark .chroma .mb { + color: var(--color-secondary-600); } /* LiteralNumberFloat */ @@ -1733,10 +1630,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mf { - color: var(--color-secondary-600); - } +.dark .chroma .mf { + color: var(--color-secondary-600); } /* LiteralNumberHex */ @@ -1745,10 +1640,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mh { - color: var(--color-secondary-600); - } +.dark .chroma .mh { + color: var(--color-secondary-600); } /* LiteralNumberInteger */ @@ -1757,10 +1650,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mi { - color: var(--color-secondary-600); - } +.dark .chroma .mi { + color: var(--color-secondary-600); } /* LiteralNumberIntegerLong */ @@ -1769,10 +1660,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .il { - color: var(--color-secondary-600); - } +.dark .chroma .il { + color: var(--color-secondary-600); } /* LiteralNumberOct */ @@ -1781,10 +1670,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mo { - color: var(--color-secondary-600); - } +.dark .chroma .mo { + color: var(--color-secondary-600); } /* Operator */ @@ -1800,10 +1687,8 @@ body a, body button { color: var(--color-primary-400); } -@media (prefers-color-scheme: dark) { - .chroma .ow { - color: var(--color-primary-600); - } +.dark .chroma .ow { + color: var(--color-primary-600); } /* Punctuation */ @@ -1818,10 +1703,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .c { - color: var(--color-neutral-500); - } +.dark .chroma .c { + color: var(--color-neutral-500); } /* CommentHashbang */ @@ -1832,10 +1715,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .ch { - color: var(--color-neutral-500); - } +.dark .chroma .ch { + color: var(--color-neutral-500); } /* CommentMultiline */ @@ -1845,10 +1726,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cm { - color: var(--color-neutral-500); - } +.dark .chroma .cm { + color: var(--color-neutral-500); } /* CommentSingle */ @@ -1858,10 +1737,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .c1 { - color: var(--color-neutral-500); - } +.dark .chroma .c1 { + color: var(--color-neutral-500); } /* CommentSpecial */ @@ -1871,10 +1748,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cs { - color: var(--color-neutral-500); - } +.dark .chroma .cs { + color: var(--color-neutral-500); } /* CommentPreproc */ @@ -1884,10 +1759,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cp { - color: var(--color-neutral-500); - } +.dark .chroma .cp { + color: var(--color-neutral-500); } /* CommentPreprocFile */ @@ -1897,10 +1770,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cpf { - color: var(--color-neutral-500); - } +.dark .chroma .cpf { + color: var(--color-neutral-500); } /* Generic */ @@ -1937,10 +1808,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .gi { - color: var(--color-primary-400); - } +.dark .chroma .gi { + color: var(--color-primary-400); } /* GenericOutput */ @@ -1949,10 +1818,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .go { - color: var(--color-primary-400); - } +.dark .chroma .go { + color: var(--color-primary-400); } /* GenericPrompt */ @@ -1961,10 +1828,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .gp { - color: var(--color-primary-400); - } +.dark .chroma .gp { + color: var(--color-primary-400); } /* GenericStrong */ @@ -2143,6 +2008,10 @@ body a, body button { height: 9rem; } +.max-h-\[10rem\] { + max-height: 10rem; +} + .w-36 { width: 9rem; } @@ -2171,6 +2040,10 @@ body a, body button { max-width: 65ch; } +.max-w-\[10rem\] { + max-width: 10rem; +} + .max-w-full { max-width: 100%; } @@ -2183,6 +2056,10 @@ body a, body button { cursor: default; } +.cursor-pointer { + cursor: pointer; +} + .list-none { list-style-type: none; } @@ -2255,6 +2132,14 @@ body a, body button { border-color: var(--color-primary-400); } +.border-neutral-200 { + border-color: var(--color-neutral-200); +} + +.border-neutral-700 { + border-color: var(--color-neutral-700); +} + .bg-neutral { background-color: var(--color-neutral); } @@ -2275,6 +2160,16 @@ body a, body button { background-color: var(--color-primary-600); } +.object-scale-down { + -o-object-fit: scale-down; + object-fit: scale-down; +} + +.object-left { + -o-object-position: left; + object-position: left; +} + .p-1 { padding: 0.25rem; } @@ -2489,6 +2384,14 @@ body a, body button { margin-top: 2rem; } +.hover\:border-primary-400:hover { + border-color: var(--color-primary-400); +} + +.hover\:border-primary-500:hover { + border-color: var(--color-primary-500); +} + .hover\:bg-primary-600:hover { background-color: var(--color-primary-600); } @@ -2509,14 +2412,14 @@ body a, body button { color: var(--color-primary-400); } -.hover\:text-neutral:hover { - color: var(--color-neutral); -} - .hover\:text-primary-500:hover { color: var(--color-primary-500); } +.hover\:text-neutral:hover { + color: var(--color-neutral); +} + .hover\:underline:hover { text-decoration: underline; } @@ -2544,165 +2447,171 @@ body a, body button { text-decoration-thickness: 2px; } -@media (prefers-color-scheme: dark) { - .dark\:prose-light { - color: var(--color-neutral-400); - } +.dark .dark\:prose-light { + color: var(--color-neutral-400); +} - .dark\:prose-light a { - color: var(--color-primary-400); - -webkit-text-decoration-color: var(--color-neutral-500); - text-decoration-color: var(--color-neutral-500); - } +.dark .dark\:prose-light a { + color: var(--color-primary-400); + -webkit-text-decoration-color: var(--color-neutral-500); + text-decoration-color: var(--color-neutral-500); +} - .dark\:prose-light strong { - color: var(--color-neutral); - } +.dark .dark\:prose-light strong { + color: var(--color-neutral); +} - .dark\:prose-light ol > li::before { - color: var(--color-neutral-400); - } +.dark .dark\:prose-light ol > li::before { + color: var(--color-neutral-400); +} - .dark\:prose-light ul > li::before { - background-color: var(--color-neutral-600); - } +.dark .dark\:prose-light ul > li::before { + background-color: var(--color-neutral-600); +} - .dark\:prose-light hr { - border-color: var(--color-neutral-500); - } +.dark .dark\:prose-light hr { + border-color: var(--color-neutral-500); +} - .dark\:prose-light blockquote { - color: var(--color-neutral-200); - border-left-color: var(--color-primary-900); - } +.dark .dark\:prose-light blockquote { + color: var(--color-neutral-200); + border-left-color: var(--color-primary-900); +} - .dark\:prose-light h1 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h1 { + color: var(--color-neutral); +} - .dark\:prose-light h2 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h2 { + color: var(--color-neutral); +} - .dark\:prose-light h3 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h3 { + color: var(--color-neutral); +} - .dark\:prose-light h4 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h4 { + color: var(--color-neutral); +} - .dark\:prose-light figure figcaption { - color: var(--color-neutral-400); - } +.dark .dark\:prose-light figure figcaption { + color: var(--color-neutral-400); +} - .dark\:prose-light code { - color: var(--color-secondary-400); - } +.dark .dark\:prose-light code { + color: var(--color-secondary-400); +} - .dark\:prose-light a code { - color: var(--color-neutral); - } +.dark .dark\:prose-light a code { + color: var(--color-neutral); +} - .dark\:prose-light pre { - color: var(--color-neutral-200); - background-color: var(--color-neutral-700); - } +.dark .dark\:prose-light pre { + color: var(--color-neutral-200); + background-color: var(--color-neutral-700); +} - .dark\:prose-light pre code { - color: var(--color-neutral-200); - } +.dark .dark\:prose-light pre code { + color: var(--color-neutral-200); +} - .dark\:prose-light thead { - color: var(--color-neutral); - border-bottom-color: var(--color-neutral-500); - } +.dark .dark\:prose-light thead { + color: var(--color-neutral); + border-bottom-color: var(--color-neutral-500); +} - .dark\:prose-light tbody tr { - border-bottom-color: var(--color-neutral-700); - } +.dark .dark\:prose-light tbody tr { + border-bottom-color: var(--color-neutral-700); +} - .dark\:prose-light kbd { - background-color: var(--color-neutral-700); - color: var(--color-neutral-300); - } +.dark .dark\:prose-light kbd { + background-color: var(--color-neutral-700); + color: var(--color-neutral-300); +} - .dark\:prose-light mark { - background-color: var(--color-secondary-400); - } +.dark .dark\:prose-light mark { + background-color: var(--color-secondary-400); +} - .dark\:border-neutral-600 { - border-color: var(--color-neutral-600); - } +.dark .dark\:inline { + display: inline; +} - .dark\:border-primary-600 { - border-color: var(--color-primary-600); - } +.dark .dark\:hidden { + display: none; +} - .dark\:bg-neutral-800 { - background-color: var(--color-neutral-800); - } +.dark .dark\:border-neutral-600 { + border-color: var(--color-neutral-600); +} - .dark\:bg-primary-400 { - background-color: var(--color-primary-400); - } +.dark .dark\:border-primary-600 { + border-color: var(--color-primary-600); +} - .dark\:bg-neutral-700 { - background-color: var(--color-neutral-700); - } +.dark .dark\:bg-neutral-800 { + background-color: var(--color-neutral-800); +} - .dark\:bg-primary-900 { - background-color: var(--color-primary-900); - } +.dark .dark\:bg-primary-400 { + background-color: var(--color-primary-400); +} - .dark\:bg-primary-800 { - background-color: var(--color-primary-800); - } +.dark .dark\:bg-neutral-700 { + background-color: var(--color-neutral-700); +} - .dark\:text-neutral-500 { - color: var(--color-neutral-500); - } +.dark .dark\:bg-primary-900 { + background-color: var(--color-primary-900); +} - .dark\:text-neutral { - color: var(--color-neutral); - } +.dark .dark\:bg-primary-800 { + background-color: var(--color-primary-800); +} - .dark\:text-neutral-300 { - color: var(--color-neutral-300); - } +.dark .dark\:text-neutral-500 { + color: var(--color-neutral-500); +} - .dark\:text-primary-400 { - color: var(--color-primary-400); - } +.dark .dark\:text-neutral { + color: var(--color-neutral); +} - .dark\:text-neutral-600 { - color: var(--color-neutral-600); - } +.dark .dark\:text-neutral-300 { + color: var(--color-neutral-300); +} - .dark\:text-neutral-800 { - color: var(--color-neutral-800); - } +.dark .dark\:text-primary-400 { + color: var(--color-primary-400); +} - .dark\:underline-neutral-600 { - -webkit-text-decoration-color: var(--color-neutral-600); - text-decoration-color: var(--color-neutral-600); - } +.dark .dark\:text-neutral-600 { + color: var(--color-neutral-600); +} - .dark\:hover\:bg-primary-400:hover { - background-color: var(--color-primary-400); - } +.dark .dark\:text-neutral-800 { + color: var(--color-neutral-800); +} - .dark\:hover\:\!bg-primary-700:hover { - background-color: var(--color-primary-700) !important; - } +.dark .dark\:underline-neutral-600 { + -webkit-text-decoration-color: var(--color-neutral-600); + text-decoration-color: var(--color-neutral-600); +} - .dark\:hover\:text-primary-400:hover { - color: var(--color-primary-400); - } +.dark .dark\:hover\:bg-primary-400:hover { + background-color: var(--color-primary-400); +} - .dark\:hover\:text-neutral-800:hover { - color: var(--color-neutral-800); - } +.dark .dark\:hover\:\!bg-primary-700:hover { + background-color: var(--color-primary-700) !important; +} + +.dark .dark\:hover\:text-primary-400:hover { + color: var(--color-primary-400); +} + +.dark .dark\:hover\:text-neutral-800:hover { + color: var(--color-neutral-800); } @media (min-width: 640px) { diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg new file mode 100644 index 00000000..9fbb0a34 --- /dev/null +++ b/assets/icons/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg new file mode 100644 index 00000000..1a586124 --- /dev/null +++ b/assets/icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/config/_default/params.toml b/config/_default/params.toml index e246751d..875dc423 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -6,6 +6,8 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" +# darkMode = "auto" +# darkToggle = false # logo = "img/logo.jpg" # description = "My awesome website" # mainSections = ["section1", "section2"] diff --git a/exampleSite/assets/logo.jpg b/exampleSite/assets/logo.jpg new file mode 100644 index 00000000..79dc6e82 Binary files /dev/null and b/exampleSite/assets/logo.jpg differ diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 415e1807..de6461ab 100755 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -27,6 +27,9 @@ summaryLength = 0 [taxonomies] tag = "tags" +[params] + # logo = "logo.jpg" + [params.homepage] layout = "custom" showRecent = true diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index 402092ad..4303d4e2 100644 --- a/exampleSite/content/docs/configuration.md +++ b/exampleSite/content/docs/configuration.md @@ -56,6 +56,8 @@ Many of the article defaults here can be overridden on a per article basis by sp |Name|Type|Default|Description| | --- | --- | --- | --- | |`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| +|`darkMode`|boolean or string|`"auto"`|The preferred theme appearance for dark mode. Set to `true` to force dark appearance or `false` to force light appearance. Using `"auto"` will defer to the user's operating system preference.| +|`darkToggle`|boolean|`false`|When `darkMode` is set to `"auto"`, this parameter determines whether or not to show the appearance toggle in the site footer. The browser's local storage is used to persist the user's preference.| |`logo`|string|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.| |`description`|string|_Not set_|The description of the website for metadata purposes.| |`mainSections`|array of strings|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.| diff --git a/exampleSite/content/samples/_index.md b/exampleSite/content/samples/_index.md index fcce5fef..2d9820c9 100755 --- a/exampleSite/content/samples/_index.md +++ b/exampleSite/content/samples/_index.md @@ -11,9 +11,7 @@ cascade: Congo brings your content to life. :heart_eyes: {{< /lead >}} -This section contains some demo pages that show how Congo renders different types of content. These pages come from Hugo's official [hugoBasicExample](https://github.com/gohugoio/hugoBasicExample) repository. - -You can also see an example [taxonomy listing]({{< ref "tags" >}}) page. +This section contains some demo pages that show how Congo renders different types of content. You can also see an example [taxonomy listing]({{< ref "tags" >}}) page. _**Sidenote:** This page is just a standard Congo article listing and Hugo has been configured to generate a `samples` content type and display article summaries._ diff --git a/exampleSite/content/samples/diagrams-flowcharts.md b/exampleSite/content/samples/diagrams-flowcharts.md new file mode 100755 index 00000000..d815552d --- /dev/null +++ b/exampleSite/content/samples/diagrams-flowcharts.md @@ -0,0 +1,90 @@ +--- +title: "Diagrams and Flowcharts" +date: 2019-03-06 +description: "Guide to Mermaid usage in Congo" +summary: "It's easy to add diagrams and flowcharts to articles using Mermaid." +tags: ["mermaid", "sample", "diagram"] +--- + +Mermaid diagrams are supported in Congo using the `mermaid` shortcode. Simply wrap the diagram markup within the shortcode. Congo automatically themes Mermaid diagrams to match the configured `colorScheme` parameter. + +The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts.md) on GitHub to see the markup. + +## Flowchart + +{{< mermaid >}} +graph TD +A[Christmas] -->|Get money| B(Go shopping) +B --> C{Let me think} +B --> G[/Another/] +C ==>|One| D[Laptop] +C -->|Two| E[iPhone] +C -->|Three| F[Car] +subgraph Section +C +D +E +F +G +end +{{< /mermaid >}} + +## Sequence diagram + +{{< mermaid >}} +sequenceDiagram +autonumber +par Action 1 +Alice->>John: Hello John, how are you? +and Action 2 +Alice->>Bob: Hello Bob, how are you? +end +Alice->>+John: Hello John, how are you? +Alice->>+John: John, can you hear me? +John-->>-Alice: Hi Alice, I can hear you! +Note right of John: John is perceptive +John-->>-Alice: I feel great! +loop Every minute +John-->Alice: Great! +end +{{< /mermaid >}} + +## Class diagram + +{{< mermaid >}} +classDiagram +Animal "1" <|-- Duck +Animal <|-- Fish +Animal <--o Zebra +Animal : +int age +Animal : +String gender +Animal: +isMammal() +Animal: +mate() +class Duck{ ++String beakColor ++swim() ++quack() +} +class Fish{ +-int sizeInFeet +-canEat() +} +class Zebra{ ++bool is_wild ++run() +} +{{< /mermaid >}} + +## Entity relationship diagram + +{{< mermaid >}} +erDiagram +CUSTOMER }|..|{ DELIVERY-ADDRESS : has +CUSTOMER ||--o{ ORDER : places +CUSTOMER ||--o{ INVOICE : "liable for" +DELIVERY-ADDRESS ||--o{ ORDER : receives +INVOICE ||--|{ ORDER : covers +ORDER ||--|{ ORDER-ITEM : includes +PRODUCT-CATEGORY ||--|{ PRODUCT : contains +PRODUCT ||--o{ ORDER-ITEM : "ordered in" +{{< /mermaid >}} diff --git a/exampleSite/content/samples/emoji-support.md b/exampleSite/content/samples/emoji-support.md deleted file mode 100755 index e522e6d2..00000000 --- a/exampleSite/content/samples/emoji-support.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: "Emoji Support" -date: 2019-03-05 -description: "Guide to emoji usage in Hugo" -summary: "๐Ÿ“–๐Ÿž๏ธ๐Ÿง—๐Ÿฝ๐Ÿช‚๐Ÿ‰๐Ÿง™๐Ÿฝโ€โ™‚๏ธ๐Ÿงš๐Ÿฝ๐Ÿ‘ธ" -tags: ["emoji", "sample"] ---- - -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). - -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. - -

๐Ÿ™ˆ :see_no_evil: ๐Ÿ™‰ :hear_no_evil: ๐Ÿ™Š :speak_no_evil:

-
- -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. diff --git a/exampleSite/content/samples/emoji.md b/exampleSite/content/samples/emoji.md new file mode 100755 index 00000000..4823a415 --- /dev/null +++ b/exampleSite/content/samples/emoji.md @@ -0,0 +1,19 @@ +--- +title: "Emoji" +date: 2019-03-05 +description: "Guide to Emoji usage in Congo" +summary: "๐Ÿ“–๐Ÿž๏ธ๐Ÿง—๐Ÿฝ๐Ÿช‚๐Ÿ‰๐Ÿง™๐Ÿฝโ€โ™‚๏ธ๐Ÿงš๐Ÿฝ๐Ÿ‘ธ" +tags: ["emoji", "sample"] +--- + +Emoji is supported throughout Congo by default. Emoji can be used in titles, menu items and article content. + +{{< alert >}} +**Note:** 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. +{{< /alert >}} + +Emoji replacements are controlled via the `enableEmoji` parameter in your [site configuration]({{< ref "configuration#site-configuration" >}}). Set it to `true` and then you can type Emoji shorthand codes directly in content files. + +**Example:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:. + +The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes. diff --git a/exampleSite/content/samples/markdown-syntax.md b/exampleSite/content/samples/markdown.md similarity index 94% rename from exampleSite/content/samples/markdown-syntax.md rename to exampleSite/content/samples/markdown.md index 9b5821b1..a163f0f4 100755 --- a/exampleSite/content/samples/markdown-syntax.md +++ b/exampleSite/content/samples/markdown.md @@ -1,11 +1,11 @@ --- -title: "Markdown Syntax Guide" +title: "Markdown" date: 2019-03-11 description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements." tags: ["markdown", "css", "html", "sample"] --- -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. +This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated. diff --git a/exampleSite/content/samples/placeholder-text.md b/exampleSite/content/samples/placeholder-text.md index a28b3f2d..5228caa5 100755 --- a/exampleSite/content/samples/placeholder-text.md +++ b/exampleSite/content/samples/placeholder-text.md @@ -22,24 +22,16 @@ Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silen 4. Arcanaque montibus omnes 5. Quidem et -# Vagus elidunt +## Vagus elidunt [The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon) -## Mane refeci capiebant unda mulcebat +### Mane refeci capiebant unda mulcebat Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis. 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**. - -{{< css.inline >}} - - - -{{< /css.inline >}} diff --git a/exampleSite/content/users.md b/exampleSite/content/users.md index ce2953cc..e5ae5be4 100644 --- a/exampleSite/content/users.md +++ b/exampleSite/content/users.md @@ -15,10 +15,11 @@ showEdit: false Real websites that are built with Congo. {{< /lead >}} -| Website | Details | -| -------------------------------------------- | ---------------------------- | -| [jamespanther.com](https://jamespanther.com) | Personal site - Theme author | -| [zekeriyaay.com](https://zekeriyaay.com) | Personal cheat sheets site | -| [srisco.dev](https://srisco.dev) | Personal site | +| Website | Details | +| ---------------------------------------------- | ---------------------------- | +| [jamespanther.com](https://jamespanther.com) | Personal site - Theme author | +| [zekeriyaay.com](https://zekeriyaay.com) | Personal cheat sheets site | +| [srisco.dev](https://srisco.dev) | Personal site | +| [theophile-roos.fr](https://theophile-roos.fr) | Personal site | **Congo user?** To add your site to this list, [submit a pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users.md). diff --git a/i18n/en.yaml b/i18n/en.yaml index 323877b4..1c539b3b 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -16,6 +16,8 @@ error: 404_description: "It seems that the page you've requested does not exist." footer: + dark_appearance: "Switch to dark appearance" + light_appearance: "Switch to light appearance" powered_by: "Powered by {{ .Hugo }} & {{ .Congo }}" list: diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 014cdf5c..bfe438fd 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -1,7 +1,7 @@ article: anchor_label: "Ancre" draft: "Brouillon" - edit_title: "Editer" + edit_title: "Editer" reading_time: one: "{{ .Count }} min" other: "{{ .Count }} mins" @@ -16,6 +16,8 @@ error: 404_description: "Il semble que la page que vous cherchiez n'existe pas." footer: + # dark_appearance: "Switch to dark appearance" + # light_appearance: "Switch to light appearance" powered_by: "Propulsรฉ par {{ .Hugo }} & {{ .Congo }}" list: diff --git a/i18n/zh.yaml b/i18n/zh.yaml index 8237c110..18bb1e52 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -15,6 +15,8 @@ error: 404_description: "ๆ‚จ่ฏทๆฑ‚็š„้กต้ขไผผไนŽไธๅญ˜ๅœจใ€‚" footer: + # dark_appearance: "Switch to dark appearance" + # light_appearance: "Switch to light appearance" powered_by: "็”ฑ {{ .Hugo }} & {{ .Congo }} ๅผบๅŠ›้ฉฑๅŠจ" list: @@ -25,6 +27,7 @@ sharing: email: "้€š่ฟ‡็”ตๅญ้‚ฎไปถๅ‘้€" facebook: "ๅˆ†ไบซๅˆฐ Facebook" linkedin: "ๅˆ†ไบซๅˆฐ LinkedIn" + # pinterest: "Pin on Pinterest" reddit: "ๆไบคๅˆฐ Reddit" twitter: "ๅˆ†ไบซๅˆฐ Twitter" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 340e219f..a5b0efa9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,8 @@ - + {{- partial "head.html" . -}} {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} -
+
{{ .Summary | emojify }}
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d95c02ce..33c773ab 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -16,26 +16,53 @@ {{ end }} - {{/* Copyright */}} -

- {{- with .Site.Copyright }} - {{ . | emojify | markdownify }} - {{- else }} - © - {{ now.Format "2006" }} - {{ .Site.Author.name | markdownify | emojify }} - {{- end }} -

- {{/* Theme attribution */}} - {{ if .Site.Params.attribution | default true }} -

- {{ $hugo := printf `Hugo` - }} - {{ $congo := printf `Congo` }} - {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }} -

- {{ end }} +
+
+ {{/* Copyright */}} +

+ {{- with .Site.Copyright }} + {{ . | emojify | markdownify }} + {{- else }} + © + {{ now.Format "2006" }} + {{ .Site.Author.name | markdownify | emojify }} + {{- end }} +

+ {{/* Theme attribution */}} + {{ if .Site.Params.attribution | default true }} +

+ {{ $hugo := printf `Hugo` + }} + {{ $congo := printf `Congo` }} + {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }} +

+ {{ end }} +
+ {{/* Dark mode toggle */}} + {{ if and (.Site.Params.darkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }} +
+ + +
+ {{ end }} +
{{/* Extend footer - eg. for extra scripts, etc. */}} {{ if templates.Exists "partials/extend-footer.html" }} {{ partialCached "extend-footer.html" . }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 13c270d5..674417a0 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -62,6 +62,31 @@ integrity="{{ $customStyles.Data.Integrity }}" /> {{ end }} + {{ if eq (.Site.Params.darkMode | default "auto") "auto" }} + + {{ else }} + + {{ end }} {{/* Icons */}} {{ if templates.Exists "partials/favicons.html" }} {{ partialCached "favicons.html" .Site }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 0a6a6778..ffd4d452 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -11,6 +11,7 @@ src="{{ $logo.RelPermalink }}" width="{{ div $logo.Width 2 }}" height="{{ div $logo.Height 2 }}" + class="max-w-[10rem] max-h-[10rem] object-scale-down object-left" alt="{{ .Site.Title }}" /> diff --git a/tailwind.config.js b/tailwind.config.js index 33f31476..5c1de438 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,7 +10,7 @@ module.exports = { "./themes/congo/content/**/*.{html,md}", ], }, - darkMode: "media", + darkMode: "class", theme: { colors: { transparent: "transparent",