Hugoのminimalテーマのトップページのレイアウトをいじった

概要

Before:

After:

モチベーション

• アバター画像を付けたい
• 名前の文字でかすぎるので小さくしたい
• アバター画像小さすぎるので大きくしたい

Hugoのminimalテーマについて

デモ： https://themes.gohugo.io/theme/minimal/

github.com

minimal過ぎて詳しいドキュメントがついてなかったのでソースコード読みに行く羽目になった．

アバター画像付けたい

static/images以下に入れたい画像 (ここではavatar.pngとする) を置いて， config.tomlの[params]にprofilePic = "images/avatar.png"という行を追加する．

名前の文字でかすぎ・アバター画像小さすぎ

(まだコピーしてなかったら) themes/minimal/static/main.cssをstatic/css/main.cssにコピーしてくる． .introでファイル内を検索すると以下のような部分が見つかるので自分好みにいじくる．

/* Home page */

.intro {
    transform: translateY(22vh);
}

.intro > h1 {
    color: #212121;
    font-size: 12vh;
}

.intro > h2 {
    color: #757575;
    font-size: 3vmin;
}

.intro > .profile {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
}

おわり