New Theme

This commit is contained in:
2020-11-21 14:13:16 +01:00
parent 9bc54d475f
commit cbc70ca8e1
593 changed files with 13702 additions and 14006 deletions

44
_projects/install.md Normal file
View File

@@ -0,0 +1,44 @@
---
title: Install and Use Friday Theme
---
## About
Friday Theme creates a web site that works as a personal homepage with an about section, a blog supporting tags and a collection of projects.
It is quick to configure and simple to use. It is styled almost entirely with Bootstrap 4 so you can roll your own Bootstrap 4 theme for complete customisation.
I'm assuming you have Jekyll installed already. If not, [look here.](https://jekyllrb.com/docs/installation/)
The installation instructions below are Linux-flavoured instructions. There's some notes on the Jekyll site [about running it on Windows](https://jekyllrb.com/docs/windows/).
## Download and Install
1. Create a directory for your new site.
2. Download this repo into it from [GitHub](https://github.com/sfreytag/friday-theme). (Sorry, this theme is not available as a theme gem yet).
3. cd to your directory and run `jekyll serve`. This theme uses `markdown` and `pygments` so if they are missing, install them with `gem install pygments`, etc
4. Open the resulting site (probably `http://localhost:4000`) in your browser to check it works
If it does, you can begin customising it.
## Configuration
Open `_config.yml` and change the `title` and `name` fields to your settings. Copy your own avatar image to `/theme/img/avatar.jpg` - it helps if this image is square.
Set a `baseurl` if needed. This lets you run your site under a folder like `/site` if need be.
## Tweak the Data Files
There's two data files that help create elements of the web site.
1. `_data/nav.yml` - use this to build a list of links that will be in the top nav bar. The defaults expose all elements of the theme. If you delete eg the about page, don't forget to edit this file. The Jekyll build will not warn you, because this file cannot use the `{% raw %}{% link %}{% endraw %}` tag.
2. `_data/profile.yml` - this contains a list of links that will be in the left-hand profile bar. Typical usage would be to add your social media and other portfolio links.

17
_projects/styling.md Normal file
View File

@@ -0,0 +1,17 @@
---
title: Change the Appearance of Friday Theme
---
## Changing the Style
The main stylesheet is `theme\css\site.scss`. This is the one that pulls everything together and creates the final, built output. So if you want to import other SCSS, add it here.
This theme does not use its own SCSS or CSS apart from a few layout tweaks in `theme/_sass/_theme.css`.
You can modify the appearance by customising Bootstrap directly by overriding its SCSS variables. There are some notes in the top of `theme\_sass\_variables.scss` about how to do this.
This theme also bundles `syntax.css` for the pygments highlighting. It is the monokai theme. You can get other syntax.css files from various places. [Here](http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html) is quite a good one, with previews of a few languages.
## Changing the Theme's HTML
This is Jekyll so you are able to dive into the HTML and make this theme do what you need. The `list` directory contains the two files responsible for listing posts and projects. Quite a few chunks of HTML are tidied off into `_layouts/components`. Otherwise everything else should be standard Jekyll.

15
_projects/writing.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Writing Content for Friday Theme
---
## Writing Content
1. `_pages/index.md` - this is the default home page.
2. `_includes/components/intro.md` - this chunk is reused between the top of the homepage and the top of the about page.
3. `_pages/about.md` reuses the intro and adds a bit more content about yourself.
4. `_posts` is the default Jekyll collection of blog posts. Each post has a list of tags. These lists are combined into a tag cloud on the post list page.
5. `_projects` is a directory of project pages. These are not organised into a collection. Each page can hold a description or documentation about a hobby or open-source project.
## HTML Content
Jekyll lets you mix HTML into Markdown in the content, so it is possible to add HTML content. You can use this to utilise Bootstrap 4's components. The [blog posts]({% link list/posts.html %}) have some examples.