Hornwitser
49a329ac43
Implement a Viewport component and associated update script that allows rendering 3d content inside it. This is based on the implementation used at Furnavia for their 2025 website.
110 lines
1.5 KiB
CSS
110 lines
1.5 KiB
CSS
/* CSS Reset based on https://piccalil.li/blog/a-more-modern-css-reset/ */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
/* Kill all default margins and paddings */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
-moz-text-size-adjust: none;
|
|
-webkit-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
}
|
|
|
|
h1, h2, h3, h4, button, input, label {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
img, svg, picture {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
input, button, textarea, select {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
textarea:not([rows]) {
|
|
min-height: 10em;
|
|
}
|
|
|
|
:target {
|
|
scroll-margin-block: 2.5em;
|
|
}
|
|
|
|
/* Overall styling */
|
|
html {
|
|
color-scheme: light dark;
|
|
font-family: sans-serif;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
hgroup h1 {
|
|
margin-bottom: 0.1em;
|
|
}
|
|
hgroup p {
|
|
font-style: italic;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
margin-block-start: 1.25em;
|
|
margin-block-end: 0.5em;
|
|
}
|
|
|
|
:is(p, ol, ul) + :is(p, ol, ul) {
|
|
padding-block-start: 1em;
|
|
}
|
|
|
|
ol, ul {
|
|
padding-inline-start: 1.25em;
|
|
}
|
|
|
|
/* 3d viewport */
|
|
.in3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
.viewport {
|
|
pointer-events: none;
|
|
perspective: 300vmax;
|
|
perspective-origin: 50% var(--y-offset);
|
|
}
|
|
.viewport * {
|
|
pointer-events: initial;
|
|
}
|
|
|
|
/* Base Page Layout */
|
|
body {
|
|
max-width: 50rem;
|
|
padding: 0;
|
|
margin-block: 0;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.header {
|
|
padding-block: 1em;
|
|
}
|
|
|
|
.hero {
|
|
height: 30em;
|
|
background-color: grey;
|
|
}
|
|
|
|
/* index */
|
|
.author {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 1em;
|
|
margin-block: 1em;
|
|
}
|
|
.author h1 {
|
|
margin-block-start: 0;
|
|
}
|
|
.author p {
|
|
margin-block-end: 0;
|
|
}
|