gent_styleguide 6.0.0-alpha21 → 6.0.0-alpha22

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

@@ -3,7 +3,7 @@
 header.header {
   position: relative;
   margin-bottom: .3rem;
-  padding: .3rem 0;
+  padding: 20px 0;
 
   // first row
   > .content-container {
@@ -44,7 +44,6 @@ header.header {
 
       input[type=submit] {
         max-width: 0;
-        padding: 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 +75,8 @@ header.header {
 
           ~ input[type=submit] {
             max-width: 9999px;
-            padding: 0 1rem;
+            padding-right: 15px;
+            padding-left: 15px;
             opacity: 1;
           }
 

package/build/styleguide/sass/41-organisms/theme-footer/_theme-footer.scss

@@ -29,7 +29,6 @@
       height: 10rem;
     }
 
-    + .newsletter,
     + .social,
     + .contact {
       padding-top: 0;
@@ -38,25 +37,36 @@
         padding-top: 2.4rem;
       }
     }
+
+
+
+    + .newsletter {
+      padding: 40px 30px;
+
+      @include tablet {
+        padding: 60px 70px;
+      }
+    }
   }
 
   .contact {
-    @include medium-text;
+    @include medium-text();
     margin-right: auto;
 
     @include desktop {
-      padding-right: 2rem;
+      padding-right: 40px;
     }
 
     h3 {
-      margin-bottom: 1.5rem;
+      margin-bottom: 30px;
     }
 
     .icon-list {
+      @include medium-text();
       margin: 0;
 
       @include desktop {
-        column-gap: gutter();
+        column-gap: gutter() * 2;
         column-count: 2;
       }
 
@@ -73,7 +83,6 @@
 
     &:only-child .icon-list {
       @include tablet {
-        column-gap: gutter();
         column-count: 2;
       }
     }
@@ -82,7 +91,7 @@
   .social {
     @include tablet {
       flex-shrink: 0;
-      width: 19.3rem;
+      width: 386px;
 
       &:only-child {
         width: auto;
@@ -92,12 +101,12 @@
     h4 {
       max-width: 100%;
       margin-top: 0;
-      margin-bottom: .5rem;
+      margin-bottom: 10px;
     }
 
     .social-list {
       ul {
-        width: calc(100% + 1rem);
+        width: calc(100% + 20px);
 
         a {
           &,
@@ -115,10 +124,10 @@
     @include medium-text;
     flex-grow: 1;
     max-width: 768px;
-    padding: 1.5rem;
+    padding: 30px;
 
     @include desktop {
-      padding: 3rem 3.5rem;
+      padding: 60px 70px;
     }
 
     .subscribe {
@@ -126,30 +135,30 @@
       max-width: calc(#{$bp-max-content} / 12 * 5);
     }
 
-    a.standalone-link {
-      top: .5rem;
+    .more-link {
+      margin-top: 20px;
     }
 
     &:not(:last-child) {
-      padding-bottom: 5.4rem;
+      padding-bottom: 108px;
 
       @include desktop {
-        padding-right: 6rem;
-        padding-bottom: 3rem;
+        padding-right: 120px;
+        padding-bottom: 60px;
       }
     }
 
     + .social {
       @include theme('background-color', 'color-tertiary-pastel', 'theme-footer-social-background');
 
-      max-height: 11.5rem;
-      margin: -3rem 1rem 0;
-      padding: 1.5rem;
+      max-height: 230px;
+      margin: -60px 20px 0;
+      padding: 30px;
 
       .social-list {
         ul {
-          width: calc(100% + 1rem);
-          margin: 0 -.25rem;
+          width: calc(100% + 20px);
+          margin: 0 -5px;
 
           a {
             &,
@@ -164,18 +173,18 @@
       }
 
       @include tablet {
-        margin: -3rem auto 0;
-        padding: 3.35rem;
+        margin: -60px auto 0;
+        padding: 67px;
       }
 
       @include desktop {
-        margin: 3rem 0 0 -3.5rem;
+        margin: 60px 0 0 -70px;
       }
     }
   }
 
   .content-container {
-    padding: 0 1rem;
+    padding: 0 20px;
 
     @media (min-width: $bp-max-content + 54px) {
       padding-right: 0;
@@ -197,7 +206,11 @@
 
   .top {
     & ~ .bottom {
-      margin-top: 3.6rem;
+      margin-top: 12px;
+
+      @include tablet {
+        margin-top: 72px;
+      }
     }
   }
 

package/build/styleguide/sass/61-layouts/detail-layout/_detail-layout.scss

@@ -14,21 +14,21 @@
   }
 
   > .content-header-container {
-    margin-right: -1rem;
-    margin-left: -1rem;
+    margin-right: -20px;
+    margin-left: -20px;
 
     @include tablet {
-      width: calc(100% + 6.75rem * 2);
-      margin-left: -6.75rem;
-      padding-right: 6.75rem;
-      padding-left: 6.75rem;
+      width: calc(100% + 135px * 2);
+      margin-left: -135px;
+      padding-right: 135px;
+      padding-left: 135px;
     }
 
     &.accolade-title {
       @include tablet {
         // Set max width because the absolute title gets out of boundary.
         .left {
-          max-width: calc(100% - (6.75rem * 2 + 1rem));
+          max-width: calc(100% - (135px * 2 + 20px));
         }
       }
     }
@@ -42,15 +42,15 @@
     &.image {
       & + .summary-box,
       & + .table-of-contents {
-        margin: 1rem 0 2rem;
+        margin: 20px 0 40px;
 
         @include tablet {
-          margin: 8rem 0 2rem;
+          margin: 120px 0 40px;
         }
 
         @include desktop {
-          max-width: calc($bp-max-content - 28.5rem - 3rem);
-          margin: -12.8rem 0 5rem;
+          max-width: calc($bp-max-content - 570px - 60px);
+          margin: -256px 0 100px;
         }
       }
     }
@@ -62,20 +62,20 @@
       & + .partner-block {
         @include set-layout('width-12');
 
-        margin-top: -7.5rem;
+        margin-top: -150px;
 
         @include tablet {
-          margin-top: -6rem;
+          margin-top: -120px;
         }
       }
 
       + .partner-block {
         max-width: 100%;
-        padding: 1rem;
+        padding: 20px;
         background-color: color('white');
 
         @include tablet {
-          padding: 3rem;
+          padding: 60px;
         }
       }
     }
@@ -86,13 +86,13 @@
   > aside,
   > article,
   > nav {
-    margin-top: 3rem;
-    margin-bottom: 3rem;
+    margin-top: 60px;
+    margin-bottom: 60px;
   }
 
   > ul,
   > ol {
-    padding-left: 1rem;
+    padding-left: 20px;
   }
 
   .w9-o1 {
@@ -110,7 +110,7 @@
   }
 
   > .highlight {
-    margin-bottom: 4.5rem;
+    margin-bottom: 90px;
   }
 
   > ul.accordion {
@@ -123,6 +123,12 @@
     }
   }
 
+  > .partner-block {
+    @include desktop {
+      @include set-layout();
+    }
+  }
+
   > .quote-wrapper {
     @include desktop {
       @include set-layout();
@@ -154,8 +160,8 @@
   .readspeaker-button {
     display: block;
     width: auto;
-    margin-top: -.4rem;
-    margin-bottom: 2rem;
+    margin-top: -8px;
+    margin-bottom: 40px;
   }
 
   .openinghours-widget[data-type="month"] {
@@ -173,7 +179,7 @@
   }
 }
 
-$bulb-image-width: 6rem;
+$bulb-image-width: 120px;
 
 aside.top,
 aside.bottom {
@@ -182,17 +188,17 @@ aside.bottom {
   > * {
     @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
 
-    padding-top: 3rem;
+    padding-top: 60px;
     border-top: 2px solid;
 
     @include tablet {
-      padding-top: 2rem;
+      padding-top: 40px;
     }
 
     @include desktop {
       @include set-layout();
       width: 100%;
-      margin-bottom: 2rem;
+      margin-bottom: 40px;
       margin-left: 0;
       padding-right: span(2 wide of 12);
       padding-left: span(2 wide of 12);
@@ -207,7 +213,7 @@ aside.bottom {
 
 aside.top {
   position: relative;
-  margin: 5rem auto 0;
+  margin: 100px auto 0;
 
   > div:first-child {
     &::before {
@@ -215,7 +221,7 @@ aside.top {
 
       display: block;
       position: relative;
-      margin: (-$bulb-image-width) auto 1rem;
+      margin: (-$bulb-image-width) auto 20px;
       z-index: z('default');
 
       @include tablet {

package/build/styleguide/sass/molecules.scss

@@ -18,7 +18,6 @@
 @import "31-molecules/highlight/_highlight.scss";
 @import "31-molecules/language-switcher/_language-switcher.scss";
 @import "31-molecules/main-menu/_main-menu.scss";
-@import "31-molecules/mijn-gent-block/_authentication.scss";
 @import "31-molecules/modal/_modal.scss";
 @import "31-molecules/opening-hours/_opening-hours.scss";
 @import "31-molecules/pagination/_pagination.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gent_styleguide",
-  "version": "6.0.0-alpha21",
+  "version": "6.0.0-alpha22",
   "description": "Styleguide Stad.Gent",
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -41,9 +41,7 @@
     "Jeroen Goossens",
     "Gert-Jan Meire",
     "Helena Standaert",
-    "Bart Delrue",
-    "Lennart Van Vaerenbergh",
-    "Sven Vandevenne"
+    "Bart Delrue"
   ],
   "license": "GPL-2.0",
   "optionalDependencies": {