_box.scss in jekyll-theme-drop-0.1.2

- old
+ new

@@ -2,49 +2,61 @@
 
 .box {
     position: relative;
     margin-top: 9em;
     margin-bottom: 0;
+    margin-left: auto;
+    margin-right: 3em;
 
     &:after {
         content: '';
         display: block;
         position: absolute;
         top: -9em;
-        left: 50%;
         height: 9em;
-        border-left: solid 1px #fff;
+        border-left: solid 1px _palette(accent);
     }
 
     &:before {
         content: '';
         display: block;
         width: 90px;
         height: 66px;
         position: absolute;
-        left: 50%;
         top: -4.5em;
         margin-left: -45px;
         margin-top: -33px;
-        background: url('images/arrow.svg') no-repeat;
+        background: url('images/circles.svg') no-repeat;
     }
 
     :last-child {
         margin-bottom: 0;
     }
 
+    &.right {
+        &:before, &:after {
+            left: 3em;
+        }
+    }
+
+    &.left {
+        &:before, &:after {
+            right: 3em;
+        }
+    }
+
     &.style1 {
-        background: #fff;
+        background: _palette(bg);
         padding: 3em;
 
         .image {
             display: block;
             position: absolute;
             top: 0;
             width: 50%;
             height: 100%;
-            background: #152E33;
+            background: _palette(bg);
             overflow: hidden;
 
             img {
                 position: absolute;
                 top: 0;
@@ -93,11 +105,11 @@
     &.style2 {
         text-align: center;
 
         header {
             display: inline-block;
-            background: #fff;
+            background: _palette(bg);
             padding: 2em 3em 2em 3em;
             margin: 0;
 
             p {
                 padding: 0;
@@ -113,11 +125,11 @@
                 display: block;
                 position: absolute;
                 top: 0;
                 left: 50%;
                 height: 100%;
-                border-left: solid 1px #fff;
+                border-left: solid 1px _palette(border);
             }
 
             .row {
                 position: relative;
 
@@ -126,11 +138,11 @@
                     display: block;
                     position: absolute;
                     top: 50%;
                     left: 20px;
                     width: calc(100% - 40px);
-                    border-bottom: solid 1px #fff;
+                    border-bottom: solid 1px _palette(border);
                 }
             }
 
             .image {
                 position: relative;
@@ -139,13 +151,97 @@
             }
         }
     }
 
     &.style3 {
-        background: #fff;
+        background: _palette(bg);
         padding: 3em;
 
         header {
             text-align: center;
+        }
+    }
+
+
+    &.style4 {
+        background: _palette(bg);
+        padding: 0;
+
+        svg {
+            position: absolute;
+            z-index: 0;
+        }
+
+        h2 {
+            position: relative;
+            z-index: 10;
+        }
+
+        p {
+            position: relative;
+            z-index: 10;
+        }
+
+        .upper, .lower {
+            display: block;
+            position: relative;
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            padding: 0;
+            margin: 0;
+        }
+
+        .upper {
+            color: _palette(bg);
+            background-color: _palette(accent);
+
+            svg {
+                bottom: 0;
+            }
+        }
+
+        .lower{
+            color: _palette(accent);
+            background-color: _palette(bg);
+
+            svg {
+                top: 0;
+            }
+        }
+
+        &.right {
+            svg {
+                left: 0;
+            }
+
+            h2 {
+                left: 0;
+                margin-left: 2.4em;
+                padding-left: 0.5em;
+                border-left: solid 1px _palette(bg);
+            }
+
+            p {
+                right: 0;
+                margin-left: 12em;
+            }
+        }
+
+        &.left {
+            svg {
+                right: 0;
+            }
+
+            h2 {
+                right: 0;
+                margin-right: 2.4em;
+                padding-right: 0.5em;
+                border-right: solid 1px _palette(bg);
+            }
+
+            p {
+                left: 0;
+            }
         }
     }
 }
\ No newline at end of file