Add SCSS build system with automated CSS minification

Co-authored-by: DRSDavidSoft <[email protected]>

Author: Copilot

.github/workflows/ci.yml

@@ -17,6 +17,18 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v4
 
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+      
+    - name: Install Node dependencies
+      run: npm ci
+      
+    - name: Build CSS
+      run: npm run build:css
+      
     - name: Set up Ruby
       uses: ruby/setup-ruby@v1
       with:

.gitignore

@@ -16,6 +16,13 @@ vendor/
 .bundle/
 Gemfile.lock
 
+# Node.js
+node_modules/
+package-lock.json
+
+# Generated CSS
+css/
+
 # =========================
 # Operating System Files
 # =========================

README.md

@@ -2,3 +2,30 @@
 The cmder.net page.
 
 [![CI](https://github.com/cmderdev/cmderdev.github.io/actions/workflows/ci.yml/badge.svg)](https://github.com/cmderdev/cmderdev.github.io/actions/workflows/ci.yml)
+
+## Development
+
+### Building CSS
+
+This project uses SCSS for styling. The source files are in `_sass/` and the compiled CSS is generated in `css/`.
+
+To build the CSS:
+```bash
+npm install
+npm run build:css
+```
+
+To watch for changes and rebuild automatically:
+```bash
+npm run watch:css
+```
+
+### Building the Site
+
+The site uses Jekyll for static site generation:
+```bash
+bundle install
+bundle exec jekyll build
+```
+
+The built site will be in the `_site/` directory.

css/main.css _sass/main.scsscss/main.css renamed to _sass/main.scss

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic' type="text/css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/main.css" type="text/css">
+    <link rel="stylesheet" href="css/main.min.css" type="text/css">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

index.html

@@ -0,0 +1,17 @@
+{
+  "name": "cmderdev.github.io",
+  "version": "1.0.0",
+  "description": "The cmder.net page.",
+  "main": "index.js",
+  "scripts": {
+    "build:css": "sass _sass/main.scss css/main.min.css --style=compressed",
+    "watch:css": "sass _sass/main.scss css/main.min.css --watch --style=compressed",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "sass": "^1.94.0"
+  }
+}