Add comments
This commit is contained in:
parent
1528a2e740
commit
cbdaca7c15
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>flexozyme</title>
|
<title>flexozyme</title>
|
||||||
</head>
|
</head>
|
||||||
|
<!-- The black 180deg in the conic gradient ensures the colorful part of the gradient spans a 90deg arc -->
|
||||||
<body style="height:100vh;margin:0;display:flex">
|
<body style="height:100vh;margin:0;display:flex">
|
||||||
<div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,red,orange,black 180deg)"></div>
|
<div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,red,orange,black 180deg)"></div>
|
||||||
<div style="flex:1;display:flex;flex-direction:column">
|
<div style="flex:1;display:flex;flex-direction:column">
|
||||||
|
|
10
index.html
10
index.html
|
@ -5,14 +5,14 @@
|
||||||
<title>Diagonal Scroll</title>
|
<title>Diagonal Scroll</title>
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
left: -500px;
|
left: -500px; /* The div is shifted to the left so the left side of the p elements don't get clipped */
|
||||||
top: 0px;
|
top: 0px;
|
||||||
position: fixed;
|
position: fixed; /* Make the div fill the entire screen */
|
||||||
width: 1000px;
|
width: 1000px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: scroll;
|
overflow: scroll; /* This adds the diagonal scroll bar */
|
||||||
transform-origin: top left;
|
transform-origin: top left;
|
||||||
transform: skewX(45deg);
|
transform: skewX(45deg); /* I originally used a rotate transform, but the math is way easier when using skewX */
|
||||||
font-family: DejaVu Sans, Noto Sans, Sans-Serif;
|
font-family: DejaVu Sans, Noto Sans, Sans-Serif;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
|
@ -23,6 +23,8 @@
|
||||||
transform: skewX(-45deg);
|
transform: skewX(-45deg);
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
|
/* This adds a block of empty space at the bottom of the div */
|
||||||
|
/* Otherwise, if the screen is taller than its width, the text at the bottom will be to the right of the screen's right edge */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: calc(100vh - 100vw + 400px);
|
height: calc(100vh - 100vw + 400px);
|
||||||
transform-origin: top left;
|
transform-origin: top left;
|
||||||
|
|
Loading…
Reference in a new issue