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