note on css fun :D

1 files changed, 252 insertions, 150 deletions

diff --git a/lovely/style.css b/lovely/style.css
index dd997a0..7d8ce58 100644
--- a/lovely/style.css
+++ b/lovely/style.css
@@ -2,35 +2,17 @@ body {
 	background-color: black;
 	color: white;
 	font-family: sans-serif;
+	margin: 3%;
 	line-height: 1.4;
-	transition: all 1s;
 }
-body:hover {
-	transition: all 1s;
-	animation-name: shakenn;
-	animation-iteration-count: 1;
-	animation-duration: 1s;
+body, div, p, h1, h2, h3, h4, h5, h6, ul, ol{
+	padding: 2px;
 }
-p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover {
-	border: solid yellow 1px;
-	font-size: 3000%;
+body:hover, div:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover {
 	transition: all 0.5s;
-	animation-name: shakenn;
-	animation-iteration-count: 5;
-	animation-duration: 1s;
 }
-p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active {
-	border: solid lime 1px;
-	font-size: 30000%;
+body:active, div:active, p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active {
 	transition: all 0.5s;
-	animation-name: shakenn;
-	animation-iteration-count: 5;
-	animation-duration: 1s;
-}
-p, h1, h2, h3, h4, h5, h6, li {
-	font-size: 100%;
-	transition: all 0.5s;
-	padding: 5px;
 }
 h1 {
 	text-align: center;
@@ -60,32 +42,24 @@ a:link {
 	text-decoration: none;
 	border: solid cyan 1px;
 	padding: 1px;
-	font-size: 100%;
-	transition: all 0.5s;
 }
 a:visited {
 	color: violet;
 	text-decoration: none;
 	border: solid violet 1px;
 	padding: 1px;
-	font-size: 100%;
-	transition: all 0.5s;
 }
 a:hover {
 	color: yellow;
 	text-decoration: none;
 	border: solid yellow 1px;
 	padding: 1px;
-	font-size: 105%;
-	transition: all 0.5s;
 }
 a:active {
 	color: lime;
 	text-decoration: none;
 	border: solid lime 1px;
 	padding: 1px;
-	font-size: 200%;
-	transition: all 0.5s;
 }
 #nav ul {
 	list-style-type: none;
@@ -116,15 +90,15 @@ a:active {
 	color: red;
 	display: block;
 	border: 3px dashed red;
-	transition: all 0.5s;
+	transition: padding 1s, font-size 1s;
 }
 #campaign:hover{
-	font-size: 140%;
-	transition: all 0.5s;
+	font-size: 300%;
+	transition: padding 1s, font-size 1s;
 	animation-name: shake;
 	animation-iteration-count: 1;
-	animation-duration: 5s;
-	padding: 1ex;
+	animation-duration: 3s;
+	padding: 2ex;
 }
 .alarm {
 	color: red;
@@ -135,121 +109,249 @@ a:active {
 .good {
 	color: lime;
 }
-@keyframes shaken { 
-   0%, 100% {transform: rotate(0deg);} 
-   10%, 30%, 50%, 70%, 90% {transform: rotate(-0.4deg);} 
-   20%, 40%, 60%, 80% {transform: rotate(0.4deg);} 
-}
 @keyframes shake { 
    0%, 100% {transform: rotate(0deg);} 
-   10%, 30%, 50%, 70%, 90% {transform: rotate(-1deg);} 
-   20%, 40%, 60%, 80% {transform: rotate(1deg);} 
+   10%, 30%, 50%, 70%, 90% {transform: rotate(-3deg);} 
+   20%, 40%, 60%, 80% {transform: rotate(3deg);} 
 }
-@keyframes shakey { 
-   0%, 100% {transform: rotate(0deg);} 
-   10%, 30%, 50%, 70%, 90% {transform: rotate(-45deg);} 
-   20%, 40%, 60%, 80% {transform: rotate(45deg);} 
-}
-@keyframes shakenn { 
-0% {background-color: black; transform: rotate(0deg);}
-1% {background-color: black; transform: rotate(3deg);}
-2% {background-color: black; transform: rotate(7deg);}
-3% {background-color: black; transform: rotate(10deg);}
-4% {background-color: black; transform: rotate(14deg);}
-5% {background-color: black; transform: rotate(18deg);}
-6% {background-color: black; transform: rotate(21deg);}
-7% {background-color: black; transform: rotate(25deg);}
-8% {background-color: black; transform: rotate(28deg);}
-9% {background-color: black; transform: rotate(32deg);}
-10% {background-color: black; transform: rotate(36deg);}
-11% {background-color: black; transform: rotate(39deg);}
-12% {background-color: black; transform: rotate(43deg);}
-13% {background-color: black; transform: rotate(46deg);}
-14% {background-color: black; transform: rotate(50deg);}
-15% {background-color: black; transform: rotate(54deg);}
-16% {background-color: black; transform: rotate(57deg);}
-17% {background-color: black; transform: rotate(61deg);}
-18% {background-color: black; transform: rotate(64deg);}
-19% {background-color: black; transform: rotate(68deg);}
-20% {background-color: black; transform: rotate(72deg);}
-21% {background-color: black; transform: rotate(75deg);}
-22% {background-color: black; transform: rotate(79deg);}
-23% {background-color: black; transform: rotate(82deg);}
-24% {background-color: black; transform: rotate(86deg);}
-25% {background-color: black; transform: rotate(90deg);}
-26% {background-color: black; transform: rotate(93deg);}
-27% {background-color: black; transform: rotate(97deg);}
-28% {background-color: black; transform: rotate(100deg);}
-29% {background-color: black; transform: rotate(104deg);}
-30% {background-color: black; transform: rotate(108deg);}
-31% {background-color: black; transform: rotate(111deg);}
-32% {background-color: black; transform: rotate(115deg);}
-33% {background-color: black; transform: rotate(118deg);}
-34% {background-color: black; transform: rotate(122deg);}
-35% {background-color: black; transform: rotate(126deg);}
-36% {background-color: black; transform: rotate(129deg);}
-37% {background-color: black; transform: rotate(133deg);}
-38% {background-color: black; transform: rotate(136deg);}
-39% {background-color: black; transform: rotate(140deg);}
-40% {background-color: black; transform: rotate(144deg);}
-41% {background-color: black; transform: rotate(147deg);}
-42% {background-color: black; transform: rotate(151deg);}
-43% {background-color: black; transform: rotate(154deg);}
-44% {background-color: black; transform: rotate(158deg);}
-45% {background-color: black; transform: rotate(162deg);}
-46% {background-color: black; transform: rotate(165deg);}
-47% {background-color: black; transform: rotate(169deg);}
-48% {background-color: black; transform: rotate(172deg);}
-49% {background-color: black; transform: rotate(176deg);}
-50% {background-color: black; transform: rotate(180deg);}
-51% {background-color: black; transform: rotate(176deg);}
-52% {background-color: black; transform: rotate(172deg);}
-53% {background-color: black; transform: rotate(169deg);}
-54% {background-color: black; transform: rotate(165deg);}
-55% {background-color: black; transform: rotate(162deg);}
-56% {background-color: black; transform: rotate(158deg);}
-57% {background-color: black; transform: rotate(154deg);}
-58% {background-color: black; transform: rotate(151deg);}
-59% {background-color: black; transform: rotate(147deg);}
-60% {background-color: black; transform: rotate(144deg);}
-61% {background-color: black; transform: rotate(140deg);}
-62% {background-color: black; transform: rotate(136deg);}
-63% {background-color: black; transform: rotate(133deg);}
-64% {background-color: black; transform: rotate(129deg);}
-65% {background-color: black; transform: rotate(126deg);}
-66% {background-color: black; transform: rotate(122deg);}
-67% {background-color: black; transform: rotate(118deg);}
-68% {background-color: black; transform: rotate(115deg);}
-69% {background-color: black; transform: rotate(111deg);}
-70% {background-color: black; transform: rotate(108deg);}
-71% {background-color: black; transform: rotate(104deg);}
-72% {background-color: black; transform: rotate(100deg);}
-73% {background-color: black; transform: rotate(97deg);}
-74% {background-color: black; transform: rotate(93deg);}
-75% {background-color: black; transform: rotate(90deg);}
-76% {background-color: black; transform: rotate(86deg);}
-77% {background-color: black; transform: rotate(82deg);}
-78% {background-color: black; transform: rotate(79deg);}
-79% {background-color: black; transform: rotate(75deg);}
-80% {background-color: black; transform: rotate(72deg);}
-81% {background-color: black; transform: rotate(68deg);}
-82% {background-color: black; transform: rotate(64deg);}
-83% {background-color: black; transform: rotate(61deg);}
-84% {background-color: black; transform: rotate(57deg);}
-85% {background-color: black; transform: rotate(54deg);}
-86% {background-color: black; transform: rotate(50deg);}
-87% {background-color: black; transform: rotate(46deg);}
-88% {background-color: black; transform: rotate(43deg);}
-89% {background-color: black; transform: rotate(39deg);}
-90% {background-color: black; transform: rotate(36deg);}
-91% {background-color: black; transform: rotate(32deg);}
-92% {background-color: black; transform: rotate(28deg);}
-93% {background-color: black; transform: rotate(25deg);}
-94% {background-color: black; transform: rotate(21deg);}
-95% {background-color: black; transform: rotate(18deg);}
-96% {background-color: black; transform: rotate(14deg);}
-97% {background-color: black; transform: rotate(10deg);}
-98% {background-color: black; transform: rotate(7deg);}
-99% {background-color: black; transform: rotate(3deg);}
-100% {background-color: black; transform: rotate(0deg);}
+
+/* from https://gist.githubusercontent.com/ammaraskar/5558871/raw/b3f43cb5e9f67216b2287de7a6e92da8cb4af0f4/april-fools.css */
+
+/*
+  aprilFools.css
+  Written by Wes Bos
+  I assume no responsibility for angry co-workers or lost productivity 
+
+  Put these CSS definitons into your co-workers Custom.css file.
+  
+  They will be applied to every website they visit as well as their developer tools.
+  
+*/
+
+
+/*
+  Turn every website upside down
+*/
+body {
+  /*-webkit-transform: rotate(180deg);
+  transform: rotate(180deg);*/
+}
+
+/*
+  blur every website for a split second every 30 seconds
+*/
+body {
+  animation: blur 30s infinite;
+}
+
+/*
+  Spin every Website
+*/ 
+body {
+    animation: spin 5s linear infinite;
+}
+
+/*
+  Flip all images upside down
+*/
+img {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+/*
+  COMIC SANS EVERYTHING
+*/
+
+body, p, body p, body div p {
+  font-family: 'Comic Sans MS', cursive !important;
+}
+
+/*
+  Spin all images
+*/ 
+img {
+  /*-webkit-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;*/
+}
+
+/*
+  Hide every 2nd paragraph element on a page
+*/
+p:nth-child(2) {
+  /*display:none !important;*/
+}
+
+
+/*
+  Permanent cursor wait
+*/ 
+html {
+  /*cursor:wait !important; */
+}
+
+/*
+  hide the cursor all together
+*/
+html {
+  /*cursor:none !important;*/
+}
+
+/*
+  slowly grow text
+*/
+p {
+  -webkit-animation: grow 120s ease-in;
+  -moz-animation: grow 120s ease-in;
+  animation: grow 120s ease-in;
+}
+
+/*
+  Spin dev tools round and round
+*/
+#-webkit-web-inspector {
+ -webkit-animation: spin 1s linear infinite; 
+}
+
+/*
+  Flip dev tools upside down
+*/ 
+#-webkit-web-inspector {
+ -webkit-transform:rotate(180deg);
+}
+
+/* Hide the close button */
+#-webkit-web-inspector .toolbar-item.close-left {
+  display:none !important;
+}
+
+/* Make console text all blurry */
+#-webkit-web-inspector .console-group-messages {
+  text-shadow: 0 0 3px rgba(0,0,0,.5) !important;
+}
+
+#-webkit-web-inspector .console-error-level .console-message-text,
+#-webkit-web-inspector .console-error-level .section .header .title {
+  /*text-shadow: 0 0 3px rgba(255,0,0,.5) !important;*/
+}
+
+#-webkit-web-inspector .console-user-command > .console-message-text {
+  /*text-shadow: 0 0 3px rgba(0,128,255,.5) !important;*/
+}
+
+#-webkit-web-inspector .console-group-messages,
+#-webkit-web-inspector .console-user-command > .console-message-text,
+#-webkit-web-inspector .console-formatted-null,
+#-webkit-web-inspector .console-formatted-undefined,
+#-webkit-web-inspector .console-debug-level .console-message-text,
+#-webkit-web-inspector .console-error-level .console-message-text,
+#-webkit-web-inspector .console-error-level .section .header .title,
+#-webkit-web-inspector .console-group-messages .section .header .title,
+#-webkit-web-inspector .console-formatted-object,
+#-webkit-web-inspector .console-formatted-node,
+#-webkit-web-inspector .console-formatted-array,
+#-webkit-web-inspector .section .properties .name,
+#-webkit-web-inspector .event-properties .name,
+#-webkit-web-inspector .console-formatted-object .name,
+#-webkit-web-inspector .console-formatted-number,
+#-webkit-web-inspector .console-formatted-string,
+#-webkit-web-inspector #console-messages a {
+  /*color: transparent !important;*/
+}
+
+/* HTML PRIDE! */
+html {
+  /*-webkit-animation: rainbow 8s infinite;*/
+}
+
+/*
+  Make every website fall over!
+*/
+html, body {
+  height: 100%;
+}
+
+html {
+  -webkit-perspective: 1000;
+  perspective: 1000px;
+}
+
+body {
+  -webkit-transform-origin: bottom center;
+  -webkit-transform: rotateX(-80deg);
+  -webkit-animation: fall 12s ease-in;
+  transform-origin: bottom center;
+  transform: rotateX(-90deg);
+  animation: fall 12s ease-in;
+}
+
+/*
+	Insert a phrase every paragraph
+*/
+p:before {
+   content: "HACKER!  Hullo the CSS!  ";
+}
+
+p:hover {
+  transform-origin: right center;
+  transform: rotateY(-80deg);
+  animation: fall 12s ease-in;
+}
+
+/* Animations */
+
+@-webkit-keyframes blur {
+  0%   { -webkit-filter: blur(0px); }
+  49%   { -webkit-filter: blur(0px); }
+  50%   { -webkit-filter: blur(1px); }
+  51%   { -webkit-filter: blur(0px); }
+  100%   { -webkit-filter: blur(0px); }
+}
+
+@-webkit-keyframes spin {
+  0%   { -webkit-transform: rotate(0deg); }
+  100%   { -webkit-transform: rotate(360deg); }
+}
+
+@-webkit-keyframes rainbow {
+  100% { -webkit-filter: hue-rotate(360deg); }
+}
+
+@-webkit-keyframes fall {
+  0%   { -webkit-transform: none; }
+  100%   { -webkit-transform: rotateX(-90deg); }
+}
+
+@keyframes spin {
+  0%   { transform: rotate(0deg); }
+  100%   { transform: rotate(360deg); }
+}
+
+@keyframes fall {
+  0%   { transform: none; }
+  100%   { transform: rotateX(-90deg); }
+}
+
+@-moz-keyframes spin {
+  0%   { transform: rotate(0deg); }
+  100%   { transform: rotate(360deg); }
+}
+
+@-moz-keyframes fall {
+  0%   { transform: none; }
+  100%   { transform: rotateX(-90deg); }
+}
+
+
+@-webkit-keyframes grow {
+  0%   { font-size: none; }
+  100%   { font-size: 80pt; }
+}
+@-moz-keyframes grow {
+  0%   { font-size: none; }
+  100%   { font-size: 80pt; }
+}
+@keyframes grow {
+  0%   { font-size: none; }
+  100%   { font-size: 80pt; }
 }