atst/styles/sections/_home.scss
2019-06-20 11:19:47 -04:00

122 lines
1.9 KiB
SCSS

.home {
.sticky-cta {
margin: -1.6rem -1.6rem 0 -1.6rem;
}
}
.about-cloud {
margin: 4rem auto;
max-width: 900px;
}
.your-project {
margin-top: 3rem;
padding: 3rem;
background-color: $color-gray-lightest;
h2 {
margin-top: 0;
}
hr {
border: 0;
border-bottom: 1px solid $color-gray-light;
margin-top: $gap * 4;
margin-bottom: $gap * 4;
}
.links {
justify-content: flex-start;
.icon-link {
padding: $gap ($gap * 4);
}
.icon-link:first-child {
padding-left: 0;
}
.icon-link:last-child {
padding-right: 0;
}
.icon-link:hover {
background-color: transparent;
color: $color-gray-dark;
.svg * {
fill: $color-gray-dark;
}
}
.icon-link.active:hover {
color: $color-blue;
}
}
}
.home-layout {
display: block;
background-color: $color-white;
.home-container {
max-width: 90rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 8rem;
padding-right: $gap * 4;
padding-left: $gap * 4;
@include media($medium-screen) {
display: flex;
}
h1 {
font-weight: 200;
}
h2,
h3,
h4 {
color: $color-primary;
}
.home-container__logo {
margin: $gap * 2;
img {
width: 20rem;
@include media($medium-screen) {
width: 25rem;
}
}
}
.home-container__body {
padding-left: $gap * 2;
}
.home-container__list {
ol {
list-style: none;
counter-reset: home-counter;
padding-left: 0;
li {
counter-increment: home-counter;
position: relative;
&::before {
content: counter(home-counter) ". ";
color: $color-primary;
font-weight: bold;
position: absolute;
left: -2rem;
}
}
}
}
}
}