Bio
@@ -146,12 +147,12 @@
}
:global(.dark #cover) {
background:
- repeating-linear-gradient(128.6deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 55px),
- repeating-linear-gradient(11deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 40px),
+ repeating-linear-gradient(128.6deg, transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 55px),
+ repeating-linear-gradient(11deg, transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 40px),
black
;
}
- :global(#cover > svg) {
+ :global(#cover-image > svg) {
max-width: 100svw;
max-height: 100svh;
width: 100%;
@@ -199,18 +200,11 @@
.nav-link {
display: inline-block;
}
- #cover-mobile {
- display: flex;
- flex-direction: column;
- overscroll-behavior: none;
- }
#navbar {
display: flex;
flex-wrap: wrap;
- justify-content: center;
+ padding-top: 30%;
flex-direction: column;
- margin-top: auto;
- margin-bottom: auto;
div {
padding-left: 5%;
}
@@ -220,30 +214,44 @@
flex-direction: column;
align-items: flex-start;
}
+ /* mobile */
@media (max-width: 700px) {
- #cover {
- height: 0;
- width: 0;
- visibility: hidden;
- }
- #cover-mobile {
+ #navbar {
visibility: visible;
height: 100svh;
}
- }
- @media (min-width: 701px) {
#cover {
- min-width: 100svw;
- min-height: 100svh;
- visibility: visible;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
}
- #cover-mobile {
+ #cover-image {
+ position: absolute;
+ max-height: 100svh;
+ max-width: 100svw;
+ pointer-events: none;
+
+ :global(.effect) {
+ visibility: visible;
+ }
+ }
+ :global(#cover-image a) {
+ pointer-events: none;
+ }
+ :global(svg .entity-label) {
+ visibility: hidden;
+ }
+ }
+ /* desktop */
+ @media (min-width: 701px) {
+ #navbar {
visibility: hidden;
height: 0;
width: 0;
}
}
+ /* main */
main {
width: 100%;
@apply bg-background;