forked from sparanoid/almace-scaffolding
-
Notifications
You must be signed in to change notification settings - Fork 7
/
markup-example.html
46 lines (45 loc) · 28.3 KB
/
markup-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html> <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui"> <meta name="description" content="I make things that don’t suck."> <title>Almace Scaffolding - Markup Example</title> <link rel="alternate" href="/feed/" type="application/atom+xml"> <style>.cf:after,.cf:before{display:table;content:''}.cf:after{clear:both}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:2vw;line-height:1.42857143;margin:0 auto;padding:0 16%;color:#000;background:#fff;text-rendering:optimizelegibility;image-rendering:optimizequality}body:before{position:absolute;z-index:-9999;top:0;left:0;width:100%;height:1vmax;content:'';pointer-events:none;opacity:.2;background:#ff00b4}.heading{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-weight:700;letter-spacing:-.06em;-webkit-font-smoothing:antialiased}.sub-heading{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:72%;font-weight:400;letter-spacing:.08em;opacity:.5}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}button,input,select[multiple],textarea{background-image:none}a,button{-webkit-transition:color .5s ease,border-color .5s ease,background .5s ease,opacity 1.5s ease;transition:color .5s ease,border-color .5s ease,background .5s ease,opacity 1.5s ease;text-decoration:none;color:#000}a:focus,a:hover,button:focus,button:hover{-webkit-transition:color .1s ease,border-color .1s ease,background .1s ease,opacity .1s ease;transition:color .1s ease,border-color .1s ease,background .1s ease,opacity .1s ease;border-bottom:.1em solid}hr,img{border:0}del{text-decoration:line-through}::-moz-selection{color:#ff00b4;background:rgba(0,0,0,.02)}::selection{color:#ff00b4;background:rgba(0,0,0,.02)}.logo{display:block;width:100%;height:1vmax;margin:0 0 1.4vmax;opacity:0;background:#ff00b4}.logo:focus,.logo:hover{border-bottom:none!important;background:#000}.logo h1{height:0;text-indent:-99999em}body:hover .logo{opacity:1!important}.navigation{font-size:50%;font-weight:700;margin:0 0 16vmin;margin-right:-1.1em;margin-left:-1.1em;letter-spacing:.45em;text-transform:uppercase}.navigation li{line-height:2;display:inline-block;list-style:none}.navigation li a{padding:.5em 1.2em}.navigation li a:focus,.navigation li a:hover{color:#ff00b4;border:none}.current a{color:#ff00b4}body:hover .latest{color:#ff00b4!important}.content .status{font-size:75%;font-weight:700;margin:1vmin 0 0}.content .status:before{display:inline-block;width:.8em;height:.8em;margin-right:.8vw;content:'';border-radius:50%;background:rgba(0,0,0,.2)}.content .status.available:before{background:#0cf}.content .status.available a{color:#0cf}.content .status.unavailable:before{background:#f30}.content .status.unavailable a{color:#f30}.content{margin-bottom:16vmin;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;-ms-hyphens:auto}.content:after,.content:before{display:table;content:''}.content:after{clear:both}.content article>:last-child,.content article>:last-child>:last-child,.content article>:last-child>:last-child>:last-child,.content article>:last-child>:last-child>:last-child>:last-child{margin-bottom:0!important}.content a{font-weight:700}.content p{line-height:1.71428571;margin:0 0 1.1em}.content header{padding-bottom:16vmin}.content header h2{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-weight:700;line-height:1.1;margin:0 0 .1em;letter-spacing:-.06em;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;-webkit-font-smoothing:antialiased;-ms-hyphens:none}.content header h2 svg{display:block;max-width:100%}.content header h2 img,.content header h2 svg{margin-bottom:.3em}.content header .latest-post{font-size:80%;font-weight:400;line-height:1.2;margin-top:16vmin}.content header .latest-post a{font-weight:700}.content header small{display:block;margin:2vmin 0 0;letter-spacing:.1em}.content header+*{margin-top:0!important}.content h3,.content h4,.content h5,.content h6{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-weight:400;margin:10vmin 0 1rem;letter-spacing:.08em}.content ol,.content ul{margin:0 0 1em 1.5em}.content ol li,.content ul li{line-height:1.71428571}.content ol li ol,.content ol li>ul,.content ul li ol,.content ul li>ul{margin-bottom:0}.content ol{margin-left:1.75em}.content iframe,.content img,.content video{display:block;max-width:100%;margin:0 0 4vmin}.content blockquote{position:relative;margin-bottom:2em}.content blockquote>p{padding-left:.8em;border-left:2px solid}.content blockquote footer:after,.content blockquote footer:before{display:table;content:''}.content blockquote footer:after{clear:both}.content blockquote cite{font-size:90%;font-style:normal;float:right}.content blockquote cite:before{content:'\2500\2500\00a0'}.content sup{font-size:75%}.content abbr:after{content:' (' attr(title) ')'}.content code,.content pre{font-family:Menlo,monospace;color:#00cc3c}.content pre{font-size:90%;line-height:1.71428571;overflow-x:scroll;margin:0 0 1em;padding:1em;background:rgba(0,136,255,.04)}.content form input{display:block;width:100%;margin:0 0 1vmin;padding:1vmin 0;-webkit-transition:padding .2s ease;transition:padding .2s ease;border:none;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0;outline:0;-webkit-appearance:none}.content form input:focus{padding:1vmin;border-color:#000;background:rgba(0,0,0,.02)}.content input:focus:required:invalid:focus,.content select:focus:required:invalid:focus,.content textarea:focus:required:invalid:focus{border-color:#ff00b4;background:rgba(255,0,180,.05);-webkit-box-shadow:none;box-shadow:none}.content table{font-size:90%;width:100%;margin:0 0 1em;border-spacing:0;border-collapse:collapse}.content table td,.content table th{padding:.6em}.content table th{text-align:left;border-bottom:2px solid rgba(0,0,0,.06)}.content table td{border-top:1px solid rgba(0,0,0,.04)}[lang=ja],[lang=zh]{text-align:justify}.margin-fix:first-letter{margin-left:-.6em}.tweet{margin-top:10vmin}.largetype{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-size:200%;font-weight:700;letter-spacing:-.06em;-webkit-font-smoothing:antialiased}.browser{position:relative;margin:0 0 4vmin!important;padding-top:24px;border-radius:5px 5px 0 0;background:rgba(255,255,255,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.05);box-shadow:0 0 0 1px rgba(0,0,0,.05)}.browser:before{position:absolute;top:8px;left:10px;display:block;width:8px;height:8px;content:'';border-radius:50%;background:#fcdddf;-webkit-box-shadow:16px 0 0 0 rgba(254,240,203,.96),32px 0 0 0 rgba(177,247,185,.96),0 0 0 1px rgba(156,11,21,.3),16px 0 0 1px rgba(147,108,4,.3),32px 0 0 1px rgba(11,107,22,.3);box-shadow:16px 0 0 0 rgba(254,240,203,.96),32px 0 0 0 rgba(177,247,185,.96),0 0 0 1px rgba(156,11,21,.3),16px 0 0 1px rgba(147,108,4,.3),32px 0 0 1px rgba(11,107,22,.3)}.browser img{margin:0;-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.05);box-shadow:0 -1px 0 0 rgba(0,0,0,.05)}.download,.note,.store{padding-left:.8em;border-left:2px solid #ff00b4}.footnotes{font-size:90%;font-style:italic}:target [rel=footnote],:target [rev=footnote]{color:#ff00b4}article .list{margin:0;list-style:none}article .list>li{margin:0 0 1.4vmin}article .list>li h2{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-size:200%;font-weight:700;line-height:1.2;letter-spacing:-.06em;-webkit-font-smoothing:antialiased}article .list .external:focus,article .list .external:hover{border:none}.external{line-height:1}.external span{display:inline-block;width:.2em;height:.2em;margin:0 .1em;-webkit-transition:-webkit-transform .4s ease;transition:transform .4s ease;vertical-align:middle;border-radius:50%;background:#000}.external:focus span,.external:hover span{-webkit-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}.footer{font-size:72%;padding:0 0 16vmin;text-transform:lowercase}.footer ul li{display:inline}.footer ul li:after{padding:0 .6vw;content:' / ';opacity:.3}.footer ul li:last-child:after{content:none}.loaded .intense-wrap article p>img:not(.nointense){cursor:-webkit-zoom-in;cursor:zoom-in}.loaded.intense-open{cursor:-webkit-zoom-out;cursor:zoom-out}.gist code,.gist pre{padding:0;color:inherit;background-color:transparent}.gist .gist-file{font-family:Menlo,monospace!important;font-size:80%!important}.gist .markdown-body{padding:1em}@media (max-width:1000px){body{font-size:2.8vw;padding-right:8%;padding-left:8%}}@media (max-width:640px){body{font-size:4vw;padding-right:4%;padding-left:4%}article h2 img,article h2 svg{width:100%!important;height:100%!important}.list li h2 .external{display:none}}@media (max-width:400px){body{font-size:5.6vw}}@media (max-device-width:480px),(max-device-width:1024px){body{-webkit-text-size-adjust:none}}.highlight pre{background:rgba(229,138,202,.1)}.highlight code{color:#db70bc}.highlight .c{font-style:italic;color:#e075bc}.highlight .err{color:#e44e9a;background-color:#e3d2d2}.highlight .cm{font-style:italic;color:#e075bc}.highlight .cp{font-weight:700;color:#e075c1}.highlight .c1{font-style:italic;color:#e075bc}.highlight .cs{font-weight:700;font-style:italic;color:#e075c1}.highlight .gd{color:#b34793;background-color:#fdd}.highlight .gd .x{color:#b34793;background-color:#faa}.highlight .gr{color:#e64793}.highlight .gh{color:#e075c1}.highlight .gi{color:#b34793;background-color:#dfd}.highlight .gi .x{color:#b34793;background-color:#afa}.highlight .go{color:#db70bc}.highlight .gp{color:#cc61ac}.highlight .gu{color:#e67ac6}.highlight .gt{color:#e64793}.highlight .kt{font-weight:700;color:#c761bc}.highlight .m{color:#b375c1}.highlight .s{color:#f54ca7}.highlight .na{color:#b36eb9}.highlight .nb{color:#b370c9}.highlight .nc{font-weight:700;color:#c761bc}.highlight .no{color:#b36eb9}.highlight .ni{color:#d947b9}.highlight .ne,.highlight .nf{font-weight:700;color:#e04793}.highlight .nn{color:#cc61ac}.highlight .nt{color:#b347b9}.highlight .nv{color:#b36eb9}.highlight .w{color:#eb7fcb}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#b375c1}.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#f54ca7}.highlight .sr{color:#b3759e}.highlight .s1{color:#f54ca7}.highlight .ss{color:#e047b5}.highlight .bp{color:#e075c1}.highlight .vc,.highlight .vg,.highlight .vi{color:#b36eb9}.highlight .il{color:#b375c1}.highlight .gs,.highlight .k,.highlight .kc,.highlight .kd,.highlight .kp,.highlight .kr,.highlight .o,.highlight .ow{font-weight:700}.highlight .ge{font-style:italic}.content h3{font-size:108%;opacity:.6}.content h4{font-size:96%;opacity:.5}.content h5{font-size:84%;opacity:.4}.content h6{font-size:72%;opacity:.3}.amsf-logo{display:inline-block;width:8.6vw;height:8.6vw;margin:1vw;margin-left:0;vertical-align:middle}@media (max-width:640px){.amsf-logo{width:20.64vw;height:20.64vw}}.amsf-logo circle,.amsf-logo path{stroke-width:76px;stroke-linecap:square}.amsf-title{display:inline-block;vertical-align:middle;color:#ff00b4}</style> <meta name="description" content="Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying crowded market pivot..."> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@sparanoid"> <meta name="twitter:creator" content="@tunghsiao"> <meta name="twitter:url" content="http://amsf.github.io/markup-example.html"> <meta name="twitter:title" content="Markup Example"> <meta name="twitter:description" content="
Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying crowded...
"> <header> <a href="/" class="logo" accesskey="x"> <h1>Almace Scaffolding</h1> </a> </header> <nav class="navigation"> <ul> <li> <a href="/"> Home </a> </li> <li> <a href="/about/"> About </a> </li> </ul> </nav> <main class="content intense-wrap"> <article> <header> <h2> Markup Example </h2> <small>By <span rel="author">Tunghsiao Liu</span> on <time datetime="2014-06-01T00:00:00+08:00">Jun 01, 2014</time></small> </header> <p>Lorem lean startup ipsum <strong>product market fit customer development</strong> acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying <a href="#">crowded market</a> pivot onboarding freemium prototype ping pong. Early stage disruptive ecosystem community outreach dynamic location based strategic investor.</p> <blockquote> <p>Two days ago the Chinese website <a href="http://www.taobao.com/">Taobao</a> held a discount promotion to celebrate what’s known as “double sticks day” in China. In a single 24hr period, they conducted 19bn RMB (US$3.06bn) of business.</p> <footer> <cite><a href="http://westiseast.co.uk/blog/taobao-sales-19-billion-bonanza/">Chris West</a></cite> </footer> </blockquote> <blockquote> <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </blockquote> <p>Good afterble constanoon, this sweet hongi is as bung as a stuffed morepork. Mean while, in the marae, Dr Ropata and Hairy Maclary from Donaldson’s Dairy were up to no good with a bunch of bloody troties.</p> <h3>Inline HTML elements</h3> <p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p> <ul> <li><strong>To bold text</strong>, use <code><strong></code>.</li> <li><em>To italicize text</em>, use <code><em></code>.</li> <li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code><abbr></code>, with an optional <code>title</code> attribute for the full phrase.</li> <li>Citations, like <cite>— Tunghsiao Liu & Mark otto</cite>, should use <code><cite></code>.</li> <li><del>Deleted</del> text should use <code><del></code> and <ins>inserted</ins> text should use <code><ins></code>.</li> <li>Superscript <sup>text</sup> uses <code><sup></code> and subscript <sub>text</sub> uses <code><sub></code>.</li> </ul> <p>Most of these elements are styled by browsers with few modifications on our part.</p> <p>Maui and his rough as guts piece of pounamu, what a stink buzz. Bro, quater-acre patches are really naff good with bung mates, aye. You have no idea how beached as our random kais were aye. Every time I see those beautiful lengths of number 8 wire it’s like Castle Hill all over again aye, do you happen to have a bucket or a hose bro?</p> <h3>Code Highlighting</h3> <p>Code highlighting demo, powered by Pygments. More info about code highlighting can be found at <a href="http://jekyllrb.com/docs/templates/#code-snippet-highlighting">Jekyll’s documentation</a>.</p> <div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">show</span>
<span class="vi">@widget</span> <span class="o">=</span> <span class="no">Widget</span><span class="p">(</span><span class="n">params</span><span class="o">[</span><span class="ss">:id</span><span class="o">]</span><span class="p">)</span>
<span class="n">respond_to</span> <span class="k">do</span> <span class="o">|</span><span class="nb">format</span><span class="o">|</span>
<span class="nb">format</span><span class="o">.</span><span class="n">html</span> <span class="c1"># show.html.erb</span>
<span class="nb">format</span><span class="o">.</span><span class="n">json</span> <span class="p">{</span> <span class="n">render</span> <span class="ss">json</span><span class="p">:</span> <span class="vi">@widget</span> <span class="p">}</span>
<span class="k">end</span>
<span class="k">end</span>
</code></pre></div><div class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Background color function */</span>
<span class="nc">.code-bg</span> <span class="o">(</span><span class="k">@v</span><span class="o">)</span> <span class="nt">when</span> <span class="o">(</span><span class="nt">lightness</span><span class="o">(</span><span class="k">@v</span><span class="o">)</span> <span class="o">>=</span> <span class="nt">50</span><span class="o">%)</span> <span class="p">{</span>
<span class="k">@return-bg</span><span class="o">:</span> <span class="nt">mix</span><span class="o">(</span><span class="nf">#000</span><span class="o">,</span> <span class="nt">lighten</span><span class="o">(</span><span class="k">@v</span><span class="o">,</span> <span class="nt">30</span><span class="o">%),</span> <span class="nt">10</span><span class="o">%)</span><span class="p">;</span>
<span class="err">}</span>
<span class="nc">.code-bg</span> <span class="o">(</span><span class="k">@v</span><span class="o">)</span> <span class="nt">when</span> <span class="o">(</span><span class="nt">lightness</span><span class="o">(</span><span class="k">@v</span><span class="o">)</span> <span class="o"><</span> <span class="nt">50</span><span class="o">%)</span> <span class="p">{</span>
<span class="k">@return-bg</span><span class="o">:</span> <span class="nt">mix</span><span class="o">(</span><span class="nf">#fff</span><span class="o">,</span> <span class="nt">darken</span><span class="o">(</span><span class="k">@v</span><span class="o">,</span> <span class="nt">10</span><span class="o">%),</span> <span class="nt">70</span><span class="o">%)</span><span class="p">;</span>
<span class="err">}</span>
</code></pre></div> <h3>Headings</h3> <p>You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.</p> <h4>Headings</h4> <p>You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.</p> <h5>Headings</h5> <p>You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.</p> <h6>Headings</h6> <p>You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.</p> <div class="highlight"><pre><code class="language-text" data-lang="text">### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading
</code></pre></div> <h3>Tables</h3> <table><thead> <tr> <th>Name </th><th>Upvotes </th><th>Downvotes </th><th>Abstentions <tbody> <tr> <td>Alice </td><td>10 </td><td>11 </td><td>2 </td></tr><tr> <td>Bob </td><td>4 </td><td>3 </td><td>1 </td></tr><tr> <td>Charlie </td><td>7 </td><td>9 </td><td>4 </td></tr><tr> <td>Totals </td><td>21 </td><td>23 </td><td>7 </td></tr></tbody></th></tr></thead></table> <h3>Gists via GitHub Pages</h3> <p>Use the <code>gist</code> tag to easily embed a GitHub Gist onto your site. This works with public or secret gists:</p> <script src="https://gist.github.com/sparanoid/55c3dd64f94881017a7b.js?file=gist.md"></script><h3>Unique Post Styling</h3> <p>You can simply use <code>css</code> key to your post YAML front-matter head:</p> <div class="highlight"><pre><code class="language-text" data-lang="text">---
layout: post
title: Welcome to Almace Scaffolding
css: |
body {
font-size: 1.8vw;
}
---
</code></pre></div> <h3>Browser Frame</h3> <p class="browser"><img src="http://rsrc.sparanoid.com/delicious.com.png" alt="Delicious Preview" class="nointense"></p> <p>You can add a browser frame to your images by simply using the following markup:</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"browser"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://sparanoid.com/photo.jpg"</span> <span class="na">alt=</span><span class="s">"Image"</span><span class="nt">></span>
<span class="nt"></p></span>
</code></pre></div> <p>Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.</p> <h3><a href="http://github.com/tholman/intense-images">intense.js</a> Support</h3> <p><img src="http://rsrc.sparanoid.com/moonstruck-princess-ext-red.jpg" alt="Moonstruck Princess Extended - Red"></p> <p>Add the folloing setting to your post <a href="http://jekyllrb.com/docs/frontmatter/">front-matter field</a>:</p> <div class="highlight"><pre><code class="language-text" data-lang="text">plugin: intense
</code></pre></div> <p>Markdown markup:</p> <div class="highlight"><pre><code class="language-text" data-lang="text">
</code></pre></div> <p>Or simply use HTML:</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://sparanoid.com/photo.jpg"</span> <span class="na">alt=</span><span class="s">"Image"</span><span class="nt">></span>
<span class="nt"></p></span>
</code></pre></div> <p><code>intense.js</code> is activated globally by default, if you want to disable this effect for specific image, you can simply apply <code>.nointense</code> CSS class to your <code><img></code>:</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://sparanoid.com/photo.jpg"</span> <span class="na">class=</span><span class="s">"nointense"</span> <span class="na">alt=</span><span class="s">"Image"</span><span class="nt">></span>
<span class="nt"></p></span>
</code></pre></div> <p>Please note that if you’re using HTML markup, you should wrap your images into a <code><p></code> container.</p> </article> </main> <footer class="footer"> <ul> <li><a href="/">Almace Scaffolding</a></li> <li><a href="http://sparanoid.com/lab/amsf/" title="Almace Scaffolding">amsf</a></li> <li><a href="/feed/" title="Feed - Atom (The Atom Syndication Format)">Atom</a></li> </ul> <p style="display:none"> <a href="https://plus.google.com/+tunghsiaoliu?rel=author" rel="author">Google+</a> </p> </footer> <script>window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}();var Intense=function(){"use strict";function a(a,b){for(var c in b)c in a||(a[c]=b[c]);return a}function b(a,b){for(var c in b)a.style[c]=b[c]}function c(a){var b=window.innerHeight/a.h;if(a.w*b>window.innerWidth)return{w:a.w*b,h:a.h*b,fit:!0};var c=window.innerWidth/a.w;return{w:a.w*c,h:a.h*c,fit:!1}}function d(a){var b;if(a.length)for(b=0;b<a.length;b++)e(a[b]);else e(a)}function e(a){(a.getAttribute("data-image")||a.src)&&a.addEventListener("click",function(){n(this)},!1)}function f(){h()}function g(){cancelRequestAnimFrame(v)}function h(){v=requestAnimFrame(h),t()}function i(){A=document.body.style.overflow,document.body.style.overflow="hidden",document.body.classList.add("intense-open")}function j(){document.body.style.overflow=A,document.body.classList.remove("intense-open")}function k(a,c,d){var e={backgroundColor:d,width:"100%",height:"100%",position:"fixed",top:"0px",left:"0px",overflow:"hidden",zIndex:"999999",margin:"0px",webkitTransition:"opacity 150ms cubic-bezier( 0, 0, .26, 1 )",MozTransition:"opacity 150ms cubic-bezier( 0, 0, .26, 1 )",transition:"opacity 150ms cubic-bezier( 0, 0, .26, 1 )",opacity:"0"};z=document.createElement("figure"),z.appendChild(y),b(z,e);var f={cursor:"zoom-out"};b(y,f);var g={fontFamily:'Georgia, Times, "Times New Roman", serif',position:"fixed",bottom:"0px",left:"0px",padding:"20px",color:"#fff",wordSpacing:"0.2px",webkitFontSmoothing:"antialiased",textShadow:"-1px 0px 1px rgba(0,0,0,0.4)"},h=document.createElement("figcaption");if(b(h,g),a){var i={margin:"0px",padding:"0px",fontWeight:"normal",fontSize:"40px",letterSpacing:"0.5px",lineHeight:"35px",textAlign:"left"},j=document.createElement("h1");b(j,i),j.innerHTML=a,h.appendChild(j)}if(c){var k={margin:"0px",padding:"0px",fontWeight:"normal",fontSize:"20px",letterSpacing:"0.1px",maxWidth:"500px",textAlign:"left",background:"none",marginTop:"5px"},l=document.createElement("h2");b(l,k),l.innerHTML=c,h.appendChild(l)}z.appendChild(h),m(),C.xCurr=C.xDest=window.innerWidth/2,C.yCurr=C.yDest=window.innerHeight/2,document.body.appendChild(z),setTimeout(function(){z.style.opacity="1"},10)}function l(){j(),p(),document.body.removeChild(z)}function m(){var a=c(x);y.width=a.w,y.height=a.h,D=a.fit,F={w:y.width,h:y.height},G={w:window.innerWidth,h:window.innerHeight},H={x:G.w-F.w,y:G.h-F.h}}function n(a){var b=a.getAttribute("data-image")||a.src,c=a.getAttribute("data-title"),d=a.getAttribute("data-caption"),e=a.getAttribute("data-background")||"rgba(0,0,0,.8)",f=new Image;f.onload=function(){x={w:f.width,h:f.height},y=this,k(c,d,e),i(),o(),h()},f.src=b}function o(){z.addEventListener("mousemove",q,!1),z.addEventListener("touchmove",r,!1),window.addEventListener("resize",m,!1),window.addEventListener("keyup",s,!1),y.addEventListener("click",l,!1)}function p(){z.removeEventListener("mousemove",q,!1),z.removeEventListener("touchmove",r,!1),window.removeEventListener("resize",m,!1),window.removeEventListener("keyup",s,!1),y.removeEventListener("click",l,!1)}function q(a){C.xDest=a.clientX,C.yDest=a.clientY}function r(a){a.preventDefault(),C.xDest=a.touches[0].clientX,C.yDest=a.touches[0].clientY}function s(a){a.preventDefault(),a.keyCode===B&&l()}function t(){if(C.xCurr+=.05*(C.xDest-C.xCurr),C.yCurr+=.05*(C.yDest-C.yCurr),D===!0){if(E+=C.xCurr-E,C.xCurr!==w){var a=parseFloat(E/G.w);a=H.x*a,y.style.webkitTransform="translate3d("+a+"px, 0px, 0px)",y.style.MozTransform="translate3d("+a+"px, 0px, 0px)",y.style.msTransform="translate3d("+a+"px, 0px, 0px)",w=C.xCurr}}else if(D===!1&&(E+=C.yCurr-E,C.yCurr!==w)){var a=parseFloat(E/G.h);a=H.y*a,y.style.webkitTransform="translate3d( 0px, "+a+"px, 0px)",y.style.MozTransform="translate3d( 0px, "+a+"px, 0px)",y.style.msTransform="translate3d( 0px, "+a+"px, 0px)",w=C.yCurr}}function u(a){if(!a)throw"You need to pass an element!";d(a)}var v,w,x,y,z,A,B=27,C={xCurr:0,yCurr:0,xDest:0,yDest:0},D=!0,E=0,F={w:0,h:0},G={w:0,h:0},H={x:0,y:0};return a(u,{resize:m,start:f,stop:g})}();</script><script>window.onload=function(){var n=document.querySelectorAll("p > img:not(.nointense)"),e=document.body,o="loaded";e.classList?e.classList.add(o):e.className+=" "+o,Intense(n)};</script>
<!--
© Tunghsiao Liu.
almace-scaffolding - v0.0.15 (09-01-2014)
MIT - http://github.com/sparanoid/almace-scaffolding/blob/master/LICENSE
-->