split out css

This commit is contained in:
Robert Kaussow 2020-11-09 22:06:06 +01:00
parent 6054d3888d
commit dfd2f6725d
No known key found for this signature in database
GPG Key ID: 65362AE74AF98B61
17 changed files with 284 additions and 118 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

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

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

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