changing html background color

Author: kylelangford

build/assets/css/styles.css

@@ -1396,6 +1396,10 @@ button:disabled, button:disabled:active, button.is-disabled, button.is-disabled:
   }
 }
 
+.full-width {
+  width: 100%;
+}
+
 .split {
   display: flex;
 }
@@ -1404,6 +1408,10 @@ button:disabled, button:disabled:active, button.is-disabled, button.is-disabled:
   padding: 0 16px;
 }
 
+picture {
+  display: block;
+}
+
 .media__caption,
 .caption {
   margin: 8px 0;

build/work/cpl.html

@@ -59,10 +59,10 @@ <h2 class="page__sub-title"></h2>
         <div class="column two-thirds">
           <article class="content">
             <div class="specimen stretch">
-              <picture class="image paper">
+              <picture class="image">
     <source srcset="../assets/webp/projects/cpl/p-cpl.webp" type="image/webp">
     <source srcset="../assets/img/projects/cpl/p-cpl.jpg" type="image/jpeg">
-    <img src="../assets/img/projects/cpl/p-cpl.jpg" alt="Elephant at sunset">
+    <img src="../assets/img/projects/cpl/p-cpl.jpg" alt="Elephant at sunset" class="paper full-width">
     </picture>
 
               <div class="caption">Reverse channel letters on canopy.</div>

src/scss/_custom.scss

@@ -400,3 +400,6 @@ ul.pretty {
   position: relative; /* If you want text inside of it */
 }
 
+// .blend--multiply {
+//   mix-blend-mode: multiply;
+// }

src/scss/components/_media.scss

@@ -12,6 +12,10 @@
   }
 }
 
+.full-width {
+  width: 100%;
+}
+
 .split {
   display: flex;
 
@@ -20,6 +24,10 @@
   }
 }
 
+picture {
+  display: block;
+}
+
 .media__caption,
 .caption {
   text-align: left;

src/templates/helpers/picture.js

@@ -37,10 +37,11 @@ module.exports = function(path, alt, options) {
   // Custom Class
   // Data-src?
 
-  picture += '<picture class="image paper">\n';
+  picture += '<picture class="image">\n';
   picture += '<source srcset="' + webpPath + '" type="image/webp">\n';
   picture += '<source srcset="' + imgPath + '" type="image/jpeg">\n';
-  picture += '<img src="' + imgPath + '" alt="' + alt + '">\n';
+  picture +=
+    '<img src="' + imgPath + '" alt="' + alt + '" class="paper full-width">\n';
   picture += '</picture>';
 
   return new Handlebars.SafeString(picture);