alna-jekyll-theme 0.1.0

data/_sass/components/_components.book-details.scss

@@ -0,0 +1,46 @@
+/* ==========================================================================
+   #BOOK-DETAILS
+   ========================================================================== */
+
+.c-book-details {
+  background: $color-book-details-background;
+  padding: $unit;
+  margin-bottom: $unit-large;
+  border-left: 4px solid $color-book-details-border;
+
+  small {
+    display: block;
+  }
+}
+
+
+  .c-book-details__cover {
+    @include mq($until: tablet) {
+      display: block;
+      float: none;
+      margin: 0 auto $unit;
+    }
+
+    img {
+      max-height: 180px;
+    }
+  }
+
+
+  .c-book-details__title {
+    margin-bottom: 0;
+  }
+
+
+  .c-book-details__details {
+    @include font-size(14px, false);
+  }
+
+
+  .c-book-details__descriptions {
+    margin-bottom: 0;
+
+    @include mq($until: tablet) {
+      display: none;
+    }
+  }

data/_sass/components/_components.book.scss

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   #BOOK
+   ========================================================================== */
+
+.c-book {
+  text-align: center;
+}
+
+
+  .c-book__link {
+    color: $color-book;
+    display: block;
+    padding: $unit-small;
+
+    &:hover,
+    &:focus {
+      color: $color-book;
+      background: $color-book-background;
+    }
+  }
+
+
+  .c-book__cover {
+    box-sizing: content-box;
+    margin-bottom: $unit-small;
+    max-height: 200px;
+
+    img {
+      max-height: inherit;
+    }
+  }
+
+
+  .c-book__headline {
+    color: $color-book-headline;
+    margin: $unit-tiny 0;
+  }
+
+
+  .c-book__excerpt {
+    @include font-size(16px, false);
+    margin-bottom: 0;
+  }

data/_sass/components/_components.bookcase.scss

@@ -0,0 +1,24 @@
+/* ==========================================================================
+   #BOOKCASE
+   ========================================================================== */
+
+.c-bookcase {
+  padding: $unit-large 0;
+  border-bottom: 1px solid $color-bookcase-border;
+}
+
+
+  .c-bookcase__headline {
+    text-align: center;
+    margin-bottom: $unit-large;
+  }
+
+
+  .c-bookcase__list {
+    margin-bottom: $unit;
+  }
+
+
+    .c-bookcase__item {
+      margin-bottom: $unit;
+    }

data/_sass/components/_components.buttons.scss

@@ -0,0 +1,129 @@
+/* ==========================================================================
+   #BUTTONS
+   ========================================================================== */
+
+/**
+ * 1. Allow us to style box model properties.
+ * 2. Line different sized buttons up a little nicer.
+ * 3. Reset/normalize some styles.
+ * 4. Force all button-styled elements to appear clickable.
+ */
+
+.c-btn {
+  @include font-size(18px, 2.2);
+  display: inline-block; /* [1] */
+  vertical-align: middle; /* [2] */
+  text-align: center; /* [3] */
+  margin: 0; /* [3] */
+  cursor: pointer; /* [4] */
+  padding: 0 $unit;
+  transition: $global-transition;
+  border-radius: $global-radius;
+  font-weight: $semi-bold;
+
+}
+
+
+
+
+
+/* Style variants
+   ========================================================================== */
+
+.c-btn--primary {
+  background-color: $color-btn-primary-background;
+
+  &,
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none; /* [3] */
+    color: $color-btn-primary;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-btn-primary-hover;
+  }
+
+}
+
+.c-btn--secondary {
+  background-color: $color-btn-secondary-background;
+
+  &,
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none; /* [3] */
+    color: $color-btn-secondary;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-btn-secondary-hover;
+  }
+
+}
+
+
+
+
+
+/* Size variants
+   ========================================================================== */
+
+.c-btn--small {
+  @include font-size(16px, 1.8);
+  padding: 0 $unit-small;
+}
+
+.c-btn--large {
+  @include font-size(20px, 2.6);
+  padding: 0 $unit-large;
+}
+
+
+
+
+
+/* Ghost buttons
+   ========================================================================== */
+
+/**
+ * Ghost buttons have see-through backgrounds and are bordered.
+ */
+
+$btn-ghost-border-width: 1px;
+
+.c-btn--ghost {
+  box-shadow: inset 0 0 0 $btn-ghost-border-width currentColor;
+
+  &,
+  &:hover,
+  &:active,
+  &:focus {
+    background: none;
+  }
+
+    &.c-btn--primary {
+      color: $color-btn-primary-background;
+
+      &:hover,
+      &:focus {
+        color: $color-btn-primary-hover;
+      }
+
+    }
+
+    &.c-btn--secondary {
+      color: $color-btn-secondary-background;
+
+      &:hover,
+      &:focus {
+        color: $color-btn-secondary-hover;
+      }
+
+    }
+
+}

