Deconstructing the Hexo theme

CSS is generated from definitions written in Stylus, a simpler way to write CSS

Layouts are defined using a series of files written in E…

Changing the Banner Images

Existing Banner

themes/landscape/css/_variables.styl
1
2
3
4
5
// Header
logo-size = 40px
subtitle-size = 16px
banner-height = 300px
banner-url = "images/banner.jpg"

My new Banner

themes/landscape/css/_variables.styl
1
2
3
4
5
// Header
logo-size = 40px
subtitle-size = 16px
banner-height = 120px
banner-url = "images/jr0cket-banner-dual-clojure.png"

Navbar links opacity

Decrease the opacity of the navbar links so they show up more clearly, but still keep the text lightening up when the mouse hovers over them.

[stylesheet opacity setting in css somewhere]

Changing fonts use for site

Hexo uses google fonts

themes/landscape/css/_variables.styl
1
2
3
4
5
6
7
8
9
10
// Fonts
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
font-serif = Georgia, "Times New Roman", serif
font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.0.3"
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em

Being a user of Ubuntu Linux, I really enjoy using the Ubunt family of fonts. I think its one of the best designed fonts out there in terms of design and readability.

I updated the theme _variables.styl file to use Ubuntu fonts

themes/landscape-jr0cket/css/_variables
1
2
3
4
5
6
7
8
9
10
// Fonts
font-sans = Ubuntu, sans-serif
font-serif = Ubuntu, serif
font-mono = "Ubuntu Mono", monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.0.3"
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em

Shrinking blockquote

I use block qoute in my content to denote something that is extra that is not the main focus o f the article. I therefore wanted to make it smaller and make it italic

themes/landscape-jr0cket/source/css/_partial/article.styl
1
2
3
4
5
6
blockquote
font-family: font-serif
font-style: italic;
font-size: 0.96em
margin: line-height 20px
text-align: center

Creating Image styles

There seems to be only one style for images. I wanted to have three different styles, for article thumbnails (similar to slashdot), side images to highlight different topics or tools covered in an article and larger central images to show code snippets and screenshots.

So I have created three styles:

  • img-thumbnail
  • img-topic
  • img-code
themes/landscape-jr0cket/source/css/_partial/article.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
blockquote
.img-thumbnail
max-width: 240px
max-height: 96px
display: block
margin-right: 12px
margin-top: 12px
float: left
clear: left
.img-code
max-width: 640px
max-height: 320px
display: block
margin-left: auto
margin-right: auto
.img-topic
max-width: 360px
max-height: 1800px
display: block
margin-left 12px
margin-right: 12px
margin-top: 12px
margin-bottom: 12px
float: right
clear: right

Mobile menu

Changing the background colour

themes/landscape/css/_variables
1
color-mobile-nav-background = #191919
themes/landscape/css/_variables
1
color-mobile-nav-background = #1f0542

Domain name stuff

UK reg default IP address for A record - jr0cket.co.UK
88.208.252.9


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
Creative Commons License