184 lines
3.5 KiB
SCSS
184 lines
3.5 KiB
SCSS
@import 'general.scss';
|
|
$button_color_bg: #1f8dd6;
|
|
$button_color_txt: white;
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
/*
|
|
* -- BASE STYLES --
|
|
* Most of these are inherited from Base, but I want to change a few.
|
|
*/
|
|
body {
|
|
line-height: 1.7em;
|
|
font-size: 13px;
|
|
}
|
|
|
|
p {
|
|
color: $text-norm;
|
|
}
|
|
.navbar {
|
|
z-index: 2;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
/*
|
|
* -- LAYOUT STYLES --
|
|
* These are some useful classes which I will need
|
|
*/
|
|
.l-box {
|
|
padding: 1em;
|
|
}
|
|
|
|
.l-box-lrg {
|
|
padding: 2em;
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.is-center {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.pure-g {
|
|
background-color: $back-grey;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* -- SPLASH STYLES --
|
|
* This is the blue top section that appears on the page.
|
|
*/
|
|
|
|
.splash-container {
|
|
background-image: url('https://www.shockrah.shop/static/images/chalk.jpg');
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
/* The following styles are required for the "scroll-over" effect */
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
position: fixed !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.splash {
|
|
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: white;
|
|
border: 3px solid white;
|
|
padding: 1em 1.6em;
|
|
font-weight: 450;
|
|
border-radius: 5px;
|
|
line-height: 1em;
|
|
}
|
|
|
|
/* This is the subheading that appears on the blue section */
|
|
.splash-subhead {
|
|
letter-spacing: 0.05em;
|
|
color: white;
|
|
font-weight: 450;
|
|
}
|
|
|
|
/*
|
|
* -- 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%;
|
|
width: 100%;
|
|
min-height: 12%;
|
|
z-index: 2;
|
|
background: white;
|
|
|
|
}
|
|
|
|
/* We want to give the content area some more padding */
|
|
.content {
|
|
padding: 1em 1em 3em;
|
|
background-color: $back-grey;
|
|
}
|
|
|
|
/* This is the class used for the main content headers (<h2>) */
|
|
.content-head {
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
color: $text-bold;
|
|
letter-spacing: 0.1em;
|
|
margin: 2em 0 1em;
|
|
}
|
|
|
|
/* This is a modifier class used when the content-head is inside a ribbon */
|
|
.content-head-ribbon {
|
|
color: white;
|
|
}
|
|
|
|
/* This is the class used for the content sub-headers (<h3>) */
|
|
.content-subhead {
|
|
color: $button_color_txt;
|
|
}
|
|
.content-subhead i {
|
|
margin-right: 7px;
|
|
}
|
|
|
|
|
|
/*
|
|
* -- TABLET (AND UP) MEDIA QUERIES --
|
|
* On tablets and other medium-sized devices, we want to customize some
|
|
* of the mobile styles.
|
|
*/
|
|
@media (min-width: 48em) {
|
|
/* 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%;
|
|
}
|
|
|
|
/* We remove the border-separator assigned to .l-box-lrg */
|
|
.l-box-lrg {
|
|
border: none;
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
|
* On desktops and other large devices, we want to over-ride some
|
|
* of the mobile and tablet styles.
|
|
*/
|
|
@media (min-width: 78em) {
|
|
/* We increase the header font size even more */
|
|
.splash-head {
|
|
font-size: 300%;
|
|
}
|
|
} |