app/assets/stylesheets/entrypoints/static.scss
$include-html-classes: false;
$fa-font-path: '.';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '../vendor/foundation/functions';
@import '../vendor/foundation/components/grid';
@import '../modules/shared';
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
width: 100%;
}
html {
height: 100%;
}
body {
background: no-repeat url('teal.jpg') 65% 100%;
background-size: cover;
color: $navy;
font-family: 'Lato', sans-serif;
margin: 0;
}
a:link,
a:visited {
color: mix(#fff, $maroon);
font-weight: bold;
text-decoration: none;
&:hover {
color: mix(#fff, $navy);
text-decoration: underline;
}
&.dark {
color: $maroon;
&:hover {
color: $navy;
}
}
}
h1 {
font-size: 5em;
line-height: 1.2em;
margin: 0 auto;
max-width: 15.2em;
padding: .1em;
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, 0 3px 6px $navy;
}
.sub-container {
background: $navy;
padding: .5em 0;
@media #{$medium-up} {
background: transparent linear-gradient(to right, $navy 50%, transparent 50%);
}
h2,
p {
display: block;
max-width: 76rem;
margin: 0 auto;
padding: 0 .5rem;
width: 100%;
@media #{$medium-up} {
padding-right: 50%;
}
@media screen and (min-width: 76em) {
padding-right: 38.5rem;
}
}
h2 {
font-size: 2em;
}
p {
padding-bottom: .5em;
}
}
h2,
p,
.copyrights {
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
p:not(.sub-container p) {
background: $navy;
background: transparentize($navy, .15);
margin: .5em;
padding: .5em;
@media #{$medium-up} {
left: 50%;
margin-left: 1em;
max-width: 37em;
position: absolute;
right: .5em;
top: 6.5em;
}
}
.copyrights {
background: transparentize($navy, .25);
color: #fff;
max-width: 76em;
margin: 0 auto;
padding: .5em;
@media #{$medium-up} {
bottom: 0;
position: absolute;
}
}