Skip to content

Instantly share code, notes, and snippets.

@tthtlc
Created January 30, 2020 16:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tthtlc/169572626d7dacd01e9648544738653c to your computer and use it in GitHub Desktop.
Save tthtlc/169572626d7dacd01e9648544738653c to your computer and use it in GitHub Desktop.
print css
<style>
code,kbd,pre,samp{font-family:'Inconsolata', monospace}button,hr,input{overflow:visible}img,legend{max-width:100%}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{padding:0;box-sizing:border-box}ol,pre,ul{margin:0 0 20px}.hljs,pre{overflow-x:auto}.hljs,article,aside,blockquote p,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}#wrapper:after,.blog-description:after,.clearfix:after,.post-date:after{content:""}.container,.post-stub,sub,sup{position:relative}.book-landing-with-cover img{box-shadow:5px 5px 8px grey}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}h1{margin:.67em 0}h1,h2,h3,h4,h5,h6{margin-bottom:20px}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none;width:auto}.container,table{width:100%}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:'Avenir', monospace;font-size:100%;line-height:1.15;margin:0}.footer,.site-header,textarea{overflow:auto}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}ol,p,ul{line-height:1.5em}summary{display:list-item}[hidden],template{display:none}.hljs{padding:.5em;color:#333;-webkit-text-size-adjust:none}pre,table td{padding:10px}.diff .hljs-header,.hljs-comment{color:#998;font-style:italic}.css .rule .hljs-keyword,.hljs-keyword,.hljs-request,.hljs-status,.hljs-subst,.hljs-winutils,.nginx .hljs-title{color:#333;font-weight:700}.hljs-hexcolor,.hljs-number,.ruby .hljs-constant{color:teal}.hljs-doctag,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#d14}.hljs-id,.hljs-title,.scss .hljs-preprocessor{color:#900;font-weight:700}.hljs-list .hljs-keyword,.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type,.tex .hljs-command,.vhdl .hljs-literal{color:#458;font-weight:700}.django .hljs-tag .hljs-keyword,.hljs-rule .hljs-property,.hljs-tag,.hljs-tag .hljs-title{color:navy;font-weight:400}.hljs-attribute,.hljs-name,.hljs-variable,.lisp .hljs-body{color:teal}.hljs-regexp{color:#009926}.clojure .hljs-keyword,.hljs-prompt,.hljs-symbol,.lisp .hljs-keyword,.ruby .hljs-symbol .hljs-string,.scheme .hljs-keyword,.tex .hljs-special{color:#f03838}.hljs-built_in{color:#0086b3}.hljs-cdata,.hljs-doctype,.hljs-pi,.hljs-pragma,.hljs-preprocessor,.hljs-shebang{color:#999;font-weight:700}h2,h3{padding-top:40px;font-weight:900}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.diff .hljs-change{background:#0086b3}.hljs-chunk{color:#aaa}a,a code{color:#00a0fc}body,html{height:100%}body{margin:0;background:#fefefe;color:#424242;font-family: 'Avenir', -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
font-size:20px}h1{font-size:35px;}h2{font-size:28px}h3{font-size:26px}h4{font-size:24px;margin-bottom:18px}h5{font-size:16px;margin-bottom:15px}h6{font-size:14px;margin-bottom:12px}p{margin:0 0 30px}a{text-decoration:none}ol ol,ol ul,ul ol,ul ul{margin:10px 10px 12px 20px}ol li,ul li{margin:0 0 2px}ol li:last-of-type,ul li:last-of-type{margin-bottom:0}blockquote{border-left:1px dotted #00a0fc;margin:40px 0;padding:5px 30px}blockquote p{color:#aeadad;font-style:italic;margin:0;width:100%}pre{background:#f1f0ea;border:1px solid #dddbcc;border-radius:3px;font-size:16px;margin-bottom:30px!important}pre code{padding: 0;white-space: pre-wrap;}code{padding:2px 4px;font-size:100%;color:#444;background-color:#f1f0ea;border-radius:4px}hr{border:none;border-bottom:1px solid #333;margin:45px 0}.fluid-width-video-wrapper,table{margin-bottom:40px}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:#f7f7f3}table th{padding:0 10px 10px;text-align:left}.error,.post-header,.site-header{text-align:center}table tr{border-bottom:1px dotted #aeadad}::selection{background:#fff5b8;color:#000;display:block}::-moz-selection{background:#fff5b8;color:#000;display:block}.hidden{text-indent:-9999px;visibility:hidden;display:none}.clearfix:after{display:table;clear:both}.container{margin:0 auto;max-width:889px}#wrapper{height:auto;min-height:100%;margin-bottom:-265px}#wrapper:after{display:block;height:265px}.button{background:#303030;border:none;border-radius:3px;color:#fefefe;font-size:14px;font-weight:700;padding:10px 12px}.button-square,.button:hover{background:#00a0fc}.button-square{color:#fff;float:left;font-size:17px;margin:0 0 0 10px;padding:3px 8px 4px}.button-square:hover{background:#303030}.comments{margin-top:10px}.site-header{padding:40px 0 0}.site-title-wrapper{display:table;margin:0 auto}.site-title{float:left;font-size:14px;font-weight:600;margin:0}.site-title a{float:left;background:#00a0fc;color:#fefefe;padding:5px 10px 6px}.site-title a:hover{background:#303030}.site-logo{display:block}.site-logo img{margin:0}.site-nav{list-style:none;margin:28px 0 10px;padding:0}.site-nav-item{display:inline-block;font-size:14px;font-weight:700;margin:0 10px}.site-nav-item a:hover{color:#424242}#latest-post{display:none}.post-container{margin:0 40px}.post-header{border-bottom:1px solid #333;margin:0 0 50px;padding:0 0 0}.page-title,.post-title{font-size:55px;font-weight:900;margin:22px 0;text-align:left;}.page-title{margin:15px 40px}.blog-description,.post-date{color:#aeadad;font-size:14px;font-weight:600;line-height:1;margin:25px 0 0;text-align:left}.center,.footer-copyright,.share,.share a{text-align:center}.blog-description a,.post-date a{color:#aeadad}.blog-description a:hover,.post-date a:hover{color:#00a0fc}.blog-description:after,.post-date:after{display:block;margin:40px auto 0;width:100px}.post-content a{border-bottom:1px dotted #00a0fc;padding:0 0 2px}.post-content:last-child{margin-bottom:0}.post-content .footnote{border-spacing:0;margin-bottom:0}.post-content .footnote .label+td{width:100%}.post-content .gist tr{border-bottom:0}.post-content img{width:auto;margin:0 auto;max-width:100%}.post-tags,.share{color:#aeadad;font-size:14px}.post-tags span,.share span{font-weight:600}.post-tags{float:left;margin:3px 0 0}.post-tags a:hover{color:#303030}.share{margin:0 auto}.share a{background:#00a0fc;color:#fff;display:inline-block;font-size:30px;margin-left:5px;padding:5px 0 4px;width:50px}.share a:hover{background:#303030}.post-navigation{display:table;margin:70px auto 100px}.newer-posts,.older-posts{float:left;background:#00a0fc;color:#fefefe;font-size:14px;font-weight:600;margin:0 5px;padding:5px 10px 6px;text-transform:uppercase}.newer-posts:hover,.older-posts:hover{background:#303030}.page-number{display:none}.post-list{list-style:none;padding:0;width:100%}.post-stub{border-bottom:1px dotted #303030;margin:0;display:block;padding:20px 12px}.post-stub a{color:#424242}.post-stub:hover{background:#fcf5f5;color:#00a0fc}.post-stub:hover .post-stub-tag{background:#00a0fc}.post-stub-tag{background:#303030;border-radius:3px;color:#fff;float:right;font-size:10px;margin:7px 0 0;padding:0 5px}.post-stub-title{font-size:21px;display:inline-block;margin:0;font-weight:900}.post-stub-description{display:inline-block;margin:0;text-transform:none}.post-stub-date{text-align: right;font-family:'Inconsolata', monospace;display:inline-block;font-size:18px;padding-top: 8px;}.next-posts-link a,.previous-posts-link a{display:block;padding:8px 11px}.footer{background:#303030;color:#d3d3d3;height:265px;margin-top:0}.footer .site-title-wrapper{margin:80px auto 35px}.footer .button-square:hover,.footer .site-title a:hover{background:#121212}.footer-copyright{color:#656565;font-size:14px;margin:0;text-transform:uppercase}.footer-copyright a{color:#656565;font-weight:700}.footer-copyright a:hover{color:#fefefe}li.post-stub{display: flex; flex-direction: row; justify-content: space-between}.date-tag{display: flex; flex-direction: column}@media only screen and (max-width:800px){.post-stub-tag{display:none}}@media only screen and (max-width:600px){.page-title,.post-header p,.post-title{word-wrap:break-word;overflow-wrap:break-word}h1,h2,ol,p,ul{margin-bottom:20px;word-break: break-word;}blockquote,img{margin:30px 0}pre{margin:20px 0}hr{margin:35px 0}.site-header{padding-top:40px}.site-title{float:none;margin-bottom:15px}.site-title a{float:none}.site-title+.button-square{margin-left:0}.site-nav-item{display:block;margin:15px 0}.post-header{padding-bottom:20px}.page-title,.post-title{font-size:42px;margin-top:5px}.blog-description,.post-date{margin-top:20px}.blog-description:after,.blog-description:before,.post-date:after,.post-date:before{margin-top:30px}.post-list,.share{margin-top:20px}.post-stub-title{display:block}.post-stub-date:before{content:"";display:block}.post-container,.post-list{margin-right:10px;margin-left:10px}.post-tags{width:100%}.post-stub a,.post-stub a:hover{padding-top:12px;padding-bottom:12px}.share{float:left}.share a{margin:0 5px 0 0}.footer{margin-top:0}.footer .site-title-wrapper{text-align:center}.footer .button-jump-top{clear:both;display:inline-block;float:none}}@media only screen and (max-width:450px){.date-tag{display:block;padding-bottom:20px}.post-stub-date{padding-top:15px}li.post-stub{display:block}.site-header{padding-top:40px}.page-title,.post-title{font-size:48px;line-height:1.2;word-wrap:break-word;overflow-wrap:break-word}.blog-description,.post-date{line-height:1.6;margin-top:10px}.blog-description:after,.blog-description:before,.post-date:after,.post-date:before{margin-top:20px}.post-container,aside,.post-list{margin-right:4px;margin-left:4px}.footer-copyright{padding:0 10px}}.center{margin:0 auto}.book-container-bottom{padding-top:40px;text-align:center;margin:0 auto;max-width:600px;padding-bottom:80px}@media only screen and (max-width:782px){#container{padding-top:0}}.gumroad-button img{width:250px;margin:0 auto}p.post-description{font-size:1.2rem}h2.post-description{padding-top:30px;font-size:23px;font-weight:300;text-align:left;line-height:1.8rem;padding-bottom:30px;letter-spacing:.5px;text-transform:none}code[class*=language-],pre[class*=language-]{white-space:pre-wrap!important}#cookie-bar{border-top:none!important}.book-wrapper{display:grid;grid-template-columns:70% 30%}.book-wrapper .book-wrapper-text{margin-top:70px;text-align:left}.home-section-col,.post-header.homepage .post-title{text-align:center}.book-wrapper img{width:200px;box-shadow:2px 2px 2px 2px #ccc}@media only screen and (max-width:750px){.post-title{font-size:65px}}@media only screen and (max-width:590px){.post-title,h2{font-size:45px}}@media only screen and (max-width:400px){.book-wrapper{display:block}.book-wrapper img{display:none}h2{font-size:25px}.homepage .post-title{font-size:50px}}.post-list > a:visited{color:gray}.book-banner-fixed{position:absolute;width:100%;text-align:center;background-color:#00a0fc;font-weight:500;padding-bottom:20px;padding-top:20px;top:0;z-index:10}@media only screen and (max-width:590px){.book-banner-fixed{display:none}}.home-section-col,aside{display:block; padding-top:30px}.home-section-col ul,aside ul{list-style-type:none;padding-left:0}.home-section-col ul li,aside ul li{font-size:1.2rem}.home-section-col ul li:nth-child(even),.home-section-col ul li a,aside ul li a{color:#424240;text-decoration:underline;}.home-section-col ul li a.active,aside ul li a.active{background-color:rgba(255,255,0,.27)}.home-section-col{width:48.2%}@media only screen and (max-width:400px){.home-section-col{display:block;width:100%}.formkit-header{font-size:25px!important}}.sections-wrapper{width:100%;display:flex;flex-flow:row wrap;justify-content:space-between}.single-post-container.has-sidebar{display:grid;grid-template-columns:220px auto;grid-column-gap:45px;grid-template-areas:"sidebar main";max-width:1200px}.single-post-container.has-sidebar article{grid-area:main}.single-post-container.has-sidebar aside{grid-area:sidebar;padding-left:10px;font-size: 1rem;}@media only screen and (max-width:950px){.single-post-container.has-sidebar{grid-column-gap:25px;grid-template-columns:220px auto}}@media only screen and (max-width:900px){aside{margin: 0 40px; padding-left: 0px!important;}.single-post-container.has-sidebar{grid-template-columns:auto;grid-template-areas:"main" "sidebar"}.single-post-container.has-sidebar aside{padding-right:5px}}.single-post-container{margin-top:50px;padding-left:15px;padding-right:15px;box-sizing:border-box}@media only screen and (max-width:500px){aside{margin: 0 0px!important; padding-left: 10px!important;}}.ais-hits--item{padding:10px}.ais-hits--item:nth-child(even){background:rgba(0,160,252,.1)}.ais-hits--item em{font-weight:700}.home-section-col a,.home-section-col a:visited{color:#424242}.home-section-col section{border:1px solid #ccc;padding:30px;height:150px;margin-bottom:50px}.home-section-col h2{padding-top:0}.tags{float:left;padding-top:10px}.tags .button{display:block;padding:8px;background-color:#7fffd4;margin-left:0px;float:right}.tags .cli{background-color:#000; color: #fff!important}.tags .node{background-color:#026e00; color: #fff!important}.tags .express{background-color:#b565a7}.tags .git{background-color:#dd4132;color: #fff!important}.tags .network{background-color:#6b5b95; color: #fff!important}.tags .browser{background-color:#5b5ea6;color: #fff!important}.tags .pwa{background-color:#6f9fd8}.tags .react{background-color:#282c34; color: #61dafb!important}.graphql{background-color:white!important; border: 1px solid gray; color: #E10098!important}.tags .svelte{background-color:#ff3e00;color: #fff!important} .tags .vue{background-color:#00a591;color: #fff!important}.tags .js{background-color:#ecdb54; color: #000!important}.tags .cookbook{background-color:#eadedb;color:#333!important}.tags .css{background-color:#bc70a4;color: #fff;}.tags .devtools{background-color:#ce3175;color: #fff!important}.tags .lab{background-color:#95dee3; color:#000!important}.tags .services{background-color:#f7786b}.tags .libraries{background-color:#dd4132}.tags .go{background-color:#bfd641; color:#000!important}.tags .html,.tags .softskills{background-color:#f2552c}.post-list h4{font-size:30px;padding-top:10px;padding-bottom:10px;line-height: 1.2;}.footer-tags{margin-bottom:50px;float:none; padding-left:0}.footer-tags .button{float:none;display:inline-block;margin-top:18px}.tags-list h1{padding-left:12px;font-size:38px}
aside input {padding: 5px}
@media (prefers-color-scheme: dark) {
body aside input {border: 1px solid #333}
body, body input{background-color: rgb(30,34,39); color:#fff}
body .post-stub a, body .home-section-col ul li:nth-child(even), body .home-section-col ul li a, body aside ul li a {color:#fff}
body .post-stub:hover, body :not(pre)>code[class*=language-], body pre[class*=language-], body pre { background: #282c34;}
body code[class*=language-], body pre[class*=language-] {text-shadow:none;color:#fff}
body .language-css .token.string, body .style .token.string, body .token.entity, body .token.operator, body .token.url {background: none}
body table tbody>tr:nth-child(odd)>td, body table tbody>tr:nth-child(odd)>th {background: #282c34}
body .token.attr-name, body .token.builtin, body .token.char, body .token.inserted, body .token.selector, body .token.string { color:#ecdb54}
}
.rwd-video { height: 0;overflow: hidden;padding-bottom: 56.25%;padding-top: 30px;position: relative;}
.rwd-video iframe,.rwd-video object,.rwd-video embed {height: 100%;left: 0;position: absolute;top: 0;width: 100%;}
@media only screen and (max-width: 400px) { .post-list { margin-right: 0;margin-left: 0; } }
@media only screen and (max-width: 400px){pre{padding:0!important;font-size:12px}.single-post-container{padding-left:8px;padding-right:8px}}
@media print { body, p, h1, h2, h3, h4, ul, li { color: black; }p, ul ,li { font-size: 0.9rem;}aside { display: none;}.single-post-container.has-sidebar { display: block;}a:after { content:" (https://flaviocopes.com" attr(href) ") ";}a[href*='//']:after { content:" (" attr(href) ") ";}}
#topbar { text-align:center; padding: 5px; color: white; background-color: #3574d4; position: fixed;top: 0;width: 100%;}
@media only screen and (max-width: 800px) { .post-title { margin-top: 50px } }#carbonads { display: block; overflow: hidden; text-align: left; line-height: 1.5;padding-bottom: 50px;}#carbonads a { color: inherit;}#carbonads a:hover { color: inherit;}#carbonads span { display: block; overflow: hidden;}.carbon-img { display: block; margin: 0 auto 8px; line-height: 1;}.carbon-text { display: block; font-size: 16px; margin-bottom: 8px;}.carbon-poweredby { text-transform: uppercase; display: block; font-size: 10px; letter-spacing: 1px; line-height: 1;}
.custom-slant .native-banner{display:flex;flex-direction:column;overflow:hidden;margin-bottom:36px;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;align-items:left}.custom-slant .native-sponsor-container{overflow:hidden;border-top-left-radius:4px}.custom-slant .native-sponsor{display:inline-flex;margin-bottom:20px;padding:0 10px;background-image:linear-gradient(135deg,#3574d4,#3574d4cc);color:#fff;text-transform:uppercase;letter-spacing:.5px;font-size:10px;transform:skewX(-22deg);transform-origin:top left;pointer-events:none;align-items:center}.custom-slant .native-sponsor:after{position:absolute;top:4px;right:5px;width:3px;height:calc(100% - 8px);background-color:#fff;content:""}.custom-slant .native-sponsor>div{padding:8px 10px;transform:skewX(22deg)}.custom-slant .native-company{border-left:2px solid #fff}.custom-slant .native-main{display:flex}.custom-slant .native-logo{display:block;box-sizing:border-box;margin-right:20px;padding:20px 30px;width:180px;height:100%;border-radius:8px}.custom-slant .native-text{display:flex;flex-direction:column;color:#0d0d0d;line-height:1.4;align-items:flex-start}.custom-slant .native-tagline{font-weight:600;font-size:20px}.custom-slant .native-description{margin-bottom:6px;font-size:16px}.custom-slant .native-cta{display:flex;padding:8px 14px;border-radius:4px;background-color:#3574d4;color:#fff;text-transform:uppercase;letter-spacing:.4px;font-weight:600;font-size:12px;margin-top: 4px;}
@media only screen and (max-width:500px){.native-main{ flex-direction: column;} .custom-slant .native-logo {margin: 0 auto;margin-bottom: 10px;padding: 0px 10px; }}
@media only screen and (min-width:500px){.native-text{ padding-left: 20px;margin-top: -4px;}}
.native-logo{margin-left: 0px!important}
@media (prefers-color-scheme: dark) {.custom-slant .native-text { color: #fff}.custom-slant .native-banner {border: none}.courses-promo img {filter: invert(90%)}}
.page-with-tweets ul { list-style-type: none; padding: 50px;}
.page-with-tweets li { padding: 10px;}
.custom-slant a {border-bottom: none;}
p.inline, p.inline + p, p.inline .MathJax { display: inline!important }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment