From 40eae4a8a5f59f63baa4d41b6e68c49f5c9aa3f4 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Wed, 28 Apr 2021 12:22:44 +0200
Subject: [PATCH] Move global styles to layout

---
 package-lock.json                             | 367 ++++++++++++++++++
 package.json                                  |   1 +
 src/app.html                                  |   2 +-
 src/components/Nav.svelte                     | 113 +++---
 src/routes/$layout.svelte                     |   5 +-
 .../styles/global.module.less                 |  19 +-
 src/styles/variables.module.less              |  14 +
 svelte.config.cjs                             |   1 +
 8 files changed, 456 insertions(+), 66 deletions(-)
 rename static/global.css => src/styles/global.module.less (90%)
 create mode 100644 src/styles/variables.module.less

diff --git a/package-lock.json b/package-lock.json
index 8abbebb..8dbf6cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "eslint": "^7.22.0",
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-svelte3": "^3.1.0",
+        "less": "^4.1.1",
         "prettier": "~2.2.1",
         "prettier-plugin-svelte": "^2.2.0",
         "svelte": "^3.37.0",
@@ -1139,6 +1140,15 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
+      "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
+      "dev": true,
+      "dependencies": {
+        "is-what": "^3.12.0"
+      }
+    },
     "node_modules/date-fns": {
       "version": "2.21.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.1.tgz",
@@ -1319,6 +1329,19 @@
       "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
       "dev": true
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -1952,6 +1975,13 @@
         "delegate": "^3.1.2"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1993,6 +2023,19 @@
         "readable-stream": "^3.1.1"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -2002,6 +2045,19 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.2.tgz",
@@ -2088,6 +2144,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2155,6 +2217,55 @@
         "node": ">=6"
       }
     },
+    "node_modules/less": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
+      "integrity": "sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==",
+      "dev": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^2.5.2",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^2.5.2",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/less/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2270,6 +2381,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/marked": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
@@ -2303,6 +2428,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -2365,6 +2503,34 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "node_modules/needle": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.6.0.tgz",
+      "integrity": "sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/node-releases": {
       "version": "1.1.71",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
@@ -2420,6 +2586,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -2447,6 +2622,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.2.12",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.12.tgz",
@@ -2525,6 +2710,13 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -2722,6 +2914,13 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -2733,6 +2932,16 @@
       "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
       "optional": true
     },
+    "node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4147,6 +4356,15 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "copy-anything": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
+      "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.12.0"
+      }
+    },
     "date-fns": {
       "version": "2.21.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.1.tgz",
@@ -4289,6 +4507,16 @@
       "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
       "dev": true
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -4769,6 +4997,13 @@
         "delegate": "^3.1.2"
       }
     },
+    "graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true,
+      "optional": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -4804,12 +5039,29 @@
         "readable-stream": "^3.1.1"
       }
     },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "import-fresh": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.2.tgz",
@@ -4878,6 +5130,12 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4930,6 +5188,39 @@
         "minimist": "^1.2.5"
       }
     },
+    "less": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
+      "integrity": "sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^2.5.2",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5039,6 +5330,17 @@
         "yallist": "^4.0.0"
       }
     },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      }
+    },
     "marked": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
@@ -5060,6 +5362,13 @@
         "picomatch": "^2.2.3"
       }
     },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true
+    },
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -5107,6 +5416,30 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "needle": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.6.0.tgz",
+      "integrity": "sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "node-releases": {
       "version": "1.1.71",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
@@ -5153,6 +5486,12 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -5171,6 +5510,13 @@
       "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
       "dev": true
     },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true
+    },
     "postcss": {
       "version": "8.2.12",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.12.tgz",
@@ -5223,6 +5569,13 @@
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "dev": true
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "dev": true,
+      "optional": true
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -5344,6 +5697,13 @@
       "optional": true,
       "peer": true
     },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -5355,6 +5715,13 @@
       "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
       "optional": true
     },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "optional": true
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/package.json b/package.json
index f954590..92a06f8 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^3.1.0",
+    "less": "^4.1.1",
     "prettier": "~2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "svelte": "^3.37.0",
diff --git a/src/app.html b/src/app.html
index 21c07df..a87e74c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -11,7 +11,7 @@
     <link rel="alternate" type="application/rss+xml" title="RSS feed for latest posts" href="https://michalvanko.dev/feed.xml" />
     <link rel="alternate" title="JSON feed for latest posts" type="application/json" href="https://michalvanko.dev/feed.json" />
 
-    <link rel="stylesheet" href="/global.css" />
+    <!-- <link rel="stylesheet" href="/global.css" /> -->
     <link rel="stylesheet" href="/print.css" media="print" />
     <link rel="stylesheet" href="/fonts.css" />
     <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i&display=swap&subset=latin-ext" rel="stylesheet">  -->
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 453bfbb..434706b 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -4,13 +4,76 @@
   export let segment
 </script>
 
