| /* | |
| ヒラギノ角ゴ ProN W3 | |
| UPM: 1000 | |
| hhea/ascent: 880 | |
| hhea/descent: -120 | |
| hhea/lineGap: 500 | |
| sTypoAscender: 880 | |
| sTypoDescender: -120 | |
| sTypoLineGap: 500 | |
| usWinAscent: 1000 |
| *, | |
| *::before, | |
| *::after { | |
| font-feature-settings: | |
| "locl" var(--font-feature-locl, 1), | |
| "palt" var(--font-feature-palt, 0); | |
| } | |
| :not(:lang(ja)) { | |
| font-kerning: auto; |
| *, | |
| *::before, | |
| *::after { | |
| font-feature-settings: | |
| "ital" var(--font-feature-ital, 0), | |
| "locl" var(--font-feature-locl, 1), | |
| "palt" var(--font-feature-palt, 0); | |
| } | |
| h1 { |
| <!-- | |
| Copyright (C) 1990 by Akira Satoh | |
| Directed by TYPE-LABO and NAVEL | |
| http://www.type-labo.jp/Kumimihon.html | |
| --> | |
| <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ごくまれに〈ウヰスキー〉という書き方を見かけるが、これとて差別化を意図したものではなく単にカナづかいの時代性にすぎない。</p> | |
| <p>現在、カナ表記は〈ウイスキー〉に一本化しており、そこに国産・舶来の区別はない。最近は価格面での差もちぢまり、20年前に ￥10,000 だった本場のスコッチが半値近くになるなど、ウイスキーは一層ポピュラーなものになってきた。しかし、消費量についていえば、洋酒のトップは何といってもビールだろう。よっぽどの下戸はともかく、まず誰でもタシナミ程度には口にする。</p> | |
| <p>そのビールも明治中期には、せいぜい好事家が味わう程度だったらしい。当時流行した川上音二郎の《おっぺけぺ節》では、まるでゲテモノ扱い。「むやみに西洋を鼻にかけ／日本酒なんぞは飲まれない／ビールにブランデーベルモット／腹にも馴れない洋食を／やたらに喰うのも負け惜しみ／ないしょで後架でヘドついて／まじめな顔してコーヒのむ」と、特権階級をギューの目にあわせるネタにしている。観客も「ざまぁみやがれ！」とばかり同調して西洋カブレをオチョクり、日々のうっぷんを晴らしていた。</p> | |
| <p>もっとも、オッペケペッポーの攻勢に、ぐぅのネを上げた紳士や淑女がいたかどうか…西洋カブレとは、要するに欧米文化への信奉者のこと。〈鰯ノ頭ヲ信心〉する者があるならヨーロッパやアメリカの文物を信仰する者がいても一向に不思議はない。信ずる者の強さで、依然グラス片手に舞踏会、アン・ドゥ・トロヮとやっていたように思われる。</p> |
| <!-- | |
| https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/ | |
| https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ | |
| https://codepen.io/tigt/post/optimizing-svgs-in-data-uris | |
| https://addyosmani.com/blog/lazy-loading/ | |
| --> | |
| <img | |
| alt="A cat" | |
| class="lazyload" | |
| data-src="cat.jpg" |
| // lang-is() | |
| // Creates selector matches any of language tags | |
| // | |
| // @param {list} $langs - List of labguage tags to match | |
| // | |
| // @example | |
| // @include lang-is(ja, ko, zh) { | |
| // font-kerning: none; | |
| // } | |
| // p { |
| // Reduce a fraction | |
| // @param {Number} $a | |
| // @param {Number} $b | |
| // @returns {Array} - A reduced fraction | |
| @function frac-reduce ($a, $b) { | |
| $gcd: gcd($a, $b); | |
| @return $a / $gcd, $b / $gcd; | |
| } | |
| // Find the greatest common divisor |
| // 1/1 (1) * 7/4 (1.75) // 16px/28px | |
| // 16/15 (1.06667) * 15/8 (1.875) // 17.06667px/32px | |
| // 8/7 (1.14286) * 63/32 (1.96875) // 18.28571px/36px | |
| // 36/31 (1.16129) * 31/16 (1.9375) // 18.58064px/36px | |
| // 80/63 (1.26984) * 63/32 (1.96875) // 20.31746px/40px | |
| // | |
| // 9/8 (1.125) * 1/1 (1) * 14/9 (1.55556) // 18px/28px | |
| // 9/8 (1.125) * 16/15 (1.06667) * 5/3 (1.66667) // 19.2px/32px | |
| // 9/8 (1.125) * 8/7 (1.14286) * 7/4 (1.75) // 20.57143px/36px | |
| // 9/8 (1.125) * 36/31 (1.16129) * 31/18 (1.72222) // 20.90323px/36px |
h6 { font-size: 0.67em; } // 2/3 // 10.72px
h5 { font-size: 0.83em; } // 5/6 // 13.28px
h4 { font-size: 1em; } // 1 // 16px
h3 { font-size: 1.17em; } // 7/6 // 18.72px
h2 { font-size: 1.5em; } // 3/2 // 24px
h1 { font-size: 2em; } // 2/1 // 32px
| @mixin lang-cjk () { | |
| &:lang(zh), | |
| &:lang(ja), | |
| &:lang(ko) { | |
| @content; | |
| } | |
| } | |
| @mixin lang-not-cjk () { | |
| &:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) { |