Enable alternative themes for Bootstrap (e.g. Boostwatch)
Alchemy is a great theme, but it was not using the full potential of underlying technology. Bootstrap provides an easy way to customize look and feel of rendered pages, and a lot of themes for Bootstrap are freely available, e.g. at <https://boostwatch.com> This commit introduces a new configuration variable BOOTSTRAP_CSS to make use of any existing Bootstrap skins. All incompatibilities in `theme.css` were fixed: - Instead of using constant color values we use Bootstrap css variables for colors: <https://getbootstrap.com/docs/4.3/getting-started/theming/#css-variables> - The only hardcoded color value left is the color for header/footer borders. It was moved into a variable `--alchemy-border` for easier overriding if needed. I have tested the current value against both dark and light Boostwatch themes, it works ok. - Pagination template was slightly changed to avoid producing invisible text with some of Bootstrap skinsmain
parent
6a3e2bb31a
commit
18996a6c1d
|
@ -56,6 +56,7 @@ Visit the [Settings wiki](https://github.com/nairobilug/pelican-alchemy/wiki/Set
|
||||||
- **DESCRIPTION**: Index HTML head `<meta>` description.
|
- **DESCRIPTION**: Index HTML head `<meta>` description.
|
||||||
- **LINKS**: A list of tuples (Title, URL) for menu links.
|
- **LINKS**: A list of tuples (Title, URL) for menu links.
|
||||||
- **ICONS**: A list of tuples (Icon, URL) for icon links.
|
- **ICONS**: A list of tuples (Icon, URL) for icon links.
|
||||||
|
- **BOOTSTRAP_CSS**: URL of Bootstrap CSS file. Use this to enable Boostwatch themes.
|
||||||
- **PYGMENTS_STYLE**: Built-in Pygments style for syntax highlighting.
|
- **PYGMENTS_STYLE**: Built-in Pygments style for syntax highlighting.
|
||||||
- **HIDE_AUTHORS**: Hide the author(s) of an article - useful for single author sites.
|
- **HIDE_AUTHORS**: Hide the author(s) of an article - useful for single author sites.
|
||||||
- **RFG_FAVICONS**: Use a Favicon Generator package.
|
- **RFG_FAVICONS**: Use a Favicon Generator package.
|
||||||
|
|
|
@ -1,24 +1,14 @@
|
||||||
|
:root {
|
||||||
|
--alchemy-border: rgba(0,0,0,.1);
|
||||||
|
}
|
||||||
::selection {
|
::selection {
|
||||||
background: #0085a1;
|
background: var(--primary);
|
||||||
color: #fff;
|
color: var(--secondary);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:focus,
|
|
||||||
a:hover {
|
|
||||||
color: #0085a1;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
color: #818a91;
|
opacity: .7;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,7 +28,7 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
border-bottom: 1px solid rgba(0,0,0,.1);
|
border-bottom: 1px solid var(--alchemy-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header img {
|
.header img {
|
||||||
|
@ -62,23 +52,18 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
background-color: #fff;
|
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid rgba(0,0,0,.1);
|
border-top: 1px solid var(--alchemy-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight pre {
|
.highlight pre {
|
||||||
border: 1px solid rgba(0,0,0,.1);
|
border: 1px solid var(--alchemy-border);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination .page-link {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.teaser header ul {
|
.teaser header ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
<meta name="theme-color" content="#333333">
|
<meta name="theme-color" content="#333333">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/bootstrap.min.css">
|
<link rel="stylesheet" href="{{ BOOTSTRAP_CSS or SITEURL + '/theme/css/bootstrap.min.css'}}">
|
||||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/font-awesome.min.css">
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/font-awesome.min.css">
|
||||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pygments/{{ PYGMENTS_STYLE|default('default') }}.min.css">
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pygments/{{ PYGMENTS_STYLE|default('default') }}.min.css">
|
||||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/theme.css">
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/theme.css">
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="page-item disabled">
|
<li class="page-item">
|
||||||
<span class="page-link">{{ articles_page.number }} of {{ articles_paginator.num_pages }}</span>
|
<span class="page-link">{{ articles_page.number }} of {{ articles_paginator.num_pages }}</span>
|
||||||
</li>
|
</li>
|
||||||
{% if articles_page.has_next() %}
|
{% if articles_page.has_next() %}
|
||||||
|
|
Loading…
Reference in New Issue