glitches with new css

components/HomePageComponents/HomePageSlider/HomePageSlider.scss

@@ -24,11 +24,6 @@
   }
 }
 
-/* overrides for react-slick css*/
-:global .slick-slide {
-  width: 20rem;
-}
-
 .heading {
   display: flex;
   justify-content: space-between;
@@ -129,7 +124,7 @@
   z-index: 1;
   top: 40%;
   background-color: rgba(255, 255, 255, 0.95);
-  box-shadow: 0px 0 15px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
   transition: box-shadow 0.5s ease-out, background-color 0.5s ease-out;
   width: 3rem;
   height: 3rem;
@@ -145,7 +140,7 @@
 
   &:hover, &:focus {
     background-color: white;
-    box-shadow: 0px 0 20px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
 
     @media (min-width: $largeRem) {
       background-color: rgba(0, 0, 0, 0.05);
@@ -222,7 +217,7 @@
     content: none;
   }
 
-  & :global .slick-disabled {
+  :global .slick-disabled {
     display: none;
   }
 }

components/MainLayout/components/MinimalLayout/index.js

@@ -9,19 +9,27 @@ import GaWrapper from "shared/GaWrapper";
 
 import { SITE_ENV } from "constants/env";
 
-const MinimalLayout = ({ children, route, headLinks, pageTitle, seoType }) =>
+const MinimalLayout = ({
+  children,
+  route,
+  headLinks,
+  pageTitle,
+  seoType,
+  isPrintable
+}) =>
   <div>
     <Helmet htmlAttributes={{ lang: "en" }} />
     <DPLAHead
       additionalLinks={headLinks}
       pageTitle={pageTitle}
       seoType={seoType}
     />
-    <SkipToContent />
-    <PageHeader
-      searchQuery={route ? route.query.q : ""}
-      hideSearchBar={SITE_ENV === "pro"}
-    />
+    {!isPrintable && <SkipToContent />}
+    {!isPrintable &&
+      <PageHeader
+        searchQuery={route ? route.query.q : ""}
+        hideSearchBar={SITE_ENV === "pro"}
+      />}
     {children}
   </div>;
 

components/MainLayout/components/SmallScreenHeader/SmallScreenStyles.scss

@@ -10,6 +10,10 @@
   @media (min-width: $mediumRem) {
     display: none;
   }
+
+  @media print {
+    display: none;
+  }
 }
 
 .header {

components/PrimarySourceSetsComponents/SingleSet/ResourcesTabs/index.js

@@ -9,7 +9,7 @@ class ResourcesTabs extends React.Component {
     const { currentTab, route } = this.props;
     return (
       <div id="tabs" className={`${css.wrapper}`}>
-        <div className={`${css.tabsWrapper} sourceSetTabsWrapper`}>
+        <div className={css.tabsWrapper}>
           <ul role="tablist" className={`${css.tabs} ${utils.container}`}>
             <li
               id="tab-sourceset"

components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/SourceSetInfo.scss

@@ -4,6 +4,7 @@
 
 .tools {
   margin: 1rem 0 0;
+
   @media print {
     display: none;
   }
@@ -137,6 +138,7 @@
 
   @media print {
     color: black;
+    padding-left: 1rem;
   }
 }
 
@@ -191,6 +193,7 @@
     padding: 0;
     margin-bottom: 2rem;
   }
+
   @media (min-width: $mediumRem) {
     margin-bottom: 0;
   }

components/PrimarySourceSetsComponents/SingleSet/SourceSetInfo/index.js

@@ -66,8 +66,8 @@ class SourceSetInfo extends React.Component {
               <ReactMarkdown
                 id="dpla-description"
                 source={set.hasPart.find(item => item.name === "Overview").text}
-                className={`${css.description} sourceSetDescription ${css.description} ${this
-                  .state.isOpen
+                className={`${css.description} ${css.description} ${this.state
+                  .isOpen
                   ? css.open
                   : ""}`}
               />
@@ -87,7 +87,7 @@ class SourceSetInfo extends React.Component {
               </div>
             </div>
             <div className={`${css.removeScroll} col-xs-12 col-md-4`}>
-              <div className={`${css.sidebar} sourceSetSidebar`}>
+              <div className={css.sidebar}>
                 <div className={css.metadata}>
                   <div className={css.metadatum}>
                     <h2 className={css.metadataHeader}>

components/PrimarySourceSetsComponents/SingleSet/SourceSetSources/SourceSetSources.scss

@@ -14,29 +14,38 @@
 .set {
   flex-basis: calc(50% - 0.25rem);
   margin-right: 0.25rem;
+
   &:nth-child(2n) {
     margin-right: 0;
   }
+
   margin-bottom: 28px;
+
   @media (min-width: $xSmallRem) {
     flex-basis: calc(33% - 15px);
     margin-right: 29px;
+
     &:nth-child(2n) {
       margin-right: 20px;
     }
+
     &:nth-child(3n) {
       margin-right: 0;
     }
   }
+
   @media (min-width: $smallRem) {
     flex-basis: calc(25% - 15px);
     margin-right: 20px;
+
     &:nth-child(2n) {
       margin-right: 20px;
     }
+
     &:nth-child(3n) {
       margin-right: 20px;
     }
+
     &:nth-child(4n) {
       margin-right: 0;
     }
@@ -51,6 +60,7 @@
   margin-bottom: 9px;
   position: relative;
   height: 180px;
+
   @media (min-width: $smallRem) {
   }
 }
@@ -69,6 +79,7 @@
 
 .title {
   font-size: 0.75rem;
+
   @media (min-width: $smallRem) {
     font-size: 0.875rem;
   }

components/PrimarySourceSetsComponents/SingleSet/TeachersGuide/TeachersGuide.scss

@@ -129,22 +129,3 @@
 .additionalToolWrapper {
   margin-bottom: 0.5rem;
 }
-
-/* things to hide in print view only in teachers guide */
-:global .sourceSetSidebar {
-  @media print {
-    display: none;
-  }
-}
-
-:global .sourceSetDescription {
-  @media print {
-    display: none;
-  }
-}
-
-:global .sourceSetTabsWrapper {
-  @media print {
-    display: none;
-  }
-}