Logo

We provide extensive control of your logo, in both light and dark mode, desktop and mobile. We support both an image logo and text or both.

# config.yml

logo:
  logo_text: "Lever"
  logo_image_desktop: images/logo/logo.svg
  logo_image_mobile: images/logo/logo-mobile.svg
  logo_image_desktop_invert: images/logo/logo-invert.svg # used on transparent header and when in dark mode. Normally a white version of the logo.
  logo_image_mobile_invert: images/logo/logo-invert-mobile.svg # used on transparent header and when in dark mode. Normally a white version of the logo.
  logo_image_desktop_height: "34px"
  logo_image_desktop_width: "34px"
  logo_image_mobile_height: "34px"
  logo_image_mobile_width: "34px"
  show_logo_image_on_mobile: true
  show_logo_image_on_desktop: true
  show_logo_text_on_mobile: false
  show_logo_text_on_desktop: true
  logo_text_font_size: "24px"
  logo_text_font_weight: "500" # 300, 500, 700

Image Logo

To update the logo, copy your logo files to the images/logo folder. You can simply overwrite the existing files.

There are 4 logo variations for mobile and inverted (white) states.

• images/logo/logo.png Desktop logo
• images/logo/logo-mobile.png Mobile logo, typically the smaller icon version of your logo “the mark”
• images/logo/logo-invert.png Desktop logo in white, for use when the header is transparent
• images/logo/logo-invert-mobile.png Mobile logo in white

If you want to use different filenames for your logo you can update the path to the logos in the config.yml. You can use .svg or other file extensions.

Text Logo

You can also use a text only logo, this is great for blogs and other personal sites that dont really have an official logo. Update the logo_text property and set show_logo_text_on_mobile: true or show_logo_text_on_desktop: true (or both!)

Image & Text

You can enable both image and text at the same time. And mix and match the combinations on mobile/desktop. I often like to have the image and text on desktop, and just the image (a square icon) on mobile.

Text Size & Font

Adjust the text font size and weight by adjusting logo_text_font_size: "24px" and logo_text_font_weight: "500"

You can change the font family and color under other sections of the config.yml

# config.yml

  fonts:
    ...
    logo: "Lato"

  colors:
    # light
    ...
    logo_text: "#2b3af7"
    # dark
    ...
    logo_text_dark: "#ffffff"