Difference between revisions of "User:Zeklyn/april/Page.css"

From Team Fortress Wiki
Jump to: navigation, search
m (RJackson moved page User:Zeklyn/april/page.css to User:Zeklyn/april/Page.css: Capital peeeee)
m
 
Line 1: Line 1:
 
#welcome-text-wrapper {
 
#welcome-text-wrapper {
 
         margin-top: 150px !important;
 
         margin-top: 150px !important;
 +
        overflow: hidden;
 
}
 
}
 
 
 
   
 
   
 
.top-text {
 
.top-text {
    -webkit-user-select: none;
+
        -webkit-user-select: none;
    -moz-user-select: none;
+
        -moz-user-select: none;
    color: #3668D3;
+
        color: #3668D3;
    background: #FFFF00;
+
        background: #FFFF00;
    position: absolute;
+
        position: absolute;
    font-size: 1.3rem;
+
        font-size: 1.3rem;
    margin-top: -125px;
+
        width: 11rem;
    margin-left: 30px;
+
        margin-left: auto;
    animation: top-text 1.2s infinite;
+
        margin-right: auto;
    animation-timing-function: ease-in-out;
+
        top: 85px;
    animation-direction: alternate;
+
        left: -200px;
 +
        right: 100px;
 +
        animation: top-text 1.2s infinite;
 +
        animation-timing-function: ease-in-out;
 +
        animation-direction: alternate;
 
}
 
}
 
   
 
   
Line 22: Line 26:
 
     to {transform: rotate(5deg);}
 
     to {transform: rotate(5deg);}
 
}
 
}
+
 
.bottom-text {
+
    .bottom-text {
    -webkit-user-select: none;
+
        -webkit-user-select: none;
    -moz-user-select: none;
+
        -moz-user-select: none;
    color: #3668D3;
+
        color: #3668D3;
    background: #FF00FF;
+
        background: #FF00FF;
    position: absolute;
+
        position: absolute;
    transform: rotate(-5deg);
+
        transform: rotate(-5deg);
    margin-top: -3.5rem;
+
        width: 18rem;
    margin-left: 4.5rem;
+
        margin-top: -3.5rem;
    animation: bottom-text 1s infinite;
+
        margin-left: auto;
    animation-timing-function: ease-in-out;
+
        margin-right: auto;
    animation-direction: alternate;
+
        left: 50px;
 +
        right: -50px;
 +
        animation: bottom-text 1s infinite;
 +
        animation-timing-function: ease-in-out;
 +
        animation-direction: alternate;
 
}
 
}
 
   
 
   
Line 41: Line 49:
 
     to {transform: scale(1);}
 
     to {transform: scale(1);}
 
}
 
}
 +
 
   
 
   
 
.vertically-centered-text {
 
.vertically-centered-text {
    -webkit-user-select: none;
+
        -webkit-user-select: none;
    -moz-user-select: none;
+
        -moz-user-select: none;
    color: #fff;
+
        color: #fff;
    background: #00FF00;
+
        background: #00FF00;
    -webkit-text-stroke: 1.5px #E4812E;
+
        -webkit-text-stroke: 1.5px #E4812E;
    position: absolute;
+
        position: absolute;
    font-weight: bold;
+
        font-weight: bold;
    font-size: 2.2rem;
+
        font-size: 2.2rem;
    margin-top: -110px;
+
        width: 28rem;
    padding: 2px;
+
        margin-left: auto;
    animation: vertically-centered-text 4s infinite;
+
        margin-right: auto;
    animation-timing-function: ease-in-out;
+
        top: 110px;
    animation-direction: alternate;
+
        left: -50px;
 +
        right: 50px;
 +
        padding: 2px;
 +
        animation: vertically-centered-text 4s infinite;
 +
        animation-timing-function: ease-in-out;
 +
        animation-direction: alternate;
 
}
 
}
 
   
 
   
Line 62: Line 76:
 
     to {transform: rotate(-8deg);}
 
     to {transform: rotate(-8deg);}
 
}
 
}
 +
 +
/* Add mobile support */
 +
 +
@media only screen and (max-device-width: 660px) {
 +
 
 +
    .top-text {
 +
        left: 0;
 +
        right: 10%;
 +
}
 +
 +
    .bottom-text {
 +
        left: 40%;
 +
        right: 0;
 +
}
 +
    .vertically-centered-text {
 +
        left: 15%;
 +
        right: 0;
 +
}
 +
    }

Latest revision as of 17:48, 29 March 2019

#welcome-text-wrapper {
        margin-top: 150px !important;
        overflow: hidden;
}
 
.top-text {
        -webkit-user-select: none;
        -moz-user-select: none;
        color: #3668D3;
        background: #FFFF00;
        position: absolute;
        font-size: 1.3rem;
        width: 11rem;
        margin-left: auto;
        margin-right: auto;
        top: 85px;
        left: -200px;
        right: 100px;
        animation: top-text 1.2s infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
}
 
@keyframes top-text {
    from {transform: rotate(-5deg);}
    to {transform: rotate(5deg);}
}
   
    .bottom-text {
        -webkit-user-select: none;
        -moz-user-select: none;
        color: #3668D3;
        background: #FF00FF;
        position: absolute;
        transform: rotate(-5deg);
        width: 18rem;
        margin-top: -3.5rem;
        margin-left: auto;
        margin-right: auto;
        left: 50px;
        right: -50px;
        animation: bottom-text 1s infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
}
 
@keyframes bottom-text {
    from {transform: scale(0.9);}
    to {transform: scale(1);}
}
 
 
.vertically-centered-text {
        -webkit-user-select: none;
        -moz-user-select: none;
        color: #fff;
        background: #00FF00;
        -webkit-text-stroke: 1.5px #E4812E;
        position: absolute;
        font-weight: bold;
        font-size: 2.2rem;
        width: 28rem;
        margin-left: auto;
        margin-right: auto;
        top: 110px;
        left: -50px;
        right: 50px;
        padding: 2px;
        animation: vertically-centered-text 4s infinite;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
}
 
@keyframes vertically-centered-text {
    from {transform: rotate(1deg);}
    to {transform: rotate(-8deg);}
}
 
/* Add mobile support */
 
@media only screen and (max-device-width: 660px) {
   
    .top-text {
        left: 0;
        right: 10%;
}
 
    .bottom-text {
        left: 40%;
        right: 0;
}
    .vertically-centered-text {
        left: 15%;
        right: 0;
}
    }