tbeseda.com
this repo has no description
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Tiny Bookmark Tab</title>
7 <style>
8 html {
9 color-scheme: light dark;
10 --spacing: 1.65rem;
11 --radius: 8px;
12 --bg: #F5F5F5;
13 --primary: #333;
14 --secondary: #444;
15 --border: #DEE1E6;
16 --button: #999;
17 }
18 body {
19 padding: 1rem 0;
20 margin: 0;
21 background-color: var(--bg);
22 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
23 font-size: 16px;
24 color: var(--primary);
25 line-height: 1.65;
26 }
27
28 ul {
29 margin: 0;
30 }
31
32 main {
33 max-width: 60ch;
34 margin: 0 auto;
35 }
36
37 #filter {
38 width: 80%;
39 padding: 0.5rem;
40 margin: 0 auto;
41 border: 1px solid var(--border);
42 border-radius: var(--radius);
43 }
44
45 main > ul > li {
46 margin-bottom: 1.5rem;
47 }
48
49 li > a {
50 display: flex;
51 flex-direction: row;
52 align-items: center;
53 gap: 0.33rem;
54 overflow: ellipsis;
55 color: var(--secondary);
56 text-decoration: none;
57 }
58
59 li > a > span {
60 white-space: nowrap;
61 overflow: hidden;
62 text-overflow: ellipsis;
63 }
64
65 /* https://iamkate.com/code/tree-views/ */
66 li {
67 display: block;
68 position: relative;
69 padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
70 margin-bottom: 0.2rem;
71 }
72
73 li ul {
74 margin-left: calc(var(--radius) - var(--spacing));
75 padding-left: 0;
76 }
77
78 li ul li {
79 border-left: 2px solid var(--border);
80 }
81
82 li ul li:last-child {
83 border-color: transparent;
84 }
85
86 li ul li::before {
87 content: '';
88 display: block;
89 position: absolute;
90 top: calc(var(--spacing) / -2);
91 left: -2px;
92 width: calc(var(--spacing) + 2px);
93 height: calc(var(--spacing) + 1px);
94 border: solid var(--border);
95 border-width: 0 0 2px 2px;
96 }
97
98 summary {
99 display: block;
100 cursor: pointer;
101 font-weight: bold;
102 }
103
104 summary::marker,
105 summary::-webkit-details-marker {
106 display: none;
107 }
108
109 /* li::after, */
110 summary::before {
111 content: '';
112 display: block;
113 position: absolute;
114 top: calc(var(--spacing) / 2 - var(--radius));
115 left: calc(var(--spacing) - var(--radius) - 1px);
116 width: calc(2 * var(--radius));
117 height: calc(2 * var(--radius));
118 border-radius: 50%;
119 background: var(--border);
120 }
121
122 summary::before {
123 content: '+';
124 z-index: 1;
125 background: var(--button);
126 color: var(--bg);
127 line-height: calc(2 * var(--radius) - 2px);
128 text-align: center;
129 font-size: 0.9rem;
130 }
131
132 details[open] > summary::before {
133 content: '−';
134 background: var(--border);
135 }
136
137 @media (prefers-color-scheme: dark) {
138 html {
139 --bg: #202124;
140 --primary: #f5f5f5;
141 --secondary: #bbb;
142 --border: #35363A;
143 --button: #606164;
144 }
145 }
146 </style>
147</head>
148<body>
149 <main id="main"></main>
150 <script src="/assets/tiny.js"></script>
151</body>
152</html>