173 lines
2.6 KiB
CSS
173 lines
2.6 KiB
CSS
/*
|
|
HEADER STYLES
|
|
*/
|
|
.header {
|
|
width:100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
margin: auto;
|
|
font-size: 1.5em;
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
#headerLeft {
|
|
height: 100%;
|
|
width: 19%;
|
|
}
|
|
#headerLeft img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#headerImage {
|
|
height: 100%;
|
|
width: 75%;
|
|
}
|
|
|
|
#headerRight {
|
|
height: 100%;
|
|
width: 19%;
|
|
text-align: right;
|
|
}
|
|
#headerRight img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#headerText {
|
|
font-family: "Bungee Inline", sans-serif;
|
|
color: rgb(40, 80, 255);
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-right: 5%;
|
|
padding-left: 5%;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#headerCentre {
|
|
width:60%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
#socialsPanel {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
#twitchImage {
|
|
margin:auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1%;
|
|
height: 60px;
|
|
width: 100px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
#twitchImage img {
|
|
object-fit: contain;
|
|
}
|
|
#twitchImage :hover {
|
|
opacity: 80%;
|
|
filter: blur(1px);
|
|
scale: 1.15;
|
|
}
|
|
#twitchImage :active {
|
|
opacity: 60%;
|
|
filter: blur(3px);
|
|
scale: 1.05;
|
|
}
|
|
|
|
#youtubeImage {
|
|
margin:auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1%;
|
|
height: 60px;
|
|
width: 100px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
#youtubeImage img{
|
|
object-fit: contain;
|
|
height: 125%;
|
|
translate: 0 -12%;
|
|
}
|
|
#youtubeImage :hover {
|
|
opacity: 80%;
|
|
filter: blur(1px);
|
|
scale: 1.1;
|
|
}
|
|
#youtubeImage :active {
|
|
opacity: 60%;
|
|
filter: blur(3px);
|
|
scale: 1.03;
|
|
}
|
|
|
|
#discordImage {
|
|
margin:auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1%;
|
|
height: 60px;
|
|
width: 100px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
#discordImage img {
|
|
object-fit: contain;
|
|
height: 90%;
|
|
translate: 0 5%;
|
|
}
|
|
#discordImage :hover {
|
|
opacity: 80%;
|
|
filter: blur(1px);
|
|
scale: 1.15;
|
|
}
|
|
#discordImage :active {
|
|
opacity: 60%;
|
|
filter: blur(3px);
|
|
scale: 1.05;
|
|
}
|
|
|
|
|
|
/* MOBILE */
|
|
|
|
@media only screen and (min-width: 360px) and (max-width: 1024px) {
|
|
|
|
#headerLeft {
|
|
display:none;
|
|
}
|
|
|
|
#headerRight {
|
|
display:none;
|
|
}
|
|
|
|
#headerCentre {
|
|
width:100%;
|
|
}
|
|
|
|
.header {
|
|
font-size: 100%;
|
|
}
|
|
|
|
#discordImage {
|
|
height: 40px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#twitchImage {
|
|
height: 40px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#youtubeImage {
|
|
height: 40px;
|
|
margin-top: 10px;
|
|
}
|
|
} |