diff options
Diffstat (limited to 'docs/res/base.css')
| -rw-r--r-- | docs/res/base.css | 323 |
1 files changed, 161 insertions, 162 deletions
diff --git a/docs/res/base.css b/docs/res/base.css index b4254200d..1f349f903 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -1,3 +1,19 @@ +:root { + --fontSize: 15px; + /*--emsAcrossViewport: 80; + --fontSize: calc(100vw / var(--emsAcrossViewport));*/ + + --lineHeight: calc(var(--fontSize) * 1.5); + + --spacing: 2rem; + --spacingv: calc(var(--lineHeight) / 2); + + --gridGapCol: var(--spacing); + --gridGapRow: calc(var(--spacing) / 2); + + --red: #F02D09; +} + * { margin:0; padding:0; font-synthesis: none; } html { } body { @@ -5,12 +21,15 @@ body { color: #111; font: 15px/22px 'Inter', system-ui, sans-serif; - font-size: 15px; - line-height: 1.5; + /*font-size: 15px; + line-height: 1.5;*/ + + font-size: var(--fontSize); + line-height: var(--lineHeight); + letter-spacing: -0.004em; font-weight: 400; - padding-bottom: 30px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -89,12 +108,13 @@ a[href^="#"]:hover { text-decoration-style: dashed; } -p { - margin: 20px 0; -} -code, pre, q { - font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; - font-size:0.96em; +/*p, pre { + margin: 1rem 0; +}*/ +code, pre, q, tt { + font-family: 'IBM Plex Mono', monospace; + font-feature-settings: 'ss02' 1, 'zero' 1; + line-height: inherit; } code { display: block; @@ -102,7 +122,10 @@ code { padding: 0.5em 0; overflow: auto; } -pre, q { +pre { + white-space: pre-wrap; +} +q { display: inline; white-space: pre-wrap; } @@ -149,29 +172,84 @@ small { letter-spacing: 0.012em; } -h1, h2, h3 { - font-weight: 500; +h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -h1 { +/*h1, .h1 { color: #222; font-size: 55px; letter-spacing: -0.038em; line-height: 1.1em; text-indent: -2px; + font-weight: 700; +} +h1 { margin-bottom: 30px; margin-top: 10px; +}*/ +h1, .h1 { + margin-left: calc(3rem / -20); + font-weight: 700; + font-size: 4rem; + letter-spacing: -0.07em; + line-height: calc(var(--spacingv) * 6); +} +h1 { + margin-bottom: calc(var(--spacingv) * 2); +} + +h2, .h2 { font-weight: 700; + font-size: 1.8rem; + letter-spacing: -0.03em; + line-height: calc(var(--spacingv) * 3); } h2 { - font-size: 30px; - font-weight: 600; - letter-spacing: -0.025em; - line-height: 30px; - margin-bottom: 25px; - margin-top: 10px; + margin-bottom: calc(var(--spacingv) * 2); +} +h3, .h3 { + font-weight: 700; + font-size: 1.2rem; + letter-spacing: -0.018em; + line-height: calc(var(--spacingv) * 2); +} +h3 { + margin-bottom: calc(var(--spacingv) * 2); +} + +h3 q, h3. q { + font-weight: 400; + padding-left: 0.5em; +} + +h1 > a, h2 > a, h3 > a, h4 > a, +.h1 > a, .h2 > a, .h3 > a, .h4 > a { + color: inherit; + text-decoration: none !important; + text-shadow: none; + background: none; + outline:none; +} + +h4, h5, h6, .h4, .h5, .h6 { + font-weight: 640; + letter-spacing: -0.015em; +} +h4, h5, h6 { + margin-bottom: calc(var(--spacingv) * 1); } +/* add top margin to Hn when it follows another element */ +* + h1 { margin-top: calc(var(--spacingv) * 6); } +* + h2 { margin-top: calc(var(--spacingv) * 4); } +* + h3 { margin-top: calc(var(--spacingv) * 3); } +* + h4 { margin-top: calc(var(--spacingv) * 2); } + +p, pre, p + grid, pre + grid { + margin-bottom: var(--lineHeight); +} + + .row.dark h2, .row.black h2 { letter-spacing: -0.014em; @@ -208,26 +286,10 @@ h2.banner { background: rgba(0,0,0,0.1); } -h3 { - font-size: 20px; - font-weight: 600; - letter-spacing: -0.02em; -} .row.dark h3, .row.black h3 { letter-spacing: -0.012em; } -h3 q { - font-weight: 400; - padding-left: 0.5em; -} - -h1 > a, h2 > a, h3 > a { - color: inherit; - text-decoration: none !important; - text-shadow: none; - background: none; -} .row { padding: 50px; @@ -262,15 +324,18 @@ h1 > a, h2 > a, h3 > a { } .row-divider { - margin:0 auto; + height: 1rem; + /*margin: 0 auto; max-width: 888px; - height: 1px; - border-bottom: 1px dashed rgba(0,0,0,0.09); + height: 0.11rem; + background: black;*/ } .row.menu { padding: 0; border-bottom:1px solid rgba(0,0,0,0.1); + background: #111; + color: white; } .row.menu ul { width: auto; @@ -284,27 +349,38 @@ h1 > a, h2 > a, h3 > a { white-space: nowrap; } .row.menu ul li { - margin-right: 50px; + /*margin-right: 50px;*/ margin-bottom: -1px; text-indent: -0.5px; + text-align: center; } .row.menu ul li > a { color: inherit; - opacity: 0.6; + opacity: 0.8; text-decoration:none; display: inline-block; - padding: 15px 0 13px 0; - transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93); - border-bottom: 3px solid transparent; + padding: 15px 25px 13px 25px; + /*transition: 80ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);*/ + /*border-bottom: 3px solid transparent;*/ } .row.menu ul li > a:hover, .row.menu ul li > a.active { - color: black; - border-bottom-color: black; + color: white; + background: var(--red); + border-bottom-color: white; opacity: 1; - } + } + .row.menu ul li:first-child > a { + padding-left:0; + padding-right:0; + margin-right: 25px; + background:transparent; + } + .row.menu ul li > a.active { + font-weight:600; + } .row.menu ul li.home > a { - font-weight: 500; - color: black; + font-weight: 600; + color: white; opacity: 1; } @@ -396,22 +472,21 @@ tablex { } /* --------------------------------------------------------------------- */ -/* -grid with 4 major columns subdivided twice - -| | | | | -| 1 | 2 | 3 | 4 | -| | | | | -| | | | | -| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -| | | | | | | | | -| | | | | | | | | -| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -| | | | | | | | | | | | | | | | | -| | | | | | | | | | | | | | | | | +/* grid */ +grid { + grid-column-gap: 2rem; + grid-row-gap: 0; +} +grid > c.spacer { + grid-column: 1 / -1; + height: calc(var(--spacingv) * 6); +} -*/ +@media only screen and (max-width: 565px) { + grid { grid-column-gap: 1rem; } + grid > c.spacer { height: calc(var(--spacingv) * 3); } +} .row.features { display:none; } @supports (display: grid) { @@ -419,105 +494,28 @@ grid with 4 major columns subdivided twice } .row.features p.example { margin-top:2rem; opacity:0.4; } -grid { - display: grid; - grid-template-columns: repeat(4, 1fr); +.row.features grid { grid-column-gap: 1rem; - grid-row-gap: 1rem; -} -grid.c4 { grid-template-columns: repeat(4, 1fr); } -grid.c8 { grid-template-columns: repeat(8, 1fr); } -grid.c9 { grid-template-columns: repeat(9, 1fr); } -grid.c16 { grid-template-columns: repeat(16, 1fr); } -/*grid, grid4 { - grid-template-columns: repeat(4, 1fr); -}*/ -c { - display: block; - grid-column-end: span 1; -} -c[start="1"] { grid-column-start: 1; } -c[start="2"] { grid-column-start: 2; } -c[start="3"] { grid-column-start: 3; } -c[start="4"] { grid-column-start: 4; } -c[start="5"] { grid-column-start: 5; } -c[start="6"] { grid-column-start: 6; } -c[start="7"] { grid-column-start: 7; } -c[start="8"] { grid-column-start: 8; } -c[start="9"] { grid-column-start: 9; } - -c[span="1"] { grid-column-end: span 1; } -c[span="2"] { grid-column-end: span 2; } -c[span="3"] { grid-column-end: span 3; } -c[span="4"] { grid-column-end: span 4; } -c[span="5"] { grid-column-end: span 5; } -c[span="6"] { grid-column-end: span 6; } -c[span="7"] { grid-column-end: span 7; } -c[span="8"] { grid-column-end: span 8; } -c[span="9"] { grid-column-end: span 9; } - -c[span="1-1"] { grid-column: 1 / 1; } -c[span="2-5"] { grid-column: 2 / 5; } -c[span="2-4"] { grid-column: 2 / 4; } - -grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; } -grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; } - -/* .debug can be added to a grid to visualize its effective cells. - .debug-color applies alternating colors. */ -grid.debug > *, grid.debug-color > * { - --color: rgba(250, 230, 0, 0.2); - background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); -} -grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); } -grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); } -grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); } - -.col-all { grid-column: 1 / span 16; } - -.col-1 { grid-column: 1 / span 2; } -.col-1-2 { grid-column: 1 / span 4; } -.col-1-3 { grid-column: 1 / span 6; } -.col-1-4 { grid-column: 1 / span 8; } -.col-1-5 { grid-column: 1 / span 10; } -.col-1-6 { grid-column: 1 / span 12; } -.col-1-7 { grid-column: 1 / span 14; } -.col-1-8 { grid-column: 1 / span 16; } - -.col-2 { grid-column: 2 / span 2; } -.col-2-2 { grid-column: 2 / span 4; } -.col-2-3 { grid-column: 2 / span 6; } -.col-2-4 { grid-column: 2 / span 8; } -.col-2-5 { grid-column: 2 / span 10; } -.col-2-6 { grid-column: 2 / span 12; } -.col-2-7 { grid-column: 2 / span 14; } - -.col-3 { grid-column: 3 / span 2; } -.col-3-2 { grid-column: 3 / span 4; } -.col-3-3 { grid-column: 3 / span 6; } -.col-3-4 { grid-column: 3 / span 8; } -.col-3-5 { grid-column: 3 / span 10; } -.col-3-6 { grid-column: 3 / span 12; } - -.col-4 { grid-column: 4 / span 2; } -.col-4-2 { grid-column: 4 / span 4; } -.col-4-3 { grid-column: 4 / span 6; } -.col-4-4 { grid-column: 4 / span 8; } -.col-4-5 { grid-column: 4 / span 10; } - -.col-5 { grid-column: 5 / span 2; } -.col-5-2 { grid-column: 5 / span 4; } -.col-5-3 { grid-column: 5 / span 6; } -.col-5-4 { grid-column: 5 / span 8; } - -.col-6 { grid-column: 6 / span 2; } -.col-6-2 { grid-column: 6 / span 4; } -.col-6-3 { grid-column: 6 / span 6; } - -.col-7 { grid-column: 7 / span 2; } -.col-7-2 { grid-column: 7 / span 4; } - -.col-8 { grid-column: 8 / span 2; } + grid-row-gap: 0.5rem; + margin-bottom: 0; +} + +/* --------------------------------------------------------------------- */ +/* flow */ + +flow { display:block; appearance: none; -webkit-appearance: none } +flow[columns] { + column-gap: var(--spacing); + /*column-fill: balance;*/ +} +flow[columns="2"] { + column-count: 2; +} +@media only screen and (max-width: 600px) { + flow[columns-s="1"] { + column-count: 1; + } +} /* --------------------------------------------------------------------- */ @@ -593,14 +591,15 @@ box.large tablex r out { /* ------------------------------------------------------ */ + /* wide windows */ @media only screen and (min-width: 566px) { - .narrow-window { display: none; } + .narrow-window, .only-small-screen { display: none; } } /* narrow windows */ @media only screen and (max-width: 565px) { - .wide-window { display: none; } + .wide-window, .only-large-screen { display: none; } .row.menu ul { justify-content: space-between; } |