summaryrefslogtreecommitdiff
path: root/docs/glyphs/glyphs.css
diff options
context:
space:
mode:
Diffstat (limited to 'docs/glyphs/glyphs.css')
-rw-r--r--docs/glyphs/glyphs.css352
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;
- }
-