@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/cr/2017/variables/_mixins.scss

@@ -0,0 +1,56 @@
+/* Not using old button mixin with list array. Let's rethink about it. I find it a abit over engineered */
+
+// CR buttons variations
+@mixin cr_button_types($colour, $bg-colour) {
+  color: $colour;
+  background-color: $bg-colour;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: lighten($bg-colour, 10%);
+  }
+  &-ghost {
+    padding: 19px 40px 15px;
+    border: 4px solid $bg-colour;
+    color: $bg-colour;
+    background-color: transparent;
+    background-clip: initial;
+    &:hover {
+      background-color: $bg-colour;
+      color: $colour;
+    }
+  }
+}
+
+// CR links variation
+@mixin link($border, $hover) {
+  text-decoration: none;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  color: $border;
+  border-bottom: 4px solid $border;
+  font-family: $font-bold;
+  font-size: 18px;
+  line-height: 28px;
+  transition-property: border, color;
+  transition-duration: 180ms;
+  &:hover,
+  &:active,
+  &:focus {
+    border-bottom: 4px solid $hover;
+    color: $hover;
+  }
+  &.inline {
+    font-size: inherit;
+    line-height: 14px;
+    border-bottom: 4px solid rgba($border, 0.5);
+    &:hover {
+      border-bottom: 4px solid rgba($hover, 0.5);
+    }
+  }
+  &.link--small {
+    font-size: 16px;
+    line-height: 26px;
+  }
+}

package/src/sass/themes/cr/2017/variables/_typography.scss

@@ -0,0 +1,86 @@
+// Fonts
+
+$font-stack: "Sailec-Regular", sans-serif;
+
+$font-black-oblique: "Sailec-BlackItalic", sans-serif;
+$font-black: "Sailec-Black", sans-serif;
+$font-bold-oblique: "Sailec-BoldItalic", sans-serif;
+$font-bold: "Sailec-Bold", sans-serif;
+$font-medium: "Sailec-Medium", sans-serif;
+$font-regular-oblique: "Sailec-RegularItalic", sans-serif; 
+$font-regular: "Sailec-Regular", sans-serif; 
+$font-light: "Sailec-Light", sans-serif;
+$body-font: "Sailec-Regular", sans-serif;
+
+// breakpoint: (font-size, line-height)
+$h1-large-font-size: (
+  null: (66px, 68px),
+  $screen-md: (74px, 75px),
+  $screen-lg: (83px, 83px)
+);
+$h1-font-size: (
+  null: (41px, 48px),
+  $screen-md: (52px, 57px),
+  $screen-lg: (58px, 62px)
+);
+$h2-font-size: (
+  null: (32px, 41px),
+  $screen-md: (36px, 44px),
+  $screen-lg: (41px, 48px)
+);
+$h3-font-size: (
+  null: (29px, 38px),
+  $screen-md: (26px, 35px),
+  $screen-lg: (26px, 35px)
+);
+$h4-font-size: (
+  null: (23px, 33px),
+  $screen-md: (20px, 31px),
+  $screen-lg: (20px, 31px)
+);
+$h5-font-size: (
+  null: (20px, 31px),
+  $screen-md: (18px, 29px),
+  $screen-lg: (18px, 29px)
+);
+$p-xxlarge-font-size: (
+  null: (58px, 62px),
+  $screen-md: (52px, 57px),
+  $screen-lg: (41px, 48px)
+);
+$p-xlarge-font-size: (
+  null: (23px, 28px),
+  $screen-md: (23px, 28px),
+  $screen-lg: (23px, 33px)
+);
+$p-large-font-size: (
+  null: (20px, 31px),
+  $screen-md: (20px, 31px),
+  $screen-lg: (20px, 31px)
+);
+$p-font-size: (
+  null: (18px, 29px),
+  $screen-md: (18px, 29px),
+  $screen-lg: (18px, 29px)
+);
+$p-small-font-size: (
+  null: (16px, 27px),
+  $screen-md: (16px, 27px),
+  $screen-lg: (16px, 27px)
+);
+$p-xsmall-font-size: (
+  null: (14px, 26px),
+  $screen-md: (14px, 26px),
+  $screen-lg: (14px, 26px)
+);
+$p-xxsmall-font-size: (
+  null: (13px, 24px),
+  $screen-md: (13px, 24px),
+  $screen-lg: (13px, 24px)
+);
+$p-intro-font-size: (
+  null: (16px, 27px),
+  $screen-md: (16px, 27px),
+  $screen-lg: (16px, 27px)
+);
+

