fixing paper and stack styling

Author: kylelangford

build/assets/css/styles.css

@@ -1414,13 +1414,15 @@ button:disabled, button:disabled:active, button.is-disabled, button.is-disabled:
 /* Carousel Styling */
 .stack {
   padding: 16px;
+  border: 1px solid #eee;
   background: #fff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
 }
 
 /* Image Styling */
 .paper {
   padding: 8px;
+  border: 1px solid #eee;
   background: #fff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
@@ -3132,20 +3134,11 @@ body {
   opacity: 0;
 }
 
-body article {
-  transform: translateY(35vh);
-}
-
 body.tween {
   opacity: 1;
   transition: all 0.7s ease-in;
 }
 
-body.tween article {
-  transform: translateY(0px);
-  transition: all 0.7s ease-in;
-}
-
 body.page--all .container {
   background-color: #273269;
 }
@@ -3365,8 +3358,8 @@ ul.portfolio .list__item small {
 /* Custom Positioning Classes */
 .position-bottom-right {
   position: absolute;
-  right: 0;
-  bottom: 2em;
+  right: 5vh;
+  bottom: 0;
   pointer-events: none;
 }
 

build/work/brm.html

@@ -105,13 +105,11 @@ <h5>Wireframes</h5>
                 <img
                   data-src="../assets/img/projects/brm/brm-wires_page_1.png"
                   alt="Elephant at sunset"
-                  class="paper"
                   loading="lazy"
                 />
                 <img
                   data-src="../assets/img/projects/brm/brm-wires_page_3.png"
                   alt="Elephant at sunset"
-                  class="paper"
                   loading="lazy"
                 />
               </div>

build/work/cpl.html

@@ -59,14 +59,6 @@ <h2 class="page__sub-title"></h2>
         <div class="column two-thirds">
           <article class="content">
             <div class="specimen stretch">
-              <!-- <img
-                src="../assets/img/projects/cpl/p-cpl.jpg"
-                style="width: 100%;"
-                alt="Elephant at sunset"
-                class="paper"
-                loading="eager"
-              /> -->
-    
               <picture class="image paper">
     <source srcset="../assets/webp/projects/cpl/p-cpl.webp" type="image/webp">
     <source srcset="../assets/img/projects/cpl/p-cpl.jpg" type="image/jpeg">

build/work/hle.html

@@ -139,8 +139,6 @@ <h5>Develop Content, Manage Content, Publish Content</h5>
               />
             </div>
 
-            <!-- <h5>Themable Microsites</h5> -->
-    
             <h5>Custom Reporting</h5>
 
             <div class="specimen stretch">

src/scss/components/_media.scss

@@ -30,6 +30,7 @@
 /* Carousel Styling */
 .stack {
   background: #fff;
+  border: 1px solid #eee;
   box-shadow:
     /* The top layer shadow */ 0 1px 1px rgba(0, 0, 0, 0.15),
     /* The second layer */ 0 10px 0 -5px #eee,
@@ -44,6 +45,7 @@
   background: #fff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
   padding: 8px;
+  border: 1px solid #eee;
   // width: 100%;
 }
 

src/templates/pages/work/brm.html

@@ -75,13 +75,11 @@ <h5>Wireframes</h5>
             <img
               data-src="../assets/img/projects/brm/brm-wires_page_1.png"
               alt="Elephant at sunset"
-              class="paper"
               loading="lazy"
             />
             <img
               data-src="../assets/img/projects/brm/brm-wires_page_3.png"
               alt="Elephant at sunset"
-              class="paper"
               loading="lazy"
             />
           </div>

src/templates/pages/work/cpl.html

@@ -29,14 +29,6 @@
     <div class="column two-thirds">
       <article class="content">
         <div class="specimen stretch">
-          <!-- <img
-            src="../assets/img/projects/cpl/p-cpl.jpg"
-            style="width: 100%;"
-            alt="Elephant at sunset"
-            class="paper"
-            loading="eager"
-          /> -->
-
           {{picture "projects/cpl/p-cpl.jpg" "Elephant at sunset"}}
 
           <div class="caption">Reverse channel letters on canopy.</div>

src/templates/pages/work/hle.html

@@ -113,8 +113,6 @@ <h5>Develop Content, Manage Content, Publish Content</h5>
           />
         </div>
 
-        <!-- <h5>Themable Microsites</h5> -->
-
         <h5>Custom Reporting</h5>
 
         <div class="specimen stretch">