yann/hugo-scroll
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

overriding CSS variables documented

Browse source 
Updated readme, exampleSite, renamed colors.scss to variables.scss
This commit is contained in:
Zdenek K 2023-04-04 21:44:30 +02:00
parent 5aa561ab8a
commit 162234fa25
6 changed files with 67 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
README.md
View file

@ -9,6 +9,52 @@ Clean, responsive, single-page [Hugo](https://gohugo.io/) website theme.
Promo image which may be a bit outdated:<br/>
![Screenshot Hugo Scroll Theme](https://raw.githubusercontent.com/zjedi/hugo-scroll/master/images/tn.png)
## Feature highlights
- Responseive to screen size/shape
- SEO friendly
- Customizable
- [Fork Awesome Icons][fork-awesome-icons] out of the box
- Header logo
- Visual guards to guarantee readability
- External links
- JS/CSS Assets optimized (Minification, Fingerpriting, pipeline-processed into single file)
## Feature details
### Icons
This theme includes the full set of [Fork Awesome 1.2.0 Icons][fork-awesome-icons]. Use the `{{<icon>}}`-[shortcode][hugo-shortcodes] with the respective "fa fa-ICONNAME"-`class` to use an icon directly in your `.markdown` files à la
```markdown
Look at this nice »envelope«-icon: `{{<icon class="fa fa-envelope">}}`. I took this from https://forkaweso.me/Fork-Awesome/icon/envelope/ :-)
```
### Header logo
Configured in `_index.md`, see `exampleSite`: `header_logo: "images/chef-hat.png"`
### Footer version information
In order to see technical version information (extracted from Hugo's [GitInfo](https://gohugo.io/variables/git/))) set the following general option in your config.toml: `enableGitInfo = true`
### External links
You can add an external link in the menu, see `external.md` in the `exampleSite`.
You can also use `extlink` shortcode to create a link opening in a new tab:
```markdown
Visit as at {{<extlink text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
```
Referencing and showing icons in front of the link text is possible with a new parameter `icon`:
```markdown
Visit as at {{<extlink icon="fa fa-instagram" text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
```
### Customizing CSS
Add a [`custom_head.html`](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html) file to your `layouts/partials` directory.
- You can use `<style>` tag to embed the overrides (better performance-wise)
- Alternatively you can `<link>` your own `custom.css`
`CSS` variables `var(--some-var-name)` from `assets\css\variables.scss` can be overridden by adding
```scss
:root {
--some-var-name: blue!important;
}
```
## Installation
If you already have a Hugo site on your machine, you can simply add this theme via
```
@ -35,33 +81,6 @@ You can add **a new section to the homepage** by running `hugo new homepage/my-n
To create **a page separate from the homepage**, run `hugo new my-new-page.md`
## Features
### Icons
This theme includes the full set of [Fork Awesome 1.2.0 Icons][fork-awesome-icons]. Use the `{{<icon>}}`-[shortcode][hugo-shortcodes] with the respective "fa fa-ICONNAME"-`class` to use an icon directly in your `.markdown` files à la
```markdown
Look at this nice »envelope«-icon: `{{<icon class="fa fa-envelope">}}`. I took this from https://forkaweso.me/Fork-Awesome/icon/envelope/ :-)
```
### Header logo
Configured in `_index.md`, see `exampleSite`: `header_logo: "images/chef-hat.png"`
### Footer version information
In order to see technical version information (extracted from Hugo's [GitInfo](https://gohugo.io/variables/git/))) set the following general option in your config.toml: `enableGitInfo = true`
### External links
You can add an external link in the menu, see `external.md` in the `exampleSite`.
You can also use `extlink` shortcode to create a link opening in a new tab:
```markdown
Visit as at {{<extlink text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
```
Referencing and showing icons in front of the link text is possible with a new parameter `icon`:
```markdown
Visit as at {{<extlink icon="fa fa-instagram" text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
```
### Customizing CSS
Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag _or_ you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file from the `exampleSite`-directory to get started and to find more detailed instructions.
## Issues / Feedback / Contributing
[Discussion](https://github.com/zjedi/hugo-scroll/discussions) for Q&A (when unsure),
[Issues](https://github.com/zjedi/hugo-scroll/issues) for tracking,

8
assets/css/_index.scss
View file

@ -1,11 +1,11 @@
// Color variables
@import "./colors.scss";
// CSS variables
@import "./variables.scss";
// Theme layout and base styling
// Theme layout and skelet styling
@import "./theme.scss";
// Content-related styles
@import "./content.scss";
// Media queries for responsiveness
// Media queries for responsiveness (optimizations for various screen sizes)
@import "./responsiveness.scss"

34
assets/css/responsiveness.scss
View file

@ -154,41 +154,7 @@
.post-template .post-header {
padding: 30px 0;
}
/*
.post-meta {
font-size: 1.3rem;
}
.post-footer {
padding: 4rem 0;
text-align: center;
}
.post-footer .author {
margin: 0 0 2rem 0;
padding: 0 0 1.6rem 0;
border-bottom: #ebf2f6 1px dashed;
}
.post-footer .share {
position: static;
width: auto;
}
.post-footer .share a {
margin: 1.4rem 0.8rem 0 0.8rem;
}
.older-posts,
.newer-posts {
position: static;
margin: 10px 0;
}
.page-number {
display: block;
}
*/
.site-footer {
font-size: 1.1rem;
}

2
assets/css/colors.scss → assets/css/variables.scss
View file

@ -29,7 +29,7 @@
/* Dark section - background color */
--section-dark-bg-color: #b80135;
/* Light&Dark section >quote. Supressing color, compared to 'Light section - text color'*/
/* Light&Dark section >quote. Supressive color, compared to 'Light section - text color'*/
--section-uni-quote: grey;
/* Light&Dark section `code` a bit darker than 'Light section - background color' */
--section-uni-code-bg-color: #e0ded7;

2
exampleSite/content/homepage/opener.md
View file

@ -11,4 +11,4 @@ You can also delegate lengthier, less important or more sizeable content to [ded
> The belly rules the mind. --- spanish proverb
By the way this welcome section won't show up in the top/left navigation menu.
By the way this welcome section won't show in the cover menu.

55
exampleSite/layouts/partials/custom_head.html
View file

@ -1,50 +1,23 @@
<!-- A partial to be overwritten by the user.
Its content will appear before the closing </head>-tag -->
<!-- Custom CSS via inline styles
You may use this template to add custom CSS to your site like so: -->
<!--
<style>
:root {
/* see variables.scss for more variables*/
<!-- <style>
/* Links */
a:hover {
color: #b6b84c;
}
/*
--section-light-text-color: #3a4145!important;
--section-light-bg-color: #ffdb8c!important;
--section-dark-bg-color: #035e00!important;
*/
}
</style>
-->
/* Header Buttons on Startpage */
a.btn {
color: white;
background-color: #ced067;
}
a.btn:hover {
background-color: #b6b84c;
}
/* Scroll Menu on Startpage */
a.fn-item.active {
color: #b6b84c;
}
a.fn-item:hover {
color: #ced067;
}
/* Content / Sections */
.post-holder.odd {
background: #B80135;
color: white;
}
.post-holder {
background: #f2efe8;
}
body {
color: #3A4145;
}
/* Footer */
.site-footer {
color: #BBC7CC;
background-color: #22343A;
}
</style> -->
<!-- Custom CSS via "custom.css"-file
If you would rather place your custom CSS into
@ -61,6 +34,7 @@
<!-- Custom link-tags for different icons
Generated via https://favicon.io/favicon-generator/ -->
<!--
<link
rel="apple-touch-icon"
sizes="180x180"
@ -78,3 +52,4 @@
sizes="16x16"
href="{{ "images/favicon-16x16.png" | absURL }}"
/>
-->