MaterialDesignWanderlust 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c740809e4c125d4efe57015d7b2d42185bdb822a
+  data.tar.gz: 2e41585ccd1579d732829fa1e6e1a9ce933d2c97
+SHA512:
+  metadata.gz: 2645aa706b90293f87c5dc20ec25f67fa77693758e6da29c39c36b31becb2fddc9a795325da94af7c512f965c316171f155b109f9f248ee48c41d0f26b9c97f0
+  data.tar.gz: 9704966c420e0d6ce9bb097056c3ffaa836c8b5cdef1a70d2c2458d9141bb41cd08494df13e1be6fd41f25b2d0138e15f85ad06d05a4094ac0880e51384a55a1

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,58 @@
+#Work in Progress
+
+# materialDesignSunset
+
+Welcome to My first Jekyll Theme.
+This Theme is based on [Material Design Lite](http://getmdl.io) and specifically their Blog Theme.
+
+## Installation
+
+Add this line to your Jekyll site's Gemfile:
+
+```ruby
+gem "materialDesignSunset"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: materialDesignSunset
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install materialDesignSunset
+
+## Usage
+Use it as-is or pick one of the other syntax highlighters 
+
+use it as is or choose another Syntax Highlighter (Edit the include in css/base_css_file.scss)
+TODO: Write usage instructions here. Describe your available layouts, includes, and/or sass.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/AliKarpuzoglu/materialDesignSunset. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+
+##Notes
+Firewatch syntax highlighter - [OneDarkJekyll](https://github.com/mgyongyosi/OneDarkJekyll)
+
+Solarized syntax highlight  - [nicolashery's fork of scotu/solarized.css](https://gist.github.com/nicolashery/5765395)
+
+
+

data/_includes/drawer.html

@@ -0,0 +1,27 @@
+
+
+<div class="layout-transparent mdl-layout mdl-js-layout">
+  <header class="mdl-layout__header mdl-layout__header--transparent">
+    <div class="mdl-layout__header-row">
+      <!-- Title -->
+      <span class="mdl-layout-title"></span>
+      <!-- Add spacer, to align navigation to the right -->
+      <div class="mdl-layout-spacer"></div>
+      <!-- Navigation -->
+      <nav class="mdl-navigation">
+        <a class="mdl-navigation__link" href="">Blog</a>
+        <a class="mdl-navigation__link" href="">About</a>
+        <a class="mdl-navigation__link" href="">Contact</a>
+      </nav>
+    </div>
+  </header>
+  <div class="mdl-layout__drawer">
+    <span class="mdl-layout-title">Ali Karpuzoglu </span>
+    <nav class="mdl-navigation">
+      <a class="mdl-navigation__link" href="">Blog</a>
+      <a class="mdl-navigation__link" href="">About</a>
+      <a class="mdl-navigation__link" href="">Contact</a>
+    </nav>
+  </div>
+
+</div>

data/_includes/footer.html

@@ -0,0 +1,16 @@
+<footer class="mdl-mini-footer ">
+    <div class="mdl-mini-footer__left-section ">
+        <div class="me">Tuncay Ali Karpuzoglu</div>
+        <div class="disclaimer">created with <span class="heart">♥</span> and the use of <a href="https://getmdl.io">Material Design Lite</a></div>
+    </div>
+    <div class="mdl-mini-footer__right-section ">
+        <ul class="mdl-mini-footer__link-list ">
+            <li><a href="# ">LinkedIn</a></li>
+            <li>
+                <a href="# ">
+                    <img src="GitHub-Mark-32px.png" alt="Github">
+                </a>
+            </li>
+        </ul>
+    </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,30 @@
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="Ali Karpuzoglu.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+    <meta name="theme-color" content="#794c31">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Ali Karpuzoglu">
+    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+
+
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-orange.min.css">
+    <link rel="stylesheet" href="/css/base_css_file.css">
+
+</head>

data/_layouts/default.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+{% include head.html %}
+
+<body>
+    {% include drawer.html %}
+    <div class="mdl-layout__container">
+
+        <div class="mdl-layout blog">
+            <main class="mdl-layout__content">
+
+
+                {{ content }} 
+                {% include footer.html %}
+            </main>
+        </div>
+    </div>
+
+    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
+    {% include analytics.html %}
+</body>
+
+</html>

data/_layouts/post.html

@@ -0,0 +1,85 @@
+---
+layout: default 
+--- 
+ 
+<div class ="blog--post">
+
+        <div class="blog__posts mdl-grid">
+          <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
+                {% if page.image  == "" or page.image == nil %}
+            <div class="mdl-card__media mdl-color-text--grey-50">
+                 {% else %}
+        <div class="mdl-card__media mdl-color-text--grey-50" style="background: url( {{page.image}}) center/cover; ">
+   {% endif %}
+
+              <h3>{{ page.title }}</h3>  
+            </div>
+            <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
+              <div class="minilogo"></div>
+              <div>
+                <strong>{{page.author}}</strong>
+                <span>{{page.date}}</span>
+              </div>
+              <div class="section-spacer"></div>
+              <div>
+                <i class="material-icons" role="presentation">bookmark</i>
+                <span class="visuallyhidden">bookmark</span>
+              </div>
+              <div>
+                <button id="share-menu"
+        class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons" role="presentation">share</i>
+                
+                <span class="visuallyhidden">share</span>
+                </button>
+              </div>
+
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                for="share-menu">
+
+
+                 <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}&via={{ site.twitter_username }}&related={{ site.twitter_username }}" rel="nofollow" target="_blank" title="Share on Twitter">
+                 <li class="mdl-menu__item">Twitter</li>
+                 </a>
+    <a href="https://facebook.com/sharer.php?u={{ site.url }}{{ page.url }}" rel="nofollow" target="_blank" title="Share on Facebook">                  
+              <li class="mdl-menu__item">Facebook</li></a>
+
+             <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}&title={{ page.title }}&summary={{ page.description }}&source=AliKarpuzoglu">
+
+              <li class="mdl-menu__item mobile">LinkedIn</li></a>
+            </ul>
+
+            </div>
+            <div class="mdl-color-text--grey-700 mdl-card__supporting-text">
+                {{content}}
+                 {{include _comments}}
+            </div>
+           
+          </div>
+
+          <nav class="nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
+              {% if page.next.url %}
+
+            <a href="{{page.next.url}}" class="next nav__button">
+              <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
+                <i class="material-icons">arrow_back</i>
+              </button>
+              {{page.next.title}}
+            </a>
+              {% endif %}
+
+            <div class="section-spacer"></div>
+             {% if page.previous.url %}
+            <a href="{{page.previous.url}}" class="prev nav__button">
+              {{page.previous.title}}
+              <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
+                <i class="material-icons">arrow_forward</i>
+              </button>
+            </a>
+              {% endif %}
+
+
+          </nav>
+  
+        </div>       </div>
+        

data/_sass/_base.scss

@@ -0,0 +1,311 @@
+$background : "../assets/DSCN136150-QHD.JPG";
+
+body::before {
+  background-size: cover;
+  background-attachment: fixed;
+  content: '';
+  will-change: transform;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  position: fixed;
+}
+
+@media (max-width: 512px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 512px) and (min-resolution: 1.5dppx), (max-width: 1024px) and (-webkit-max-device-pixel-ratio: 1.5), (max-width: 1024px) and (max-resolution: 1.5dppx) {
+  body::before {
+    background-image: url($background);
+    background-size: cover/center;
+  }
+  #github {
+    background-image: "GitHub-Mark-32px.png";
+  }
+}
+
+@media (min-width: 513px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx), (min-width: 1025px) and (max-width: 2048px) and (-webkit-max-device-pixel-ratio: 1.5), (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {
+  body::before {
+    background-image: url($background);
+    background-size: cover/center;
+  }
+  #github {
+    background-image: "../assets/GitHub-Mark-32px.png";
+  }
+}
+
+@media (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1025px) and (min-resolution: 1.5dppx), (min-width: 2049px) and (-webkit-max-device-pixel-ratio: 1.5), (min-width: 2049px) and (max-resolution: 1.5dppx) {
+  body::before {
+    background-image: url($background);
+    background-size: cover/center;
+  }
+  #github {
+    background-image: "../assets/GitHub-Mark-32px.png";
+  }
+}
+
+.title-no-picture {
+  background-color: #263238;
+}
+
+h3.quote a {
+  color: white;
+  text-decoration: none;
+}
+
+body .blog {
+  font-family: 'Roboto', 'Helvetica', sans-serif;
+}
+
+.page-content {
+  max-width: 900px;
+  width: 100%;
+  margin: auto;
+}
+
+.blog {
+  .mdl-card h3 {
+    margin: 0;
+  }
+  &.mdl-layout .mdl-layout__content {
+    padding-top: 200px;
+  }
+  .mdl-card {
+    min-height: 360px;
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  }
+  .mdl-card__media, .mdl-card__title {
+    /* box-sizing: border-box; */
+    background-size: cover;
+    padding: 24px;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    /* display: flex; */
+    -webkit-flex-grow: 2;
+    -ms-flex-positive: 2;
+    /* flex-grow: 1; */
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-align-items: flex-end;
+    -ms-flex-align: end;
+    /* align-items: flex-end; */
+    cursor: pointer;
+  }
+  .card-meta {
+    > * {
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      height: auto;
+      justify-content: flex-start;
+      box-sizing: border-box;
+    }
+    .mdl-card__supporting-text {
+      min-height: 64px;
+    }
+  }
+  &:not(.blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
+
+.blog_posts {
+  max-width: 900px;
+  padding: 0;
+  display: flex;
+  margin: 0 auto;
+  flex-shrink: 0;
+}
+
+.blog-post {
+  &:hover, &:focus {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  }
+}
+
+.mdl-mini-footer__link-list {
+  max-height: 16px;
+}
+
+.disclaimer {
+  font-size: 90%;
+}
+
+.heart {
+  color: red;
+}
+
+.mdl-mini-footer .me {
+  font-weight: 600;
+}
+
+.blog .mdl-mini-footer {
+  margin-top: 80px;
+  height: 120px;
+  padding: 40px;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: white;
+  box-sizing: border-box;
+}
+
+pre.highlight {
+  background: #282c34;
+  color: #abb2bf;
+}
+
+.blog {
+  .blog__posts > .nav {
+    margin: 12px 15px;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    color: white;
+    font-weight: 500;
+    > .nav__button {
+      color: white;
+      text-decoration: none;
+    }
+  }
+  .section-spacer {
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+  .meta {
+    box-sizing: border-box;
+    padding: 16px;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    height: auto;
+    > * {
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+    }
+  }
+}
+
+.blog--blogpost .meta > * {
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.blog .mdl-card__supporting-text.meta {
+  width: 100%;
+  padding: 16px;
+  min-height: 64px;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.blog--post .mdl-card__supporting-text p {
+  max-width: 512px;
+  margin: 16px auto;
+  font-size: 16px;
+  line-height: 28px;
+}
+
+.blog .blog__posts {
+  max-width: 900px;
+  padding: 0;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  margin: 0 auto;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.blog--post .back {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  color: white;
+  z-index: 9999;
+}
+
+.highlight .lineno {
+  word-break: keep-all;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.gutter.gl {
+  text-align: right;
+  padding-right: 15px;
+  padding-left: 5px;
+  border-right: 1px solid #aaa;
+}
+
+.highlight {
+  .code {
+    padding-left: 10px;
+  }
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.blog--post .mdl-card__supporting-text {
+  margin: auto;
+}
+
+.blog_posts .mdl-card__media {
+  height: 170px;
+  a{
+    text-decoration:none;
+  }
+}
+
+.layout-transparent {
+  .mdl-layout__header, .mdl-layout__drawer-button {
+    /* This background is dark, so we set text to white. Use 87% black instead if
+       your background is light. */
+    color: white;
+  }
+}
+
+.mdl-layout__header-row .mdl-navigation__link {
+  /* This background is dark, so we set text to white. Use 87% black instead if
+     your background is light. */
+  color: white;
+}
+
+.blog--post img {
+  max-width: 100%;
+}