About Page & Fancybox / Portfolio Template

_includes/gallery.html

@@ -0,0 +1,57 @@
+{% assign gallery = page.galleries[include.gallery] %}
+<div class="gallery-wrapper gallery-{{ gallery.style }}">
+    {% if gallery.style == "carousel" or gallery.style == "carousel-box" %}
+        <div class="category-wrapper">
+<div class="category-info" markdown="1">
+### {{ gallery.headline }}
+
+{{ gallery.description }}
+</div>
+            <div class="carousel-wrapper">
+                <div class="touchcarousel touch-carousel">
+                    <ul class="touchcarousel-container">
+    {% endif %}
+
+    {% for image in gallery.images %}
+        {% capture title_num %}{% increment title_num %}{% endcapture %}
+        {% if gallery.style == "carousel" or gallery.style == "carousel-box" %}
+            <li class="touchcarousel-item item-block">
+        {% else %}
+            <div class="fancybox" style="{{ image.styles }}">
+        {% endif %}
+
+        {% if gallery.style == "overlay" %}
+            <a href="{{ site.github.url }}{{ image.fullsize }}" class="fancybox-media" data-title-id="title-{{ title_num }}" rel="{{ include.gallery }}">
+                <div class="overlay" style="display: none;">
+                    <h3>{{ image.heading | markdownify | remove: '<p>' | remove: '</p>' }}</h3>
+                    <span class="meta">{{ image.description | markdownify | remove: '<p>' | remove: '</p>' }}</span>
+                </div>
+                <img src="{{ site.github.url }}{{ image.thumbnail }}" alt="">
+            </a>
+        {% else %}
+            <img src="{{ site.github.url }}{{ image.thumbnail }}" alt="">
+            <a href="{{ site.github.url }}{{ image.fullsize }}" class="fancybox-media" data-title-id="title-{{ title_num }}" rel="{{ include.gallery }}">
+                <span class="link"></span>
+            </a>
+        {% endif %}
+
+        <div id="title-{{ title_num }}" class="info hidden">
+            <h2>{{ image.heading | markdownify | remove: '<p>' | remove: '</p>' }}</h2>
+            <div class="fancybody">{{ image.description | markdownify | remove: '<p>' | remove: '</p>' }}</div>
+        </div>
+
+        {% if gallery.style == "carousel" or gallery.style == "carousel-box" %}
+            </li>
+        {% else %}
+            </div>
+        {% endif %}
+    {% endfor %}
+
+    {% if gallery.style == "carousel" or gallery.style == "carousel-box" %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="clear"></div>
+    {% endif %}
+</div>

docs.md

@@ -6,6 +6,6 @@ description: |
     Pico is a flat file CMS, this means there is no administration backend or database to deal with.<br />
     You simply create .md files in the "content" folder and that becomes a page.
 collection: docs
-nav: 2
+nav: 3
 redirect_from: /docs.html
 ---

plugins/drafts-example.html

@@ -0,0 +1,5 @@
+---
+layout: redirect
+redirect: https://gist.github.com/PhrozenByte/c4eeb451eed175110dc0f9d79f2c98bd
+---
+

style.css

@@ -1039,7 +1039,11 @@ ul.contact-info li i {
 .items li img {
     display: block
 }
-.items li a .overlay {
+.fancybox img {
+    display: inline-block;
+}
+.items li a .overlay,
+.fancybox .overlay  {
     display: none;
     height: 100%;
     position: absolute;
@@ -1049,13 +1053,15 @@ ul.contact-info li i {
     background-color: rgba(255,103,96, 0.92);
     padding: 20px;
 }
-.items li a .overlay h3 {
+.items li a .overlay h3,
+.fancybox .overlay h3 {
     color: #FFF;
     font-weight: 300;
     font-size: 22px;
     text-transform: uppercase;
 }
-.items li a .overlay span.meta {
+.items li a .overlay span.meta,
+.fancybox .overlay span.meta {
     color: #FFF;
     font-weight: 300;
     font-style: italic;
@@ -2124,7 +2130,7 @@ media_tag_4 {media_subcode:4}
 /*	CAROUSEL
 /*-----------------------------------------------------------------------------------*/
 .category-wrapper {
-    margin-bottom: 60px;
+    margin-bottom: 20px;
     overflow: hidden;
 }
 .category-wrapper .category-info {
@@ -2138,7 +2144,7 @@ media_tag_4 {media_subcode:4}
 }
 .category-wrapper .carousel-wrapper {
     float: right;
-    width: 830px;
+    width: calc(100% - 280px);
 }
 .fullwidth .carousel-wrapper {
 	width: 100%;
@@ -2150,7 +2156,6 @@ media_tag_4 {media_subcode:4}
 .touchcarousel {
     position: relative;
     width: 600px;
-    height: 400px;
     overflow: hidden;
 }
 .touchcarousel .touchcarousel-container {
@@ -2165,6 +2170,7 @@ media_tag_4 {media_subcode:4}
     overflow: hidden;
     width: 100%;
     height: 100%;
+    padding-bottom: 10px;
 }
 .touchcarousel .scrollbar-holder {
     position: absolute;
@@ -2193,17 +2199,12 @@ media_tag_4 {media_subcode:4}
     cursor: auto
 }
 .touch-carousel {
-    width: 830px;
-    height: 230px;
+    width: 100%;
     margin: 0 auto;
 }
-.fullwidth .touch-carousel {
-	width: 100%;
-}
 .touch-carousel .touchcarousel-item {
     margin-right: 10px;
     width: 270px;
-    height: 220px;
     float: left;
     position: relative;
 }
@@ -2213,7 +2214,8 @@ media_tag_4 {media_subcode:4}
 .touchcarousel .touchcarousel-item:before {
     display: none
 }
-.touchcarousel .touchcarousel-item .link {
+.touchcarousel .touchcarousel-item .link,
+.fancybox .link {
     position: absolute;
     bottom: 10px;
     right: 10px;
@@ -2233,22 +2235,26 @@ media_tag_4 {media_subcode:4}
     -o-transition: all 200ms ease-in;
     -moz-transition: all 200ms ease-in;
 }
-.touchcarousel .touchcarousel-item:hover .link {
+.touchcarousel .touchcarousel-item:hover .link,
+.fancybox:hover .link {
     -moz-opacity: 1;
     filter: alpha(opacity=100);
     opacity: 1;
 }
-.touchcarousel .touchcarousel-item .link:hover {
+.touchcarousel .touchcarousel-item .link:hover,
+.fancybox .link:hover {
     background-color: #ff6760;
     color: #FFF;
 }
-.touchcarousel .touchcarousel-item .link:before {
+.touchcarousel .touchcarousel-item .link:before,
+.fancybox .link:before {
     display: block;
     content: "\f50d";
     font-family: 'fontello';
     text-align: center;
 }
-.touchcarousel .touchcarousel-item .link.chain:before {
+.touchcarousel .touchcarousel-item .link.chain:before,
+.fancybox .link.chain:before {
     content: "\f517";
 }
 .touchcarousel .touchcarousel-item .caption {
@@ -2281,7 +2287,6 @@ media_tag_4 {media_subcode:4}
 }
 .touch-carousel .item-block {
     width: 270px;
-    height: 220px;
     display: block;
 }
 .touch-carousel .item-block img {
@@ -2301,12 +2306,44 @@ media_tag_4 {media_subcode:4}
     background-color: #ff6760 !important;
     bottom: 0;
 }
+/* Carousel Box */
+.gallery-carousel-box .category-wrapper {
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    background: #f5f5f5;
+}
+.gallery-carousel-box .category-wrapper .category-info {
+    width: 100%;
+    height: auto;
+    float: none;
+    padding: 0.5em;
+    margin-bottom: 10px;
+    background: none;
+}
+.gallery-carousel-box .category-wrapper .category-info h3 {
+    margin: 0 1em 0 0;
+}
+.gallery-carousel-box .category-wrapper .category-info h3,
+.gallery-carousel-box .category-wrapper .category-info p:first-of-type {
+    display: inline-block;
+}
+.gallery-carousel-box .category-wrapper .carousel-wrapper {
+    width: 100%;
+    float: none;
+}
+.gallery-carousel-box .category-wrapper .carousel-wrapper .touch-carousel .item-block img {
+    height: initial;
+}
 /*-----------------------------------------------------------------------------------*/
 /*	FANCYBOX
 /*-----------------------------------------------------------------------------------*/
 #fancybox-thumbs ul li img {
     max-width: none
 }
+#fancybox-thumbs li {
+    margin: initial;
+}
 .info.hidden {
     display: none
 }
@@ -2399,6 +2436,23 @@ media_tag_4 {media_subcode:4}
 	background-image: url(style/images/fancy-loading.gif) !important;
 }
 media_tag_5 {media_subcode:5}
+/* Standalone Image Styles */
+.fancybox {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    margin: 1em;
+}
+/* Ugly Hack (see #352) */
+.fancybox {
+    line-height: 0;
+}
+.fancybox .overlay {
+    line-height: 24px;
+}
+.fancybox .link {
+    line-height: 20px;
+}
 /*-----------------------------------------------------------------------------------*/
 /*	PROGRESS BAR
 /*-----------------------------------------------------------------------------------*/

style/css/color/pico.css

@@ -144,9 +144,13 @@ ul.contact-info li i {
 .carousel-control:hover {
     background-color: #2EAE9B;
 }
-.items li a .overlay,
+
+.fancybox .link:hover {
+    background-color: #2EAE9B;
+}
+.fancybox .overlay,
 .overlay a .more {
-    background-color: rgba(255,103,96, 0.92);
+    background-color: rgba(46,174,155, 0.92);
 }
 code,
 pre {

style/css/ie8.css

@@ -8,4 +8,18 @@
 .comment-form input,
 .comment-form textarea {
     padding-top: 8px;
-}
+}
+.category-wrapper .category-info {
+    width: 100%;
+    height: auto;
+    float: none;
+    margin-bottom: 10px;
+}
+.category-wrapper .category-info h3 {
+    margin-bottom: 10px;
+}
+.category-wrapper .carousel-wrapper,
+.touch-carousel {
+    width: 100%;
+    float: none;
+}

style/css/media-queries.css

@@ -13,10 +13,6 @@
 	    margin: 0 8px 8px 0;
 	    width: 234px;
 	}
-	.category-wrapper .carousel-wrapper,
-	.touch-carousel {
-	    width: 680px
-	}
 	.blog-grid .post {
 	    width: 290px;
 	    margin-right: 45px;
@@ -104,15 +100,13 @@
 	    margin-bottom: 10px;
 	    float: none;
 	    height: auto;
-	    background: none;
-	    padding: 0;
 	}
 	.category-wrapper .category-info h3 {
 	    margin-bottom: 10px
 	}
 	.category-wrapper .carousel-wrapper,
 	.touch-carousel {
-	    width: 720px;
+	    width: 100%;
 	    float: none;
 	}
 	.content {
@@ -270,15 +264,13 @@
 	    margin-bottom: 10px;
 	    float: none;
 	    height: auto;
-	    background: none;
-	    padding: 0;
 	}
 	.category-wrapper .category-info h3 {
 	    margin-bottom: 10px
 	}
 	.category-wrapper .carousel-wrapper,
 	.touch-carousel {
-	    width: 440px;
+	    width: 100%;
 	    float: none;
 	}
 	.process .etabs {
@@ -488,15 +480,13 @@
 	    margin-bottom: 10px;
 	    float: none;
 	    height: auto;
-	    background: none;
-	    padding: 0;
 	}
 	.category-wrapper .category-info h3 {
 	    margin-bottom: 10px
 	}
 	.category-wrapper .carousel-wrapper,
 	.touch-carousel {
-	    width: 280px;
+	    width: 100%;
 	    float: none;
 	}
 	.touch-gallery,