+<nav class="navigation-theme">
+  <section class="nav-main">
+    <ul>
+      <li>
+        <a class={classNames({ selected: segment === '/' })} href="/">
+          Introduction
+        </a>
+      </li>
+      <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+		     the blog data when we hover over the link or tap it on a touchscreen -->
+      <li>
+        <a
+          rel="prefetch"
+          class={classNames({ selected: segment.startsWith('/blog') })}
+          href="/blog"
+        >
+          Blog
+        </a>
+      </li>
+      <li>
+        <a
+          class={classNames({ selected: segment.startsWith('/portfolio') })}
+          href="/portfolio"
+        >
+          Portfolio
+        </a>
+      </li>
+    </ul>
+
+    <aside class="logo-section">
+      <a class="logo" href=".">
+        <img src="/images/m-logo.png" alt="m logo" />
+      </a>
+    </aside>
+  </section>
+
+  {#if segment === 'portfolio'}
+    <!-- Move to portfolio layout -->
+    <section class="page-navigation">
+      <a href="portfolio#personal-information">About</a>
+      <a href="portfolio#skills">Skills</a>
+      <a href="portfolio#work-history">Work History</a>
+      <a href="portfolio#projects">Projects</a>
+      <a href="portfolio#education">Education</a>
+    </section>
+  {/if}
+</nav>
+
 <style>
+  @import '../styles/variables.module.less';
+
   nav {
     position: sticky;
     top: -2.75em;
     z-index: 1;
-    padding: 0.5em;
-    box-shadow: 0px 1px 3px #959595;
+    padding: 0.5em 0.5em 2em;
+    background: linear-gradient(
+      177.43deg,
+      @pinky -6.98%,
+      rgba(@pinky, 0) 54.88%
+    );
+    color: @menu-color;
+  }
+
+  a {
+    color: @menu-link-color;
+
+    &:hover {
+      color: @menu-link-hover-color;
+    }
   }
 
   nav a {
@@ -55,49 +118,3 @@
     margin: 0.3em auto 0;
   }
 </style>
-
-<nav class="navigation-theme">
-  <section class="nav-main">
-    <ul>
-      <li>
-        <a class={classNames({ selected: segment === '/' })} href="/">
-          Introduction
-        </a>
-      </li>
-      <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-		     the blog data when we hover over the link or tap it on a touchscreen -->
-      <li>
-        <a
-          rel="prefetch"
-          class={classNames({ selected: segment.startsWith('/blog') })}
-          href="/blog">
-          Blog
-        </a>
-      </li>
-      <li>
-        <a
-          class={classNames({ selected: segment.startsWith('/portfolio') })}
-          href="/portfolio">
-          Portfolio
-        </a>
-      </li>
-    </ul>
-
-    <aside class="logo-section">
-      <a class="logo" href=".">
-        <img src="/images/m-logo.png" alt="m logo" />
-      </a>
-    </aside>
-  </section>
-
-  {#if segment === 'portfolio'}
-  <!-- Move to portfolio layout -->
-    <section class="page-navigation">
-      <a href="portfolio#personal-information">About</a>
-      <a href="portfolio#skills">Skills</a>
-      <a href="portfolio#work-history">Work History</a>
-      <a href="portfolio#projects">Projects</a>
-      <a href="portfolio#education">Education</a>
-    </section>
-  {/if}
-</nav>
diff --git a/src/routes/$layout.svelte b/src/routes/$layout.svelte
index d5c8f25..9a0f815 100644
--- a/src/routes/$layout.svelte
+++ b/src/routes/$layout.svelte
@@ -32,11 +32,12 @@
   <Footer {latestPosts} />
 </div>
 
-<style>
+<style global>
+  @import '../styles/global.module.less';
+
   .app-content {
     display: grid;
     grid-template-rows: auto 1fr auto;
-    background: #f2f6f6;
     min-height: 100vh;
   }
 
diff --git a/static/global.css b/src/styles/global.module.less
similarity index 90%
rename from static/global.css
rename to src/styles/global.module.less
index 6077ce6..529604e 100644
--- a/static/global.css
+++ b/src/styles/global.module.less
@@ -1,3 +1,5 @@
+@import './variables.module.less';
+
 html {
   scroll-behavior: smooth;
 }
@@ -8,8 +10,8 @@ body {
     Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-size: 16px;
   line-height: 1.65;
-  color: #42436a;
-  background: #f2f6f6;
+  color: @article-text-color;
+  background: @bg-color;
   min-height: 1vh;
 }
 
@@ -118,19 +120,6 @@ p {
   background: #0dd0d0;
 }
 
-.navigation-theme {
-  background: #2d3935;
-  color: #eae9be;
-}
-
-.navigation-theme a {
-  color: #eae9be;
-}
-
-.navigation-theme a:hover {
-  color: #faf9d6;
-}
-
 @media only screen and (min-width: 400px) {
   body {
     font-size: 18px;
diff --git a/src/styles/variables.module.less b/src/styles/variables.module.less
new file mode 100644
index 0000000..e68c33d
--- /dev/null
+++ b/src/styles/variables.module.less
@@ -0,0 +1,14 @@
+@tearkiss: #42a6f0;
+@pinky: #fea6eb;
+@light-cyan: #d8f6ff;
+@midnight-blue: #171664;
+
+@article-text-color: @midnight-blue;
+@menu-color: @midnight-blue;
+
+@menu-link-color: @midnight-blue;
+@menu-link-hover-color: lighten(@midnight-blue, 30%);
+
+@footer-visited-link-color: darken(@pinky, 70%);
+
+@bg-color: lighten(@light-cyan, 5%, relative);
diff --git a/svelte.config.cjs b/svelte.config.cjs
index a6071cf..e6362a7 100644
--- a/svelte.config.cjs
+++ b/svelte.config.cjs
@@ -13,6 +13,7 @@ module.exports = {
     sourceMap: dev,
     defaults: {
       script: 'typescript',
+      style: 'less',
     },
   }),
 }