home-assistant.github.io/sass/oscailte/homepage/_hero_unit.scss
2016-02-15 12:26:02 -08:00

75 lines
No EOL
1.5 KiB
SCSS

.hero {
background-color: rgb(11, 107, 148);
background-position: 0 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-bottom: 1px solid $white;
color: $white;
margin-top: -2em;
margin-bottom: 1.5em;
padding: 50px 0;
position: relative;
// &::before {
// background: url("../images/matrix.png") 0 0 rgba(0, 0, 0, 0.35);
// box-shadow: inset 0 0 5px $black;
// content: "";
// display: block;
// position: absolute;
// top: 0; right: 0; bottom: 0; left: 0;
// z-index: 5;
// }
> .grid-wrapper {
position: relative;
z-index: 7;
}
.credit {
font-size: 0.75em;
font-style: italic;
position: absolute;
bottom: 0; right: 10px;
z-index: 7;
a {
border-bottom: 1px solid;
color: $white;
text-decoration: none;
}
.licence {
border: none;
}
}
.avatar {
@media only screen and (max-width: $lap-end){
margin-bottom: 30px;
}
text-align: center;
img {
@include border-radius(100%);
border: 10px solid $primary-color;
}
}
h1 {
font-size: 3.5em;
line-height: 1em;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
}
hr {
@extend .divider;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
}
p {
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
small {
color: $grayLighter;
font-size: .65em;
}
}
}