Added a welcome message to the rightbar in order to make it look more comfy

This commit is contained in:
Wehi
2023-05-10 01:57:36 +02:00
parent f508b3f0cf
commit 776aee0265
2 changed files with 63 additions and 7 deletions

View File

@@ -13,17 +13,16 @@
z-index: 99;
background-color: rgba(0, 0, 0, 0.250);
background-color: rgba(0, 0, 0, 0.25);
z-index: 999;
}
.RightBarInner > div {
margin: 30px 0;
}
.RightBar img {
height: 35px;
height: 30px;
filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%);
transition: filter 0.2s ease-in-out;
}
@@ -43,8 +42,8 @@
.BarImg {
transition: 0.2s;
border-radius: 50%;
width: 50px;
height: 50px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.685);
display: flex;
justify-content: center;
@@ -52,13 +51,66 @@
border: 2px solid transparent;
}
.BarImg:hover {
cursor: pointer;
border: 2px solid #ffc920;
}
.BarImg:hover img {
filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%);
}
.WelcomeMessage {
margin-left: 10px;
color: white;
writing-mode: vertical-rl;
text-orientation: upright;
text-transform: uppercase;
font-weight: 600;
}
@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;
}

View File

@@ -24,6 +24,10 @@ export default class RightBar extends React.Component {
<div className="BarGithub BarImg" id="rightBarButtonGithub" onClick={() => this.openInBrowser(GITHUB)}>
<img src={Github} />
</div>
<div>
<span className='WelcomeMessage magic-text'>Welcome to Cultivation!</span>
</div>
</div>
</div>
)