Closed HAKASHUN closed 6 years ago
記事文はwidth: 700px
タイトルはfont-size: 36px; line-height: 1.15
mediumだと、letter-spacingに-0.02em
を指定している
文章は、font-size:21px
とやや大きめである。色は面白くて、rgba(0,0,0,0.8)
と黒に少し透過を加えている。ただし、英語は適したサイズ感で表示されるので、英語ベースでのサイズ表記な気がしている
横幅が767px以下の画面では
20px
のマージン
25px
のマージンが反映されているfont-size: 28px; line-height: 1.12; letter-spacing: -0.022em;
を指定しているfont-size: 18px; line-height:1.5; letter-spacing: -0.004em;
を指定しているfont-size: 12px
とかなり小さいcolor: rgba(0,0,0,0.44)
と、灰色文字も透過文字で表現しているのが面白い<h2>
font-size: 52px; line-height: 1.04; letter-spacing: -0.016em;
font-size: 40px; line-height: 1.04; letter-spacing: -0.016em;
<h3>
が記事のタイトル<h4>
font-size: 28px; line-height: 1.22; letter-spacing: -0.022em;
font-size: 24px; line-height: 1.18; letter-spacing: -0.022em;
hover
時の色の変化などはないリンク文字への下線表現
body.is-withMagicUnderlines .markup--anchor {
text-decoration: none;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 50%);
background-repeat: repeat-x;
background-size: 2px 2px;
background-position: 0 22px;
}
// 解像度の高い画面
@media not all, only screen and (min-resolution: 2dppx),
only screen and (-webkit-min-device-pixel-ratio: 2)
body.is-withMagicUnderlines .markup--anchor {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0) 25%);
}
hover
時に色を変えたいかな-webkit-tap-highlight-color: rgba(0,0,0,0.3);
がついていたfont-weight: bold
おしゃれに・・・
で表現しているバージョン
hr.section-divider:before {
content: '...';
display: inline-block;
margin-left: 0.6em;
color: rgba(0,0,0,0.6);
position: relative;
top: -30px;
font-family: "medium-content-slab-serif-font",Georgia,Cambria,"Times New Roman",Times,serif;
font-weight: 400;
font-style: italic;
font-size: 28px;
letter-spacing: 0.6em;
}
border-left: 3px solid rgba(0,0,0,0.8)
font-style: italic
改めて、mediumのレイアウトが日本語表現にあっているかを考えると、少し調整が必要そう こんな拡張を作っている人もいた。
https://chrome.google.com/webstore/category/apps?hl=ja
tag | before | after |
---|---|---|
h2 | 30px | |
h3 | 26px | |
h4 | 24px | |
(.postContent) | 17px |
気づいたらドメインとサーバー期限きれてたので、タダでなんとかいい感じのものを整備しなければ...