build: use postcss

microlinkhq · Apr 2, 2024 · 3312cf5 · 3312cf5
1 parent 801835f
commit 3312cf5
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 38 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -12,12 +12,12 @@
   --gray8: #6b6c70;
   --gray9: #3d3f44;
   --gray10: #000;
-  --orange: #FF5300;
+  --orange: #EA5825;
   --pink: #bc25aa;
   --red: #ff2159;
   /* theme */
   --primary-color: var(--gray10);
-  --secondary-color: var(--red);
+  --secondary-color: var(--orange);
   --bg-color: var(--base);
   --selection-color: #f9e4ac;
   --serif-font: 'IBM Plex Serif', sans-serif;
@@ -26,23 +26,6 @@
   --border-color: var(--gray3);
 }
 
-@keyframes octocat {
-  0%,
-  to {
-    transform: rotate(0);
-  }
-
-  20%,
-  60% {
-    transform: rotate(-25deg);
-  }
-
-  40%,
-  80% {
-    transform: rotate(10deg);
-  }
-}
-
 ::selection {
   background: var(--selection-color);
 }
@@ -79,7 +62,26 @@ 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;
@@ -88,17 +90,18 @@ img {
   z-index: 1;
 }
 
+.github-corner:hover svg .octo-arm {
+  opacity: 1;
+  animation: b 560ms ease-in-out;
+}
+
 .github-corner svg {
-  color: var(--bg-color);
+  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;

diff --git 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/index.html b/index.html
@@ -52,8 +52,8 @@
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans&family=IBM+Plex+Serif:wght@700&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>
 
 <body>

diff --git a/package.json b/package.json
@@ -191,16 +191,18 @@
     "browser-sync": "latest",
     "c8": "latest",
     "concurrently": "latest",
+    "cssnano": "latest",
+    "cssnano-preset-advanced": "latest",
     "finepack": "latest",
     "git-authors-cli": "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",
     "nano-staged": "latest",
     "npm-check-updates": "latest",
+    "postcss": "latest",
+    "postcss-focus": "latest",
     "simple-git-hooks": "latest",
     "ts-standard": "latest"
   },

diff --git a/static/style.min.css b/static/style.min.css