ぼくのデジタルライフ

ダラダラ書いてる備忘録的な何か

【Grav】Learn2の記事の文字列がはみ出るのをどうにかする

フラットファイルなCMS「Grav」のテーマ「Learn2」をカスタマイズしたときの覚書です。

一部のブラウザで記事内の長い文字列(特にURLとか英語がズラーッと並ぶやつ)がディスプレイのサイズに収まらないことがあったので、 テキストを折り返して表示するようにしてみました。

今回弄ったファイルはここ/user/themes/learn2/css-compiled/theme.css

ファイル内のbody {で始まる行に以下のコードを追加しました。

body {
 overflow-wrap : break-word;
}

overflow-wrapを使う他にもword-breakを使う方法もあるので、気になった方はこちらも参考にしてください。

【Grav】Learn2のロゴを変えてみる

フラットファイルなCMS「Grav」のテーマ「Learn2」をカスタマイズしたときの覚書です。

左のサイドバーにでてくる「GRAV」のロゴを変えてみました。 ロゴは独立したファイルで指定されているみたいで /user/themes/learn2/templates/partials/logo.html.twig がそのファイルらしい。 ファイルを開くこんな感じでした。

<svg id="logo-svg" viewBox="0 0 444 102" style="background-color:#ffffff00" version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
    x="0px" y="0px" width="444px" height="80px"
>
    <path d="m87.503 53.977h-10.642c-1.616 0-2.93 1.315-2.93 2.936v20.418l-0.21 0.175c-6.263 5.278-14.182 8.18-22.297 8.18-19.144 0-34.719-15.559-34.719-34.685 0-19.128 15.575-34.684 34.719-34.684 7.444 0 14.562 2.353 20.587 6.811 1.169 0.865 2.792 0.746 3.822-0.28l7.588-7.58c0.592-0.588 0.901-1.406 0.853-2.24-0.046-0.834-0.448-1.607-1.104-2.127-9.016-7.1443-20.29-11.076-31.746-11.076-28.246 0.0001-51.228 22.958-51.228 51.176-0.0005 28.219 22.982 51.179 51.228 51.179 14.584 0 28.534-6.273 38.27-17.208 0.479-0.536 0.742-1.227 0.742-1.945v-26.114c0-1.621-1.314-2.936-2.933-2.936z"/>
    <path d="m443.52 4.529c-0.54-0.8206-1.47-1.3182-2.45-1.3182h-11.58c-1.17 0-2.23 0.6957-2.7 1.7704l-32.65 75.721-33.23-75.738c-0.47-1.0634-1.52-1.7532-2.68-1.7532h-11.62c-1 0-1.92 0.4976-2.46 1.3265-0.55 0.8288-0.64 1.8753-0.23 2.7832l40.25 91.732c0.47 1.068 1.53 1.758 2.69 1.758h14.66c1.17 0 2.23-0.71 2.7-1.775l39.54-91.734c0.39-0.9055 0.3-1.9466-0.24-2.772z"/>
    <path d="m291.34 4.9642c-0.47-1.0636-1.52-1.7534-2.69-1.7534h-14.65c-1.17 0-2.23 0.6957-2.7 1.7704l-39.54 91.735c-0.39 0.9-0.3 1.946 0.24 2.766 0.54 0.828 1.46 1.328 2.45 1.328h11.58c1.17 0 2.23-0.71 2.7-1.775l32.64-75.723 33.24 75.74c0.47 1.068 1.52 1.758 2.68 1.758h11.63c0.99 0 1.92-0.5 2.45-1.328 0.55-0.831 0.63-1.878 0.24-2.788l-40.27-91.73z"/>
    <path d="m185.34 67.248l0.64-0.306c11.56-5.583 19.04-17.434 19.04-30.196 0-18.491-15.06-33.535-33.58-33.535l-42.49-0.0002c-1.62 0-2.93 1.3153-2.93 2.933v91.726c0 1.624 1.31 2.94 2.93 2.94h10.64c1.62 0 2.94-1.316 2.94-2.94v-78.17h28.91c9.42 0 17.07 7.645 17.07 17.046 0 7.84-5.33 14.64-12.97 16.53-1.38 0.348-2.75 0.523-4.1 0.523h-10.64c-1.1 0-2.11 0.622-2.61 1.607-0.5 0.984-0.4 2.164 0.25 3.057l30.17 41.143c0.55 0.754 1.43 1.204 2.36 1.204h13.22c1.11 0 2.12-0.63 2.62-1.611 0.5-0.989 0.4-2.172-0.25-3.06l-21.22-28.891z"/>
</svg>

このコードをコメントアウトするか削除すればOK。あとはHTMLで好きなように書く。

ちなみに、上の「GRAV」のロゴのid属性logo-svg/user/themes/learn2/css-compiled/theme.cssで次のように指定されていました。

#header #logo-svg {
 width: 8rem;