split out css
Robert Kaussow
parent
6054d3888d
commit
dfd2f6725d
14
.drone.yml
14
.drone.yml
|
|
@ -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
|
||||
|
||||
...
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
41
gulpfile.js
41
gulpfile.js
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
@import "_defaults";
|
||||
|
||||
@import "_mobile";
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "_defaults";
|
||||
|
||||
@import "_print";
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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}}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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}}
|
||||
Loading…
Reference in New Issue