build(docs): use postcss

microlinkhq · Apr 2, 2024 · c2103cf · c2103cf
1 parent 3589da3
commit c2103cf
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 51 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -27,23 +27,6 @@
   --border-color: var(--gray2);
 }
 
-@keyframes octocat {
-  0%,
-  to {
-    transform: rotate(0);
-  }
-
-  20%,
-  60% {
-    transform: rotate(-25deg);
-  }
-
-  40%,
-  80% {
-    transform: rotate(10deg);
-  }
-}
-
 ::selection {
   background: #f9e4ac;
   /* WebKit/Blink Browsers */
@@ -86,25 +69,7 @@ img[src*='#gh-dark-mode-only'] {
   display: none;
 }
 
-.github-corner {
-  border-bottom: 0;
-  position: fixed;
-  right: 0;
-  text-decoration: none;
-  top: 0;
-  z-index: 1;
-}
 
-.github-corner svg {
-  color: #fff;
-  fill: var(--primary-color);
-  height: 80px;
-  width: 80px;
-}
-
-.github-corner:hover .octo-arm {
-  animation: octocat 0.5s ease-in-out;
-}
 
 main {
   display: block;
@@ -157,7 +122,7 @@ main {
   text-decoration: underline;
 }
 
-.sidebar ul li.active > a {
+.sidebar ul li.active>a {
   border-right: 2px solid var(--primary-color);
   color: var(--primary-color);
   font-weight: 700;
@@ -202,12 +167,12 @@ body.sticky .sidebar-toggle {
   position: relative;
 }
 
-.markdown-section > * {
+.markdown-section>* {
   box-sizing: border-box;
   font-size: inherit;
 }
 
-.markdown-section > :first-child {
+.markdown-section> :first-child {
   margin-top: 0 !important;
 }
 
@@ -231,6 +196,7 @@ body.sticky .sidebar-toggle {
 }
 
 @media print {
+
   .github-corner,
   .sidebar,
   .sidebar-toggle {
@@ -239,6 +205,7 @@ body.sticky .sidebar-toggle {
 }
 
 @media screen and (max-width: 768px) {
+
   .github-corner,
   .sidebar {
     position: fixed;
@@ -391,7 +358,7 @@ body {
   -webkit-font-smoothing: initial;
 }
 
-.markdown-section pre > code {
+.markdown-section pre>code {
   border: 0;
   display: block;
   font-family: var(--code-font);
@@ -429,3 +396,43 @@ body {
 .token.comment {
   color: var(--gray7);
 }
+
+/* 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;
+  text-decoration: none;
+  top: 0;
+  z-index: 1;
+}
+
+.github-corner:hover svg .octo-arm {
+  opacity: 1;
+  animation: b 560ms ease-in-out;
+}
+
+.github-corner svg {
+  color: white;
+  fill: black;
+  height: 80px;
+  width: 80px;
+}
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
@@ -75,8 +75,8 @@
     />
 
     <!-- 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
@@ -91,16 +91,18 @@
     "browser-sync": "latest",
     "c8": "latest",
     "concurrently": "latest",
+    "cssnano": "latest",
+    "cssnano-preset-advanced": "latest",
     "finepack": "latest",
     "git-authors-cli": "latest",
     "gulp": "4",
-    "gulp-autoprefixer": "8",
     "gulp-concat": "latest",
-    "gulp-cssnano": "latest",
-    "gulp-strip-css-comments": "2",
+    "gulp-postcss": "latest",
     "gulp-uglify": "latest",
     "nano-staged": "latest",
     "npm-check-updates": "latest",
+    "postcss": "latest",
+    "postcss-focus": "latest",
     "simple-git-hooks": "latest",
     "standard": "latest"
   },

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