ContainerImage.Pinniped/site/themes/pinniped/assets/scss/_components.scss

495 lines
11 KiB
SCSS
Raw Normal View History

2020-11-06 22:42:57 +00:00
@import 'variables';
@import 'mixins';
/* Homepage Hero */
.hero {
background-color: $mainblue;
color: $white;
.text-block {
max-width: 550px;
padding: 0px 0px 10px 0px;
p {
margin-bottom: 20px;
font-size: 18px;
2020-11-06 22:42:57 +00:00
color: $white;
}
}
2020-11-12 14:46:44 +00:00
h2 {
font-size: 36px;
}
2020-11-06 22:42:57 +00:00
&.homepage {
background-image: url(/img/hero-image.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 80px;
}
@include breakpoint(small) {
.text-block {
max-width: unset;
margin-right: 0px;
}
.button {
display: block;
text-align: center;
}
&.homepage {
background-image: none;
}
}
}
.grid-container {
margin-top: -80px;
.grid.three {
padding-bottom: 20px;
.card {
position: relative;
padding: 30px 20px;
background-color: $white;
text-align: center;
box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
h3 {
color: $darkgrey;
font-size: 22px;
}
p {
color: $grey;
}
}
}
}
.introduction {
.grid.two {
column-gap: 140px;
padding: 35px 20px;
p {
margin: 0px;
font-size: 16px;
2020-11-06 22:42:57 +00:00
&.strong {
color: $darkgrey;
2020-11-06 22:42:57 +00:00
}
}
}
@include breakpoint(small) {
padding: 0px 20px;
.col:first-of-type {
padding-bottom: 50px;
}
}
}
.use-cases {
.grid {
grid-template-columns: 220px 1fr;
margin-bottom: 30px;
grid-template-areas:
"image text";
.image {
background-color: $mainblue;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
grid-area: image;
img {
justify-self: center;
}
}
.text {
border: 1px solid $lightgrey;
padding: 30px;
grid-area: text;
a.button {
display: block;
max-width: 138px;
text-align: center;
padding: 5px 10px;
min-width: unset;
}
}
&.image-right {
grid-template-columns: 1fr 220px;
grid-template-areas:
"text image";
@include breakpoint(small) {
grid-template-columns: 1fr;
grid-template-areas:
"image"
"text";
}
}
@include breakpoint(small) {
grid-template-columns: 1fr;
grid-template-rows: minmax(160px, 1fr);
grid-template-areas:
"image"
"text";
}
}
h2 {
color: $black;
}
p.strong {
color: #1B3951;
font-size: 16px;
2020-11-06 22:42:57 +00:00
}
}
.team {
background-color: $navyblue;
h2, h3, p {
color: $white;
}
p {
font-size: 16px;
}
2020-11-06 22:42:57 +00:00
a {
color: $white;
font-weight: 300;
text-decoration: underline;
}
.grid.three {
row-gap: 40px;
margin: 40px 0px;
}
.bio {
display: grid;
grid-template-columns: 120px 1fr;
column-gap: 20px;
.info {
align-self: center;
p {
margin: 0px;
&.name {
font-size: 16px;
font-family: $metropolis-medium;
2020-11-06 22:42:57 +00:00
}
&.position {
font-size: 14px;
}
}
}
}
}
.hero.subpage {
background-image: url(/img/blog-hero-image.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 140px;
}
.experimental {
.grid.three .col {
padding: 0px;
}
.icon {
background-color: $mainblue;
padding: 25px;
min-height: 95px;
display: flex;
align-items: center;
justify-content: center;
}
.content {
padding: 25px;
.example {
background-color: $lightgrey;
}
}
}
.blog {
padding-bottom: 50px;
.col {
border: 1px solid $lightgrey;
img {
width: 100%;
}
.content {
padding: 0px 20px;
}
}
&.landing {
background-color: #fff;
margin-top: -90px;
h3 a {
font-size: 16px;
}
2020-11-06 22:42:57 +00:00
.pagination {
margin: 30px auto 50px auto;
ul {
padding: 0px;
text-align: center;
li {
padding: 0px;
a {
padding: 5px 10px;
&.active {
background-color: $lightgrey;
border-radius: 50%;
}
}
&.left-arrow {
margin-right: 15px;
}
&.right-arrow {
margin-left: 15px;
}
}
}
}
}
.blog-post {
background-color: #fff;
margin: -110px 0px 0px -30px;
padding: 30px 90px 30px 30px;
.author {
color: $blue;
margin: 0px;
}
.date {
color: $black;
margin: 0px;
font-weight: 600;
}
.header, h4 {
color: $black;
font-weight: 600;
}
a {
font-size: 16px;
}
ul {
list-style-type: disc;
padding-left: 20px;
li:first-child {
margin-top: 10px;
}
li {
list-style-type: unset;
display: list-item;
margin-bottom: 10px;
font-size: 14px;
color: $darkgrey;
line-height: 1.6em;
list-style-image: url(/img/arrow.svg);
}
}
ol {
li:first-child {
margin-top: 10px;
}
li {
list-style-type: decimal;
display: list-item;
margin-bottom: 10px;
font-size: 16px;
color: $darkgrey;
}
}
code {
background-color: $white;
color: $darkgrey;
border: 2px solid #EFEFEF;
padding: 2px 8px;
.c1 {
color: $blue;
font-style: italic;
}
.se {
color: #ff0000;
}
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
code {
display: block;
border: 15px solid #EFEFEF;
padding: 15px;
margin-bottom: 30px;
}
}
img {
max-width: 100%;
}
strong {
font-family: $metropolis-medium;
}
2020-11-06 22:42:57 +00:00
}
}
.getting-started {
background-color: $lightgrey;
color: $black;
p {
color: $black;
font-size: 16px;
2020-11-06 22:42:57 +00:00
}
.left-side {
width: 50%;
float: left;
}
.right-side {
width: 25%;
float: right;
}
h2 {
font-size: 30px;
margin-bottom: 0px;
}
a {
display: block;
max-width: 138px;
text-align: center;
padding: 10px;
min-width: unset;
}
.button {
margin-top: 50px;
border: 1px solid $blue;
}
@include breakpoint(small) {
.wrapper {
padding-bottom: 40px;
}
.left-side {
width: 100%;
float: none;
}
.right-side {
width: 100%;
float: none;
}
.button {
display: block;
text-align: center;
max-width: unset;
margin-top: 20px;
}
}
}
.community {
background-color: #fff;
margin-top: -90px;
padding: 30px 30px 50px 30px;
.grid {
.col {
border: 1px solid #F2F2F2;
.icon {
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
}
.content {
padding: 0px 20px 20px 20px;
text-align: center;
h3 {
margin-top: 0px;
}
}
}
}
}
.docs {
background-color: #fff;
margin-top: -90px;
padding: 30px 30px 50px 30px;
.side-nav {
width: 25%;
float: left;
ul {
padding-left: 0px;
margin-bottom: 35px;
li {
display: list-item;
margin-bottom: 15px;
a {
color: $grey;
font-size: 14px;
&.active {
color: $blue;
}
}
&.heading {
color: $black;
font-size: 14px;
}
}
}
}
.docs-content {
width: 75%;
float: right;
a {
font-size: 14px;
}
2020-11-06 22:42:57 +00:00
ul {
list-style-type: disc;
padding-left: 20px;
li:first-child {
margin-top: 10px;
}
2020-11-06 22:42:57 +00:00
li {
list-style-type: unset;
display: list-item;
margin-bottom: 10px;
font-size: 16px;
color: $darkgrey;
2020-11-06 22:42:57 +00:00
line-height: 1.6em;
list-style-image: url(/img/arrow.svg);
}
}
ol {
li:first-child {
margin-top: 10px;
}
li {
list-style-type: decimal;
display: list-item;
margin-bottom: 10px;
font-size: 16px;
color: $darkgrey;
2020-11-06 22:42:57 +00:00
}
}
code {
background-color: $white;
color: $darkgrey;
2020-11-06 22:42:57 +00:00
border: 2px solid #EFEFEF;
padding: 2px 8px;
.c1 {
color: $blue;
font-style: italic;
}
.se {
color: #ff0000;
}
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
code {
display: block;
border: 15px solid #EFEFEF;
padding: 15px;
margin-bottom: 30px;
}
}
img {
max-width: 100%;
}
}
}