rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add about section

This commit is contained in:
Ray Elliott 2020-04-20 17:12:20 +00:00
parent cc3696f77d
commit 9634cd3a88
2 changed files with 9 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/imports/about.scss Normal file
View File

@ -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
View File

@ -1,5 +1,4 @@
@import "imports/reset.css";
// @import "milligram";
@import "imports/variables.scss";
@ -12,7 +11,9 @@
@import "imports/components/base.scss";
@import "imports/header.scss";
@import "imports/hero.scss";
@import "imports/about.scss";
@import "mapbox-gl/dist/mapbox-gl.css";
@ -32,86 +33,6 @@ html.is-animating .transition-fade {
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 {
@ -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-bg {
@ -385,16 +210,6 @@ html.is-animating .transition-fade {
margin-bottom: 1.25rem;
}
// global
.site-title {
text-transform: capitalize;
}
.body-bg {
background-color: var(--color-bg);
}
.social-icon {
display: block;
width: 1em;