diff --git a/README.md b/README.md index 91322b8..5220225 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 78dd470..25ff0be 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -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 diff --git a/exampleSite/content/en/projects/design/index.md b/exampleSite/content/en/projects/design/index.md index ea66d48..4ff63cc 100644 --- a/exampleSite/content/en/projects/design/index.md +++ b/exampleSite/content/en/projects/design/index.md @@ -1,6 +1,6 @@ --- title: "Design" -weight: 2 +weight: 2 resources: - src: plant.jpg params: diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content b/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content index 965a7be..8f3c739 100644 --- a/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content +++ b/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content @@ -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 */ \ No newline at end of file diff --git a/images/screenshot.png b/images/screenshot.png index c098f78..04e4e53 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/images/tn.png b/images/tn.png index 4c6606c..cbc1b78 100644 Binary files a/images/tn.png and b/images/tn.png differ