Giter Club home page Giter Club logo

homer-minimal's Introduction

Homer Minimal

Homer Minimal is a clean and aesthethic theme for the Homer Dashboard with support for dark and light mode and a wide range of customizations.

Features:

  • Custom font: Inter
  • Custom icons
  • More spacing between cards
  • Rounded Borders
  • Tags are initially hidden
  • Updated Tag position
  • Simplified Header
  • No shadows

Preview

Homer Minimal Demo

Dark mode Homer Minimal
Light mode Homer Minimal

Usage

Important: Make sure to create a backup of your assets folder before making any changes. You can simply copy the folder to another destination.

File Explorer

Download and extract this repo.

Move the content of the assets folder into your Homers www folder.

Customization

General customization is the same as in the vanilla version of Homer. Check out the Github Repo for further instructions.

Icons

The icons used are the ones from Boxicons. You can search the website for replacements and configure them in the config.yaml

The icon definition should look like this: bx bxs-pear

Fonts

The standard font for Homer Minimal is Inter. You can customize it as you wish by uploading custom webfonts to the fonts folder and adapting the paths in the custom.css.

Example:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/Inter-Regular.woff2');
  src: local(''),
       url('./fonts/Inter-Regular.woff2') format('woff2'),
}

Colors

All the colors are defined in config.yaml, including some newly added variables, which aren't defined in the inital version of Homer. Usage is the same: You can change them by simply editing the HEX-Values. You can change them independently for dark and light mode.

Tags

Tags are now not visible by default, only on hover. The tags can be hidden in the custom.css file if desired by commenting in the property. Color customization works like in the default homer version, by utilizing the tag-style property from Bulma CSS in your config.yaml.

Homer uses bulma CSS, which provides a modifiers syntax. You'll notice in the config there is a tagstyle option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors:

  • is-info (blue)
  • is-success (green)
  • is-warning (yellow)
  • is-danger (red)

homer-minimal's People

Contributors

tchgrbr avatar

Stargazers

Insaf Nureev avatar Tor avatar  avatar Fabrício Gonga avatar  avatar

Watchers

 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.