diff options
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | lovely/andrew.asc | bin | 7390 -> 0 bytes | |||
| -rw-r--r-- | lovely/index.html | 4 | ||||
| -rw-r--r-- | lovely/style.css | 402 | ||||
| -rw-r--r-- | style.css | 12 |
5 files changed, 267 insertions, 154 deletions
diff --git a/index.html b/index.html index 994d99c..d794b77 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,9 @@ </ul> </div> <div class="wrapper"> + <div id="majornote"> + <p>I'm currently messing around with my CSS. If you want to see a demonstration of a unusable website, come to the <a href="/lovely">test site</a>.</p> + </div> <div id="campaign"> <p>It is our responsibility to spread free software and advocate for user freedom. Please don't waste any chances to do so. Sign <a href="https://my.fsf.org/give-students-userfreedom">the give students user freedom petition by the FSF</a> and fight against <a href="https://www.fsf.org/bulletin/2020/spring/trial-by-proprietary-software">trial in courts with proprietary software</a>.</p> </div> diff --git a/lovely/andrew.asc b/lovely/andrew.asc deleted file mode 100644 index c329902..0000000 --- a/lovely/andrew.asc +++ /dev/null Binary files differdiff --git a/lovely/index.html b/lovely/index.html index d00b919..42e0b86 100644 --- a/lovely/index.html +++ b/lovely/index.html @@ -2,7 +2,7 @@ <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Andrew Yu's Website</title> - <link rel="stylesheet" href="/style.css" /> + <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Andrew Yu's Website</h1> @@ -18,7 +18,7 @@ </div> <div class="wrapper"> <div id="majornote"> - <p>Hey there. I'm playing around with the CSS a little, so don't hover your pointer on anything or select text.</p> + <p>Welcome to the test site.</p> </div> <div id="campaign"> <p>It is our responsibility to spread free software and advocate for user freedom. Please don't waste any chances to do so. Sign <a href="https://my.fsf.org/give-students-userfreedom">the give students user freedom petition by the FSF</a> and fight against <a href="https://www.fsf.org/bulletin/2020/spring/trial-by-proprietary-software">trial in courts with proprietary software</a>.</p> 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; } } diff --git a/style.css b/style.css index 63f3550..14ac226 100644 --- a/style.css +++ b/style.css @@ -9,10 +9,10 @@ body, div, p, h1, h2, h3, h4, h5, h6, ul, ol{ padding: 2px; } body:hover, div:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover { - border: solid yellow 1px; + transition: all 0.5s; } body:active, div:active, p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active { - border: solid lime 1px; + transition: all 0.5s; } h1 { text-align: center; @@ -78,7 +78,15 @@ a:active { #nav ul li a { font-weight: bold; } +#majornote { + font-size: 120%; + color: lime; + display: block; + border: 3px dashed lime; + transition: all 0.5s; +} #campaign { + font-size: 120%; color: red; display: block; border: 3px dashed red; |