jekyll-theme-so-simple 3.0.0

data/_sass/so-simple/_functions.scss

@@ -0,0 +1,4 @@
+@import "functions/color";
+@import "functions/em";
+@import "functions/fluid-type";
+@import "functions/yiq";

data/_sass/so-simple/_global.scss

@@ -0,0 +1,393 @@
+/* ==========================================================================
+   Site-wide
+   ========================================================================== */
+
+.skip-links {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+#menu-toggle {
+  display: block;
+  margin: 0;
+  padding: 0.25em 0.75em 0.5em;
+  color: $nav-color;
+  background-color: $nav-background-color;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-align: center;
+
+  @include breakpoint($medium) {
+    display: none;
+  }
+}
+
+.site-nav {
+  display: none;
+  margin-bottom: 1em;
+  text-align: center;
+
+  ul {
+    display: block;
+    margin: 0;
+    padding: 0.25em 0.75em;
+    list-style: none;
+    color: $nav-color;
+    background-color: $nav-background-color;
+    border-radius: 0 0 (2 * $border-radius) (2 * $border-radius);
+
+    @include breakpoint($medium) {
+      display: inline-block;
+    }
+  }
+
+  li {
+    display: inline-block;
+    font-size: 0.75em;
+  }
+
+  a {
+    display: block;
+    padding: 0.5em 0.75em;
+    color: $nav-color;
+    text-transform: uppercase;
+    text-decoration: none;
+    border: 1px solid $nav-background-color;
+    border-radius: $border-radius;
+
+    &:hover {
+      border-color: $nav-color;
+    }
+  }
+
+  @include breakpoint($medium) {
+    display: block;
+  }
+
+  &.js-menu-is-open {
+    display: block;
+    -webkit-animation-name: initial;
+    animation-name: initial;
+  }
+}
+
+.masthead {
+  @include clearfix;
+  margin-bottom: 3em;
+  text-align: center;
+}
+
+.site-title {
+  margin: 0.5em 0 0;
+  padding: 0;
+  @include fluid-type($min-vw, $max-vw, $h2-min, $h2-max);
+
+  a {
+    color: $text-color;
+    text-decoration: none;
+  }
+}
+
+.site-description {
+  margin-bottom: 1em;
+  font-family: $description-font-family;
+  @include fluid-type($min-vw, $max-vw, $h5-min, $h5-max);
+  font-weight: 400;
+  font-style: italic;
+}
+
+.site-logo {
+  display: inline-block;
+  position: relative;
+  z-index: 10;
+}
+
+.site-logo-img {
+  width: $site-logo-width;
+  height: $site-logo-height;
+  border: 5px solid $background-color;
+  border-radius: $site-logo-width;
+
+  @include breakpoint($medium) {
+    width: 1.5 * $site-logo-width;
+    height: 1.5 * $site-logo-width;
+    border-radius: 1.5 * $site-logo-width;
+  }
+
+  @include breakpoint($large) {
+    width: 2 * $site-logo-width;
+    height: 2 * $site-logo-width;
+    border-radius: 2 * $site-logo-width;
+  }
+}
+
+.site-footer {
+  @include clearfix();
+  margin: 2em 0;
+  padding: 2em 0;
+  text-align: center;
+  border-top: 1px solid $border-color;
+
+  .social-icons {
+    margin-bottom: 0.5em;
+  }
+
+  .social-icon {
+    display: inline-block;
+    padding: 0 0.25em;
+  }
+}
+
+.copyright {
+  color: lighten($text-color, 35%);
+  font-size: 0.75em;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    color: lighten($text-color, 35%);
+  }
+}
+
+.footnotes {
+  margin: 2rem 0;
+  padding-top: 1rem;
+  border-top: 1px solid $border-color;
+  font-size: 80%;
+}
+
+.more-link {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.back-to-top {
+  display: block;
+  color: lighten($text-color, 50%);
+  font-size: 0.75em;
+  text-transform: uppercase;
+  text-align: right;
+  text-decoration: none;
+}
+
+.taxonomy-section {
+  margin-bottom: 2em;
+  padding-bottom: 1em;
+
+  &:not(:last-child) {
+    border-bottom: solid 1px $border-color;
+  }
+
+  + .taxonomy-section {
+    margin-top: 2em;
+  }
+}
+
+.taxonomy-title {
+  @include fluid-type($min-vw, $max-vw, 28px, 32px);
+  margin-bottom: 0.5em;
+  color: lighten($text-color, 60%);
+  font-family: $base-font-family;
+}
+
+.taxonomy-count {
+  color: lighten($text-color, 50%);
+}
+
+.taxonomy-index {
+  display: grid;
+  grid-column-gap: 2em;
+  grid-template-columns: repeat(2, 1fr);
+  margin: 0;
+  padding: 0;
+  font-family: $base-font-family;
+  font-size: 0.9em;
+  list-style: none;
+
+  @include breakpoint($large) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  a {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 0.25em 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    color: inherit;
+    text-decoration: none;
+    border-bottom: 1px solid $border-color;
+
+    &:hover {
+      color: $accent-color;
+    }
+  }
+
+  + .taxonomy-section {
+    margin-top: 3em;
+  }
+}
+
+.pagination {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  grid-column: 1 / -1;
+  margin: 2em 0;
+  width: 100%;
+
+  ul {
+    margin: 0 auto;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  li {
+    display: block;
+    float: left;
+    margin-left: -1px;
+
+    a {
+      display: block;
+      margin-bottom: 0.25em;
+      padding: 0.5em 1em;
+      color: mix(#000, $border-color, 25%);
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.5;
+      text-align: center;
+      text-decoration: none;
+      border: 1px solid $border-color;
+      border-radius: 0;
+
+      &.current,
+      &.current.disabled {
+        @include yiq-contrasted(mix(#000, $border-color, 25%));
+      }
+
+      &.disabled {
+        color: $border-color;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
+    }
+
+    &:first-child {
+      margin-left: 0;
+
+      a {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      a {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}
+
+.search-input {
+  margin-bottom: 2em;
+  padding: 0.5em;
+  width: 100%;
+  font-size: 0.9em;
+  border: 2px solid $border-color;
+  border-radius: $border-radius;
+}
+
+.toc-wrapper {
+  display: inline-block;
+  margin-bottom: 1.5em;
+  border: 1px solid (mix(#fff, $border-color, 25%));
+  border-radius: $border-radius;
+
+  h2 {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: $base05;
+    background-color: $base00;
+    font-family: $base-font-family;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    .toc-toggle-icon {
+      margin-left: 1rem;
+      -webkit-transition: -webkit-transform 350ms ease;
+      transition: -webkit-transform 350ms ease;
+      transition: transform 350ms ease;
+      transition: transform 350ms ease, -webkit-transform 350ms ease;
+    }
+
+    &.js-toc-is-open {
+      .toc-toggle-icon {
+        -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  #markdown-toc {
+    display: none;
+    height: 0;
+    margin-bottom: 0;
+    padding-left: 2rem;
+    overflow: hidden;
+    color: $base05;
+    font-size: 0.9rem;
+    -webkit-transition: height 350ms ease;
+    transition: height 350ms ease;
+
+    &.js-toc-is-open {
+      display: block;
+      height: auto;
+    }
+  }
+
+  li {
+    padding: 0.3em 0;
+    font-family: $base-font-family;
+
+    a {
+      display: inline-block;
+      color: inherit;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-decoration: none;
+      border-bottom: 1px dotted transparent;
+
+      &:hover,
+      &:focus {
+        border-bottom: 1px dotted $border-color;
+      }
+    }
+
+    ol {
+      padding-left: 0.5rem;
+      list-style-type: lower-roman;
+      background-color: $background-color;
+    }
+  }
+}

data/_sass/so-simple/_icons.scss

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   Icons
+   ========================================================================== */
+
+.icon {
+  display: inline-block;
+  position: relative;
+  top: -0.05em; /* fine-tune alignment */
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  vertical-align: middle;
+  fill: currentColor;
+
+  $icons: (
+     (bitbucket, #205081),
+     (codepen, #000),
+     (dribbble, #ea4c89),
+     (email, #000),
+     (facebook, #3b5998),
+     (flickr, #0063dc),
+     (github, #181717),
+     (gitlab, #e24329),
+     (googleplus, #dc4e41),
+     (instagram, #e4405f),
+     (lastfm, #d51007),
+     (linkedin, #0077b5),
+     (pinterest, #bd081c),
+     (rss, #ffa500),
+     (soundcloud, #f30),
+     (stackoverflow, #fe7a16),
+     (tumblr, #36465d),
+     (twitter, #1da1f2),
+     (xing, #005a5f),
+     (youtube, #cd201f)
+  );
+
+  @each $icon, $color in $icons {
+    &--#{$icon} {
+      fill: $color;
+    }
+  }
+}

data/_sass/so-simple/_mixins.scss

@@ -0,0 +1,5 @@
+@import "mixins/clearfix";
+@import "mixins/float";
+@import "mixins/image";
+@import "mixins/lists";
+@import "mixins/text-truncate";