Taylor/trojans-trophy-room
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separated header into its' own file

Browse Source
This commit is contained in:
Taylor Courage 2025-03-08 17:51:22 -05:00
parent da9eb2b71b
commit 55440b4a89
2 changed files with 139 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
styles/header.css Normal file
View File

@ -0,0 +1,136 @@
/*
HEADER STYLES
*/
.header {
width:100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin: auto;
font-size: 1.5em;
}
#headerLeft {
height: 100%;
width: 20%;
}
#headerLeft img {
border-radius: 50%;
}
#headerImage {
height: 100%;
width: 75%;
}
#headerRight {
height: 100%;
width: 20%;
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;
}

142
styles/primary.css
View File

@ -1,6 +1,9 @@
/* "BUNGEE" font used for header */
@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
/* Import Header */
@import url('/styles/header.css');
/* Line break for flex layout */
.newLine {
width: 100%;
@ -63,145 +66,6 @@ Modifies and defines the iFrame that's holding the content shown to the user
}
/*
HEADER
*/
.header {
width:100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin: auto;
font-size: 1.5em;
}
#headerLeft {
height: 100%;
width: 20%;
}
#headerLeft img {
border-radius: 50%;
}
#headerImage {
height: 100%;
width: 75%;
}
#headerRight {
height: 100%;
width: 20%;
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;
}
/*
STANDARD NAVIGATION