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

add services card styling

This commit is contained in:
Ray Elliott 2020-04-01 19:24:00 +00:00
parent 86ceebe6a9
commit d5b6788f30
4 changed files with 166 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
site/layouts/partials/about.html
View File

@ -2,8 +2,8 @@
<section class="l-relative l-screen-min-full">
<div class="l-underlay about-bg"></div>
<div class="l-section-pad l-wrapper">
<div>
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
<div class="about-info">
<h2>About Heading One</h2>
<div class="section-icon"></div>
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
@ -11,18 +11,23 @@
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
</div>
<div>
<img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
<h3>Card Heading</h3>
<p>
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
</p>
<div class="c-img-card about-card">
<div class="c-img-card__header about-card-bg-img about-card-bg-img-1"></div>
<div class="c-img-card__body">
<div class="c-img-card__body-bg about-card-bg-1"></div>
<h3>Card Heading</h3>
<p>
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
</p>
</div>
</div>
</div>
</div>
</section>
<section class="l-relative l-screen-min-full">
<div class="l-underlay about-bg about-bg--secondary"></div>
<div class="l-section-pad l-wrapper">
<div class="l-section-pad l-wrapper l-flex-2-col-m">
<div>
<h2>About Heading Two</h2>
<div class="section-icon"></div>
@ -31,12 +36,14 @@
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
</div>
<div>
<img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
<h3>Another Card Heading</h3>
<p>
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
</p>
<div class="c-img-card">
<img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
<h3>Another Card Heading</h3>
<p>
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
</p>
</div>
</div>
</div>
</section>

75
src/css/imports/components/base.scss Normal file
View File

@ -0,0 +1,75 @@
// a card
.c-img-card {
$bp-collapse: $bp-s;
z-index: 1;
position: relative;
border-radius: 8px;
overflow: hidden;
&__body {
padding: 32px 48px;
}
&__body-bg {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media (max-width: $bp-collapse) {
&__header,
&__body,
&__body-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&__header {
z-index: -1;
}
&__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
&__body-bg {
opacity: 0.6;
}
}
@media (min-width: $bp-collapse) {
display: flex;
flex-direction: column;
&__header,
&__body {
display: flex;
flex-direction: column;
justify-content: center;
}
&__header {
flex: 0 1 50%;
}
&__body {
position: relative;
flex: 1 0 50%;
}
&__body-bg {
opacity: 1;
}
}
}

18
src/css/imports/layout.scss
View File

@ -1,6 +1,6 @@
.l-wrapper {
width: 100%;
max-width: 70rem;
max-width: 90rem;
margin-left: auto;
margin-right: auto;
@ -121,6 +121,22 @@
flex-wrap: wrap;
}
.l-flex-2-col-m {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
> * {
flex: 0 0 100%;
@media (min-width: $bp-m) {
flex: 0 0 50%;
}
}
}
.l-flex-list-col {
display: flex;
flex-direction: column;

54
src/css/main.css
View File

@ -11,6 +11,8 @@
@import "imports/utility.scss";
@import "imports/blocks.scss";
@import "imports/components/base.scss";
@import "mapbox-gl/dist/mapbox-gl.css";
// swup transition classes
@ -179,6 +181,58 @@ html.is-animating .transition-fade {
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;
}
.about-info {
padding: 0;
@media (min-width: $bp-m) {
padding-right: 64px;
}
}
.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;
}
}
.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);
}
// services
.services-bg {