To update the logo, copy your logo files to the themes/hugo-paradigm/static/images/logo/ folder. You can simply overwrite the existing files.
Hugo Paradigm requires 4 logo variations for mobile and inverted (white) states.
images/logo.svg Desktop logoimages/logo-mobile.svg Mobile logo, typically the smaller icon version of your logo “the mark”images/logo-invert.svg Desktop logo in white, for use when the header is transparentimages/logo-invert-mobile.svg Mobile logo in whiteIf you want to use different filenames for your logo you can update the path to the logos in the data/layout.yaml
There is also a range of options to display text next to the logo with or without the logo image.
# data/layout.yaml
logo:
text: Paradigm
showLogoTextOnDesktop: true
showLogoTextOnMobile: true
showLogoImageOnDesktop: true
showLogoImageOnMobile: true
logoDesktop: "images/logo/logo.svg"
logoDesktopDarkMode: "images/logo/logo-invert.svg"
logoMobile: "images/logo/logo-mobile.svg"
logoMobileDarkMode: "images/logo/logo-invert-mobile.svg"
logoDesktopHeight: 32
logoMobileHeight: 32
Desktop Logo The desktop logo is resized to a height of 23px with an automatic width. So common size logos that are square or rectangle (horizontal) should work well.
Mobile Logo The mobile logo is resized to a height of 30px with an automatic width. It’s recommended to use a square (icon) logo for mobile.
We’ve tried to support the most common logo sizes, but depending on your logo dimensions it may not fit neatly into the header. You can directly edit the height and width of the logos in the /layouts/partials/logo.html partial.
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll