jekyll-theme-ethereal 0.4.4 → 0.5.0

data/_sass/small/components/_cookieconsent.scss

@@ -0,0 +1,403 @@
+.cc-window {
+  opacity: 1;
+
+  -webkit-transition: opacity 1s ease;
+  -moz-transition: opacity 1s ease;
+  -ms-transition: opacity 1s ease;
+  -o-transition: opacity 1s ease;
+  transition: opacity 1s ease;
+}
+
+.cc-window.cc-invisible {
+  opacity: 0;
+}
+
+/* only animate ifhas class 'cc-animate' */
+.cc-animate.cc-revoke {
+  -webkit-transition: transform 1s ease;
+  -moz-transition: transform 1s ease;
+  -ms-transition: transform 1s ease;
+  -o-transition: transform 1s ease;
+  transition: transform 1s ease;
+}
+.cc-animate.cc-revoke.cc-top {
+  transform: translateY(-2em);
+}
+.cc-animate.cc-revoke.cc-bottom {
+  transform: translateY(2em);
+}
+.cc-animate.cc-revoke.cc-active.cc-top {
+  transform: translateY(0);
+}
+.cc-animate.cc-revoke.cc-active.cc-bottom {
+  transform: translateY(0);
+}
+.cc-revoke:hover {
+  transform: translateY(0);
+}
+
+.cc-grower {
+  /* Initially we don't want any height, and we want the contents to be hidden */
+  max-height: 0;
+  overflow: hidden;
+
+  /* Set our transitions up. */
+  -webkit-transition: max-height 1s;
+  -moz-transition: max-height 1s;
+  -ms-transition: max-height 1s;
+  -o-transition: max-height 1s;
+  transition: max-height 1s;
+}
+
+/* the popup window */
+.cc-window,
+.cc-revoke {
+  position: fixed;
+  overflow: hidden;
+  box-sizing: border-box; /* exclude padding when dealing with width */
+
+  font-family: Helvetica, Calibri, Arial, sans-serif;
+  font-size: 16px; /* by setting the base font here, we can size the rest of the popup using CSS `em` */
+  line-height: 1.5em;
+
+  display: flex;
+  flex-wrap: nowrap;
+
+  /* the following are random unjustified styles - just because - should probably be removed */
+  z-index: 9998;
+}
+
+.cc-revoke {
+  z-index: 9999;
+}
+
+.cc-window.cc-static {
+  position: static;
+}
+
+/* 2 basic types of window - floating / banner */
+.cc-window.cc-floating {
+  padding: 2em;
+  max-width: 24em; /* 1em == 16px therefore 24em == 384px */
+  flex-direction: column;
+}
+.cc-window.cc-banner {
+  z-index: 10000;
+  padding: 1em 1.8em;
+  width: 100%;
+  flex-direction: row;
+}
+
+.cc-revoke {
+  padding: 0.5em;
+}
+.cc-revoke:hover {
+  text-decoration: underline;
+}
+
+.cc-header {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/* clickable things */
+.cc-btn,
+.cc-link,
+.cc-close,
+.cc-revoke {
+  cursor: pointer;
+}
+
+.cc-link {
+  opacity: 0.8;
+  display: inline-block;
+  border: none;
+  padding: 0.2em;
+  text-decoration: underline;
+}
+.cc-link:hover {
+  opacity: 1;
+}
+.cc-link:active,
+.cc-link:visited {
+  color: initial;
+}
+
+.cc-btn {
+  display: block;
+  padding: 0.4em 0.8em;
+  font-size: 0.9em;
+  font-weight: bold;
+  border-width: 2px;
+  border-style: solid;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.cc-highlight .cc-btn:first-child {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.cc-highlight .cc-btn:first-child:hover,
+.cc-highlight .cc-btn:first-child:focus {
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+.cc-close {
+  display: block;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  font-size: 1.6em;
+  opacity: 0.9;
+
+  /* seeing as this contains text and not an image, the element taller than it is wide (because it is text) */
+  /*  - we want it to be a square, because it's acting as an icon */
+  /*  - setting the line height normalizes the height */
+  line-height: 0.75;
+}
+.cc-close:hover,
+.cc-close:focus {
+  opacity: 1;
+}
+
+/* This file should contain styles that modifies the popup layout. */
+/* By layout, we mean the physical position of the elements on the popup window, and the margin / padding around those elements. */
+
+.cc-revoke.cc-top {
+  top: 0;
+  left: 3em;
+  border-bottom-left-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
+}
+.cc-revoke.cc-bottom {
+  bottom: 0;
+  left: 3em;
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+}
+.cc-revoke.cc-left {
+  left: 3em;
+  right: unset;
+}
+.cc-revoke.cc-right {
+  right: 3em;
+  left: unset;
+}
+
+/**************************************** FLOATING ****************************************/
+
+/* these classes position the floating element */
+.cc-top {
+  top: 1em;
+}
+.cc-left {
+  left: 1em;
+}
+.cc-right {
+  right: 1em;
+}
+.cc-bottom {
+  bottom: 1em;
+}
+
+/* links that are direct decendants should be displayed as block */
+.cc-floating > .cc-link {
+  margin-bottom: 1em;
+}
+
+.cc-floating .cc-message {
+  display: block;
+  margin-bottom: 1em;
+}
+
+.cc-window.cc-floating .cc-compliance {
+  flex: 1 0 auto;
+}
+
+/**************************************** BANNER ****************************************/
+
+.cc-window.cc-banner {
+  align-items: center;
+}
+
+.cc-banner.cc-top {
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.cc-banner.cc-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.cc-banner .cc-message {
+  display: block;
+  flex: 1 1 auto;
+  max-width: 100%;
+  margin-right: 1em;
+}
+
+/* COMPLIANCE BOX */
+
+.cc-compliance {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cc-floating .cc-compliance > .cc-btn {
+  flex: 1;
+}
+
+.cc-btn + .cc-btn {
+  margin-left: 0.5em;
+}
+
+/* Categories Layout */
+.cc-window.cc-type-categories {
+  display       : inline-flex;
+  flex-direction: column;
+  overflow      : visible;
+  .form{
+    text-align: right;
+  }
+  .cc-btn {
+    margin: 0;
+    &.cc-save {
+      margin        : 0;
+      display       : inline-block;
+    }
+  }
+}
+.cc-categories {
+  display: inline-flex;
+  .cc-category{
+    display  : flex;
+    max-width: 100%;
+    margin   : 0 2px;
+    position : relative;
+  }
+  .cc-btn {
+    border-right: none;
+    outline     : none;
+    input[type=checkbox]{
+      float: left;
+      height: 26px;
+      width: calc( 100% - 22px );
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 2px;
+      cursor: pointer;
+    }
+    &:not(.cc-info):not(.cc-save){
+      padding-left: 26px;
+    }
+  }
+  .cc-info {
+    border-left : none;
+    border-right: 2px solid lightgrey;
+    padding     : 4px;
+    font-variant: all-small-caps;
+    &:focus + .cc-tooltip{
+      display: block;
+    }
+  }
+  .cc-tooltip{
+    display      : none;
+    position     : absolute;
+    z-index      : 3;
+    width        : 190px;
+    bottom       : 46px;
+    padding      : 8px;
+    border       : thin solid lightgrey;
+    box-shadow: 1px 1px 4px rgba( 150, 150, 150, .7 );
+    &:after{
+      content   : "";
+      width     : 10px;
+      height    : 10px;
+      transform : rotate(45deg);
+      position  : absolute;
+      bottom    : -7px;
+      left      : 10px;
+      box-shadow: 2px 1px 1px rgba( 200, 200, 200, .5 );
+    }
+    p {
+      margin: 0;
+    }
+  }
+}
+
+@media print {
+  .cc-window,
+  .cc-revoke {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .cc-btn {
+    white-space: normal;
+  }
+}
+
+/* dimensions for 'iPhone6 Plus' and lower */
+@media screen and (max-width: 414px) and (orientation: portrait),
+  screen and (max-width: 736px) and (orientation: landscape) {
+  .cc-window {
+    &.cc-top {
+      top: 0;
+    }
+    &.cc-bottom {
+      bottom: 0;
+    }
+    &.cc-banner,
+    &.cc-floating,
+    &.cc-right,
+    &.cc-left {
+      left: 0;
+      right: 0;
+    }
+    
+    &.cc-banner {
+      flex-direction: column;
+      align-items: unset;
+      .cc-compliance {
+        flex: 1 1 auto;
+      }
+      .cc-message {
+        margin-right: 0;
+        margin-bottom: 1em;
+      }
+    }
+    &.cc-floating {
+      max-width: none;
+    }
+    &.cc-type-categories {
+      flex-direction: column;
+    }
+    .cc-message {
+      margin-bottom: 1em;
+    }
+    .cc-categories{
+      flex-direction: column;
+      width: 100%;
+      margin-right: 8px;
+    }
+    .cc-category {
+      margin: 4px 0;
+      .cc-btn:not(.cc-info){
+        width: calc( 100% - 16px);
+        min-width: 140px;
+      }
+    }
+  } 
+}
+@media screen and (max-width: 854px) {
+  .cc-window.cc-type-categories .cc-btn.cc-save {
+    margin: 8px 0;
+  }
+}

data/_sass/small/components/_form.scss

@@ -0,0 +1,27 @@
+form {
+    @include breakpoint('<=small') {
+        > .fields {
+            $gutter: (_size(element-margin) * 0.75);
+
+            width: calc(100% + #{$gutter * 2});
+            margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+
+            > .field {
+                padding: $gutter 0 0 $gutter;
+                width: calc(100% - #{$gutter * 1});
+
+                &.half {
+                    width: calc(100% - #{$gutter * 1});
+                }
+
+                &.third {
+                    width: calc(100% - #{$gutter * 1});
+                }
+
+                &.quarter {
+                    width: calc(100% - #{$gutter * 1});
+                }
+            }
+        }
+    }
+}

data/_sass/small/components/_gallery.scss

@@ -0,0 +1,38 @@
+@include breakpoint('<=small') {
+    .gallery {
+        @include vendor('flex-direction', 'column');
+        height: auto;
+
+        > * {
+            height: auto;
+            width: 100%;
+        }
+
+        .image {
+            width: 100%;
+            height: 40rem;
+        }
+
+        .group {
+            @include spans(33.33333%);
+
+            .image {
+                height: 20rem;
+            }
+        }
+    }
+}
+
+@include breakpoint('<=xsmall') {
+    .gallery {
+        .image {
+            height: 30rem;
+        }
+
+        .group {
+            .image {
+                height: 12.5rem;
+            }
+        }
+    }
+}

data/_sass/small/components/_grid-icons.scss

@@ -0,0 +1,29 @@
+ul.grid-icons {
+
+    @include breakpoint('<=small') {
+        @include vendor('justify-content', 'flex-start');
+        width: 100% !important;
+        margin: 0;
+
+        .icon {
+            &:before {
+                width: 4.5rem;
+                height: 4.5rem;
+                line-height: 4.5rem;
+                font-size: 1.75rem;
+            }
+        }
+
+        > li {
+            margin: 1rem 0 0 1rem !important;
+
+            &:before {
+                display: none !important;
+            }
+
+            &:after {
+                display: none !important;
+            }
+        }
+    }
+}

data/_sass/small/components/_panel-banner.scss

@@ -0,0 +1,37 @@
+@include breakpoint('<=small') {
+    .panel.banner {
+        .content {
+            @include padding($pad-small-tb, $pad-small-lr);
+            @include vendor('flex-basis', '60%');
+
+            > .actions:last-child {
+                margin-bottom: _size(element-margin);
+            }
+        }
+
+        .image {
+            @include vendor('flex-basis', '40%');
+        }
+    }
+
+    @include orientation(portrait) {
+        .panel.banner {
+            .content {
+                @include vendor('flex-basis', 'auto');
+            }
+
+            .image {
+                @include vendor('flex-basis', 'auto');
+                height: 18rem;
+            }
+
+            &.left {
+                @include vendor('flex-direction', 'column');
+            }
+
+            &.right {
+                @include vendor('flex-direction', 'column-reverse');
+            }
+        }
+    }
+}

data/_sass/small/components/_panel-spotlight.scss

@@ -0,0 +1,18 @@
+@include breakpoint('<=small') {
+    .panel.spotlight {
+        .content {
+            @include padding($pad-small-tb, $pad-small-lr);
+            @include vendor('flex-direction', 'column !important');
+            background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important;
+            min-height: 25rem;
+        }
+    }
+}
+
+@include breakpoint('<=xsmall') {
+    .panel.spotlight {
+        .content {
+            min-height: 30rem;
+        }
+    }
+}

data/_sass/small/components/_panel.scss

@@ -0,0 +1,80 @@
+$pad: _size(pad);
+$pad-small-tb: _size(pad-small-tb);
+$pad-small-lr: _size(pad-small-lr);
+
+@include breakpoint('<=small') {
+    .panel {
+        @include vendor('flex-direction', 'column');
+        height: auto;
+        width: 100vw !important;
+
+        > * {
+            @include panel-colors-small;
+        }
+
+        > .intro {
+            width: 100vw !important;
+            @include padding($pad-small-tb, $pad-small-lr);
+
+            &.joined {
+                padding-bottom: 0;
+                padding-right: $pad-small-lr;
+
+                & + .inner {
+                    padding-top: 0;
+                    padding-left: $pad-small-lr;
+                }
+            }
+        }
+
+        > .inner {
+            width: 100vw !important;
+            @include padding($pad-small-tb, $pad-small-lr);
+
+            &.columns {
+                @include vendor('flex-direction', 'column');
+
+                > * {
+                    margin-left: 0;
+                    margin-top: 0;
+                }
+
+                > :first-child {
+                    margin-top: 0;
+                }
+
+                &.divided {
+                    > * {
+                        margin-left: 0;
+                        margin-top: ($pad-small-lr * 2);
+
+                        &:before {
+                            content: '';
+                            position: absolute;
+                            top: auto;
+                            left: $pad-small-lr;
+                            width: calc(100% - #{$pad-small-lr * 2});
+                            height: 2px;
+                            margin-left: 0;
+                            margin-top: ($pad-small-lr * -1);
+                        }
+                    }
+
+                    > :first-child {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        @include spans-small(_size(span-fixed));
+
+        &.small,
+        &.medium,
+        &.large {
+            @include spans-small(_size(span-variable));
+        }
+
+        @include panel-colors-small;
+    }
+}

data/_sass/small/layout/_footer.scss

@@ -0,0 +1,34 @@
+#footer {
+    @include breakpoint('<=small') {
+        z-index: 0;
+        position: relative;
+        bottom: 0;
+        right: 0;
+        width: 100vw;
+        margin: 0;
+        padding: 2em;
+        @include vendor('display', 'flex');
+        @include vendor('justify-content', 'space-between');
+        @include vendor('flex-direction', 'column');
+        text-align: center;
+
+        .copyright {
+            display: block;
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            text-align: center;
+            
+            li {
+                display: block;
+                margin: 0.75em 0 0 0;
+                padding: 0;
+                border: 0;
+
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+        }
+    }
+}

data/_sass/small/layout/_page-wrapper.scss

@@ -0,0 +1,12 @@
+@include breakpoint('<=small') {
+    #page-wrapper {
+        height: auto;
+        padding: 1rem;
+    }
+}
+
+@include breakpoint('<=xsmall') {
+    #page-wrapper {
+        padding: 0;
+    }
+}