Skip to content
Snippets Groups Projects
Commit b0162df3 authored by Wferr's avatar Wferr
Browse files

Merge pull request #3 from vivaxy/gh-pages 

Merge pull request from vivaxy, Make posts have URLS and add feed.xml
parents 479f19ec da520578
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 629 additions and 600 deletions
.gitignore
+ 4
− 1
View file @ b0162df3
...@@ -43,4 +43,7 @@ Temporary Items ...@@ -43,4 +43,7 @@ Temporary Items
.apdisk .apdisk
#Jekyll #Jekyll
_site _site
\ No newline at end of file
# webstorm
.idea
css/modern-blog.min.css deleted 100644 → 0
+ 0
− 65
View file @ 479f19ec
.card{position:relative;float:left;width:29%;height:0;margin:2%;padding-bottom:20%;}
.card__container{position:fixed;top:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;-webkit-overflow-scrolling:touch;}
.card__container--closed{position:absolute;overflow:hidden;}
.card__image{position:absolute;top:0;left:0;display:block;width:100%;height:100%;}
.card__container--closed .card__image{position:relative;cursor:pointer;}
.card__container--fix-image .card__image{position:fixed;}
.card__content{position:relative;width:100%;max-width:800px;height:auto;margin:400px auto 60px;padding:30px 40px 22px;background:#fff;}
.card__container--closed .card__content{margin-top:0;padding:0 16px;pointer-events:none;background:transparent;}
.card__caption{font-size:2em;max-width:800px;margin:0 auto;padding:35px 30px 0px;}
.card__container--closed .card__caption{font-size:1em;max-width:auto;padding:10px 10px 25px;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);}
.card__title{font-size:1.5em;line-height:1;margin:5px 0 0 0;color:#3b393d;}
.card__container--closed .card__title{color:#fff;}
.card__subtitle{font-size:.95em;line-height:1;margin:5px 0 0;color:#777778;}
.card__container--closed .card__subtitle{color:#f5f5f5;}
.card__copy{font-size:1.25em;max-width:900px;margin:0 auto;padding:25px 30px 100px;color:#3b393d;}
.card__copy p:first-of-type{font-size:1.5em;padding:0 0 1em 0;}
.card__btn-close{font-size:18px;position:absolute;top:0;right:0;padding:36px;cursor:pointer;}
.card__container--closed .card__btn-close{display:none;}
.meta{font-size:.85em;display:-webkit-flex;display:flex;padding:0 0 35px 0;-webkit-align-items:center;align-items:center;}
.meta__avatar{border-radius:50%;height:50px;width:50px;}
.meta__author{font-weight:bold;padding:0 15px;}
.meta__date{margin:0 0 0 auto;}
@media only screen and (max-width:980px){.card{width:46%;padding-bottom:32.2%;}
.card__content{margin-bottom:0;padding-right:20px;padding-left:20px;}
}
@media only screen and (max-width:580px){.card{width:96%;padding-bottom:67.2%;}
}
@media only screen and (max-width:400px){.card__caption{font-size:1.25em;padding:35px 0px 0px;}
.meta{padding:0 0 25px 0;}
.card__copy{font-size:90%;padding:25px 0px 100px;}
}
*,
*:after,
*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,
.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
body{font-family:Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;line-height:1.5;color:#3b393d;background:#f0f0f0;background-size:cover;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;overflow-y:scroll;}
body.body--hidden{overflow:hidden;}
body.body--hidden .header{opacity:0;}
.header{-webkit-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out;}
a{text-decoration:none;color:#de6551;outline:none;}
a:hover,
a:focus{color:#3b393d;}
.body{background:#acaad1;}
.body a{color:#4f4c4c;}
.body .header h1 span{color:#4f4c4c;}
.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none;}
.header{padding:2em 1em;text-align:center;}
.header h1{font-size:3em;font-weight:400;line-height:1.2;margin:.5em 0 0;}
.header h1 span{font-size:.45em;display:block;padding:.5em 0 1em;color:#999;}
.links{margin:2em 0 0;}
.links a{display:inline-block;margin:0 .5em;}
.wrapper{overflow:auto;width:95%;max-width:1366px;margin:0 auto;}
@media screen and (max-width:50em){.header{padding:3em 10% 4em;}
}
@media screen and (max-width:40em){.header h1{font-size:2.4em;line-height:1.2;}
}
.pattern{position:fixed;z-index:-1;top:0;left:0;width:100%;height:100%;background:no-repeat center center/cover;}
.pattern--hidden{visibility:hidden;opacity:0;}
.pattern--hidden .polygon{transition-duration:0ms;}
.pattern svg{width:100%;height:100%;}
.polygon{transition:-webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out;transition:transform 300ms ease-in-out, opacity 300ms ease-in-out;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center bottom;transform-origin:center bottom;}
.polygon--hidden{opacity:0;-webkit-transform:scale(0);transform:scale(0);}
.ff .polygon{-webkit-transform:scale(1)!important;transform:scale(1)!important;}
\ No newline at end of file
feed.xml 0 → 100644
+ 31
− 0
View file @ b0162df3
---
layout: null
---
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>{{ site.title | xml_escape }}</title>
<description>{{ site.description | xml_escape }}</description>
<link>{{ site.url }}{{ site.baseurl }}/</link>
<atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self"
type="application/rss+xml"/>
<pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
<lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
<generator>Jekyll v{{ jekyll.version }}</generator>
{% for post in site.posts limit:10 %}
<item>
<title>{{ post.title | xml_escape }}</title>
<description>{{ post.content | xml_escape }}</description>
<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
<link>{{ site.baseurl | prepend: site.url }}#{{ post.url }}</link>
<guid isPermaLink="true">{{ site.baseurl | prepend: site.url }}#{{ post.url }}</guid>
{% for tag in post.tags %}
<category>{{ tag | xml_escape }}</category>
{% endfor %}
{% for cat in post.categories %}
<category>{{ cat | xml_escape }}</category>
{% endfor %}
</item>
{% endfor %}
</channel>
</rss>
fonts/font-awesome-4.3.0/css/font-awesome.min.css deleted 100644 → 0
+ 0
− 4
View file @ 479f19ec
/*!
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-genderless:before,.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}
\ No newline at end of file
index.html
+ 77
− 73
View file @ b0162df3
...@@ -3,83 +3,87 @@ layout: compress ...@@ -3,83 +3,87 @@ layout: compress
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="no-js"> <html lang="en" class="no-js">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ site.title }}</title> <title>{{ site.title }}</title>
<meta name="description" content="{{ site.description }}" /> <meta name="description" content="{{ site.description }}"/>
<meta name="keywords" content="{{ site.keywords }}" /> <meta name="keywords" content="{{ site.keywords }}"/>
<meta name="author" content="{{ site.author }}" /> <meta name="author" content="{{ site.author }}"/>
<link rel="shortcut icon" href="img/favicon.ico"> <link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/modern-blog.min.css" /> <link rel="stylesheet" type="text/css" href="css/modern-blog.css"/>
<!--[if IE]> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script type="text/javascript" src="js/vendors/html5.min.js"></script>
<![endif]--> <![endif]-->
<script> <script>
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
var root = document.getElementsByTagName('html')[0]; var root = document.getElementsByTagName('html')[0];
root.setAttribute('class', 'ff'); root.setAttribute('class', 'ff');
}; }
</script> </script>
</head> </head>
<body class="body"> <body class="body">
<div class="container"> <div class="container">
<header class="header"> <header class="header">
<h1>Modern Blog<span>A Clean, Fresh Minimal Look.</span></h1> <h1>Modern Blog<span>A Clean, Fresh Minimal Look.</span></h1>
<nav class="links"> <nav class="links">
<a href="#"><i class="fa fa-twitter-square fa-3x"></i></a> <a href="#"><i class="fa fa-twitter-square fa-3x"></i></a>
<a href="#"><i class="fa fa-instagram fa-3x"></i></a> <a href="#"><i class="fa fa-instagram fa-3x"></i></a>
<a href="#"><i class="fa fa-facebook-square fa-3x"></i></a> <a href="#"><i class="fa fa-facebook-square fa-3x"></i></a>
<a href="#"><i class="fa fa-tumblr-square fa-3x"></i></a> <a href="#"><i class="fa fa-tumblr-square fa-3x"></i></a>
</nav> </nav>
</header> </header>
<div class="content"> <div class="content">
<!-- trianglify pattern container --> <!-- trianglify pattern container -->
<div class="pattern pattern--hidden"></div> <div class="pattern pattern--hidden"></div>
<!-- cards --> <!-- cards -->
<div class="wrapper"> <div class="wrapper">
{% for post in site.posts %} {% for post in site.posts %}
<div class="card"> <div class="card" data-id="{{ post.id }}">
<div class="card__container card__container--closed"> <div class="card__container card__container--closed">
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1200" preserveAspectRatio="xMidYMid slice"> <svg class="card__image" xmlns="http://www.w3.org/2000/svg"
<defs> xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1200"
<clipPath id="{{ post.subtitle | slugify }}"> preserveAspectRatio="xMidYMid slice">
<defs>
<clipPath id="{{ post.id }}-clip-path">
<polygon class="clip" points="0,1200 0,0 1920,0 1920,1200"></polygon> <polygon class="clip" points="0,1200 0,0 1920,0 1920,1200"></polygon>
</clipPath> </clipPath>
</defs> </defs>
<image clip-path="url(#{{ post.subtitle | slugify }})" width="1920" height="1200" xlink:href="{{ post.image }}"></image> <image clip-path="url(#{{ post.id }}-clip-path)" width="1920" height="1200"
</svg> xlink:href="{{ post.image }}"></image>
<div class="card__content"> </svg>
<i class="card__btn-close fa fa-times"></i> <div class="card__content">
<div class="card__caption"> <i class="card__btn-close fa fa-times"></i>
<h2 class="card__title">{{ post.title }}</h2> <div class="card__caption">
<p class="card__subtitle">{{ post.subtitle }}</p> <h2 class="card__title">{{ post.title }}</h2>
</div> <p class="card__subtitle">{{ post.subtitle }}</p>
<div class="card__copy"> </div>
<div class="meta"> <div class="card__copy">
<img class="meta__avatar" src="{{ post.avatar }}" /> <div class="meta">
<span class="meta__author">{{ post.author }}</span> <img class="meta__avatar" src="{{ post.avatar }}"/>
<span class="meta__date">{{ post.date | date: "%b %-d, %Y" }}</span> <span class="meta__author">{{ post.author }}</span>
</div> <span class="meta__date">{{ post.date | date: "%Y-%m-%d" }}</span>
{{ post.content }}
</div>
</div> </div>
{{ post.content }}
</div> </div>
</div> </div>
{% endfor %} </div>
<!-- /cards -->
</div> </div>
{% endfor %}
<!-- /cards -->
</div> </div>
<!-- /container --> </div>
<!-- JS --> <!-- /container -->
<script src="js/vendors/trianglify.min.js"></script> </div>
<script src="js/vendors/TweenMax.min.js"></script> <!-- JS -->
<script src="js/vendors/ScrollToPlugin.min.js"></script> <script src="js/vendors/trianglify.min.js"></script>
<script src="js/vendors/cash.min.js"></script> <script src="js/vendors/TweenMax.min.js"></script>
<script src="js/card-modern-blog.min.js"></script> <script src="js/vendors/ScrollToPlugin.min.js"></script>
<script src="js/modern-blog.min.js"></script> <script src="js/vendors/cash.min.js"></script>
</body> <script src="js/card-modern-blog.js"></script>
</html> <script src="js/modern-blog.js"></script>
\ No newline at end of file </body>
</html>
js/card-modern-blog.js
+ 257
− 257
View file @ b0162df3
...@@ -3,275 +3,275 @@ ...@@ -3,275 +3,275 @@
/** /**
* Card. * Card.
*/ */
var Card = (function(window, undefined) { var Card = (function (window) {
/** /**
* Enum of CSS selectors. * Enum of CSS selectors.
*/ */
var SELECTORS = { var SELECTORS = {
container: '.card__container', container: '.card__container',
content: '.card__content', content: '.card__content',
clip: '.clip' clip: '.clip'
}; };
/** /**
* Enum of CSS classes. * Enum of CSS classes.
*/ */
var CLASSES = { var CLASSES = {
containerClosed: 'card__container--closed', containerClosed: 'card__container--closed',
bodyHidden: 'body--hidden' bodyHidden: 'body--hidden'
}; };
/** /**
* Card. * Card.
*/ */
function Card(id, el) { var Card = function (id, el) {
this.id = id; this.id = id;
this._el = el; this._el = el;
// Get elements. // Get elements.
this._container = $(this._el).find(SELECTORS.container)[0]; this._container = $(this._el).find(SELECTORS.container)[0];
this._clip = $(this._el).find(SELECTORS.clip)[0]; this._clip = $(this._el).find(SELECTORS.clip)[0];
this._content = $(this._el).find(SELECTORS.content)[0]; this._content = $(this._el).find(SELECTORS.content)[0];
this.isOpen = false; this.isOpen = false;
this._TL = null; this._TL = null;
}; };
/** /**
* Open card. * Open card.
* @param {Function} callback The callback `onCardMove`. * @param {Function} callback The callback `onCardMove`.
*/ */
Card.prototype.openCard = function(callback) { Card.prototype.openCard = function (callback) {
this._TL = new TimelineLite; this._TL = new TimelineLite;
var slideContentDown = this._slideContentDown(); var slideContentDown = this._slideContentDown();
var clipImageIn = this._clipImageIn(); var clipImageIn = this._clipImageIn();
var floatContainer = this._floatContainer(callback); var floatContainer = this._floatContainer(callback);
var clipImageOut = this._clipImageOut(); var clipImageOut = this._clipImageOut();
var slideContentUp = this._slideContentUp(); var slideContentUp = this._slideContentUp();
// Compose sequence and use duration to overlap tweens. // Compose sequence and use duration to overlap tweens.
this._TL.add(slideContentDown); this._TL.add(slideContentDown);
this._TL.add(clipImageIn, 0); this._TL.add(clipImageIn, 0);
this._TL.add(floatContainer, '-=' + clipImageIn.duration() * 0.6); this._TL.add(floatContainer, '-=' + clipImageIn.duration() * 0.6);
// this._TL.add(clipImageOut, '-=' + floatContainer.duration() * 0.3); // this._TL.add(clipImageOut, '-=' + floatContainer.duration() * 0.3);
this._TL.add(slideContentUp/*, '-=' + clipImageOut.duration() * 0.6*/); this._TL.add(slideContentUp/*, '-=' + clipImageOut.duration() * 0.6*/);
this.isOpen = true; this.isOpen = true;
return this._TL; return this._TL;
}; };
/** /**
* Slide content down. * Slide content down.
* @private * @private
*/ */
Card.prototype._slideContentDown = function() { Card.prototype._slideContentDown = function () {
var tween = TweenLite.to(this._content, 0.8, { var tween = TweenLite.to(this._content, 0.8, {
y: window.innerHeight, y: window.innerHeight,
ease: Expo.easeInOut ease: Expo.easeInOut
}); });
return tween; return tween;
}; };
/** /**
* Clip image in. * Clip image in.
* @private * @private
*/ */
Card.prototype._clipImageIn = function() { Card.prototype._clipImageIn = function () {
// Polygon. // Polygon.
var TL = new TimelineLite; var TL = new TimelineLite;
var start = [ var start = [
[0, 1200], [0, 1200],
[0, 0], [0, 0],
[1920, 0], [1920, 0],
[1920, 1200] [1920, 1200]
]; ];
var end = [ var end = [
[916, 430], [916, 430],
[1125, 643], [1125, 643],
[960, 607], [960, 607],
[793, 570] [793, 570]
]; ];
var points = []; var points = [];
// Create a tween for each point. // Create a tween for each point.
start.forEach(function(point, i) { start.forEach(function (point, i) {
var tween = TweenLite.to(point, 1.5, end[i]); var tween = TweenLite.to(point, 1.5, end[i]);
end[i].onUpdate = function() { end[i].onUpdate = function () {
points.push(point.join()); points.push(point.join());
// Every 4 point update clip-path. // Every 4 point update clip-path.
if (points.length === end.length) { if (points.length === end.length) {
$(this._clip).attr('points', points.join(' ')); $(this._clip).attr('points', points.join(' '));
// Reset. // Reset.
points = []; points = [];
}
}.bind(this);
tween.vars.ease = Expo.easeInOut;
// Add at position 0.
TL.add(tween, 0);
}, this);
return TL;
};
/**
* Float card to final position.
* @param {Function} callback The callback `onCardMove`.
* @private
*/
Card.prototype._floatContainer = function (callback) {
$(document.body).addClass(CLASSES.bodyHidden);
var TL = new TimelineLite;
var rect = this._container.getBoundingClientRect();
var windowW = window.innerWidth;
var track = {
width: 0,
x: rect.left + (rect.width / 2),
y: rect.top + (rect.height / 2)
}; };
}.bind(this); TL.set(this._container, {
width: rect.width,
height: rect.height,
x: rect.left,
y: rect.top,
position: 'fixed',
overflow: 'hidden'
});
TL.to([this._container, track], 2, {
width: windowW,
height: '100%',
x: windowW / 2,
y: 0,
xPercent: -50,
ease: Expo.easeInOut,
clearProps: 'all',
className: '-=' + CLASSES.containerClosed,
onUpdate: callback.bind(this, track),
// Fix IE: if the image is set to fixed when CLASSES.containerClosed
// is removed IE doesn't follow the tween, fix by setting
// the image position to fixed when tween is completed.
onComplete: function () {
$(this._container).addClass('card__container--fix-image');
}.bind(this)
});
return TL;
};
/**
* Clip image out.
* @private
*/
Card.prototype._clipImageOut = function () {
tween.vars.ease = Expo.easeInOut; var tween = this._clipImageIn();
// Add at position 0. tween.reverse();
TL.add(tween, 0);
}, this); return tween;
};
return TL; /**
}; * Slide content up.
* @private
*/
Card.prototype._slideContentUp = function () {
/** var tween = TweenLite.to(this._content, 1, {
* Float card to final position. y: 0,
* @param {Function} callback The callback `onCardMove`. clearProps: 'all',
* @private ease: Expo.easeInOut
*/ });
Card.prototype._floatContainer = function(callback) {
$(document.body).addClass(CLASSES.bodyHidden); return tween;
};
/**
* Close card.
*/
Card.prototype.closeCard = function () {
TweenLite.to(this._container, 0.4, {
scrollTo: {
y: 0
},
onComplete: function () {
$(this._container).css('overflow', 'hidden');
}.bind(this),
ease: Power2.easeOut
});
this._TL.eventCallback('onReverseComplete', function () {
TweenLite.set([this._container, this._content], {
clearProps: 'all'
});
$(document.body).removeClass(CLASSES.bodyHidden);
this.isOpen = false;
}.bind(this));
return this._TL.reverse();
};
/**
* Hide card, called for all cards except the selected one.
*/
Card.prototype.hideCard = function () {
var tween = TweenLite.to(this._el, 0.4, {
scale: 0.8,
autoAlpha: 0,
transformOrigin: 'center bottom',
ease: Expo.easeInOut
});
return tween;
};
var TL = new TimelineLite; /**
* Show card, called for all cards except the selected one.
*/
Card.prototype.showCard = function () {
var rect = this._container.getBoundingClientRect(); var tween = TweenLite.to(this._el, 0.5, {
var windowW = window.innerWidth; scale: 1,
autoAlpha: 1,
clearProps: 'all',
ease: Expo.easeInOut
});
var track = { return tween;
width: 0,
x: rect.left + (rect.width / 2),
y: rect.top + (rect.height / 2),
}; };
TL.set(this._container, { return Card;
width: rect.width,
height: rect.height,
x: rect.left,
y: rect.top,
position: 'fixed',
overflow: 'hidden'
});
TL.to([this._container, track], 2, {
width: windowW,
height: '100%',
x: windowW / 2,
y: 0,
xPercent: -50,
ease: Expo.easeInOut,
clearProps: 'all',
className: '-=' + CLASSES.containerClosed,
onUpdate: callback.bind(this, track),
// Fix IE: if the image is set to fixed when CLASSES.containerClosed
// is removed IE doesn't follow the tween, fix by setting
// the image position to fixed when tween is completed.
onComplete: function() {
$(this._container).addClass('card__container--fix-image');
}.bind(this)
});
return TL;
};
/**
* Clip image out.
* @private
*/
Card.prototype._clipImageOut = function() {
var tween = this._clipImageIn();
tween.reverse();
return tween;
};
/**
* Slide content up.
* @private
*/
Card.prototype._slideContentUp = function() {
var tween = TweenLite.to(this._content, 1, {
y: 0,
clearProps: 'all',
ease: Expo.easeInOut
});
return tween;
};
/**
* Close card.
*/
Card.prototype.closeCard = function() {
TweenLite.to(this._container, 0.4, {
scrollTo: {
y: 0
},
onComplete: function() {
$(this._container).css('overflow', 'hidden');
}.bind(this),
ease: Power2.easeOut
});
this._TL.eventCallback('onReverseComplete', function() {
TweenLite.set([this._container, this._content], {
clearProps: 'all'
});
$(document.body).removeClass(CLASSES.bodyHidden);
this.isOpen = false;
}.bind(this));
return this._TL.reverse();
};
/**
* Hide card, called for all cards except the selected one.
*/
Card.prototype.hideCard = function() {
var tween = TweenLite.to(this._el, 0.4, {
scale: 0.8,
autoAlpha: 0,
transformOrigin: 'center bottom',
ease: Expo.easeInOut
});
return tween;
};
/**
* Show card, called for all cards except the selected one.
*/
Card.prototype.showCard = function() {
var tween = TweenLite.to(this._el, 0.5, {
scale: 1,
autoAlpha: 1,
clearProps: 'all',
ease: Expo.easeInOut
});
return tween;
};
return Card;
})(window); })(window);
js/card-modern-blog.min.js deleted 100644 → 0
+ 0
− 1
View file @ 479f19ec
'use strict';var Card=(function(window,undefined){var SELECTORS={container:'.card__container',content:'.card__content',clip:'.clip'};var CLASSES={containerClosed:'card__container--closed',bodyHidden:'body--hidden'};function Card(id,el){this.id=id;this._el=el;this._container=$(this._el).find(SELECTORS.container)[0];this._clip=$(this._el).find(SELECTORS.clip)[0];this._content=$(this._el).find(SELECTORS.content)[0];this.isOpen=false;this._TL=null;};Card.prototype.openCard=function(callback){this._TL=new TimelineLite;var slideContentDown=this._slideContentDown();var clipImageIn=this._clipImageIn();var floatContainer=this._floatContainer(callback);var clipImageOut=this._clipImageOut();var slideContentUp=this._slideContentUp();this._TL.add(slideContentDown);this._TL.add(clipImageIn,0);this._TL.add(floatContainer,'-='+clipImageIn.duration()*0.6);this._TL.add(slideContentUp);this.isOpen=true;return this._TL;};Card.prototype._slideContentDown=function(){var tween=TweenLite.to(this._content,0.8,{y:window.innerHeight,ease:Expo.easeInOut});return tween;};Card.prototype._clipImageIn=function(){var TL=new TimelineLite;var start=[[0,1200],[0,0],[1920,0],[1920,1200]];var end=[[916,430],[1125,643],[960,607],[793,570]];var points=[];start.forEach(function(point,i){var tween=TweenLite.to(point,1.5,end[i]);end[i].onUpdate=function(){points.push(point.join());if(points.length===end.length){$(this._clip).attr('points',points.join(' '));points=[];};}.bind(this);tween.vars.ease=Expo.easeInOut;TL.add(tween,0);},this);return TL;};Card.prototype._floatContainer=function(callback){$(document.body).addClass(CLASSES.bodyHidden);var TL=new TimelineLite;var rect=this._container.getBoundingClientRect();var windowW=window.innerWidth;var track={width:0,x:rect.left+(rect.width/2),y:rect.top+(rect.height/2),};TL.set(this._container,{width:rect.width,height:rect.height,x:rect.left,y:rect.top,position:'fixed',overflow:'hidden'});TL.to([this._container,track],2,{width:windowW,height:'100%',x:windowW/2,y:0,xPercent:-50,ease:Expo.easeInOut,clearProps:'all',className:'-='+CLASSES.containerClosed,onUpdate:callback.bind(this,track),onComplete:function(){$(this._container).addClass('card__container--fix-image');}.bind(this)});return TL;};Card.prototype._clipImageOut=function(){var tween=this._clipImageIn();tween.reverse();return tween;};Card.prototype._slideContentUp=function(){var tween=TweenLite.to(this._content,1,{y:0,clearProps:'all',ease:Expo.easeInOut});return tween;};Card.prototype.closeCard=function(){TweenLite.to(this._container,0.4,{scrollTo:{y:0},onComplete:function(){$(this._container).css('overflow','hidden');}.bind(this),ease:Power2.easeOut});this._TL.eventCallback('onReverseComplete',function(){TweenLite.set([this._container,this._content],{clearProps:'all'});$(document.body).removeClass(CLASSES.bodyHidden);this.isOpen=false;}.bind(this));return this._TL.reverse();};Card.prototype.hideCard=function(){var tween=TweenLite.to(this._el,0.4,{scale:0.8,autoAlpha:0,transformOrigin:'center bottom',ease:Expo.easeInOut});return tween;};Card.prototype.showCard=function(){var tween=TweenLite.to(this._el,0.5,{scale:1,autoAlpha:1,clearProps:'all',ease:Expo.easeInOut});return tween;};return Card;})(window);
\ No newline at end of file
js/modern-blog.js
+ 252
− 198
View file @ b0162df3
...@@ -3,251 +3,305 @@ ...@@ -3,251 +3,305 @@
/** /**
* Demo. * Demo.
*/ */
var demo = (function(window, undefined) { var demo = (function (window) {
/** /**
* Enum of CSS selectors. * Enum of CSS selectors.
*/ */
var SELECTORS = { var SELECTORS = {
pattern: '.pattern', pattern: '.pattern',
card: '.card', card: '.card',
cardImage: '.card__image', cardImage: '.card__image',
cardClose: '.card__btn-close', cardClose: '.card__btn-close'
}; };
/** /**
* Enum of CSS classes. * Enum of CSS classes.
*/ */
var CLASSES = { var CLASSES = {
patternHidden: 'pattern--hidden', patternHidden: 'pattern--hidden',
polygon: 'polygon', polygon: 'polygon',
polygonHidden: 'polygon--hidden' polygonHidden: 'polygon--hidden'
}; };
/** var ATTRIBUTES = {
* Map of svg paths and points. index: 'data-index',
*/ id: 'data-id'
var polygonMap = { };
paths: null,
points: null /**
}; * Map of svg paths and points.
*/
/** var polygonMap = {
* Container of Card instances. paths: null,
*/ points: null
var layout = {}; };
/** /**
* Initialise demo. * Container of Card instances.
*/ */
function init() { var layout = {};
// For options see: https://github.com/qrohlf/Trianglify /**
var pattern = Trianglify({ * Initialise demo.
width: window.innerWidth, */
height: window.innerHeight, var init = function () {
cell_size: 90,
variance: 1, // For options see: https://github.com/qrohlf/Trianglify
stroke_width: 1, var pattern = Trianglify({
x_colors: 'random', width: window.innerWidth,
y_colors: 'random' height: window.innerHeight,
}).svg(); // Render as SVG. cell_size: 90,
variance: 1,
_mapPolygons(pattern); stroke_width: 1,
x_colors: 'random',
_bindCards(); y_colors: 'random'
}; }).svg(); // Render as SVG.
_mapPolygons(pattern);
_bindCards();
_bindHashChange();
_triggerOpenCard('', _getHashFromURL(location.href));
};
/** /**
* Store path elements, map coordinates and sizes. * Store path elements, map coordinates and sizes.
* @param {Element} pattern The SVG Element generated with Trianglify. * @param {Element} pattern The SVG Element generated with Trianglify.
* @private * @private
*/ */
function _mapPolygons(pattern) { var _mapPolygons = function (pattern) {
// Append SVG to pattern container.
$(SELECTORS.pattern).append(pattern);
// Convert nodelist to array,
// Used `.childNodes` because IE doesn't support `.children` on SVG.
polygonMap.paths = [].slice.call(pattern.childNodes);
polygonMap.points = []; // Append SVG to pattern container.
$(SELECTORS.pattern).append(pattern);
polygonMap.paths.forEach(function(polygon) { // Convert nodelist to array,
// Used `.childNodes` because IE doesn't support `.children` on SVG.
polygonMap.paths = [].slice.call(pattern.childNodes);
// Hide polygons by adding CSS classes to each svg path (used attrs because of IE). polygonMap.points = [];
$(polygon).attr('class', CLASSES.polygon);
var rect = polygon.getBoundingClientRect(); polygonMap.paths.forEach(function (polygon) {
var point = { // Hide polygons by adding CSS classes to each svg path (used attrs because of IE).
x: rect.left + rect.width / 2, $(polygon).attr('class', CLASSES.polygon);
y: rect.top + rect.height / 2
};
polygonMap.points.push(point); var rect = polygon.getBoundingClientRect();
});
// All polygons are hidden now, display the pattern container. var point = {
$(SELECTORS.pattern).removeClass(CLASSES.patternHidden); x: rect.left + rect.width / 2,
}; y: rect.top + rect.height / 2
};
/**
* Bind Card elements.
* @private
*/
function _bindCards() {
var elements = $(SELECTORS.card); polygonMap.points.push(point);
});
$.each(elements, function(card, i) { // All polygons are hidden now, display the pattern container.
$(SELECTORS.pattern).removeClass(CLASSES.patternHidden);
var instance = new Card(i, card); };
layout[i] = { /**
card: instance * Bind Card elements.
}; * @private
*/
var cardImage = $(card).find(SELECTORS.cardImage); var _bindCards = function () {
var cardClose = $(card).find(SELECTORS.cardClose);
$(cardImage).on('click', _playSequence.bind(this, true, i)); var elements = $(SELECTORS.card);
$(cardClose).on('click', _playSequence.bind(this, false, i));
});
};
/** $.each(elements, function (card, i) {
* Create a sequence for the open or close animation and play.
* @param {boolean} isOpenClick Flag to detect when it's a click to open.
* @param {number} id The id of the clicked card.
* @param {Event} e The event object.
* @private
*
*/
function _playSequence(isOpenClick, id, e) {
var card = layout[id].card; var instance = new Card(i, card);
// Prevent when card already open and user click on image. layout[i] = {
if (card.isOpen && isOpenClick) return; card: instance
};
// Create timeline for the whole sequence. var $card = $(card);
var sequence = new TimelineLite({paused: true}); $card.attr(ATTRIBUTES.index, i + '');
var tweenOtherCards = _showHideOtherCards(id); var cardImage = $card.find(SELECTORS.cardImage);
var cardClose = $card.find(SELECTORS.cardClose);
if (!card.isOpen) { $(cardImage).on('click', function () {
// Open sequence. location.hash = $card.attr(ATTRIBUTES.id);
});
$(cardClose).on('click', function () {
location.hash = '';
});
});
};
_setPatternBgImg(e.target); /**
* Create a sequence for the open or close animation and play.
* @param {boolean} isOpenClick Flag to detect when it's a click to open.
* @param {number} id The id of the clicked card.
* @private
*
*/
var _playSequence = function (isOpenClick, id) {
sequence.add(tweenOtherCards); var card = layout[id].card;
sequence.add(card.openCard(_onCardMove), 0);
} else { // Prevent when card already open and user click on image.
// Close sequence. if (card.isOpen && isOpenClick) {
return;
}
var closeCard = card.closeCard(); // Create timeline for the whole sequence.
var position = closeCard.duration() * 0.8; // 80% of close card tween. var sequence = new TimelineLite({paused: true});
sequence.add(closeCard); var tweenOtherCards = _showHideOtherCards(id);
sequence.add(tweenOtherCards, position);
}
sequence.play(); if (!card.isOpen) {
}; // Open sequence.
/** _setPatternBgImg($(this).find(SELECTORS.cardImage).find('image'));
* Show/Hide all other cards.
* @param {number} id The id of the clcked card to be avoided.
* @private
*/
function _showHideOtherCards(id) {
var TL = new TimelineLite; sequence.add(tweenOtherCards);
sequence.add(card.openCard(_onCardMove), 0);
var selectedCard = layout[id].card; } else {
// Close sequence.
for (var i in layout) { var closeCard = card.closeCard();
var position = closeCard.duration() * 0.8; // 80% of close card tween.
var card = layout[i].card; sequence.add(closeCard);
sequence.add(tweenOtherCards, position);
}
// When called with `openCard`. sequence.play();
if (card.id !== id && !selectedCard.isOpen) { };
TL.add(card.hideCard(), 0);
}
// When called with `closeCard`. /**
if (card.id !== id && selectedCard.isOpen) { * Show/Hide all other cards.
TL.add(card.showCard(), 0); * @param {number} id The id of the clcked card to be avoided.
} * @private
} */
var _showHideOtherCards = function (id) {
return TL; var TL = new TimelineLite;
};
/** var selectedCard = layout[id].card;
* Add card image to pattern background.
* @param {Element} image The clicked SVG Image Element.
* @private
*/
function _setPatternBgImg(image) {
var imagePath = $(image).attr('xlink:href'); for (var i in layout) {
$(SELECTORS.pattern).css('background-image', 'url(' + imagePath + ')'); if (layout.hasOwnProperty(i)) {
}; var card = layout[i].card;
/** // When called with `openCard`.
* Callback to be executed on Tween update, whatever a polygon if (card.id !== id && !selectedCard.isOpen) {
* falls into a circular area defined by the card width the path's TL.add(card.hideCard(), 0);
* CSS class will change accordingly. }
* @param {Object} track The card sizes and position during the floating.
* @private
*/
function _onCardMove(track) {
var radius = track.width / 2; // When called with `closeCard`.
if (card.id !== id && selectedCard.isOpen) {
TL.add(card.showCard(), 0);
}
}
}
var center = { return TL;
x: track.x,
y: track.y
}; };
polygonMap.points.forEach(function(point, i) { /**
* Add card image to pattern background.
* @param {Element} image The clicked SVG Image Element.
* @private
*/
var _setPatternBgImg = function (image) {
if (_detectPointInCircle(point, radius, center)) { var imagePath = $(image).attr('xlink:href');
$(polygonMap.paths[i]).attr('class', CLASSES.polygon + ' ' + CLASSES.polygonHidden);
} else {
$(polygonMap.paths[i]).attr('class', CLASSES.polygon);
}
});
}
/** $(SELECTORS.pattern).css('background-image', 'url(' + imagePath + ')');
* Detect if a point is inside a circle area. };
* @private
*/ /**
function _detectPointInCircle(point, radius, center) { * Callback to be executed on Tween update, whatever a polygon
* falls into a circular area defined by the card width the path's
* CSS class will change accordingly.
* @param {Object} track The card sizes and position during the floating.
* @private
*/
var _onCardMove = function (track) {
var radius = track.width / 2;
var center = {
x: track.x,
y: track.y
};
polygonMap.points.forEach(function (point, i) {
if (_detectPointInCircle(point, radius, center)) {
$(polygonMap.paths[i]).attr('class', CLASSES.polygon + ' ' + CLASSES.polygonHidden);
} else {
$(polygonMap.paths[i]).attr('class', CLASSES.polygon);
}
});
};
var xp = point.x; /**
var yp = point.y; * Detect if a point is inside a circle area.
* @private
*/
var _detectPointInCircle = function (point, radius, center) {
var xc = center.x; var xp = point.x;
var yc = center.y; var yp = point.y;
var d = radius * radius; var xc = center.x;
var yc = center.y;
var isInside = Math.pow(xp - xc, 2) + Math.pow(yp - yc, 2) <= d; var d = radius * radius;
return isInside; return Math.pow(xp - xc, 2) + Math.pow(yp - yc, 2) <= d;
}; };
// Expose methods. /**
return { * initialize page view according to hash
init: init * @private
}; */
var _triggerOpenCard = function (fromId, toId) {
var getIndex = function (card) {
var index = $(card).attr(ATTRIBUTES.index);
return parseInt(index, 10);
};
if (fromId) {
var fromBlogCard = $('[' + ATTRIBUTES.id + '="' + fromId + '"]')[0];
if (fromBlogCard) {
_playSequence.call(fromBlogCard, false, getIndex(fromBlogCard));
}
}
if (toId) {
var toBlogCard = $('[' + ATTRIBUTES.id + '="' + toId + '"]')[0];
if (toBlogCard) {
_playSequence.call(toBlogCard, true, getIndex(toBlogCard));
}
}
};
var _getHashFromURL = function (url) {
var a = document.createElement('a');
a.href = url;
return a.hash.slice(1);
};
var _bindHashChange = function () {
window.addEventListener('hashchange', function (e) {
var newHash = _getHashFromURL(e.newURL);
var oldHash = _getHashFromURL(e.oldURL);
_triggerOpenCard(oldHash, newHash);
});
};
// Expose methods.
return {
init: init
};
})(window); })(window);
......
js/modern-blog.min.js deleted 100644 → 0
+ 0
− 1
View file @ 479f19ec
'use strict';var demo=(function(window,undefined){var SELECTORS={pattern:'.pattern',card:'.card',cardImage:'.card__image',cardClose:'.card__btn-close',};var CLASSES={patternHidden:'pattern--hidden',polygon:'polygon',polygonHidden:'polygon--hidden'};var polygonMap={paths:null,points:null};var layout={};function init(){var pattern=Trianglify({width:window.innerWidth,height:window.innerHeight,cell_size:90,variance:1,stroke_width:1,x_colors:'random',y_colors:'random'}).svg();_mapPolygons(pattern);_bindCards();};function _mapPolygons(pattern){$(SELECTORS.pattern).append(pattern);polygonMap.paths=[].slice.call(pattern.childNodes);polygonMap.points=[];polygonMap.paths.forEach(function(polygon){$(polygon).attr('class',CLASSES.polygon);var rect=polygon.getBoundingClientRect();var point={x:rect.left+rect.width/2,y:rect.top+rect.height/2};polygonMap.points.push(point);});$(SELECTORS.pattern).removeClass(CLASSES.patternHidden);};function _bindCards(){var elements=$(SELECTORS.card);$.each(elements,function(card,i){var instance=new Card(i,card);layout[i]={card:instance};var cardImage=$(card).find(SELECTORS.cardImage);var cardClose=$(card).find(SELECTORS.cardClose);$(cardImage).on('click',_playSequence.bind(this,true,i));$(cardClose).on('click',_playSequence.bind(this,false,i));});};function _playSequence(isOpenClick,id,e){var card=layout[id].card;if(card.isOpen&&isOpenClick)return;var sequence=new TimelineLite({paused:true});var tweenOtherCards=_showHideOtherCards(id);if(!card.isOpen){_setPatternBgImg(e.target);sequence.add(tweenOtherCards);sequence.add(card.openCard(_onCardMove),0);}else{var closeCard=card.closeCard();var position=closeCard.duration()*0.8;sequence.add(closeCard);sequence.add(tweenOtherCards,position);}sequence.play();};function _showHideOtherCards(id){var TL=new TimelineLite;var selectedCard=layout[id].card;for(var i in layout){var card=layout[i].card;if(card.id!==id&&!selectedCard.isOpen){TL.add(card.hideCard(),0);}if(card.id!==id&&selectedCard.isOpen){TL.add(card.showCard(),0);}}return TL;};function _setPatternBgImg(image){var imagePath=$(image).attr('xlink:href');$(SELECTORS.pattern).css('background-image','url('+imagePath+')');};function _onCardMove(track){var radius=track.width/2;var center={x:track.x,y:track.y};polygonMap.points.forEach(function(point,i){if(_detectPointInCircle(point,radius,center)){$(polygonMap.paths[i]).attr('class',CLASSES.polygon+' '+CLASSES.polygonHidden);}else{$(polygonMap.paths[i]).attr('class',CLASSES.polygon);}});}function _detectPointInCircle(point,radius,center){var xp=point.x;var yp=point.y;var xc=center.x;var yc=center.y;var d=radius*radius;var isInside=Math.pow(xp-xc,2)+Math.pow(yp-yc,2)<=d;return isInside;};return{init:init};})(window);window.onload=demo.init;
\ No newline at end of file
js/vendors/html5.min.js 0 → 100644
+ 8
− 0
View file @ b0162df3
/*
HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment