diff options
-rw-r--r-- | index.html | 10 | ||||
-rw-r--r-- | style.css | 33 |
2 files changed, 31 insertions, 12 deletions
@@ -51,11 +51,13 @@ <img src="data/obama.png" /> </marquee> <p class="sprinkler"> - Call 1-800-1ST-YEAR to get a sprinkler to go off in a room near you! - </p> - <p id="middle"> - important stuff + Call 1-800-1ST-YEAR to get a sprinkler to go off in a dorm near you! </p> + <div class="wrapper"> + <p id="middle"> + important stuff + </p> + </div> <table class="middle"> <tr> <td> @@ -4,12 +4,12 @@ html, body, #mainBod { } #mainBod { - position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; background-image: url("data/rit.webp"); width: 100vw; + min-height: 100%; height: 100vh; animation: bg 1s linear infinite alternate; display: flex; @@ -36,14 +36,19 @@ html, body, #mainBod { } #middle { - font-size: 30px; + font-size: 2em; width: fit-content; - margin-left: 12.5%; background-color: black; color: orange; animation: across 2s linear infinite; } +.wrapper { + animation: across_parent 2s linear infinite; + width: 80%; + margin-left: 10%; +} + td a { color: yellow; } @@ -82,7 +87,9 @@ footer { position: sticky; bottom: 0; height: 10%; + min-height: 10%; margin: 0; + overflow: auto; } .buttons { @@ -169,7 +176,7 @@ html.dither>body>div{ } html.dither>body>div>div{ -filter: initial; + filter: initial; mix-blend-mode: soft-light; isolation: isolate; image-rendering: initial; @@ -187,7 +194,7 @@ filter: initial; .munson { text-align: center; width: 80%; - font-size: 50px; + font-size: 5vh; padding: 0; margin: 0; margin-bottom: 1em; @@ -201,7 +208,7 @@ filter: initial; } #munson img { - height: 20em; + height: 20vh; width: 100%; } @@ -286,10 +293,20 @@ filter: initial; @keyframes across { 0%, 100% { - transform: translateX(0vw); + transform: translateX(0%); + } + 50% { + transform: translateX(-100%); + } +} + +@keyframes across_parent { + 0%, + 100% { + transform: translateX(0%); } 50% { - transform: translateX(62.5vw); + transform: translateX(100%); } } |