data/_sass/components/_components.date.scss

@@ -0,0 +1,8 @@
+/* ==========================================================================
+   #DATE
+   ========================================================================== */
+
+.c-date {
+  @include font-size(16px);
+  color: $color-date;
+}

data/_sass/components/_components.icons.scss

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   #ICONS
+   ========================================================================== */
+
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icomoon.eot?snldla');
+  src:  url('../fonts/icomoon.eot?snldla#iefix') format('embedded-opentype'),
+        url('../fonts/icomoon.ttf?snldla') format('truetype'),
+        url('../fonts/icomoon.woff?snldla') format('woff'),
+        url('../fonts/icomoon.svg?snldla#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+
+
+
+.c-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+
+
+
+/* Type variants
+   ========================================================================== */
+
+.c-icon--facebook:before {
+  content: "\ea90";
+}
+
+.c-icon--instagram:before {
+  content: "\ea92";
+}
+
+.c-icon--twitter:before {
+  content: "\ea96";
+}
+
+.c-icon--youtube:before {
+  content: "\ea9d";
+}
+
+.c-icon--github:before {
+  content: "\eab0";
+}
+
+.c-icon--soundcloud:before {
+  content: "\eac3";
+}
+
+.c-icon--linkedin:before {
+  content: "\eaca";
+}
+
+.c-icon--envelop:before {
+  content: "\e945";
+}
+
+.c-icon--star-empty:before {
+  content: "\e9d7";
+}
+
+.c-icon--star-full:before {
+  content: "\e9d9";
+}

data/_sass/components/_components.notebook.scss

@@ -0,0 +1,30 @@
+/* ==========================================================================
+   #NOTEBOOK
+   ========================================================================== */
+
+.c-notebook {
+  padding: $unit-large 0;
+  border-bottom: 1px solid $color-notebook-border;
+}
+
+
+  .c-notebook__headline {
+    text-align: center;
+    margin-bottom: $unit-large;
+  }
+
+
+  .c-notebook__list {
+    padding-bottom: $unit;
+    margin-bottom: 0;
+  }
+
+
+    .c-notebook__item {
+      border-bottom: 1px solid $color-notebook-border;
+      margin-top: $unit;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }

data/_sass/components/_components.page-content.scss

@@ -0,0 +1,25 @@
+/* ==========================================================================
+   #PAGE-CONTENT
+   ========================================================================== */
+
+.c-page-content {
+  padding: $unit-large 0;
+  border-bottom: 1px solid $color-page-content-border;
+
+  p {
+    line-height: 1.5;
+  }
+
+  h2 {
+    border-top: 1px solid $color-page-content-border;
+    margin: $unit-large 0 $unit-small;
+    padding: $unit 0;
+    text-align: center;
+  }
+}
+
+
+  .c-page-content__headline {
+    text-align: center;
+    margin-bottom: $unit-large;
+  }

data/_sass/components/_components.page-foot.scss

@@ -0,0 +1,36 @@
+/* ==========================================================================
+   #DATE
+   ========================================================================== */
+
+.c-page-foot {
+  @include font-size(14px, false);
+  color: $color-page-foot;
+  padding: $unit-large 0;
+  text-align: center;
+}
+
+
+  .c-page-foot__about {
+    margin-bottom: $unit-small;
+
+    a {
+      border-bottom: 1px dotted currentColor;
+      color: $color-page-foot;
+    }
+  }
+
+
+  .c-page-foot__copyright {
+    font-weight: $semi-bold;
+    margin-bottom: 0;
+  }
+
+
+  .c-page-foot__list {
+  }
+
+
+    .c-page-foot__item {
+      @include font-size(24px, false);
+      padding: 0 $unit-small;
+    }

data/_sass/components/_components.page-head.scss

@@ -0,0 +1,9 @@
+/* ==========================================================================
+   #PAGE-HEAD
+   ========================================================================== */
+
+.c-page-head {
+  background: $color-page-head-background;
+  color: $color-page-head;
+  padding: $unit-large 0;
+}

data/_sass/components/_components.portfolio.scss

@@ -0,0 +1,19 @@
+/* ==========================================================================
+   #PORTFOLIO
+   ========================================================================== */
+
+.c-portfolio {
+  border-bottom: 1px solid $color-portfolio-border;
+  padding: $unit-large 0;
+}
+
+
+  .c-portfolio__headline {
+    margin-bottom: $unit-large;
+    text-align: center;
+  }
+
+
+  .c-portfolio__list {
+    margin-bottom: 0;
+  }

data/_sass/components/_components.post-head.scss

@@ -0,0 +1,9 @@
+/* ==========================================================================
+   #POST-HEAD
+   ========================================================================== */
+
+.c-post-head {
+  h1 {
+    margin-bottom: $unit-large;
+  }
+}

data/_sass/components/_components.post.scss

@@ -0,0 +1,33 @@
+/* ==========================================================================
+   #POST
+   ========================================================================== */
+
+.c-post {
+  padding: $unit-large 0;
+  border-bottom: 1px solid $color-post-border;
+
+  p {
+    line-height: 1.5;
+  }
+
+  h2 {
+    border-top: 1px solid $color-post-border;
+    margin: $unit-large 0 $unit-small;
+    padding: $unit 0;
+  }
+
+  a {
+    border-bottom: 1px dotted currentColor;
+  }
+}
+
+
+  .c-post__content {
+    border-bottom: 1px solid $color-post-border;
+    margin-bottom: $unit-large;
+    padding-bottom: $unit-large;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }

data/_sass/components/_components.project.scss

@@ -0,0 +1,24 @@
+/* ==========================================================================
+   #PROJECT
+   ========================================================================== */
+
+.c-project {
+  margin-bottom: $unit;
+}
+
+
+  .c-project__banner {
+    margin-bottom: $unit;
+  }
+
+
+  .c-project__headline {
+    margin-bottom: $unit-small;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+
+  .c-project__btn {
+    text-align: center;
+  }

data/_sass/components/_components.rating.scss

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   #RATING
+   ========================================================================== */
+
+.c-rating {
+  color: $color-rating;
+}

data/_sass/components/_components.see-more.scss

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   #SEE-MORE
+   ========================================================================== */
+
+.c-see-more {
+  text-align: center;
+}

data/_sass/components/_components.site-nav.scss

@@ -0,0 +1,45 @@
+/* ==========================================================================
+   #SITE-NAV
+   ========================================================================== */
+
+/**
+ * The site-nav component simply displays a list of items in one line.
+ */
+
+.c-site-nav {
+  background: $color-site-nav-background;
+}
+
+
+  .c-site-nav__list {
+    margin-bottom: 0;
+  }
+
+
+    .c-site-nav__item {
+      text-align: center;
+
+      @include mq($until: tablet) {
+        display: block;
+      }
+    }
+
+
+      .c-site-nav__link {
+        @include font-size(16px, false);
+        color: $color-site-nav-link;
+        display: block;
+        letter-spacing: 3px;
+        padding: $unit 0;
+        text-transform: uppercase;
+
+        @include mq($until: tablet) {
+          padding: $unit-small 0;
+        }
+
+        &:hover,
+        &:focus {
+          background: $color-site-nav-link-background;
+          color: $color-site-nav-link;
+        }
+      }

data/_sass/components/_components.social-media.scss

@@ -0,0 +1,12 @@
+/* ==========================================================================
+   #SITE-NAV
+   ========================================================================== */
+
+.c-social-media {
+  color: $color-social-media;
+
+  &:hover,
+  &:focus {
+    color: $color-social-media-hover;
+  }
+}

data/_sass/elements/_elements.descriptions.scss

@@ -0,0 +1,23 @@
+/* ==========================================================================
+   #DESCRIPTIONS
+   ========================================================================== */
+
+dl {
+
+}
+
+  dt {
+    font-weight: $semi-bold;
+    float: left;
+    clear: left;
+    width: $unit * 5;
+
+    &:after {
+      content: ":";
+    }
+  }
+
+  dd {
+    margin-left: $unit;
+    padding-left: $unit;
+  }

data/_sass/elements/_elements.headings.scss

@@ -0,0 +1,8 @@
+/* ==========================================================================
+   #HEADINGS
+   ========================================================================== */
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $heading-font-family;
+  font-weight: $regular;
+}

data/_sass/elements/_elements.links.scss

@@ -0,0 +1,14 @@
+/* ==========================================================================
+   #LINKS
+   ========================================================================== */
+
+a {
+  color: $color-links;
+  text-decoration: none;
+  transition: $global-transition;
+
+  &:hover,
+  &:focus {
+    color: $color-links-hover;
+  }
+}

data/_sass/elements/_elements.page.scss

@@ -0,0 +1,20 @@
+/* ==========================================================================
+   #PAGE
+   ========================================================================== */
+
+/**
+ * 1. Prevent certain mobile browsers from automatically zooming fonts.
+ * 2. Fonts on OSX will look more consistent with other systems that do not
+ *    render text using sub-pixel anti-aliasing.
+ */
+
+html {
+  color: $color-text;
+  font-family: $base-font-family;
+  font-weight: $regular;
+  letter-spacing: 0.5px;
+  -webkit-text-size-adjust: 100%; /* [1] */
+  -ms-text-size-adjust: 100%; /* [1] */
+  -moz-osx-font-smoothing: grayscale; /* [2] */
+  -webkit-font-smoothing: antialiased; /* [2] */
+}