From 8d5bac6d9f77f6f89afcee7d15e3c05c981d0c46 Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Wed, 1 Apr 2020 19:50:49 +0000
Subject: [PATCH] add syles for swapped about-section

---
 site/layouts/partials/about.html | 10 +++++-----
 src/css/main.css                 | 31 ++++++++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/site/layouts/partials/about.html b/site/layouts/partials/about.html
index 1cd92ff..04f72eb 100644
--- a/site/layouts/partials/about.html
+++ b/site/layouts/partials/about.html
@@ -3,14 +3,14 @@
   <section class="l-relative l-screen-min-full">
     <div class="l-underlay about-bg"></div>
     <div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
-      <div class="about-info">
+      <div class="about-section__info">
         <div class="about-icon"></div>
         <h2>About Heading One</h2>
         <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>
         <p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
         <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>
+      <div class="about-section__card">
         <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">
@@ -27,15 +27,15 @@
 
   <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 l-flex-2-col-m about-section">
-      <div>
+    <div class="l-section-pad l-wrapper l-flex-2-col-m about-section about-section--swapped">
+      <div class="about-section__info">
         <div class="about-icon"></div>
         <h2>About Heading Two</h2>
         <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>
         <p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
         <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>
+      <div class="about-section__card">
         <div class="c-img-card about-card">
           <div class="c-img-card__header about-card-bg-img about-card-bg-img-2"></div>
           <div class="c-img-card__body">
diff --git a/src/css/main.css b/src/css/main.css
index c8df461..7c38165 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -193,13 +193,26 @@ html.is-animating .transition-fade {
 
 .about-section {
   align-items: flex-end;
-}
 
-.about-info {
-  padding: 0;
+  &__info {
+    padding: 0;
 
-  @media (min-width: $bp-m) {
-    padding-right: 64px;
+    @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;
+    }
   }
 }
 
@@ -217,6 +230,14 @@ html.is-animating .transition-fade {
     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;
   }
 }