97 lines
2 KiB
CSS
97 lines
2 KiB
CSS
h1.page-title {
|
|
--recursive-wght: 900;
|
|
font-size: 5.6rem;
|
|
}
|
|
|
|
@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: #a7d5e0;
|
|
}
|
|
|
|
#index\:programming {
|
|
--section-color: var(--liquidex-brand-red);
|
|
--section-text-offset: -0.1em;
|
|
}
|
|
|
|
#index\:design {
|
|
--section-color: var(--liquidex-brand-yellow);
|
|
}
|
|
|
|
#index\:music {
|
|
--section-color: var(--liquidex-brand-green);
|
|
--section-text-offset: -0.05em;
|
|
}
|
|
|
|
#index\:games {
|
|
--section-color: var(--liquidex-brand-blue);
|
|
--section-text-offset: 0.05em;
|
|
}
|
|
|
|
#index\:philosophy {
|
|
--section-color: #c952f5;
|
|
}
|