vim-jp/vimdoc-ja

Vim日本語ドキュメントサイトの見出しが途中で折り返される

Closed this issue · 11 comments

h-east commented

余裕がありそうなのに、見出しが途中で折り返されますね。
ブラウザを最大化しても変わらず。

右上のGoogle検索パーツの配置が関係している?

例1:
https://vim-jp.org/vimdoc-ja/vietnamese.html
image

英語版も同様:
https://vim-jp.org/vimdoc-en/vietnamese.html
image

SearchFormが下にちょっとはみ出してh1に重なっているせいで、途中で折り返されてしまっているんですかね。
image

div#SearchForm に margin-top: -1em を入れるのはどうでしょう?
image

@k-takata さんと @h-east さんの推察の通り、div#SearchFormが影響していそうです。
headerタグへposition: relativeを入れた上で、div#SearchFormのfloat: right;を削除し、position:absolute;right:0を追加すると殆ど変わらない見た目になりますが、どうでしょうか。
image
image

h-east commented

皆さん、コメントありがとうございます。
@staticWagomU さんの対応策がbetterってことでOK?

今のデザインのままで、ということであれば @staticWagomU さんの方がよいのでしょうが、個人的には、左側の "vim-jp / vimdoc-ja / vietnamese" に比べて検索ボックスが下がっているのがちょっと気になっています。ベースラインが左右でそろってる方がよさそうに思います。(が、自分の -1em はあまりよいやり方には思えませんが。)

h-east commented

ベースラインが左右でそろってる方がよさそうに思います。

👍

ちょっと話それるかもですが、jaとenで検索パーツのボタンの色が違う(jaがグレー)のが気になってます。
ボタンにマウスカーソルをホバーしてもボタン色もカーソル形状も変わらないのも気になってます。

koron commented

いっそのことGoogle CSEをいったん外して、なんか別の方法考えたほうが良いかもですね…

補足説明

自前でform おいて検索語 foo に対して site:vim-jp.org/vimdoc-ja/ foo みたいなクエリをGoogleへ投げるようにすれば、CSE不要で読み込み速くなるし、デザインの制御を完全に握れるし。デメリットは検索結果の表示でオーバーレイできなくなるってことくらい。

CSEは誰かのGoogleアカウントに紐づくから、h-eastさんが指摘しているjaとenのボタンの色の違いとか、特定の人しか直せなくなっちゃうし…いまとなっては使い続けるのもバッドアイデアになったきがする。

デザインも自分で握れるので、k-takataさんしてきのボトムラインがズレないように作り込むのもCSEの都合を考えずにできるようになるはず…

h-east commented

一旦、PRを k-kataka さん案に変更しました。

h-east commented

ひとまず、mergeしちゃいます。

-1em はあまりいいやり方ではないと思いますし、flexを使って横並びにする方が良いかもというコメントも聞きましたが、まあ、一旦マージしちゃってあとからきれいなやり方にしてもいいでしょう。

(検索ボックスを自前で実装するなら、Vimと同じようにプレフィックスで検索できたら便利そうだなと思ったり…)

直っているので閉じます。