180 lines
6.1 KiB
CSS
180 lines
6.1 KiB
CSS
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;
|
|
}
|
|
|
|
nav#nav-logo {
|
|
display: block;
|
|
|
|
& .logo {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 75vw;
|
|
height: 75vw;
|
|
transform: translate(-25%, -20%);
|
|
pointer-events: none;
|
|
opacity: 15%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#index\:treehouse {
|
|
& > details > summary {
|
|
padding-left: 1rem;
|
|
|
|
& > th-bp {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
main.tree > ul {
|
|
/* Optical text offset to make the icons look less misaligned.
|
|
This is adjusted per each hobby corner to fit the icons.
|
|
|
|
Although the icons may be aligned in terms of bounds, optically they do not look
|
|
very good next to the text, having awkward blank space to the right.
|
|
|
|
This aims to improve the readability of that a bit without being too noticable. */
|
|
--section-text-offset: 0em;
|
|
--section-icon-align: -30%;
|
|
|
|
& > li {
|
|
& > details > summary {
|
|
text-decoration: 4px underline var(--section-color);
|
|
text-underline-offset: 4px;
|
|
|
|
& > th-bc .hobby-icon {
|
|
width: auto;
|
|
height: 48px;
|
|
|
|
margin-right: calc(0.2em + var(--section-text-offset));
|
|
|
|
vertical-align: var(--section-icon-align);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#index\:about {
|
|
--section-color: var(--accent-pink);
|
|
}
|
|
|
|
#index\:programming {
|
|
--section-color: var(--accent-red);
|
|
--section-text-offset: -0.1em;
|
|
}
|
|
|
|
#index\:design {
|
|
--section-color: var(--accent-yellow);
|
|
}
|
|
|
|
#index\:music {
|
|
--section-color: var(--accent-green);
|
|
--section-text-offset: -0.05em;
|
|
}
|
|
|
|
#index\:games {
|
|
--section-color: var(--accent-blue);
|
|
--section-text-offset: 0.05em;
|
|
}
|
|
|
|
#index\:philosophy {
|
|
--section-color: var(--accent-purple);
|
|
}
|