gent_styleguide 6.0.0-alpha21 → 6.0.0-alpha23

package/build/styleguide/sass/41-organisms/content-header/_content-header.scss

@@ -6,11 +6,11 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 3rem;
-  padding: 3rem 1rem;
+  margin-bottom: 60px;
+  padding: 60px 20px;
 
   @include tablet {
-    padding: 4.5rem 1rem;
+    padding: 90px 20px;
   }
 
   h1 {
@@ -18,29 +18,29 @@
   }
 
   &.image {
-    margin-bottom: calc(100vw - 6rem);
-    padding-bottom: 6rem;
+    margin-bottom: calc(100vw - 105px);
+    padding-bottom: 120px;
 
     @include tablet {
       flex-direction: row;
-      margin-bottom: 8rem;
-      padding-top: 4.5rem;
-      padding-bottom: 4.5rem;
+      margin-bottom: 80px;
+      padding-top: 90px;
+      padding-bottom: 90px;
     }
 
     @include desktop {
-      margin-bottom: 9.8rem;
+      margin-bottom: 196px;
     }
   }
 
   &.overlap {
-    padding-top: 3rem;
-    padding-bottom: 6rem;
+    padding-top: 60px;
+    padding-bottom: 120px;
 
     @include tablet {
       flex-direction: row;
-      padding-top: 4.5rem;
-      padding-bottom: 5.25rem;
+      padding-top: 90px;
+      padding-bottom: 105px;
     }
   }
 
