add sloped sections

assets/sass/main.sass

@@ -13,6 +13,9 @@ $color-light-brown: #D1C1BA
 $color-dark-brown: #52453F
 $color-white: #FFFFFF
 
+$slope-size: 6vw
+$extra-padding: 2vw
+
 body
   font: 100% $regular-font-stack
   color: $color-dark-brown
@@ -35,9 +38,25 @@ h3
   font-weight: bold
   color: $color-white
 
+/* left top, right top, right bottom, left bottom
 .beige-content-block
   background: $color-beige
+  clip-path: polygon(0 0, 100% $slope-size, 100% calc(100% - #{$slope-size}), 0 100%)
+  position: relative
+  top: -$slope-size
+  margin-bottom: -$slope-size
+  padding-top: $slope-size + $extra-padding
+  padding-bottom: $slope-size + $extra-padding
 
 .brown-content-block
   background: $color-light-brown
+  clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 calc(100% - #{$slope-size}))
+  position: relative
+  top: -$slope-size
+  margin-bottom: -$slope-size
+  padding-top: $slope-size + $extra-padding
+  padding-bottom: $slope-size + $extra-padding
+
+#picture-holder
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$slope-size}))
 

layouts/index.html

@@ -12,15 +12,15 @@
                 </div>
             </div>
 
-            <div class="grid-x align-center">
+            <div class="grid-x align-center" id="picture-holder">
                 <!-- scale image for different resolutions -->
                 {{ $picture := resources.Get "images/me.png"}}
                 {{ $sPicture := $picture.Resize "x100" }}
                 {{ $mPicture := $picture.Resize "x400" }}
                 {{ $lPicture := $picture.Resize "x600" }}
-
                 <!-- <img data-interchange="[{{$sPicture.Permalink}}, small], [{{$mPicture.Permalink}}, medium], [{{$lPicture.Permalink}}, large]"> -->
-                <img data-interchange="[http://localhost:1313/images/me.png, small], [http://localhost:1313/images/me.png, medium], [http://localhost:1313/images/me.png, large]">
+                <!-- <img data-interchange="[http://localhost:1313/images/me.png, small], [http://localhost:1313/images/me.png, medium], [http://localhost:1313/images/me.png, large]"> -->
+                <img src="{{$lPicture.Permalink}}">
             </div>
 
             <div class="grid-x align-center beige-content-block">
@@ -29,7 +29,7 @@
                     {{.Content}}
                     {{ end }}
                 </div>
-            </div>
+            </div> 
 
             <div class="grid-x align-center brown-content-block">
                 <div class="cell large-6">
@@ -38,6 +38,15 @@
                     {{ end }}
                 </div>
             </div>
+
+            <div class="grid-x align-center beige-content-block">
+                <div class="cell large-6">
+                    {{ with .Site.GetPage "/section" }}
+                    {{.Content}}
+                    {{ end }}
+                </div>
+            </div>
+
         </div>
         {{ partial "script_append.html" . }}
     </body>