diff options
Diffstat (limited to 'sysret.org/themes/tabi-lean/sass/parts/_misc.scss')
| -rw-r--r-- | sysret.org/themes/tabi-lean/sass/parts/_misc.scss | 330 |
1 files changed, 330 insertions, 0 deletions
diff --git a/sysret.org/themes/tabi-lean/sass/parts/_misc.scss b/sysret.org/themes/tabi-lean/sass/parts/_misc.scss new file mode 100644 index 0000000..d798ddd --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_misc.scss @@ -0,0 +1,330 @@ +kbd { + border: 1px solid var(--divider-color); + border-radius: 5px; + background-color: var(--bg-0); + padding: 0.1rem 0.3rem; + font-size: 0.8rem; +} + +.draft-label { + margin-inline-end: 0.3rem; + background-color: var(--primary-color); + padding-inline: 4px; + padding-block: 2px; + color: var(--hover-color); +} + +.article-title { + display: block; + margin: 0; + color: var(--text-color-high-contrast); + font-weight: 550; + font-size: 2rem; + line-height: 3rem; +} + +iframe { + display: block; + margin-inline-start: 15%; + margin-inline-end: 15%; + margin-block-end: 3vmin; + border: none; + aspect-ratio: 16/9; + width: 100vmin; + max-width: 70%; +} + +ul { + margin-top: 0; +} + +.toc-container { + margin-block-end: 4vmin; +} + +.padding-top { + padding-top: 4vmin; +} + +.title-container { + padding-bottom: 8px; + .social { + margin-inline-start: 0.5rem; + } +} + +.bottom-divider { + border-bottom: var(--divider-color) solid 0.5px; +} + +::-moz-selection { + background: var(--primary-color); + color: var(--hover-color); + text-shadow: none; +} + +::selection { + background: var(--primary-color); + color: var(--hover-color); +} + +.nav.tags { + display: inline-block; +} + +blockquote { + margin: 0; + border-inline-start: 0.3rem solid var(--primary-color); + padding-inline-start: 1em; +} + +a { + position: relative; + color: var(--primary-color); + font-weight: inherit; + text-decoration: inherit; +} + +// External link styles with `external_links_class = "external"`. +main { + --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 5h-6v14h14v-6'/%3E%3Cpath d='M13 11l7 -7'/%3E%3Cpath d='M21 3h-6M21 3v6'/%3E%3C/g%3E%3C/svg%3E"); + + a.external:not(:has(img, svg, video, picture, figure))::after { + display: inline-block; + vertical-align: -0.05em; + margin-inline-start: 0.1em; + background-color: currentColor; + width: 0.8em; + height: 0.8em; + content: ''; + -webkit-mask-image: var(--external-link-icon); + -webkit-mask-size: 100% 100%; + } + + &:dir(rtl) a.external:not(:has(img, svg, video, picture, figure))::after { + transform: rotate(-90deg); + } + + .meta a.external:not(:has(img, svg, video, picture, figure))::after { + background-color: var(--meta-color); + } + + a.external:not(:has(img, svg, video, picture, figure)):hover::after { + background-color: var(--hover-color); + } +} + +a:hover { + background-color: var(--primary-color); + color: var(--hover-color); +} + +a:hover rt { + color: var(--text-color); +} + +a:not(.no-hover-padding):hover::before { + display: inline-block; + position: absolute; + z-index: -1; + inset-block-end: 0; + inset-block-start: 0; + inset-inline-end: -0.15em; + inset-inline-start: -0.15em; + background-color: var(--primary-color); + max-inline-size: 105%; + content: ""; +} + +@media screen and (max-width: 600px) { + .list > ul { + margin: 0; + padding: 0; + } +} + +hr { + margin: 3.5rem 0 1rem; + border: none; + background-color: var(--divider-color); + height: 1px; +} + +.footnotes-list, +.footnotes { + text-align: start; +} + +.footnote-reference { + font-size: 0.7rem; + font-family: var(--serif-font); +} + +.footnote-definition { + margin-block-end: 0.6rem; + + sup { + margin-inline-end: 0.15rem; + font-size: 0.75rem; + font-family: var(--serif-font); + } + + p { + display: inline; + } +} + +.footnote-backlink { + margin-inline-start: 0.2rem; + font-size: 0.8rem; +} + +.footnotes-list a[href^="#fr-"], +.footnotes a[href^="#fr-"] { + font-size: 0.8rem; +} + +.footnotes code { + font-size: 0.8rem; +} + +.references p { + margin-inline-start: 2.4rem; + text-indent: -2.4rem; +} + +.info-box { + margin-top: 1rem; + margin-block-end: 1rem; + border: 1px solid var(--primary-color); + border-radius: 10px; + border-inline-start-width: 0.3rem; + padding: 1rem; + text-align: center; +} + +#page-content { + margin-top: 4vmin; +} + +.hidden { + display: none; + visibility: hidden; +} + +.visually-hidden { + clip: rect(0 0 0 0); + position: absolute; + margin: -1px; + border: 0; + padding: 0; + width: 1px; + height: 1px; + overflow: hidden; + white-space: nowrap; +} + +details summary { + cursor: pointer; +} + +.interactive-icon { + cursor: pointer; + + path { + fill: var(--text-color); + } + + :hover path { + fill: var(--meta-color); + } +} + +.article-navigation { + display: flex; + margin-block-start: 2rem; + border-block-start: var(--divider-color) solid 0.5px; + padding-block-start: 2rem; + + div:first-child { + flex: 1; + text-align: start; + } + + div:last-child { + flex: 1; + text-align: end; + } + + div p { + color: var(--meta-color); + font-weight: 300; + line-height: 1.2rem; + font-family: var(--sans-serif-font); + letter-spacing: -0.4px; + } + + @media (max-width: 600px) { + flex-direction: column; + + div { + text-align: center !important; + } + } +} + +:dir(rtl) .arrow { + display: inline-block; + transform: scaleX(-1); +} + +// This for the arrows that point to a corner, (e.g. '↗', '↘', '↙', '↖') +:dir(rtl) .arrow-corner { + display: inline-block; + transform: rotate(-90deg); +} + +.mermaid p { + font-family: var(--sans-serif-font) !important; +} + +.mermaid .node .label { + max-width: none !important; +} + +// For the `force_text_direction` shortcode. +[data-force-text-direction="ltr"] { + direction: ltr; + unicode-bidi: bidi-override; +} + +[data-force-text-direction="rtl"] { + direction: rtl; + unicode-bidi: bidi-override; +} + +[data-force-text-direction="ltr"] *, +[data-force-text-direction="rtl"] * { + direction: inherit; +} + +.title-with-jump { + display: flex; + justify-content: space-between; + align-items: center; +} + +.title-with-jump h1 { + flex: 1; +} + +.jump-link { + flex-shrink: 0; + font-size: 0.9rem; +} + +@media (max-width: 500px) { + .title-with-jump { + flex-direction: column; + } +} |