package/src/sass/themes/cr/2017/variables/colour.twig

@@ -0,0 +1,51 @@
+<h3>Primary palette</h3>
+<p>Used across the site, our main colours consist of red and purple</p>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--red">Red</h5>
+	<p>#ea0043</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--purple">Purple</h5>
+	<p>#340f78</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; margin-bottom: 10px; width: 99px;"></div>
+	<h5 class="font--white bg--black">White</h5>
+	<p>#ffffff</p>
+</div>
+<h3>Secondary palette</h3>
+<p>Across the site we use</p>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--royal-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--royal-blue">Royal Blue</h5>
+	<p>#4032fe</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--mint-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--mint-green">Mint Green</h5>
+	<p>#5df4cf</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-purple"  style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--dark-purple">Dark Purple</h5>
+	<p>#29022c</p>
+</div>
+<br/>
+<h3>Greyscale Palette</h3>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--light-grey">Light Grey</h5>
+	<p>#f8f8f8</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--grey">Grey</h5>
+	<p>#e8e8e8</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5 class="font--dark-grey">Dark Grey</h5>
+	<p>#333333</p>
+</div>

package/src/sass/themes/cr/2019/_cr19-components.scss

@@ -0,0 +1,65 @@
+@import "components/background-colours/background-colours";
+@import "components/buttons/buttons";
+@import "components/highlight/highlight";
+@import "components/links/links";
+@import "components/loading/loading";
+@import "components/content-block/content-block";
+@import "components/media-block/media-block";
+@import "components/typography/fonts";
+@import "components/typography/typography";
+@import "components/single-msg/single-msg";
+@import "components/navigation/main-nav";
+@import "components/meta-icons/meta-icons";
+@import "components/navigation/expanded-footer";
+@import "components/email-signup/email-signup-head";
+@import "components/news-teaser/news-article-teaser";
+@import "components/list/list";
+@import "components/just-in-time-block/just-in-time-block";
+@import "components/fixed-ratio-image/fixed-ratio-image";
+@import "components/full-height-single-image-single-copy/full-height-single-image-single-copy";
+@import "components/full-height-double-image-single-copy/full-height-double-image-single-copy";
+@import "components/full-height-single-image-triple-copy/full-height-single-image-triple-copy";
+@import "components/copy-video/copy-video";
+@import "components/full-height-single-image/full-height-single-image";
+@import "components/inline-social-icons/inline-social-icons";
+@import "components/copy-copy/copy-copy";
+@import "components/content-wall/content-wall";
+@import "components/bg-video-copy/bg-video-copy";
+@import "components/membership-signup/membership-signup";
+
+@import "components/grant-page/grant-page";
+
+body {
+  font-family: $montserrat;
+  font-weight: 500;
+}
+
+header[role=banner] {
+  .site-logo {
+    margin-top: 20px;
+  }
+}
+
+// Social links
+.footer__social-links {
+  margin: 0 0 20px;
+
+  li {
+    margin: 5px 4px 0;
+
+    @include breakpoint($screen-md) {
+      margin: 5px 8px 0;
+    }
+
+    a {
+      -webkit-transition: 0.5s opacity;
+      transition: 0.5s opacity;
+      border-radius: 50%;
+      background: black;
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+}