jekyll-theme-pirati 0.1.0

data/_sass/foundation/components/_media-object.scss

@@ -0,0 +1,115 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group media-object
+////
+
+/// Bottom margin of a media object.
+/// @type Number
+$mediaobject-margin-bottom: $global-margin !default;
+
+/// Left and right padding on sections within a media object.
+/// @type Number
+$mediaobject-section-padding: $global-padding !default;
+
+/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+/// @type Number
+$mediaobject-image-width-stacked: 100% !default;
+
+/// Adds styles for a media object container.
+@mixin media-object-container {
+  margin-bottom: $mediaobject-margin-bottom;
+  display: if($global-flexbox, flex, block);
+
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+  }
+}
+
+/// Adds styles for sections within a media object.
+/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
+@mixin media-object-section($padding: $mediaobject-section-padding) {
+  @if $global-flexbox {
+    flex: 0 1 auto;
+  }
+  @else {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  &:first-child {
+    padding-#{$global-right}: $padding;
+  }
+
+  &:last-child:not(:nth-child(2)) {
+    padding-#{$global-left}: $padding;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
+@mixin media-object-stack {
+  padding: 0;
+  padding-bottom: $mediaobject-section-padding;
+
+  @if $global-flexbox {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @else {
+    display: block;
+  }
+
+  img {
+    width: $mediaobject-image-width-stacked;
+  }
+}
+
+@mixin foundation-media-object {
+  .media-object {
+    @include media-object-container;
+
+    img {
+      max-width: none;
+    }
+
+    @if $global-flexbox {
+      &.stack-for-#{$-zf-zero-breakpoint} {
+        @include breakpoint($-zf-zero-breakpoint only) {
+          flex-wrap: wrap;
+        }
+      }
+    }
+
+    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
+      @include breakpoint($-zf-zero-breakpoint only) {
+        @include media-object-stack;
+      }
+    }
+  }
+
+  .media-object-section {
+    @include media-object-section;
+
+    @if $global-flexbox {
+      // scss-lint:disable ZeroUnit
+      &.main-section {
+        flex: 1 1 0px;
+      }
+    }
+    @else {
+      &.middle {
+        vertical-align: middle;
+      }
+
+      &.bottom {
+        vertical-align: bottom;
+      }
+    }
+  }
+}

data/_sass/foundation/components/_menu-icon.scss

@@ -0,0 +1,9 @@
+@mixin foundation-menu-icon {
+  .menu-icon {
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}

data/_sass/foundation/components/_menu.scss

@@ -0,0 +1,314 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group menu
+////
+
+/// Margin of a menu.
+/// @type Number
+$menu-margin: 0 !default;
+
+/// Left-hand margin of a nested menu.
+/// @type Number
+$menu-margin-nested: 1rem !default;
+
+/// Padding for items in a menu.
+/// @type Number
+$menu-item-padding: 0.7rem 1rem !default;
+
+/// Text color of an active menu item.
+/// @type Color
+$menu-item-color-active: $white !default;
+
+/// Background color of an active menu item.
+/// @type Color
+$menu-item-background-active: map-get($foundation-palette, primary) !default;
+
+/// Spacing between an icon and text in a menu item.
+/// @type Number
+$menu-icon-spacing: 0.25rem !default;
+
+/// Creates the base styles for a Menu.
+@mixin menu-base {
+  margin: $menu-margin;
+  list-style-type: none;
+
+  @if $global-flexbox {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  // List items are table cell to allow for vertical alignment
+  > li {
+    @include disable-mouse-outline;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+  // Reset line height to make the height of the overall item easier to calculate
+  > li > a {
+    display: block;
+    padding: $menu-item-padding;
+    line-height: 1;
+  }
+
+  // Reset styles of inner elements
+  input,
+  a,
+  button {
+    margin-bottom: 0;
+  }
+}
+
+/// Expands the items of a Menu, so each item is the same width.
+@mixin menu-expand {
+  @if $global-flexbox {
+    // scss-lint:disable ZeroUnit
+    > li {
+      flex: 1 1 0px;
+    }
+  }
+  @else {
+    width: 100%;
+    display: table;
+    table-layout: fixed;
+  }
+}
+
+/// Sets the direction of a Menu.
+/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
+@mixin menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    @if $global-flexbox {
+      flex-wrap: nowrap;
+
+      > li {
+        flex: 0 0 auto;
+      }
+    }
+    @else {
+      > li {
+        display: table-cell;
+      }
+    }
+  }
+  @else if $dir == vertical {
+    @if $global-flexbox {
+      flex-wrap: wrap;
+
+      > li {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+
+      > li  > a {
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+    }
+    @else {
+      > li {
+        display: block;
+      }
+    }
+  }
+  @else {
+    @warn 'The direction used for menu-direction() must be horizontal or vertical.';
+  }
+}
+
+/// Creates a simple Menu, which has no padding or hover state.
+@mixin menu-simple {
+  li {
+    line-height: 1;
+    display: inline-block;
+    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
+  }
+
+  a {
+    padding: 0;
+  }
+}
+
+/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
+/// @param {Keyword|Number} $padding [auto] - Length of the margin.
+@mixin menu-nested($margin: $menu-margin-nested) {
+  margin-#{$global-left}: $margin;
+}
+
+/// Adds support for icons to Menu items.
+/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
+/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
+@mixin menu-icons($position: side, $base: true) {
+  @if $base {
+    @if $global-flexbox {
+      > li > a {
+        display: flex;
+      }
+    }
+    @else {
+      > li > a {
+        img,
+        i,
+        svg {
+          vertical-align: middle;
+
+          + span {
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+
+  @if $position == side {
+    > li > a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-right}: $menu-icon-spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  @else if $position == top {
+    > li > a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: 0 auto $menu-icon-spacing;
+        }
+        @else {
+          align-self: stretch;
+          text-align: center;
+          margin-bottom: $menu-icon-spacing;
+        }
+      }
+    }
+  }
+}
+
+@mixin menu-text {
+  font-weight: bold;
+  color: inherit;
+  line-height: 1;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding: $menu-item-padding;
+}
+
+@mixin foundation-menu {
+  .menu {
+    @include menu-base;
+    @include menu-icons;
+
+    // Orientation
+    @include menu-direction(horizontal);
+
+    &.vertical {
+      @include menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include menu-direction(vertical);
+          }
+        }
+      }
+    }
+
+    // Simple
+    &.simple {
+      @include menu-simple;
+    }
+
+    // Align right
+    &.align-#{$global-right} {
+      @if $global-flexbox {
+        justify-content: flex-end;
+      }
+      @else {
+        @include clearfix;
+
+        > li {
+          float: $global-right;
+        }
+      }
+    }
+
+    // Even-width
+    &.expanded {
+      @include menu-expand;
+
+      > li:first-child:last-child {
+        width: 100%;
+      }
+    }
+
+    // Vertical icons
+    &.icon-top {
+      @include menu-icons(top, $base: false);
+    }
+
+    // Nesting
+    &.nested {
+      @include menu-nested;
+    }
+
+    // Active state
+    .active > a {
+      color: $menu-item-color-active;
+      background: $menu-item-background-active;
+    }
+  }
+
+  .menu-text {
+    @include menu-text;
+  }
+
+  // Align center
+  .menu-centered {
+    text-align: center;
+
+    > .menu {
+      display: inline-block;
+    }
+  }
+
+  // Prevent FOUC when using the Responsive Menu plugin
+  .no-js [data-responsive-menu] ul {
+    display: none;
+  }
+}

data/_sass/foundation/components/_off-canvas.scss

@@ -0,0 +1,177 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group off-canvas
+////
+
+/// Width of an off-canvas menu.
+/// @type Number
+$offcanvas-size: 250px !default;
+
+/// Background color of an off-canvas menu.
+/// @type Color
+$offcanvas-background: $light-gray !default;
+
+/// Z-index of an off-canvas menu.
+/// @type Number
+$offcanvas-zindex: -1 !default;
+
+/// Length of the animation on an off-canvas menu.
+/// @type Number
+$offcanvas-transition-length: 0.5s !default;
+
+/// Timing function of the animation on an off-canvas menu.
+/// @type Keyword
+$offcanvas-transition-timing: ease !default;
+
+/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
+$offcanvas-fixed-reveal: true !default;
+
+/// Background color for the overlay that appears when an off-canvas menu is open.
+/// @type Color
+$offcanvas-exit-background: rgba($white, 0.25) !default;
+
+/// CSS class used for the main content area. The off-canvas mixins use this to target the page body.
+$maincontent-class: 'off-canvas-content' !default;
+
+/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
+/// @type Shadow
+$maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
+
+/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
+@mixin off-canvas-basics {
+  // Extra properties needed on <html> and <body> to make off-canvas work
+  html,
+  body {
+    height: 100%;
+  }
+
+  .off-canvas-wrapper {
+    width: 100%;
+    overflow-x: hidden;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-overflow-scrolling: auto;
+  }
+
+  .off-canvas-wrapper-inner {
+    @include clearfix;
+    position: relative;
+    width: 100%;
+    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+  }
+
+  // Container for page content
+  .off-canvas-content,
+  .#{$maincontent-class} {
+    min-height: 100%;
+    background: $body-background;
+    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+    backface-visibility: hidden;
+    z-index: 1;
+    padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper
+
+    @if has-value($maincontent-shadow) {
+      box-shadow: $maincontent-shadow;
+    }
+  }
+
+  // Click-to-exit overlay (generated by JavaScript)
+  .js-off-canvas-exit {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $offcanvas-exit-background;
+    cursor: pointer;
+    transition: background $offcanvas-transition-length $offcanvas-transition-timing;
+  }
+}
+
+/// Adds basic styles for an off-canvas menu.
+@mixin off-canvas-base {
+  @include disable-mouse-outline;
+  position: absolute;
+  background: $offcanvas-background;
+  z-index: $offcanvas-zindex;
+  max-height: 100%;
+  overflow-y: auto;
+  transform: translateX(0);
+}
+
+@mixin off-canvas-position(
+  $position: left,
+  $size: $offcanvas-size,
+  $fixed: false
+) {
+  @if $position == left {
+    left: -$size;
+    top: 0;
+    width: $size;
+  }
+  @else if $position == right {
+    right: -$size;
+    top: 0;
+    width: $size;
+  }
+
+  // Generates an open state class that matches the width of the menu
+  @at-root {
+    .is-open-#{$position} {
+      @if $position == left {
+        transform: translateX($size);
+      }
+      @else if $position == right {
+        transform: translateX(-$size);
+      }
+    }
+  }
+}
+
+/// Adds styles that reveal an off-canvas menu.
+/// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
+@mixin off-canvas-reveal(
+  $position: left
+) {
+  #{$position}: 0;
+  z-index: auto;
+
+  @if $offcanvas-fixed-reveal {
+    position: fixed;
+  }
+
+  & ~ .#{$maincontent-class} {
+    margin-#{$position}: $offcanvas-size;
+  }
+}
+
+@mixin foundation-off-canvas {
+  @include off-canvas-basics;
+
+  // Off-canvas container
+  .off-canvas {
+    @include off-canvas-base;
+
+    &.position-left   { @include off-canvas-position(left); }
+    &.position-right  { @include off-canvas-position(right); }
+  }
+
+  // Reveal off-canvas menu on larger screens
+  @each $name, $value in $breakpoint-classes {
+    @if $name != $-zf-zero-breakpoint {
+      @include breakpoint($name) {
+        .position-left.reveal-for-#{$name} {
+          @include off-canvas-reveal(left);
+        }
+
+        .position-right.reveal-for-#{$name} {
+          @include off-canvas-reveal(right);
+        }
+      }
+    }
+  }
+}