marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

📝 Update docs

pull/100/head
James Panther 2022-01-27 15:11:52 +11:00
parent 15e67f5903
commit 6a23863ff9
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
exampleSite/content/docs/advanced-customisation.md
View File

@ -37,6 +37,16 @@ In addition to the default schemes, you can also create your own and re-style th
Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour. Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values.
```css
:root {
--color-primary-500: 139, 92, 246;
}
```
This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`.
Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
## Overriding the stylesheet ## Overriding the stylesheet
@ -60,7 +70,7 @@ html {
Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`. Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`.
## Building the Tailwind CSS from source ## Building the theme CSS from source
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. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet. 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. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.

16
exampleSite/content/docs/shortcodes/index.md
View File

@ -107,12 +107,18 @@ The `figure` shortcode accepts five parameters:
|Parameter|Description| |Parameter|Description|
|---|---| |---|---|
|`src`|**Required.** The filename of the image. This image must be a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page.| |`src`|**Required.** The filename of the image. This image must be a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page.|
|`alt`|The alternate text for the image.| |`alt`|[Alternative text description](https://moz.com/learn/seo/alt-text) for the image.|
|`caption`|The image caption to be displayed below the image.| |`caption`|Markdown for the image caption which will be displayed below the image.|
|`class`|Additional CSS classes to add to the image.| |`class`|Additional CSS classes to add to the image.|
`href`|The URL that the image should be linked to.| `href`|URL that the image should be linked to.|
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
```md
![Alt text](image.jpg "Image caption")
```
**Example:** **Example:**
```md ```md
@ -121,6 +127,10 @@ The `figure` shortcode accepts five parameters:
alt="Abstract purple artwork" alt="Abstract purple artwork"
caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
*/>}} */>}}
<!-- OR -->
![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
``` ```
{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} {{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}