@@ -53,21 +53,21 @@
     //padding-bottom: .1rem;
 
     h1 {
-      @include accolade('bottom', 'left', 5rem, 1.75rem, 'color-none', 'color-primary');
+      @include accolade('bottom', 'left', 100px, 35px, 'color-none', 'color-primary');
       @include theme('background-color', 'color-primary', 'content-header-accolade-text-background');
 
       display: inline;
-      padding: 0 .75rem;
+      padding: 0 15px;
       color: color('white');
       line-height: 1.1;
       box-decoration-break: clone;
     }
 
     &.breakout {
-      padding-bottom: 2.25rem;
+      padding-bottom: 45px;
 
       @include tablet {
-        padding-bottom: 2.75rem;
+        padding-bottom: 55px;
       }
 
       .left {
@@ -92,7 +92,7 @@
     max-width: $bp-max-content;
 
     @include tablet {
-      padding-right: 3rem;
+      padding-right: 60px;
     }
 
     h1 {
@@ -100,19 +100,28 @@
     }
 
     h4 {
-      margin: 3rem 0 1rem;
+      margin: 60px 0 20px;
     }
 
     .summary-text {
-      margin: 1.5rem 0 0;
+      margin: 30px 0 0;
+
+      p {
+        font-size: 1.1rem;
+        line-height: 1.81;
+      }
 
       p:last-of-type {
         margin-bottom: 0;
       }
     }
 
+    time + .summary-text {
+      margin: 10px 0 0;
+    }
+
     .tag-list-wrapper {
-      margin: 1rem 0 0;
+      margin: 20px 0 0;
 
       li,
       a {
@@ -132,9 +141,9 @@
     height: auto;
 
     @include tablet {
-      flex: 0 0 calc(47vw - 4rem);
+      flex: 0 0 calc(47vw - 80px);
       width: auto;
-      height: calc(47vw - 4rem - 9.5rem);
+      height: calc(47vw - 80px - 190px);
       text-align: right;
     }
 
@@ -143,29 +152,25 @@
       position: absolute;
       bottom: 0;
       width: 100%;
-      transform: translate(0, calc(100% - 4.5rem));
+      padding-right: 40px;
+      transform: translate(0, calc(100% - 90px));
 
       @include tablet {
         position: static;
         max-width: 31.5rem;
+        padding: 0;
         transform: none;
       }
 
       img {
         width: 100%;
         height: auto;
-        padding-right: 2rem;
-
-
-        @include tablet {
-          padding: 0;
-        }
       }
     }
 
     @media only screen and (min-width: 1400px) {
-      flex: 0 0 28.5rem;
-      height: calc(28.5rem - 9.5rem);
+      flex: 0 0 570px;
+      height: calc(570px - 190px);
     }
   }
 }

package/build/styleguide/sass/41-organisms/footer/_footer.scss

@@ -1,13 +1,13 @@
 .footer {
-  margin: 3rem -1rem 0;
+  margin: 60px -20px 0;
 
   @include desktop() {
-    margin-top: 14rem;
+    margin-top: 280px;
   }
 
   h4 {
     margin-top: 0;
-    margin-bottom: .75rem;
+    margin-bottom: 15px;
   }
 
   .content-container {
@@ -23,7 +23,7 @@
   }
 
   .footer-top {
-    margin-bottom: 1.2rem;
+    margin-bottom: 24px;
     background-color: transparent;
 
     @include desktop {
@@ -34,7 +34,7 @@
       padding-top: 0;
 
       @include desktop {
-        padding-bottom: 3.5rem;
+        padding-bottom: 70px;
       }
     }
 
@@ -42,24 +42,26 @@
       @include theme('background-color', 'color-tertiary-light', 'footer-background-color');
       flex: 0 0 auto;
       width: span(12 of 12);
-      padding: 1rem 1rem 3rem;
+      padding: 20px 20px 60px;
 
+      // Gentinfo column.
       &:first-of-type {
-        padding-bottom: 1rem;
+        padding-bottom: 20px;
         background-color: transparent;
       }
 
       &:nth-of-type(2) {
-        margin-top: -3.7rem;
-        padding-top: 4.5rem;
-        padding-bottom: 1rem;
+        margin-top: -74px;
+        padding-top: 90px;
+        padding-bottom: 20px;
       }
 
       @include tablet {
         width: 50%;
-        margin-top: -3.7rem;
-        padding-top: 4.5rem;
+        margin-top: -74px;
+        padding-top: 90px;
 
+        // Gentinfo column.
         &:first-of-type {
           width: span(12 of 12);
           margin-top: 0;
@@ -68,11 +70,18 @@
         }
       }
 
+      @include breakpoint(1223px) {
+        // Gentinfo column.
+        &:first-of-type {
+          padding-right: 20px;
+        }
+      }
+
       @include desktop {
         width: span(3 of 12);
-        margin-top: 2.9rem;
+        margin-top: 58px;
         margin-bottom: 0;
-        padding-bottom: 1rem;
+        padding-bottom: 20px;
 
         &:nth-of-type(2),
         &:nth-of-type(3) {
@@ -80,6 +89,7 @@
           margin-right: $gutter-width;
         }
 
+        // Gentinfo column.
         &:first-of-type {
           order: 1;
           width: span(6 of 12);
@@ -87,6 +97,14 @@
         }
       }
 
+      @include breakpoint(1224px) {
+        // Gentinfo column.
+        &:first-of-type {
+          padding-right: 0;
+          padding-left: 0;
+        }
+      }
+
       a {
         @include medium-text;
       }
@@ -98,7 +116,7 @@
     }
 
     .social-list ul {
-      margin: 0 -.25rem;
+      margin: 0 -5px;
     }
   }
 
@@ -108,19 +126,20 @@
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
-    padding: 0 1rem;
+    padding: 0 20px;
 
     ul {
+      @include small-text();
       margin: 0;
       list-style: none;
     }
 
     li {
-      margin-bottom: .2rem;
+      margin-bottom: 4px;
 
       @include tablet {
         display: inline-block;
-        padding: 0 .4rem;
+        padding: 0 8px;
 
         &:first-of-type {
           padding-left: 0;
@@ -129,12 +148,12 @@
     }
 
     .partnership {
-      font-size: .7rem;
+      @include small-text();
+      line-height: 150%;
 
       i.icon-district09 {
-        margin-left: .5rem;
-        font-size: 1.3rem;
-        line-height: 1.6rem;
+        margin-left: 10px;
+        font-size: 1.4rem;
         vertical-align: middle;
       }
     }

package/build/styleguide/sass/41-organisms/footer/css/_gentinfo_island.scss

@@ -55,7 +55,6 @@
       position: relative;
       top: .3rem;
       margin: 0 .2rem 0 0;
-      font-size: 1.2rem;
     }
   }
 

package/build/styleguide/sass/41-organisms/footer/css/_social-list.scss

@@ -36,9 +36,5 @@
         }
       }
     }
