Add scrollbar plugin and update README
This commit is contained in:
Alex Shpak
parent
a23d848db2
commit
cb61957623
3 changed files with 43 additions and 96 deletions
123
README.md
123
README.md
|
|
@ -14,6 +14,7 @@
|
||||||
- [Blog](#blog)
|
- [Blog](#blog)
|
||||||
- [Configuration](#configuration)
|
- [Configuration](#configuration)
|
||||||
- [Shortcodes](#shortcodes)
|
- [Shortcodes](#shortcodes)
|
||||||
|
- [Versioning](#versioning)
|
||||||
- [Contributing](#contributing)
|
- [Contributing](#contributing)
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
@ -24,7 +25,9 @@
|
||||||
- Customisable
|
- Customisable
|
||||||
- Zero initial configuration
|
- Zero initial configuration
|
||||||
- Handy shortcodes
|
- Handy shortcodes
|
||||||
- Optional support for Disqus
|
- Comments support
|
||||||
|
- Simple blog and taxonomy
|
||||||
|
- Primary features work without JavaScript
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
|
|
@ -228,6 +231,18 @@ There are few empty partials you can override in `layouts/partials/`
|
||||||
| `assets/_variables.scss` | Override default SCSS variables |
|
| `assets/_variables.scss` | Override default SCSS variables |
|
||||||
| `assets/_fonts.scss` | Replace default font with custom fonts (e.g. local files or remote like google fonts) |
|
| `assets/_fonts.scss` | Replace default font with custom fonts (e.g. local files or remote like google fonts) |
|
||||||
|
|
||||||
|
### Plugins
|
||||||
|
|
||||||
|
There are few features implemented as plugable `scss` styles. Usually this are features that doesn't make it to the core but still might be useful.
|
||||||
|
|
||||||
|
| Plugin | Description |
|
||||||
|
| --------------------------------- | ----------------------------------------------------------- |
|
||||||
|
| `assets/plugins/_dark.scss` | Switches site to dark mode |
|
||||||
|
| `assets/plugins/_numbered.scss` | Makes headings in markdown numbered, e.g. `1.1`, `1.2` |
|
||||||
|
| `assets/plugins/_scrollbars.scss` | Overrides scrollbar styles to look similar across platforms |
|
||||||
|
|
||||||
|
To enable plugin add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root. Exception is `_dark.scss` which contains only variables and should be added to `assets/_variables.scss`.
|
||||||
|
|
||||||
### Hugo Internal Templates
|
### Hugo Internal Templates
|
||||||
|
|
||||||
There are few hugo tempaltes inserted in `<head>`
|
There are few hugo tempaltes inserted in `<head>`
|
||||||
|
|
@ -237,98 +252,13 @@ There are few hugo tempaltes inserted in `<head>`
|
||||||
|
|
||||||
## Shortcodes
|
## Shortcodes
|
||||||
|
|
||||||
### Hint
|
- [Buttons](https://themes.gohugo.io/theme/hugo-book/docs/shortcodes/buttons/)
|
||||||
|
- [Columns](https://themes.gohugo.io/theme/hugo-book/docs/shortcodes/columns/)
|
||||||
Hint shortcode can be used as hint/alerts/notification block. There are 3 colors to choose: `info`, `warning` and `danger`.
|
- [Expand](https://themes.gohugo.io/theme/hugo-book/docs/shortcodes/expand/)
|
||||||
|
- [Hints](https://themes.gohugo.io/theme/hugo-book/docs/shortcodes/hints/)
|
||||||
```tpl
|
- [KaTeX](https://themes.gohugo.io/theme/hugo-book/docs/shortcodes/katex/)
|
||||||
{{< hint [info|warning|danger] >}}
|
- [Mermaid](https://themes.gohugo.io/theme/hugo-book/docs/shortcodes/mermaid/)
|
||||||
**Markdown content**
|
- [Tabs](https://themes.gohugo.io/theme/hugo-book/docs/shortcodes/tabs/)
|
||||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
|
||||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
|
||||||
{{< /hint >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Buttons
|
|
||||||
|
|
||||||
Buttons are styled links to internal of external pages
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< button relref="/" >}}Get Home{{< /button >}}
|
|
||||||
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Tabs
|
|
||||||
|
|
||||||
Useful if you want to show alternative information per platform or setting.
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< tabs "uniqueid" >}}
|
|
||||||
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
|
|
||||||
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
|
|
||||||
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
|
|
||||||
{{< /tabs >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Multi column text
|
|
||||||
|
|
||||||
Organize text in 2 or more columns to use space efficiently.
|
|
||||||
|
|
||||||
```html
|
|
||||||
{{< columns >}} <!-- begin columns block -->
|
|
||||||
# Left Content Lorem markdownum insigne...
|
|
||||||
|
|
||||||
<---> <!-- magic sparator, between columns -->
|
|
||||||
|
|
||||||
# Mid Content Lorem markdownum insigne...
|
|
||||||
|
|
||||||
<---> <!-- magic sparator, between columns -->
|
|
||||||
|
|
||||||
# Right Content Lorem markdownum insigne...
|
|
||||||
{{< /columns >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Expand
|
|
||||||
|
|
||||||
Provides clickable panel that show extra hidden content.
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< expand >}}
|
|
||||||
## Markdown content
|
|
||||||
{{< /expand >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Mermaid Charts
|
|
||||||
|
|
||||||
Render various charts with [mermaidjs](https://mermaidjs.github.io/)
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< mermaid >}}
|
|
||||||
sequenceDiagram
|
|
||||||
Alice->>Bob: Hello Bob, how are you?
|
|
||||||
alt is sick
|
|
||||||
Bob->>Alice: Not so good :(
|
|
||||||
else is well
|
|
||||||
Bob->>Alice: Feeling fresh like a daisy
|
|
||||||
end
|
|
||||||
opt Extra response
|
|
||||||
Bob->>Alice: Thanks for asking
|
|
||||||
end
|
|
||||||
{{< /mermaid >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### KaTeX Syntax
|
|
||||||
|
|
||||||
Render math formulas with [KaTeX](https://katex.org/)
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< katex >}}
|
|
||||||
x = \begin{cases}
|
|
||||||
a &\text{if } b \\
|
|
||||||
c &\text{if } d
|
|
||||||
\end{cases}
|
|
||||||
{{< /katex >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Versioning
|
## Versioning
|
||||||
|
|
||||||
|
|
@ -343,8 +273,9 @@ If you want lower maintenance use one of released versions. If you want to live
|
||||||
Contributions are welcome and I will review and consider pull requests.
|
Contributions are welcome and I will review and consider pull requests.
|
||||||
Primary goals are:
|
Primary goals are:
|
||||||
|
|
||||||
- Keep it simple
|
- Keep it simple.
|
||||||
- Keep minimal (or zero) default configuration
|
- Keep minimal (or zero) default configuration.
|
||||||
- Avoid interference with user-defined layouts
|
- Avoid interference with user-defined layouts.
|
||||||
|
- Avoid using JS if it can be solved by CSS.
|
||||||
|
|
||||||
Feel free to open issue if you missing some configuration or customisation option.
|
Feel free to open issue if you missing some configuration or customisation option.
|
||||||
|
|
|
||||||
15
assets/plugins/_scrollbars.scss
Normal file
15
assets/plugins/_scrollbars.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
@import "defaults";
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: $padding-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: transparent;
|
||||||
|
border-radius: $padding-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
:hover::-webkit-scrollbar-thumb {
|
||||||
|
background: $gray-500;
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
/* You can add custom styles here. */
|
/* You can add custom styles here. */
|
||||||
|
|
||||||
// @import "plugins/numbered";
|
// @import "plugins/numbered";
|
||||||
|
// @import "plugins/scrollbars";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue