168 lines
3.0 KiB
SCSS
168 lines
3.0 KiB
SCSS
@import 'general.scss';
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*
|
|
* -- BASE STYLES --
|
|
* Most of these are inherited from Base, but I want to change a few.
|
|
*/
|
|
body {
|
|
line-height: 1.7em;
|
|
color: #7f8c8d;
|
|
background: $back-grey;
|
|
font-size: 13px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
label {
|
|
color: $text-bold;
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: $bar-grey;
|
|
}
|
|
|
|
.l-box {
|
|
padding: 1em;
|
|
}
|
|
|
|
.l-box-lrg {
|
|
padding: 2em;
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.is-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.card {
|
|
display: inline-block;
|
|
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
|
|
background: $top-grey;
|
|
color: $text-norm;
|
|
margin: 20px;
|
|
margin-left: 25%;
|
|
margin-right: 25%;
|
|
margin-bottom: 50px;
|
|
}
|
|
.head-card {
|
|
display: inline-block;
|
|
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
|
|
background: $top-grey;
|
|
margin: 20px;
|
|
}
|
|
|
|
|
|
/*
|
|
* -- PURE FORM STYLES --
|
|
* Style the form inputs and labels
|
|
*/
|
|
.pure-form label {
|
|
margin: 1em 0 0;
|
|
font-weight: bold;
|
|
font-size: 100%;
|
|
}
|
|
|
|
.pure-form input[type] {
|
|
border: 2px solid #ddd;
|
|
box-shadow: none;
|
|
font-size: 100%;
|
|
width: 100%;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
|
|
/* We want to give the content area some more padding */
|
|
.content {
|
|
background: whitesmoke;
|
|
}
|
|
|
|
/* This is the class used for the main content headers (<h2>) */
|
|
.content-head {
|
|
color: #F55753;
|
|
text-transform: uppercase;
|
|
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;
|
|
}
|
|
|
|
.pure-g {
|
|
background-color: $back-grey;
|
|
}
|
|
/* This is the class used for the content sub-headers (<h3>) */
|
|
.content-subhead {
|
|
color: $heading-pink;
|
|
text-align: center;
|
|
}
|
|
.content-subhead i {
|
|
margin-right: 7px;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
/* This is the class used for the dark-background areas. */
|
|
.ribbon {
|
|
background: #2d3e50;
|
|
color: #aaa;
|
|
}
|
|
|
|
/* This is the class used for the footer */
|
|
.footer {
|
|
background: #111;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/*
|
|
* -- 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 increase the body font size */
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* We can align the menu header to the left, but float the
|
|
menu items to the right. */
|
|
.home-menu {
|
|
text-align: left;
|
|
}
|
|
.home-menu ul {
|
|
float: right;
|
|
}
|
|
/* 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%;
|
|
}
|
|
}
|