434 lines
9.7 KiB
CSS
434 lines
9.7 KiB
CSS
/*** Variables ***/
|
|
|
|
:root {
|
|
--tree-indent-width: 3.2rem;
|
|
--transition-duration: 0.15s;
|
|
--button-bar-icon-size: 2.8rem;
|
|
}
|
|
|
|
/*** Breadcrumbs ***/
|
|
|
|
.breadcrumbs {
|
|
list-style-type: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
height: min-content;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
align-items: center;
|
|
|
|
opacity: 70%;
|
|
}
|
|
|
|
.breadcrumb::before {
|
|
content: "";
|
|
display: inline-block;
|
|
|
|
background-image: var(--icon-breadcrumb);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
opacity: 70%;
|
|
|
|
width: 3.6rem;
|
|
height: 1.7rem;
|
|
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
--recursive-mono: 1;
|
|
--recursive-wght: 500;
|
|
--recursive-casl: 0;
|
|
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumbs > .root-breadcrumb {
|
|
display: none; /* only when main logo is hidden */
|
|
margin-right: -0.8rem;
|
|
|
|
& a,
|
|
& svg {
|
|
display: block;
|
|
}
|
|
|
|
& .logo {
|
|
/* NOTE: px used for pixel perfection */
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0.8rem;
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 450px) {
|
|
.breadcrumbs > .root-breadcrumb {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/*** Tree ***/
|
|
|
|
.tree {
|
|
--tree-indent-guide-dim: transparent;
|
|
--tree-indent-guide-highlighted: transparent;
|
|
}
|
|
|
|
.tree:has(.branch-container:hover) {
|
|
--tree-indent-guide-dim: transparent;
|
|
--tree-indent-guide-highlighted: var(--border-1);
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.tree {
|
|
--tree-indent-guide-dim: var(--border-1);
|
|
--tree-indent-guide-highlighted: var(--border-1);
|
|
}
|
|
}
|
|
|
|
/* Use an indent level appropriate for the viewport. */
|
|
.tree ul {
|
|
--tree-responsive-indent-width: clamp(
|
|
0.8rem,
|
|
2vw,
|
|
var(--tree-indent-width)
|
|
);
|
|
|
|
/* Draw indent guides. */
|
|
padding-left: calc(var(--tree-responsive-indent-width) / 2);
|
|
margin-left: calc(var(--tree-responsive-indent-width) / 2);
|
|
border-left: 0.1rem solid var(--tree-indent-guide-dim);
|
|
|
|
transition: border-left-color var(--transition-duration);
|
|
}
|
|
|
|
.tree details:has(.branch-container:hover) > ul {
|
|
border-left-color: var(--tree-indent-guide-highlighted);
|
|
}
|
|
|
|
/* Top level should not have an indent or a border. */
|
|
.tree > ul {
|
|
padding-left: 0;
|
|
border-left: none;
|
|
}
|
|
|
|
.tree details {
|
|
/* Disable the rightwards chevron in <details> elements */
|
|
& > summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Child branches */
|
|
.tree li {
|
|
/* <li> elements should not have any bullet points or whatever */
|
|
list-style: none;
|
|
|
|
/* Stretch branch content to the full width of the page */
|
|
& > div,
|
|
& > details {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Add an underline for leaf branches */
|
|
& > div {
|
|
box-sizing: border-box;
|
|
|
|
margin-bottom: -0.1rem;
|
|
border-bottom: 0.1rem solid transparent;
|
|
transition: border-bottom-color var(--transition-duration);
|
|
|
|
&:hover {
|
|
border-bottom-color: var(--border-1);
|
|
}
|
|
}
|
|
|
|
& > div,
|
|
& > details > summary {
|
|
/* Child elements are laid out horizontally in a flexbox. */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/* <summary> is used for the visual content of branches with children. It's the large horizontal bar
|
|
and notably *excludes* children. */
|
|
.tree details > summary {
|
|
/* Slightly round for elegance */
|
|
border-radius: 0.8rem;
|
|
|
|
/* Give it a shaded background on hover */
|
|
background-color: transparent;
|
|
transition: background-color var(--transition-duration);
|
|
|
|
&:hover {
|
|
background-color: var(--shaded-background);
|
|
}
|
|
}
|
|
|
|
/* For media without hover functionality, draw a bottom border everywhere as a visual anchor for where to tap */
|
|
@media (hover: none) {
|
|
.tree li > div:first-child,
|
|
.tree li > details > summary:first-child {
|
|
border-bottom: 0.1rem solid var(--border-1);
|
|
}
|
|
|
|
.tree details > summary {
|
|
/* In that case summaries shall not be rounded. */
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
/* The following three elements - bp, bc, and bb - are there in all branches, regardless of their parent. */
|
|
|
|
/* bp - bullet point */
|
|
th-bp {
|
|
display: block;
|
|
width: var(--tree-indent-width);
|
|
height: 2.8rem;
|
|
|
|
background-image: var(--icon-leaf);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
|
|
/* Prevent shrinkage when viewport is too low */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Change image of th-bp if it has children and/or is collapsible */
|
|
.tree details[open] > summary > th-bp {
|
|
background-image: var(--icon-collapse);
|
|
}
|
|
|
|
.tree details:not([open]) > summary > th-bp {
|
|
background-image: var(--icon-expand);
|
|
}
|
|
|
|
/* bc - branch content */
|
|
th-bc {
|
|
display: block;
|
|
padding-top: 0.6rem;
|
|
padding-bottom: 0.6rem;
|
|
|
|
/* Lines that are too long get very hard to read. */
|
|
width: 100%;
|
|
max-width: 72em;
|
|
|
|
/* Bit of a hack to make <pre>s in <th-bc> have scrollbars proper. */
|
|
&:has(pre, th-literate-program) {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* Display a chevron hinting that the collapsed branch has more content in its children. */
|
|
.tree details:not([open])>summary>th-bc>:last-child,
|
|
/* NOTE: Linked branches have a slightly different structure (extra <noscript> tag) and therefore
|
|
:last-child does not work. */
|
|
.tree li[data-th-link]>details:not([open])>summary>th-bc>:nth-last-child(2) {
|
|
&::after {
|
|
content: "\00A0";
|
|
display: inline-block;
|
|
|
|
background-image: var(--icon-more);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
|
|
width: 1.6rem;
|
|
height: 1.2em;
|
|
|
|
vertical-align: text-bottom;
|
|
margin-left: 0.5em;
|
|
|
|
margin-right: -2.25rem;
|
|
}
|
|
}
|
|
|
|
/* Display a [draft] pill for branches that are drafts. */
|
|
.tree li.draft {
|
|
& > details > summary > th-bc::before,
|
|
& > div > th-bc::before {
|
|
content: "draft";
|
|
|
|
display: block;
|
|
width: min-content;
|
|
|
|
background-color: #058ef0;
|
|
color: #ffffff;
|
|
padding: 0.4rem 1.2rem;
|
|
margin-bottom: 0.4rem;
|
|
border-radius: 100rem;
|
|
}
|
|
}
|
|
|
|
/* bb - button bar */
|
|
th-bb {
|
|
height: 100%;
|
|
margin: 0.4rem;
|
|
|
|
/* Should be displayed on the top of the branch rather than in the middle. */
|
|
align-self: start;
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: end;
|
|
|
|
/* Keep the button bar invisible by default. */
|
|
opacity: 0%;
|
|
transition: opacity var(--transition-duration);
|
|
}
|
|
|
|
/* When the parent is hovered over, display the button bar. */
|
|
.tree *:hover > th-bb {
|
|
opacity: 100%;
|
|
}
|
|
|
|
/* For media without hover functionality, th-bb should always be visible. */
|
|
@media (hover: none) {
|
|
:root {
|
|
--button-bar-icon-size: 3.6rem;
|
|
}
|
|
|
|
.tree th-bb {
|
|
opacity: 100%;
|
|
|
|
/* Replace margin with button size to make it easier to click. */
|
|
margin: 0;
|
|
|
|
& a.icon {
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Style branch dates to be smaller and less noticable. */
|
|
th-bb .branch-date {
|
|
opacity: 50%;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* Hide branch dates on very small displays. No clue how to fix this just yet. */
|
|
@media (max-width: 600px) {
|
|
th-bb .branch-date {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Icons (used in the button bar) */
|
|
.tree {
|
|
& .icon {
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
opacity: 35%;
|
|
|
|
width: var(--button-bar-icon-size);
|
|
height: var(--button-bar-icon-size);
|
|
}
|
|
|
|
& .icon-permalink {
|
|
background-image: var(--icon-permalink);
|
|
}
|
|
|
|
& .icon-go {
|
|
background-image: var(--icon-go);
|
|
}
|
|
}
|
|
|
|
/* Style the loading text to not be too attention grabbing. */
|
|
.tree .link-loading {
|
|
padding-left: 1.75em;
|
|
opacity: 50%;
|
|
}
|
|
|
|
/* Highlight branch selected by # or ? in URL.
|
|
The latter is not supported by CSS so we use some auxiliary JavaScript to add a .target class
|
|
to the element highlighted by ?. */
|
|
.tree :target,
|
|
.tree .target {
|
|
& > details > summary,
|
|
& > div {
|
|
background-color: var(--shaded-background);
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent 12.5%,
|
|
var(--shaded-background),
|
|
transparent,
|
|
var(--shaded-background),
|
|
transparent,
|
|
var(--shaded-background) 87.5%
|
|
);
|
|
background-size: 800% 100%;
|
|
background-position-x: 100%;
|
|
animation: hey-listen 2s linear;
|
|
}
|
|
}
|
|
|
|
@keyframes hey-listen {
|
|
0% {
|
|
background-position-x: 0%;
|
|
}
|
|
|
|
100% {
|
|
background-position-x: 100%;
|
|
}
|
|
}
|
|
|
|
/* <noscript> navigation links */
|
|
.tree .navigate {
|
|
padding-left: 1.75em;
|
|
background-repeat: no-repeat;
|
|
background-position: 0% 50%;
|
|
opacity: 80%;
|
|
}
|
|
|
|
/* branch-quote class for "air quote branches"; used to separate a subtree from a parent tree
|
|
stylistically such that it's interpretable as a form of block quote. */
|
|
ul.branch-quote {
|
|
--vertical-margin: 0.8rem;
|
|
--padding: 0.8rem;
|
|
|
|
margin-top: var(--vertical-margin);
|
|
margin-bottom: var(--vertical-margin);
|
|
padding-top: var(--padding);
|
|
padding-bottom: var(--padding);
|
|
padding-right: var(--padding);
|
|
border: 0.1rem solid var(--border-1);
|
|
border-radius: 0.8rem;
|
|
|
|
position: relative;
|
|
|
|
&::before {
|
|
--recursive-wght: 900;
|
|
--recursive-casl: 0;
|
|
|
|
content: "“";
|
|
position: absolute;
|
|
right: 1.6rem;
|
|
top: 0.1rem;
|
|
font-size: 4.8rem;
|
|
opacity: 50%;
|
|
|
|
transition: opacity var(--transition-duration);
|
|
}
|
|
|
|
&:hover::before {
|
|
opacity: 0%;
|
|
}
|
|
}
|