mi-jekyll-theme 0.4.1

data/_sass/lib/sass/components/message.sass

@@ -0,0 +1,79 @@
+$message-background-color: $background !default
+$message-radius: $radius !default
+
+$message-header-background-color: $text !default
+$message-header-color: $text-invert !default
+$message-header-padding: 0.5em 0.75em !default
+$message-header-radius: $radius !default
+
+$message-body-border: 1px solid $border !default
+$message-body-color: $text !default
+$message-body-padding: 1em 1.25em !default
+$message-body-radius: $radius !default
+
+$message-body-pre-background-color: $white !default
+$message-body-pre-code-background-color: transparent !default
+
+.message
+  +block
+  background-color: $message-background-color
+  border-radius: $message-radius
+  font-size: $size-normal
+  strong
+    color: currentColor
+  a:not(.button):not(.tag)
+    color: currentColor
+    text-decoration: underline
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    $color-luminance: colorLuminance($color)
+    $darken-percentage: $color-luminance * 70%
+    $desaturate-percentage: $color-luminance * 30%
+    &.is-#{$name}
+      background-color: lighten($color, $color-lightning)
+      .message-header
+        background-color: $color
+        color: $color-invert
+      .message-body
+        border-color: $color
+        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+
+.message-header
+  align-items: center
+  background-color: $message-header-background-color
+  border-radius: $message-header-radius $message-header-radius 0 0
+  color: $message-header-color
+  display: flex
+  justify-content: space-between
+  line-height: 1.25
+  padding: $message-header-padding
+  position: relative
+  .delete
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 0.75em
+  & + .message-body
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+    border-top: none
+
+.message-body
+  border: $message-body-border
+  border-radius: $message-body-radius
+  color: $message-body-color
+  padding: $message-body-padding
+  code,
+  pre
+    background-color: $message-body-pre-background-color
+  pre code
+    background-color: $message-body-pre-code-background-color

data/_sass/lib/sass/components/modal.sass

