From dfd2f6725dd18b8b9162a8dea6796e43cff776fd Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Mon, 9 Nov 2020 22:06:06 +0100 Subject: [PATCH] split out css --- .drone.yml | 14 +++++- CHANGELOG.md | 9 ++++ data/assets.json | 8 ++++ gulpfile.js | 41 +++++++++------- layouts/partials/head.html | 14 ++++-- layouts/partials/page-header.html | 12 +++-- layouts/partials/site-header.html | 2 +- src/sass/_base.scss | 79 ------------------------------- src/sass/_mobile.scss | 78 ++++++++++++++++++++++++++++++ src/sass/_print.scss | 28 ++++++++++- src/sass/main.scss | 17 ++++--- src/sass/mobile.scss | 3 ++ src/sass/print.scss | 3 ++ static/mobile.css | 55 +++++++++++++++++++++ static/mobile.min.css | 1 + static/print.css | 37 +++++++++++++++ static/print.min.css | 1 + 17 files changed, 284 insertions(+), 118 deletions(-) create mode 100644 data/assets.json create mode 100644 src/sass/_mobile.scss create mode 100644 src/sass/mobile.scss create mode 100644 src/sass/print.scss create mode 100644 static/mobile.css create mode 100644 static/mobile.min.css create mode 100644 static/print.css create mode 100644 static/print.min.css diff --git a/.drone.yml b/.drone.yml index 6546230..ec74f30 100644 --- a/.drone.yml +++ b/.drone.yml @@ -60,6 +60,18 @@ steps: - failure - success +- name: page-validation-link + image: thegeeklab/drone-github-comment + settings: + api_key: + from_secret: github_token + key: pr-${DRONE_PULL_REQUEST} + message: lhci_reports/dist/summary.md + update: true + when: + ref: + - refs/pull/** + trigger: ref: - refs/heads/master @@ -230,6 +242,6 @@ depends_on: --- kind: signature -hmac: 16fef8d3e0cba7202aa533623d9ec7bf8bd3b645aed4c488b9080667f02fa366 +hmac: 9ffa1706ed0a3368bafa619e2fe5dd07db1813c9c8f9e7b54a3f4e722393ffce ... diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fc2948..731af10 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,16 @@ - improve and normalize microblog formatting - add font and css preloading links - add node `gulp` script to package.json (@AgentEnder) + - add minimal working css for printing + - split out mobile css + - load static css/js assets from data template: + This way users can hash static assets and overwrite the data template + to deliver the hashed assets. Thats helpful if you have to deal with + long cache settings but wont to ensure your updated assets are delivered + to clients. - BUGFIX - use relative URL's for fonts (@atorrescogollo) - OTHER - fix typos (@weidenhaus) +- INTERNAL + - publish Lighthouse CI overwiew to PR's diff --git a/data/assets.json b/data/assets.json new file mode 100644 index 0000000..20a527d --- /dev/null +++ b/data/assets.json @@ -0,0 +1,8 @@ +{ + "main.min.css": "main.min.css", + "mobile.min.css": "mobile.min.css", + "print.min.css": "print.min.css", + "custom.css": "custom.css", + "js/clipboard.min.js": "js/clipboard.min.js", + "js/mermaid.min.js": "js/mermaid.min.js" +} diff --git a/gulpfile.js b/gulpfile.js index cb7e3d9..5ab5c0a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -12,12 +12,12 @@ const fs = require("fs"); const svgSprite = require("gulp-svg-sprite"); var CSSDEST = "static/"; -var FAVICON_DATA_FILE = "src/favicon/faviconData.json"; +var FAVICON_DATA_FILE = "tmp/faviconData.json"; var TIMESTAMP = Math.round(Date.now() / 1000); gulp.task("sass", function () { return gulp - .src("src/sass/main.scss") + .src("src/sass/{main,print,mobile}.scss") .pipe(sass({ errLogToConsole: true })) .pipe(cleanCSS({ format: "beautify" })) .pipe( @@ -36,11 +36,11 @@ gulp.task("favicon-generate", function (done) { { masterPicture: "src/favicon/favicon-master.svg", dest: "static/favicon", - iconsPath: "/", + iconsPath: "/favicon", design: { ios: { pictureAspect: "backgroundAndMargin", - backgroundColor: "#ffffff", + backgroundColor: "#2f333e", margin: "14%", assets: { ios6AndPriorIcons: false, @@ -52,7 +52,7 @@ gulp.task("favicon-generate", function (done) { desktopBrowser: {}, windows: { pictureAspect: "whiteSilhouette", - backgroundColor: "#2b5797", + backgroundColor: "#2f333e", onConflict: "override", assets: { windows80Ie10Tile: false, @@ -66,7 +66,7 @@ gulp.task("favicon-generate", function (done) { }, androidChrome: { pictureAspect: "shadow", - themeColor: "#ffffff", + themeColor: "#2f333e", manifest: { display: "standalone", orientation: "notSet", @@ -79,9 +79,8 @@ gulp.task("favicon-generate", function (done) { }, }, safariPinnedTab: { - pictureAspect: "blackAndWhite", - threshold: 74.21875, - themeColor: "#5bbad5", + pictureAspect: "silhouette", + themeColor: "#2f333e", }, }, settings: { @@ -111,6 +110,18 @@ gulp.task("favicon-check-update", function (done) { gulp.task("svg-sprite", function () { config = { + shape: { + dimension: { + maxWidth: 24, + maxHeight: 24, + attributes: false, + }, + spacing: { + padding: 0, + box: "content", + }, + dest: "tmp/intermediate-svg", + }, svg: { xmlDeclaration: false, rootAttributes: { @@ -120,7 +131,7 @@ gulp.task("svg-sprite", function () { mode: { inline: true, symbol: { - dest: "./", + dest: "layouts/partials/", sprite: "svg-icon-symbols.html", bust: false, }, @@ -130,7 +141,7 @@ gulp.task("svg-sprite", function () { return gulp .src("src/icons/*.svg") .pipe(svgSprite(config)) - .pipe(gulp.dest("layouts/partials/")); + .pipe(gulp.dest(".")); }); gulp.task("iconfont", function () { @@ -172,13 +183,7 @@ gulp.task("iconfont", function () { gulp.task( "default", - gulp.series( - "sass", - "svg-sprite", - "iconfont", - "favicon-check-update", - "favicon-generate" - ) + gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate") ); gulp.task("devel", function () { diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 985f42a..871a36f 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -15,11 +15,17 @@ - - + + - - + + + + + + + + {{ with .OutputFormats.Get "rss" -}} {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html index acde79b..808bf18 100644 --- a/layouts/partials/page-header.html +++ b/layouts/partials/page-header.html @@ -22,19 +22,21 @@ diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index baf062e..13f572d 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -8,7 +8,7 @@ {{ end }} - {{ .Root.Site.Title }} + {{ .Root.Site.Title }} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index af39511..5ab6b31 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -482,82 +482,3 @@ img { transition-property: transform, margin-left, opacity; will-change: transform, margin-left; } - -@media screen and (max-width: $sm-breakpoint) { - .gdoc-nav { - margin-left: -$menu-width; - font-size: $font-size-base; - - &__control { - display: inline-block; - } - } - - .gdoc-header { - .icon { - width: $font-size-16 * 1.5; - height: $font-size-16 * 1.5; - } - } - - .gdoc-brand { - font-size: $font-size-16 * 1.5; - - &__img { - display: none; - } - } - - .gdoc-error { - padding: $padding-16 * 6 $padding-16; - - .icon { - width: $font-size-16 * 4; - height: $font-size-16 * 4; - } - - &__message { - padding-left: $padding-32; - } - - &__line { - padding: $padding-4 0; - } - - &__title { - font-size: $font-size-16 * 2; - } - } - - .gdoc-page__header .breadcrumb, - .hidden-mobile { - display: none; - } - - .gdoc-footer { - &__item { - width: 100%; - } - } - - #menu-control:checked ~ main { - .gdoc-nav nav, - .gdoc-page { - transform: translateX($menu-width); - } - - .gdoc-page { - opacity: 0.25; - } - } - - #menu-control:checked ~ .gdoc-header .gdoc-nav__control { - .icon.menu { - display: none; - } - - .icon.arrow-back { - display: inline-block; - } - } -} diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss new file mode 100644 index 0000000..ff222df --- /dev/null +++ b/src/sass/_mobile.scss @@ -0,0 +1,78 @@ +@media screen and (max-width: $sm-breakpoint) { + .gdoc-nav { + margin-left: -$menu-width; + font-size: $font-size-base; + + &__control { + display: inline-block; + } + } + + .gdoc-header { + .icon { + width: $font-size-16 * 1.5; + height: $font-size-16 * 1.5; + } + } + + .gdoc-brand { + font-size: $font-size-16 * 1.5; + + &__img { + display: none; + } + } + + .gdoc-error { + padding: $padding-16 * 6 $padding-16; + + .icon { + width: $font-size-16 * 4; + height: $font-size-16 * 4; + } + + &__message { + padding-left: $padding-32; + } + + &__line { + padding: $padding-4 0; + } + + &__title { + font-size: $font-size-16 * 2; + } + } + + .gdoc-page__header .breadcrumb, + .hidden-mobile { + display: none; + } + + .gdoc-footer { + &__item { + width: 100%; + } + } + + #menu-control:checked ~ main { + .gdoc-nav nav, + .gdoc-page { + transform: translateX($menu-width); + } + + .gdoc-page { + opacity: 0.25; + } + } + + #menu-control:checked ~ .gdoc-header .gdoc-nav__control { + .icon.menu { + display: none; + } + + .icon.arrow-back { + display: inline-block; + } + } +} diff --git a/src/sass/_print.scss b/src/sass/_print.scss index 76af679..c3ca17d 100644 --- a/src/sass/_print.scss +++ b/src/sass/_print.scss @@ -1,9 +1,35 @@ @media print { .gdoc-nav, - .gdoc-footer { + .gdoc-footer .container span:not(:first-child), + .editpage { display: none; } + .gdoc-footer { + border-top: 1px solid $gray-300; + } + + .gdoc-markdown pre { + white-space: pre-wrap; + overflow-wrap: break-word; + } + + .chroma code { + border: 1px solid $gray-300; + padding: $padding-8 !important; + font-weight: normal !important; + } + + .gdoc-markdown code { + font-weight: bold; + } + + a, + a:visited { + color: inherit !important; + text-decoration: none !important; + } + main { flex-direction: column-reverse; } diff --git a/src/sass/main.scss b/src/sass/main.scss index 901e485..7445b21 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,11 +1,10 @@ -@import "defaults"; +@import "_defaults"; -@import "normalize"; -@import "utils"; -@import "fonts"; -@import "base"; -@import "print"; +@import "_normalize"; +@import "_utils"; +@import "_fonts"; +@import "_base"; -@import "markdown"; -@import "chroma_github"; -@import "shortcodes"; +@import "_markdown"; +@import "_chroma_github"; +@import "_shortcodes"; diff --git a/src/sass/mobile.scss b/src/sass/mobile.scss new file mode 100644 index 0000000..0d891ee --- /dev/null +++ b/src/sass/mobile.scss @@ -0,0 +1,3 @@ +@import "_defaults"; + +@import "_mobile"; diff --git a/src/sass/print.scss b/src/sass/print.scss new file mode 100644 index 0000000..b00823a --- /dev/null +++ b/src/sass/print.scss @@ -0,0 +1,3 @@ +@import "_defaults"; + +@import "_print"; diff --git a/static/mobile.css b/static/mobile.css new file mode 100644 index 0000000..c0b05c6 --- /dev/null +++ b/static/mobile.css @@ -0,0 +1,55 @@ +@media screen and (max-width:39rem) { + .gdoc-nav { + margin-left: -16rem; + font-size: 16px + } + .gdoc-nav__control { + display: inline-block + } + .gdoc-header .icon { + width: 1.5rem; + height: 1.5rem + } + .gdoc-brand { + font-size: 1.5rem + } + .gdoc-brand__img { + display: none + } + .gdoc-error { + padding: 6rem 1rem + } + .gdoc-error .icon { + width: 4rem; + height: 4rem + } + .gdoc-error__message { + padding-left: 2rem + } + .gdoc-error__line { + padding: .25rem 0 + } + .gdoc-error__title { + font-size: 2rem + } + .gdoc-page__header .breadcrumb, + .hidden-mobile { + display: none + } + .gdoc-footer__item { + width: 100% + } + #menu-control:checked ~ main .gdoc-nav nav, + #menu-control:checked ~ main .gdoc-page { + transform: translateX(16rem) + } + #menu-control:checked ~ main .gdoc-page { + opacity: .25 + } + #menu-control:checked ~ .gdoc-header .gdoc-nav__control .icon.menu { + display: none + } + #menu-control:checked ~ .gdoc-header .gdoc-nav__control .icon.arrow-back { + display: inline-block + } +} \ No newline at end of file diff --git a/static/mobile.min.css b/static/mobile.min.css new file mode 100644 index 0000000..484bcad --- /dev/null +++ b/static/mobile.min.css @@ -0,0 +1 @@ +@media screen and (max-width:39rem){.gdoc-nav{margin-left:-16rem;font-size:16px}.gdoc-nav__control{display:inline-block}.gdoc-header .icon{width:1.5rem;height:1.5rem}.gdoc-brand{font-size:1.5rem}.gdoc-brand__img{display:none}.gdoc-error{padding:6rem 1rem}.gdoc-error .icon{width:4rem;height:4rem}.gdoc-error__message{padding-left:2rem}.gdoc-error__line{padding:.25rem 0}.gdoc-error__title{font-size:2rem}.gdoc-page__header .breadcrumb,.hidden-mobile{display:none}.gdoc-footer__item{width:100%}#menu-control:checked~main .gdoc-nav nav,#menu-control:checked~main .gdoc-page{transform:translateX(16rem)}#menu-control:checked~main .gdoc-page{opacity:.25}#menu-control:checked~.gdoc-header .gdoc-nav__control .icon.menu{display:none}#menu-control:checked~.gdoc-header .gdoc-nav__control .icon.arrow-back{display:inline-block}} \ No newline at end of file diff --git a/static/print.css b/static/print.css new file mode 100644 index 0000000..c5da2e6 --- /dev/null +++ b/static/print.css @@ -0,0 +1,37 @@ +@media print { + .editpage, + .gdoc-footer .container span:not(:first-child), + .gdoc-nav { + display: none + } + .gdoc-footer { + border-top: 1px solid #dee2e6 + } + .gdoc-markdown pre { + white-space: pre-wrap; + overflow-wrap: break-word + } + .chroma code { + border: 1px solid #dee2e6; + padding: .5rem!important; + font-weight: 400!important + } + .gdoc-markdown code { + font-weight: 700 + } + a, + a:visited { + color: inherit!important; + text-decoration: none!important + } + main { + flex-direction: column-reverse + } + .gdoc-toc { + flex: none + } + .gdoc-toc nav { + position: relative; + width: auto + } +} \ No newline at end of file diff --git a/static/print.min.css b/static/print.min.css new file mode 100644 index 0000000..8ef0676 --- /dev/null +++ b/static/print.min.css @@ -0,0 +1 @@ +@media print{.editpage,.gdoc-footer .container span:not(:first-child),.gdoc-nav{display:none}.gdoc-footer{border-top:1px solid #dee2e6}.gdoc-markdown pre{white-space:pre-wrap;overflow-wrap:break-word}.chroma code{border:1px solid #dee2e6;padding:.5rem!important;font-weight:400!important}.gdoc-markdown code{font-weight:700}a,a:visited{color:inherit!important;text-decoration:none!important}main{flex-direction:column-reverse}.gdoc-toc{flex:none}.gdoc-toc nav{position:relative;width:auto}} \ No newline at end of file