index.styl

@import "../Pisces/_layout";
@import "../Pisces/_brand";
@import "../Pisces/_menu";
@import "../Pisces/_sub-menu";
@import "../Pisces/_sidebar";
// Import _posts if want to justify text-align on mobile.
//@import "../Pisces/_posts";

// =================================================
// Rewrite _layout.styl
// =================================================
// Sidebar padding used as main desktop content padding for sidebar padding and post blocks padding too.

// In main NexT config set `sidebar: offset: 12` option as main padding.
// In `source/css/_variables/Gemini.styl` there are variables for other resolutions:
// $content-tablet-paddin            = 10px;
// $content-mobile-padding           = 8px;
// P.S. If u want to change this paddings u may set this variables into `source/css/_variables/custom.styl`.

// So, it will 12px in Desktop, 10px in Tablets and 8px in Mobiles for all possible paddings.
// =================================================
// Read values from NexT config and set they as local variables to use as string variables (in any CSS section).
hexo-config('sidebar.offset') is a 'unit' ? (sboffset = unit(hexo-config('sidebar.offset'), px)) : (sboffset = 0)
use_seo = hexo-config('seo');

// Maximum content width.
// =================================================
$max-content-width = hexo-config('max_content_width')
if $max-content-width {
  .header,
  .container .main-inner,
  .footer-inner {
    max-width: unquote($max-content-width);
  }
}

// =================================================
// Desktop layout styles.
// =================================================
// Post blocks.
.content-wrap {
  padding: initial;
  background: initial;
  box-shadow: initial;
  border-radius: initial;
}

// Post & Comments blocks.
.post-block {
  padding: $content-desktop-padding;
  background: white;
  box-shadow: $box-shadow-inner;
  border-radius: $border-radius-inner;
}

// When blocks are siblings (homepage).
#posts > article + article {
  .post-block {
    margin-top: sboffset;
    // Rewrite shadows & borders because all blocks have offsets.
    box-shadow: $box-shadow;
    border-radius: $border-radius;
  }
}

// Comments blocks.
.comments {
  padding: $content-desktop-padding;
  margin: initial;
  margin-top: sboffset;
  background: white;
  box-shadow: $box-shadow;
  border-radius: $border-radius;
}

// Top main padding from header to posts (default 40px).
.posts-expand {
  padding-top: initial;
}

// Post navigation items.
.post-nav-divider {
  width: 4%;
}
.post-nav-item {
  width: 48%;
}

// Post delimiters.
.post-eof,
.post-spread {
  hide();
}

// Pagination.
.pagination {
  .prev, .next, .page-number {
    margin-bottom: initial;
    top: initial;
  }
  margin: sboffset 0 0;
  border-top: initial;
  background: white;
  box-shadow: $box-shadow;
  border-radius: $border-radius;
  padding: 10px 0 10px;
}

// Footer alignment.
.main {
  padding-bottom: initial;
}
.footer {
  bottom: auto;
}

// Sub-menu(s).
.sub-menu {
  border-bottom: initial !important;
  box-shadow: $box-shadow-inner;
  // Adapt submenu(s) with post-blocks.
  &+ #content > #posts {
    .post-block {
      box-shadow: $box-shadow;
      margin-top: sboffset;
      +tablet() {
        margin-top: $content-tablet-padding;
      }
      +mobile() {
        margin-top: $content-mobile-padding;
      }
    }
  }
}

// =================================================
// Headers.
// =================================================
// No need anymore?
.post-header {
  h1, h2 {
    margin: initial;
  }
}
.posts-expand .post-title-link {
  line-height: inherit;
}
.posts-expand .post-title {
  font-size: 1.7em;
}
.post-body {
  h1 {
    font-size: 1.6em;
    border-bottom: 1px solid $body-bg-color;
  }
  h2 {
    font-size: 1.45em;
    border-bottom: 1px solid $body-bg-color;
  }
  h3 {
    font-size: 1.3em;
    if use_seo {
      border-bottom: 1px solid $body-bg-color;
    } else {
      border-bottom: 1px dotted $body-bg-color;
    }
  }
  h4 {
    font-size: 1.2em;
    if use_seo {
      border-bottom: 1px dotted $body-bg-color;
    }
  }
  h5 {
    font-size: 1.07em;
  }
  h6 {
    font-size: 1.03em;
  }
}

// =================================================
// > 768px & < 991px
// =================================================
+tablet() {

  // Posts in blocks.
  .content-wrap {
    padding: $content-tablet-padding;
  }
  .posts-expand {
    margin: initial;

    // Components inside Posts.
    .post-button {
      margin-top: ($content-tablet-padding * 2);
    }
  }

  .post-block {
    // Inside posts blocks content padding (default 40px).
    padding: ($content-tablet-padding * 2);
    // Rewrite shadows & borders because all blocks have offsets.
    box-shadow: $box-shadow;
    border-radius: $border-radius;
  }

  // Only if blocks are siblings need bottom margin (homepage).
  #posts > article + article {
    .post-block {
      margin-top: $content-tablet-padding;
    }
  }

  .comments {
    margin-top: $content-tablet-padding;
    padding: $content-tablet-padding ($content-tablet-padding * 2);
    //padding: initial;
    //padding-top: $content-tablet-padding;
  }

  .pagination {
    margin: $content-tablet-padding 0 0;
  }

}
// =================================================
// < 767px
// =================================================
+mobile() {

  // Posts in blocks.
  .content-wrap {
    padding: $content-mobile-padding;
  }
  .posts-expand {
    margin: initial;

    // Components inside Posts.
    .post-button {
      margin-top: sboffset;
      //padding-bottom : 15px;
    }
    img {
      padding: initial !important;
    }
  }

  .post-block {
    // Inside posts blocks content padding (default 40px).
    padding: sboffset;
    min-height: auto;
    // Rewrite shadows & borders because all blocks have offsets.
    box-shadow: $box-shadow;
    border-radius: $border-radius;
  }

  // Only if blocks are siblings need bottom margin (homepage).
  #posts > article + article {
    .post-block {
      margin-top: $content-mobile-padding;
    }
  }

  .comments {
    margin-top: $content-mobile-padding;
    padding: 0 sboffset;
  }

  .pagination {
    margin: $content-mobile-padding 0 0;
  }

}