From 5fe5a5181bfcfca55ed853cf259221e6cf194a3c Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Wed, 3 Apr 2024 10:19:33 +0000 Subject: [PATCH] build: use postcss --- gulpfile.js | 17 +++++++------ package.json | 9 ++++--- public/css/style.css | 53 ++++++++++++++++++++-------------------- public/css/style.min.css | 2 +- 4 files changed, 44 insertions(+), 37 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 11cfec0..eee04fe 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: require('cssnano-preset-advanced') + }) + ]) + ) .pipe(gulp.dest(dist.path)) const scripts = () => diff --git a/package.json b/package.json index bfffa58..2d65749 100644 --- a/package.json +++ b/package.json @@ -141,17 +141,20 @@ "ava": "5", "browser-sync": "latest", "concurrently": "latest", + "cssnano": "latest", + "cssnano-preset-advanced": "latest", "finepack": "latest", "git-authors-cli": "latest", "github-generate-release": "latest", - "gulp": "latest", + "gulp": "4", "gulp-autoprefixer": "latest", "gulp-concat": "latest", - "gulp-cssnano": "latest", - "gulp-strip-css-comments": "latest", + "gulp-postcss": "latest", "gulp-uglify": "latest", "nano-staged": "latest", "npm-check-updates": "latest", + "postcss": "latest", + "postcss-focus": "latest", "simple-git-hooks": "latest", "standard": "latest", "standard-markdown": "latest", diff --git a/public/css/style.css b/public/css/style.css index 9402c97..212dfd1 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -31,25 +31,6 @@ ::-moz-selection { background: var(--selection-color); } - -@keyframes octocat { - - 0%, - to { - transform: rotate(0); - } - - 20%, - 60% { - transform: rotate(-25deg); - } - - 40%, - 80% { - transform: rotate(10deg); - } -} - * { -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; @@ -75,7 +56,26 @@ body { overflow-x: hidden; } -.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; @@ -84,17 +84,18 @@ body { z-index: 1; } +.github-corner:hover svg .octo-arm { + opacity: 1; + animation: b 560ms ease-in-out; +} + .github-corner svg { - color: var(--bg-color); - fill: var(--primary-color); + color: white; + fill: black; height: 80px; width: 80px; } -.github-corner:hover .octo-arm { - animation: octocat 0.5 ease-in-out; -} - main { display: block; position: relative; diff --git a/public/css/style.min.css b/public/css/style.min.css index 0135175..7bd875a 100644 --- a/public/css/style.min.css +++ b/public/css/style.min.css @@ -1 +1 @@ -:root{--gray0:#f8f9fa;--gray1:#f1f3f5;--gray2:#e9ecef;--gray3:#dee2e6;--gray4:#ced4da;--gray5:#adb5bd;--gray6:#868e96;--gray7:#495057;--gray8:#343a40;--gray9:#212529;--gray10:#101214;--gray11:#010101;--gray12:#000;--primary-color:var(--gray10);--selection-color:#f9e4ac;--bg-color:#fff;--serif-font:"Space Grotesk",sans-serif;--sans-serif-font:var(--serif-font);--code-font:Source Code Pro,Menlo,monospace;--codebox-border-color:var(--gray3);--codebox-color:var(--gray12)}::selection{background:var(--selection-color)}::-moz-selection{background:var(--selection-color)}@keyframes a{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}*{-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;color:var(--primary-color);font-family:var(--sans-serif-font);font-size:16px;letter-spacing:0;margin:0;overflow-x:hidden}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner svg{color:var(--bg-color);fill:var(--primary-color);height:80px;width:80px}.github-corner:hover .octo-arm{animation:a .5 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;overflow:auto;height:100vh}.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{display:block;color:inherit;font-size:14px;text-decoration:none}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li.active>a{border-right:2px solid var(--primary-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{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}@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);letter-spacing:-.016em;line-height:1.25}.markdown-section :is(h1,h2,h3,h4,h5) a:hover:after{content:"";position:relative;width:14px;height:14px;margin-left:6px;top:-2px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link-2'%3E%3Cpath d='M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3M8 12h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;display:inline-block}.markdown-section a{color:var(--primary-color);text-decoration:none}.markdown-section :is(li,p) a{text-decoration:none;border-bottom:2px solid var(--gray3)}.markdown-section :is(p,li) a:hover{border-bottom:2px solid var(--gray12)}.markdown-section li a[href^="https://"]:after,.markdown-section li a[href^=http]:after,.markdown-section p a[href^="https://"]:after,.markdown-section p a[href^=http]:after{content:"";width:11px;height:11px;margin-left:2px;top:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up-right'%3E%3Cpath d='M7 17L17 7M7 7h10v10'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;display:inline-block}.markdown-section li a[href^="https://"]:hover:after,.markdown-section li a[href^=http]:hover:after,.markdown-section p a[href^="https://"]:hover:after,.markdown-section p a[href^=http]:hover:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}.markdown-section h1{font-size:4rem;margin:4rem 0 1rem}.markdown-section h2{font-size:2.5rem;margin:3.5rem 0 1rem}.markdown-section h3{font-size:2rem;margin:3rem 0 1rem}.markdown-section h4{font-size:1.5rem;margin:2.5rem 0 1rem}.markdown-section h5{font-size:1rem}.markdown-section p{margin:1.5rem 0 0}.markdown-section :is(p,ul){letter-spacing:.004em;font-size:17px;line-height:1.6}.markdown-section ul{padding-left:32px}.markdown-section ul li{margin-bottom:1rem}.markdown-section :is(li,p) code{background:var(--bg-color);border-radius:3px;border:1px solid var(--codebox-border-color);color:var(--codebox-color);font-family:var(--code-font);font-size:.75rem;margin:0 2px;padding:4px 5px;white-space:nowrap}#banner{width:60%;display:flex;margin:auto}.app-name{display:flex;justify-content:center}.app-name-link img{width:32px;height:32px} \ No newline at end of file +:root{--gray0:#f8f9fa;--gray1:#f1f3f5;--gray2:#e9ecef;--gray3:#dee2e6;--gray4:#ced4da;--gray5:#adb5bd;--gray6:#868e96;--gray7:#495057;--gray8:#343a40;--gray9:#212529;--gray10:#101214;--gray11:#010101;--gray12:#000;--primary-color:var(--gray10);--selection-color:#f9e4ac;--bg-color:#fff;--serif-font:"Space Grotesk",sans-serif;--sans-serif-font:var(--serif-font);--code-font:Source Code Pro,Menlo,monospace;--codebox-border-color:var(--gray3);--codebox-color:var(--gray12)}::selection{background:var(--selection-color)}::-moz-selection{background:var(--selection-color)}*{-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;color:var(--primary-color);font-family:var(--sans-serif-font);font-size:16px;letter-spacing:0;margin:0;overflow-x:hidden}@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{animation:a .56s ease-in-out;opacity:1}.github-corner:focus-visible svg .octo-arm{animation:a .56s ease-in-out;opacity:1}.github-corner svg{color:#fff;fill:#000;height:80px;width:80px}main{display:block;height:100%;position:relative;width:100vw;z-index:0}.sidebar{font-family:var(--sans-serif-font);height:100vh;overflow:auto;padding:40px;transition:transform .25s ease-out;width:300px}.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:inherit;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(--primary-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{position:fixed}.content{bottom:0;left:300px;padding-top:60px;position:absolute;right:0;top:0;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}@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;padding-top:20px;position:static;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);letter-spacing:-.016em;line-height:1.25}.markdown-section :is(h1,h2,h3,h4,h5) a:hover:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-link-2'%3E%3Cpath d='M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3M8 12h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:inline-block;height:14px;margin-left:6px;position:relative;top:-2px;width:14px}.markdown-section :is(h1,h2,h3,h4,h5) a:focus-visible:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-link-2'%3E%3Cpath d='M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3M8 12h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:inline-block;height:14px;margin-left:6px;position:relative;top:-2px;width:14px}.markdown-section a{color:var(--primary-color);text-decoration:none}.markdown-section :is(li,p) a{border-bottom:2px solid var(--gray3);text-decoration:none}.markdown-section :is(p,li) a:hover{border-bottom:2px solid var(--gray12)}.markdown-section :is(p,li) a:focus-visible{border-bottom:2px solid var(--gray12)}.markdown-section li a[href^="https://"]:after,.markdown-section li a[href^=http]:after,.markdown-section p a[href^="https://"]:after,.markdown-section p a[href^=http]:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-arrow-up-right'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:inline-block;height:11px;margin-left:2px;top:0;width:11px}.markdown-section li a[href^="https://"]:hover:after,.markdown-section li a[href^=http]:hover:after,.markdown-section p a[href^="https://"]:hover:after,.markdown-section p a[href^=http]:hover:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-arrow-right'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}.markdown-section li a[href^="https://"]:focus-visible:after,.markdown-section li a[href^=http]:focus-visible:after,.markdown-section p a[href^="https://"]:focus-visible:after,.markdown-section p a[href^=http]:focus-visible:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-arrow-right'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}.markdown-section h1{font-size:4rem;margin:4rem 0 1rem}.markdown-section h2{font-size:2.5rem;margin:3.5rem 0 1rem}.markdown-section h3{font-size:2rem;margin:3rem 0 1rem}.markdown-section h4{font-size:1.5rem;margin:2.5rem 0 1rem}.markdown-section h5{font-size:1rem}.markdown-section p{margin:1.5rem 0 0}.markdown-section :is(p,ul){font-size:17px;letter-spacing:.004em;line-height:1.6}.markdown-section ul{padding-left:32px}.markdown-section ul li{margin-bottom:1rem}.markdown-section :is(li,p) code{background:var(--bg-color);border:1px solid var(--codebox-border-color);border-radius:3px;color:var(--codebox-color);font-family:var(--code-font);font-size:.75rem;margin:0 2px;padding:4px 5px;white-space:nowrap}#banner{display:flex;margin:auto;width:60%}.app-name{display:flex;justify-content:center}.app-name-link img{height:32px;width:32px} \ No newline at end of file