updated content

CSS grid
CSS custom fonts
CSS variables

docs/.vitepress/cache/deps/_metadata.json

@@ -1,11 +1,17 @@
 {
-  "hash": "35964354",
-  "browserHash": "c708b366",
+  "hash": "61014706",
+  "browserHash": "2f8b4d93",
   "optimized": {
     "vue": {
-      "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "84ebdea4",
+      "fileHash": "e47bde2a",
+      "needsInterop": false
+    },
+    "vitepress > @vue/devtools-api": {
+      "src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js",
+      "file": "vitepress___@vue_devtools-api.js",
+      "fileHash": "7672acce",
       "needsInterop": false
     }
   },

docs/.vitepress/cache/deps/package.json

@@ -1 +1,3 @@
-{"type":"module"}
+{
+  "type": "module"
+}

docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js

@@ -0,0 +1,162 @@
+// node_modules/@vue/devtools-api/lib/esm/env.js
+function getDevtoolsGlobalHook() {
+  return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
+}
+function getTarget() {
+  return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
+}
+var isProxyAvailable = typeof Proxy === "function";
+
+// node_modules/@vue/devtools-api/lib/esm/const.js
+var HOOK_SETUP = "devtools-plugin:setup";
+var HOOK_PLUGIN_SETTINGS_SET = "plugin:settings:set";
+
+// node_modules/@vue/devtools-api/lib/esm/time.js
+var supported;
+var perf;
+function isPerformanceSupported() {
+  var _a;
+  if (supported !== void 0) {
+    return supported;
+  }
+  if (typeof window !== "undefined" && window.performance) {
+    supported = true;
+    perf = window.performance;
+  } else if (typeof global !== "undefined" && ((_a = global.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
+    supported = true;
+    perf = global.perf_hooks.performance;
+  } else {
+    supported = false;
+  }
+  return supported;
+}
+function now() {
+  return isPerformanceSupported() ? perf.now() : Date.now();
+}
+
+// node_modules/@vue/devtools-api/lib/esm/proxy.js
+var ApiProxy = class {
+  constructor(plugin, hook) {
+    this.target = null;
+    this.targetQueue = [];
+    this.onQueue = [];
+    this.plugin = plugin;
+    this.hook = hook;
+    const defaultSettings = {};
+    if (plugin.settings) {
+      for (const id in plugin.settings) {
+        const item = plugin.settings[id];
+        defaultSettings[id] = item.defaultValue;
+      }
+    }
+    const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
+    let currentSettings = Object.assign({}, defaultSettings);
+    try {
+      const raw = localStorage.getItem(localSettingsSaveId);
+      const data = JSON.parse(raw);
+      Object.assign(currentSettings, data);
+    } catch (e) {
+    }
+    this.fallbacks = {
+      getSettings() {
+        return currentSettings;
+      },
+      setSettings(value) {
+        try {
+          localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
+        } catch (e) {
+        }
+        currentSettings = value;
+      },
+      now() {
+        return now();
+      }
+    };
+    if (hook) {
+      hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
+        if (pluginId === this.plugin.id) {
+          this.fallbacks.setSettings(value);
+        }
+      });
+    }
+    this.proxiedOn = new Proxy({}, {
+      get: (_target, prop) => {
+        if (this.target) {
+          return this.target.on[prop];
+        } else {
+          return (...args) => {
+            this.onQueue.push({
+              method: prop,
+              args
+            });
+          };
+        }
+      }
+    });
+    this.proxiedTarget = new Proxy({}, {
+      get: (_target, prop) => {
+        if (this.target) {
+          return this.target[prop];
+        } else if (prop === "on") {
+          return this.proxiedOn;
+        } else if (Object.keys(this.fallbacks).includes(prop)) {
+          return (...args) => {
+            this.targetQueue.push({
+              method: prop,
+              args,
+              resolve: () => {
+              }
+            });
+            return this.fallbacks[prop](...args);
+          };
+        } else {
+          return (...args) => {
+            return new Promise((resolve) => {
+              this.targetQueue.push({
+                method: prop,
+                args,
+                resolve
+              });
+            });
+          };
+        }
+      }
+    });
+  }
+  async setRealTarget(target) {
+    this.target = target;
+    for (const item of this.onQueue) {
+      this.target.on[item.method](...item.args);
+    }
+    for (const item of this.targetQueue) {
+      item.resolve(await this.target[item.method](...item.args));
+    }
+  }
+};
+
+// node_modules/@vue/devtools-api/lib/esm/index.js
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+  const descriptor = pluginDescriptor;
+  const target = getTarget();
+  const hook = getDevtoolsGlobalHook();
+  const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
+  if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
+    hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
+  } else {
+    const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
+    const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
+    list.push({
+      pluginDescriptor: descriptor,
+      setupFn,
+      proxy
+    });
+    if (proxy)
+      setupFn(proxy.proxiedTarget);
+  }
+}
+export {
+  isPerformanceSupported,
+  now,
+  setupDevtoolsPlugin
+};
+//# sourceMappingURL=vitepress___@vue_devtools-api.js.map

