jekyll-theme-twail 1.0.0

data/_sass/_variables.scss

@@ -0,0 +1,144 @@
+/*
+   Typography
+   ========================================================================== */
+$font-main: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', Arial,
+  sans-serif !default;
+$font-codeblock: Monaco, Consolas, 'Lucida Console', monospace !default;
+
+$font-size-1: 1.75em !default;
+$font-size-2: 1.5em !default;
+$font-size-3: 1.25em !default;
+$font-size-4: 1em !default;
+$font-size-5: 0.875em !default;
+$font-size-6: 0.85em !default;
+$font-size-7: 0.75em !default;
+
+/*
+   Colors
+   ========================================================================== */
+$gray: #7a8288 !default;
+$dark-gray: mix(#000, $gray, 50%) !default;
+$darker-gray: mix(#000, $gray, 60%) !default;
+$light-gray: mix(#fff, $gray, 50%) !default;
+$lighter-gray: mix(#fff, $gray, 90%) !default;
+
+$color-body-text: #6e7173 !default;
+$color-body-accent-text: #3d4144 !default;
+$color-body-background: #f5f5fa !default;
+$color-body-tag-text: #3d4144 !default;
+$color-body-tag-background: #fff !default;
+
+$color-card-text: #3d4144 !default;
+$color-card-sub-text: #bababa !default;
+$color-card-accent-text: #000 !default;
+$color-card-background: #fff !default;
+$color-selected-card-background: #eaeaea !default;
+$color-card-tag-text: #fff !default;
+$color-card-tag-background: #2c3e50 !default;
+
+/* Github-markdown-css colors */
+$color-prettylights-syntax-comment: #6e7781 !default;
+$color-prettylights-syntax-constant: #0550ae !default;
+$color-prettylights-syntax-entity: #8250df !default;
+$color-prettylights-syntax-storage-modifier-import: #24292f !default;
+$color-prettylights-syntax-entity-tag: #116329 !default;
+$color-prettylights-syntax-keyword: #cf222e !default;
+$color-prettylights-syntax-string: #0a3069 !default;
+$color-prettylights-syntax-variable: #953800 !default;
+$color-prettylights-syntax-brackethighlighter-unmatched: #82071e !default;
+$color-prettylights-syntax-invalid-illegal-text: #f6f8fa !default;
+$color-prettylights-syntax-invalid-illegal-bg: #82071e !default;
+$color-prettylights-syntax-carriage-return-text: #f6f8fa !default;
+$color-prettylights-syntax-carriage-return-bg: #cf222e !default;
+$color-prettylights-syntax-string-regexp: #116329 !default;
+$color-prettylights-syntax-markup-list: #3b2300 !default;
+$color-prettylights-syntax-markup-heading: #0550ae !default;
+$color-prettylights-syntax-markup-italic: #24292f !default;
+$color-prettylights-syntax-markup-bold: #24292f !default;
+$color-prettylights-syntax-markup-deleted-text: #82071e !default;
+$color-prettylights-syntax-markup-deleted-bg: #ffebe9 !default;
+$color-prettylights-syntax-markup-inserted-text: #116329 !default;
+$color-prettylights-syntax-markup-inserted-bg: #dafbe1 !default;
+$color-prettylights-syntax-markup-changed-text: #953800 !default;
+$color-prettylights-syntax-markup-changed-bg: #ffd8b5 !default;
+$color-prettylights-syntax-markup-ignored-text: #eaeef2 !default;
+$color-prettylights-syntax-markup-ignored-bg: #0550ae !default;
+$color-prettylights-syntax-meta-diff-range: #8250df !default;
+$color-prettylights-syntax-brackethighlighter-angle: #57606a !default;
+$color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f !default;
+$color-prettylights-syntax-constant-other-reference-link: #0a3069 !default;
+$color-fg-default: #24292f !default;
+$color-fg-muted: #57606a !default;
+$color-fg-subtle: #6e7781 !default;
+$color-canvas-default: #ffffff !default;
+$color-canvas-subtle: #f6f8fa !default;
+$color-border-default: #d0d7de !default;
+$color-border-muted: hsla(210, 18%, 87%, 1) !default;
+$color-neutral-muted: rgba(175, 184, 193, 0.2) !default;
+$color-accent-fg: #0969da !default;
+$color-accent-emphasis: #0969da !default;
+$color-attention-subtle: #fff8c5 !default;
+$color-danger-fg: #cf222e !default;
+
+/* Notices and buttons */
+$color-notice-default: $light-gray !default;
+$color-notice-primary: #6f777d !default;
+$color-notice-info: #3b9cba !default;
+$color-notice-success: #3fa63f !default;
+$color-notice-warning: #d67f05 !default;
+$color-notice-danger: #ee5f5b !default;
+$color-info: #3b9cba !default;
+$color-facebook: #3b5998 !default;
+$color-twitter: #55acee !default;
+$color-linkedin: #007bb6 !default;
+$notice-background-mix: 80% !default;
+$code-notice-background-mix: 90% !default;
+
+/* Form */
+$form-background-color: $lighter-gray !default;
+
+/* Code */
+$code-background-color: #f9f2f4 !default;
+$code-color: #c7254e !default;
+
+/* Codeblock syntax highlight */
+$base00: #263238 !default;
+$base01: #2e3c43 !default;
+$base02: #314549 !default;
+$base03: #546e7a !default;
+$base04: #b2ccd6 !default;
+$base05: #eeffff !default;
+$base06: #eeffff !default;
+$base07: #ffffff !default;
+$base08: #f07178 !default;
+$base09: #f78c6c !default;
+$base0a: #ffcb6b !default;
+$base0b: #c3e88d !default;
+$base0c: #89ddff !default;
+$base0d: #82aaff !default;
+$base0e: #c792ea !default;
+$base0f: #ff5370 !default;
+
+/* YIQ color contrast */
+$yiq-contrasted-dark-default: $dark-gray !default;
+$yiq-contrasted-light-default: #fff !default;
+$yiq-contrasted-threshold: 175 !default;
+$yiq-debug: false !default;
+
+/*
+   Box shadows
+   ========================================================================== */
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !default;
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !default;
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !default;
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !default;
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !default;
+$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) !default;
+
+/*
+   Breakpoints
+   ========================================================================== */
+$desktop-breakpoint: 1020px;
+$tablet-breakpoint: 768px;
+$mobile-breakpoint: 468px;

data/_sass/components/_comments.scss

@@ -0,0 +1,10 @@
+.comments-container {
+  background-color: $color-card-background;
+  border-radius: 10px;
+  box-shadow: $shadow-lg;
+  padding: 16px 24px;
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    padding: 16px;
+  }
+}

data/_sass/components/_footer.scss

@@ -0,0 +1,20 @@
+.footer {
+  margin-top: 48px;
+
+  a {
+    color: inherit;
+  }
+
+  .copyright {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: $color-body-accent-text;
+    margin-bottom: 5px;
+  }
+
+  .powerby {
+    font-size: 0.62rem;
+    font-weight: 400;
+    color: $color-body-text;
+  }
+}

data/_sass/components/_pager.scss

@@ -0,0 +1,39 @@
+.pager {
+  width: 100%;
+  display: flex;
+  background-color: $color-card-background;
+  box-shadow: $shadow-md;
+  border-radius: 10px;
+  overflow: hidden;
+  list-style: none;
+  margin-top: 36px;
+
+  &__item {
+    flex: 1 1 0;
+    max-width: 20%;
+    color: $color-card-text;
+    text-align: center;
+    transition: background-color 0.2s;
+
+    &:not(.disabled):hover {
+      background-color: $color-selected-card-background;
+    }
+
+    &.selected {
+      color: $color-card-accent-text;
+      background-color: $color-selected-card-background;
+    }
+
+    &.disabled {
+      cursor: default;
+    }
+  }
+
+  &__link {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    padding: 16px 0px;
+  }
+}

data/_sass/components/_postlist.scss

@@ -0,0 +1,76 @@
+.postlist {
+  .post {
+    width: 100%;
+    margin-bottom: 16px;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: $color-card-background;
+    box-shadow: $shadow-md;
+    transition: box-shadow 0.2s, transform 0.2s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: $shadow-xl;
+    }
+
+    &-cover {
+      width: 100%;
+      img {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+      }
+    }
+
+    &-details {
+      width: 100%;
+      padding: 18px 24px 24px 24px;
+    }
+
+    &-tags {
+      display: flex;
+      list-style: none;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
+
+    &-tag {
+      font-size: 0.68rem;
+      font-weight: 400;
+      padding: 6px 12px;
+      border-radius: 6px;
+      color: $color-card-tag-text;
+      background-color: $color-card-tag-background;
+      box-shadow: $shadow;
+      margin-right: 8px;
+      margin-bottom: 6px;
+    }
+
+    &-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: $color-card-accent-text;
+      margin-bottom: 12px;
+    }
+
+    &-description {
+      font-size: 0.9rem;
+      font-weight: 400;
+      color: $color-card-text;
+      margin-bottom: 14px;
+    }
+
+    &-time {
+      color: $color-card-sub-text;
+      font-weight: 400;
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+
+      i {
+        font-size: 1.02rem;
+        margin-right: 8px;
+      }
+    }
+  }
+}

data/_sass/components/_profile.scss

@@ -0,0 +1,71 @@
+.profile {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 36px;
+
+  @media screen and (max-width: $desktop-breakpoint) {
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  &__avatar {
+    width: 120px;
+    height: 120px;
+    margin: 0 0 12px 0;
+    flex-shrink: 0;
+
+    @media screen and (max-width: $desktop-breakpoint) {
+      margin: 0 16px 0 0;
+    }
+
+    @media screen and (max-width: $mobile-breakpoint) {
+      width: 98px;
+      height: 98px;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__name {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: $color-body-accent-text;
+  }
+
+  &__description {
+    font-size: 0.8rem;
+    font-weight: 400;
+    color: $color-body-text;
+    margin: 8px 0;
+  }
+
+  &__socials {
+    list-style: none;
+    display: flex;
+    color: $color-body-text;
+
+    li {
+      margin-right: 8px;
+      transition: 0.2s;
+
+      &:hover {
+        filter: brightness(0);
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+
+        i {
+          font-size: 1.4rem;
+        }
+      }
+    }
+  }
+}

data/_sass/components/_tagnav.scss

@@ -0,0 +1,46 @@
+.tagnav {
+  @media screen and (max-width: $desktop-breakpoint) {
+    padding: 12px;
+  }
+
+  &__title {
+    display: flex;
+    font-weight: 600;
+    align-items: flex-end;
+    color: $color-body-accent-text;
+    margin-bottom: 8px;
+
+    i {
+      font-size: 1.4rem;
+      margin-right: 4px;
+    }
+
+    span {
+      font-size: 1rem;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    font-size: 0.68rem;
+    color: $color-body-tag-text;
+    background: $color-body-tag-background;
+    padding: 8px 20px;
+    margin-bottom: 8px;
+    margin-right: 4px;
+    text-decoration: none;
+    border-radius: 8px;
+    white-space: nowrap;
+    box-shadow: $shadow;
+    transition: box-shadow 0.2s, transform 0.2s;
+
+    &:hover {
+      box-shadow: $shadow-lg;
+      transform: translateY(-1px);
+    }
+  }
+}

data/_sass/main.scss

@@ -0,0 +1,56 @@
+@import '_variables';
+
+@import 'vendors/mixins';
+@import 'vendors/syntax';
+@import 'vendors/notices';
+@import 'vendors/markdown-body';
+@import 'vendors/forms';
+@import 'vendors/buttons';
+
+@import 'components/profile';
+@import 'components/tagnav';
+@import 'components/postlist';
+@import 'components/pager';
+@import 'components/footer';
+@import 'components/comments';
+
+@import 'pages/deafult';
+@import 'pages/post';
+
+@import 'custom';
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+html {
+  font-size: 20px;
+
+  @media screen and (max-width: $tablet-breakpoint) {
+    font-size: 18px;
+  }
+}
+
+body {
+  font-family: $font-main;
+  min-width: 360px;
+  background-color: $color-body-background;
+}
+
+.main-container {
+  padding: 32px;
+
+  @media screen and (max-width: $tablet-breakpoint) {
+    padding: 24px;
+  }
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    padding: 16px;
+  }
+}

data/_sass/pages/_deafult.scss

@@ -0,0 +1,41 @@
+.main-container {
+  display: flex;
+  flex-direction: row;
+  max-width: 1180px;
+  margin: 0 auto;
+
+  @media screen and (max-width: $desktop-breakpoint) {
+    flex-direction: column;
+  }
+
+  &__aside {
+    width: 280px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    word-break: break-all;
+    margin: 0 48px 0 0;
+
+    @media screen and (max-width: $desktop-breakpoint) {
+      width: 100%;
+      margin: 0 0 16px 0;
+    }
+  }
+
+  .content {
+    width: 0;
+    flex-grow: 1;
+
+    @media screen and (max-width: $desktop-breakpoint) {
+      width: 100%;
+    }
+  }
+}
+
+.section-title {
+  display: flex;
+  align-items: flex-end;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: $color-body-accent-text;
+  margin-bottom: 16px;
+}

data/_sass/pages/_post.scss

@@ -0,0 +1,87 @@
+.main-container.post .tagnav {
+  @media screen and (max-width: $desktop-breakpoint) {
+    display: none;
+  }
+}
+
+.post-container {
+  background-color: $color-card-background;
+  border-radius: 10px;
+  box-shadow: $shadow-md;
+  overflow: hidden;
+  width: 100%;
+  margin-bottom: 16px;
+
+  .post-cover {
+    width: 100%;
+
+    img {
+      width: 100%;
+      max-height: 28vh;
+      object-fit: cover;
+    }
+  }
+
+  .post-summary {
+    padding: 24px 32px;
+
+    @media screen and (max-width: $mobile-breakpoint) {
+      padding: 24px;
+    }
+
+    .post-tags {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      margin-bottom: 12px;
+
+      .post-tag {
+        font-size: 0.68rem;
+        font-weight: 400;
+        padding: 6px 12px;
+        border-radius: 6px;
+        color: #fff;
+        background-color: #2c3e50;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+        margin-right: 8px;
+        margin-bottom: 6px;
+      }
+    }
+
+    .post-title {
+      color: $color-card-accent-text;
+      font-size: 1.32rem;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .post-description {
+      color: $color-card-text;
+      font-size: 0.92rem;
+      font-weight: 400;
+      margin-bottom: 8px;
+    }
+
+    .post-time {
+      color: $color-card-sub-text;
+      font-weight: 400;
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+
+      i {
+        font-size: 1.02rem;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .post-content {
+    padding: 24px;
+    color: $color-card-text;
+
+    @media screen and (max-width: $mobile-breakpoint) {
+      padding: 24px 16px;
+    }
+  }
+}

data/_sass/vendors/_buttons.scss

@@ -0,0 +1,95 @@
+.markdown-body {
+  /* ==========================================================================
+   BUTTONS
+   ========================================================================== */
+
+  /*
+   Default button
+   ========================================================================== */
+
+  .btn {
+    /* default */
+    display: inline-block;
+    margin-bottom: 0.25em;
+    padding: 0.5em 1em;
+    font-size: $font-size-6;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    border-width: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    .icon {
+      margin-right: 0.5em;
+    }
+
+    .icon + .hidden {
+      margin-left: -0.5em; /* override for hidden text*/
+    }
+
+    /* button colors */
+    $buttoncolors: (primary, $color-notice-primary), (inverse, #fff), (light-outline, transparent),
+      (success, $color-notice-success), (warning, $color-notice-warning), (danger, $color-notice-danger),
+      (info, $color-info), (facebook, $color-facebook), (twitter, $color-twitter), (linkedin, $color-linkedin);
+
+    @each $buttoncolor, $color in $buttoncolors {
+      &--#{$buttoncolor} {
+        @include yiq-contrasted($color);
+        @if ($buttoncolor == inverse) {
+          border: 1px solid $color-border-default;
+        }
+        @if ($buttoncolor == light-outline) {
+          border: 1px solid #fff;
+        }
+
+        &:visited {
+          @include yiq-contrasted($color);
+        }
+
+        &:hover {
+          @include yiq-contrasted(mix(#000, $color, 20%));
+        }
+      }
+    }
+
+    /* fills width of parent container */
+    &--block {
+      display: block;
+      width: 100%;
+
+      + .btn--block {
+        margin-top: 0.25em;
+      }
+    }
+
+    /* disabled */
+    &--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+      filter: alpha(opacity=65);
+      box-shadow: none;
+      opacity: 0.65;
+    }
+
+    /* extra large button */
+    &--x-large {
+      font-size: $font-size-3;
+    }
+
+    /* large button */
+    &--large {
+      font-size: $font-size-4;
+    }
+
+    /* small button */
+    &--small {
+      font-size: $font-size-7;
+    }
+  }
+}