tidy up alignment of blocks

petertait · petertait · commit e6c2249b5ae8 · 2016-06-21T11:46:17.000+01:00
diff --git a/_layouts/about.html b/_layouts/about.html
@@ -9,15 +9,15 @@
     {% include photo.html url="/img/features/iot.jpg" %}
 
     <section class="feature-block block grey-bg slash-shadow slash-top">
-      <div class="block-inner grid">
+      <div class="block-inner block-inner-right grid">
+        <div class="col-1-2">
+          <img src="/img/illustrations/{{ page.block1-illustration }}" alt="">
+        </div>
         <div class="col-1-2">
           <h2>{{ page.block1-title }}</h2>
           <p class="delta">{{ page.block1-summary-lrg }}</p>
           <p class="epsilon">{{ page.block1-summary }}</p>
         </div>
-        <div class="col-1-2">
-          <img src="/img/illustrations/{{ page.block1-illustration }}" alt="">
-        </div>
       </div>
     </section>
 
@@ -37,16 +37,16 @@ <h2>{{ page.block2-title }}</h2>
     {% include photo.html url="/img/features/hackday.jpg" %}
 
     <section id="awards" class="feature-block block block-light slash-shadow slash-top pink-bg">
-      <div class="block-inner grid">
+      <div class="block-inner block-inner-right grid">
+        <div class="col-1-2">
+          <img src="/img/illustrations/{{ page.block3-illustration }}" alt="">
+        </div>
         <div class="col-1-2">
           <h2>{{ page.block3-title }}</h2>
           <p class="delta">{{ page.block3-summary-lrg }}</p>
           <p class="epsilon">{{ page.block3-summary }}</p>
           <!-- <a class="btn btn-block btn-med btn-white btn-play">Team Hacking</a> -->
         </div>
-        <div class="col-1-2">
-          <img src="/img/illustrations/{{ page.block3-illustration }}" alt="">
-        </div>
       </div>
     </section>
 
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -39,14 +39,14 @@ <h3>{{ page.expertise-one-title }}</h3>
         </div>
       </div>
       <div class="feature-block block block-light blue-dark5-bg">
-        <div class="block-inner grid">
+        <div class="block-inner block-inner-right grid">
+          <div class="col-1-2">
+            <img src="/img/illustrations/{{ page.expertise-two-illustration }}" alt="">
+          </div>
           <div class="col-1-2 text-right">
             <h3>{{ page.expertise-two-title }}</h3>
             <p>{{ page.expertise-two-summary }}</p>
           </div>
-          <div class="col-1-2">
-            <img src="/img/illustrations/{{ page.expertise-two-illustration }}" alt="">
-          </div>
         </div>
       </div>
       <div class="feature-block block block-light">
diff --git a/_sass/components/blocks/_base.scss b/_sass/components/blocks/_base.scss
@@ -96,3 +96,13 @@
     bottom: auto;
   }
 }
+
+@media screen and ( min-width: $medium ) {
+  .block-inner-right {
+    direction: rtl;
+
+    * {
+      direction: ltr;
+    }
+  }
+}
diff --git a/_sass/components/blocks/_feature.scss b/_sass/components/blocks/_feature.scss
@@ -16,15 +16,19 @@
 
   [class*='col-'] {
     vertical-align: middle;
+
+    @media screen and ( max-width: $medium ) {
+      width: 100%;
+      display: block;
+    }
   }
 
   img {
     margin: 10px 15%;
     width: 70%;
 
     @media screen and ( max-width: $medium ) {
-      margin: 20px 25%;
-      width: 50%;
+      margin: 0 0 40px;
     }
   }
 
diff --git a/_sass/pages/_home.scss b/_sass/pages/_home.scss
@@ -1,11 +1,6 @@
 .expertise-block {
   padding-bottom: 0;
 
-  .feature-block:last-of-type {
-    padding-top: 60px;
-    padding-bottom: 60px;
-  }
-
   .intro-block {
     padding-bottom: 60px;
     border-bottom: 3px solid rgba(black, 0.1);

Original file line number	Diff line number	Diff line change
`@@ -96,3 +96,13 @@`
`96`	`96`	`bottom: auto;`
`97`	`97`	`}`
`98`	`98`	`}`
	`99`	`+`
	`100`	`+@media screen and ( min-width: $medium ) {`
	`101`	`+ .block-inner-right {`
	`102`	`+ direction: rtl;`
	`103`	`+`
	`104`	`+ * {`
	`105`	`+ direction: ltr;`
	`106`	`+ }`
	`107`	`+ }`
	`108`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -16,15 +16,19 @@`
`16`	`16`
`17`	`17`	`[class*='col-'] {`
`18`	`18`	`vertical-align: middle;`
	`19`	`+`
	`20`	`+ @media screen and ( max-width: $medium ) {`
	`21`	`+ width: 100%;`
	`22`	`+ display: block;`
	`23`	`+ }`
`19`	`24`	`}`
`20`	`25`
`21`	`26`	`img {`
`22`	`27`	`margin: 10px 15%;`
`23`	`28`	`width: 70%;`
`24`	`29`
`25`	`30`	`@media screen and ( max-width: $medium ) {`
`26`		`- margin: 20px 25%;`
`27`		`- width: 50%;`
	`31`	`+ margin: 0 0 40px;`
`28`	`32`	`}`
`29`	`33`	`}`
`30`	`34`