1 files changed, 108 insertions, 0 deletions
diff --git a/design/old/v9/_images.scss b/design/old/v9/_images.scss
new file mode 100644
index 0000000..4c0951c
--- /dev/null
+++ b/design/old/v9/_images.scss
@@ -0,0 +1,108 @@
+.picwide, .cluster, .pic960 {
+    // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
+    // I tweaked it slightly to add a bit of margin
+    width: 96vw;
+    position: relative;
+    left: 48%;
+    right: 48%;
+    margin-left: -46vw;
+    margin-right: -50vw;
+    @include breakpoint(gamma) {
+        width: 98vw;
+        position: relative;
+        left: 49%;
+        right: 49%;
+        margin-left: -48.5vw;
+        margin-right: -49.5vw;
+    }
+    @include breakpoint(epsilon) {
+        $margin: ($max_width - $narrow-max-width)/2;
+        left: 0; 
+        right: 0;
+        margin-left: -$margin;
+        margin-left: -$margin;
+        width: $max_width;
+        max-width: $max_width;
+    }
+}
+p + .picwide {
+    margin-top: 1.5rem;
+    @include breakpoint(gamma) {
+        margin-top: 2.5rem;
+    }
+}
+.picwide + p {
+    margin-top: 1.5rem;
+    @include breakpoint(gamma) {
+        margin-top: 2.5rem;
+    }
+}
+.cluster {
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+    @include breakpoint(gamma) {
+        margin-bottom: 3rem;
+        margin-top: 3rem;
+    }
+}
+.row-2 {
+    a:last-of-type img, figure:last-of-type {
+        width: 49.7%;
+        float: right;
+        margin-right: 0;
+    }
+    a:first-of-type img, figure:first-of-type {
+        width: 49.7%;
+        float: left;
+        margin-left: 0;
+        margin-right: .3%;
+    }
+    &:after {
+        @extend %clearfix;
+        margin-bottom: .5rem;
+    }
+    figure:first-of-type img, figure:last-of-type img {
+        width: 100%;
+    }
+}
+.banner .post-image {
+    // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
+    // I tweaked it slightly to add a bit of margin
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+.embed-wrapper {
+    @include constrain_wide;
+    @include breakpoint(gamma) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+.embed-container { 
+    position: relative; 
+    padding-bottom: 56.25%; 
+    height: 0; 
+    overflow: hidden; 
+    max-width: 100%; 
+    margin-bottom: 1rem;
+} 
+.embed-container iframe, .embed-container object, .embed-container embed { 
+    position: absolute; 
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: 100%; 
+}
+.pullpicleft {
+    display: none;
+    @include breakpoint(gamma) {
+        display: block;
+        float: left;
+        margin-left: -280px;
+        padding-right: 1rem;
+    }
+}