revises print styles

This commit is contained in:
Huy Tran 2018-09-16 10:56:53 +10:00
parent 225512ea3b
commit 4ab82cb4d7
5 changed files with 72 additions and 9 deletions

View file

@ -1,3 +1,3 @@
{{ partial "header/styles-highlight.html" . }}
<link rel="stylesheet" href="{{ "css/hyde-hyde.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/print.min.css" | relURL }}" media="print">
<link rel="stylesheet" href="{{ "css/print.css" | relURL }}" media="print">

View file

@ -0,0 +1,41 @@
@page {
margin: 1cm !important;
}
body {
font-size: $small-device-font-size;
line-height: 1.3;
background: #fff;
color: #000;
}
.sidebar,
.navigation {
display: none;
}
.content {
margin: 0 auto;
width: 100%;
float: none;
display: initial;
}
.container {
width: 100%;
float: none;
display: initial;
padding-left: 1rem;
padding-right: 1rem;
margin: 0 auto;
}
img {
max-width: 100%;
}
blockquote,
ul {
margin: 0;
}
#disqus_thread {
display: none !important;
}

View file

@ -0,0 +1,2 @@
@import "hyde-hyde/variables";
@import 'hyde-hyde/print';

View file

@ -1,19 +1,38 @@
.sidebar {
display: none !important;
}
@page {
margin: 1cm !important; }
body {
font-size: 16px;
line-height: 1.3;
background: #fff;
color: #000; }
.sidebar,
.navigation {
display: none; }
.content {
margin: 0 auto;
width: 100%;
float: none;
display: initial;
}
display: initial; }
.container {
width: 100%;
float: none;
display: initial;
padding-left: 1rem;
padding-left: 1rem;
padding-right: 1rem;
margin: 0 auto;
}
margin: 0 auto; }
img {
max-width: 100%; }
blockquote,
ul {
margin: 0; }
#disqus_thread {
display: none !important; }
/*# sourceMappingURL=print.css.map */

1
static/css/print.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["hyde-hyde/_print.scss","hyde-hyde/_variables.scss"],"names":[],"mappings":"AAAA;EACE,uBAAsB,EAAA;;AAExB;EACE,gBCoC2B;EDnC3B,iBAAgB;EAChB,iBAAgB;EAChB,YAAW,EACZ;;AAED;;EAEE,cAAa,EACd;;AAED;EACE,eAAc;EACd,YAAW;EACX,YAAW;EACX,iBAAgB,EACjB;;AAED;EACE,YAAW;EACX,YAAW;EACX,iBAAgB;EAChB,mBAAkB;EAClB,oBAAmB;EACnB,eAAc,EACf;;AACD;EACE,gBAAe,EAChB;;AACD;;EAEE,UAAS,EACV;;AACD;EACC,yBAAwB,EACxB","file":"print.css","sourcesContent":["@page {\n margin: 1cm !important;\n}\nbody {\n font-size: $small-device-font-size;\n line-height: 1.3;\n background: #fff;\n color: #000;\n}\n\n.sidebar,\n.navigation {\n display: none;\n}\n\n.content {\n margin: 0 auto;\n width: 100%;\n float: none;\n display: initial;\n}\n\n.container {\n width: 100%;\n float: none;\n display: initial;\n padding-left: 1rem;\n padding-right: 1rem;\n margin: 0 auto;\n}\nimg {\n max-width: 100%;\n}\nblockquote,\nul {\n margin: 0;\n}\n#disqus_thread {\n\tdisplay: none !important;\n}\n\n","$gray-0: #fafafa;\n$gray-1: #f9f9f9;\n$gray-2: #eee;\n$gray-3: #ddd;\n$gray-4: #ccc;\n$gray-4: #bbb;\n$gray-6: #878787;\n$gray-7: #767676;\n$gray-8: #515151;\n$gray-9: #313131;\n\n$white: #fff;\n$red: #ac4142;\n$orange: #d28445;\n$yellow: #f4bf75;\n$green: #90a959;\n$cyan: #75b5aa;\n$blue: #268bd2;\n$brown: #8f5536;\n\n//https://www.client9.com/css-system-font-stack-sans-serif-v3\n$root-font-family: \"IBM Plex Sans\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Droid Sans\", \"Ubuntu\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\",\"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\n// poole's variables\n$root-font-size: 20px;\n$root-font-weight: 400;\n// golden ratio https://grtcalculator.com\n// 18px @ 33 px, 20px @ 33 px ~ 1.667em\n$root-line-height: 1.667em;\n\n$body-color: $gray-8;\n$body-bg: #fff;\n\n$border-color: #e5e5e5;\n\n$large-breakpoint: 38em;\n$large-font-size: 18px;\n//\n\n// hyde-hyde\n$small-device-font-size: 16px;\n$large-device-font-size: $root-font-size;\n\n// https://www.client9.com/css-system-font-stack-monospace-v2\n$code-font-family: \"SF-Mono\", \"SFMono-Regular\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Roboto Mono\", \"Ubuntu Mono\", \"Courier New\", Courier, monospace;\n$code-font-size: .9rem;\n$code-fence-font-size: .9rem;\n$code-color: #bf616a;\n$code-background-color: #f9f2f4;\n$code-line-height: 1.4;\n\n// links\n$link-color: $blue;\n$link-hover-color: $body-color;\n\n// section\n$section__title-font-size: 2.15rem;\n\n// post\n$post__subtitle-font-size: 1.5rem;\n$gradient-color-1: #ff2c2c;\n$gradient-color-2: #7a5e91;\n\n// post meta\n$meta-font-size: .8rem;\n$meta-font-weight: 300;\n$meta-color: $gray-6;\n\n// post tags\n$tag-background-color: $gray-2;\n$tag-color: #606570;\n$tag-font-size: .667rem;\n\n// list of posts\n$item__date-color: #9a9a9a;\n$item__date-font-size: 1rem;\n$item__title-big-font-size: 1.785rem;\n\n// heading\n$heading-font-weight: 400;\n$h1-font-size: 2.15rem;\n$h1-line-height: 1.25;\n$h2-font-size: 1.85rem;\n$h3-font-size: 1.5rem;\n$h4-font-size:1.3rem;\n$h5-font-size:1rem;\n\n\n// sidebar\n$sidebar-color: #300030;\n$site__title-font-size: 3rem;\n$copyright-font-size: 0.7rem;\n\n// navigation\n$navigation-color: #c2255c;\n\n// portfolio\n$project__title-font-size: $h2-font-size;\n$project__subtitle-font-size-big: $h3-font-size;\n$project__subtitle-font-size-small: $h4-font-size;\n$project__subtitle-font-style: italic;\n$project__subtitle-color: #778492;\n$ribbon-color: #276582;\n$ribbon-background-color: #479fc8;\n"]}