jekyll-theme-basically-basic 1.0.0

data/_sass/basically-basic/_footer.scss

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+
+.site-footer {
+  margin-top: 4rem;
+  color: tint($text-color, 40%);
+  font-size: 80%;
+}
+
+.copyright {
+  font-family: $monospace-font-family;
+}

data/_sass/basically-basic/_global.scss

@@ -0,0 +1,36 @@
+/* ==========================================================================
+   Site-wide
+   ========================================================================== */
+
+.site-title {
+  @include fluid-type($min-vw, $max-vw, 20px, 24px);
+  margin: 0;
+  padding: 1.8125rem 1rem;
+  padding-right: calc(10vw + #{$navicon-width}); /* make room for sidebar toggle */
+  font-family: $base-font-family;
+  font-weight: bold;
+  line-height: 1;
+
+  @include breakpoint($medium) {
+    padding-left: 2rem;
+  }
+
+  @include breakpoint($large) {
+    padding-left: 5vw;
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    min-height: $site-image-height;
+    color: $text-color;
+    text-decoration: none;
+  }
+}
+
+.site-logo {
+  width: $site-image-width;
+  height: $site-image-height;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+}

data/_sass/basically-basic/_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/basically-basic/_intro.scss

@@ -0,0 +1,65 @@
+/* ==========================================================================
+   Page intro
+   ========================================================================== */
+
+.intro {
+  margin: 1rem 0;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.intro-image {
+  position: relative;
+  margin-top: -3rem; /* compensate for intro top margin */
+  margin-bottom: 3rem;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba($accent-color, 0.25);
+    content: '';
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+.intro-text {
+
+  /* remove space after last child element */
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.intro-title {
+  @include fluid-type($min-vw, $max-vw, 26px, 80px);
+  margin-bottom: 1rem;
+  color: tint($text-color, 25%);
+  line-height: 1;
+}
+
+.intro-subtitle {
+  @include fluid-type($min-vw, $max-vw, 18px, 28px);
+  font-style: italic;
+}
+
+.intro-actions {
+  @include list-unstyled;
+
+  li {
+    display: inline-block;
+  }
+}
+
+.intro-more {
+
+  > p:first-child {
+    font-size: 1.125em;
+    line-height: 1.625;
+  }
+}

data/_sass/basically-basic/_layout.scss

@@ -0,0 +1,178 @@
+/* ==========================================================================
+   Layout
+   ========================================================================== */
+
+.wrapper {
+  min-height: 100vh;
+  transition: $global-transition;
+}
+
+.intro,
+main {
+
+  > .inner {
+    padding: 0 0.5rem;
+
+    @include breakpoint($small) {
+      padding-right: 1rem;
+      padding-left: 1rem;
+    }
+
+    @include breakpoint($medium) {
+      padding-right: 2rem;
+      padding-left: 2rem;
+    }
+
+    @include breakpoint($large) {
+      padding-right: 3rem;
+      padding-left: 3rem;
+    }
+
+    @include breakpoint($xlarge) {
+      padding-right: 4rem;
+      padding-left: 4rem;
+    }
+  }
+}
+
+main {
+
+  section {
+    @include container;
+  }
+}
+
+.inner {
+  max-width: $large;
+}
+
+/*
+   Layout specific adjustments
+   ========================================================================== */
+
+.layout--post,
+.layout--page {
+
+  .entry-content {
+
+    @include breakpoint($large) {
+      width: span(14 of 16);
+    }
+  }
+}
+
+.layout--about {
+
+  .entry-wrap {
+    display: flex;
+    flex-wrap: wrap;
+
+    @include breakpoint($medium) {
+      flex-wrap: nowrap;
+    }
+  }
+
+  .entry-content {
+
+    @include breakpoint($medium) {
+      flex: 1;
+    }
+  }
+
+  .entry-sidebar {
+    order: -1;
+    -ms-flex-order: -1;
+
+    @include breakpoint($medium) {
+      order: initial;
+      -ms-flex-order: initial;
+    }
+
+    .author-picture {
+      margin: 0 0 2rem;
+      border-radius: 2 * $border-radius;
+
+      @include breakpoint($medium) {
+        margin: 0 0 0 2rem;
+      }
+    }
+  }
+}
+
+.layout--cv {
+
+  .entries {
+
+    .entry-header {
+
+      @include breakpoint($medium) {
+        @include span(5 of 16);
+        @include suffix(1 of 16);
+
+        /* remove space after last child element */
+        > *:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .entry-content {
+      @include breakpoint($medium) {
+        @include span(11 of 16 last);
+      }
+    }
+  }
+
+  .entry {
+
+    a {
+      color: $accent-color;
+    }
+
+    address {
+      font-style: normal;
+    }
+
+    .title,
+    .position,
+    .institution,
+    .language {
+      margin-bottom: 0;
+    }
+
+    .date {
+      margin-bottom: 1rem;
+      color: tint($text-color, 40%);
+      font-family: $monospace-font-family;
+      font-size: 80%;
+    }
+
+    .courses-title,
+    .awarder,
+    .publisher,
+    .level {
+      margin: 1rem 0 0;
+    }
+
+    .courses,
+    .keywords {
+      @include list-unstyled;
+    }
+  }
+
+  .taxonomy {
+
+    + .taxonomy {
+      margin-top: 0.5rem;
+    }
+
+    .title {
+      display: inline-block;
+      margin-right: 1rem;
+    }
+
+    .keywords {
+      display: inline-block;
+    }
+  }
+}

data/_sass/basically-basic/_mixins.scss

@@ -0,0 +1,7 @@
+@import 'mixins/color';
+@import 'mixins/clearfix';
+@import 'mixins/fluid-type';
+@import 'mixins/float';
+@import 'mixins/image';
+@import 'mixins/lists';
+@import 'mixins/text-truncate';

data/_sass/basically-basic/_navicons.scss

@@ -0,0 +1,144 @@
+/* ==========================================================================
+   Navicons
+   ========================================================================== */
+
+.navicon-button {
+  display: inline-block;
+  position: relative;
+  padding: 1.8125rem 1rem;
+  transition: $navicon-duration / 2;
+  background-color: $navicon-nav-bg-close;
+  cursor: pointer;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  @include breakpoint($medium) {
+    margin-right: 2rem;
+  }
+
+  @include breakpoint($large) {
+    margin-right: 5vw;
+  }
+
+  &.open {
+    background-color: $navicon-nav-bg-open;
+  }
+
+  .navicon::before,
+  .navicon::after {
+    transition-duration: $navicon-duration / 2;
+  }
+
+  &:hover {
+    transition-duration: $navicon-duration;
+
+    .navicon::before,
+    .navicon::after {
+      transition-duration: $navicon-duration / 2;
+    }
+
+    .navicon::before { top: (2.5 * $navicon-height); }
+    .navicon::after { top: (-2.5 * $navicon-height); }
+  }
+}
+
+.navicon {
+  position: relative;
+  width: $navicon-width;
+  height: $navicon-height;
+  transition-duration: $navicon-duration;
+  border-radius: $navicon-width;
+  background: $navicon-content-bg;
+
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    width: $navicon-width;
+    height: $navicon-height;
+    transition-duration: $navicon-duration $navicon-duration / 2;
+    border-radius: $navicon-width;
+    background: $navicon-content-bg;
+    content: '';
+  }
+
+  &::before { top: (2 * $navicon-height); }
+  &::after { top: (-2 * $navicon-height); }
+}
+
+.open:not(.steps) .navicon::before,
+.open:not(.steps) .navicon::after {
+  top: 0 !important;
+}
+
+.open {
+  transform: scale($navicon-toggled-size);
+
+  .navicon::before,
+  .navicon::after {
+    transition-duration: $navicon-duration;
+  }
+
+  /* Arrows */
+  &.larr .navicon,
+  &.rarr .navicon,
+  &.uarr .navicon {
+
+    &::before,
+    &::after {
+      width: (0.6 * $navicon-width);
+    }
+
+    &::before {
+      transform: rotate(35deg);
+      transform-origin: left top;
+    }
+
+    &::after {
+      transform: rotate(-35deg);
+      transform-origin: left bottom;
+    }
+  }
+
+  &.uarr {
+    transform: scale($navicon-toggled-size) rotate(90deg);
+  }
+
+  &.rarr .navicon {
+
+    &::before {
+      transform: translate3d(1em, 0, 0) rotate(-35deg);
+      transform-origin: right top;
+    }
+
+    &::after {
+      transform: translate3d(1em, 0, 0) rotate(35deg);
+      transform-origin: right bottom;
+    }
+  }
+
+  /* × and + */
+  /* &.plus,*/
+  /* &.x {*/
+  /*   .navicon {*/
+  /*     background: transparent;*/
+
+  /*     &::before {*/
+  /*       -ms-transform: rotate(-45deg);*/
+  /*       transform: rotate(-45deg);*/
+  /*     }*/
+
+  /*     &::after {*/
+  /*       -ms-transform: rotate(45deg);*/
+  /*       transform: rotate(45deg);*/
+  /*     }*/
+  /*   }*/
+  /* }*/
+
+  /* &.plus {*/
+  /*   -ms-transform: scale($navicon-toggled-size) rotate(45deg);*/
+  /*   transform: scale($navicon-toggled-size) rotate(45deg);*/
+  /* }*/
+}