diff --git a/gulpfile.js b/gulpfile.js index c665d8a..8184870 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,8 +33,8 @@ var gulp = require('gulp'), // Define source and destination paths paths = { src_less: 'src/themes/eos/styles/', -// dest_css: 'src/themes/eos/static/css/', - dest_css: 'src/themes/eos/layouts/partials/generated/', + dest_css: 'src/themes/eos/static/css/', +// dest_css: 'src/themes/eos/layouts/partials/generated/', src_icons: 'src/themes/eos/icons/', dest_icons: 'src/themes/eos/layouts/partials/generated/' }; diff --git a/src/content/posts/site-redesign.md b/src/content/posts/site-redesign.md index 5b995cc..8472693 100644 --- a/src/content/posts/site-redesign.md +++ b/src/content/posts/site-redesign.md @@ -4,3 +4,11 @@ title: "Site redesign!" --- I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner. Afterwards, static assets are revision-hashed, and markup is reformatted. + +## Hugo + +[Hugo](https://gohugo.io/) is a super fast, easily installed static site generator. It's a lot like [Jekyll](https://jekyllrb.com/), GitHub's Ruby-powered static site generator. But it brings with it a lot of the Golang philosophy, and unlike Jekyll, Hugo doesn't let you twist its arm into doing a lot of extra stuff like image processing or stylesheet building. It does one thing, templating, really well and really fast. You can do the rest of the stuff on the side. + +## 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. diff --git a/src/themes/eos/layouts/_default/baseof.html b/src/themes/eos/layouts/_default/baseof.html index a0e79fb..87468fc 100644 --- a/src/themes/eos/layouts/_default/baseof.html +++ b/src/themes/eos/layouts/_default/baseof.html @@ -8,7 +8,7 @@ {{ .Title }} - {{ .Site.Title }} {{ end }} - + diff --git a/src/themes/eos/layouts/partials/generated/bundle.css b/src/themes/eos/layouts/partials/generated/bundle.css deleted file mode 100644 index 6e765f5..0000000 --- a/src/themes/eos/layouts/partials/generated/bundle.css +++ /dev/null @@ -1,152 +0,0 @@ -/* 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; -} -/*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-image: url(img/workstation.jpg), url(img/gradient.jpg); - background-size: auto 133.3vh, auto 133vh; - background-position: 100% 0%; - background-repeat: no-repeat, repeat-x; - font-family: monospace; - 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.css.map */ diff --git a/src/themes/eos/layouts/partials/generated/bundle.css.map b/src/themes/eos/layouts/partials/generated/bundle.css.map deleted file mode 100644 index 303a765..0000000 --- a/src/themes/eos/layouts/partials/generated/bundle.css.map +++ /dev/null @@ -1 +0,0 @@ -{"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,kEAAA;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,kEAAA;IACA,0CAAA;IACA,6BAAA;IACA,uCAAA;IACA,uBAAA;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;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}\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-image: url(img/workstation.jpg), url(img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\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-image: url(img/workstation.jpg), url(img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\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 689e183..3d69afc 100644 --- a/src/themes/eos/static/css/bundle.css +++ b/src/themes/eos/static/css/bundle.css @@ -61,6 +61,7 @@ header nav a.active { color: white; background-color: #20282a; outline: none; + box-shadow: 0 0 0 1px #20282a; } header nav a:before { content: '['; @@ -106,11 +107,8 @@ body { } @media (min-width: 100vh) { body { - background-image: url(../img/workstation.jpg), url(../img/gradient.jpg); background-size: auto 133.3vh, auto 133vh; background-position: 100% 0%; - background-repeat: no-repeat, repeat-x; - font-family: monospace; perspective: 68vh; perspective-origin: calc(100vw - 31vh) 45vh; } diff --git a/src/themes/eos/static/css/bundle.css.map b/src/themes/eos/static/css/bundle.css.map index 2e7a96e..366eb46 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;CDML;ACJG;EACE,aAAA;CDML;ACJG;EACE,aAAA;CDML;ACFD;EACE,yBAAA;CDID;AACD,UAAU;AEpEV;EACE,iCAAA;EACA,aAAA;CFsED;AEnED;EACE,wEAAA;EACA,2CAAA;EACA,6BAAA;EACA,uCAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFqED;AEnED;EACE,mBAAA;EACA,6GAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,kBAAA;CFqED;AE9ED;;;EAWI,aAAA;EACA,+BAAA;CFwEH;AErED;EACE;IACE,wEAAA;IACA,0CAAA;IACA,6BAAA;IACA,uCAAA;IACA,uBAAA;IACA,kBAAA;IACA,4CAAA;GFuED;EErED;IACE,6GAAA;IACA,4BAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GFuED;CACF;AEpED;EACE,qBAAA;EAAA,cAAA;EACA,2BAAA;EAAA,uBAAA;EACA,qBAAA;EAAA,4BAAA;EACA,4BAAA;EAAA,uBAAA;CFsED;AEnED;EACE,cAAA;EACA,qBAAA;EAAA,aAAA;CFqED;AGjID;EAEI,eAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,wBAAA;CHkIH;AGxID;EASI,2BAAA;CHkIH","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}\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-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\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 }\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-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\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;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 diff --git a/src/themes/eos/styles/layout.less b/src/themes/eos/styles/layout.less index 0efc61b..1652b2d 100644 --- a/src/themes/eos/styles/layout.less +++ b/src/themes/eos/styles/layout.less @@ -5,7 +5,7 @@ html { } body { - background-image: url(img/workstation.jpg), url(img/gradient.jpg); + 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; @@ -32,11 +32,8 @@ body { } @media (min-width: 100vh) { body { - background-image: url(img/workstation.jpg), url(img/gradient.jpg); background-size: auto 133.3vh, auto 133vh; background-position: 100% 0%; - background-repeat: no-repeat, repeat-x; - font-family: monospace; perspective: 68vh; perspective-origin: ~'calc(100vw - 31vh) 45vh'; }