build: use postcss

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 = () =>

index.html

@@ -45,8 +45,8 @@
   <link href="https://fonts.googleapis.com/css2?family=Bitter&family=Roboto+Mono&family=Source+Sans+Pro&display=swap" rel="stylesheet">
 
   <!-- Stylesheet -->
-  <link rel="stylesheet" href="/static/style.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codecopy/umd/codecopy.min.css">
+  <link rel="stylesheet" href="/static/style.min.css">
 
 </head>
 

package.json

@@ -138,19 +138,18 @@
     "browser-sync": "latest",
     "c8": "latest",
     "concurrently": "latest",
+    "cssnano": "latest",
+    "cssnano-preset-advanced": "latest",
     "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",
-    "rimraf": "latest",
+    "postcss": "latest",
+    "postcss-focus": "latest",
     "simple-git-hooks": "latest",
     "standard": "latest",
     "standard-markdown": "latest"

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,17 +97,18 @@ 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);
   height: 80px;
   width: 80px;
 }
 
-.github-corner:hover .octo-arm {
-  animation: octocat 0.5s ease-in-out;
-}
-
 main {
   display: block;
   position: relative;