jekyll-theme-basically-basic 1.0.0

data/_sass/basically-basic/_sidebar.scss

@@ -0,0 +1,177 @@
+/* ==========================================================================
+   Sidebar
+   ========================================================================== */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 150;
+  pointer-events: none;
+
+  /* page overlay dimmer */
+  &::after {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
+    background: rgba($base-color, 0.5);
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    will-change: opacity;
+  }
+
+  li {
+    transform: translateX(-1rem);
+    transition: all 0.5s;
+    opacity: 0;
+
+    &.is--moved {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    /* line hover effect */
+    a {
+      position: relative;
+      color: $base-color;
+
+      &::before {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: -3rem;
+        width: 0;
+        height: 1px;
+        transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);
+        background-color: $base-color;
+        content: '';
+      }
+
+      &:hover {
+        color: $accent-color;
+      }
+
+      &:hover::before {
+        width: 2.5rem;
+      }
+    }
+  }
+
+  &.is--visible {
+    transform: translateX(0);
+
+    &::after {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    > .inner {
+      transform: none;
+      box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125);
+    }
+
+    &.is--animatable > .inner {
+      transition: all 330ms ease-out;
+    }
+  }
+
+  &.is--animatable > .inner {
+    transition: all 130ms ease-in;
+  }
+
+  > .inner {
+    position: relative;
+    width: 100%;
+    max-width: $sidebar-width;
+    height: 100%;
+    padding: 1.5em;
+    transform: translateX(-1 * $sidebar-width);
+    background-color: $sidebar-background-color;
+    box-shadow: none;
+    z-index: 160;
+    will-change: transform;
+    overflow-x: hidden;
+    pointer-events: auto;
+
+    @include breakpoint($medium) {
+      padding: 3rem;
+    }
+
+    @include breakpoint($large) {
+      max-width: (1.5 * $sidebar-width);
+      transform: translateX(-1.5 * $sidebar-width);
+    }
+  }
+
+  .menu {
+    @include fluid-type($min-vw, $max-vw, 24px, 48px);
+    position: relative;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    font-weight: bold;
+    line-height: 1;
+
+    a {
+      display: block;
+    }
+
+    /* divider line */
+    &::after {
+      position: absolute;
+      bottom: 0;
+      width: 1.5em;
+      height: 1px;
+      background-color: $base-color;
+      content: '';
+    }
+
+    li {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  .contact-list {
+    @include fluid-type($min-vw, $max-vw, 18px, 24px);
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+
+    li:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+
+    a {
+      display: block;
+      color: $base-color;
+      text-decoration: none;
+    }
+  }
+}
+
+.sidebar-toggle-wrapper {
+  position: fixed;
+  top: 0.675rem;
+  right: 0;
+  cursor: pointer;
+  z-index: 10000;
+
+  .toggle {
+    display: flex;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.sidebar-toggle-label {
+  order: 2;
+  margin-left: 0.5rem;
+  font-weight: bold;
+}

data/_sass/basically-basic/_syntax-highlighting.scss

@@ -0,0 +1,127 @@
+/* ==========================================================================
+   Syntax highlighting
+   ========================================================================== */
+
+.highlight {
+  padding: 1em;
+  background-color: $code-background-color;
+
+  pre {
+    width: 100%;
+    margin: 0;
+  }
+
+  table {
+    margin: 0;
+    border: 0;
+    font-size: 1em;
+
+    tr {
+      border: 0;
+    }
+
+    td {
+      padding: 5px;
+      border: 0;
+
+      /* line numbers gutter */
+      &.gutter {
+        padding-right: 1rem;
+      }
+    }
+
+    pre {
+      margin: 0;
+    }
+  }
+
+  /* line numbers */
+  .lineno {
+    color: tint($base-color, 50%);
+  }
+
+  /*
+     Solarized Light
+     http://ethanschoonover.com/solarized
+
+     SOLARIZED HEX      ROLE
+     --------- -------- ------------------------------------------
+     base01    #586e75  body text / default code / primary content
+     base1     #93a1a1  comments / secondary content
+     base3     #fdf6e3  background
+     orange    #cb4b16  constants
+     red       #dc322f  regex, special keywords
+     blue      #22b3eb  reserved keywords
+     cyan      #2aa198  strings, numbers
+     green     #859900  operators, other keywords
+     ========================================================================== */
+
+  .c { color: #93a1a1; } /* Comment */
+  .err { color: #586e75; } /* Error */
+  .g { color: #586e75; } /* Generic */
+  .k { color: #859900; } /* Keyword */
+  .l { color: #586e75; } /* Literal */
+  .n { color: #586e75; } /* Name */
+  .o { color: #859900; } /* Operator */
+  .x { color: #cb4b16; } /* Other */
+  .p { color: #586e75; } /* Punctuation */
+  .cm { color: #93a1a1; } /* Comment.Multiline */
+  .cp { color: #859900; } /* Comment.Preproc */
+  .c1 { color: #93a1a1; } /* Comment.Single */
+  .cs { color: #859900; } /* Comment.Special */
+  .gd { color: #2aa198; } /* Generic.Deleted */
+  .ge { color: #586e75; font-style: italic; } /* Generic.Emph */
+  .gr { color: #dc322f; } /* Generic.Error */
+  .gh { color: #cb4b16; } /* Generic.Heading */
+  .gi { color: #859900; } /* Generic.Inserted */
+  .go { color: #586e75; } /* Generic.Output */
+  .gp { color: #586e75; } /* Generic.Prompt */
+  .gs { color: #586e75; font-weight: bold; } /* Generic.Strong */
+  .gu { color: #cb4b16; } /* Generic.Subheading */
+  .gt { color: #586e75; } /* Generic.Traceback */
+  .kc { color: #cb4b16; } /* Keyword.Constant */
+  .kd { color: #22b3eb; } /* Keyword.Declaration */
+  .kn { color: #859900; } /* Keyword.Namespace */
+  .kp { color: #859900; } /* Keyword.Pseudo */
+  .kr { color: #22b3eb; } /* Keyword.Reserved */
+  .kt { color: #dc322f; } /* Keyword.Type */
+  .ld { color: #586e75; } /* Literal.Date */
+  .m { color: #2aa198; } /* Literal.Number */
+  .s { color: #2aa198; } /* Literal.String */
+  .na { color: #586e75; } /* Name.Attribute */
+  .nb { color: #b58900; } /* Name.Builtin */
+  .nc { color: #22b3eb; } /* Name.Class */
+  .no { color: #cb4b16; } /* Name.Constant */
+  .nd { color: #22b3eb; } /* Name.Decorator */
+  .ni { color: #cb4b16; } /* Name.Entity */
+  .ne { color: #cb4b16; } /* Name.Exception */
+  .nf { color: #22b3eb; } /* Name.Function */
+  .nl { color: #586e75; } /* Name.Label */
+  .nn { color: #586e75; } /* Name.Namespace */
+  .nx { color: #586e75; } /* Name.Other */
+  .py { color: #586e75; } /* Name.Property */
+  .nt { color: #22b3eb; } /* Name.Tag */
+  .nv { color: #22b3eb; } /* Name.Variable */
+  .ow { color: #859900; } /* Operator.Word */
+  .w { color: #586e75; } /* Text.Whitespace */
+  .mf { color: #2aa198; } /* Literal.Number.Float */
+  .mh { color: #2aa198; } /* Literal.Number.Hex */
+  .mi { color: #2aa198; } /* Literal.Number.Integer */
+  .mo { color: #2aa198; } /* Literal.Number.Oct */
+  .sb { color: #93a1a1; } /* Literal.String.Backtick */
+  .sc { color: #2aa198; } /* Literal.String.Char */
+  .sd { color: #586e75; } /* Literal.String.Doc */
+  .s2 { color: #2aa198; } /* Literal.String.Double */
+  .se { color: #cb4b16; } /* Literal.String.Escape */
+  .sh { color: #586e75; } /* Literal.String.Heredoc */
+  .si { color: #2aa198; } /* Literal.String.Interpol */
+  .sx { color: #2aa198; } /* Literal.String.Other */
+  .sr { color: #dc322f; } /* Literal.String.Regex */
+  .s1 { color: #2aa198; } /* Literal.String.Single */
+  .ss { color: #2aa198; } /* Literal.String.Symbol */
+  .bp { color: #22b3eb; } /* Name.Builtin.Pseudo */
+  .vc { color: #22b3eb; } /* Name.Variable.Class */
+  .vg { color: #22b3eb; } /* Name.Variable.Global */
+  .vi { color: #22b3eb; } /* Name.Variable.Instance */
+  .il { color: #2aa198; } /* Literal.Number.Integer.Long */
+}

data/_sass/basically-basic/_tables.scss

@@ -0,0 +1,42 @@
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+table {
+  @include fluid-type($min-vw, $max-vw, 12px, 18px);
+  width: 100%;
+  border-collapse: collapse;
+  /* For Firefox to horizontally scroll wider tables */
+  // scss-lint:disable DuplicateProperty
+  word-break: normal;
+  word-break: keep-all;
+}
+
+thead {
+
+  th,
+  td {
+    background-color: tint($base-color, 80%);
+  }
+}
+
+th,
+td {
+  border-bottom: 1px solid $border-color;
+}
+
+th {
+  padding: 0.5em;
+  font-weight: bold;
+  text-align: left;
+}
+
+td {
+  padding: 0.5em;
+}
+
+tr,
+td,
+th {
+  vertical-align: middle;
+}

data/_sass/basically-basic/_utilities.scss

@@ -0,0 +1,5 @@
+@import 'utilities/accessibility';
+@import 'utilities/align';
+@import 'utilities/clearfix';
+@import 'utilities/float';
+@import 'utilities/text';

data/_sass/basically-basic/_variables.scss

@@ -0,0 +1,84 @@
+/* ==========================================================================
+   Variables
+   ========================================================================== */
+
+/* Breakpoint widths */
+$small: 320px !default;
+$medium: 768px !default;
+$large: 1024px !default;
+$xlarge: 1280px !default;
+
+/* Fluid type */
+$base-font-size: 16px !default;
+$min-vw: $small !default;
+$max-vw: $xlarge !default;
+$min-font-size: 14px !default;
+$max-font-size: 18px !default;
+
+/* Calculate Modular Scale */
+$modular-scale-1: 1.067 !default; /* small */
+$modular-scale-2: 1.296 !default; /* large */
+/* Heading 1 */
+$h1-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
+$h1-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
+/* Heading 2 */
+$h2-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
+$h2-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
+/* Heading 3 */
+$h3-min: $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
+$h3-max: $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
+/* Heading 4 */
+$h4-min: $modular-scale-1 * $base-font-size !default;
+$h4-max: $modular-scale-2 * $base-font-size !default;
+/* Heading 5 */
+$h5-min: $base-font-size !default;
+$h5-max: $base-font-size !default;
+/* Heading 6 */
+$h6-min: ($base-font-size / $modular-scale-1) !default;
+$h6-max: ($base-font-size / $modular-scale-2) !default;
+
+/* Base font family */
+$base-font-family: "Fira Sans", sans-serif !default;
+/* Other font families */
+$headline-font-family: $base-font-family !default;
+$monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace !default;
+
+/* Colors */
+$base-color: #393e46 !default;
+$text-color: #222831 !default;
+$accent-color: #00848a !default;
+$background-color: #fff !default;
+$code-background-color: tint($base-color, 95%) !default;
+$border-color: tint($base-color, 80%) !default;
+$overlay-color: $base-color !default;
+
+/* Max-width of the main content */
+$main-max-width: $xlarge !default;
+
+/* Width of the sidebar */
+$sidebar-width: $small !default;
+
+/* Background color of the sidebar */
+$sidebar-background-color: #fff !default;
+
+/* Border radius */
+$border-radius: 0.25em !default;
+
+/* Global transition */
+$global-transition: all 0.4s ease !default;
+
+/* Navicon */
+$navicon-width: 1.75em !default;
+$navicon-height: 0.25em !default;
+$navicon-duration: 0.5s !default;
+$navicon-toggled-size: 1 !default;
+$navicon-nav-bg-close: transparent !default;
+$navicon-nav-bg-open: transparent !default;
+$navicon-content-bg: $text-color !default;
+
+/* Site image */
+$site-image-width: 50px !default;
+$site-image-height: 50px !default;
+
+/* Susy grid settings */
+$susy: (columns: 16, gutters: 0, math: fluid, output: float) !default;

data/_sass/basically-basic/mixins/_clearfix.scss

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   Clearfix Mixin
+   ========================================================================== */
+
+@mixin clearfix() {
+  &::after {
+    display: block;
+    clear: both;
+    content: '';
+  }
+}