jekyll-theme-morph 0.0.1

data/_sass/morph/_colors.scss

@@ -0,0 +1,42 @@
+@import "variables";
+
+$grays: (
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+) !default;
+
+$colors: (
+  "base": $color-base,
+  "primary-light": $color-primary-light,
+  "primary": $color-primary,
+  "primary-dark": $color-primary-dark,
+  "secondary-light": $color-secondary-light,
+  "secondary": $color-secondary,
+  "secondary-dark": $color-secondary-dark,
+  "link-light": $color-link-light,
+  "link": $color-link,
+  "link-dark": $color-link-dark,
+  "rang1": $color-rang1,
+  "rang2": $color-rang2,
+  "logo": $color-logo
+) !default;
+
+
+// .color-gray-[level]
+// .bg-gray-[level]
+@each $key, $value in $grays {
+  .color-gray-#{$key} {color: $value}
+  .bg-gray-#{$key} {background-color: $value}
+}
+
+@each $key, $value in $colors {
+  .color-#{$key} {color: $value}
+  .bg-#{$key} {background-color: $value}
+}

data/_sass/morph/_functions.scss

@@ -0,0 +1,57 @@
+@import "variables";
+
+// Functions
+@mixin media-xs() {
+  @media
+    (max-width: map-get($grid-breakpoints, 'xs'))
+  {
+    @content;
+  }
+}
+
+@mixin media-sm() {
+  @media
+    (max-width: map-get($grid-breakpoints, 'sm'))
+  {
+    @content;
+  }
+}
+
+@mixin media-md() {
+  @media
+    (max-width: map-get($grid-breakpoints, 'md'))
+  {
+    @content;
+  }
+}
+
+@mixin media($utilities, $infix: '') {
+  @each $utility in map-values($utilities) {
+    $p: map-get($utility, "property");
+    $c: map-get($utility, "class");
+    $values: map-get($utility, "values");
+
+    @if type-of($values) == "map" {
+      @each $k, $v in $values {
+        .#{$c}#{$infix}-#{$k} {
+          #{$p}: $v
+        }
+      }
+    }
+    @else {
+      @each $v in $values {
+        .#{$c}#{$infix}-#{$v} {
+          #{$p}: $v
+        }
+      }
+    }
+  }
+}
+
+@function tint-color($color, $weight) {
+  @return mix(white, $color, $weight);
+}
+
+@function shade-color($color, $weight) {
+  @return mix(black, $color, $weight);
+}

data/_sass/morph/_utilities.scss

