HGHOST-191: Migrate Stylesheets from SCSS to LESS

Makefile

@@ -1,6 +1,6 @@
 THEME_PATH := $(CURDIR)
-DEV_GHOST_PATH := '/Users/toddbirchard/projects/ghostlocal'
-DEV_GHOST_THEME_PATH := '/Users/toddbirchard/projects/ghostlocal/content/themes/hackersandslackers-theme'
+DEV_GHOST_PATH := '/Users/toddbirchard/Projects/ghostlocal'
+DEV_GHOST_THEME_PATH := '/Users/toddbirchard/Projects/ghostlocal/content/themes/hackersandslackers'
 
 define HELP
 Manage development of Hackersandslackers Ghost theme.
@@ -31,7 +31,7 @@ build:
 dev:
 	if [ -d $(DEV_GHOST_THEME_PATH) ]; then rm -rf $(DEV_GHOST_THEME_PATH); fi
 	cp -R $(THEME_PATH) $(DEV_GHOST_THEME_PATH) && \
-	cd $(DEV_GHOST_THEME_PATH) && npm run dev && \
+	cd $(DEV_GHOST_THEME_PATH) && yarn run dev && \
 	cd $(DEV_GHOST_PATH) && ghost restart --verbose && cd $(THEME_PATH)
 
 
@@ -51,7 +51,8 @@ clean:
 .PHONY: update
 update:
 	npm install -g npm@latest && \
-	npm install -g npm-check-updates@latest && \
+	npm install -g yarn && \
 	npm install -g ghost-cli@latest && \
+	npm install -g npm-check-updates@latest && \
 	cd $(DEV_GHOST_PATH) && ghost update && \
 	cd $(DEV_GHOST_THEME_PATH) && ncu

assets/css/screen.css

@@ -969,7 +969,7 @@ iframe.instagram-media+script+ :not([id]) {
     margin: 20px auto;
     max-width: 100%;
 
-    @media(max-width: $mobile-breakpoint) {
+    @media(max-width: 600px) {
         padding: 0 30px;
     }
 }

babel.config.json

@@ -39,7 +39,7 @@
             "go",
             "hcl",
             "vim",
-            "makefile",
+            "makefile"
           ],
           "theme": "default",
           "css": false
@@ -49,8 +49,8 @@
         {
           "root": ["./src"],
           "alias": {
-            "Fonts": "./assets/fonts/",
-            "Styles": "./src/scss/"
+            "Fonts": "./src/css/fonts.css",
+            "Styles": "./src/less/"
           }
         }
       ]

default.hbs

@@ -12,13 +12,15 @@
     <link rel="preload" as="style" href="{{asset "built/global.css"}}">
     <link rel="preload" as="script" href="{{asset "built/main.js"}}">
     {{!-- Theme CSS --}}
+    <link rel="stylesheet" type="text/css" href="{{asset 'built/fonts.css'}}" />
     <link rel="stylesheet" type="text/css" href="{{asset 'built/global.css'}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset 'built//hamburgers.min.css'}}" />
     {{!-- Custom Theme JS --}}
     <script src="{{asset 'built/github-widget.js'}}"></script>
     <script src="https://kit.fontawesome.com/0dae50f8a6.js" crossorigin="anonymous"></script>
     {{!-- Analytics JS --}}
-    <script defer data-domain="hackersandslackers.com" src="https://plausible.io/js/script.outbound-links.pageview-props.tagged-events.js"></script>
-    <script>window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+    {{!-- <script defer data-domain="hackersandslackers.com" src="https://plausible.io/js/script.outbound-links.pageview-props.tagged-events.js"></script> 
+    <script>window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }</script> --}}
     {{!-- Page-specific JS --}}
     {{#is "post"}}
       <script src="{{asset 'built/post.js'}}"></script>

package.json

@@ -51,7 +51,6 @@
         "@tryghost/release-utils": "0.8.1",
         "babel-plugin-prismjs": "^2.1.0",
         "basiclightbox": "^5.0.4",
-        "delicious-hamburgers": "^1.2.3",
         "dotenv": "^16.4.5",
         "dotenv-webpack": "^8.1.0",
         "github-profile-card": "^3.1.0",
@@ -68,13 +67,13 @@
         "cssnano": "7.0.6",
         "font-config-webpack-plugin": "^2.0.3",
         "inquirer": "12.1.0",
+        "less": "^4.2.1",
+        "less-loader": "^12.2.0",
         "mini-css-extract-plugin": "^2.9.1",
         "postcss": "^8.4.47",
         "postcss-easy-import": "4.0.0",
         "postcss-loader": "^8.1.1",
         "pump": "3.0.2",
-        "sass": "^1.79.3",
-        "sass-loader": "^16.0.2",
         "style-loader": "^4.0.0",
         "terser-webpack-plugin": "^5.3.10",
         "webpack": "^5.95.0",

src/js/index.js

@@ -1,9 +1,10 @@
-import "../scss/global.scss";
-import { mainNavigationScroll, hamburgerMenu } from "./navigation.js";
+import "../less/global.less";
+import "../css/fonts.css"
+//import { mainNavigationScroll, hamburgerMenu } from "./navigation.js";
 // import { authorDisplayName } from "./postcard.js";
 
 window.addEventListener("load", function () {
-  mainNavigationScroll();
-  hamburgerMenu();
+  // mainNavigationScroll();
+  // hamburgerMenu();
   // authorDisplayName();
 });

src/js/navigation.js

@@ -1,4 +1,4 @@
-export function mainNavigationScroll() {
+/* export function mainNavigationScroll() {
   const slider = document.querySelector(".dragscroll");
   let isDown = false;
   let startX;
@@ -45,6 +45,7 @@ export function hamburgerMenu() {
     mobileMenuButton.classList.toggle("active");
   });
 
+
   mobileSeriesLink.addEventListener("click", function () {
     const mobileSeriesNav = document.querySelector(
       ".nav-series .mobile-nav-links-list"
@@ -60,4 +61,6 @@ export function hamburgerMenu() {
     mobileTagNav.classList.toggle("active");
     mobileTagsNavIcon.classList.toggle("flip-vertically");
   });
+
 }
+*/

src/js/page.js

@@ -1,7 +1,7 @@
-import "../scss/page.scss";
-import "../scss/series-all.scss";
-import "../scss/series-detail.scss";
-import "../scss/about.scss";
+import "../less/page.less";
+import "../less/series-all.less";
+import "../less/series-detail.less";
+import "../less/about.less";
 
 window.addEventListener("load", function () {
   fixGithubUrls();

src/js/post.js

@@ -1,4 +1,4 @@
-import "../scss/post.scss";
+import "../less/post.less";
 import Prism from "prismjs";
 import * as basicLightbox from "basiclightbox";