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 @@
{{if $showBreadcrumb }}
-
-
- {{ $name := (partial "title" .) }}
- {{ template "breadcrumb" dict "page" . "value" $name }}
-
+
+
+ {{ $name := (partial "title" .) }}
+ {{ template "breadcrumb" dict "page" . "value" $name }}
+
{{ end }}
{{ if $showEdit }}
+
Edit this page
+
{{ end }}
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 }}
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