Add comments

1 files changed, 6 insertions, 4 deletions

diff --git a/index.html b/index.html
index 158c700..9150f88 100644
--- a/index.html
+++ b/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;