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 @@
-
+ -
+
@@ -27,15 +27,15 @@
-
-
+
+ -
+
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; } }