jekyll-theme-ethereal 0.4.4 → 0.5.0

data/_sass/short/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/short/components/_form.scss

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,9 @@
+#page-wrapper {
+    @include breakpoint('short') {
+        padding: 6vh;
+    }
+
+    @include breakpoint('xshort') {
+        padding: 0;
+    }
+}

data/_sass/short.scss

@@ -0,0 +1,48 @@
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+
+/*
+Ethereal by HTML5 UP
+html5up.net | @ajlkn
+Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+// Breakpoints.
+
+@include breakpoints((
+    short:    '(min-aspect-ratio: 16/7)',
+    xshort:   '(min-aspect-ratio: 16/6)'
+));
+
+// Base.
+
+@import 'short/base/reset';
+@import 'short/base/page';
+@import 'short/base/typography';
+
+// Component.
+
+@import 'short/components/form';
+@import 'short/components/icon';
+@import 'short/components/image';
+@import 'short/components/list';
+@import 'short/components/actions';
+@import 'short/components/icons';
+@import 'short/components/grid-icons';
+@import 'short/components/contact-icons';
+@import 'short/components/table';
+@import 'short/components/button';
+@import 'short/components/gallery';
+@import 'short/components/panel';
+@import 'short/components/panel-banner';
+@import 'short/components/panel-spotlight';
+
+// Layout.
+
+@import 'short/layout/footer';
+@import 'short/layout/header';
+@import 'short/layout/page-wrapper';
+@import 'short/layout/wrapper';

data/_sass/small/base/_page.scss

@@ -0,0 +1,17 @@
+@include breakpoint('<=small') {
+    html {
+        height: auto;
+    }
+
+    body {
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}
+
+@include breakpoint('<=xsmall') {
+    html, body {
+        min-width: 320px;
+    }
+}

data/_sass/small/base/_typography.scss

@@ -0,0 +1,67 @@
+@include breakpoint('<=small') {
+    html {
+        font-size: 12pt;
+    }
+
+    h1 {
+        font-size: 2.25rem;
+        line-height: 1.2;
+
+        &.major {
+            margin: 0 0 (_size(element-margin) * 1.75) 0;
+
+            &:after {
+                bottom: -1.325rem;
+            }
+        }
+    }
+
+    h2 {
+        font-size: 1.5rem;
+        line-height: 1.2;
+
+        &.major {
+            margin: 0 0 (_size(element-margin) * 1.325) 0;
+
+            &:after {
+                bottom: -1.2rem;
+            }
+        }
+    }
+
+    h3 {
+        font-size: 1rem;
+
+        &.major {
+            margin: 0 0 (_size(element-margin) * 1.25) 0;
+
+            &:after {
+                bottom: -0.75rem;
+            }
+        }
+    }
+
+    h4 {
+        font-size: 1rem;
+    }
+
+    h5 {
+        font-size: 0.9rem;
+    }
+
+    h6 {
+        font-size: 0.7rem;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        br {
+            display: none;
+        }
+    }
+}
+
+@include breakpoint('<=xxsmall') {
+    html {
+        font-size: 11pt;
+    }
+}