type-on-strap 0.4.2 → 0.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 82b5b5c11368433c2c385ae85a584e8b90be4021
-  data.tar.gz: de33a7e934937ebf744c112fec92f39588b60dc7
+  metadata.gz: 8bad504dcdfc7c8ebdfacd2e2891ff14c1bc1207
+  data.tar.gz: 97c5fffe56086fffd571762ab90a5518817bf30e
 SHA512:
-  metadata.gz: 8b0b4dc66af2c021ea11daa54491963102ee595749263bfbffb9d1f20dd6d7eaf18360ae7a080afca0827a44cebe57b70bb9c0de3cea2d7756afebc414af0e21
-  data.tar.gz: ecd271cbd0587a1cffee6def6b6b7e24fd8b9c30e59092290806f2ed30a39c4d86922a8408678323fc92729d88e1fdc04a64f1aebedc5acb2ba1a6d07a4e936d
+  metadata.gz: 85bb8a6e1647d83f4bf6a535d40167e59724152b4361f33c9d1818194dfc9f4af15ed666d8910182eee8c8ed816647daeb678dd238b9cda892fd689cd003f426
+  data.tar.gz: c58bd421161c8072c36ca2ed390c41348749f365090fb27560f2c99e3f61dfbdf402881a42004cd3150e0ef3c59faf8147969e6d5f77e4e6bb1f7a14881d160e

data/README.md

