riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

switch the layout to a wider one that leans slightly to the left of the page

Browse source 
this is to make space on the right for a nice background in the future
This commit is contained in:
りき萌 2024-10-29 18:14:01 +01:00
parent 1fdf65e7a3
commit 523a364fa9
12 changed files with 487 additions and 327 deletions
Download patch file Download diff file Expand all files Collapse all files

106
static/css/tree.css
View file

@ -25,7 +25,7 @@
}
.breadcrumb::before {
content: '';
content: "";
display: inline-block;
background-image: var(--icon-breadcrumb);
@ -40,8 +40,9 @@
}
.breadcrumb a {
--recursive-mono: 1.0;
--recursive-mono: 1;
--recursive-wght: 500;
--recursive-casl: 0;
color: var(--text-color);
text-decoration: none;
@ -51,6 +52,29 @@
text-decoration: underline;
}
.breadcrumbs > .root-breadcrumb {
display: none; /* only when main logo is hidden */
margin-right: -8px;
& a,
& svg {
display: block;
}
& .logo {
width: 48px;
height: 48px;
padding: 8px;
color: var(--text-color);
}
}
@media (max-width: 450px) {
.breadcrumbs > .root-breadcrumb {
display: block;
}
}
/*** Tree ***/
.tree {
@ -72,7 +96,11 @@
/* Use an indent level appropriate for the viewport. */
.tree ul {
--tree-responsive-indent-width: clamp(var(--8px), 2vw, var(--tree-indent-width));
--tree-responsive-indent-width: clamp(
var(--8px),
2vw,
var(--tree-indent-width)
);
/* Draw indent guides. */
padding-left: calc(var(--tree-responsive-indent-width) / 2);
@ -82,21 +110,19 @@
transition: border-left-color var(--transition-duration);
}
.tree details:has(.branch-container:hover)>ul {
.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 {
.tree > ul {
padding-left: 0;
border-left: none;
}
.tree details {
/* Disable the rightwards chevron in <details> elements */
&>summary {
& > summary {
list-style: none;
cursor: pointer;
@ -112,13 +138,13 @@
list-style: none;
/* Stretch branch content to the full width of the page */
&>div,
&>details {
& > div,
& > details {
width: 100%;
}
/* Add an underline for leaf branches */
&>div {
& > div {
box-sizing: border-box;
margin-bottom: calc(- var(--1px));
@ -130,18 +156,17 @@
}
}
&>div,
&>details>summary {
& > 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 {
.tree details > summary {
/* Slightly round for elegance */
border-radius: var(--8px);
@ -156,13 +181,12 @@
/* 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 {
.tree li > div:first-child,
.tree li > details > summary:first-child {
border-bottom: var(--1px) solid var(--border-1);
}
.tree details>summary {
.tree details > summary {
/* In that case summaries shall not be rounded. */
border-radius: 0;
}
@ -185,11 +209,11 @@ th-bp {
}
/* Change image of th-bp if it has children and/or is collapsible */
.tree details[open]>summary>th-bp {
.tree details[open] > summary > th-bp {
background-image: var(--icon-collapse);
}
.tree details:not([open])>summary>th-bp {
.tree details:not([open]) > summary > th-bp {
background-image: var(--icon-expand);
}
@ -199,8 +223,9 @@ th-bc {
padding-top: var(--6px);
padding-bottom: var(--6px);
/* Grow to fill the entire available space. This pushes out th-bb to the far right. */
flex-grow: 1;
/* 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) {
@ -213,9 +238,8 @@ th-bc {
/* 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';
content: "\00A0";
display: inline-block;
background-image: var(--icon-more);
@ -234,10 +258,9 @@ th-bc {
/* Display a [draft] pill for branches that are drafts. */
.tree li.draft {
&>details>summary>th-bc::before,
&>div>th-bc::before {
content: 'draft';
& > details > summary > th-bc::before,
& > div > th-bc::before {
content: "draft";
display: block;
width: min-content;
@ -257,10 +280,12 @@ th-bb {
/* 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%;
@ -268,7 +293,7 @@ th-bb {
}
/* When the parent is hovered over, display the button bar. */
.tree *:hover>th-bb {
.tree *:hover > th-bb {
opacity: 100%;
}
@ -335,14 +360,18 @@ th-bb .branch-date {
to the element highlighted by ?. */
.tree :target,
.tree .target {
&>details>summary,
&>div {
& > 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: 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;
@ -383,12 +412,11 @@ ul.branch-quote {
position: relative;
&::before {
--recursive-wght: 900;
--recursive-casl: 0;
content: '“';
content: "“";
position: absolute;
right: var(--16px);
top: var(--1px);