docs/.vitepress/config.js

@@ -91,6 +91,7 @@ export default {
 						{ text: "Introduction débutant", link: "/dev/01-debutant/" },
 						{ text: "HTML débutant", link: "/dev/01-debutant/html" },
 						{ text: "CSS débutant", link: "/dev/01-debutant/css" },
+						{ text: "Typographie", link: "/dev/01-debutant/typographie" },
 					],
 				},
 				{
@@ -102,6 +103,7 @@ export default {
 							link: "/dev/02-intermediaire/",
 						},
 						// { text: "HTML intermédiaire", link: "/dev/02-intermediaire/html" },
+						{ text: "CSS", link: "/dev/02-intermediaire/css" },
 						{ text: "JavaScript", link: "/dev/02-intermediaire/javascript" },
 						{ text: "Git", link: "/dev/02-intermediaire/git" },
 						{ text: "Node.js", link: "/dev/02-intermediaire/nodejs" },

docs/.vitepress/theme/components/CustomBlockquote.vue

@@ -1,13 +0,0 @@
-<template>
-	<blockquote>
-		<slot>YELLO</slot>
-	</blockquote>
-</template>
-
-<script>
-export default {
-	name: "CustomBlockquote"
-};
-</script>
-
-<style scoped></style>

docs/.vitepress/theme/custom.css

@@ -3,8 +3,10 @@
 	--color-primary-light: hsl(11, 100%, 31%);
 	--color-primary-dark: hsl(11, 100%, 75%);
 	/* custom theme */
-	--vp-c-brand: var(--color-primary-light);
+	--vp-c-brand-1: var(--color-primary-light);
+	--vp-c-brand-2: var(--color-primary-light);
 
+	--vp-button-brand-bg: var(--color-primary-light);
 	--vp-button-brand-text: var(--vp-c-bg);
 	--vp-button-brand-hover-text: var(--color-primary-light);
 	--vp-button-brand-active-text: var(--color-primary-light);
@@ -14,31 +16,34 @@
 	--vp-button-brand-hover-border: var(--color-primary-light);
 	--vp-button-brand-active-border: var(--color-primary-light);
 
-	--vp-custom-block-tip-bg: var(--vp-c-bg);
+	/* --vp-custom-block-tip-bg: var(--vp-c-bg);
 	--vp-custom-block-danger-bg: var(--vp-c-bg);
 	--vp-custom-block-info-bg: var(--vp-c-bg);
 	--vp-custom-block-warning-bg: var(--vp-c-bg);
 	--vp-custom-block-tip-text: hsl(161, 96%, 20%);
 	--vp-custom-block-warning-text: hsl(26, 95%, 29%);
-	--vp-custom-block-danger-text: hsl(350, 75%, 38%);
+	--vp-custom-block-danger-text: hsl(350, 75%, 38%); */
 
 	--vp-code-font-size: 0.9375rem;
 }
 .dark {
-	--vp-c-brand: var(--color-primary-dark);
+	--vp-c-brand-1: var(--color-primary-dark);
+	--vp-c-brand-2: var(--color-primary-dark);
+
+	--vp-button-brand-bg: var(--color-primary-dark);
 	--vp-button-brand-hover-text: var(--vp-c-dark);
 	--vp-button-brand-active-text: var(--vp-c-dark);
 	--vp-button-brand-border: var(--color-primary-dark);
 	--vp-button-brand-hover-border: var(--color-primary-dark);
 	--vp-button-brand-active-border: var(--color-primary-dark);
 
-	--vp-custom-block-tip-bg: var(--vp-c-bg);
+	/* --vp-custom-block-tip-bg: var(--vp-c-bg);
 	--vp-custom-block-danger-bg: var(--vp-c-bg);
 	--vp-custom-block-info-bg: var(--vp-c-bg);
 	--vp-custom-block-warning-bg: var(--vp-c-bg);
 	--vp-custom-block-tip-text: hsl(161, 78%, 43%);
 	--vp-custom-block-warning-text: hsl(32, 95%, 44%);
-	--vp-custom-block-danger-text: hsl(0, 100%, 76%);
+	--vp-custom-block-danger-text: hsl(0, 100%, 76%); */
 }
 
 :where(details summary) {
@@ -46,7 +51,7 @@
 }
 
 a:hover {
-	text-decoration: underline;
+	text-decoration: none;
 }
 
 .prev-next a:hover {

docs/.vitepress/theme/index.js

@@ -1,21 +1,6 @@
 import DefaultTheme from "vitepress/theme";
-import PageLayout from "./layouts/PageLayout.vue";
 import "./custom.css";
 
-const modules = import.meta.globEager("./components/**/*.vue");
-const components = [];
-
-for (const path in modules) {
-	components.push(modules[path].default);
-}
-
 export default {
 	...DefaultTheme,
-	// Layout: PageLayout,
-	enhanceApp({ app }) {
-		// import all components globally
-		components.forEach(comp => {
-			app.component(comp.name, comp);
-		});
-	}
 };