diff --git a/CHANGELOG.md b/CHANGELOG.md index 73393785..b795a1c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added +- Multiple colour schemes - Icons for Foursquare and Pinterest ### Fixed diff --git a/README.md b/README.md index 23450493..7768bed7 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,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) - Highly customisable configuration - Multiple homepage layouts @@ -114,58 +115,7 @@ links = [ ## Advanced customisation -There are a couple of ways you can make style changes to Congo. - -If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles. - -Alternatively, if you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. - -> **Note:** Building the theme manually is intended for advanced users. - -Change into the `themes/congo/` folder and install the project dependencies. - -```bash -npm install -``` - -Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`. - -To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly. - -For example, to change to a green colour scheme, you could apply these changes: - -```js - // themes/congo/tailwind.config.js - - theme: { - colors: { - transparent: "transparent", - white: colors.white, - gray: colors.gray, - primary: colors.lime, - secondary: colors.teal, - }, - ... - } -``` - -For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). - -After editing the configuration, you need to rebuild the theme's stylesheets. - -```bash -npm run build -``` - -This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`. - -To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode. - -```bash -npm run dev -``` - -Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website. +Refer to the [theme documentation](https://jpanther.github.io/congo/docs/advanced-customisation/) for details on customising Congo, including rebuilding the theme from scratch. --- diff --git a/assets/css/main.css b/assets/css/main.css index 9cbcfe92..5640ad23 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -46,7 +46,7 @@ body button { /* -- Chroma Highlight -- */ /* Background */ .prose .chroma { - @apply text-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 dark:text-gray-200; + @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200; } /* Other */ .chroma .x { @@ -73,13 +73,13 @@ body button { } /* LineNumbersTable */ .chroma .lnt { - @apply text-gray-600 dark:text-gray-300; + @apply text-neutral-600 dark:text-neutral-300; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } /* LineNumbers */ .chroma .ln { - @apply text-gray-600 dark:text-gray-300; + @apply text-neutral-600 dark:text-neutral-300; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } @@ -300,31 +300,31 @@ body button { } /* Comment */ .chroma .c { - @apply italic text-gray-400 dark:text-gray-500; + @apply italic text-neutral-400 dark:text-neutral-500; } /* CommentHashbang */ .chroma .ch { - @apply italic font-semibold text-gray-400 dark:text-gray-500; + @apply italic font-semibold text-neutral-400 dark:text-neutral-500; } /* CommentMultiline */ .chroma .cm { - @apply italic text-gray-400 dark:text-gray-500; + @apply italic text-neutral-400 dark:text-neutral-500; } /* CommentSingle */ .chroma .c1 { - @apply italic text-gray-400 dark:text-gray-500; + @apply italic text-neutral-400 dark:text-neutral-500; } /* CommentSpecial */ .chroma .cs { - @apply italic text-gray-400 dark:text-gray-500; + @apply italic text-neutral-400 dark:text-neutral-500; } /* CommentPreproc */ .chroma .cp { - @apply italic text-gray-400 dark:text-gray-500; + @apply italic text-neutral-400 dark:text-neutral-500; } /* CommentPreprocFile */ .chroma .cpf { - @apply italic text-gray-400 dark:text-gray-500; + @apply italic text-neutral-400 dark:text-neutral-500; } /* Generic */ .chroma .g { @@ -341,7 +341,7 @@ body button { } /* GenericHeading */ .chroma .gh { - @apply font-semibold text-gray-500; + @apply font-semibold text-neutral-500; } /* GenericInserted */ .chroma .gi { @@ -361,11 +361,11 @@ body button { } /* GenericSubheading */ .chroma .gu { - @apply text-gray-500; + @apply text-neutral-500; } /* GenericTraceback */ .chroma .gt { - @apply text-gray-500; + @apply text-neutral-500; } /* GenericUnderline */ .chroma .gl { diff --git a/assets/css/schemes/avocado.css b/assets/css/schemes/avocado.css new file mode 100644 index 00000000..6ee07b79 --- /dev/null +++ b/assets/css/schemes/avocado.css @@ -0,0 +1,37 @@ +/* Avocado scheme */ +:root { + --color-neutral: #fff; + /* Warm Gray */ + --color-neutral-50: #fafaf9; + --color-neutral-100: #f5f5f4; + --color-neutral-200: #e7e5e4; + --color-neutral-300: #d6d3d1; + --color-neutral-400: #a8a29e; + --color-neutral-500: #78716c; + --color-neutral-600: #57534e; + --color-neutral-700: #44403c; + --color-neutral-800: #292524; + --color-neutral-900: #1c1917; + /* Lime */ + --color-primary-50: #f7fee7; + --color-primary-100: #ecfccb; + --color-primary-200: #d9f99d; + --color-primary-300: #bef264; + --color-primary-400: #a3e635; + --color-primary-500: #84cc16; + --color-primary-600: #65a30d; + --color-primary-700: #4d7c0f; + --color-primary-800: #3f6212; + --color-primary-900: #365314; + /* Emerald */ + --color-secondary-50: #ecfdf5; + --color-secondary-100: #d1fae5; + --color-secondary-200: #a7f3d0; + --color-secondary-300: #6ee7b7; + --color-secondary-400: #34d399; + --color-secondary-500: #10b981; + --color-secondary-600: #059669; + --color-secondary-700: #047857; + --color-secondary-800: #065f46; + --color-secondary-900: #064e3b; +} diff --git a/assets/css/schemes/congo.css b/assets/css/schemes/congo.css new file mode 100644 index 00000000..3a67ebc3 --- /dev/null +++ b/assets/css/schemes/congo.css @@ -0,0 +1,37 @@ +/* Congo scheme */ +:root { + --color-neutral: #fff; + /* Gray */ + --color-neutral-50: #fafafa; + --color-neutral-100: #f4f4f5; + --color-neutral-200: #e4e4e7; + --color-neutral-300: #d4d4d8; + --color-neutral-400: #a1a1aa; + --color-neutral-500: #71717a; + --color-neutral-600: #52525b; + --color-neutral-700: #3f3f46; + --color-neutral-800: #27272a; + --color-neutral-900: #18181b; + /* Violet */ + --color-primary-50: #f5f3ff; + --color-primary-100: #ede9fe; + --color-primary-200: #ddd6fe; + --color-primary-300: #c4b5fd; + --color-primary-400: #a78bfa; + --color-primary-500: #8b5cf6; + --color-primary-600: #7c3aed; + --color-primary-700: #6d28d9; + --color-primary-800: #5b21b6; + --color-primary-900: #4c1d95; + /* Fuchsia */ + --color-secondary-50: #fdf4ff; + --color-secondary-100: #fae8ff; + --color-secondary-200: #f5d0fe; + --color-secondary-300: #f0abfc; + --color-secondary-400: #e879f9; + --color-secondary-500: #d946ef; + --color-secondary-600: #c026d3; + --color-secondary-700: #a21caf; + --color-secondary-800: #86198f; + --color-secondary-900: #701a75; +} diff --git a/assets/css/schemes/fire.css b/assets/css/schemes/fire.css new file mode 100644 index 00000000..e91cddd2 --- /dev/null +++ b/assets/css/schemes/fire.css @@ -0,0 +1,37 @@ +/* Fire scheme */ +:root { + --color-neutral: #fff; + /* Warm Gray */ + --color-neutral-50: #fafaf9; + --color-neutral-100: #f5f5f4; + --color-neutral-200: #e7e5e4; + --color-neutral-300: #d6d3d1; + --color-neutral-400: #a8a29e; + --color-neutral-500: #78716c; + --color-neutral-600: #57534e; + --color-neutral-700: #44403c; + --color-neutral-800: #292524; + --color-neutral-900: #1c1917; + /* Orange */ + --color-primary-50: #fff7ed; + --color-primary-100: #ffedd5; + --color-primary-200: #fed7aa; + --color-primary-300: #fdba74; + --color-primary-400: #fb923c; + --color-primary-500: #f97316; + --color-primary-600: #ea580c; + --color-primary-700: #c2410c; + --color-primary-800: #9a3412; + --color-primary-900: #7c2d12; + /* Rose */ + --color-secondary-50: #fff1f2; + --color-secondary-100: #ffe4e6; + --color-secondary-200: #fecdd3; + --color-secondary-300: #fda4af; + --color-secondary-400: #fb7185; + --color-secondary-500: #f43f5e; + --color-secondary-600: #e11d48; + --color-secondary-700: #be123c; + --color-secondary-800: #9f1239; + --color-secondary-900: #881337; +} diff --git a/assets/css/schemes/ocean.css b/assets/css/schemes/ocean.css new file mode 100644 index 00000000..c93e2a9c --- /dev/null +++ b/assets/css/schemes/ocean.css @@ -0,0 +1,37 @@ +/* Ocean scheme */ +:root { + --color-neutral: #fff; + /* Cool Gray */ + --color-neutral-50: #f8fafc; + --color-neutral-100: #f1f5f9; + --color-neutral-200: #e2e8f0; + --color-neutral-300: #cbd5e1; + --color-neutral-400: #94a3b8; + --color-neutral-500: #64748b; + --color-neutral-600: #475569; + --color-neutral-700: #334155; + --color-neutral-800: #1e293b; + --color-neutral-900: #0f172a; + /* Blue */ + --color-primary-50: #eff6ff; + --color-primary-100: #dbeafe; + --color-primary-200: #bfdbfe; + --color-primary-300: #93c5fd; + --color-primary-400: #60a5fa; + --color-primary-500: #3b82f6; + --color-primary-600: #2563eb; + --color-primary-700: #1d4ed8; + --color-primary-800: #1e40af; + --color-primary-900: #1e3a8a; + /* Cyan */ + --color-secondary-50: #ecfeff; + --color-secondary-100: #cffafe; + --color-secondary-200: #a5f3fc; + --color-secondary-300: #67e8f9; + --color-secondary-400: #22d3ee; + --color-secondary-500: #06b6d4; + --color-secondary-600: #0891b2; + --color-secondary-700: #0e7490; + --color-secondary-800: #155e75; + --color-secondary-900: #164e63; +} diff --git a/config/_default/params.toml b/config/_default/params.toml index f5e085da..21678a2e 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -5,6 +5,7 @@ # Refer to the theme docs for more details about each of these parameters. # https://jpanther.github.io/congo/docs/configuration/#theme-parameters +colorScheme = "congo" # description = "My awesome website" # mainSections = ["section1", "section2"] diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 5c4ceb2a..5518086f 100755 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -11,10 +11,10 @@ A simple, lightweight theme for Hugo built with Tailwind CSS. {{< icon "exclamation-triangle" >}} - - This is a demo of the page layout. + + This is a demo of the page layout.