some responsiveness tweaks

This commit is contained in:
liquidex 2023-08-20 15:54:06 +02:00
parent aa91046bc5
commit d2aef1d7a1
4 changed files with 51 additions and 1 deletions

View file

@ -166,4 +166,5 @@
- breaking - breaking
% content.link = "secret" % content.link = "secret"
id = "01H89KGMPBCNKH4D39ZNQJDPQ9"
+ this block includes another block's content + this block includes another block's content

View file

@ -6,6 +6,16 @@ body {
margin-right: auto; margin-right: auto;
} }
main {
padding: 0 16px;
}
@media screen and (max-width: 480px) {
main {
padding: 0 8px;
}
}
/* Choose more pretty colors than vanilla HTML */ /* Choose more pretty colors than vanilla HTML */
body { body {
@ -111,6 +121,12 @@ pre {
border-radius: 8px; border-radius: 8px;
} }
/* And don't let code examples fly off and overflow the window */
pre {
overflow-x: scroll;
}
/* Also don't let images get out of hand */ /* Also don't let images get out of hand */
img { img {

View file

@ -1,7 +1,13 @@
/* The tree indents shouldn't be too spaced out */ /* The tree indents shouldn't be too spaced out */
.tree ul { .tree ul {
padding-left: 24px; padding-left: clamp(12px, 2vw, 24px);
}
/* But the first block should not be indented. */
.tree>ul {
padding-left: 0;
} }
/* Make the tree have + and - instead of the default details/summary arrow */ /* Make the tree have + and - instead of the default details/summary arrow */
@ -43,6 +49,10 @@
padding-right: 32px; padding-right: 32px;
} }
.tree li[is="th-linked-branch"]>details>summary:first-child {
padding-right: 56px;
}
.tree li>div:first-child:hover { .tree li>div:first-child:hover {
border-bottom: 1px solid rgba(0, 0, 0, 15%); border-bottom: 1px solid rgba(0, 0, 0, 15%);
margin-bottom: -1px; margin-bottom: -1px;
@ -78,6 +88,19 @@
background-image: url('../svg/collapse.svg'); background-image: url('../svg/collapse.svg');
} }
@media (hover: none) {
.tree li>div:first-child,
.tree li>details>summary:first-child {
border-bottom: 1px solid rgba(0, 0, 0, 15%);
}
.tree details>summary {
border-radius: 0px;
}
}
.tree th-bb { .tree th-bb {
height: 24px; height: 24px;
margin: 4px; margin: 4px;
@ -92,11 +115,18 @@
opacity: 0%; opacity: 0%;
} }
.tree li>details>summary:hover>th-bb, .tree li>details>summary:hover>th-bb,
.tree li>div:hover>th-bb { .tree li>div:hover>th-bb {
opacity: 100%; opacity: 100%;
} }
@media (hover: none) {
.tree th-bb {
opacity: 100%;
}
}
.tree .icon { .tree .icon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
@ -106,6 +136,7 @@
height: 24px; height: 24px;
} }
.tree .icon-permalink { .tree .icon-permalink {
background-image: url("../svg/permalink.svg"); background-image: url("../svg/permalink.svg");
} }

View file

@ -7,6 +7,8 @@
<title>{{ config.user.title }}</title> <title>{{ config.user.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{ site }}/static/css/main.css"> <link rel="stylesheet" href="{{ site }}/static/css/main.css">
<link rel="stylesheet" href="{{ site }}/static/css/tree.css"> <link rel="stylesheet" href="{{ site }}/static/css/tree.css">
<link rel="stylesheet" href="{{ site }}/static/font/font.css"> <link rel="stylesheet" href="{{ site }}/static/font/font.css">