@@ -289,13 +289,32 @@ You can use this layout in another page (adding a title to it will make it appea
 
 ### Portfolio
 
-Portfolio is a feature bootstrapped page that will take all the markdown/html files in the `_portfolio` folder to create a 3x3 image portfolio matrix.
+Portfolio is a feature bootstrapped page that will take all the markdown/html files in the `_portfolio` folder to create a 3-columns image portfolio matrix.
 
-The portfolio page can be enable/disable in the navigation bar through the `_config.yml` via:
+To use the portfolio, simply create a `portfolio.md` with this information inside:
 ```yml
-# Scripts / Feature
-  portfolio: true
+--- 
+layout: bootstrap 
+title : Portfolio 
+---
+
+{% include portfolio.html %}
+```
+
+### Gallery
+
+You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures in optimal position based on available vertical space. You need to specify the `gallery_path` which will be used to find the pictures to render. It will take all of the picture under that directory. Then use the `include` to add it in your page. 
+
 ```
+---
+layout: page
+title: Gallery
+gallery: "assets/img/pexels"
+---
+
+{% include gallery.html gallery_path=page.gallery %}
+```
+
 
 ### Search
 
@@ -306,8 +325,10 @@ Then there's a `search.js` displaying the formated results entered in the `searc
 
 The search page can be enable/disable in the navigation bar through the `_config.yml` via:
 ```yml
-# Scripts / Feature
-  search: true
+special_page:
+    search: 
+      icon: "search"
+      enabled: true
 ```
 
 ### Tags
@@ -330,8 +351,10 @@ All the tags will be listed in `tags.html` with a link toward the pages or posts
 The tags page can be enable/disable in the navigation bar through the `_config.yml` via:
 
 ```yml
-# Scripts / Feature
-  tags: true
+special_page:
+    tags: 
+      icon: "tags"
+      enabled: true
 ```
 
 ## Template as a Gem

data/_includes/gallery.html

@@ -0,0 +1,24 @@
+<style>
+/* force scrollbar */
+html { overflow-y: scroll; }
+    
+/* To overwrite page's padding, to get bigger images */
+/* article {padding:2%;} */
+
+</style>
+
+<div id='masonry' class="grid">
+<div class="grid-sizer"></div>
+<div class="gutter-sizer"></div>
+{% for image in site.static_files %}
+  {% if image.path contains include.gallery_path %}
+    
+        <img src="{{ image.path | prepend: site.baseurl }}" alt="" class="grid-item" style="padding: 0;">
+      
+  {% endif %}
+{% endfor %}
+</div> 
+
+<!-- Require JQuery >= 3.2.1 Requireas well -->
+<script src="{{ site.baseurl }}/assets/js/vendor/masonry.pkgd.min.js" type="text/javascript"></script>
+<script src="{{ site.baseurl }}/assets/js/vendor/imagesloaded.min.js" type="text/javascript"></script>

data/_includes/head.html

@@ -2,10 +2,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     
-    <!-- JQuery (used for bootstrap and jekyll search) -->
-    <script src="{{ site.baseurl }}/assets/js/jquery-3.2.1.min.js" ></script>
-    
-    <!-- Main JS (navbar.js and katex_init.js)-->
+    <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
     <script defer=true src="{{ site.baseurl }}/assets/js/main.min.js"></script>
     
     <!-- CSS -->
@@ -22,7 +19,7 @@
 
     <!-- Font Awesome -->
     <!-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
-    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/vendor/font-awesome.min.css">
 
     <!-- Google Fonts -->
     {% if site.theme_settings.google_fonts %}
@@ -31,10 +28,8 @@
 
     <!-- KaTeX 0.8.3 -->
     {% if site.theme_settings.katex %}
-    <!--<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css">
-    <script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js"></script> -->
-    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/katex.min.css">
-    <script src="{{ site.baseurl }}/assets/js/katex.min.js">
+    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/vendor/katex.min.css">
+    <script src="{{ site.baseurl }}/assets/js/vendor/katex.min.js">
     </script>
     {% endif %}
 

data/_includes/navbar.html

@@ -18,50 +18,36 @@
     </a>
     
     <!-- Menu -->
-    <ul>
+    <ul class="hide">
+        <!-- Auto Generation of NORMAL pages in the navbar -->
+        {% assign name_page = "" %}
+        
         {% for page in site.pages %}
         {% if page.title and page.hide != true %}
-        <li class="separator">
-            |
-        </li>
+        {% if name_page contains page.title %}
+        {% else %}
+        <li class="separator"> | </li>
         <li>
             <a class="clear" href="{{ page.url | relative_url }}">
                 {{ page.title }}
             </a>
         </li>
         {% endif %}
-        {% endfor %} 
-        {% if site.theme_settings.portfolio %}
-        <li class="separator">
-            |
-        </li>
-        <li>
-            <a class="clear" href="{{ site.url }}{{ site.baseurl }}/portfolio">
-                Portfolio
-            </a>
-        </li>
-        {% endif %}
-        {% if site.theme_settings.search %}
-        <li class="separator">
-            |
-        </li>
-        <li>
-            <a class="clear" href="{{ site.url }}{{ site.baseurl }}/search">
-                <i class="fa fa-search" aria-hidden="true"></i>
-            </a>
-        </li>
-        {% endif %}
-        {% if site.theme_settings.tags %}
-        <li class="separator">
-            |
-        </li>
-        <li>
-            <a class="clear" href="{{ site.url }}{{ site.baseurl }}/tags">
-                <i class="fa fa-tags" aria-hidden="true"></i>
-            </a>
-        </li>
+        {% assign name_page = page.title | append: name_page %}
         {% endif %}
+        {% endfor %} 
         
+        <!-- Auto Generation of SPECIAL pages in the navbar -->
+        {% for item in site.theme_settings.special_page %}
+          {% if item[1].enabled %}
+            <li class="separator"> | </li>
+            <li>
+                <a class="clear" href="{{ site.url }}{{ site.baseurl }}/{{ item[1].icon }}">
+                    <i class="fa fa-{{ item[1].icon }}" aria-hidden="true"></i>
+                </a>
+            </li>
+          {% endif %}
+        {% endfor %}
     </ul>
         
 	</nav>

data/_layouts/bootstrap.html

@@ -3,10 +3,7 @@ layout: default
 ---
 
 <!-- Bootstrap-3.3.7 isolation CSS -->
-<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/bootstrap-iso.min.css">
-
-<!-- Bootstrap JS -->
-<script src="{{ site.baseurl }}/assets/js/bootstrap.min.js"></script>
+<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/vendor/bootstrap-iso.min.css">
 
 <article {% if page.feature-img %}class="feature-image" {% endif %}>
     <header id="main" style="background-image: url('{{ site.baseurl }}/{{ page.feature-img }}')">
@@ -20,8 +17,6 @@ layout: default
     </section>
     {% endif %}
 
-
-
     <!-- Bootstrap will work within this div -->
     <section>
         <div class="bootstrap-iso">

data/_layouts/home.html

@@ -30,7 +30,7 @@ layout: default
             </p>
           </header>
           <div class="excerpt">
-              {{ post.excerpt | strip_html }}
+              {{ post.excerpt | strip_html | escape }}
             <!--{{ post.content | strip_html | truncate: "250" }}-->
             <!--<a class="button" href="{{ post.url | prepend: site.baseurl }}">
               {{ site.theme_settings.str_continue_reading }}

data/_layouts/search.html

@@ -10,40 +10,13 @@ layout: page
 
 <section>
     <!-- Script pointing to jekyll-search.js -->
-    <script src="{{ site.baseurl }}/assets/js/simple-jekyll-search.min.js" type="text/javascript"></script>
+    <script src="{{ site.baseurl }}/assets/js/vendor/simple-jekyll-search.min.js" type="text/javascript"></script>
 
     <script type="text/javascript">
         SimpleJekyllSearch({
             searchInput: document.getElementById('search-input'),
             resultsContainer: document.getElementById('results-container'),
-            json: [
-                    {% if site.theme_settings.search %}
-                     {% for post in site.posts %}
-                        {
-                          "title"    : "{{ post.title | escape }}",
-                          "category" : "{{ post.category }}",
-                          "tags"     : "{{ post.tags | join: ', ' | prepend: " " }}",
-                          "url"      : "{{ site.baseurl }}{{ post.url }}",
-                          "date"     : "{{ post.date | date: "%B %-d, %Y" }}",
-                          "excerpt"  : "{{ post.content | strip_html | strip_newlines | replace: '"', '\\"' | truncate: '250'}}",
-                          "content"  : "{{ post.content | strip_html | strip_newlines | replace: '"', '\\"' }}"
-                        } {% unless forloop.last %},{% endunless %}
-                     {% endfor %},
-                     {% for page in site.portfolio %}
-                       {
-                         {% if page.title != nil %}
-                            "title"    : "{{ page.title | escape }}",
-                            "category" : "{{ page.category }}",
-                            "tags"     : "{{ page.tags | join: ', ' | prepend: " " }}",
-                            "url"      : "{{ site.baseurl }}{{ page.url }}",
-                            "date"     : "{{ page.date | date: "%B %-d, %Y" }}",
-                            "excerpt"  : "{{ post.content | strip_html | strip_newlines | replace: '"', '\\"' | truncate: '250'}}",
-                            "content"  : "{{ page.content | strip_html | strip_newlines | replace: '"', '\\"' }}"
-                         {% endif %}
-                       } {% unless forloop.last %},{% endunless %}
-                     {% endfor %}
-                    {% endif %}
-                  ],
+            json: '{{ site.baseurl }}/assets/data/search.json',
             searchResultTemplate: '<div class="search-title"><a href="{url}"><h3> {title}</h3></a><div class="meta">{date} <div class="right"><i class="fa fa-tag"></i> {tags}</div></div><p>{excerpt}</p></div><hr> ',
             noResultsText: 'No results found',
             limit: 10,

data/_sass/base/_global.scss

@@ -48,11 +48,11 @@ h6 {
 }
 
 h1 {
-    font-size: 2.5em;
+    font-size: 2.3em;
 }
 
 h2 {
-    font-size: 2em;
+    font-size: 1.75em;
 }
 
 h3 {
@@ -80,10 +80,8 @@ table {
     table-layout: fixed;
     width: 100%;
     word-wrap: break-word;
-    @media (max-width: 1100px) {
-        overflow-x: scroll;
-        display: inline-block;
-    }
+    overflow-x: scroll;
+    display: inline-block;
 }
 
 td,
@@ -171,7 +169,7 @@ img[align=right] {
 
 /* ---- Responsive ---- */
 
-@media screen and (max-width: $sm-break) {
+@media screen and (max-width: $break) {
     h1 {
         font-size: 2em;
     }
@@ -182,10 +180,10 @@ img[align=right] {
         font-size: 1em;
     }
     h4 {
-        font-size: 0.75em;
+        font-size: 0.9em;
     }
     p,
     li {
-        font-size: 0.75em;
+        font-size: 0.8em;
     }
 }

data/_sass/base/_utility.scss

@@ -16,6 +16,16 @@
     }
 }
 
+%padding-medium {
+    padding: $padding-medium $padding-large;
+    @media (max-width: 1000px) {
+        padding: $padding-medium * 1.5 $padding-large / 1.6;
+    }
+    @media (max-width: 576px) {
+        padding: $padding-medium;
+    }
+}
+
 .header-txt-shadow {
     text-shadow: 1px 1px 2px $text-shadow;
 }

data/_sass/base/_variables.scss

@@ -6,17 +6,19 @@ $font-size: 1.25em;
 
 // Padding
 $padding-large: 20%;
-$padding-small: 5%;
+$padding-medium: 6%;
+$padding-small: 4%;
 $padding-x-small: 3%;
 
 // Brand colours
+$theme-color: #507492;
 $brand-color: #fff;
 $background-color: #fff;
 $border-color: rgba(0, 0, 0, 0.1); // rgba recommended if using feature images
 
 // Typography colours
 $text-color: #383838;
-$link-color: #507492; // #1ABC9C;
+$link-color: $theme-color; // #1ABC9C;
 $selection-color: #D4D4D4; // visible when highlighting text
 $blockquote-color: #EEF7FA; // $background-color;
 
@@ -33,7 +35,7 @@ $navbar-separator-opacity: 0;
 $feature-image-text-color: #fff;
 $feature-image-size: cover; // options include "cover", "contain", "auto"
 // Header description box
-$header-desc-background-color: #507492;
+$header-desc-background-color: $theme-color;
 $header-desc-text-color: #FFF;
 
 // Mobile display

data/_sass/external/_syntax.scss

@@ -124,3 +124,54 @@ figure.highlight {
 .gist .blob-num {
     width: 3.5% !important;
 }
+
+// Fix nbconvert dataframe
+.dataframe tbody {
+    font-size: 0.8em;
+    border-color: white;
+
+    tr{
+        :nth-child(even) {
+            background-color: #f8f8f8;
+        }
+
+        th {
+            border-top: 0;
+            border-left: 0;
+            border-bottom: 0;
+        }
+
+
+        td {
+            padding: 0;
+            border: 0;
+            text-align: center;
+        }
+    }
+    
+    
+}
+
+.dataframe thead tr {
+    :nth-child(n+2) {
+        color: black;
+        //width: 100px;
+        
+        font-size: 0.75em;
+        text-align: center !important;
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+    }
+    
+    :first-child {
+        border-top: 0;
+        border-left: 0;
+    }
+    
+}
+
+table.dataframe {
+    border: 0px solid $border-color;
+    border-collapse: collapse;
+}

data/_sass/includes/_grid.scss

@@ -0,0 +1,50 @@
+/* ---- grid ---- */
+
+.grid {
+    padding-bottom: 6%;
+    padding-top: 1%;
+
+
+    /* clear fix */
+    &:after {
+        content: '';
+        display: block;
+        clear: both;
+    }
+}
+
+/* ---- .grid-item within masonry ---- */
+
+.grid-sizer,
+.grid-item {
+    /* state column width */
+    width: 32.6%;
+}
+
+.grid-item {
+    float: left;
+    border-radius: 5px;
+
+
+    img {
+        /* for image formatting in the masonry */
+        display: block;
+        max-width: 100%;
+        min-height: 30%;
+    }
+}
+
+/* --- Masonry gutter size --- */
+
+.gutter-sizer {
+
+    width: 1%;
+}
+
+.grid-item:first-of-type {
+    margin: 0;
+}
+
+.grid-item {
+    margin-bottom: 1%;
+}