Whilst I like many aspects of the Hexo theme used to generate static websites, it does seem to have a lot of redundant space. So here are a few aspects of the them I have changes in order to get more of the actual content showing on the page.
The most obvious occurance is the header image, which takes up a huge part of the screen on the desktop.
The most obvious way to make your website look different from all the other Hexo generated websites is to change the header image.
Very personal, not neccessarily representative of the website content though.
Also not that easy to see the text in the top navigation bar, as the text and icons are white and the background image is light.
Boosting the opacity of the naviation text and icons makes them stand out better on the lighter background.
The CSS definition called nav-link contains an opacity value. This was changed from 0.6 (60 percent) to 0.8 (80 percent) to make the navbar links more visible when hovering over them with the mouse.
I change my logo to say “community developer” and wanted it to take up less room in the header. So I found the CSS declaration for
logo-text and increased the font weight from 300 to 700
The same for the main-nav-link text
- Reduced the banner height from 300px to 120px
- reduced the logo size from 40px to 32pd
- changed banner-url to point to a different image
logo-size = 40px
subtitle-size = 16px
banner-height = 300px
banner-url = “images/banner.jpg”
This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket