mirror of
https://github.com/seigler/seigler.github.io
synced 2025-07-27 07:16:09 +00:00
53 lines
1.2 KiB
CSS
53 lines
1.2 KiB
CSS
/* micro styles reset */
|
|
*, :before, :after {
|
|
box-sizing: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
transform-style: preserve-3d;
|
|
font-family: inherit;
|
|
}
|
|
html {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
/*layout*/
|
|
body {
|
|
background-image: url(workstation.jpg);
|
|
background-size: 100% auto;
|
|
background-position: 50% 0%;
|
|
background-repeat: no-repeat;
|
|
height: 100%;
|
|
font-size: calc(1em + 1vw);
|
|
font-family: monospace;
|
|
perspective: 68vw;
|
|
perspective-origin: 69vw 45vw;
|
|
}
|
|
.wrapper {
|
|
position: relative;
|
|
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vw, 5.3vw, -27.4vw);
|
|
transform-origin: top right;
|
|
color: #DA0;
|
|
padding: 1vw;
|
|
height: 75vw;
|
|
width: 100vw;
|
|
margin: 0 auto;
|
|
overflow: auto;
|
|
}
|
|
@media (min-width: 100vh) {
|
|
body {
|
|
background-size: 100vh auto;
|
|
font-size: calc(1em + 1vh);
|
|
font-family: monospace;
|
|
perspective: 68vh;
|
|
perspective-origin: calc(50vw + 19vh) 45vh;
|
|
}
|
|
.wrapper {
|
|
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh);
|
|
transform-origin: top right;
|
|
color: #DA0;
|
|
padding: 1vh;
|
|
width: 100vh;
|
|
height: 75vh;
|
|
}
|
|
}
|