Update README and screenshots

This commit is contained in:
Vicky 2018-09-03 16:49:47 +09:00
parent f43e8a5058
commit 03e80406a5
6 changed files with 180 additions and 97 deletions

174
README.md
View file

@ -2,87 +2,173 @@
[![Build Status](https://travis-ci.com/vickylai/hugo-theme-introduction.svg?branch=master)](https://travis-ci.com/vickylai/hugo-theme-introduction)
![Latest Release](https://img.shields.io/github/tag/vickylai/hugo-theme-introduction.svg)
A minimal, smooth-scrolling theme for Hugo. Can be configured as a single page site or full-featured site with many sections.
Introduction is a minimalist, highly-versatile theme for Hugo. It can be configured as a single page, or as a full-featured site with multiple sections. It is multilingual, responsive, and includes a light and dark theme.
![Main page screenshot](https://github.com/vickylai/hugo-theme-introduction/blob/master/images/screenshot.png)
Features:
- Minimalist home page
- About section with profile photo
- Contact section with option to show your local timezone
- Optional Projects and Blog sections
- Light and Dark themes
- Browser friendly CSS fade-in effect for some pizzaz
- Smooth scroll-to-section navigation
- Responsive and fast
## Getting started
### Requirements
- [Hugo](https://gohugo.io/getting-started/installing/) extended version 0.45 or greater
- [autoprefixer](https://github.com/postcss/autoprefixer): `npm install -g autoprefixer`
- [postcss-cli](https://github.com/postcss/postcss-cli):`npm install -g postcss-cli`
* Multilingual - supports side-by-side content in different language versions
* Custom index page sections from Markdown files
* Projects and Blog sections
* Page load fade-in CSS effect and smooth scrolling to anchor links
* Straightforward customization via `config.toml`
* Styled Markdown throughout with syntax highlighting
### Get the theme
Developer-friendly:
* Sass files included with instant compiling to CSS thanks to [Hugo Pipes](https://gohugo.io/hugo-pipes/postcss/) and [PostCSS](https://gohugo.io/hugo-pipes/postcss/)
* Thoughtful use of Sass variables makes creating new colour schemes easy
# Getting started
## Requirements
- [Hugo](https://gohugo.io/getting-started/installing/) Static Site Generator (latest version recommended)
- To make changes to the theme CSS:
- [autoprefixer](https://github.com/postcss/autoprefixer): `npm install -g autoprefixer`
- [postcss-cli](https://github.com/postcss/postcss-cli):`npm install -g postcss-cli`
## Get the theme
Run from the root of your Hugo site:
```sh
$ git clone https://github.com/vickylai/hugo-theme-introduction.git themes/introduction
```
Alternatively you can include this repository as a [git submodule](https://git-scm.com/book/de/v1/Git-Tools-Submodule). This makes it easier to update this theme if you have your Hugo site in git as well. For this you need to run:
Alternatively, you can include this repository as a [git submodule](https://git-scm.com/book/de/v1/Git-Tools-Submodule). This makes it easier to update this theme if you have your Hugo site in git as well:
```sh
$ git submodule add https://github.com/vickylai/hugo-theme-introduction.git themes/introduction
```
### Configure your site
From the exampleSite, copy `config.toml` to the root folder of your Hugo site and change the fields as you like.
## Preview the theme
The following explains how to add content to your hugo site. Introduction ships with an fully configured example site. For a quick preview just go into `exampleSite/` and run `hugo --themesDir ../..`. If you have configuration problems, you might want to check out how its done in `exampleSite/`.
Introduction ships with an fully configured example site. For a quick preview:
### Home page
Content for the home page lives under `content/home/`. Create `index.md` (`hugo new home/index.md`) and set a *title*. The content of this file will be shown as a tag line. You might want to set [*headless*](https://gohugo.io/content-management/page-bundles/#headless-bundle) to `true`. You may add more files to the home section. They show up automaticity on the home page and can be ordered via *weight*. You can set *image* for a page to show an image on the left side. The image has to be placed inside `content/home`.
```
cd exampleSite/
hugo serve --themesDir ../..
```
Then visit `http://localhost:1313/` in your browser to view the example site.
# Add content
The following explains how to add content to your Hugo site. You can find sample content in the `exampleSite/` folder.
## Introduction section
Create `index.md`:
```
hugo new home/index.md
```
The `title` frontmatter will be the first large heading.
The content of `index.md` will be shown as a subtitle line.
You might want to set `headless` to `true` in the frontmatter. See [headless bundles](https://gohugo.io/content-management/page-bundles/#headless-bundle) for more information.
## Home page
Content for the home page lives under `content/home/`. You may add as many files as you want to in markdown format.
Each markdown file will show as a section on the home page and can be ordered by the `weight` value in the file's frontmatter. You can set `image` to show an image on the left side of the section. The image file must be in the `content/home/` folder.
You may add a contact section by creating
`contact.md` (`hugo new home/contact.md`). This will allways be shown last on the home page.
`contact.md`:
### Projects section
Introduction provides an easy way to your projects. You can even add a gallery to your projects. Start by creating an index file (`hugo new projects/_index.md`), which you needs a *title*. You can also add some text.
```
hugo new home/contact.md
```
This will always be shown as the last section on the home page.
## Projects section
Introduction provides an easy way to showcase your projects. Each project can even have its own gallery, shown as an image carousel.
Start by creating an index file for the projects section:
```
hugo new projects/_index.md
```
Add a `title` and some optional content to the file.
To create a project, run:
```
hugo new projects/YourProjectName/index.md
```
The frontmatter of your new file contains some comments to help your configure your project.
You can set `external_link` to make the project link to another website.
Add images to your project by placing image files in the `YourProjectName/` folder. If you add more then one photo, they will display as a carousel gallery. Images will be ordered by filename. The first image will be shown as the project preview image. You can change the order of your images by adding a `weight` to that resource's parameters:
Now you are ready to add some projects. Jet again, create an index file (`hugo new creating/YourProjectName/index.md`). You can add *external_link* to create a link to a website. Or add images to your project by placing them in the same folder as the index file you just created. If you add more then one photo, a gallery will be created. Images are ordered by there filename. The first image will be used as a project preview image. If you want to change the order of your image, you can do this by adding *weight* to some image via font matter in your index file:
```
resources:
- src: NameOfYourImage.jpg
params:
weight: -100
```
The projects themself can also be ordered by *weight*.
### Blog section
Creating a blog section is quite simple with Introduction. Just add an index file for the section (`hugo new blog/_index.md`). Then you can create as many blog entry as you like via (`hugo new blog/YourEntryTitle.md`). They will also automaticity appear on the home page.
## Blog section
## Advanced configuration
### Multilingual Mode
You can create a multilingual website with Introduction. The default config file even contains all necessary configuration option. You just have to adjust the accordingly.
Create an index file for the blog:
Introduction ships with some translation. If you want to add a new language, you have to add a necessary translations to `i18n`. See the [hugo documentation](https://gohugo.io/content-management/multilingual/) for more details.
```
hugo new blog/_index.md
```
### Menu
Introduction contains a default menu. If you want to override this, you can do so by defining a *menu.main* in your config file.
Create a new blog post with:
### Disqus and Google Analytics
Introduction supports comments from Disqus. You just have to set *disqusshortname* in your config file.
```
hugo new blog/YourEntryTitle.md
```
It also offers tracking via Google Analytics. For this to work, you have to set *googleAnalytics*.
Posts will also display in the Blog section of the home page.
# Configure your site
From `exampleSite/`, copy `config.toml` to the root folder of your Hugo site and change the fields as you like. Helpful comments are provided.
## Multilingual Mode
Introduction currently ships with support for English, German, and Spanish. Contributions for other language translations are welcome.
To create a new language translation, add the `.toml` file to the `i18n/` folder. See the existing files for the necessary fields.
See the [hugo documentation](https://gohugo.io/content-management/multilingual/) for more details.
## Menu
Introduction contains a default menu. If you want to override this, you can do so by defining a `menu.main` in `config.toml`.
## Google Analytics
Set `googleAnalytics` in `config.toml` to activate Hugo's [internal Google Analytics template](https://gohugo.io/templates/internal/#google-analytics).
## Disqus
Set `disqusshortname` in `config.toml` to activate Hugo's [internal Disqus template](https://gohugo.io/templates/internal/#disqus).
## Custom css
You can add custom css files by placing them under `assets/` and adding the path to your css file to *customCSS* in your config file.
You can add custom css files by placing them under `assets/` and adding the path to the file to `customCSS` in `config.toml`.
## Contributing
Pull requests for bug fixes and suggestions are welcome.
# Issues
Contributors are listed in [CHANGELOG.md](https://github.com/vickylai/hugo-theme-introduction/blob/master/CHANGELOG.md). Thank you so much! 🖤
If you have a question or get stuck, please [open an issue](https://github.com/vickylai/hugo-theme-introduction/issues) for help and to help those who come after you. The more information you can provide, the better!
## License
Copyright (C) 2018 [Vicky Lai](https://vickylai.com/introduction/)
# Contributing
This theme would not be nearly as awesome without its amazing community of open source contributors, who are [listed here.]() Thank you so much! 🖤
Licensed under [AGPL-3.0](https://github.com/vickylai/hugo-theme-introduction/blob/master/LICENSE)
Pull requests for bug fixes and improvements are welcome.
# License
Copyright (C) 2018 [Vicky Lai](https://vickylai.com/)
Licensed under [Apache-2.0](https://github.com/vickylai/hugo-theme-introduction/blob/master/LICENSE)

View file

@ -5,7 +5,7 @@ DefaultContentLanguage = "en" # Default language fo
# googleAnalytics = "" # https://gohugo.io/templates/internal/#google-analytics
[params]
themeStyle = "dark" # Choose "light" or "dark"
themeStyle = "light" # Choose "light" or "dark"
favicon = "/img/fav.ico" # Path to favicon file
showRSSButton = false # Show rss button in navigation
fadeIn = true # Turn on/off the fade-in effect

View file

@ -220,7 +220,7 @@ pre {
font-family: monospace; }
body {
color: #78888b;
color: #4a4a4a;
font-size: 1rem;
font-weight: 400;
line-height: 1.5; }
@ -232,17 +232,17 @@ a {
a strong {
color: currentColor; }
a:hover {
color: #f4f1bb; }
color: #000000; }
code {
background-color: #111111;
color: #ed6a5a;
background-color: #ffffff;
color: #00b8d4;
font-size: 0.875em;
font-weight: normal;
padding: 0.25em 0.5em 0.25em; }
hr {
background-color: #111111;
background-color: #ffffff;
border: none;
display: block;
height: 2px;
@ -269,7 +269,7 @@ strong {
pre {
-webkit-overflow-scrolling: touch;
background-color: #111111;
background-color: #ffffff;
color: #4a4a4a;
font-size: 0.875em;
overflow-x: auto;
@ -626,13 +626,13 @@ a.has-text-dark:hover, a.has-text-dark:focus {
background-color: #363636 !important; }
.has-text-primary {
color: #ed6a5a !important; }
color: #00b8d4 !important; }
a.has-text-primary:hover, a.has-text-primary:focus {
color: #e8402c !important; }
color: #008ca1 !important; }
.has-background-primary {
background-color: #ed6a5a !important; }
background-color: #00b8d4 !important; }
.has-text-link {
color: #3273dc !important; }
@ -1295,7 +1295,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
.modal-card-head,
.modal-card-foot {
align-items: center;
background-color: #111111;
background-color: #ffffff;
display: flex;
flex-shrink: 0;
justify-content: flex-start;
@ -1330,7 +1330,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
padding: 20px; }
.navbar {
background-color: #111111;
background-color: #ffffff;
min-height: 3.25rem;
position: relative;
z-index: 30; }
@ -1487,7 +1487,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
background-color: #363636;
color: whitesmoke; } }
.navbar.is-primary {
background-color: #ed6a5a;
background-color: #00b8d4;
color: #fff; }
.navbar.is-primary .navbar-brand > .navbar-item,
.navbar.is-primary .navbar-brand .navbar-link {
@ -1495,7 +1495,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
.navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
.navbar.is-primary .navbar-brand .navbar-link:hover,
.navbar.is-primary .navbar-brand .navbar-link.is-active {
background-color: #ea5543;
background-color: #00a2bb;
color: #fff; }
.navbar.is-primary .navbar-brand .navbar-link::after {
border-color: #fff; }
@ -1512,17 +1512,17 @@ a.has-text-danger:hover, a.has-text-danger:focus {
.navbar.is-primary .navbar-end > a.navbar-item.is-active,
.navbar.is-primary .navbar-end .navbar-link:hover,
.navbar.is-primary .navbar-end .navbar-link.is-active {
background-color: #ea5543;
background-color: #00a2bb;
color: #fff; }
.navbar.is-primary .navbar-start .navbar-link::after,
.navbar.is-primary .navbar-end .navbar-link::after {
border-color: #fff; }
.navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #ea5543;
background-color: #00a2bb;
color: #fff; }
.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
background-color: #ed6a5a;
background-color: #00b8d4;
color: #fff; } }
.navbar.is-link {
background-color: #3273dc;
@ -1720,7 +1720,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
min-height: 3.25rem;
width: 100%; }
.navbar.has-shadow {
box-shadow: 0 2px 0 0 #111111; }
box-shadow: 0 2px 0 0 #ffffff; }
.navbar.is-fixed-bottom, .navbar.is-fixed-top {
left: 0;
position: fixed;
@ -1729,7 +1729,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
.navbar.is-fixed-bottom {
bottom: 0; }
.navbar.is-fixed-bottom.has-shadow {
box-shadow: 0 -2px 0 0 #111111; }
box-shadow: 0 -2px 0 0 #ffffff; }
.navbar.is-fixed-top {
top: 0; }
@ -1811,8 +1811,8 @@ a.navbar-item,
a.navbar-item:hover, a.navbar-item.is-active,
.navbar-link:hover,
.navbar-link.is-active {
background-color: #111111;
color: #f4f1bb; }
background-color: #ffffff;
color: #dbdbdb; }
.navbar-item {
display: block;
@ -1860,7 +1860,7 @@ a.navbar-item,
padding-right: 1.5rem; }
.navbar-divider {
background-color: #111111;
background-color: #ffffff;
border: none;
display: none;
height: 2px;
@ -1876,7 +1876,7 @@ a.navbar-item,
.navbar-link::after {
display: none; }
.navbar-menu {
background-color: #111111;
background-color: #ffffff;
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
padding: 0.5rem 0; }
.navbar-menu.is-active {
@ -1927,10 +1927,10 @@ a.navbar-item,
.navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
background-color: transparent !important; }
.navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
background-color: #111111;
background-color: #ffffff;
color: #0a0a0a; }
.navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
background-color: #111111;
background-color: #ffffff;
color: #3273dc; }
.navbar-burger {
display: none; }
@ -1985,10 +1985,10 @@ a.navbar-item,
.navbar-dropdown a.navbar-item {
padding-right: 3rem; }
.navbar-dropdown a.navbar-item:hover {
background-color: #111111;
background-color: #ffffff;
color: #0a0a0a; }
.navbar-dropdown a.navbar-item.is-active {
background-color: #111111;
background-color: #ffffff;
color: #3273dc; }
.navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed {
border-radius: 6px;
@ -2042,7 +2042,7 @@ a.navbar-item,
.navbar-link.is-active:not(:hover) {
background-color: transparent; }
.navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #111111; } }
background-color: #ffffff; } }
.column {
display: block;
@ -3073,7 +3073,7 @@ a.navbar-item,
.hero.is-dark.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%); } }
.hero.is-primary {
background-color: #ed6a5a;
background-color: #00b8d4;
color: #fff; }
.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag),
.hero.is-primary strong {
@ -3087,14 +3087,14 @@ a.navbar-item,
color: #fff; }
@media screen and (max-width: 1087px) {
.hero.is-primary .navbar-menu {
background-color: #ed6a5a; } }
background-color: #00b8d4; } }
.hero.is-primary .navbar-item,
.hero.is-primary .navbar-link {
color: rgba(255, 255, 255, 0.7); }
.hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active,
.hero.is-primary .navbar-link:hover,
.hero.is-primary .navbar-link.is-active {
background-color: #ea5543;
background-color: #00a2bb;
color: #fff; }
.hero.is-primary .tabs a {
color: #fff;
@ -3110,12 +3110,12 @@ a.navbar-item,
.hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover {
background-color: #fff;
border-color: #fff;
color: #ed6a5a; }
color: #00b8d4; }
.hero.is-primary.is-bold {
background-image: linear-gradient(141deg, #f4202d 0%, #ed6a5a 71%, #f3926d 100%); }
background-image: linear-gradient(141deg, #00a19b 0%, #00b8d4 71%, #00a7ee 100%); }
@media screen and (max-width: 768px) {
.hero.is-primary.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #f4202d 0%, #ed6a5a 71%, #f3926d 100%); } }
background-image: linear-gradient(141deg, #00a19b 0%, #00b8d4 71%, #00a7ee 100%); } }
.hero.is-link {
background-color: #3273dc;
color: #fff; }
@ -7063,7 +7063,7 @@ readers do not read off random characters that represent icons */
font-weight: 900; }
html, body {
background-color: #111111; }
background-color: #ffffff; }
html.modal-open {
overflow: hidden; }
@ -7087,15 +7087,15 @@ html.modal-open {
animation-delay: 1.8s; }
a {
color: #ed6a5a; }
color: #00b8d4; }
a:hover {
color: #f4f1bb;
color: #000000;
font-style: none; }
a:active {
color: #ed6a5a; }
color: #00b8d4; }
h1, h2, .title, .subtitle {
color: #75b8c8; }
color: #222222; }
.title {
font-weight: 400; }
@ -7105,7 +7105,7 @@ ul {
img {
border-radius: 5px;
border: 1px solid #f4f1bb;
border: 1px solid #dbdbdb;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); }
hr {
@ -7185,7 +7185,7 @@ hr {
margin-right: auto; }
.navbar-burger:hover {
background-color: #111111; }
background-color: #ffffff; }
.navbar-item {
text-transform: uppercase;
@ -7203,7 +7203,7 @@ hr {
.footer-text {
font-size: 0.8em; }
.footer-text a {
color: #78888b; }
color: #4a4a4a; }
.footer-text .fab {
font-size: 0.8em;
vertical-align: baseline; }
@ -7229,7 +7229,7 @@ hr {
box-shadow: none; }
.card-content {
background-color: #111111;
background-color: #ffffff;
font-size: 1.5rem; }
.markdown p {
@ -7269,7 +7269,7 @@ hr {
font-size: 1rem; }
.markdown a:hover {
color: #f4f1bb; }
color: #dbdbdb; }
.markdown ul {
margin-bottom: 1.25rem;
@ -7292,7 +7292,7 @@ hr {
position: relative;
margin: 1.75rem 0;
border: 0;
border-top: 1px solid #f4f1bb; }
border-top: 1px solid #dbdbdb; }
.markdown abbr {
font-size: 0.8rem;
@ -7335,13 +7335,10 @@ hr {
margin: 2rem auto;
max-width: 100%; }
.modal-card-title {
color: #ed6a5a; }
.modal-background {
background-color: rgba(255, 255, 255, 0.9); }
.modal-card-body {
background-color: #111111; }
.markdown strong {
color: #78888b; }
.modal-close {
background-color: #000000; }
/*# sourceMappingURL=main.css.map */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 57 KiB