Changes
2 changed files (+7/-4)
-
-
@@ -4,6 +4,7 @@ <head><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">
-
-
-
@@ -5,14 +5,14 @@ <meta charset="utf-8"><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-origin: top left;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;
-