bajawa 0.1.0

data/_sass/bajawa/layout.scss

@@ -0,0 +1,323 @@
+/** Main Container or Wrapper **/
+* {
+  &,
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: $base-bg-color;
+}
+
+hr {
+  border-top: none;
+  border-bottom: 2px solid lighten($light-grey, 7%);
+  width: 100%;
+  margin: $small-spacing 0;
+}
+
+/** CSS MAIN **/
+.wrapper-all {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+
+  /** Header and Navbar **/
+  .site-header {
+    border-bottom: 1px solid lighten($light-berry, 20%);
+    margin: 0 auto 0 auto;
+    height: 100px;
+
+    .navbar {
+      height: 100px;
+      max-width: $maxwidth;
+      margin: 0 auto 0 auto;
+
+      .logo-container {
+        float: left;
+        padding: $base-spacing;
+        margin: 0 auto 0 auto;
+
+        .logo-left {
+          letter-spacing: 2px;
+          cursor: pointer;
+          line-height: 14px;
+        }
+      }
+
+      .nav-container {
+        padding: $base-spacing;
+        margin: 0.5em auto 0.75em auto;
+        float: right;
+
+        .navbar-right {
+          overflow: hidden;
+
+          a {
+            float: left;
+            display: block;
+            margin: 0.3em 0 0 0;
+            padding: 0;
+            pointer-events: all;
+            cursor: pointer;
+            text-align: center;
+          }
+          a:link {
+            color: $dark-berry;
+          }
+          a:visited {
+            color: $dark-berry;
+          }
+          a:hover {
+            color: $light-berry;
+          }
+          a:active {
+            color: $light-berry;
+          }
+          li {
+            display: inline-block;
+            padding: 0.6em;
+          }
+          .icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  /** Front Page Layout **/
+    /** 1. Hero Image **/
+  .main-content-front {
+    padding: 0 0 80px 0;
+    margin: 0;
+    height: calc(100% - 100px - 100px); //total height minus header minus footer
+
+
+    .hero-wrapper {
+      padding: 0;
+      margin: 0 ;
+      height: 50%;
+      background-color: $light-grey;
+
+      .hero-wrapper-container {
+        padding: 0;
+        margin: 0;
+
+        .hero-img {
+          /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+          background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/images/heroimg.jpg");
+          height: 400px; /* Set a specific height */
+          background-color: $light-grey;
+          display: block;
+          /* Position and center the image to scale nicely on all screens */
+          position: relative;
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+
+        .hero-text {
+          text-align: center;
+          position: absolute;
+          margin-top: 5px;
+          margin-bottom: 5px;
+          top: 40%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+
+        /* Place text in the middle of the image */
+        a.button {
+          font-size: $base-font-size;
+          border: 2px solid $white;
+          border-color: $white;
+          outline: 0;
+          display: inline-block;
+          margin-top: 5px;
+          padding: 10px 25px;
+          color: $white;
+          background-color: transparent;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        a.button:hover {
+          background-color: $white;
+          color: $black;
+        }
+      }
+    }
+
+    /** 2. Recent Post **/
+    .recent-post-wrapper {
+      padding: 0;
+      margin: 0;
+
+      .recent-post-container {
+        margin: $base-spacing auto $base-spacing auto;
+        max-width: $maxwidth;
+
+        .section-title {
+          padding: 0;
+          margin: 1em*2 auto 1em auto;
+        }
+        .post-entry-grid {
+          padding-top: $base-spacing;
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+          grid-gap: 2em;
+
+          .entry-flex {
+            display: flex;
+            flex-direction: column;
+            padding-bottom: $base-spacing/2;
+          }
+        }
+        .button-post {
+          width: 100%;
+          margin-left: auto;
+          margin-right: auto;
+          text-align: center;
+
+          a.button {
+            font-size: $base-font-size;
+            border: 2px solid $dark-berry;
+            border-color: $dark-berry;
+            outline: 0;
+            display: inline-block;
+            margin: 5px auto 5px auto;
+            padding: 10px 25px;
+            color: $dark-berry;
+            background-color: transparent;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          a.button:hover {
+            background-color: $dark-berry;
+            color: $white;
+          }
+        }
+      }
+    }
+  }
+
+/*** Post Layout ***/
+  .post-wrapper {
+    max-width: $maxwidth;
+    margin: $base-spacing auto $base-spacing auto;
+    padding: $base-spacing;
+    height: calc(100% - 100px - 100px); //total height minus header and footer
+
+    .post-header {
+      height: 80px;
+      margin: $base-spacing 0 $base-spacing 0;
+    }
+
+    .post-content {
+      margin: $base-spacing 0 $base-spacing 0;
+      color: $dark-grey;
+    }
+
+    .post-content hr {
+      display: block;
+      margin: 1em auto 1em auto;
+      border-style: double;
+      border-width: 2px;
+      color: $dark-berry;
+    }
+  }
+
+/*** Page Layout ***/
+  .page-container {
+    height: calc(100% - 100px - 100px); //total height minus header minus footer
+
+    .page-wrapper {
+      max-width: $maxwidth;
+      margin-left: auto;
+      margin-right: auto;
+      padding: $base-spacing;
+
+      .page-header {
+        height: 80px;
+        margin: 2em 0 2em 0;
+      }
+
+      .page-content {
+        margin: $base-spacing 0 $base-spacing 0;
+        color: $dark-grey;
+
+        //LUNR Search settings under page content
+        .form-control {
+            border: 2px solid $medium-grey;
+            border-radius: 4px;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 12px 20px;
+            font-style: $base-font-size;
+            font-size: 14px;
+          }
+        #lunrsearchresults {
+          padding-top: 0.2rem;
+        }
+        .lunrsearchresult {padding-bottom: 1rem;}
+        .lunrsearchresult .title {color: $dark-berry; font-family: $alternate-font-type;}
+        .lunrsearchresult .url {color: $medium-grey;}
+        .lunrsearchresult .url a:hover {color: $light-berry;}
+        .lunrsearchresult a {display: block; color: $dark-grey;}
+        .lunrsearchresult a:hover, .lunrsearchresult a:focus {text-decoration: none;}
+        .lunrsearchresult a:hover .title {text-decoration: underline;}
+      }
+
+      /** Only for Pagination and Blog Page only **/
+      .blogpost-title li {
+        list-style: none;
+      }
+      .pagination a, .pagination span {
+        padding: 7px 18px;
+        border: 1px solid #eee;
+        margin-left: -2px;
+        margin-right: -2px;
+        background-color: #ffffff;
+        display: inline-block;
+        font-size: 12px;
+      }
+      .pagination a {
+        &:hover {
+          background-color: #f1f1f1;
+          color: #333;
+        }
+      }
+      .pagination {
+        text-align: center;
+        margin-top: 2.5em;
+      }
+    }
+  }
+
+/** Footer **/
+  .site-footer {
+    border-top: 1px solid $light-grey;
+    width: 100%;
+    height: 100px;
+    position: relative;
+
+    .footer-container {
+      padding: $base-spacing;
+      margin: auto;
+      height: 100px;
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+}

data/_sass/bajawa/media.scss

@@ -0,0 +1,77 @@
+/** Media Responsiveness **/
+@media screen and (max-width: 600px) {
+  .navbar-right a:not(:first-child) {
+    display: none;
+  }
+  .navbar-right a.icon {
+    float: right;
+    display: block;
+    font-size: 1em*2;
+  }
+  .hero-img {
+    height: 400px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .navbar-right.responsive {
+    position: relative;
+  }
+  .navbar-right.responsive .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .navbar-right.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  .recent-post-wrapper {
+    width: 100%;
+
+    .recent-post-container {
+      margin: 0 auto 0 auto;
+
+      .post-entry-grid {
+        margin: 0 $base-spacing 0 $base-spacing;
+
+        .entry-flex {
+          padding-bottom: $base-spacing;
+        }
+      }
+    }
+    .button-post {
+      margin-left: 30%;
+      margin-right: 30%;
+      text-align: center;
+    }
+  }
+  .page-wrapper {
+    width: 100%;
+
+    .page-header {
+    height: 100px;
+    margin: 2em auto 2em auto;
+    }
+  }
+  .post-wrapper {
+    .post-header {
+      margin: 1em auto 1em auto;
+      height: 100px;
+
+      .post-title {
+        font-size: 20px;
+      }
+      .post-meta {
+        margin: 0;
+      }
+    }
+    .post-content {
+      margin: $base-spacing*2 auto $base-spacing*2 auto;
+    }
+  }
+}

data/_sass/bajawa/reset.scss

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

data/_sass/bajawa/syntax-highlighting.scss

@@ -0,0 +1 @@
+/** Syntax Highlighting **/

data/_sass/bajawa/typography.scss

@@ -0,0 +1,249 @@
+body {
+  color: $base-font-color;
+  font-family: $base-font-type;
+  //font-feature-settings: "kern", "liga", "pnum";
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-type;
+  font-size: $base-font-size;
+  line-height: $heading-line-height;
+  margin: $small-spacing 0 $small-spacing 0;
+  font-weight: 700;
+}
+
+h1 {
+  font-size: rem(30);
+}
+
+h2 {
+  font-size: rem(26);
+}
+
+h3 {
+  font-size: rem(24);
+}
+
+h4 {
+  font-size: rem(20);
+}
+
+h5,
+h6 {
+  font-size: rem(16);
+}
+
+/** Fonts Awesome **/
+i.fa {
+  color: $dark-berry;
+}
+
+/** Site Header **/
+h1.logo-left {
+  font-size: 24px;
+  font-weight: 400;
+}
+
+.navbar-right {
+  li {
+    font-family: $alternate-font-type;
+    font-size: 14px;
+  }
+}
+
+/** Hero Image **/
+.hero-text {
+  font-family: $base-font-type;
+  color: $white;
+}
+
+.hero-title {
+  font-size: $page-title;
+  font-weight: normal;
+}
+
+.hero-desc {
+  font-family: $base-font-type;
+  font-weight: 400;
+}
+
+/** Front Page Recent Post **/
+.recent-post-container {
+  .section-title {
+    text-align: center;
+    font-weight: normal;
+    font-size: $page-title;
+    color: $dark-berry;
+  }
+  .post-entry-grid {
+    .entry-flex {
+      .post-title {
+        font-family: $alternate-font-type;
+        font-size: 20px;
+
+        a:hover {
+          color: $light-berry;
+          text-decoration: underline;
+        }
+      }
+      .post-excerpt {
+        color: $dark-grey;
+        font-weight: lighter;
+      }
+      .post-meta {
+        font-family: $base-font-type;
+        font-size: 12px;
+        color: $dark-grey;
+      }
+    }
+  }
+}
+
+/** POST TYPOGRAPHY **/
+
+.blogpost-title {
+  h3 {
+    font-family: $alternate-font-type;
+    font-size: 18px;
+    margin: $base-spacing/2 0 0 0;
+  }
+  p {
+    font-family: $base-font-type;
+    font-size: 14px;
+    margin: 1em 0 1em 0;
+  }
+  span {
+    font-size: 12px;
+  }
+}
+
+h1.post-title {
+  color: $dark-berry;
+  font-size: $page-title;
+  font-weight: normal;
+}
+
+.post-content h1,h2,h3 {
+  font-weight: normal;
+}
+
+p.post-meta {
+  font-size: $page-title/2;
+}
+
+h1#page-title.page-title {
+  color: $dark-berry;
+  font-size: $page-title;
+}
+
+p {
+  margin: $small-spacing*2 0 $small-spacing*2 0;
+
+  &.lead {
+    font-size: rem(22);
+    font-weight: 300;
+  }
+}
+
+a {
+  color: $action-color;
+  text-decoration: none;
+  transition: color $base-duration $base-timing;
+
+  &:active,
+  &:focus {
+    color: shade($action-color, 25%);
+  }
+  &:hover {
+    color: $light-berry;
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}
+
+blockquote {
+  padding: $base-spacing 0 $base-spacing $base-spacing;
+  margin: $base-spacing 0;
+  color: $dark-grey;
+  line-height: 1.8;
+  border-left: $small-spacing solid $light-grey;
+  background-color: lighten($light-grey, 15%);
+  p {
+    margin: 0;
+  }
+}
+
+code {
+  background: none;
+  border-radius: 3px;
+  border: none;
+  font-family: $plaintext-font-type;
+  font-size: 1em;
+  margin: 0;
+  padding: 0 5px;
+  background-color: lighten($light-berry, 25%);
+}
+
+pre {
+  -webkit-overflow-scrolling: touch;
+  font-family: $plaintext-font-type;
+  font-size: 1em;
+  margin: 0;
+  padding: 5px 10px !important;
+  overflow: auto;
+  max-height: 60em;
+  white-space: pre;
+  border: 1px solid $light-grey;
+  background-color: $light-grey;
+
+  code {
+    line-height: 1.75em;
+    padding: 0 !important;
+    background-color: $light-grey;
+  }
+}
+
+strong {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+ul,
+ol,
+dl {
+    margin-top: 0;
+    margin-left: 1.2em;
+    margin-bottom: 1rem;
+    list-style-type: square;
+    list-style-position: outside;
+    list-style-image: none;
+}
+
+/** FOOTER **/
+footer .copyright, .credits {
+  font-size: 12px;
+  text-align: center;
+
+}