From 03a67bc1cf07affe16a34218bfa5176b5d6c7963 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Tue, 2 Apr 2024 01:48:11 +0200 Subject: [PATCH] build: use postcss --- gulpfile.js | 17 +++++++++------- index.html | 2 +- package.json | 7 ++++--- src/css/style.css | 48 ++++++++++++++++++++++++-------------------- static/style.min.css | 2 +- 5 files changed, 42 insertions(+), 34 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index b4f71911c..25d1bfb63 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,10 +1,8 @@ 'use strict' -const strip = require('gulp-strip-css-comments') -const prefix = require('gulp-autoprefixer') -const cssnano = require('gulp-cssnano') -const uglify = require('gulp-uglify') +const postcss = require('gulp-postcss') const concat = require('gulp-concat') +const uglify = require('gulp-uglify') const gulp = require('gulp') const src = { @@ -24,9 +22,14 @@ const styles = () => gulp .src(src.css) .pipe(concat(`${dist.name.css}.min.css`)) - .pipe(prefix()) - .pipe(strip({ all: true })) - .pipe(cssnano()) + .pipe( + postcss([ + require('postcss-focus'), + require('cssnano')({ + preset: ['cssnano-preset-advanced'] + }) + ]) + ) .pipe(gulp.dest(dist.path)) const scripts = () => diff --git a/index.html b/index.html index 81bb4b7bc..84adec46d 100644 --- a/index.html +++ b/index.html @@ -45,8 +45,8 @@ - + diff --git a/package.json b/package.json index de5af3d76..664f6359a 100644 --- a/package.json +++ b/package.json @@ -141,15 +141,16 @@ "finepack": "latest", "git-authors-cli": "latest", "glob": "latest", - "gulp": "latest", - "gulp-autoprefixer": "latest", + "gulp": "4", "gulp-concat": "latest", "gulp-cssnano": "latest", - "gulp-strip-css-comments": "latest", + "gulp-postcss": "latest", "gulp-uglify": "latest", "make-dir": "latest", "nano-staged": "latest", "npm-check-updates": "latest", + "postcss": "latest", + "postcss-focus": "latest", "rimraf": "latest", "simple-git-hooks": "latest", "standard": "latest", diff --git a/src/css/style.css b/src/css/style.css index d8759d11b..e79280847 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -32,23 +32,6 @@ --border-color: var(--gray3); } -@keyframes octocat { - 0%, - to { - transform: rotate(0); - } - - 20%, - 60% { - transform: rotate(-25deg); - } - - 40%, - 80% { - transform: rotate(10deg); - } -} - ::selection { background: #f9e4ac; /* WebKit/Blink Browsers */ } @@ -85,7 +68,27 @@ img { max-width: 100%; } -.github-corner { + +/* github-corner */ + +@keyframes b { + 0%, + 100% { + transform: rotate(0); + } + + 20%, + 60% { + transform: rotate(-25deg); + } + + 40%, + 80% { + transform: rotate(10deg); + } +} + +.github-corner svg { border-bottom: 0; position: fixed; right: 0; @@ -94,6 +97,11 @@ img { z-index: 1; } +.github-corner:hover svg .octo-arm { + opacity: 1; + animation: b 560ms ease-in-out; +} + .github-corner svg { color: #fff; fill: var(--secondary-color); @@ -101,10 +109,6 @@ img { width: 80px; } -.github-corner:hover .octo-arm { - animation: octocat 0.5s ease-in-out; -} - main { display: block; position: relative; diff --git a/static/style.min.css b/static/style.min.css index 01dac18ea..f73c960a2 100644 --- a/static/style.min.css +++ b/static/style.min.css @@ -1 +1 @@ -:root{--base:#3e54ff;--black:#3d3e47;--gray0:#f9f9fa;--gray1:#ecedf0;--gray2:#dfe0e6;--gray3:#d1d2db;--gray4:#c1c3cf;--gray5:#afb2c2;--gray6:#9b9eb2;--gray7:#85879c;--gray8:#696b7b;--gray9:#3d3e47;--indigo0:#ebedff;--indigo1:#d5daff;--indigo2:#bbc3ff;--indigo3:#9ea9ff;--indigo4:#7888ff;--indigo5:#3e54ff;--indigo6:#374ce5;--indigo7:#3042c8;--indigo8:#2836a4;--indigo9:#1c2674;--primary-color:#121102;--secondary-color:var(--indigo5);--bg-color:#f9f9fa;--serif-font:"Bitter",serif;--sans-serif-font:"Source Sans Pro",sans-serif;--code-font:"Roboto Mono",monospace;--border-color:var(--gray3)}@keyframes a{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}::selection{background:#f9e4ac}::-moz-selection{background:#f9e4ac}*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--sans-serif-font);font-size:16px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner svg{color:#fff;fill:var(--secondary-color);height:80px;width:80px}.github-corner:hover .octo-arm{animation:a .5s ease-in-out}main{display:block;position:relative;width:100vw;height:100%;z-index:0}.sidebar{font-family:var(--sans-serif-font);padding:40px;width:300px;transition:transform .25s ease-out}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li{margin:6px 0 6px 15px}.sidebar ul{margin:0;padding:0}.sidebar ul ul{margin-left:15px}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{color:var(--gray8);display:block;font-size:14px;text-decoration:none}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li.active>a{border-right:2px solid var(--secondary-color);color:var(--secondary-color);font-weight:700}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53%,.1)}body.sticky .sidebar,body.sticky .sidebar-toggle{cursor:pointer;position:fixed}.content{padding-top:60px;top:0;right:0;bottom:0;left:300px;position:absolute;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:800px;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section table{border-spacing:0;border-collapse:collapse;display:block;width:-moz-max-content;width:max-content;max-width:100%;overflow:auto}.markdown-section table thead tr{text-align:left}.markdown-section td,.markdown-section th{border:1px solid var(--border-color);padding:.5rem}@media print{.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar{position:fixed}.sidebar,.sidebar-toggle{display:none}main{height:auto;overflow-x:hidden}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.github-corner:hover .octo-arm{animation:none}}.sidebar,body{background-color:var(--bg-color);color:var(--primary-color)}.markdown-section :is(h1,h2,h3,h4,h5){font-family:var(--serif-font)}.markdown-section :is(a){color:var(--secondary-color);text-decoration:none;font-weight:700}.markdown-section a:hover{text-decoration:underline}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section p{margin:1.2em 0}.markdown-section :is(p,ul){line-height:1.8rem;word-spacing:.05rem}.markdown-section ul li{margin-bottom:10px}.markdown-section ul{padding-left:2rem}.markdown-section blockquote{border-left:4px solid var(--secondary-color);margin:2em 0;padding-left:20px}.markdown-section blockquote p{margin-left:0;padding:12px 0}.markdown-section :is(code,pre,img){border-radius:4px}.markdown-section code{border:1px solid var(--border-color);font-family:var(--code-font);font-size:.75rem;padding:3px 5px;white-space:nowrap}.markdown-section pre{border:1px solid var(--border-color);line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 .7rem;position:relative;word-wrap:normal}.markdown-section pre:after{color:var(--gray6);content:attr(data-lang);font-size:.6rem;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0}.markdown-section :is(pre,pre>code){-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial}.markdown-section pre>code{border:0;display:block;font-family:var(--code-font);font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:1.25em 5px;white-space:inherit}.markdown-section :is(code:after,code:before){letter-spacing:.8px;letter-spacing:.05rem}.token:is(.comment){color:var(--gray6)}.token:is(.string,.keyword,.operator,.number,.punctuation){color:#0420f2} \ No newline at end of file +:root{--base:#3e54ff;--black:#3d3e47;--gray0:#f9f9fa;--gray1:#ecedf0;--gray2:#dfe0e6;--gray3:#d1d2db;--gray4:#c1c3cf;--gray5:#afb2c2;--gray6:#9b9eb2;--gray7:#85879c;--gray8:#696b7b;--gray9:#3d3e47;--indigo0:#ebedff;--indigo1:#d5daff;--indigo2:#bbc3ff;--indigo3:#9ea9ff;--indigo4:#7888ff;--indigo5:#3e54ff;--indigo6:#374ce5;--indigo7:#3042c8;--indigo8:#2836a4;--indigo9:#1c2674;--primary-color:#121102;--secondary-color:var(--indigo5);--bg-color:#f9f9fa;--serif-font:"Bitter",serif;--sans-serif-font:"Source Sans Pro",sans-serif;--code-font:"Roboto Mono",monospace;--border-color:var(--gray3)}::selection{background:#f9e4ac}::-moz-selection{background:#f9e4ac}*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--sans-serif-font);font-size:16px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}@keyframes a{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}.github-corner svg{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover svg .octo-arm{opacity:1;animation:a .56s ease-in-out}.github-corner:focus-visible svg .octo-arm{opacity:1;animation:a .56s ease-in-out}.github-corner svg{color:#fff;fill:var(--secondary-color);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}.sidebar{font-family:var(--sans-serif-font);padding:40px;width:300px;transition:transform .25s ease-out}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li{margin:6px 0 6px 15px}.sidebar ul{margin:0;padding:0}.sidebar ul ul{margin-left:15px}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{color:var(--gray8);display:block;font-size:14px;text-decoration:none}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li a:focus-visible{text-decoration:underline}.sidebar ul li.active>a{border-right:2px solid var(--secondary-color);color:var(--secondary-color);font-weight:700}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53%,.4)}.sidebar:focus-visible::-webkit-scrollbar-thumb{background:hsla(0,0%,53%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53%,.1)}.sidebar:focus-visible::-webkit-scrollbar-track{background:hsla(0,0%,53%,.1)}body.sticky .sidebar,body.sticky .sidebar-toggle{cursor:pointer;position:fixed}.content{padding-top:60px;top:0;right:0;bottom:0;left:300px;position:absolute;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:800px;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto}.markdown-section table thead tr{text-align:left}.markdown-section td,.markdown-section th{border:1px solid var(--border-color);padding:.5rem}@media print{.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar{position:fixed}.sidebar,.sidebar-toggle{display:none}main{height:auto;overflow-x:hidden}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.github-corner:hover .octo-arm{animation:none}.github-corner:focus-visible .octo-arm{animation:none}}.sidebar,body{background-color:var(--bg-color);color:var(--primary-color)}.markdown-section :is(h1,h2,h3,h4,h5){font-family:var(--serif-font)}.markdown-section :is(a){color:var(--secondary-color);text-decoration:none;font-weight:700}.markdown-section a:hover{text-decoration:underline}.markdown-section a:focus-visible{text-decoration:underline}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section p{margin:1.2em 0}.markdown-section :is(p,ul){line-height:1.8rem;word-spacing:.05rem}.markdown-section ul li{margin-bottom:10px}.markdown-section ul{padding-left:2rem}.markdown-section blockquote{border-left:4px solid var(--secondary-color);margin:2em 0;padding-left:20px}.markdown-section blockquote p{margin-left:0;padding:12px 0}.markdown-section :is(code,pre,img){border-radius:4px}.markdown-section code{border:1px solid var(--border-color);font-family:var(--code-font);font-size:.75rem;padding:3px 5px;white-space:nowrap}.markdown-section pre{border:1px solid var(--border-color);line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 .7rem;position:relative;word-wrap:normal}.markdown-section pre:after{color:var(--gray6);content:attr(data-lang);font-size:.6rem;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0}.markdown-section :is(pre,pre>code){-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial}.markdown-section pre>code{border:0;display:block;font-family:var(--code-font);font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:1.25em 5px;white-space:inherit}.markdown-section :is(code:after,code:before){letter-spacing:.8px;letter-spacing:.05rem}.token:is(.comment){color:var(--gray6)}.token:is(.string,.keyword,.operator,.number,.punctuation){color:#0420f2} \ No newline at end of file