forked from sparanoid/almace-scaffolding
-
Notifications
You must be signed in to change notification settings - Fork 7
/
svg-post-title.html
17 lines (16 loc) · 19.6 KB
/
svg-post-title.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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 - SVG Post Ttile</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="This is an example of custom post title using SVG image. You can simply add the folloing setting to your post front-matter field:"> <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/svg-post-title.html"> <meta name="twitter:title" content="SVG Post Ttile"> <meta name="twitter:description" content="
This is an example of custom post title using SVG image. You can simply add the folloing setting to your post front-matter field:svg-headline: svg/kai.svgsvg-headline-width: 400svg-headline-height: 86Image d...
"> <style>body{color:#b93b00;background-color:#ff9610}a,button{color:#b93b00}::selection{color:#9b3100}body:before,.logo{background:#b93b00}.logo:hover{background:#9b3100}.navigation li a:hover,.navigation li a:focus{color:#ffe000}.current a{color:#9b3100}.content a{color:#9b3100}.content code,.content pre{color:#ffe000}.note,.store,.download{border-left-color:#9b3100}.external span{background:#9b3100}:target [rev=footnote],:target [rel=footnote]{color:#ffe000}</style><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"> <article> <header> <style scoped>h2 svg{width:40vw;height:8.6vw}</style><h2> <svg xmlns="http://www.w3.org/2000/svg" width="2175" height="465" viewBox="0 0 2175 465"><title>Kai Series</title><g fill="#fff"><circle cx="251.112" cy="351.569" r="112.615"></circle><circle cx="113.355" cy="113.432" r="112.614"></circle><circle cx="389.645" cy="113.208" r="112.614"></circle></g><g fill="#F86604"><polygon points="266.188,348.771 254.685,348.771 251.131,337.833 247.577,348.771 236.075,348.771 245.38,355.532 241.826,366.472 251.131,359.711 260.437,366.472 256.882,355.532"></polygon><polygon points="172.7,85.781 161.198,85.781 157.644,74.843 154.089,85.781 142.587,85.781 151.893,92.542 148.338,103.481 157.644,96.721 166.949,103.481 163.395,92.542"></polygon><polygon points="128.431,158.786 116.929,158.786 113.375,147.848 109.82,158.786 98.318,158.786 107.624,165.547 104.069,176.486 113.375,169.726 122.68,176.486 119.125,165.547"></polygon><polygon points="86.492,85.781 74.989,85.781 71.435,74.843 67.881,85.781 56.379,85.781 65.685,92.542 62.13,103.481 71.435,96.721 80.741,103.481 77.186,92.542"></polygon><polygon points="404.721,110.411 393.219,110.411 389.664,99.472 386.11,110.411 374.607,110.411 383.913,117.172 380.359,128.11 389.664,121.35 398.97,128.11 395.415,117.172"></polygon><polygon points="404.721,54.492 393.219,54.492 389.664,43.553 386.11,54.492 374.607,54.492 383.913,61.253 380.359,72.191 389.664,65.432 398.97,72.191 395.415,61.253"></polygon><polygon points="404.721,166.33 393.219,166.33 389.664,155.391 386.11,166.33 374.607,166.33 383.913,173.091 380.359,184.029 389.664,177.269 398.97,184.029 395.415,173.091"></polygon><polygon points="455.203,139.924 443.7,139.924 440.146,128.984 436.593,139.924 425.09,139.924 434.396,146.685 430.841,157.623 440.146,150.862 449.452,157.623 445.897,146.685"></polygon><polygon points="355.015,139.924 343.513,139.924 339.959,128.984 336.404,139.924 324.902,139.924 334.208,146.685 330.653,157.623 339.959,150.862 349.264,157.623 345.709,146.685"></polygon><polygon points="354.238,83.229 342.736,83.229 339.182,72.289 335.628,83.229 324.126,83.229 333.431,89.988 329.877,100.928 339.182,94.167 348.487,100.928 344.933,89.988"></polygon><polygon points="455.203,83.229 443.7,83.229 440.146,72.289 436.593,83.229 425.09,83.229 434.396,89.988 430.841,100.928 440.146,94.167 449.452,100.928 445.897,89.988"></polygon></g><path d="M627.4 219.109l94.033-96.471h48.659l-109.209 109.47 109.835 132.334h-48.815l-86.992-107.59-7.51 7.517v100.073h-36.455v-241.804h36.454v96.471zm317.77 86.605h-103.42l-26.911 58.729h-39.271l119.535-256.995 115.311 256.995h-39.897l-25.347-58.729zm-14.864-34.297l-35.829-82.22-37.55 82.22h73.379zm146.759-148.779v241.804h-36.455v-241.804h36.455zm293.518 35.863l-29.57 17.541c-5.53-9.604-10.796-15.869-15.803-18.793-5.217-3.34-11.945-5.012-20.184-5.012-10.118 0-18.516 2.875-25.189 8.621-6.677 5.643-10.014 12.746-10.014 21.313 0 11.807 8.762 21.313 26.285 28.522l24.095 9.874c19.608 7.943 33.952 17.633 43.026 29.073 9.074 11.442 13.612 25.469 13.612 42.079 0 22.256-7.407 40.645-22.218 55.168-14.917 14.628-33.431 21.939-55.543 21.939-20.966 0-38.281-6.239-51.944-18.722-13.456-12.47-21.854-29.983-25.19-52.535l36.925-8.144c1.667 14.2 4.589 24.015 8.762 29.442 7.51 10.441 18.462 15.661 32.856 15.661 11.368 0 20.81-3.808 28.319-11.423s11.265-17.267 11.265-28.953c0-4.693-.652-8.998-1.955-12.91-1.306-3.913-3.34-7.513-6.103-10.799-2.765-3.286-6.336-6.365-10.717-9.232-4.382-2.868-9.599-5.608-15.646-8.218l-23.312-9.702c-33.066-13.979-49.598-34.429-49.598-61.347 0-18.152 6.936-33.333 20.81-45.539 13.871-12.311 31.135-18.468 51.788-18.468 27.849.003 49.598 13.525 65.243 40.564zm177.119-1.565h-96.849v58.102h94.032v34.297h-94.032v80.811h96.849v34.297h-133.304v-241.805h133.304v34.298zm123.296 104.458l74.788 103.049h-44.592l-68.998-98.977h-6.571v98.977h-36.455v-241.805h42.713c31.918 0 54.969 6.005 69.155 18.01 15.646 13.365 23.469 31.008 23.469 52.934 0 17.124-4.903 31.846-14.707 44.164-9.806 12.32-22.74 20.202-38.802 23.648zm-45.373-27.72h11.578c34.523 0 51.788-13.207 51.788-39.622 0-24.744-16.795-37.116-50.38-37.116h-12.986v76.738zm186.507-111.036v241.804h-36.455v-241.804h36.455zm184.941 34.298h-96.849v58.102h94.032v34.297h-94.032v80.811h96.849v34.297h-133.303v-241.805h133.304l-.001 34.298zm171.649 1.565l-29.57 17.541c-5.53-9.604-10.796-15.869-15.803-18.793-5.217-3.34-11.945-5.012-20.184-5.012-10.118 0-18.516 2.875-25.189 8.621-6.677 5.643-10.014 12.746-10.014 21.313 0 11.807 8.762 21.313 26.285 28.522l24.095 9.874c19.608 7.943 33.952 17.633 43.026 29.073 9.074 11.442 13.612 25.469 13.612 42.079 0 22.256-7.407 40.645-22.218 55.168-14.917 14.628-33.431 21.939-55.543 21.939-20.966 0-38.281-6.239-51.944-18.722-13.456-12.47-21.854-29.983-25.19-52.535l36.925-8.144c1.667 14.2 4.589 24.015 8.762 29.442 7.51 10.441 18.462 15.661 32.856 15.661 11.368 0 20.81-3.808 28.319-11.423s11.265-17.267 11.265-28.953c0-4.693-.652-8.998-1.955-12.91-1.306-3.913-3.34-7.513-6.103-10.799-2.765-3.286-6.336-6.365-10.717-9.232-4.382-2.868-9.599-5.608-15.646-8.218l-23.312-9.702c-33.066-13.979-49.598-34.429-49.598-61.347 0-18.152 6.936-33.333 20.81-45.539 13.871-12.311 31.135-18.468 51.788-18.468 27.849.003 49.597 13.525 65.243 40.564z" fill="#B93B00"></path></svg> </h2> <small>By <span rel="author">Tunghsiao Liu</span> on <time datetime="2014-02-01T00:00:00+08:00">Feb 01, 2014</time></small> </header> <p>This is an example of custom post title using SVG image. You can simply 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">svg-headline: svg/kai.svg
svg-headline-width: 400
svg-headline-height: 86
</code></pre></div> <p>Image defined for <code>svg-headline</code> should be stored at <code>_app/_includes/svg/</code>, you can simply keep these title images under Git control, they will be smooshed into the HTML pages using Grunt.js in production environment. The <code>svg-headline-width</code> and <code>svg-headline-height</code> can be omitted if you have correct dimensions for your images.</p> <p>There’s also an option for common raster images, but please note that these files should be stored at where you define <code>site.file</code>.</p> <div class="highlight"><pre><code class="language-text" data-lang="text">img-headline: imouto-logo-large.png
img-headline-width: 500
</code></pre></div> <p><strong>Pro Tips</strong>: Keep a <code><title></code> tag for your SVG can help Safari generate correct post title for its Reader mode:</p> <div class="highlight"><pre><code class="language-text" data-lang="text"><svg xmlns="http://www.w3.org/2000/svg" width="2175" height="465" viewBox="0 0 2175 465">
<title>Kai Series</title>
…
</code></pre></div> </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>
<!--
© Tunghsiao Liu.
almace-scaffolding - v0.0.15 (09-01-2014)
MIT - http://github.com/sparanoid/almace-scaffolding/blob/master/LICENSE
-->