-
-    i {
-      font-size: 1.4rem;
-    }
   }
 }

package/build/styleguide/sass/41-organisms/header/_header.scss

@@ -2,8 +2,6 @@
 
 header.header {
   position: relative;
-  margin-bottom: .3rem;
-  padding: .3rem 0;
 
   // first row
   > .content-container {
@@ -14,13 +12,22 @@ header.header {
       flex-wrap: wrap;
     }
 
-    > :not(:first-child),
-    > :not(.block-sg-menu-toggle) {
+    > :not(:first-child) {
       margin-left: gutter();
     }
 
     .site-logo {
       margin-right: auto;
+      padding: 20px 0;
+
+      .is-frontpage & {
+        align-items: flex-start;
+        padding: 20px 0;
+
+        @include tablet {
+          padding: 20px 0 0;
+        }
+      }
 
       &.subsite {
         flex: 1;
@@ -44,7 +51,8 @@ header.header {
 
       input[type=submit] {
         max-width: 0;
-        padding: 0;
+        padding-right: 0;
+        padding-left: 0;
         transition: opacity .2s ease-in-out, max-width .2s ease-in-out, padding .2s ease-in-out, background-size .3s;
         box-shadow: none;
         opacity: 0;
@@ -76,7 +84,8 @@ header.header {
 
           ~ input[type=submit] {
             max-width: 9999px;
-            padding: 0 1rem;
+            padding-right: 15px;
+            padding-left: 15px;
             opacity: 1;
           }
 
@@ -89,15 +98,14 @@ header.header {
     }
 
     .search--link {
-      @include theme('background-color', 'color-primary--lighten-5', 'header-search-background-color');
+      @include theme('background-color', 'color-zero', 'header-search-background-color');
 
       display: block;
-      min-width: 2.4rem;
-      max-width: calc(.8rem + 32px);
-      height: 2.4rem;
+      min-width: 44px;
+      max-width: calc(16px + 32px);
+      height: 44px;
       border-bottom: 0;
-      border-radius: border-radius('radius-1');
-      background: svg-as-background('search', color('gray'), 32, 32) no-repeat left .4rem center;
+      background: svg-as-background('search', color('white'), 24, 24) no-repeat left 10px center;
       text-indent: -9999px;
       overflow: hidden;
 
@@ -145,246 +153,7 @@ header.header {
     font-size: .9rem;
   }
 
-  nav.breadcrumb {
-    margin-top: .4rem;
-  }
-
-  hr {
-    $span: percentage(math.div(2, 12));
-
-    position: relative;
-    max-width: $bp-max-content;
-    margin-top: .3rem;
-    margin-bottom: 2.3rem;
-    border: 0;
-    overflow: visible;
-  }
-
-  // Hero image, overlaps and hides breadcrumb accolade.
-  figure.hero {
-    $span: percentage(math.div(2, 12));
-
-    display: none;
-    position: relative;
-    min-height: 1.6rem;
-    // Give the image 1px margin relative to the container
-    // so the accolade can overlap the edges
-    // IE error fix
-    margin: -1.7rem calc(-1rem + 1px) .3rem;
-
-    @include tablet {
-      display: block;
-    }
-
-    &.hero--mobile {
-      display: block;
-
-      &::before,
-      &::after {
-        content: '';
-      }
-
-      .image-wrapper,
-      img {
-        display: block;
-      }
-    }
-
-    .theme {
-      display: none;
-      position: absolute;
-      top: 0;
-      right: 0;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      padding: $gutter-width 40px;
-      text-align: center;
-      z-index: z('hero', 'base');
-
-      @include tablet {
-        display: flex;
-        width: span(4 wide of 12);
-        max-width: 23rem;
-        height: calc(100% - 32px + 1px); // 1px to fix rendering issues
-      }
-
-      @include desktop {
-        padding: 0 2rem;
-      }
-
-      @media (min-width: $bp-max-content) {
-        right: calc((100% - #{$bp-max-content}) / 2);
-      }
-
-      &::before,
-      &::after {
-        @include theme('background-color', 'color-primary', 'hero-background-color');
-        @include theme('border-color', 'color-primary', 'hero-background-color');
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: auto;
-        border: 1px solid;
-        content: '';
-        opacity: .94;
-        z-index: z('hero', 'overlay');
-      }
-
-      &.theme--light {
-        &::before,
-        &::after {
-          @include theme('background-color', 'color-primary--lighten-5', 'hero-background-light-color');
-          @include theme('border-color', 'color-primary--lighten-5', 'hero-background-light-color');
-          opacity: 1;
-        }
-
-        h1 {
-          @include theme('color', 'color-tertiary', 'hero-light-text-color');
-        }
-      }
-
-      &::before {
-        top: 0;
-        bottom: 50%;
-        border-bottom-left-radius: border-radius('radius-5');
-      }
-
-      &::after {
-        top: 50%;
-        bottom: 0;
-        border-top-left-radius: border-radius('radius-5');
-      }
-
-      .theme-title {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 100%;
-        min-height: 100%;
-      }
-
-      img {
-        display: inline-block;
-        width: auto;
-        height: 3rem;
-        margin-bottom: 1rem;
-
-        @include desktop {
-          height: 4rem;
-        }
-
-        @media (min-width: $bp-max-content) {
-          height: 5rem;
-        }
-      }
-
-      figure:last-child {
-        display: flex;
-        flex: .6 1 auto;
-        flex-direction: column;
-
-        img {
-          flex: 1 1 auto;
-          margin-bottom: 0;
-        }
-      }
-
-      h1 {
-        @include theme('color', 'color-secondary', 'hero-text-color');
-
-        margin: 0;
-        font-size: 1.2rem;
-
-        @include desktop {
-          font-size: 1.6rem;
-        }
-
-        @media (min-width: $bp-max-content) {
-          font-size: 2rem;
-        }
-
-        span {
-          display: block;
-          font-size: .9rem;
-
-          @include desktop {
-            font-size: 1.2rem;
-          }
-
-          @media (min-width: $bp-max-content) {
-            font-size: 1.5rem;
-          }
-        }
-      }
-    }
-
-    .image-wrapper {
-      display: none;
-
-      @include tablet {
-        display: block;
-      }
-    }
-
-    img {
-      display: none;
-
-      @include tablet {
-        display: block;
-      }
-    }
-
-    figcaption {
-      @extend %content-container;
-      display: none;
-      right: 0;
-      width: auto;
-
-      @include tablet {
-        display: block;
-        position: absolute;
-        top: calc(100% - 1.6rem);
-        left: 60px + $gutter-width;
-        margin: 0;
-        padding: 8px $gutter-width 0;
-        z-index: z('hero', 'caption');
-      }
-
-      @include desktop {
-        left: calc(#{$span} + 2rem);
-      }
-
-      @media (min-width: $bp-max-content) {
-        right: calc((100% - #{$bp-max-content}) / 2);
-        left: calc(#{$span} + 2rem + (100% - #{$bp-max-content}) / 2);
-        padding-right: 0;
-      }
-    }
-
-    &:not(.hero--subsite) .theme ~ figcaption {
-      left: 0;
-      width: 100%;
-      max-width: none;
-      background-color: color('white');
-
-      @media (min-width: $bp-max-content) {
-        width: auto;
-      }
-    }
-
-    &--subsite {
-      &::before,
-      &::after {
-        width: 100%;
-      }
-    }
-  }
-
   &--menu > .content-container {
-    > .authentication,
     > .language-switcher {
       @include tablet-and-below {
         display: none;