added background to make the welcome text more visible

This commit is contained in:
Wehi
2023-05-10 02:02:44 +02:00
parent 776aee0265
commit ed743b2ff9
2 changed files with 48 additions and 46 deletions

View File

@@ -1,3 +1,43 @@
@keyframes background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
}
@keyframes scale {
from,
to {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
.magic-text {
animation: background-pan 3s linear infinite;
background: linear-gradient(to right, #fff, #ffc920, #fff, #fff);
background-size: 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}
.RightBar {
position: absolute;
transform: translate(0%, 0%);
@@ -61,56 +101,15 @@
}
.WelcomeMessage {
margin-left: 10px;
color: white;
writing-mode: vertical-rl;
text-orientation: upright;
text-transform: uppercase;
font-weight: 600;
padding: 10px 0 10px 0;
}
@keyframes background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
.WelcomeDiv {
background-color: rgba(0, 0, 0, 0.585);
text-align: center;
}
@keyframes scale {
from,
to {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
.magic-text {
animation: background-pan 3s linear infinite;
background: linear-gradient(
to right,
#fff,
#ffc920,
#fff,
#fff
);
background-size: 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}

View File

@@ -25,7 +25,10 @@ export default class RightBar extends React.Component {
<img src={Github} />
</div>
<div>
<span className='WelcomeMessage magic-text'>Welcome to Cultivation!</span>
<div className="WelcomeDiv">
<span className='WelcomeMessage magic-text'>Welcome to Cultivation!</span>
</div>
</div>
</div>