| @@ -25,7 +25,7 @@ | - Get an umbrella? ☂️ + Got an umbrella? ☂️ | @@ -36,64 +36,6 @@ |
Call 1-800-1ST-YEAR to get a sprinkler to go off in a room near you!
++ important stuff +
+
+
+ 
+
+ |
+
+
+ 
+
+ |
+
+
+ 
+
+ |
+
+
+ 
+
+ |
+
+ The munson art gallery +
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+ 
@@ -120,7 +117,7 @@
diff --git a/style.css b/style.css
index 622691e..00e1f0a 100644
--- a/style.css
+++ b/style.css
@@ -1,29 +1,33 @@
-body {
+html, body, #mainBod {
margin: 0;
+ padding: 0;
}
#mainBod {
+ position: absolute;
+ top: 0; bottom: 0;
+ left: 0; right: 0;
+ overflow: auto;
background-image: url("data/rit.webp");
width: 100vw;
height: 100vh;
- animation: animatedBackground 1s linear infinite alternate;
+ animation: bg 1s linear infinite alternate;
display: flex;
flex-direction: column;
- margin: 0;
font-family: "Comic Sans", "Comic Sans MS", "Chalkboard",
"ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive,
sans-serif;
}
+.wank {
+ transform: rotateZ(180deg) translateY(-100vh);
+}
+
.thicc {
flex: 1;
}
-a {
- color: yellow;
-}
-
-table {
+.top {
width: 50%;
background-color: black;
color: white;
@@ -31,21 +35,69 @@ table {
text-align: center;
}
-table td {
+#middle {
+ font-size: 30px;
+ width: fit-content;
+ margin-left: 12.5%;
+ background-color: black;
+ color: orange;
+ animation: across 2s linear infinite;
+}
+
+td a {
+ color: yellow;
+}
+
+td:hover {
+ background-color: orange;
+}
+
+td:hover a {
+ color: black;
+}
+
+.top td {
animation: border 1s linear infinite alternate;
}
+.middle {
+ width: 75%;
+ align-self: center;
+ text-align: center;
+ background-color: black;
+ margin-bottom: 2em;
+}
+
+.middle td {
+ border: 2px solid orange;
+}
+
+.middle td:hover {
+ border: 2px solid black;
+ background-color: orange;
+}
+
footer {
background-size: cover;
position: sticky;
bottom: 0;
height: 10%;
+ margin: 0;
+}
+
+.buttons {
+ position: sticky;
+ bottom: 10%;
+ align-self: center;
+ margin: 0;
+ margin-top: 1em;
}
footer video {
width: 100%;
height: 100%;
object-fit: fill;
+ margin: 0;
animation: spin 10s linear infinite;
}
@@ -110,11 +162,6 @@ marquee img {
0px 0px 38px rgba(255,0,0,.2);
}
-.buttons {
- align-self: center;
- margin-bottom: 2em;
-}
-
html.dither>body>div{
background: url("data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY=");
filter: contrast(2000);
@@ -137,7 +184,44 @@ filter: initial;
animation: flash 0.3s linear infinite;
}
-@keyframes animatedBackground {
+.munson {
+ text-align: center;
+ width: 80%;
+ font-size: 50px;
+ padding: 0;
+ margin: 0;
+ margin-bottom: 1em;
+ animation: colorflash 1s linear infinite;
+ margin-left: 10%;
+}
+
+#munson {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+#munson img {
+ height: 20em;
+ width: 100%;
+}
+
+#munson img:hover {
+ animation: scale 0.3s linear;
+ animation-fill-mode: forwards;
+}
+
+.john {
+ margin-left: auto;
+ display: block;
+ margin-right: auto;
+ max-width: 732px;
+ width: 100%;
+ height: 94px;
+ border: none;
+ margin-bottom: 2em;
+}
+
+@keyframes bg {
from {
background-position: 0 0;
}
@@ -147,10 +231,10 @@ filter: initial;
}
@keyframes spin {
- from {
+ 0%, 100% {
transform: rotateY(0deg) rotateX(0deg);
}
- to {
+ 50% {
transform: rotateY(3000deg) rotateX(3000deg);
}
}
@@ -173,6 +257,19 @@ filter: initial;
}
}
+@keyframes colorflash {
+ 0%, 100%, 49% {
+ border: 5px solid orange;
+ background-color: black;
+ color: orange;
+ }
+ 50%, 99% {
+ border: 5px solid black;
+ background-color: orange;
+ color: black;
+ }
+}
+
@keyframes border {
0%,
100% {
@@ -184,4 +281,23 @@ filter: initial;
66% {
border: 2px solid rgb(0, 0, 255);
}
+}
+
+@keyframes across {
+ 0%,
+ 100% {
+ transform: translateX(0vw);
+ }
+ 50% {
+ transform: translateX(62.5vw);
+ }
+}
+
+@keyframes scale {
+ from {
+ transform: scale3d(100%, 100%, 100%);
+ }
+ to {
+ transform: scale3d(120%, 120%, 120%);
+ }
}
\ No newline at end of file
@@ -120,7 +117,7 @@