forked from sparanoid/almace-scaffolding
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathcustom-color-scheme.html
15 lines (14 loc) · 13.7 KB
/
custom-color-scheme.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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 - Custom Color Scheme</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 how to change your page color scheme for specific posts. You can simply add the folloing variables 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/custom-color-scheme.html"> <meta name="twitter:title" content="Custom Color Scheme"> <meta name="twitter:description" content="
This is an example how to change your page color scheme for specific posts. You can simply add the folloing variables to your post front-matter field:scheme-text: &quot;#0029ff&quot;scheme-link: &...
"> <style>body{color:#0029ff;background-color:#00ebff}a,button{color:#0029ff}::selection{color:#ff00b4}body:before,.logo{background:#0029ff}.logo:hover{background:#ff00b4}.navigation li a:hover,.navigation li a:focus{color:#ff00b4}.current a{color:#ff00b4}.content a{color:#ff00b4}.content code,.content pre{color:#ad00ff}.note,.store,.download{border-left-color:#ff00b4}.external span{background:#ff00b4}:target [rev=footnote],:target [rel=footnote]{color:#ff00b4}</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> <h2> Custom Color Scheme </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 how to change your page color scheme for specific posts. You can simply add the folloing variables 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">scheme-text: "#0029ff"
scheme-link: "#ff00b4"
scheme-hover: "#ff00b4"
scheme-code: "#ad00ff"
scheme-bg: "#00ebff"
</code></pre></div> <p>You can also ignore other variables if you only wanto change the background:</p> <div class="highlight"><pre><code class="language-text" data-lang="text">scheme-bg: "#00ebff"
</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
-->