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

adding document mode

Browse source 
I've been thinking a lot about the treehouse and I feel like it's time to say goodbye to the tree format.
This commit is contained in:
りき萌 2025-07-10 16:50:41 +02:00
parent 550c062327
commit 36705e7c1e
31 changed files with 940 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

95
static/css/page/index.css
View file

@ -1,98 +1,3 @@
h1.page-title {
--recursive-wght: 900;
font-size: 5.6rem;
display: flex;
flex-direction: column;
line-height: 1;
width: min-content;
transform: skew(-5deg, -5deg);
& .rikis {
width: max-content;
background-color: var(--text-color);
color: var(--background-color);
padding: 0.1em;
--shadow-color: var(--accent-pink);
box-shadow:
0.5px 0.5px 0 var(--shadow-color),
1px 1px 0 var(--shadow-color),
1.5px 1.5px 0 var(--shadow-color),
2px 2px 0 var(--shadow-color),
2.5px 2.5px 0 var(--shadow-color),
3px 3px 0 var(--shadow-color),
3.5px 3.5px 0 var(--shadow-color),
4px 4px 0 var(--shadow-color);
/*
import math
print("box-shadow:")
x = 0
max_x = 16
while x < max_x:
print(f"{x}px {x}px {math.pow(x / max_x, 2) * 16}px rgba(from var(--shadow-color) r g b / {math.pow(1 - x / max_x, 3)}),")
x += 0.5
*/
/* prettier-ignore */
box-shadow:
0px 0px 0.0px rgba(from var(--shadow-color) r g b / 1.0),
0.5px 0.5px 0.015625px rgba(from var(--shadow-color) r g b / 0.909149169921875),
1.0px 1.0px 0.0625px rgba(from var(--shadow-color) r g b / 0.823974609375),
1.5px 1.5px 0.140625px rgba(from var(--shadow-color) r g b / 0.744293212890625),
2.0px 2.0px 0.25px rgba(from var(--shadow-color) r g b / 0.669921875),
2.5px 2.5px 0.390625px rgba(from var(--shadow-color) r g b / 0.600677490234375),
3.0px 3.0px 0.5625px rgba(from var(--shadow-color) r g b / 0.536376953125),
3.5px 3.5px 0.765625px rgba(from var(--shadow-color) r g b / 0.476837158203125),
4.0px 4.0px 1.0px rgba(from var(--shadow-color) r g b / 0.421875),
4.5px 4.5px 1.265625px rgba(from var(--shadow-color) r g b / 0.371307373046875),
5.0px 5.0px 1.5625px rgba(from var(--shadow-color) r g b / 0.324951171875),
5.5px 5.5px 1.890625px rgba(from var(--shadow-color) r g b / 0.282623291015625),
6.0px 6.0px 2.25px rgba(from var(--shadow-color) r g b / 0.244140625),
6.5px 6.5px 2.640625px rgba(from var(--shadow-color) r g b / 0.209320068359375),
7.0px 7.0px 3.0625px rgba(from var(--shadow-color) r g b / 0.177978515625),
7.5px 7.5px 3.515625px rgba(from var(--shadow-color) r g b / 0.149932861328125),
8.0px 8.0px 4.0px rgba(from var(--shadow-color) r g b / 0.125),
8.5px 8.5px 4.515625px rgba(from var(--shadow-color) r g b / 0.102996826171875),
9.0px 9.0px 5.0625px rgba(from var(--shadow-color) r g b / 0.083740234375),
9.5px 9.5px 5.640625px rgba(from var(--shadow-color) r g b / 0.067047119140625),
10.0px 10.0px 6.25px rgba(from var(--shadow-color) r g b / 0.052734375),
10.5px 10.5px 6.890625px rgba(from var(--shadow-color) r g b / 0.040618896484375),
11.0px 11.0px 7.5625px rgba(from var(--shadow-color) r g b / 0.030517578125),
11.5px 11.5px 8.265625px rgba(from var(--shadow-color) r g b / 0.022247314453125),
12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625),
12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875),
13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875),
13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625),
14.0px 14.0px 12.25px rgba(from var(--shadow-color) r g b / 0.001953125),
14.5px 14.5px 13.140625px rgba(from var(--shadow-color) r g b / 0.000823974609375),
15.0px 15.0px 14.0625px rgba(from var(--shadow-color) r g b / 0.000244140625),
15.5px 15.5px 15.015625px rgba(from var(--shadow-color) r g b / 3.0517578125e-05)
;
}
& .adjectives {
--recursive-wght: 800;
font-size: 2rem;
vertical-align: 50%;
}
& .house {
width: max-content;
font-size: 4rem;
padding-left: 1em;
padding-top: 0.1em;
}
}
@media (hover: none) {
h1.page-title a {
text-decoration: none;
}
}
@media (max-width: 450px) {
body {
--top-min-spacing: 40px;