|
|
(One intermediate revision by the same user not shown) |
Line 1: |
Line 1: |
| /* CSS placed here will affect users of the mobile site */ | | /* CSS placed here will affect users of the mobile site */ |
− |
| |
− | /*
| |
− | _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
| |
− | /\ \ /\ \ /\ \\ \ /| |\ \
| |
− | / \ \ / \ \ / \ \\ \ | | \ _ _ _ _\
| |
− | \ \ \ \ \ \ \ \ \\ \ | | \ \ /
| |
− | \ \ \ \ \ \ \ \ \\ \| | \ \_ _ _/_ _
| |
− | \ \ \ \ \ \ \ \ \\ \ \ \
| |
− | \ \ \ \ \ \ \ \ \\ _ \ \ _ _ _ _ \
| |
− | \ \ \ \ \ \ \ \ \\ \\ \ \ \ /
| |
− | \ \ \_ _ _ _\_ _\ \_\_ _\ \\ \ \ \ \ \_ _ _/_ _
| |
− | \ \ \\ \\ \ \ \ \ \
| |
− | \ \_ _ _ _ _ _ _ _\\_ _ _ _ _ _ _ _\\ _ _\ \_ _ _\\_ _ _ _ _ _ _ \
| |
− | \ / // // / / // /
| |
− | \/_ _ _ _ _ _ _ _//_ _ _ _ _ _ _ _//_ _ / \/_ _ _//_ _ _ _ _ _ _ /
| |
− | */
| |
− |
| |
− | .donkey-vine {
| |
− | position: absolute;
| |
− | top: 0px;
| |
− | left: 0px;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | overflow: hidden;
| |
− | pointer-events: none;
| |
− | }
| |
− |
| |
− | .donkey-vine img {
| |
− | position: absolute;
| |
− | top: -200px;
| |
− | right: -300px;
| |
− | border: none;
| |
− | width: 289px;
| |
− | height: 186px;
| |
− | animation-name: donkey-swing;
| |
− | animation-timing-function: linear;
| |
− | animation-fill-mode: forwards;
| |
− | animation-delay: 2s;
| |
− | animation-duration: 0s;
| |
− | }
| |
− |
| |
− | .diddy-vine {
| |
− | position: absolute;
| |
− | top: 0px;
| |
− | left: 0px;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | overflow: hidden;
| |
− | pointer-events: none;
| |
− | }
| |
− |
| |
− | .diddy-vine img {
| |
− | position: absolute;
| |
− | top: -200px;
| |
− | right: -300px;
| |
− | border: none;
| |
− | width: 289px;
| |
− | height: 186px;
| |
− | animation-name: diddy-swing;
| |
− | animation-duration: 0s;
| |
− | animation-timing-function: linear;
| |
− | animation-fill-mode: forwards;
| |
− | animation-delay: 2s;
| |
− | }
| |
− |
| |
− | .warning {
| |
− | position: fixed;
| |
− | display: block;
| |
− | width: 400px;
| |
− | top: 20px;
| |
− | left: 20px;
| |
− | background: #EA9999;
| |
− | border: 3px solid #990000;
| |
− | color: #000;
| |
− | padding: 20px;
| |
− | font-size: 14px;
| |
− | font-weight: bold;
| |
− | font-family: sans-serif;
| |
− | box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
| |
− | }
| |
− |
| |
− | .warning:before {
| |
− | content: '[x]';
| |
− | font-size: 11px;
| |
− | opacity: 0.5;
| |
− | position: absolute;
| |
− | top: 2px;
| |
− | right: 2px;
| |
− | }
| |
− |
| |
− | .warning:hover:before {
| |
− | cursor: pointer;
| |
− | }
| |
− |
| |
− | blockquote {
| |
− | margin: 10px;
| |
− | border-left: #ddd 4px solid;
| |
− | padding: 6px;
| |
− | color: #000;
| |
− | background: #eee;
| |
− | display: inline-block;
| |
− | }
| |
− |
| |
− | mark {
| |
− | color: #1155CC;
| |
− | background: rgba(17,85,204,0.16);
| |
− | font-family: monospace;
| |
− | font-size: 14px;
| |
− | padding: 1px 3px 1px 3px;
| |
− | }
| |
− |
| |
− | /* MOBILE */
| |
− |
| |
− | blockquote, h3 span {
| |
− | font-family: "Helvetica Neue","Helvetica","Nimbus Sans L","Arial","Liberation Sans",sans-serif;
| |
− | }
| |
− |
| |
− | blockquote {
| |
− | font-size: 100%
| |
− | }
| |
− |
| |
− | blockquote mark {
| |
− | font-size: 115.39%
| |
− | }
| |
− |
| |
− | mark {
| |
− | font-size: 115.39%
| |
− | }
| |
− |
| |
− | blockquote:before, blockquote:after {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | @media (max-width: 3840px) {
| |
− | .donkey-vine img {
| |
− | animation-duration: 6s;
| |
− | }
| |
− | .diddy-vine img {
| |
− | animation-duration: 6s;
| |
− | }
| |
− | }
| |
− |
| |
− | @media (max-width: 1920px) {
| |
− | .donkey-vine img {
| |
− | animation-duration: 4s;
| |
− | }
| |
− | .diddy-vine img {
| |
− | animation-duration: 4s;
| |
− | }
| |
− | }
| |
− | @media (max-width: 960px) {
| |
− | .donkey-vine img {
| |
− | animation-duration: 2s;
| |
− | }
| |
− | .diddy-vine img {
| |
− | animation-duration: 2s;
| |
− | }
| |
− | }
| |
− |
| |
− | @keyframes donkey-swing {
| |
− | from {
| |
− | top: -100px;
| |
− | right: -20%;
| |
− | transform: rotate(-20deg) scale(0.5, 0.5)
| |
− | }
| |
− | to {
| |
− | top: 400px;
| |
− | right: 250%;
| |
− | transform: rotate(20deg) scale(6, 6)
| |
− | }
| |
− | }
| |
− |
| |
− | @keyframes diddy-swing {
| |
− | from {
| |
− | top: -100px;
| |
− | left: -20%;
| |
− | transform: rotate(20deg) scale(0.5, 0.5)
| |
− | }
| |
− | to {
| |
− | top: 400px;
| |
− | left: 250%;
| |
− | transform: rotate(-20deg) scale(6, 6)
| |
− | }
| |
− | }
| |