diff options
Diffstat (limited to 'docs/glyphs/glyphs.css')
-rw-r--r-- | docs/glyphs/glyphs.css | 352 |
1 files changed, 0 insertions, 352 deletions
diff --git a/docs/glyphs/glyphs.css b/docs/glyphs/glyphs.css deleted file mode 100644 index e78d4aeed..000000000 --- a/docs/glyphs/glyphs.css +++ /dev/null @@ -1,352 +0,0 @@ -h1 > a { display:inline; } -h1 .glyph-name:before { - content: " / "; - color: rgba(0,0,0,0.2); - font-weight:400; -} - -body.iframe { - background-color:#fff; - padding:20px 10px; -} - -/*body .charset-table { margin-bottom: 3rem; }*/ -body.single .row.charset { display: none; } - -body .row.intro { display: none; } -body.single .row.intro { display: flex; } - -#glyphs { - display: none; - flex-wrap: wrap; - padding-left: 6px; - overflow: hidden; - width:200%; - box-sizing: border-box; - transform-origin: 0 0; - /*transform: scale(0.5);*/ - transform: scale(1); - justify-content: center; - /*transition: transform 50ms ease-out;*/ - margin-bottom: 0px; -} -body.single #glyphs { - justify-content: flex-start; - max-width:888px; - margin:0 auto; - padding-left: 0; - overflow: visible; - display: flex; -} - .glyph { - height: 346px; - width: 346px; - background-image: none !important; /* since .glyph is an `a` */ - background-color: white; - border-radius: 9px; - margin-right: 6px; - margin-bottom: 6px; - display: flex; - justify-content: center; - position: relative; - text-shadow: none; - } - .glyph .line { - background: rgba(0,0,0,0.05); - position: absolute; - left:0; right:0; - height: 1px; - z-index:0; - visibility: hidden; - } - .glyph .line.baseline { bottom: 64px; visibility: visible; } - .glyph .line.x-height { top: 128px; } - .glyph .line.cap-height { top: 76px; } - .glyph:hover .line.baseline { background: rgba(0,90,230,.6); } - .glyph:hover .line.x-height { background: rgba(230,60,10,.6); } - .glyph:hover .line.cap-height { background: rgba(60,130,20,.6); } - .glyph:hover .line { - visibility: visible; - } - .glyph .names { - position: absolute; - left:20px; right:20px; bottom:6px; - color: white; - text-align: center; - font-size:1em; - white-space: pre; - overflow:hidden; - cursor: default; - } - body.single .glyph .names { - display: none; - } - .glyph:hover .name { - color: rgba(0,0,0,0.8); - } - .glyph .advance { - box-sizing: border-box; - position: relative; - width: 1px; - box-shadow: -1px 0 0 0 rgba(0,0,0,0.05), 1px 0 0 0 rgba(0,0,0,0.05); - } - .glyph.zero-width .advance { - background: transparent; - border-left: 1px dashed transparent; - } - .glyph:hover .advance { - box-shadow: -1px 0 0 0 rgba(0,0,0,0.15), 1px 0 0 0 rgba(0,0,0,0.15); - } - .glyph.zero-width:hover .advance { - border-color: #aaa; - } - /*#glyphs .glyph .img*/ - .glyph svg { - /*min-width: 346px;*/ - /*height: 346px;*/ - background-repeat: no-repeat; - /*background-size: contain;*/ - /*background-color: #f5f5f5;*/ - position: absolute; - top:0; bottom:0; - z-index:1; - opacity:0.95; - } - body.single .glyph svg { - overflow: visible; - } - /*.glyph .advance { - display: block; - background: salmon; - z-index:0; - }*/ - .glyph.stroke svg path { - stroke-width: 8px; - stroke: black; - fill: none; - } - - -body.single .intro { - padding-bottom: 1em; -} -body.single .intro p { - display: none; -} - -#single-info { - max-width: 500px; -} -#single-info a { - background-image: none; - text-shadow: none; -} -#single-info ul { - list-style: none; -} -#single-info ul li { - margin-bottom: 6px; -} -#single-info .num { - font-feature-settings: 'ss01' 1, 'zero' 1; -} -#single-info .unicodeName { - font-feature-settings: 'case' 1; - padding-left:0.3em; -} -#single-info .svgFile { - font-feature-settings: 'case' 1; -} -#single-info .colorMark { - display:inline-block; - vertical-align:baseline; - width:20px; - height:20px; - border-radius:50%; - border: 1px solid rgba(0,0,0,0.2); -} -#single-info .colorMark.none { - border: 1px dashed rgba(0,0,0,0.4); -} - -#svgs { - display: none; -} - - -body.single .row.styles { display: flex; } -body .row.styles { display: none; } -#style-spectrum { - list-style:none; - /*display: flex;*/ - /*flex-wrap: wrap;*/ - margin-left:0; -} -#style-spectrum > div { - --size: 5rem; - font-family: "Inter var experimental"; - font-size: var(--size); - line-height: 1rem; - display:inline-flex; - align-items: center; - justify-content: center; - min-height: calc(var(--size) * 1.25); - min-width: calc(var(--size) * 1.1); - margin-right:0.1rem; - text-align: center; - cursor: default; -} -#style-spectrum.xl > div { - /* e.g. P.circled */ - --size: 4rem; - min-height: calc(var(--size) * 1.7); - min-width: calc(var(--size) * 1.5); -} - - - - -.row.kerning { - display: none; -} - -body.single .row.kerning { - display: flex; -} - -.row.kerning .empty { - opacity:0.3; -} - -#kerning-list { - display: flex; - /*flex-direction: column;*/ - flex-wrap: wrap; -} - -#kerning-list .divider { - clear:both; - width:100%; - flex: 1 0 100%; - height: 1px; - background:rgba(0,0,0,0.1); - margin-bottom: 1em; -} - -.kernpair { - /*background: white;*/ - border-radius:3px; - background-image: none !important; - display: flex; - flex-direction: row; - flex-wrap: wrap; - position: relative; - margin:0 2em 2em 0; - text-shadow: none; -} -.kernpair:hover { - background: white; -} -.kernpair:target, .kernpair.selected { - background: rgba(0, 0, 0, 0.9); - /*color: white;*/ -} -.kernpair:target svg path, .kernpair.selected svg path { - fill: white; -} -.kernpair:focus { - outline: none; - box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); -} - .kernpair .g.left, .kernpair .g.right { - width:100px; - height:100px; - /*background:rgba(40,240,90,0.3);*/ - background-size: contain; - background-repeat: no-repeat; - opacity:0.8; - } - .kernpair:hover .g.left, .kernpair:hover .g.right { - opacity:0.9; - } - .kernpair.selected .g.left, .kernpair.selected .g.right { - opacity:1; - } - /*.kernpair .g.left { background-color:rgba(120,90,140,0.3); }*/ - .kernpair .kern { - position: absolute; - background-color: rgba(255,0,0,0.1); - right:0; top:0; bottom:0; - z-index:9; - } - .kernpair .kern.pos { - background-color: rgba(36,207,128,0.3); - } - .kernpair:hover .kern, .kernpair.selected .kern { - background-color: rgba(255,100,100,0.5); - } - .kernpair:hover .kern.pos, .kernpair.selected .kern.pos { - background-color: rgba(36,207,128,0.5); - } - .kernpair .kern .label { - position: absolute; - white-space: nowrap; - opacity:0.9; - height: 20px; - right:-6px; bottom:-20px; - z-index:1; - text-align: center; - color: rgba(255,0,0,0.8); - visibility:hidden; - pointer-events: none; - font-size:11px; - } - .kernpair .kern.pos .label { - color: rgba(1,163,88,0.8); - } - .kernpair:hover .kern .label, - .kernpair.selected .kern .label { - visibility:visible; - } - .kernpair .link { - display: flex; - justify-content: flex-end; - position: absolute; - /*background: yellow;*/ - left:0; right:0; bottom:-22px; - height: 20px; - padding-top:2px; - user-select: none; - opacity: 0; - z-index:0; - } - .kernpair:hover .link { - opacity: 1; - } - .kernpair .link a { - background: none; - box-sizing: border-box; - color: rgba(0,0,0,0.2); - /*border: 1px solid #aaa;*/ - text-shadow: none; - display: block; - text-align: center; - font-size: 13px; - font-weight: 500; - width: 16px; /* sync with JS kLinkAWidth */ - height: 16px; - line-height: 14px; - padding-top:3px; - border-radius: 50%; - } - .kernpair .link:hover { - z-index:999; - } - .kernpair .link a:hover { - color: white; - background: #222; - } - .kernpair.right .link { - justify-content: flex-start; - } - |