github
/
hugo-geekblog
mirror of https://github.com/thegeeklab/hugo-geekblog.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix print css and split out mobile css

This commit is contained in:
Robert Kaussow 2020-11-08 17:08:17 +01:00
parent d2eb08243f
commit 172db048f0
Signed by: xoxys
GPG Key ID: 65362AE74AF98B61
13 changed files with 231 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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

2
gulpfile.js
View File

@ -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(

10
layouts/partials/head/others.html
View File

@ -8,10 +8,16 @@
<link rel="preload" as="font" href="{{ "fonts/GeekblogIcons.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{ "main.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen">
<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="all">
<link rel="preload" href="{{ "mobile.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ "mobile.min.css" | relURL }}" media="screen and (max-width: 45rem)">
<link rel="preload" href="{{ "print.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ "print.min.css" | relURL }}" media="print">
<link rel="preload" href="{{ "custom.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">
<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="all">
{{ with .OutputFormats.Get "atom" }}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}

83
src/sass/_base.scss
View File

@ -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;
}
}

81
src/sass/_mobile.scss Normal file
View File

@ -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;
}
}

37
src/sass/_print.scss
View File

@ -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;
}
}

17
src/sass/main.scss
View File

@ -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";

3
src/sass/mobile.scss Normal file
View File

@ -0,0 +1,3 @@
@import "_defaults";
@import "_mobile";

3
src/sass/print.scss Normal file
View File

@ -0,0 +1,3 @@
@import "_defaults";
@import "_print";

61
static/mobile.css Normal file
View File

@ -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
}

1
static/mobile.min.css vendored Normal file
View File

@ -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}

32
static/print.css Normal file
View File

@ -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
}
}

1
static/print.min.css vendored Normal file
View File

@ -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}}