minimaterialize 1.1.0 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fadd52cb4d8bf18dbe033dbd7aa83eaf7e981c8f
-  data.tar.gz: a8ffa0b53b1229f6ef6d850398ed134008da666a
+  metadata.gz: ea55cdce64a96fe61aa6f2bb368a9df2b124b6f9
+  data.tar.gz: 13059122503e11f184a8a4ad3166ddf944dc0115
 SHA512:
-  metadata.gz: b192830d6b46a37002b6d0c3ac7c53d572700ddbaba28901566202c300018aaab1c70acd590ab93e0757cbd372caaccb2bc612a8988dc6c60674804b67708398
-  data.tar.gz: b8f02bf348a27e9b04bf25ebaf033e5262036dbbb3ecc933df57370dfbc50f7f8025d61ea0b15051bf9cd212ef263d651142c337ee073350180d102a763fe723
+  metadata.gz: 8c69eb6d8dd081f087245c61a7df2569a67f7c85a8bc97f00d1f5a87aa832412c71273a05b4e8b2c482c3b71d7c572156c19208b4f65a86206dd2bf18bc81b68
+  data.tar.gz: 278a14f2c5123638b4d63d5c6020094f522582c4b4beb311a2570c1be14ec63b95a89235ed82b97fa3454ae5297c7f76b3ff4ae0c0c38b7d2887d8227065bf7f

data/README.md

@@ -1,18 +1,8 @@
 # Minimaterialize
 