@@ -0,0 +1,196 @@
+@import "variables";
+@import "functions";
+
+$utilities: () !default;
+
+$utilities: map-merge(
+  (
+    "align": (
+      property: vertical-align,
+      class: align,
+      values: baseline top middle bottom text-bottom text-top
+    ),
+    "float": (
+      property: float,
+      class: float,
+      values: (
+        start: left,
+        end: right,
+        none: none,
+      )
+    ),
+    "overflow": (
+      property: overflow,
+      class: overflow,
+      values: auto hidden visible scroll,
+    ),
+    "display": (
+      property: display,
+      class: d,
+      values: inline inline-block block grid table table-row table-cell flex inline-flex none
+    ),
+    "flex": (
+      property: flex,
+      class: flex,
+      values: 1 auto none
+    ),
+    "flex-grow": (
+      property: flex-grow,
+      class: flex,
+      values: (
+        grow-0: 0,
+        grow-1: 1,
+      )
+    ),
+    "flex-direction": (
+      property: flex-direction,
+      class: flex,
+      values: row column row-reverse column-reverse
+    ),
+    "justify-content": (
+      property: justify-content,
+      class: justify-content,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        between: space-between,
+        around: space-around,
+        evenly: space-evenly,
+      )
+    ),
+    "align-items": (
+      property: align-items,
+      class: align-items,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      )
+    ),
+    "align-content": (
+      property: align-content,
+      class: align-content,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        between: space-between,
+        around: space-around,
+        stretch: stretch,
+      )
+    ),
+    "align-self": (
+      property: align-self,
+      class: align-self,
+      values: (
+        auto: auto,
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      )
+    ),
+    "font-weight": (
+      property: font-weight,
+      class: fw,
+      values: (
+        light: $font-weight-light,
+        lighter: $font-weight-lighter,
+        normal: $font-weight-normal,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder
+      )
+    ),
+    "text-align": (
+      property: text-align,
+      class: text,
+      values: (
+        start: left,
+        end: right,
+        center: center,
+      )
+    ),
+    "text-decoration": (
+      property: text-decoration,
+      class: text-decoration,
+      values: none underline line-through
+    ),
+    "user-select": (
+      property: user-select,
+      class: user-select,
+      values: all auto none
+    ),
+    "margin": (
+      property: margin,
+      class: m,
+      values: (auto: auto)
+    ),
+    "white-space": (
+      property: white-space,
+      class: white-space,
+      values: normal nowrap pre pre-wrap pre-line break-spaces
+    ),
+    "cursor": (
+      property: cursor,
+      class: cursor,
+      values: default pointer auto text crosshair move help wait
+    ),
+    "width": (
+      property: width,
+      class: w,
+      values: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%
+      )
+    ),
+    "height": (
+      property: height,
+      class: h,
+      values: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%
+      )
+    ),
+    "list-style-type": (
+      property: list-style-type,
+      class: list-style,
+      values: none disc circle square decimal
+    ),
+    "position": (
+      property: position,
+      class: position,
+      values: absolute fixed relative static sticky inherit initial
+    ),
+  ),
+  $utilities
+);
+
+// Build utilities
+@include media($utilities);
+@each $key in map-keys($grid-breakpoints) {
+  @if $key == 'xs' {
+    @include media-xs() {
+      @include media($utilities, -#{$key})
+    }
+  }
+
+  @if $key == 'sm' {
+    @include media-sm() {
+      @include media($utilities, -#{$key})
+    }
+  }
+
+  @if $key == 'md' {
+    @include media-md() {
+      @include media($utilities, -#{$key})
+    }
+  }
+}

data/_sass/morph/_variables.scss

@@ -0,0 +1,50 @@
+// gray colors
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+// skin colors
+$color-base: white !default;
+
+$color-primary-light: #f8f8f8 !default;
+$color-primary: #f4f4f4 !default;
+$color-primary-dark: #e5e5e5 !default;
+
+$color-secondary-light: #7a7a7a !default;
+$color-secondary: #515151 !default;
+$color-secondary-dark: #303030 !default;
+
+$color-link-light: #729fcf !default;
+$color-link: #3465a4 !default;
+$color-link-dark: #204a87 !default;
+
+$color-rang1: #e9b96e !default;
+$color-rang2: #75507b !default;
+$color-logo: $color-link-dark !default;
+
+// Fonts
+$serif-primary: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,"PT Sans",PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif !default;
+$sans-serif: $serif-primary !default;
+$monospaced: Source Code Pro, Courier New, Courier, monospace, sans-serif !default;
+
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+// Contents
+$content-max-width: 1140px;
+$grid-breakpoints: (
+  'xs': 540px,
+  'sm': 720px,
+  'md': 960px
+) !default;

data/_sass/morph/components/_catalogue.scss

@@ -0,0 +1,68 @@
+@import "../variables";
+@import "../functions";
+
+.component {
+  &.catalogue {
+    margin-top: 3rem;
+    width: 85%;
+
+    header.header {
+      border-bottom: 1px solid $color-primary-dark;
+
+      .header-text {
+        padding: 1em 0;
+      }
+    }
+
+    ul.body {
+      padding: 1rem;
+      overflow: scroll;
+      white-space: nowrap;
+      border-left: 1px solid $color-primary-dark;
+      @include media-xs() {
+        max-height: 25rem;
+      }
+
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+
+      li {
+        list-style-type: none;
+        padding: 4px 0;
+
+        &.h2, &.h3, &.h4, &.h5, &.h6 {
+          &::before {
+            color: $color-primary;
+          }
+        }
+
+        &.h2::before {
+          content: '-- '
+        }
+
+        &.h3::before {
+          content: '---- '
+        }
+
+        &.h4::before {
+          content: '------ '
+        }
+
+        &.h5::before {
+          content: '-------- '
+        }
+
+        &.h6::before {
+          content: '---------- '
+        }
+
+        a {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}

data/_sass/morph/components/_footer.sass

@@ -0,0 +1,9 @@
+@import "../variables"
+
+footer.footer
+  padding: 1rem 0
+  .content
+    padding: 1rem
+    font-size: .9rem
+    line-height: 1.5rem
+    border-top: 1px dashed $color-primary-dark

data/_sass/morph/components/_header.scss

@@ -0,0 +1,80 @@
+@import "../functions";
+@import "../variables";
+
+.header {
+  .border-bottom {
+    border-bottom: 1px solid $color-primary-dark;
+  }
+
+  .logo {
+    font-size: 28px;
+    height: 115px;
+
+    a {
+      font-family: Arial, PingFangSC-Regular, "Microsoft YaHei-Regular", "Microsoft YaHei", serif;
+      color: $color-logo;
+
+      &:hover {
+        color: tint-color($color-logo, 15%);
+      }
+    }
+  }
+
+  .search-box {
+    margin-left: 30px;
+    .search {
+      position: relative;
+      @include media-md() {width: 50%}
+      @include media-sm() {width: 65%}
+      @include media-xs() {width: 75%}
+      width: 35%;
+    }
+
+    $search-box-radius: 2px;
+    $search-box-border-color: $color-primary-dark;
+    input {
+      font-size: 13px;
+      padding: 8px 10px;
+      -webkit-appearance: none;
+      outline: none;
+      border: 1px solid $search-box-border-color;
+      border-right: 0;
+      border-top-left-radius: $search-box-radius;
+      border-bottom-left-radius: $search-box-radius;
+      color: $color-secondary;
+      background-color: $color-base;
+    }
+
+    button.search-button {
+      border: 1px solid $search-box-border-color;
+      border-left: 0;
+      border-top-right-radius: $search-box-radius;
+      border-bottom-right-radius: $search-box-radius;
+      padding: 6px 8px;
+      margin-left: -5px;
+      color: $color-secondary-light;
+    }
+  }
+
+  .nav-bar {
+    ul {
+      line-height: 250%;
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+
+      li {
+        list-style-type: none;
+        margin-right: 25px;
+
+        a {
+          color: $color-secondary;
+          font-size: 14px;
+          padding: 4px 6px;
+        }
+      }
+    }
+  }
+}