@@ -0,0 +1,111 @@
+$modal-z: 20 !default
+
+$modal-background-background-color: rgba($black, 0.86) !default
+
+$modal-content-width: 640px !default
+$modal-content-margin-mobile: 20px !default
+$modal-content-spacing-mobile: 160px !default
+$modal-content-spacing-tablet: 40px !default
+
+$modal-close-dimensions: 40px !default
+$modal-close-right: 20px !default
+$modal-close-top: 20px !default
+
+$modal-card-spacing: 40px !default
+
+$modal-card-head-background-color: $background !default
+$modal-card-head-border-bottom: 1px solid $border !default
+$modal-card-head-padding: 20px !default
+$modal-card-head-radius: $radius-large !default
+
+$modal-card-title-color: $text-strong !default
+$modal-card-title-line-height: 1 !default
+$modal-card-title-size: $size-4 !default
+
+$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-border-top: 1px solid $border !default
+
+$modal-card-body-background-color: $white !default
+$modal-card-body-padding: 20px !default
+
+.modal
+  +overlay
+  align-items: center
+  display: none
+  justify-content: center
+  overflow: hidden
+  position: fixed
+  z-index: $modal-z
+  // Modifiers
+  &.is-active
+    display: flex
+
+.modal-background
+  +overlay
+  background-color: $modal-background-background-color
+
+.modal-content,
+.modal-card
+  margin: 0 $modal-content-margin-mobile
+  max-height: calc(100vh - #{$modal-content-spacing-mobile})
+  overflow: auto
+  position: relative
+  width: 100%
+  // Responsiveness
+  +tablet
+    margin: 0 auto
+    max-height: calc(100vh - #{$modal-content-spacing-tablet})
+    width: $modal-content-width
+
+.modal-close
+  +delete
+  background: none
+  height: $modal-close-dimensions
+  position: fixed
+  right: $modal-close-right
+  top: $modal-close-top
+  width: $modal-close-dimensions
+
+.modal-card
+  display: flex
+  flex-direction: column
+  max-height: calc(100vh - #{$modal-card-spacing})
+  overflow: hidden
+
+.modal-card-head,
+.modal-card-foot
+  align-items: center
+  background-color: $modal-card-head-background-color
+  display: flex
+  flex-shrink: 0
+  justify-content: flex-start
+  padding: $modal-card-head-padding
+  position: relative
+
+.modal-card-head
+  border-bottom: $modal-card-head-border-bottom
+  border-top-left-radius: $modal-card-head-radius
+  border-top-right-radius: $modal-card-head-radius
+
+.modal-card-title
+  color: $modal-card-title-color
+  flex-grow: 1
+  flex-shrink: 0
+  font-size: $modal-card-title-size
+  line-height: $modal-card-title-line-height
+
+.modal-card-foot
+  border-bottom-left-radius: $modal-card-foot-radius
+  border-bottom-right-radius: $modal-card-foot-radius
+  border-top: $modal-card-foot-border-top
+  .button
+    &:not(:last-child)
+      margin-right: 10px
+
+.modal-card-body
+  +overflow-touch
+  background-color: $modal-card-body-background-color
+  flex-grow: 1
+  flex-shrink: 1
+  overflow: auto
+  padding: $modal-card-body-padding

data/_sass/lib/sass/components/nav.sass

@@ -0,0 +1,125 @@
+$nav-height: 3.25rem !default
+
+// Components
+
+.nav-toggle
+  +hamburger($nav-height)
+  // Responsiveness
+  +tablet
+    display: none
+
+.nav-item
+  align-items: center
+  display: flex
+  flex-grow: 0
+  flex-shrink: 0
+  font-size: $size-normal
+  justify-content: center
+  line-height: 1.5
+  padding: 0.5rem 0.75rem
+  a
+    flex-grow: 1
+    flex-shrink: 0
+  img
+    max-height: 1.75rem
+  .tag
+    &:first-child:not(:last-child)
+      margin-right: 0.5rem
+    &:last-child:not(:first-child)
+      margin-left: 0.5rem
+  // Responsiveness
+  +mobile
+    justify-content: flex-start
+
+.nav-item a:not(.button),
+a.nav-item:not(.button)
+  color: $text-light
+  &:hover
+    color: $link-hover
+  // Modifiers
+  &.is-active
+    color: $link-active
+  &.is-tab
+    border-bottom: 1px solid transparent
+    border-top: 1px solid transparent
+    padding-bottom: calc(0.75rem - 1px)
+    padding-left: 1rem
+    padding-right: 1rem
+    padding-top: calc(0.75rem - 1px)
+    &:hover
+      border-bottom-color: $primary
+      border-top-color: transparent
+    &.is-active
+      border-bottom: 3px solid $primary
+      color: $primary
+      padding-bottom: calc(0.75rem - 3px)
+  // Responsiveness
+  +desktop
+    &.is-brand
+      padding-left: 0
+
+// Containers
+
+.nav-left,
+.nav-right
+  +overflow-touch
+  align-items: stretch
+  display: flex
+  flex-grow: 1
+  flex-shrink: 0
+  max-width: 100%
+  overflow: auto
+  +widescreen
+    flex-basis: 0
+
+.nav-left
+  justify-content: flex-start
+  white-space: nowrap
+
+.nav-right
+  justify-content: flex-end
+
+.nav-center
+  align-items: stretch
+  display: flex
+  flex-grow: 0
+  flex-shrink: 0
+  justify-content: center
+  margin-left: auto
+  margin-right: auto
+
+.nav-menu
+  // Responsiveness
+  +mobile
+    &.nav-right
+      background-color: $white
+      box-shadow: 0 4px 7px rgba($black, 0.1)
+      left: 0
+      display: none
+      right: 0
+      top: 100%
+      position: absolute
+      .nav-item
+        border-top: 1px solid rgba($border, 0.5)
+        padding: 0.75rem
+      &.is-active
+        display: block
+
+// Main container
+
+.nav
+  align-items: stretch
+  background-color: $white
+  display: flex
+  height: $nav-height
+  position: relative
+  text-align: center
+  z-index: 10
+  & > .container
+    align-items: stretch
+    display: flex
+    min-height: $nav-height
+    width: 100%
+  // Modifiers
+  &.has-shadow
+    box-shadow: 0 2px 3px rgba($black, 0.1)

data/_sass/lib/sass/components/navbar.sass

@@ -0,0 +1,301 @@
+$navbar-background-color: $white !default
+$navbar-height: 3.25rem !default
+
+$navbar-item-color: $grey-dark !default
+$navbar-item-hover-color: $black !default
+$navbar-item-hover-background-color: $background !default
+$navbar-item-active-color: $black !default
+$navbar-item-active-background-color: transparent !default
+$navbar-item-img-max-height: 1.75rem !default
+
+$navbar-tab-hover-background-color: transparent !default
+$navbar-tab-hover-border-bottom-color: $primary !default
+$navbar-tab-active-color: $primary !default
+$navbar-tab-active-background-color: transparent !default
+$navbar-tab-active-border-bottom-color: $primary !default
+$navbar-tab-active-border-bottom-style: solid !default
+$navbar-tab-active-border-bottom-width: 3px !default
+
+$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-border-top: 1px solid $border !default
+$navbar-dropdown-offset: -4px !default
+$navbar-dropdown-arrow: $link !default
+$navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-z: 20 !default
+
+$navbar-dropdown-boxed-radius: $radius-large !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-background-color: $background !default
+$navbar-dropdown-item-active-color: $primary !default
+$navbar-dropdown-item-active-background-color: $background !default
+
+$navbar-divider-background-color: $border !default
+
+.navbar
+  background-color: $navbar-background-color
+  min-height: $navbar-height
+  position: relative
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+      .navbar-brand
+        & > .navbar-item,
+        .navbar-link
+          color: $color-invert
+        & > a.navbar-item,
+        .navbar-link
+          &:hover,
+          &.is-active
+            background-color: darken($color, 5%)
+            color: $color-invert
+        .navbar-link
+          &::after
+            border-color: $color-invert
+      +desktop
+        .navbar-start,
+        .navbar-end
+          & > .navbar-item,
+          .navbar-link
+            color: $color-invert
+          & > a.navbar-item,
+          .navbar-link
+            &:hover,
+            &.is-active
+              background-color: darken($color, 5%)
+              color: $color-invert
+          .navbar-link
+            &::after
+              border-color: $color-invert
+        .navbar-item.has-dropdown:hover .navbar-link,
+        .navbar-item.has-dropdown.is-active .navbar-link
+          background-color: darken($color, 5%)
+          color: $color-invert
+        .navbar-dropdown
+          a.navbar-item
+            &.is-active
+              background-color: $color
+              color: $color-invert
+  & > .container
+    align-items: stretch
+    display: flex
+    min-height: $navbar-height
+    width: 100%
+  &.has-shadow
+    box-shadow: 0 2px 3px rgba($black, 0.1)
+
+.navbar-brand,
+.navbar-tabs
+  align-items: stretch
+  display: flex
+  flex-shrink: 0
+  min-height: $navbar-height
+
+.navbar-tabs
+  +overflow-touch
+  max-width: 100vw
+  overflow-x: auto
+  overflow-y: hidden
+
+.navbar-burger
+  +hamburger($navbar-height)
+  margin-left: auto
+
+.navbar-menu
+  display: none
+
+.navbar-item,
+.navbar-link
+  color: $navbar-item-color
+  display: block
+  line-height: 1.5
+  padding: 0.5rem 1rem
+  position: relative
+
+a.navbar-item,
+.navbar-link
+  &:hover,
+  &.is-active
+    background-color: $navbar-item-hover-background-color
+    color: $navbar-item-hover-color
+
+.navbar-item
+  flex-grow: 0
+  flex-shrink: 0
+  img
+    max-height: $navbar-item-img-max-height
+  &.has-dropdown
+    padding: 0
+  &.is-tab
+    border-bottom: 1px solid transparent
+    min-height: $navbar-height
+    padding-bottom: calc(0.5rem - 1px)
+    &:hover
+      background-color: $navbar-tab-hover-background-color
+      border-bottom-color: $navbar-tab-hover-border-bottom-color
+    &.is-active
+      background-color: $navbar-tab-active-background-color
+      border-bottom-color: $navbar-tab-active-border-bottom-color
+      border-bottom-style: $navbar-tab-active-border-bottom-style
+      border-bottom-width: $navbar-tab-active-border-bottom-width
+      color: $navbar-tab-active-color
+      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
+
+.navbar-content
+  flex-grow: 1
+  flex-shrink: 1
+
+.navbar-link
+  padding-right: 2.5em
+
+.navbar-dropdown
+  font-size: 0.875rem
+  padding-bottom: 0.5rem
+  padding-top: 0.5rem
+  .navbar-item
+    padding-left: 1.5rem
+    padding-right: 1.5rem
+
+.navbar-divider
+  background-color: $navbar-divider-background-color
+  border: none
+  display: none
+  height: 1px
+  margin: 0.5rem 0
+
++touch
+  .navbar > .container
+    display: block
+  .navbar-brand,
+  .navbar-tabs
+    .navbar-item
+      align-items: center
+      display: flex
+  .navbar-menu
+    background-color: $white
+    box-shadow: 0 8px 16px rgba($black, 0.1)
+    padding: 0.5rem 0
+    &.is-active
+      display: block
+
++desktop
+  .navbar,
+  .navbar-menu,
+  .navbar-start,
+  .navbar-end
+    align-items: stretch
+    display: flex
+  .navbar
+    min-height: $navbar-height
+    &.is-transparent
+      a.navbar-item,
+      .navbar-link
+        &:hover,
+        &.is-active
+          background-color: transparent
+      .navbar-item.has-dropdown
+        &.is-active,
+        &.is-hoverable:hover
+          .navbar-link
+            background-color: transparent
+      .navbar-dropdown
+        a.navbar-item
+          &:hover
+            background-color: $navbar-dropdown-item-hover-background-color
+            color: $navbar-dropdown-item-hover-color
+          &.is-active
+            background-color: $navbar-dropdown-item-active-background-color
+            color: $navbar-dropdown-item-active-color
+  .navbar-burger
+    display: none
+  .navbar-item,
+  .navbar-link
+    align-items: center
+    display: flex
+  .navbar-item
+    &.has-dropdown
+      align-items: stretch
+    &.is-active,
+    &.is-hoverable:hover
+      .navbar-dropdown
+        display: block
+        &.is-boxed
+          opacity: 1
+          pointer-events: auto
+          transform: translateY(0)
+  .navbar-link
+    &::after
+      +arrow($navbar-dropdown-arrow)
+      margin-top: -0.375em
+      right: 1.125em
+      top: 50%
+  .navbar-menu
+    flex-grow: 1
+    flex-shrink: 0
+  .navbar-start
+    justify-content: flex-start
+    margin-right: auto
+  .navbar-end
+    justify-content: flex-end
+    margin-left: auto
+  .navbar-dropdown
+    background-color: $navbar-dropdown-background-color
+    border-bottom-left-radius: $navbar-dropdown-radius
+    border-bottom-right-radius: $navbar-dropdown-radius
+    border-top: $navbar-dropdown-border-top
+    box-shadow: 0 8px 8px rgba($black, 0.1)
+    display: none
+    font-size: 0.875rem
+    left: 0
+    min-width: 100%
+    position: absolute
+    top: 100%
+    z-index: $navbar-dropdown-z
+    .navbar-item
+      padding: 0.375rem 1rem
+      white-space: nowrap
+    a.navbar-item
+      padding-right: 3rem
+      &:hover
+        background-color: $navbar-dropdown-item-hover-background-color
+        color: $navbar-dropdown-item-hover-color
+      &.is-active
+        background-color: $navbar-dropdown-item-active-background-color
+        color: $navbar-dropdown-item-active-color
+    &.is-boxed
+      border-radius: $navbar-dropdown-boxed-radius
+      border-top: none
+      box-shadow: $navbar-dropdown-boxed-shadow
+      display: block
+      opacity: 0
+      pointer-events: none
+      top: calc(100% + (#{$navbar-dropdown-offset}))
+      transform: translateY(-5px)
+      transition-duration: $speed
+      transition-property: opacity, transform
+    &.is-right
+      left: auto
+      right: 0
+  .navbar-divider
+    display: block
+  .container > .navbar
+    .navbar-brand
+      margin-left: -1rem
+    .navbar-menu
+      margin-right: -1rem
+  // Hover/Active states
+  a.navbar-item,
+  .navbar-link
+    &.is-active
+      color: $navbar-item-active-color
+    &.is-active:not(:hover)
+      background-color: $navbar-item-active-background-color
+  .navbar-item.has-dropdown
+    &:hover,
+    &.is-active
+      .navbar-link
+        background-color: $navbar-item-hover-background-color