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; z-index: 99;
background-color: rgba(0, 0, 0, 0.250); background-color: rgba(0, 0, 0, 0.25);
z-index: 999; z-index: 999;
} }
.RightBarInner > div { .RightBarInner > div {
margin: 30px 0; margin: 30px 0;
} }
.RightBar img { .RightBar img {
height: 35px; height: 30px;
filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%); filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%);
transition: filter 0.2s ease-in-out; transition: filter 0.2s ease-in-out;
} }
@@ -43,8 +42,8 @@
.BarImg { .BarImg {
transition: 0.2s; transition: 0.2s;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 40px;
height: 50px; height: 40px;
background-color: rgba(0, 0, 0, 0.685); background-color: rgba(0, 0, 0, 0.685);
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -52,13 +51,66 @@
border: 2px solid transparent; border: 2px solid transparent;
} }
.BarImg:hover { .BarImg:hover {
cursor: pointer; cursor: pointer;
border: 2px solid #ffc920; border: 2px solid #ffc920;
} }
.BarImg:hover img { .BarImg:hover img {
filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%); 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)}> <div className="BarGithub BarImg" id="rightBarButtonGithub" onClick={() => this.openInBrowser(GITHUB)}>
<img src={Github} /> <img src={Github} />
</div> </div>
<div>
<span className='WelcomeMessage magic-text'>Welcome to Cultivation!</span>
</div>
</div> </div>
</div> </div>
) )