Merge pull request #14 from thegeeklab/prepare-release

split out css
This commit is contained in:
Robert Kaussow 2020-11-09 22:40:54 +01:00 committed by GitHub
commit 7ff16786bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 288 additions and 121 deletions

View file

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

View file

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

8
data/assets.json Normal file
View file

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

View file

@ -4,6 +4,7 @@ title: Geekdocs
theme: hugo-geekdoc
pygmentsUseClasses: true
pygmentsCodeFences: true
timeout: 180000
# Geekdoc configuration
disablePathToLower: true

View file

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

View file

@ -2,12 +2,12 @@
{{ .Scratch.Set "geekdocSearchConfig" .Site.Params.GeekdocSearchConfig }}
<!-- Remove after https://github.com/gohugoio/hugo/issues/6331 -->
{{ $searchJSFile := printf "js/%s.search.js" .Language.Lang }}
{{ $searchJS := resources.Get "js/search.js" | resources.ExecuteAsTemplate $searchJSFile . | resources.Minify }}
{{ $searchJS := resources.Get "js/search.js" | resources.ExecuteAsTemplate $searchJSFile . | resources.Minify | fingerprint }}
<script defer src="{{ $searchJS.RelPermalink }}"></script>
{{ end }}
{{ if default true .Site.Params.GeekdocAnchorCopy }}
<script defer src="{{ "js/clipboard.min.js" | relURL }}"></script>
<script defer src="{{ index .Site.Data.assets "js/clipboard.min.js" | relURL }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var clipboard = new ClipboardJS('.clip');

View file

@ -15,11 +15,17 @@
<link rel="preload" as="font" href="{{ "fonts/DroidSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="{{ "fonts/GeekdocIcons.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="preload" href="{{ index .Site.Data.assets "main.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ index .Site.Data.assets "main.min.css" | relURL }}" media="all">
<link rel="preload" href="{{ "custom.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">
<link rel="preload" href="{{ index .Site.Data.assets "mobile.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ index .Site.Data.assets "mobile.min.css" | relURL }}" media="screen and (max-width: 45rem)">
<link rel="preload" href="{{ index .Site.Data.assets "print.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ index .Site.Data.assets "print.min.css" | relURL }}" media="print">
<link rel="preload" href="{{ index .Site.Data.assets "custom.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ index .Site.Data.assets "custom.css" | relURL }}" media="all">
{{ with .OutputFormats.Get "rss" -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}

View file

@ -22,19 +22,21 @@
<div class="gdoc-page__header flex flex-wrap justify-between{{ if not $showEdit }} hidden-mobile{{ end }}{{ if (and (not $showBreadcrumb) (not $showEdit)) }} hidden {{ end }}" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span>
{{if $showBreadcrumb }}
<span class="breadcrumb">
<svg class="icon path"><use xlink:href="#path"></use></svg>
{{ $name := (partial "title" .) }}
{{ template "breadcrumb" dict "page" . "value" $name }}
</span>
<span class="breadcrumb">
<svg class="icon path"><use xlink:href="#path"></use></svg>
{{ $name := (partial "title" .) }}
{{ template "breadcrumb" dict "page" . "value" $name }}
</span>
{{ end }}
</span>
<span>
{{ if $showEdit }}
<span class="editpage">
<svg class="icon code"><use xlink:href="#code"></use></svg>
<a href="{{ $geekdocRepo }}/{{ $geekdocEditPath }}/{{ $.Scratch.Get "geekdocFilePath" }}">
Edit this page
</a>
</span>
{{ end }}
</span>
</div>

View file

@ -8,7 +8,7 @@
{{ end }}
<a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
<span class="gdoc-brand flex align-center">
<img class="gdoc-brand__img" src="{{ (default "brand.svg" .Root.Site.Params.GeekdocLogo) | relURL }}" alt="{{ .Root.Site.Title }}" width=38 height=38>
<img class="gdoc-brand__img" src="{{ (default "brand.svg" .Root.Site.Params.GeekdocLogo) | relURL }}" alt="" width=38 height=38>
{{ .Root.Site.Title }}
</span>
</a>

View file

@ -1,6 +1,6 @@
{{ if not (.Page.Scratch.Get "mermaid") }}
<!-- Include mermaid only first time -->
<script defer src="{{ "js/mermaid.min.js" | relURL }}"></script>
<script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
mermaid.initialize({

View file

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

78
src/sass/_mobile.scss Normal file
View file

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

View file

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

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

55
static/mobile.css Normal file
View file

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

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

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

37
static/print.css Normal file
View file

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

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

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