add about section
This commit is contained in:
parent
cc3696f77d
commit
9634cd3a88
|
@ -0,0 +1,7 @@
|
||||||
|
.about-bg {
|
||||||
|
background-color: rgba(red, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-section {
|
||||||
|
background-color: rgba(red, 0.5);
|
||||||
|
}
|
189
src/css/main.css
189
src/css/main.css
|
@ -1,5 +1,4 @@
|
||||||
@import "imports/reset.css";
|
@import "imports/reset.css";
|
||||||
// @import "milligram";
|
|
||||||
|
|
||||||
@import "imports/variables.scss";
|
@import "imports/variables.scss";
|
||||||
|
|
||||||
|
@ -12,7 +11,9 @@
|
||||||
|
|
||||||
@import "imports/components/base.scss";
|
@import "imports/components/base.scss";
|
||||||
|
|
||||||
|
@import "imports/header.scss";
|
||||||
@import "imports/hero.scss";
|
@import "imports/hero.scss";
|
||||||
|
@import "imports/about.scss";
|
||||||
|
|
||||||
@import "mapbox-gl/dist/mapbox-gl.css";
|
@import "mapbox-gl/dist/mapbox-gl.css";
|
||||||
|
|
||||||
|
@ -32,86 +33,6 @@ html.is-animating .transition-fade {
|
||||||
height: 30em;
|
height: 30em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// header
|
|
||||||
|
|
||||||
.header-bg {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
z-index: $z-index__header;
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__item {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__link {
|
|
||||||
display: block;
|
|
||||||
padding: 0.6em 1.5em;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav {
|
|
||||||
&__title {
|
|
||||||
}
|
|
||||||
|
|
||||||
&__menu-btn {
|
|
||||||
@media (max-width: $bp-s) {
|
|
||||||
margin: 0;
|
|
||||||
padding: 6px 0 6px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__nav-list {
|
|
||||||
@media (max-width: $bp-s) {
|
|
||||||
position: fixed;
|
|
||||||
top: 4rem;
|
|
||||||
bottom: 2rem;
|
|
||||||
left: 2rem;
|
|
||||||
right: 2rem;
|
|
||||||
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-text {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
display: block;
|
|
||||||
height: 1.1em;
|
|
||||||
width: 1.1em;
|
|
||||||
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: blue;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
// footer
|
// footer
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
@ -221,102 +142,6 @@ html.is-animating .transition-fade {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// hero
|
|
||||||
|
|
||||||
.hero-bg {
|
|
||||||
// background-color: var(--primary-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
// about
|
|
||||||
|
|
||||||
.about-bg {
|
|
||||||
background-color: var(--page-bg);
|
|
||||||
|
|
||||||
&--secondary {
|
|
||||||
background-color: var(--neutral-200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-section {
|
|
||||||
align-items: flex-end;
|
|
||||||
|
|
||||||
&__info {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
@media (min-width: $bp-m) {
|
|
||||||
padding-right: 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--swapped {
|
|
||||||
.about-section__info {
|
|
||||||
order: 2;
|
|
||||||
@media (min-width: $bp-m) {
|
|
||||||
padding-left: 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-section__card {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-card {
|
|
||||||
height: 30em;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 30em;
|
|
||||||
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
font-size: 0.9em;
|
|
||||||
|
|
||||||
@media (min-width: $bp-m) {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 26em;
|
|
||||||
height: 40em;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-section--swapped .about-card {
|
|
||||||
@media (min-width: $bp-m) {
|
|
||||||
margin-left: initial;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-card-bg-img {
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-card-bg-1 {
|
|
||||||
background-color: pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-card-bg-img-1 {
|
|
||||||
background-image: url(https://via.placeholder.com/300x400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-card-bg-2 {
|
|
||||||
background-color: lightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-card-bg-img-2 {
|
|
||||||
background-image: url(https://via.placeholder.com/300x400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-icon {
|
|
||||||
width: 4em;
|
|
||||||
height: 4em;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
background-color: blue;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// services
|
// services
|
||||||
|
|
||||||
.services-bg {
|
.services-bg {
|
||||||
|
@ -385,16 +210,6 @@ html.is-animating .transition-fade {
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// global
|
|
||||||
|
|
||||||
.site-title {
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body-bg {
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-icon {
|
.social-icon {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
|
|
Reference in New Issue