リキ萌
36705e7c1e
I've been thinking a lot about the treehouse and I feel like it's time to say goodbye to the tree format.
75 lines
1.7 KiB
CSS
75 lines
1.7 KiB
CSS
@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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#b-about {
|
|
--section-color: var(--accent-pink);
|
|
}
|
|
|
|
#b-programming {
|
|
--section-color: var(--accent-red);
|
|
--section-text-offset: -0.1em;
|
|
}
|
|
|
|
#b-design {
|
|
--section-color: var(--accent-yellow);
|
|
}
|
|
|
|
#b-music {
|
|
--section-color: var(--accent-green);
|
|
--section-text-offset: -0.05em;
|
|
}
|
|
|
|
#b-games {
|
|
--section-color: var(--accent-blue);
|
|
--section-text-offset: 0.05em;
|
|
}
|
|
|
|
#b-philosophy {
|
|
--section-color: var(--accent-purple);
|
|
}
|