-**WARNING:** Work in progress.
-
 This is a fork of the [default Jekyll starter
 theme](https://github.com/jekyll/minima), wired up with the [materialize css
-framework](https://materializecss.com/) by Google. I wanted to build a Jekyll
-blog with Material Design, and figured why not release a bootstrap that other's
-can work with before hacking in my own code. Enjoy, and feel free to send in a
-PR with a cool fix or feature!
-
-**TODO:** 
-
-- exclude node_modules from build, replace with assets/vendor or something
-- Update screenshot
+framework](https://materializecss.com/) by Google. I wanted to build a Jekyll blog with Material Design, and figured why not release a bootstrap that other's can work with before hacking in my own code. Enjoy, and feel free to send in a PR with a cool fix or feature!
 
 > ***Minima** is a one-size-fits-all Jekyll theme for writers*. It's Jekyll's default (and first) theme. It's what you get when you run `jekyll new`.
 
@@ -37,7 +27,6 @@ theme: minimaterialize
 And then execute:
 
 ```shell
-npm install
 bundle install
 ```
 
@@ -81,18 +70,7 @@ Refers to snippets of code within the `_includes` directory that can be inserted
 The minima styles have been totally removed in favor of Materialize.
 see `_sass/main.scss` to control what's included and add your own. 
 
-To make managing Materialize CSS nice, it is included as an npm package. The
-path to it is set up in *_config.yml* under `sass:`.
-
-```yaml
-sass:
-  load_paths:
-    - _sass
-    - node_modules/materialize-css/sass
-```
-
-If you want to use another npm package that has styles, you can just add its
-load path to the above.
+`script/build` copies the materialize assets into `_sass/`.
 
 ### Assets
 
@@ -103,7 +81,7 @@ This directory can include sub-directories to manage assets of similar type, and
 
 ### Plugins
 
-Minima comes with [`jekyll-seo-tag`](https://github.com/jekyll/jekyll-seo-tag) plugin preinstalled to make sure your website gets the most useful meta tags. See [usage](https://github.com/jekyll/jekyll-seo-tag#usage) to know how to set it up.
+Minimaterialize comes with [`jekyll-seo-tag`](https://github.com/jekyll/jekyll-seo-tag) plugin preinstalled to make sure your website gets the most useful meta tags. See [usage](https://github.com/jekyll/jekyll-seo-tag#usage) to know how to set it up.
 
 ## Usage
 
@@ -133,11 +111,11 @@ help you understand what's going on behind the scenes and how to customize your
 site.**
 
 To override the default structure and style of minimaterialize, create the concerned directory at the root of your site, copy the file you wish to customize to that directory, and then edit the file.
-e.g., to override the [`_includes/head.html `](_includes/head.html) file to specify a custom style path, create an `_includes` directory, copy `_includes/head.html` from minimaterialize gem folder to `<yoursite>/_includes` and start editing that file.
+e.g., to override the [`_includes/head.html `](_includes/head.html) file to specify a custom style path, create an `_includes` dirsimply ectory, copy `_includes/head.html` from minimaterialize gem folder to `<yoursite>/_includes` and start editing that file.
 
 #### Styles
 
-Each individula materialize sass component is included separately in
+Each individual materialize sass component is included separately in
 `_sass/main.scss`. To reduce unused css, you can comment out or delete the
 components you are not using.
 

data/_layouts/default.html

@@ -13,7 +13,7 @@
 
     {%- include footer.html -%}
 
-    <script src="{{'/node_modules/materialize-css/dist/js/materialize.min.js' | prepend: site.baseurl}}"></script>
+    <script src="{{'/assets/javascript/materialize.min.js' | prepend: site.baseurl}}"></script>
     <script src="{{'/assets/javascript/main.js' | prepend: site.baseurl}}"></script>
 
   </body>

data/_sass/components/_badges.scss

@@ -0,0 +1,55 @@
+// Badges
+span.badge {
+  min-width: 3rem;
+  padding: 0 6px;
+  margin-left: 14px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: $badge-height;
+  height: $badge-height;
+  color: color('grey', 'darken-1');
+  float: right;
+  box-sizing: border-box;
+
+  &.new {
+    font-weight: 300;
+    font-size: 0.8rem;
+    color: #fff;
+    background-color: $badge-bg-color;
+    border-radius: 2px;
+  }
+  &.new:after {
+    content: " new";
+  }
+
+  &[data-badge-caption]::after {
+    content: " " attr(data-badge-caption);
+  }
+}
+
+// Special cases
+nav ul a span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: 4px;
+  line-height: $badge-height;
+  height: $badge-height;
+  -webkit-font-smoothing: auto;
+}
+
+// Line height centering
+.collection-item span.badge {
+  margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
+}
+.collapsible span.badge {
+  margin-left: auto;
+}
+.sidenav span.badge {
+  margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
+}
+
+table span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: auto;
+}

data/_sass/components/_buttons.scss

@@ -0,0 +1,322 @@
+// shared styles
+.btn,
+.btn-flat {
+  border: $button-border;
+  border-radius: $button-radius;
+  display: inline-block;
+  height: $button-height;
+  line-height: $button-height;
+  padding: $button-padding;
+  text-transform: uppercase;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+}
+
+// Disabled shared style
+.btn.disabled,
+.btn-floating.disabled,
+.btn-large.disabled,
+.btn-small.disabled,
+.btn-flat.disabled,
+.btn:disabled,
+.btn-floating:disabled,
+.btn-large:disabled,
+.btn-small:disabled,
+.btn-flat:disabled,
+.btn[disabled],
+.btn-floating[disabled],
+.btn-large[disabled],
+.btn-small[disabled],
+.btn-flat[disabled] {
+  pointer-events: none;
+  background-color: $button-disabled-background !important;
+  box-shadow: none;
+  color: $button-disabled-color !important;
+  cursor: default;
+  &:hover {
+    background-color: $button-disabled-background !important;
+    color: $button-disabled-color !important;
+  }
+}
+
+// Shared icon styles
+.btn,
+.btn-floating,
+.btn-large,
+.btn-small,
+.btn-flat {
+  font-size: $button-font-size;
+  outline: 0;
+  i {
+    font-size: $button-icon-font-size;
+    line-height: inherit;
+  }
+}
+
+// Shared focus button style
+.btn,
+.btn-floating {
+  &:focus {
+    background-color: darken($button-raised-background, 10%);
+  }
+}
+
+// Raised Button
+.btn {
+  text-decoration: none;
+  color: $button-raised-color;
+  background-color: $button-raised-background;
+  text-align: center;
+  letter-spacing: .5px;
+  @extend .z-depth-1;
+  transition: background-color .2s ease-out;
+  cursor: pointer;
+  &:hover {
+    background-color: $button-raised-background-hover;
+    @extend .z-depth-1-half;
+  }
+}
+
+// Floating button
+.btn-floating {
+  &:hover {
+    background-color: $button-floating-background-hover;
+    @extend .z-depth-1-half;
+  }
+  &:before {
+    border-radius: 0;
+  }
+  &.btn-large {
+    &.halfway-fab {
+      bottom: -$button-floating-large-size / 2;
+    }
+    width: $button-floating-large-size;
+    height: $button-floating-large-size;
+    padding: 0;
+    i {
+      line-height: $button-floating-large-size;
+    }
+  }
+
+  &.btn-small {
+    &.halfway-fab {
+      bottom: -$button-floating-small-size / 2;
+    }
+    width: $button-floating-small-size;
+    height: $button-floating-small-size;
+    i {
+      line-height: $button-floating-small-size;
+    }
+  }
+
+  &.halfway-fab {
+    &.left {
+      right: auto;
+      left: 24px;
+    }
+    position: absolute;
+    right: 24px;
+    bottom: -$button-floating-size / 2;
+  }
+  display: inline-block;
+  color: $button-floating-color;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  width: $button-floating-size;
+  height: $button-floating-size;
+  line-height: $button-floating-size;
+  padding: 0;
+  background-color: $button-floating-background;
+  border-radius: $button-floating-radius;
+  @extend .z-depth-1;
+  transition: background-color .3s;
+  cursor: pointer;
+  vertical-align: middle;
+  i {
+    width: inherit;
+    display: inline-block;
+    text-align: center;
+    color: $button-floating-color;
+    font-size: $button-large-icon-font-size;
+    line-height: $button-floating-size;
+  }
+}
+
+// button fix
+button.btn-floating {
+  border: $button-border;
+}
+
+// Fixed Action Button
+.fixed-action-btn {
+  &.active {
+    ul {
+      visibility: visible;
+    }
+  }
+
+  // Directions
+  &.direction-left,
+  &.direction-right {
+    padding: 0 0 0 15px;
+    ul {
+      text-align: right;
+      right: 64px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 100%;
+      left: auto;
+      /*width 100% only goes to width of button container */
+      width: 500px;
+      li {
+        display: inline-block;
+        margin: 7.5px 15px 0 0;
+      }
+    }
+  }
+  &.direction-right {
+    padding: 0 15px 0 0;
+    ul {
+      text-align: left;
+      direction: rtl;
+      left: 64px;
+      right: auto;
+      li {
+        margin: 7.5px 0 0 15px;
+      }
+    }
+  }
+  &.direction-bottom {
+    padding: 0 0 15px 0;
+    ul {
+      top: 64px;
+      bottom: auto;
+      display: flex;
+      flex-direction: column-reverse;
+      li {
+        margin: 15px 0 0 0;
+      }
+    }
+  }
+  &.toolbar {
+    &.active {
+      &>a i {
+        opacity: 0;
+      }
+    }
+    padding: 0;
+    height: $button-floating-large-size;
+    ul {
+      display: flex;
+      top: 0;
+      bottom: 0;
+      z-index: 1;
+      li {
+        flex: 1;
+        display: inline-block;
+        margin: 0;
+        height: 100%;
+        transition: none;
+        a {
+          display: block;
+          overflow: hidden;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-color: transparent;
+          box-shadow: none;
+          color: #fff;
+          line-height: $button-floating-large-size;
+          z-index: 1;
+          i {
+            line-height: inherit;
+          }
+        }
+      }
+    }
+  }
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 997;
+  ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+    margin: 0;
+    visibility: hidden;
+    li {
+      margin-bottom: 15px;
+    }
+    a.btn-floating {
+      opacity: 0;
+    }
+  }
+  .fab-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: $button-floating-size;
+    height: $button-floating-size;
+    background-color: $button-floating-background;
+    border-radius: $button-floating-radius;
+    transform: scale(0);
+  }
+}
+
+// Flat button
+.btn-flat {
+  box-shadow: none;
+  background-color: transparent;
+  color: $button-flat-color;
+  cursor: pointer;
+  transition: background-color .2s;
+  &:focus,
+  &:hover {
+    box-shadow: none;
+  }
+  &:focus {
+    background-color: rgba(0, 0, 0, .1);
+  }
+  &.disabled,
+  &.btn-flat[disabled]  {
+    background-color: transparent !important;
+    color: $button-flat-disabled-color !important;
+    cursor: default;
+  }
+}
+
+// Large button
+.btn-large {
+  @extend .btn;
+  height: $button-large-height;
+  line-height: $button-large-height;
+  font-size: $button-large-font-size;
+  padding: 0 28px;
+
+  i {
+    font-size: $button-large-icon-font-size;
+  }
+}
+
+// Small button
+.btn-small {
+  @extend .btn;
+  height: $button-small-height;
+  line-height: $button-small-height;
+  font-size: $button-small-font-size;
+  i {
+    font-size: $button-small-icon-font-size;
+  }
+}
+
+// Block button
+.btn-block {
+  display: block;
+}