Add comments
This commit is contained in:
parent
1528a2e740
commit
cbdaca7c15
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>flexozyme</title>
|
||||
</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">
|
||||
<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">
|
||||
|
|
10
index.html
10
index.html
|
@ -5,14 +5,14 @@
|
|||
<title>Diagonal Scroll</title>
|
||||
<style>
|
||||
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;
|
||||
position: fixed;
|
||||
position: fixed; /* Make the div fill the entire screen */
|
||||
width: 1000px;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
overflow: scroll; /* This adds the diagonal scroll bar */
|
||||
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;
|
||||
}
|
||||
p {
|
||||
|
@ -23,6 +23,8 @@
|
|||
transform: skewX(-45deg);
|
||||
}
|
||||
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;
|
||||
height: calc(100vh - 100vw + 400px);
|
||||
transform-origin: top left;
|
||||
|
|
Loading…
Reference in a new issue