gent_styleguide 6.0.0-alpha21 → 6.0.0-alpha23

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-alpha23",
   "description": "Styleguide Stad.Gent",
   "devDependencies": {
     "@babel/core": "^7.20.12",

package/build/styleguide/sass/31-molecules/mijn-gent-block/_authentication.scss

@@ -1,154 +0,0 @@
-.authentication {
-  display: flex;
-  position: relative;
-  justify-content: flex-end;
-
-  .avatar {
-    @include bold-text;
-
-    flex-shrink: 0;
-    width: 2.3rem;
-    height: 2.3rem;
-    border-radius: 50%;
-    background-color: #29cfc9;
-    color: #fff;
-    font-size: 1.3rem;
-    line-height: 2.3rem;
-    text-align: center;
-    text-transform: uppercase;
-  }
-
-  .login-link {
-    @include icon(user, before);
-
-    position: relative;
-    margin-left: 1.6rem;
-    line-height: 1;
-    text-overflow: ellipsis;
-
-    &::before {
-      @include theme('color', 'color-tertiary', 'login-link-icon-color');
-
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: -1.6rem;
-    }
-  }
-
-  img {
-    border-radius: 50%;
-  }
-
-  .accordion--button {
-    display: flex;
-    align-items: center;
-    border: 0;
-    background: transparent;
-    font-size: .8rem;
-    cursor: pointer;
-
-    * {
-      vertical-align: middle;
-    }
-
-    img {
-      width: 2.3rem;
-      height: 2.3rem;
-      object-fit: cover;
-    }
-
-    span {
-      @include bold-text;
-
-      display: none;
-      max-width: 160px;
-      padding: 0 .5em;
-      text-overflow: ellipsis;
-      overflow: hidden;
-
-      @include tablet {
-        display: inline-block;
-      }
-    }
-
-    &::before {
-      line-height: 0;
-    }
-
-    span.avatar {
-      display: block;
-    }
-  }
-
-  .accordion--content {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    width: calc(100vw - 2 * #{$gutter-width});
-    max-width: $bp-mobile;
-    margin-top: .5rem;
-    transition: max-height .3s ease-in-out;
-    background: color('white');
-    z-index: z('mijn-gent');
-  }
-
-  .content {
-    padding: 1.2rem;
-
-    h2 {
-      @extend %h3;
-    }
-
-    > h2 {
-      margin-bottom: 0;
-    }
-
-    section {
-      @include theme('border-color', 'color-primary--lighten-4', 'mijn_gent-border-color');
-
-      padding: .6rem 0;
-      border-top: 2px solid;
-
-      .links {
-        margin: 0;
-
-        ///
-        /// All links shouldn't have an indicator.
-        ///
-        a {
-          @include reset-link-background;
-          @include link-underlined;
-        }
-      }
-    }
-
-    .profile {
-      display: flex;
-      padding-bottom: 1rem;
-      border-top: 0;
-
-      &-info {
-        span {
-          display: block;
-          font-size: .7rem;
-        }
-      }
-
-      img {
-        align-self: flex-start;
-        width: 3.3rem;
-        height: 3.3rem;
-        margin-right: $gutter-width;
-        object-fit: cover;
-      }
-
-      .avatar {
-        width: 3.3rem;
-        height: 3.3rem;
-        margin-right: 1.2rem;
-        line-height: 3.3rem;
-      }
-    }
-  }
-}