Giter VIP home page Giter VIP logo

hugo-aerial's Introduction

Aerial

Aerial is a single page, single screen responsive site template. It is a port of HTML5 UP's Aerial theme.

Aerial Theme screenshot

Installation

Run the following commands inside the folder of your Hugo site:

$ cd themes
$ git clone https://github.com/sethmacleod/aerial.git

Getting Started

After installation, you only need to configure the config.toml file and, if desired, change the background picture.

The config file

Copy the config.toml file from the exampleSite folder into your root folder of your Hugo site. Change the fields as needed. Be sure to change the baseurl. Add or delete social media as needed. You may need to look up the font-awesome icon names. The icon field should be filled out without the "fa" prefix. The icon field for Twitter should be twitter instead of fa-twitter.

Change the background

Should you choose to change the background, create a /static/css/images folder and add a picture named bg.jpg. For the best results, follow these instructions:

The Scrolling Background:

This relies entirely on CSS to do its thing, which is cool, but that makes
changing it a bit weird/tricky at first. You can still use pretty much any image
you want, but for best results make sure yours is:

- Horizontally tileable.
- Wide and short.
- About 1500px wide.
- Fades to a solid color either at the top of bottom (which is used to fill
  the empty space above or below your image).

Now, there are two ways to use it: with CSS, or with Sass:

CSS:

    Look for this line in css/style.css (line 108 as of this writing):

        background: #348cb2 url("images/bg.jpg") bottom left;

    and use it to set the page background color, URL, and placement of
    your image. It should be as close to 1500px wide as you can get it.

Sass:

    Set the value of $bg to the page background color, URL, and placement
    of your image. Change $bg-width if your image is something other than
    1500px wide.

Add custom js snippets

Should you choose to add custom js snippet, create a layouts/partials folder with js.html file and put your js code in this file.

This can be useful for adding Google Analytics. Just add {{ template "_internal/google_analytics.html" . }} to the file and configure the config file with your googleAnalytics tracking id.

Customize favicon.ico

You can customize a favicon.ico by adding it to static folder.

License

This theme is released under the CC BY 3.0 license. For more information, read the License.

hugo-aerial's People

Contributors

bennybauer avatar klueless-io avatar popper73 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.