From b69a407186e1fc5fcffbb8f376a14aa6728e8441 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Fri, 17 Feb 2017 01:02:03 -0500 Subject: [PATCH] :tada: add primitive print stylesheet --- .publish | 1 + gulpfile.js | 8 +- src/content/posts/site-redesign.md | 6 +- src/themes/eos/layouts/_default/baseof.html | 3 +- src/themes/eos/static/css/bundle-print.css | 13 ++ .../eos/static/css/bundle-print.css.map | 1 + src/themes/eos/static/css/bundle-screen.css | 152 ++++++++++++++++++ .../eos/static/css/bundle-screen.css.map | 1 + src/themes/eos/static/css/bundle.css | 3 + src/themes/eos/static/css/bundle.css.map | 2 +- src/themes/eos/styles/basics.less | 4 + src/themes/eos/styles/bundle-print.less | 11 ++ .../{bundle.less => bundle-screen.less} | 0 13 files changed, 196 insertions(+), 9 deletions(-) create mode 160000 .publish create mode 100644 src/themes/eos/static/css/bundle-print.css create mode 100644 src/themes/eos/static/css/bundle-print.css.map create mode 100644 src/themes/eos/static/css/bundle-screen.css create mode 100644 src/themes/eos/static/css/bundle-screen.css.map create mode 100644 src/themes/eos/styles/bundle-print.less rename src/themes/eos/styles/{bundle.less => bundle-screen.less} (100%) diff --git a/.publish b/.publish new file mode 160000 index 0000000..7459775 --- /dev/null +++ b/.publish @@ -0,0 +1 @@ +Subproject commit 745977500581f866ec8b9d3d8df5a8af22d4cf71 diff --git a/gulpfile.js b/gulpfile.js index 8184870..ce48cdd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -63,16 +63,13 @@ var onError = function (error, task) { }; gulp.task('clean:less', function () { - return gulp.src([ - paths.dest_css + 'bundle.css', - paths.dest_css + 'bundle.css.map' - ], {read: false}) + return gulp.src([ paths.dest_css + 'bundle*' ], {read: false}) .pipe(clean()); }); // Compile LESS to CSS gulp.task('build:less', function () { - return gulp.src(paths.src_less + 'bundle.less') + return gulp.src(paths.src_less + 'bundle*.less') .pipe(sourcemaps.init()) .pipe(plumber({ errorHandler: function (error) { onError(error, 'LESS'); } @@ -84,7 +81,6 @@ gulp.task('build:less', function () { browsers: ['last 2 versions'], cascade: false })) - .pipe(rename('bundle.css')) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(paths.dest_css)); // path to css directory }); diff --git a/src/content/posts/site-redesign.md b/src/content/posts/site-redesign.md index 8472693..1db2124 100644 --- a/src/content/posts/site-redesign.md +++ b/src/content/posts/site-redesign.md @@ -11,4 +11,8 @@ Afterwards, static assets are revision-hashed, and markup is reformatted. ## The Rest of the Stuff -I wanted to write the site styles in LESS, my favorite CSS preprocessor. I used the node LESS compiler with Gulp, the trendiest available task runner. (Kidding, I like Gulp. File streams are a neat idea and worked great for me on this project.) I also really wanted to build an SVG sprite from files included in the theme. To do that, I used `gulp-svgstore`. Just out-of-the-box it worked great. +I wanted to write the site styles in LESS, my favorite CSS preprocessor. I used the node LESS compiler with Gulp, the trendiest available task runner. (Kidding, I like Gulp. File streams are a neat idea and worked great for me on this project.) + +## Styles + +This design in particular was a pain to get right. I had to find the right perspective and transform settings to distort the screen just right, even when the document was resized. I learned that the `` tag ignores most `transform` properties, so there isn't a way to have the page scroll _with perspective_ and keep the scrollbar in the normal place on the right edge of the viewport. diff --git a/src/themes/eos/layouts/_default/baseof.html b/src/themes/eos/layouts/_default/baseof.html index 87468fc..49871e7 100644 --- a/src/themes/eos/layouts/_default/baseof.html +++ b/src/themes/eos/layouts/_default/baseof.html @@ -8,7 +8,8 @@ {{ .Title }} - {{ .Site.Title }} {{ end }} - + + diff --git a/src/themes/eos/static/css/bundle-print.css b/src/themes/eos/static/css/bundle-print.css new file mode 100644 index 0000000..641d8d4 --- /dev/null +++ b/src/themes/eos/static/css/bundle-print.css @@ -0,0 +1,13 @@ +* { + font-family: inherit; +} +html { + font-family: sans-serif; +} +code, +pre, +kbd { + font-family: monospace; +} + +/*# sourceMappingURL=bundle-print.css.map */ diff --git a/src/themes/eos/static/css/bundle-print.css.map b/src/themes/eos/static/css/bundle-print.css.map new file mode 100644 index 0000000..e7fa528 --- /dev/null +++ b/src/themes/eos/static/css/bundle-print.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["bundle-print.less","bundle-print.css"],"names":[],"mappings":"AAAA;EACE,qBAAA;CCCD;ADED;EACE,wBAAA;CCAD;ADGD;;;EACE,uBAAA;CCCD","file":"bundle-print.css","sourcesContent":["* {\n font-family: inherit;\n}\n\nhtml {\n font-family: sans-serif;\n}\n\ncode, pre, kbd {\n font-family: monospace;\n}\n","* {\n font-family: inherit;\n}\nhtml {\n font-family: sans-serif;\n}\ncode,\npre,\nkbd {\n font-family: monospace;\n}\n"]} \ No newline at end of file diff --git a/src/themes/eos/static/css/bundle-screen.css b/src/themes/eos/static/css/bundle-screen.css new file mode 100644 index 0000000..648cffa --- /dev/null +++ b/src/themes/eos/static/css/bundle-screen.css @@ -0,0 +1,152 @@ +/* micro styles reset */ +*, +:before, +:after { + box-sizing: inherit; + margin: 0; + padding: 0; + transform-style: preserve-3d; + font-family: inherit; +} +html { + box-sizing: border-box; + height: 100%; + overflow: hidden; + color: white; + text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5); + line-height: 1.2; +} +a { + color: inherit; +} +a:hover, +a:focus { + background-color: white; + color: #20282a; + text-decoration: none; + outline: none; +} +::-moz-selection { + background-color: white; + color: #20282a; +} +::selection { + background-color: white; + color: #20282a; +} +h1, +h2, +h3, +h4 { + font-size: inherit; + font-weight: bold; + border-bottom: 0.1em dotted; + margin-bottom: -0.1em; + margin-top: 1em; +} +h2 { + border-bottom: none; + margin-bottom: 0; +} +header { + background-color: white; + color: #20282a; +} +header nav a { + text-decoration: none; +} +header nav a:hover, +header nav a:focus, +header nav a.active { + color: white; + background-color: #20282a; + outline: none; + box-shadow: 0 0 0 1px #20282a; +} +header nav a:before { + content: '['; +} +header nav a:after { + content: ']'; +} +footer { + border-top: 0.1em dotted; +} +code { + background-color: rgba(255, 255, 255, 0.15); +} +/*layout*/ +html { + font-size: calc(0.8em + 1.3vmin); + height: 100%; +} +body { + background-image: url(../img/workstation.jpg), url(../img/gradient.jpg); + background-size: 100% auto, auto 133.3vmin; + background-position: 100% 0%; + background-repeat: no-repeat, repeat-x; + background-color: white; + height: 100%; + font-family: monospace; + perspective: 68vw; + perspective-origin: 69vw 45vw; +} +.wrapper { + position: relative; + transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw); + transform-origin: top right; + padding: 1vw; + height: 75vw; + width: 100vw; + margin: 0 0 0 auto; + overflow: auto; + perspective: none; +} +.wrapper > *, +.wrapper:before, +.wrapper:after { + opacity: 0.8; + transform: translateZ(-50vmin); +} +@media (min-width: 100vh) { + body { + background-size: auto 133.3vh, auto 133vh; + background-position: 100% 0%; + perspective: 68vh; + perspective-origin: calc(100vw - 31vh) 45vh; + } + .wrapper { + transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh); + transform-origin: top right; + padding: 1vh; + width: 100vh; + height: 75vh; + } +} +.wrapper { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: start; + justify-content: flex-start; + -ms-flex-line-pack: stretch; + align-content: stretch; +} +main { + margin: 1em 0; + -ms-flex-positive: 1; + flex-grow: 1; +} +.post-list a { + display: block; + text-decoration: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.post-list .title { + text-decoration: underline; +} + +/*# sourceMappingURL=bundle-screen.css.map */ diff --git a/src/themes/eos/static/css/bundle-screen.css.map b/src/themes/eos/static/css/bundle-screen.css.map new file mode 100644 index 0000000..d851073 --- /dev/null +++ b/src/themes/eos/static/css/bundle-screen.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["bundle-screen.css","basics.less","layout.less","modules/post-list.less"],"names":[],"mappings":"AAAA,wBAAwB;ACCxB;;;EACE,oBAAA;EACA,UAAA;EACA,WAAA;EACA,6BAAA;EACA,qBAAA;CDGD;ACGD;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,aAAA;EACA,gDAAA;EACA,iBAAA;CDDD;ACGD;EACE,eAAA;CDDD;ACEC;;EACE,wBAAA;EACA,eAAA;EACA,sBAAA;EACA,cAAA;CDCH;ACED;EACE,wBAAA;EACA,eAAA;CDAD;ACFD;EACE,wBAAA;EACA,eAAA;CDAD;ACED;;;;EACE,mBAAA;EACA,kBAAA;EACA,4BAAA;EACA,sBAAA;EACA,gBAAA;CDGD;ACDD;EACE,oBAAA;EACA,iBAAA;CDGD;ACAD;EACE,wBAAA;EACA,eAAA;CDED;ACJD;EAII,sBAAA;CDGH;ACFG;;;EACE,aAAA;EACA,0BAAA;EACA,cAAA;EACA,8BAAA;CDML;ACJG;EACE,aAAA;CDML;ACJG;EACE,aAAA;CDML;ACFD;EACE,yBAAA;CDID;ACDD;EACE,4CAAA;CDGD;AACD,UAAU;AExEV;EACE,iCAAA;EACA,aAAA;CF0ED;AEvED;EACE,wEAAA;EACA,2CAAA;EACA,6BAAA;EACA,uCAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFyED;AEvED;EACE,mBAAA;EACA,6GAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,kBAAA;CFyED;AElFD;;;EAWI,aAAA;EACA,+BAAA;CF4EH;AEzED;EACE;IACE,0CAAA;IACA,6BAAA;IACA,kBAAA;IACA,4CAAA;GF2ED;EEzED;IACE,6GAAA;IACA,4BAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GF2ED;CACF;AExED;EACE,qBAAA;EAAA,cAAA;EACA,2BAAA;EAAA,uBAAA;EACA,qBAAA;EAAA,4BAAA;EACA,4BAAA;EAAA,uBAAA;CF0ED;AEvED;EACE,cAAA;EACA,qBAAA;EAAA,aAAA;CFyED;AGlID;EAEI,eAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,wBAAA;CHmIH;AGzID;EASI,2BAAA;CHmIH","file":"bundle-screen.css","sourcesContent":["/* micro styles reset */\n*,\n:before,\n:after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: white;\n text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);\n line-height: 1.2;\n}\na {\n color: inherit;\n}\na:hover,\na:focus {\n background-color: white;\n color: #20282a;\n text-decoration: none;\n outline: none;\n}\n::selection {\n background-color: white;\n color: #20282a;\n}\nh1,\nh2,\nh3,\nh4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-bottom: -0.1em;\n margin-top: 1em;\n}\nh2 {\n border-bottom: none;\n margin-bottom: 0;\n}\nheader {\n background-color: white;\n color: #20282a;\n}\nheader nav a {\n text-decoration: none;\n}\nheader nav a:hover,\nheader nav a:focus,\nheader nav a.active {\n color: white;\n background-color: #20282a;\n outline: none;\n box-shadow: 0 0 0 1px #20282a;\n}\nheader nav a:before {\n content: '[';\n}\nheader nav a:after {\n content: ']';\n}\nfooter {\n border-top: 0.1em dotted;\n}\ncode {\n background-color: rgba(255, 255, 255, 0.15);\n}\n/*layout*/\nhtml {\n font-size: calc(0.8em + 1.3vmin);\n height: 100%;\n}\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vmin;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n background-color: white;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n perspective: none;\n}\n.wrapper > *,\n.wrapper:before,\n.wrapper:after {\n opacity: 0.8;\n transform: translateZ(-50vmin);\n}\n@media (min-width: 100vh) {\n body {\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n perspective: 68vh;\n perspective-origin: calc(100vw - 31vh) 45vh;\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\n.post-list a {\n display: block;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.post-list .title {\n text-decoration: underline;\n}\n","/* micro styles reset */\n*, :before, :after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\n\n//@color-text: #DA0;\n@color-text: white;\n\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: @color-text;\n text-shadow: 0 0 0.1em fade(@color-text, 50%);\n line-height: 1.2;\n}\na {\n color: inherit;\n &:hover, &:focus {\n background-color: @color-text;\n color: #20282a;\n text-decoration: none;\n outline: none;\n }\n}\n::selection {\n background-color: @color-text;\n color: #20282a;\n}\nh1, h2, h3, h4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-bottom: -0.1em;\n margin-top: 1em;\n}\nh2 {\n border-bottom: none;\n margin-bottom: 0;\n}\n\nheader {\n background-color: @color-text;\n color: #20282a;\n nav a {\n text-decoration: none;\n &:hover, &:focus, &.active {\n color: @color-text;\n background-color: #20282a;\n outline: none;\n box-shadow: 0 0 0 1px #20282a;\n }\n &:before {\n content: '[';\n }\n &:after {\n content: ']';\n }\n }\n}\nfooter {\n border-top: 0.1em dotted;\n}\n\ncode {\n background-color: fade(@color-text, 15%);\n}\n","/*layout*/\nhtml {\n font-size: ~\"calc(0.8em + 1.3vmin)\";\n height: 100%;\n}\n\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vmin;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n background-color: white;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n perspective: none;\n > *, &:before, &:after {\n opacity: 0.8;\n transform: translateZ(-50vmin);\n }\n}\n@media (min-width: 100vh) {\n body {\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n perspective: 68vh;\n perspective-origin: ~'calc(100vw - 31vh) 45vh';\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\n\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\n\nfooter {\n}\n",".post-list {\n a {\n display: block;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .title {\n text-decoration: underline;\n }\n}\n"]} \ No newline at end of file diff --git a/src/themes/eos/static/css/bundle.css b/src/themes/eos/static/css/bundle.css index 3d69afc..77bd39f 100644 --- a/src/themes/eos/static/css/bundle.css +++ b/src/themes/eos/static/css/bundle.css @@ -72,6 +72,9 @@ header nav a:after { footer { border-top: 0.1em dotted; } +code { + background-color: rgba(255, 255, 255, 0.15); +} /*layout*/ html { font-size: calc(0.8em + 1.3vmin); diff --git a/src/themes/eos/static/css/bundle.css.map b/src/themes/eos/static/css/bundle.css.map index 366eb46..99e1aed 100644 --- a/src/themes/eos/static/css/bundle.css.map +++ b/src/themes/eos/static/css/bundle.css.map @@ -1 +1 @@ -{"version":3,"sources":["bundle.css","basics.less","layout.less","modules/post-list.less"],"names":[],"mappings":"AAAA,wBAAwB;ACCxB;;;EACE,oBAAA;EACA,UAAA;EACA,WAAA;EACA,6BAAA;EACA,qBAAA;CDGD;ACGD;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,aAAA;EACA,gDAAA;EACA,iBAAA;CDDD;ACGD;EACE,eAAA;CDDD;ACEC;;EACE,wBAAA;EACA,eAAA;EACA,sBAAA;EACA,cAAA;CDCH;ACED;EACE,wBAAA;EACA,eAAA;CDAD;ACFD;EACE,wBAAA;EACA,eAAA;CDAD;ACED;;;;EACE,mBAAA;EACA,kBAAA;EACA,4BAAA;EACA,sBAAA;EACA,gBAAA;CDGD;ACDD;EACE,oBAAA;EACA,iBAAA;CDGD;ACAD;EACE,wBAAA;EACA,eAAA;CDED;ACJD;EAII,sBAAA;CDGH;ACFG;;;EACE,aAAA;EACA,0BAAA;EACA,cAAA;EACA,8BAAA;CDML;ACJG;EACE,aAAA;CDML;ACJG;EACE,aAAA;CDML;ACFD;EACE,yBAAA;CDID;AACD,UAAU;AErEV;EACE,iCAAA;EACA,aAAA;CFuED;AEpED;EACE,wEAAA;EACA,2CAAA;EACA,6BAAA;EACA,uCAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFsED;AEpED;EACE,mBAAA;EACA,6GAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,kBAAA;CFsED;AE/ED;;;EAWI,aAAA;EACA,+BAAA;CFyEH;AEtED;EACE;IACE,0CAAA;IACA,6BAAA;IACA,kBAAA;IACA,4CAAA;GFwED;EEtED;IACE,6GAAA;IACA,4BAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GFwED;CACF;AErED;EACE,qBAAA;EAAA,cAAA;EACA,2BAAA;EAAA,uBAAA;EACA,qBAAA;EAAA,4BAAA;EACA,4BAAA;EAAA,uBAAA;CFuED;AEpED;EACE,cAAA;EACA,qBAAA;EAAA,aAAA;CFsED;AG/HD;EAEI,eAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,wBAAA;CHgIH;AGtID;EASI,2BAAA;CHgIH","file":"bundle.css","sourcesContent":["/* micro styles reset */\n*,\n:before,\n:after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: white;\n text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);\n line-height: 1.2;\n}\na {\n color: inherit;\n}\na:hover,\na:focus {\n background-color: white;\n color: #20282a;\n text-decoration: none;\n outline: none;\n}\n::selection {\n background-color: white;\n color: #20282a;\n}\nh1,\nh2,\nh3,\nh4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-bottom: -0.1em;\n margin-top: 1em;\n}\nh2 {\n border-bottom: none;\n margin-bottom: 0;\n}\nheader {\n background-color: white;\n color: #20282a;\n}\nheader nav a {\n text-decoration: none;\n}\nheader nav a:hover,\nheader nav a:focus,\nheader nav a.active {\n color: white;\n background-color: #20282a;\n outline: none;\n box-shadow: 0 0 0 1px #20282a;\n}\nheader nav a:before {\n content: '[';\n}\nheader nav a:after {\n content: ']';\n}\nfooter {\n border-top: 0.1em dotted;\n}\n/*layout*/\nhtml {\n font-size: calc(0.8em + 1.3vmin);\n height: 100%;\n}\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vmin;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n background-color: white;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n perspective: none;\n}\n.wrapper > *,\n.wrapper:before,\n.wrapper:after {\n opacity: 0.8;\n transform: translateZ(-50vmin);\n}\n@media (min-width: 100vh) {\n body {\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n perspective: 68vh;\n perspective-origin: calc(100vw - 31vh) 45vh;\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\n.post-list a {\n display: block;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.post-list .title {\n text-decoration: underline;\n}\n","/* micro styles reset */\n*, :before, :after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\n\n//@color-text: #DA0;\n@color-text: white;\n\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: @color-text;\n text-shadow: 0 0 0.1em fade(@color-text, 50%);\n line-height: 1.2;\n}\na {\n color: inherit;\n &:hover, &:focus {\n background-color: @color-text;\n color: #20282a;\n text-decoration: none;\n outline: none;\n }\n}\n::selection {\n background-color: @color-text;\n color: #20282a;\n}\nh1, h2, h3, h4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-bottom: -0.1em;\n margin-top: 1em;\n}\nh2 {\n border-bottom: none;\n margin-bottom: 0;\n}\n\nheader {\n background-color: @color-text;\n color: #20282a;\n nav a {\n text-decoration: none;\n &:hover, &:focus, &.active {\n color: @color-text;\n background-color: #20282a;\n outline: none;\n box-shadow: 0 0 0 1px #20282a;\n }\n &:before {\n content: '[';\n }\n &:after {\n content: ']';\n }\n }\n}\nfooter {\n border-top: 0.1em dotted;\n}\n","/*layout*/\nhtml {\n font-size: ~\"calc(0.8em + 1.3vmin)\";\n height: 100%;\n}\n\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vmin;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n background-color: white;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n perspective: none;\n > *, &:before, &:after {\n opacity: 0.8;\n transform: translateZ(-50vmin);\n }\n}\n@media (min-width: 100vh) {\n body {\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n perspective: 68vh;\n perspective-origin: ~'calc(100vw - 31vh) 45vh';\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\n\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\n\nfooter {\n}\n",".post-list {\n a {\n display: block;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .title {\n text-decoration: underline;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["bundle.css","basics.less","layout.less","modules/post-list.less"],"names":[],"mappings":"AAAA,wBAAwB;ACCxB;;;EACE,oBAAA;EACA,UAAA;EACA,WAAA;EACA,6BAAA;EACA,qBAAA;CDGD;ACGD;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,aAAA;EACA,gDAAA;EACA,iBAAA;CDDD;ACGD;EACE,eAAA;CDDD;ACEC;;EACE,wBAAA;EACA,eAAA;EACA,sBAAA;EACA,cAAA;CDCH;ACED;EACE,wBAAA;EACA,eAAA;CDAD;ACFD;EACE,wBAAA;EACA,eAAA;CDAD;ACED;;;;EACE,mBAAA;EACA,kBAAA;EACA,4BAAA;EACA,sBAAA;EACA,gBAAA;CDGD;ACDD;EACE,oBAAA;EACA,iBAAA;CDGD;ACAD;EACE,wBAAA;EACA,eAAA;CDED;ACJD;EAII,sBAAA;CDGH;ACFG;;;EACE,aAAA;EACA,0BAAA;EACA,cAAA;EACA,8BAAA;CDML;ACJG;EACE,aAAA;CDML;ACJG;EACE,aAAA;CDML;ACFD;EACE,yBAAA;CDID;ACDD;EACE,4CAAA;CDGD;AACD,UAAU;AExEV;EACE,iCAAA;EACA,aAAA;CF0ED;AEvED;EACE,wEAAA;EACA,2CAAA;EACA,6BAAA;EACA,uCAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFyED;AEvED;EACE,mBAAA;EACA,6GAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,kBAAA;CFyED;AElFD;;;EAWI,aAAA;EACA,+BAAA;CF4EH;AEzED;EACE;IACE,0CAAA;IACA,6BAAA;IACA,kBAAA;IACA,4CAAA;GF2ED;EEzED;IACE,6GAAA;IACA,4BAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GF2ED;CACF;AExED;EACE,qBAAA;EAAA,cAAA;EACA,2BAAA;EAAA,uBAAA;EACA,qBAAA;EAAA,4BAAA;EACA,4BAAA;EAAA,uBAAA;CF0ED;AEvED;EACE,cAAA;EACA,qBAAA;EAAA,aAAA;CFyED;AGlID;EAEI,eAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,wBAAA;CHmIH;AGzID;EASI,2BAAA;CHmIH","file":"bundle.css","sourcesContent":["/* micro styles reset */\n*,\n:before,\n:after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: white;\n text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);\n line-height: 1.2;\n}\na {\n color: inherit;\n}\na:hover,\na:focus {\n background-color: white;\n color: #20282a;\n text-decoration: none;\n outline: none;\n}\n::selection {\n background-color: white;\n color: #20282a;\n}\nh1,\nh2,\nh3,\nh4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-bottom: -0.1em;\n margin-top: 1em;\n}\nh2 {\n border-bottom: none;\n margin-bottom: 0;\n}\nheader {\n background-color: white;\n color: #20282a;\n}\nheader nav a {\n text-decoration: none;\n}\nheader nav a:hover,\nheader nav a:focus,\nheader nav a.active {\n color: white;\n background-color: #20282a;\n outline: none;\n box-shadow: 0 0 0 1px #20282a;\n}\nheader nav a:before {\n content: '[';\n}\nheader nav a:after {\n content: ']';\n}\nfooter {\n border-top: 0.1em dotted;\n}\ncode {\n background-color: rgba(255, 255, 255, 0.15);\n}\n/*layout*/\nhtml {\n font-size: calc(0.8em + 1.3vmin);\n height: 100%;\n}\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vmin;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n background-color: white;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n perspective: none;\n}\n.wrapper > *,\n.wrapper:before,\n.wrapper:after {\n opacity: 0.8;\n transform: translateZ(-50vmin);\n}\n@media (min-width: 100vh) {\n body {\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n perspective: 68vh;\n perspective-origin: calc(100vw - 31vh) 45vh;\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\n.post-list a {\n display: block;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.post-list .title {\n text-decoration: underline;\n}\n","/* micro styles reset */\n*, :before, :after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\n\n//@color-text: #DA0;\n@color-text: white;\n\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: @color-text;\n text-shadow: 0 0 0.1em fade(@color-text, 50%);\n line-height: 1.2;\n}\na {\n color: inherit;\n &:hover, &:focus {\n background-color: @color-text;\n color: #20282a;\n text-decoration: none;\n outline: none;\n }\n}\n::selection {\n background-color: @color-text;\n color: #20282a;\n}\nh1, h2, h3, h4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-bottom: -0.1em;\n margin-top: 1em;\n}\nh2 {\n border-bottom: none;\n margin-bottom: 0;\n}\n\nheader {\n background-color: @color-text;\n color: #20282a;\n nav a {\n text-decoration: none;\n &:hover, &:focus, &.active {\n color: @color-text;\n background-color: #20282a;\n outline: none;\n box-shadow: 0 0 0 1px #20282a;\n }\n &:before {\n content: '[';\n }\n &:after {\n content: ']';\n }\n }\n}\nfooter {\n border-top: 0.1em dotted;\n}\n\ncode {\n background-color: fade(@color-text, 15%);\n}\n","/*layout*/\nhtml {\n font-size: ~\"calc(0.8em + 1.3vmin)\";\n height: 100%;\n}\n\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vmin;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n background-color: white;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n perspective: none;\n > *, &:before, &:after {\n opacity: 0.8;\n transform: translateZ(-50vmin);\n }\n}\n@media (min-width: 100vh) {\n body {\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n perspective: 68vh;\n perspective-origin: ~'calc(100vw - 31vh) 45vh';\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\n\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\n\nfooter {\n}\n",".post-list {\n a {\n display: block;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .title {\n text-decoration: underline;\n }\n}\n"]} \ No newline at end of file diff --git a/src/themes/eos/styles/basics.less b/src/themes/eos/styles/basics.less index 3ab5798..581d8d1 100644 --- a/src/themes/eos/styles/basics.less +++ b/src/themes/eos/styles/basics.less @@ -65,3 +65,7 @@ header { footer { border-top: 0.1em dotted; } + +code { + background-color: fade(@color-text, 15%); +} diff --git a/src/themes/eos/styles/bundle-print.less b/src/themes/eos/styles/bundle-print.less new file mode 100644 index 0000000..563c5ae --- /dev/null +++ b/src/themes/eos/styles/bundle-print.less @@ -0,0 +1,11 @@ +* { + font-family: inherit; +} + +html { + font-family: sans-serif; +} + +code, pre, kbd { + font-family: monospace; +} diff --git a/src/themes/eos/styles/bundle.less b/src/themes/eos/styles/bundle-screen.less similarity index 100% rename from src/themes/eos/styles/bundle.less rename to src/themes/eos/styles/bundle-screen.less