respectre-jekyll-theme 0.1.0

data/_sass/spectre/_calendars.scss

@@ -0,0 +1,206 @@
+// Calendars
+.calendar {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: block;
+  min-width: 280px;
+  text-align: center;
+
+  .calendar-nav {
+    align-items: center;
+    background: $bg-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    display: flex;
+    font-size: $font-size-lg;
+    padding: $layout-spacing;
+  }
+
+  .calendar-header,
+  .calendar-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: $layout-spacing 0;
+
+    .calendar-date {
+      flex: 0 0 14.28%; // 7 calendar-items each row
+      max-width: 14.28%;
+    }
+  }
+
+  .calendar-header {
+    background: $bg-color;
+    border-bottom: $border-width solid $border-color;
+    color: $gray-color;
+    font-size: $font-size-sm;
+  }
+
+  .calendar-body {
+    color: $gray-color-dark;
+  }
+
+  .calendar-date {
+    border: 0;
+    padding: $unit-1;
+
+    .date-item {
+      @include control-transition();
+      appearance: none;
+      background: transparent;
+      border: $border-width solid transparent;
+      border-radius: 50%;
+      color: $gray-color-dark;
+      cursor: pointer;
+      font-size: $font-size-sm;
+      height: $unit-7;
+      line-height: $unit-5;
+      outline: none;
+      padding: $unit-h;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      vertical-align: middle;
+      white-space: nowrap;
+      width: $unit-7;
+
+      &.date-today {
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+      }
+
+      &:focus {
+        @include control-shadow();
+      }
+
+      &:focus,
+      &:hover {
+        background: $secondary-color-light;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+        text-decoration: none;
+      }
+      &:active,
+      &.active {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+
+      // Calendar badge support
+      &.badge {
+        &::after {
+          position: absolute;
+          top: 3px;
+          right: 3px;
+          transform: translate(50%, -50%);
+        }
+      }
+    }
+
+    &.disabled .date-item,
+    &.disabled .calendar-event,
+    .date-item:disabled,
+    .calendar-event:disabled {
+      cursor: default;
+      opacity: .25;
+      pointer-events: none;
+    }
+  }
+
+  .calendar-range {
+    position: relative;
+
+    &::before {
+      background: $secondary-color;
+      content: "";
+      height: $unit-7;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.range-start {
+      &::before {
+        left: 50%;
+      }
+    }
+    &.range-end {
+      &::before {
+        right: 50%;
+      }
+    }
+
+    .date-item {
+      color: $primary-color;
+    }
+  }
+
+  &.calendar-lg {
+    .calendar-body {
+      padding: 0;
+
+      .calendar-date {
+        border-bottom: $border-width solid $border-color;
+        border-right: $border-width solid $border-color;
+        display: flex;
+        flex-direction: column;
+        height: 5.5rem;
+        padding: 0;
+
+        &:nth-child(7n) {
+          border-right: 0;
+        }
+        &:nth-last-child(-n+7) {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .date-item {
+      align-self: flex-end;
+      height: $unit-7;
+      margin-right: $layout-spacing-sm;
+      margin-top: $layout-spacing-sm;
+    }
+
+    .calendar-range {
+      &::before {
+        top: 19px;
+      }
+      &.range-start {
+        &::before {
+          left: auto;
+          width: 19px;
+        }
+      }
+      &.range-end {
+        &::before {
+          right: 19px;
+        }
+      }
+    }
+
+    .calendar-events {
+      flex-grow: 1;
+      line-height: 1;
+      overflow-y: auto;
+      padding: $layout-spacing-sm;
+    }
+
+    .calendar-event {
+      background: $secondary-color;
+      border-radius: $border-radius;
+      color: $primary-color;
+      font-size: $font-size-sm;
+      display: block;
+      margin: $unit-h auto;
+      overflow: hidden;
+      padding: 3px 4px;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

data/_sass/spectre/_cards.scss

@@ -0,0 +1,39 @@
+// Cards
+.card {
+  background: $bg-color-light;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: $layout-spacing-lg;
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: $layout-spacing-lg;
+    }
+  }
+
+  .card-image {
+    padding-top: $layout-spacing-lg;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}

data/_sass/spectre/_carousels.scss

@@ -0,0 +1,124 @@
+// Carousels
+.carousel {
+  background: $bg-color;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .carousel-container {
+    height: 100%;
+    left: 0;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 56.25%;
+    }
+
+    .carousel-item {
+      animation: carousel-slideout 1s ease-in-out 1;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+      &:hover {
+        .item-prev,
+        .item-next {
+          opacity: 1;
+        }
+      }
+    }
+
+    .item-prev,
+    .item-next {
+      background: rgba($gray-color-light, .25);
+      border-color: rgba($gray-color-light, .5);
+      color: $gray-color-light;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transition: all .4s ease;
+      transform: translateY(-50%);
+      z-index: $zindex-2;
+    }
+    .item-prev {
+      left: 1rem;
+    }
+    .item-next {
+      right: 1rem;
+    }
+  }
+
+  .carousel-locator {
+    &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
+    &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
+    &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
+    &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
+      animation: carousel-slidein .75s ease-in-out 1;
+      opacity: 1;
+      z-index: $zindex-1;
+    }
+    &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
+    &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
+    &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
+    &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
+      color: $gray-color-light;
+    }
+  }
+
+  .carousel-nav {
+    bottom: $layout-spacing;
+    display: flex;
+    justify-content: center;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 10rem;
+    z-index: $zindex-2;
+
+    .nav-item {
+      color: rgba($gray-color-light, .5);
+      display: block;
+      flex: 1 0 auto;
+      height: $unit-8;
+      margin: $unit-1;
+      max-width: 2.5rem;
+      position: relative;
+
+      &::before {
+        background: currentColor;
+        content: "";
+        display: block;
+        height: $unit-h;
+        position: absolute;
+        top: .5rem;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@keyframes carousel-slidein {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}

data/_sass/spectre/_chips.scss

@@ -0,0 +1,26 @@
+// Chips
+.chip {
+  align-items: center;
+  background: $bg-color-dark;
+  border-radius: 5rem;
+  color: $gray-color-dark;
+  display: inline-flex;
+  font-size: 90%;
+  height: $unit-6;
+  line-height: $unit-4;
+  margin: $unit-h;
+  max-width: 100%;
+  padding: $unit-1 $unit-2;
+  text-decoration: none;
+  vertical-align: middle;
+
+  &.active {
+    background: $primary-color;
+    color: $light-color;
+  }
+
+  .avatar {
+    margin-left: -$unit-2;
+    margin-right: $unit-1;
+  }
+}

data/_sass/spectre/_codes.scss

@@ -0,0 +1,31 @@
+// Codes
+code {
+  @include label-base();
+  @include label-variant($code-color, lighten($code-color, 33%));
+  font-size: 85%;
+}
+
+.code {
+  border-radius: $border-radius;
+  color: $body-font-color;
+  position: relative;
+
+  &::before {
+    color: $gray-color;
+    content: attr(data-lang);
+    font-size: $font-size-sm;
+    position: absolute;
+    right: $layout-spacing;
+    top: $unit-h;
+  }
+
+  code {
+    background: $bg-color;
+    color: inherit;
+    display: block;
+    line-height: 1.5;
+    overflow-x: auto;
+    padding: 1rem;
+    width: 100%;
+  }
+}

data/_sass/spectre/_comparison-sliders.scss

@@ -0,0 +1,114 @@
+// Image comparison slider
+// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .comparison-before,
+  .comparison-after {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+
+    img {
+      height: 100%;
+      object-fit: none;
+      object-position: left center;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
+  .comparison-before {
+    width: 100%;
+    z-index: 1;
+
+    .comparison-label {
+      right: $unit-4;
+    }
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+    z-index: 2;
+
+    &::before {
+      background: transparent;
+      content: "";
+      cursor: default;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: $unit-4;
+      top: 0;
+      z-index: $zindex-0;
+    }
+
+    &::after {
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 -5px, 0 5px;
+      color: $light-color;
+      content: "";
+      height: 3px;
+      position: absolute;
+      right: $unit-2;
+      top: 50%;
+      transform: translate(50%, -50%);
+      width: 3px;
+    }
+
+    .comparison-label {
+      left: $unit-4;
+    }
+  }
+
+  .comparison-resizer {
+    animation: first-run 1.5s 1 ease-in-out;
+    cursor: ew-resize;
+    height: $unit-4;
+    left: 0;
+    max-width: 100%;
+    min-width: $unit-4;
+    opacity: 0;
+    outline: none;
+    position: relative;
+    resize: horizontal;
+    top: 50%;
+    transform: translateY(-50%) scaleY(30);
+    width: 0;
+  }
+
+  .comparison-label {
+    background: rgba($dark-color, .5);
+    bottom: $unit-4;
+    color: $light-color;
+    padding: $unit-1 $unit-2;
+    position: absolute;
+    user-select: none;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: $unit-12;
+  }
+  50% {
+    width: $unit-4;
+  }
+  75% {
+    width: $unit-6;
+  }
+  100% {
+    width: 0;
+  }
+}