├── LICENSE
├── README.md
├── assets
├── _default.scss
├── code.scss
├── footer.scss
├── header.scss
├── landing_page.scss
├── main.scss
├── navigation.scss
├── post.scss
├── styles.scss
└── typography.scss
├── config.toml
├── images
├── mockup.png
├── screenshot.png
└── tn.png
├── layouts
├── 404.html
├── _default
│ ├── baseof.html
│ ├── section.html
│ └── single.html
├── index.html
├── landing_page.html
├── partials
│ ├── deferred.html
│ ├── footer.html
│ ├── head.html
│ ├── header.html
│ ├── main.html
│ ├── math.html
│ ├── navigation.html
│ ├── post.html
│ ├── post_li.html
│ └── post_title.html
└── posts
│ ├── list.html
│ └── single.html
└── theme.toml
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Timothy Gebhard
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
barks
2 |
3 | **barks** is a simple, minimalistic theme for the static website generator [Hugo](https://gohugo.io). Its was primarily developed as a theme for personal (academic) websites, although it may also be useful for other purposes 🙃
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | ## 🚀 Live Demo
15 |
16 | A live demo that showcases **barks** in action is available [here](https://timothygebhard.de/projects/barks).
17 |
18 |
19 |
20 | ## ⚡️ Quickstart
21 |
22 | If you already have a Hugo site, you can use **barks** as your theme by calling:
23 |
24 | ```bash
25 | git submodule add https://github.com/timothygebhard/barks
26 | ```
27 |
28 | in your `themes` directory, and changing the `theme` parameter in your `config.toml` to `"barks"`.
29 |
30 | Otherwise, you might want to check out the [Hugo quickstart guide](https://gohugo.io/getting-started/quick-start/).
31 |
32 | **Note:** Since *barks* makes use of [SCSS](https://en.wikipedia.org/wiki/Sass_(stylesheet_language)), which needs to be pre-compiled, you need to make sure that you are using the [extended version](https://gohugo.io/troubleshooting/faq/#i-get--this-feature-is-not-available-in-your-current-hugo-version) of Hugo!
33 |
34 |
35 |
36 | ## 📄 Layout for landing page
37 |
38 | If you want to use the landing page as shown in the screenshot above, put `layout: landing_page` into the header of your `_index.md` file. Additionally, you need to add `image: ` to specify the image that should be used.
39 |
40 |
41 |
42 | ## ⚙️ Configuration
43 |
44 | **barks** comes with a number of customization options to personalize its looks through the `[params]` section in the `config.toml` file. Most options should be rather self-explanatory; nevertheless, here is a quick overview:
45 |
46 |
47 |
48 | **Head:**
49 |
50 | You can add information about the author, a description and some keywords (all of which will be used to generate `` tags in the `` ) in the `[params.head]` section. Additionally, you can also specify the path to a custom CSS file in which you can change the stylesheets of **barks** or add new styles:
51 |
52 | ```toml
53 | [params.head]
54 | author = "Carl Barks"
55 | custom_css = ""
56 | description = "Hi, I'm Carl, and this is my website!"
57 | keywords = ["some", "keywords", "to", "describe", "this"]
58 | ```
59 |
60 |
61 |
62 | **Navigation and footer:**
63 |
64 | You can disable the navigation (e.g., if all your content fits onto a single page) and the footer (e.g., if you don’t need the social media icons or a copyright notice) using:
65 |
66 | ```toml
67 | [params.navigation]
68 | show_navigation = false
69 |
70 | [params.footer]
71 | show_footer = false
72 | ```
73 |
74 | Set these values to `true` (or omit them altogether) if you *do* want to use the navigation and the footer.
75 |
76 |
77 |
78 | **Typography:**
79 |
80 | You can choose the font for the website title (i.e., the header), as well as the main text using:
81 |
82 | ```toml
83 | [params.typography]
84 | title_font = "Bree Serif"
85 | body_font = "Source Sans Pro"
86 | ```
87 |
88 | You can use *any* [Google Font](https://fonts.google.com/) here; **barks** will load them automatically.
89 |
90 |
91 |
92 | **Colors:**
93 |
94 | Change the colors of the [theme](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color), the background, the text, and the links in the navigation using:
95 |
96 | ```toml
97 | [params.colors]
98 | theme_color = "#333333"
99 | background_color = "#fcfbf9"
100 | text_color = "#333333"
101 | link_color = "#60c17d"
102 | ```
103 |
104 |
105 |
106 | **Social media:**
107 |
108 | You can add your social media profiles and contact options to the footer via the `[params.social]` section. Here is an example of how this might look:
109 |
110 | ```toml
111 | [params.social]
112 | [params.social.email]
113 | name = "E-Mail"
114 | class = "fas fa-envelope"
115 | url = "mailto:@.com"
116 | weight = 1
117 | [params.social.github]
118 | name = "GitHub"
119 | class = "fab fa-github"
120 | url = "https://github.com/"
121 | weight = 2
122 | [params.social.google_scholar]
123 | name = "Google Scholar"
124 | class = "ai ai-google-scholar-square"
125 | url = "https://scholar.google.com/citations?user="
126 | weight = 3
127 | ```
128 |
129 | As you can see, each entry in the `[params.social]` section is itself a section with 4 keys:
130 |
131 | * `name`: This will be used for the `title` attribute of the link (which is what you see in the little pop-up if you place your cursor on the link).
132 | * `class`: This field controls which icon is used. You can use *any* icon from [FontAwesome](https://fontawesome.com/) or [Academicons](https://jpswalsh.github.io/academicons/). The icons are included as ``; see the [FontAwesome manual](https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use) for more information.
133 | * `url`: The URL to your profile for the respective platform. For e-mail addresses, add a `mailto:` [prefix](https://en.m.wikipedia.org/wiki/Mailto).
134 | * `weight`: Use this field to define the order by which the icons are sorted.
135 |
136 |
137 |
138 | **Disabling page titles:**
139 |
140 | By default, each page prints the `title` that is specified in the header as a `
`-level heading at the top of the page. You can disable this for any given page by adding `hide_title: true` to the header.
141 |
142 |
11 |