cosy-jekyll-theme 1.0.3

data/_sass/_page.scss

@@ -0,0 +1,649 @@
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  background-color: $body-color;
+  overflow-x: hidden;
+}
+
+// Main
+// --------------------------------------------------
+.entry,
+.hentry {
+  @include clearfix;
+  h1, h2, h3, h4, h5, h6, p, li {
+    word-wrap: break-word;
+  }
+}
+
+.body-title {
+  display: block;
+}
+
+.hentry-dark {
+  background-color: $header-color;
+}
+
+.entry-content {
+  @include font-size(16);
+  word-wrap: break-word;
+  word-break: break-all;
+  // Dotted line underlines for links
+  p > a,
+  li > a {
+    border-bottom: 1px dotted lighten($link-color, 50);
+    &:hover {
+      border-bottom-style: solid;
+    }
+  }
+}
+
+///sections
+
+.content-header-title {
+  text-align: center;
+  margin: 30px 0 0;
+  h1 {
+    margin: 10px 20px;
+    font-weight: 700;
+    @include font-rem(32);
+    color: lighten($base-color, 20);
+    @media #{$medium} {
+      @include font-rem(48);
+    }
+    @media #{$large} {
+      @include font-rem(60);
+    }
+  }
+  h2 {
+    margin: 0;
+    @include font-rem(18);
+    text-transform: uppercase;
+    color: lighten($base-color, 40);
+    @media #{$medium} {
+      @include font-rem(24);
+    }
+  }
+  p {
+    color: lighten($base-color, 20);
+  }
+}
+
+// Feature Image Caption
+.image-credit {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 0 auto;
+  max-width: 440px;
+  padding: 10px 15px;
+  background-color: rgba($base-color, 0.5);
+  color: $white;
+  @include font-rem(12);
+  text-align: right;
+  @include border-radius(3px, 0, 0, 3px);
+  z-index: 10;
+  @media #{$medium} {
+    max-width: 760px;
+  }
+  @media #{$large} {
+    max-width: 960px;
+  }
+  a {
+    color: $white;
+    text-decoration: none;
+  }
+}
+
+// Single Post and Page
+// --------------------------------------------------
+.entry-meta {
+  @include font-rem(12);
+  margin-left: 10px;
+  color: lighten($base-color, 60);
+  a {
+    color: lighten($base-color, 60);
+  }
+  .vcard {
+    &:before {
+      content: "bye";
+    }
+  }
+  .tag {
+    display: inline-block;
+    margin: 4px;
+    color: $white;
+    @include rounded(3px);
+    background-color: lighten($base-color, 50);
+    span {
+      float: left;
+      padding: 2px 6px;
+    }
+    .count {
+      background-color: lighten($base-color, 40);
+      @include border-radius(3px, 3px, 0, 0);
+    }
+    &:hover {
+      background-color: lighten($base-color, 40);
+    }
+  }
+  .entry-reading-time {
+    float: right;
+  }
+}
+
+header .entry-meta {
+  display: none; // hide header meta on small screens
+  @media #{$medium} {
+    display: block;
+  }
+}
+
+#post,
+#page {
+  .entry-content {
+    margin: 30px 2px 20px 2px;
+    padding: 10px 15px;
+    background-color: $white;
+    box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
+    @include rounded(3px);
+    @media #{$medium} {
+      margin-left: 10px;
+      margin-right: 10px;
+      padding: 20px 30px;
+    }
+    @media #{$large} {
+      max-width: 800px;
+      margin: 30px auto 30px auto;
+      padding: 50px 80px;
+      > p:first-child {
+        @include font-size(20);
+      }
+    }
+  }
+  #disqus_thread {
+    margin: 40px 2px 20px 2px;
+    padding: 10px 15px;
+    background-color: $white;
+    box-shadow: 0 0 0 1px rgba($border-color, 0.1), 0 6px 12px rgba($black, 0.1);
+    @include rounded(3px);
+    @media #{$medium} {
+      margin-left: 10px;
+      margin-right: 10px;
+      padding: 20px 30px;
+    }
+    @media #{$large} {
+      max-width: 800px;
+      padding: 50px 80px;
+      margin: 0 auto 30px auto;
+    }
+  }
+  .entry-meta {
+    margin: 50px 30px 30px;
+    text-align: center;
+  }
+}
+
+.entry-tags {
+  display: block;
+  margin-bottom: 6px;
+}
+
+.tag-heading,
+.year-heading {
+  margin-top: 0;
+}
+
+.tag-list{
+  line-height: 1.5;
+}
+
+// Go to the exact location of bookmarks in tags, categories
+.anchor-bookmark {
+  display: block;
+  height: $menu-height; /*same height as header*/
+  margin-top: -$menu-height; /*same height as header*/
+  visibility: hidden;
+}
+
+// Permalink icon for link post
+.permalink {
+  margin-right: 7px;
+}
+
+// Post Pagination Module
+.pagination {
+  margin: 20px 10px;
+  text-align: center;
+  ul {
+    display: inline;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  li {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+  .current-page {
+    font-weight: 700;
+  }
+}
+
+// Read More Module
+.read-more {
+  position: relative;
+  margin: 40px 2px 20px 2px;
+  padding: 40px 15px 25px;
+  background-color: $white;
+  box-shadow: 0 0 0 1px rgba($border-color, 0.1), 0 6px 12px rgba($black, 0.1);
+  @include rounded(3px);
+  @media #{$medium} {
+    margin: 50px 10px 20px 10px;
+    padding: 50px 40px 25px;
+  }
+  @media #{$large} {
+    max-width: 800px;
+    padding: 50px 80px;
+    margin: 60px auto;
+  }
+  text-align: center;
+  @include clearfix;
+}
+
+.read-more-header {
+  position: absolute;
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 35px;
+  a {
+    @extend .btn;
+  }
+}
+
+.read-more-content {
+  @include font-size(16);
+  // Dotted line underlines for links
+  p {
+    text-align: left;
+  }
+  p > a,
+  li > a {
+    border-bottom: 1px dotted lighten($link-color, 50);
+    &:hover {
+      border-bottom-style: solid;
+    }
+  }
+  h3 {
+    margin: 0;
+    @include font-rem(28);
+    a {
+      color: $text-color;
+    }
+    @media #{$medium} {
+      @include font-rem(36);
+    }
+  }
+}
+
+.list-inline {
+  padding-left: 0;
+  margin-left: -5px;
+  list-style: none;
+}
+
+.list-inline > li {
+  display: inline-block;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.read-more-list {
+  border-top: solid 2px lighten($base-color, 80);
+}
+
+.list-item {
+  width: 100%;
+  text-align: left;
+  h4 {
+    @include font-rem(18);
+    margin-bottom: 0;
+  }
+  span {
+    display: block;
+    @include font-rem(14);
+    color: lighten($base-color, 50);
+  }
+  @media #{$medium} {
+    width: 49%;
+    float: left;
+    &:nth-child(2) {
+      text-align: right;
+    }
+  }
+}
+
+// Post Index
+// --------------------------------------------------
+#post-index {
+  #main {
+    margin: 30px 2px 20px 2px;
+    @media #{$medium} {
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+    @media #{$large} {
+      max-width: 800px;
+      margin-top: 50px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  article {
+    background-color: $white;
+    box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color, 0.1);
+    @include rounded(3px);
+    margin-bottom: 20px;
+    padding: 15px;
+    @media #{$medium} {
+      padding: 30px;
+    }
+    @media #{$large} {
+      margin-bottom: 30px;
+      padding: 30px 80px;
+    }
+  }
+}
+
+.entry-image-index {
+  margin-top: -25px;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 10px;
+  position: relative;
+  @media #{$medium} {
+    margin-top: -30px;
+    margin-left: -30px;
+    margin-right: -30px;
+    margin-bottom: 15px;
+  }
+  @media #{$large} {
+    margin-top: -50px;
+    margin-left: -80px;
+    margin-right: -80px;
+    margin-bottom: 20px;
+  }
+  img {
+    @include border-radius(3px, 0, 0, 3px); // round image corners
+  }
+}
+
+// Footer
+// --------------------------------------------------
+.footer-wrapper {
+  @include clearfix;
+  margin: 2em auto;
+  text-align: center;
+  color: lighten($text-color, 20);
+  a {
+    color: lighten($text-color, 20);
+  }
+}
+
+// Browser Upgrade
+// --------------------------------------------------
+.upgrade {
+  padding: 10px;
+  text-align: center;
+}
+
+// Google Search
+// --------------------------------------------------
+#goog-fixurl {
+  ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+    li {
+      list-style-type: none;
+    }
+  }
+}
+
+#goog-wm-qt {
+  width: auto;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  display: inline-block;
+  @include font-rem(14);
+  background-color: $white;
+  color: $text-color;
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: lighten($primary, 50);
+  @include rounded(3px);
+}
+
+#goog-wm-sb {
+  @extend .btn;
+}
+
+// Header
+// --------------------------------------------------
+.entry-header {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 50px;
+  @media #{$medium} {
+    background-color: $header-color;
+    min-height: 260px;
+  }
+}
+
+.header-title {
+  margin-top: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 1;
+  display: none;
+  @media #{$medium} {
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+    @include flex-direction(column);
+    min-height: 200px;
+    margin-top: 60px;
+  }
+  h2 {
+    color: $white;
+  }
+  h1 {
+    font-weight: 700;
+    margin-bottom: 20px;
+    @include font-rem(32);
+    color: $white;
+    text-shadow: 1px 1px 4px rgba($base-color, 0.6);
+    display: block;
+    a {
+      color: $white;
+    }
+    @media #{$medium} {
+      @include font-rem(26);
+    }
+    @media #{$large} {
+      @include font-rem(36);
+    }
+  }
+  h1.post-title {
+    display: block;
+    @media #{$medium}{
+      display: none;
+    }
+  }
+  p {
+    color: $white;
+  }
+}
+
+.header-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $menu-height;
+  z-index: 20;
+  ul {
+    margin: 0 auto;
+    list-style-type: none;
+    height: 100%;
+    padding: 0;
+    @media #{$large} {
+      max-width: 900px;
+    }
+  }
+}
+
+.header-menu-top {
+  background-color: $menu-top;
+  box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
+}
+
+.header-menu-overflow {
+  background-color: $menu-overflow;
+  z-index: 100;
+  box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
+  display: none;
+}
+
+.header-menu-overflow ul li a {
+  color: $white;
+}
+
+.header-menu-top .sub-item {
+  background-color: $menu-top;
+}
+
+.header-menu-overflow .sub-item {
+  background-color: $menu-overflow;
+}
+
+.header-item,
+.header-item-title {
+  float: right;
+  padding-left: 20px;
+  padding-right: 20px;
+  border-top-color: transparent;
+  border-top-style: solid;
+  border-top-width: 5px;
+  box-sizing: border-box;
+
+  a {
+    vertical-align: middle;
+    display: table-cell;
+    height: $menu-height - 2;
+    font-size: 12px;
+  }
+}
+
+///sections
+.logo {
+  width: $menu-height;
+  height: $menu-height;
+  float: left;
+  padding: 10px;
+}
+
+.header-item-container {
+  height: 100%;
+}
+
+.header-item {
+  height: 100%;
+  @media #{$large} {
+    display: block;
+  }
+}
+
+.header-item-title {
+  float: left;
+  border-top-width: 0px;
+  height: 100%;
+  a.title {
+    font-size: 1.5rem;
+    padding-left: 5px;
+    vertical-align: middle;
+    height: $menu-height - 2;
+    @media #{$medium}{
+      display: table-cell;
+    }
+  }
+}
+
+.header-item.active,
+.header-item:hover {
+  border-top-color: $header-margin;
+}
+
+.header-item:hover .header-submenu {
+  display: block;
+  position: absolute;
+}
+
+.header-submenu {
+  display: none;
+  border-top: 2px solid $header-margin;
+  width: 200px;
+  z-index: 100;
+  list-style-type: none;
+  transform: translateX(-25%);
+}
+
+.sub-item {
+  position: relative;
+  padding-left: 10px;
+  width: 100%;
+  border-bottom: 1px solid gray;
+  border-left: 1px solid;
+  height: 50px;
+  text-decoration: none;
+}
+
+.sub-item a {
+  vertical-align: middle;
+  display: table-cell;
+  height: 50px;
+}
+
+.sub-item:hover {
+  border-bottom-color: $header-margin;
+  border-left-color: $header-margin;
+}
+
+.button-twitter {
+  color: $white;
+  position: fixed;
+  margin-top: $menu-height / 2 - 20;
+  margin-right: 10px;
+  top: 0;
+  right: 0;
+  z-index: 10000000000;
+  @media #{$large}{
+    top: auto;
+    bottom: 0;
+  }
+
+  span {
+    display: none;
+    @media #{$medium}{
+      display: inline;
+    }
+  }
+}
+
+footer {
+  font-size: 13px;
+}