diff --git a/CHANGELOG.md b/CHANGELOG.md index 480fbb3..14444c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ - ENHANCEMENT - add node `gulp` script to package.json - - remove title and set empty alt tag for page branding + - remove `title` and set empty `alt` tag on branding image + - add minimal working CSS for printing + - split out mobile CSS - BUGFIX - use relative URL's for fonts diff --git a/gulpfile.js b/gulpfile.js index 64ef523..fe30645 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,7 +17,7 @@ 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( diff --git a/layouts/partials/head/others.html b/layouts/partials/head/others.html index a08f924..b7f293f 100644 --- a/layouts/partials/head/others.html +++ b/layouts/partials/head/others.html @@ -8,10 +8,16 @@ - + + + + + + + - + {{ with .OutputFormats.Get "atom" }} {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 3995ab1..bce324c 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -132,6 +132,7 @@ img { .gblog-nav { background: $second-color; color: $gray-200; + min-height: $padding-4; .container { padding-top: $padding-8; @@ -429,85 +430,3 @@ img { text-decoration: none; } } - -@media screen and (max-width: $sm-breakpoint) { - .gblog-brand { - font-size: $font-size-32 * 1.1; - } - - .gblog-nav { - .container { - padding: 0; - } - - &__list { - background: lighten($second-color, 10%); - flex-direction: column; - justify-content: center; - max-height: 0; - overflow: hidden; - } - - &__entry { - padding: $padding-16 0; - border: 0; - border-radius: 0; - display: block; - margin: 0; - text-align: center; - - &:hover, - &.is-active { - background: lighten($second-color, 5%); - } - } - - &__control { - display: block; - text-align: center; - - label { - padding: $padding-16 0; - } - } - } - - .gblog-error { - padding: $padding-16 * 6 $padding-16; - - .icon { - font-size: $font-size-32 * 2.5; - } - - &__message { - padding-left: $padding-16 * 2; - } - - &__line { - padding: $padding-4 0; - } - - &__title { - font-size: $font-size-16 * 2; - } - } - - .gblog-footer { - &__item { - width: 100%; - } - } -} - -#menu-control:checked ~ .gblog-nav__list { - max-height: 100%; -} - -#menu-control:checked ~ .gblog-nav__control { - .icon.menu { - display: none; - } - .icon.clear { - display: inline-block; - } -} diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss new file mode 100644 index 0000000..a7713ff --- /dev/null +++ b/src/sass/_mobile.scss @@ -0,0 +1,81 @@ +@media screen and (max-width: $sm-breakpoint) { + .gblog-brand { + font-size: $font-size-32 * 1.1; + } + + .gblog-nav { + .container { + padding: 0; + } + + &__list { + background: lighten($second-color, 10%); + flex-direction: column; + justify-content: center; + max-height: 0; + overflow: hidden; + } + + &__entry { + padding: $padding-16 0; + border: 0; + border-radius: 0; + display: block; + margin: 0; + text-align: center; + + &:hover, + &.is-active { + background: lighten($second-color, 5%); + } + } + + &__control { + display: block; + text-align: center; + + label { + padding: $padding-16 0; + } + } + } + + .gblog-error { + padding: $padding-16 * 6 $padding-16; + + .icon { + font-size: $font-size-32 * 2.5; + } + + &__message { + padding-left: $padding-16 * 2; + } + + &__line { + padding: $padding-4 0; + } + + &__title { + font-size: $font-size-16 * 2; + } + } + + .gblog-footer { + &__item { + width: 100%; + } + } +} + +#menu-control:checked ~ .gblog-nav__list { + max-height: 100%; +} + +#menu-control:checked ~ .gblog-nav__control { + .icon.menu { + display: none; + } + .icon.clear { + display: inline-block; + } +} diff --git a/src/sass/_print.scss b/src/sass/_print.scss index c736efa..e1615c1 100644 --- a/src/sass/_print.scss +++ b/src/sass/_print.scss @@ -1,19 +1,38 @@ @media print { .gblog-nav, - .gblog-footer { + .gblog-footer .container div:not(:last-child), + .gblog-paging, + .gblog-post__readmore, + .gblog-post__anchor { display: none; } - main { - flex-direction: column-reverse; + .gblog-header { + border-bottom: 1px solid $gray-300; } - .gblog-toc { - flex: none; + .gblog-footer { + border-top: 1px solid $gray-300; + } - nav { - position: relative; - width: auto; - } + .gblog-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; + } + + .gblog-markdown code { + font-weight: bold; + } + + a, + a:visited { + color: inherit !important; + text-decoration: none !important; } } 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..d06c3b5 --- /dev/null +++ b/static/mobile.css @@ -0,0 +1,61 @@ +@media screen and (max-width:45rem) { + .gblog-brand { + font-size: 2.2rem + } + .gblog-nav .container { + padding: 0 + } + .gblog-nav__list { + background: #454b5b; + flex-direction: column; + justify-content: center; + max-height: 0; + overflow: hidden + } + .gblog-nav__entry { + padding: 1rem 0; + border: 0; + border-radius: 0; + display: block; + margin: 0; + text-align: center + } + .gblog-nav__entry.is-active, + .gblog-nav__entry:hover { + background: #3a3f4d + } + .gblog-nav__control { + display: block; + text-align: center + } + .gblog-nav__control label { + padding: 1rem 0 + } + .gblog-error { + padding: 6rem 1rem + } + .gblog-error .icon { + font-size: 5rem + } + .gblog-error__message { + padding-left: 2rem + } + .gblog-error__line { + padding: .25rem 0 + } + .gblog-error__title { + font-size: 2rem + } + .gblog-footer__item { + width: 100% + } +} +#menu-control:checked ~ .gblog-nav__list { + max-height: 100% +} +#menu-control:checked ~ .gblog-nav__control .icon.menu { + display: none +} +#menu-control:checked ~ .gblog-nav__control .icon.clear { + 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..1b76314 --- /dev/null +++ b/static/mobile.min.css @@ -0,0 +1 @@ +@media screen and (max-width:45rem){.gblog-brand{font-size:2.2rem}.gblog-nav .container{padding:0}.gblog-nav__list{background:#454b5b;flex-direction:column;justify-content:center;max-height:0;overflow:hidden}.gblog-nav__entry{padding:1rem 0;border:0;border-radius:0;display:block;margin:0;text-align:center}.gblog-nav__entry.is-active,.gblog-nav__entry:hover{background:#3a3f4d}.gblog-nav__control{display:block;text-align:center}.gblog-nav__control label{padding:1rem 0}.gblog-error{padding:6rem 1rem}.gblog-error .icon{font-size:5rem}.gblog-error__message{padding-left:2rem}.gblog-error__line{padding:.25rem 0}.gblog-error__title{font-size:2rem}.gblog-footer__item{width:100%}}#menu-control:checked~.gblog-nav__list{max-height:100%}#menu-control:checked~.gblog-nav__control .icon.menu{display:none}#menu-control:checked~.gblog-nav__control .icon.clear{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..75afc76 --- /dev/null +++ b/static/print.css @@ -0,0 +1,32 @@ +@media print { + .gblog-footer .container div:not(:last-child), + .gblog-nav, + .gblog-paging, + .gblog-post__anchor, + .gblog-post__readmore { + display: none + } + .gblog-header { + border-bottom: 1px solid #dee2e6 + } + .gblog-footer { + border-top: 1px solid #dee2e6 + } + .gblog-markdown pre { + white-space: pre-wrap; + overflow-wrap: break-word + } + .chroma code { + border: 1px solid #dee2e6; + padding: .5rem!important; + font-weight: 400!important + } + .gblog-markdown code { + font-weight: 700 + } + a, + a:visited { + color: inherit!important; + text-decoration: none!important + } +} \ No newline at end of file diff --git a/static/print.min.css b/static/print.min.css new file mode 100644 index 0000000..0ddf00e --- /dev/null +++ b/static/print.min.css @@ -0,0 +1 @@ +@media print{.gblog-footer .container div:not(:last-child),.gblog-nav,.gblog-paging,.gblog-post__anchor,.gblog-post__readmore{display:none}.gblog-header{border-bottom:1px solid #dee2e6}.gblog-footer{border-top:1px solid #dee2e6}.gblog-markdown pre{white-space:pre-wrap;overflow-wrap:break-word}.chroma code{border:1px solid #dee2e6;padding:.5rem!important;font-weight:400!important}.gblog-markdown code{font-weight:700}a,a:visited{color:inherit!important;text-decoration:none!important}} \ No newline at end of file