removed fluff from css and made framework look prettier

still need actual content tho
This commit is contained in:
shockrahwow 2019-11-27 21:37:36 -08:00
parent 080f76f15d
commit a1c81ef121

View File

@ -131,68 +131,13 @@ a.pure-button-primary {
color: #AECFE5;
}
/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/
.splash-container {
background: #24344C;
background-image: url('https://media.gettyimages.com/photos/esports-team-winning-the-match-picture-id1129493258?s=2048x2048');
z-index: 1;
overflow: hidden;
/* The following styles are required for the "scroll-over" effect */
width: 100%;
height: 88%;
top: 0;
left: 0;
position: fixed;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
/*
transform-origin: top left;
transform: skewY(-3deg);
*/
}
.splash {
/* absolute center .splash within .splash-container */
width: 80%;
height: 50%;
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
}
/* This is the main heading that appears on the blue section */
.splash-head {
font-size: 20px;
font-weight: bold;
color: #DA2860;
padding: 1em 1.6em;
font-weight: 100;
border-radius: 5px;
line-height: 1em;
}
/* This is the subheading that appears on the blue section */
.splash-subhead {
color: white;
letter-spacing: 0.05em;
opacity: 0.8;
}
/*
* -- CONTENT STYLES --
* This represents the content area (everything below the blue section)
*/
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
height: 100%;
width: 100%;
min-height: 12%;
z-index: 2;
@ -202,8 +147,8 @@ a.pure-button-primary {
/* We want to give the content area some more padding */
.content {
padding: 1em 1em 3em;
background: whitesmoke;
height: 100%;
}
/* This is the class used for the main content headers (<h2>) */
@ -266,27 +211,6 @@ a.pure-button-primary {
.home-menu ul {
float: right;
}
/* We increase the height of the splash-container */
/* .splash-container {
height: 500px;
}*/
/* We decrease the width of the .splash, since we have more width
to work with */
.splash {
width: 50%;
height: 50%;
}
.splash-head {
font-size: 250%;
color: #DA2860;
font-weight: bold;
display: inline-block;
}
/* We remove the border-separator assigned to .l-box-lrg */
.l-box-lrg {
border: none;