jekyll-theme-jsblog 1.0.0

data/_sass/jsblog/_layout.scss

@@ -0,0 +1,300 @@
+/**
+ * Site header
+ */
+.site-header {
+  height: 65px;
+  line-height: 65px;
+  background-color: $site-header-background-color;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  // Fancy affect
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+
+  // Positioning context for the mobile navigation icon
+  position: relative;
+}
+
+.site-title {
+  color: $site-header-text-color !important;
+  font-size: $site-title-font-size;
+  font-weight: $heavy-font-weight;
+  letter-spacing: -1px;
+  margin-bottom: 0;
+  float: left;
+
+  &,
+  &:visited {
+    color: $site-header-text-color-visited;
+  }
+
+  :hover {
+    opacity: $a-hover-opacity;
+    text-decoration: none;
+  }
+}
+
+.site-nav {
+  float: right;
+  font-size: $nav-font-size;
+
+  a:hover {
+    opacity: $a-hover-opacity;
+    text-decoration: none;
+  }
+
+  .page-link {
+    color: $site-header-text-color;
+    line-height: $base-line-height;
+
+    // Gaps between nav items, but not on the last one
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+
+  @include media-query($on-palm) {
+    .page-link {
+      padding: 20px 0;
+
+      &:not(:last-child) {
+        margin-right: 0;
+      }
+      margin-left: 20px;
+    }
+  }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  padding: 20px 0;
+  font-size: $site-footer-font-size;
+  color: --footer-text-color;
+  background-color: var(--footer-background-color);
+  text-align: center;
+}
+
+
+/**
+ * Page content
+ */
+.page-content {
+  padding-top: 50px;
+
+  @include media-query($on-medium) {
+    padding-top: 40px;
+  }
+
+  @include media-query($on-small) {
+    padding-top: 30px
+  }
+}
+
+.post-list {
+  margin-left: 0;
+  list-style: none;
+
+  .post-link:hover {
+    text-decoration: none;
+  }
+
+  > li {
+    padding-bottom: 0;
+
+    &:not(:first-child) {
+      padding-top: 50px;
+    }
+  }
+}
+
+.post-meta {
+  font-size: $meta-font-size;
+  line-height: 1.19048;
+  font-weight: 400;
+  letter-spacing: .011em;
+  color: $grey-color;
+
+  margin-top: .4em;
+
+  @include media-query($on-medium) {
+    font-size: $meta-small-font-size;
+    line-height: 1.21053;
+    letter-spacing: .012em;
+  }
+
+  @include media-query($on-small) {
+    font-size: $meta-small-font-size;
+    line-height: 1.21053;
+    letter-spacing: .012em;
+  }
+}
+
+.post-link {
+  &,
+  &:visited {
+    color: var(--text-color);
+  }
+}
+
+.post-continue {
+  a {
+    text-decoration: none;
+    color: $a-color;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// .post-continue {
+//   a {
+//     padding: 8px 15px;
+//     text-decoration: none;
+//
+//     &,
+//     &:visited {
+//       color: $grey-color;
+//       background-color: var(--grey-color-light);
+//     }
+//
+//     &:hover {
+//       color: white;
+//       background-color: $brand-color;
+//     }
+//   }
+// }
+
+
+
+/**
+ * Posts
+ */
+.post {
+  margin-left: auto;
+  margin-right: auto;
+
+  width: 100%;
+
+  @include media-query($on-small) {
+    width: 83.33333%;
+  }
+}
+
+.post-header {
+  margin-bottom: $spacing-unit;
+}
+
+.post-title {
+  font-size: $title-font-size;
+  line-height: 1.1;
+  font-weight: 600;
+  letter-spacing: 0em;
+  margin-bottom: 0px;
+
+  @include media-query($on-medium) {
+    font-size: $title-medium-font-size;
+    line-height: 1.125;
+    letter-spacing: .004em;
+  }
+
+
+  @include media-query($on-small) {
+    font-size: $title-small-font-size;
+    line-height: 1.14815;
+    letter-spacing: .008em;
+  }
+}
+
+.post-content {
+  margin-bottom: $spacing-unit;
+
+  // First paragraph is the lead
+  p:first-of-type {
+    font-size: $lead-font-size;
+    line-height: 1.5;
+    font-weight: 300;
+    letter-spacing: .017em;
+  }
+
+  // Headers
+
+  h1 {
+    font-size: $title-font-size;
+    line-height: 1.09375;
+    font-weight: 500;
+    letter-spacing: .011em;
+
+    @include media-query($on-medium) {
+      font-size: $title-small-font-size;
+      line-height: 1.1073;
+      letter-spacing: .012em;
+    }
+  }
+
+  h2 {
+    font-size: $subtitle-font-size;
+    line-height: 1.20849;
+    font-weight: 500;
+    letter-spacing: .015em;
+
+    @include media-query($on-medium) {
+      font-size: $subtitle-small-font-size;
+      line-height: 1.22739;
+      letter-spacing: .016em;
+    }
+  }
+
+  // TODO: Revise h3
+  h3 {
+    font-size: $lead-font-size;
+    line-height: 1.15667;
+    font-weight: 500;
+    letter-spacing: .016em;
+
+    @include media-query($on-medium) {
+      font-size: $lead-small-font-size;
+      line-height: 1.18182;
+      letter-spacing: .02em;
+    }
+  }
+}
+
+/**
+ * Pagination
+ */
+.pagination {
+  padding: $spacing-unit / 2 0;
+  border-top: 1px solid var(--grey-color-light);
+  border-bottom: 1px solid var(--grey-color-light);
+  text-align: center;
+  @extend %clearfix;
+
+  a {
+    &,
+    &:visited {
+      color: $grey-color;
+    }
+  }
+
+  .previous {
+    float: left;
+  }
+
+  .next {
+    float: right;
+  }
+}

data/_sass/jsblog/_syntax-highlighting.scss

@@ -0,0 +1,72 @@
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+  text-align: left;
+  background-color: var(--grey-color-lighter);
+  // @extend %vertical-rhythm;
+
+  .highlighter-rouge & {
+    background-color: var(--grey-color-lighter);
+  }
+
+  .c     { color: #998; font-style: italic } // Comment
+  .err   { color: #a61717; background-color: #e3d2d2 } // Error
+  .k     { font-weight: bold } // Keyword
+  .o     { font-weight: bold } // Operator
+  .cm    { color: #998; font-style: italic } // Comment.Multiline
+  .cp    { color: #999; font-weight: bold } // Comment.Preproc
+  .c1    { color: #998; font-style: italic } // Comment.Single
+  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+  .gd    { color: #000; background-color: #fdd } // Generic.Deleted
+  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+  .ge    { font-style: italic } // Generic.Emph
+  .gr    { color: #a00 } // Generic.Error
+  .gh    { color: #999 } // Generic.Heading
+  .gi    { color: #000; background-color: #dfd } // Generic.Inserted
+  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+  .go    { color: #888 } // Generic.Output
+  .gp    { color: #555 } // Generic.Prompt
+  .gs    { font-weight: bold } // Generic.Strong
+  .gu    { color: #aaa } // Generic.Subheading
+  .gt    { color: #a00 } // Generic.Traceback
+  .kc    { font-weight: bold } // Keyword.Constant
+  .kd    { font-weight: bold } // Keyword.Declaration
+  .kp    { font-weight: bold } // Keyword.Pseudo
+  .kr    { font-weight: bold } // Keyword.Reserved
+  .kt    { color: #458; font-weight: bold } // Keyword.Type
+  .m     { color: #099 } // Literal.Number
+  .s     { color: #d14 } // Literal.String
+  .na    { color: #008080 } // Name.Attribute
+  .nb    { color: #0086B3 } // Name.Builtin
+  .nc    { color: #458; font-weight: bold } // Name.Class
+  .no    { color: #008080 } // Name.Constant
+  .ni    { color: #800080 } // Name.Entity
+  .ne    { color: #900; font-weight: bold } // Name.Exception
+  .nf    { color: #900; font-weight: bold } // Name.Function
+  .nn    { color: #555 } // Name.Namespace
+  .nt    { color: #000080 } // Name.Tag
+  .nv    { color: #008080 } // Name.Variable
+  .ow    { font-weight: bold } // Operator.Word
+  .w     { color: #bbb } // Text.Whitespace
+  .mf    { color: #099 } // Literal.Number.Float
+  .mh    { color: #099 } // Literal.Number.Hex
+  .mi    { color: #099 } // Literal.Number.Integer
+  .mo    { color: #099 } // Literal.Number.Oct
+  .sb    { color: #d14 } // Literal.String.Backtick
+  .sc    { color: #d14 } // Literal.String.Char
+  .sd    { color: #d14 } // Literal.String.Doc
+  .s2    { color: #d14 } // Literal.String.Double
+  .se    { color: #d14 } // Literal.String.Escape
+  .sh    { color: #d14 } // Literal.String.Heredoc
+  .si    { color: #d14 } // Literal.String.Interpol
+  .sx    { color: #d14 } // Literal.String.Other
+  .sr    { color: #009926 } // Literal.String.Regex
+  .s1    { color: #d14 } // Literal.String.Single
+  .ss    { color: #990073 } // Literal.String.Symbol
+  .bp    { color: #999 } // Name.Builtin.Pseudo
+  .vc    { color: #008080 } // Name.Variable.Class
+  .vg    { color: #008080 } // Name.Variable.Global
+  .vi    { color: #008080 } // Name.Variable.Instance
+  .il    { color: #099 } // Literal.Number.Integer.Long
+}

data/assets/main.scss

@@ -0,0 +1,58 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+
+// Our variables
+
+// $base-font-family: -apple-system-font, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
+// $monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+// $base-font-size: 17px;
+// $nav-font-size: 16px;
+// $base-font-weight: 400;
+// $heavy-font-weight: 500;
+// $small-font-size: $base-font-size * 0.875;
+// $base-line-height: 1.5;
+//
+// $spacing-unit:     30px;
+//
+// // Link Colours
+// $a-color: #0070c9;
+// $a-hover-opacity: .65;
+//
+// // Colours
+// $text-color: #333;
+// $light-text-color: #fff;
+// $background-color: #fff;
+// $dark-background-color: #333;
+// $footer-background-color: #f2f2f2;
+// $brand-color:      #2568ba;
+// $a-color: #0070c9;
+//
+// $grey-color:       #828282;
+// $grey-color-light: lighten($grey-color, 40%);
+// $grey-color-dark:  darken($grey-color, 25%);
+//
+// // Width of the content area
+// $content-width:    980px;
+// $on-palm:          692px;
+// $on-laptop:        980px;
+
+// This theme also includes a mixin for defining media queries.
+// Use media queries like this:
+// @include media-query($on-palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+
+
+// Import partials from this theme.
+@import "jsblog";

metadata

@@ -0,0 +1,135 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-theme-jsblog
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Julian Schiavo
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-01-31 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
+- !ruby/object:Gem::Dependency
+  name: jekyll-paginate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+- !ruby/object:Gem::Dependency
+  name: jekyll-sitemap
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 
+email:
+- justdotjs@icloud.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- _includes/custom_comments_provider.html
+- _includes/fonts.html
+- _includes/footer.html
+- _includes/footer_content.html
+- _includes/google_analytics.html
+- _includes/head.html
+- _includes/head_custom.html
+- _includes/header.html
+- _includes/pagination.html
+- _layouts/default.html
+- _layouts/feed.xml
+- _layouts/home.html
+- _layouts/page.html
+- _layouts/post.html
+- _sass/jsblog.scss
+- _sass/jsblog/_base.scss
+- _sass/jsblog/_layout.scss
+- _sass/jsblog/_syntax-highlighting.scss
+- assets/main.scss
+homepage: https://github.com/justjs/jekyll-theme-jsblog
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.7.7
+signing_key: 
+specification_version: 4
+summary: Minimal, responsive Jekyll theme for my blog.
+test_files: []