Initial commit

Will it deploy one day ?
2024-02-20 08:59:37 +01:00 · 2024-02-20 08:59:37 +01:00 · 0ba3f3c7c5
commit 0ba3f3c7c5
parent c1a9cccf84
401 changed files with 39221 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,70 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
+
+# Firebase cache
+.firebase/
+public/
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+node_modules
+resources/_gen/assets/scss/scss/main.scss_3f90599f3717b4a4920df16fdcadce3d.content
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,3 @@
+[submodule "themes/liftoff"]
+	path = themes/liftoff
+	url = https://github.com/wjh18/hugo-liftoff.git
--- a/.hugo_build.lock
+++ b/.hugo_build.lock
--- a/README.md
+++ b/README.md
@ -1,2 +1,39 @@
-# Website
+## Site de la Meridian Corp

+Ce site est à destination des followers de la Méridian Corp.
+
+### Template based
+Le site est créé avec un minimum de modifications sur un thème et peut être réutilisé pour les sites personnels des collaborateurs de la Meridian Corp.
+
+### Hugo
+Créer avec Hugo, c'est donc uniquement le dossier public qui contient le site, le reste des fichiers servent à la génération de ce dossier "public".
+
+### Usage
+Facile d'éditer le contenu du site grâce a Prose, l'éditeur Markdown simple à mettre en place et à utiliser.\
+Il suffit de se rendre sur la page voulue (dans le dossier **content**) et de modifier le markdown (voir "[comment écrire en markdown ?](https://docs.roadiz.io/fr/latest/user/write-in-markdown/index.html)") pour que cela corresponde a ce que l'on veut.\
+On peut même ajouter des images dans les dossiers et, selon les configuration du site, elles s'afficheront toutes seules ou bien vous pourrez les ajouter où vous voulez dans le texte de la page ([inserer une image dans markdown](https://code-garage.fr/blog/comment-ajouter-une-image-dans-un-fichier-mardown/))\
+Il est également possible d'éditer les config dans /config, ou bien d'ajouter une page complète au site via le dossier /static\
+
+Dans tout les cas, il suffit de rentrer du texte, de sauvegarder la page et l'automatisme fera le reste pour déployer le site avec les modifications (prends toujours quelques dizaines de secondes)\
+
+La disposition des données sur le site est gérée par le dossier /layout qui n'est pas accessible depuis Prose.io, les demandes de modifications de templates doivent être soumises a l'adresse MeridianCorpTV@gmail.com
+### Organisation du dossier :
+
+/archetype : ??\
+/assets : JS / CSS\
+/config : .toml\
+/content : .md, contenus qui permettent de créer les pages\
+/data : ??\
+/layouts : templates html\
+/resources : scss et autres fichiers générés\
+/static : fichiers accessibles sur tout le site ou pages seules\
+/theme : ne pas toucher, modèle du theme avant modifications (Liftoff -> https://github.com/wjh18/hugo-liftoff/wiki)\
+/public : Site internet static
+
+
+_prose.yml = config backend (Prose.io)
+
+
+### Commandes
+> (hugo) -and (firebase deploy)
+> npx tinacms dev -c "hugo server"
--- a/about/index.md
+++ b/about/index.md
@ -0,0 +1,20 @@
+---
+title: Howdy wonderer !
+seo_title: About
+slug: about
+type: about
+description: Who are thoses freaks ? Let's find out...
+---
+
+
+Meridian Corp is a content creator community made from gamers and friends
+
+Everyone is free to join to reach new highs together
+
+We are recruiting guild members, head-shotters, tournament fighters and much more, all that find a fit in our space and want to stay around
+
+We are also a few content creators making animations, hosting servers for games and providing advice for getting gud
+
+Come join us and find together how to create events that is made by and for us
+
+The team will always be on the watch for any upcoming thing on the server and can be contacted anytime :
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+
--- a/assets/Meridian_Logo_2bis.png
+++ b/assets/Meridian_Logo_2bis.png
--- a/assets/avatar.png
+++ b/assets/avatar.png
--- a/assets/custom.css
+++ b/assets/custom.css
@ -0,0 +1,158 @@
+/* Add custom CSS */
+
+#js-navbar .logo {
+    font-size: xx-large;
+}
+
+/* #js-navbar .logo-bar{
+    width: 100%;
+    height: 1px;
+    border-bottom: 3px solid var(--color-primary);
+} */
+
+.single-feature-img img {
+    margin: auto;
+}
+
+.slider_right:hover {
+    cursor: pointer;
+    pointer-events: none;
+}
+
+.slider_left:hover {
+    cursor: pointer;
+    pointer-events: none;
+}
+
+.carousel {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    width: 100%;
+    margin: auto;
+}
+
+.caroussel-img {
+    height: 15rem;
+    margin: 0 10px;
+    border-radius: 20px;
+    transition: .3s all ease-in-out;
+}
+
+.caroussel-img:hover {
+    filter: brightness(150%);
+    border-radius: 4px;
+}
+
+.caroussel-img:focus {
+    scale: 150%;
+}
+
+.creator-list {
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    height: 100%;
+}
+
+.creator-entry {
+    width: 10em;
+    height: 16em;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.creator-entry-img img {
+    border-radius: 50%;
+    margin: 10px;
+    width: 10em;
+    height: 10em;
+    object-fit: cover;
+}
+
+.creator-single-img {
+    display: flex;
+}
+
+.creator-single-img img {
+    border-radius: 50%;
+    margin: auto;
+    width: 20em;
+    height: 20em;
+    object-fit: cover;
+}
+
+.creator-list-summary {
+    font-size: small;
+}
+
+.creator-entry-title {
+    margin: 5px auto;
+    text-align: center;
+}
+
+.creator-projects {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+a {
+    position: relative;
+}
+
+a:hover {
+
+    text-decoration: none;
+}
+
+a:not(.menu-link):not(.btn-primary):not(.btn-secondary)[class]::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    border-radius: 1px;
+    background-color: var(--color-primary);
+    bottom: 0;
+    left: 0;
+    transform-origin: right;
+    transform: scaleX(0);
+    transition: transform .3s ease-in-out;
+}
+
+a:not(.menu-link):not(.btn-primary):not(.btn-secondary)[class]:hover::before {
+    transform-origin: left;
+    transform: scaleX(1);
+}
+
+.discordLink {
+    display: flex;
+    justify-content: center;
+    margin: auto;
+}
+
+
+.creator-projects .project-entry {
+    max-width: 45%;
+}
+
+.post-entry {
+    display: flex;
+    flex-direction: row;
+}
+
+.post-entry img {
+    height: 100px;
+    width: 100px;
+    margin: 5px;
+    margin: 0px 7px;
+    border-radius: 10px;
+}
+
+.markdown p img{
+    display: flex;
+    margin: auto;
+}
--- a/assets/custom.js
+++ b/assets/custom.js
@ -0,0 +1,17 @@
+// Add custom JS
+
+// Trouble with className not found
+// So i'm going to comment that until a solution is find
+
+// const slider_left = document.getElementsByClassName("slider_left")[0];
+// const slider_right = document.getElementsByClassName("slider_right")[0];
+// const carousel = document.getElementsByClassName("carousel")[0];
+
+// slider_left.addEventListener("click", function (e) {
+//   console.log(e.target);
+//   carousel.style.overflow = "-200px";
+// });
+
+// slider_right.addEventListener("click", function (e) {
+//   console.log(e.target);
+// });
--- a/assets/images/default.png
+++ b/assets/images/default.png
--- a/assets/images/join-discord.png
+++ b/assets/images/join-discord.png
--- a/assets/images/readme/content.png
+++ b/assets/images/readme/content.png
--- a/assets/images/readme/new_file.png
+++ b/assets/images/readme/new_file.png
--- a/assets/js/app.js
+++ b/assets/js/app.js
@ -0,0 +1,3 @@
+import { switcher, clipboard, toggleToc } from './components/components';
+import { header } from './layouts/header';
+import { home } from './pages/home';
--- a/assets/js/components/clipboard.js
+++ b/assets/js/components/clipboard.js
@ -0,0 +1,44 @@
+// Adapted from the following tutorials:
+// https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/
+// https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/
+// https://logfetch.com/hugo-add-copy-to-clipboard-button/
+
+const addCopyButtons = (clipboard) => {
+  // 1. Look for pre > code elements in the DOM
+  document.querySelectorAll('.highlight > pre > code').forEach((codeBlock) => {
+    // 2. Create a button that will trigger a copy operation
+    const button = document.createElement('button');
+    const svgCopy = '<svg role="img" aria-hidden="true" aria-labelledby="clipboardCopy" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><title id="clipboardCopy">Copy the code snippet contents</title><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
+    const svgCheck = '<svg role="img" aria-hidden="true" aria-labelledby="clipboardCheckmark" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><title id="clipboardCheckmark">Code snippet contents copied</title><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
+    button.className = 'clipboard-button';
+    button.type = 'button';
+    button.innerHTML = svgCopy;
+    button.addEventListener('click', () => {
+      let textToCopy = '';
+      let codeBlockChildren = Array.from(codeBlock.children)
+      codeBlockChildren.forEach(function(span) {
+        // lastChild is required to avoid copying line numbers
+        textToCopy += span.lastChild.innerText;
+      });
+      clipboard.writeText(textToCopy).then(
+        () => {
+          button.blur();
+          button.innerHTML = svgCheck;
+          setTimeout(() => (button.innerHTML = svgCopy), 2000);
+        },
+        (error) => (button.innerHTML = 'Error')
+      );
+    });
+    // 3. Append the button directly before the pre tag
+    const pre = codeBlock.parentNode;
+    pre.parentNode.insertBefore(button, pre);
+  });
+};
+
+const clipboard = (() => {
+  if (navigator && navigator.clipboard) {
+    addCopyButtons(navigator.clipboard);
+  }
+})();
+
+export { clipboard };
--- a/assets/js/components/components.js
+++ b/assets/js/components/components.js
@ -0,0 +1,3 @@
+export { switcher } from './switchTheme';
+export { clipboard } from './clipboard';
+export { toggleToc } from './toc';
--- a/assets/js/components/switchTheme.js
+++ b/assets/js/components/switchTheme.js
@ -0,0 +1,46 @@
+// Adapted from https://github.com/CodyHouse/dark-light-mode-switch
+
+function switchTheme() {
+  let themeSwitch = document.getElementById('themeSwitch');
+  if (themeSwitch) {
+    initTheme();
+
+    themeSwitch.addEventListener('change', () => {
+      resetTheme();
+    });
+
+    function initTheme() {
+      let lsItem = localStorage.getItem('themeSwitch');
+      let darkThemeSelected = false;
+      if (lsItem !== null) {
+        darkThemeSelected = lsItem === 'dark';
+      } else {
+        darkThemeSelected = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      }
+
+      themeSwitch.checked = darkThemeSelected;
+      resetTheme();
+    }
+
+    function resetTheme() {
+      if (themeSwitch.checked) {
+        document.body.setAttribute('data-theme', 'dark');
+        localStorage.setItem('themeSwitch', 'dark');
+      } else {
+        document.body.removeAttribute('data-theme');
+        localStorage.setItem('themeSwitch', 'light');
+      }
+
+      // Reset Disqus to match new color scheme
+      if (typeof DISQUS !== "undefined") {
+          DISQUS.reset({ reload: true });
+      }
+    }
+  }
+}
+
+const switcher = (() => {
+  switchTheme();
+})();
+
+export { switcher };
--- a/assets/js/components/toc.js
+++ b/assets/js/components/toc.js
@ -0,0 +1,12 @@
+const toggleToc = (() => {
+  let tocToggle = document.getElementById('js-toc-toggle');
+  let tocContents = document.getElementById('js-toc-contents');
+
+  if (tocToggle) {
+    tocToggle.addEventListener('click', () => {
+      tocContents.classList.toggle('toc-contents--active');
+    });
+  }
+})();
+
+export { toggleToc };
--- a/assets/js/layouts/header.js
+++ b/assets/js/layouts/header.js
@ -0,0 +1,44 @@
+// Show or hide nav on click of menu burger
+function toggleNav() {
+  let mainMenu = document.getElementById('js-menu');
+  let navBarToggle = document.getElementById('js-navbar-toggle');
+
+  navBarToggle.addEventListener('click', () => {
+    mainMenu.classList.toggle('menu--active');
+    removeSubMenus();
+  });
+}
+
+// Show or hide menu items on mobile
+function toggleMobileMenu() {
+  let menuItems = document.querySelectorAll('.menu-item');
+
+  menuItems.forEach(function(item) {
+    item.addEventListener('click', () => {
+      let subMenu = item.querySelector('.sub-menu');
+      if (subMenu.classList.contains('sub-menu--active')) {
+        subMenu.classList.remove('sub-menu--active');
+      } else {
+        removeSubMenus();
+        subMenu.classList.add('sub-menu--active');
+      }
+    });
+  });
+}
+
+// Collapse submenus
+function removeSubMenus() {
+  let subMenus = document.querySelectorAll('.sub-menu');
+  subMenus.forEach(function(sub) {
+    if (sub.classList.contains('sub-menu--active')) {
+      sub.classList.remove('sub-menu--active');
+    }
+  });
+}
+
+const header = (() => {
+  toggleNav();
+  toggleMobileMenu();
+})();
+
+export { header };
--- a/assets/js/pages/home.js
+++ b/assets/js/pages/home.js
@ -0,0 +1,24 @@
+function filterPosts() {
+  let selectPosts = document.getElementById("select-posts");
+  let entries = document.querySelectorAll(".post-entry-filter");
+  if (selectPosts) {
+    selectPosts.addEventListener("change", () => {
+      entries.forEach(function (entry) {
+        if (
+          entry.classList.contains(`entry--${selectPosts.value}`) |
+          (selectPosts.value === "all-posts")
+        ) {
+          entry.style.display = "block";
+        } else {
+          entry.style.display = "none";
+        }
+      });
+    });
+  }
+}
+
+const home = (() => {
+  filterPosts();
+})();
+
+export { home };
--- a/assets/jsconfig.json
+++ b/assets/jsconfig.json
@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}
--- a/assets/scss/abstracts/_functions.scss
+++ b/assets/scss/abstracts/_functions.scss
@ -0,0 +1,30 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass functions.
+// -----------------------------------------------------------------------------
+
+/// Native `url(..)` function wrapper
+/// @param {String} $base - base URL for the asset
+/// @param {String} $type - asset type folder (e.g. `fonts/`)
+/// @param {String} $path - asset path
+/// @return {Url}
+@function asset($base, $type, $path) {
+  @return url($base + $type + $path);
+}
+
+/// Returns URL to an image based on its path
+/// @param {String} $path - image path
+/// @param {String} $base [$base-url] - base URL
+/// @return {Url}
+/// @require $base-url
+@function image($path, $base: $base-url) {
+  @return asset($base, 'images/', $path);
+}
+
+/// Returns URL to a font based on its path
+/// @param {String} $path - font path
+/// @param {String} $base [$base-url] - base URL
+/// @return {Url}
+/// @require $base-url
+@function font($path, $base: $base-url) {
+  @return asset($base, 'fonts/', $path);
+}
--- a/assets/scss/abstracts/_mixins.scss
+++ b/assets/scss/abstracts/_mixins.scss
@ -0,0 +1,61 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass mixins.
+// -----------------------------------------------------------------------------
+
+/// Event wrapper
+/// @author Harry Roberts
+/// @param {Bool} $self [false] - Whether or not to include current selector
+/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
+@mixin on-event($self: false) {
+  @if $self {
+    &,
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-within {
+      @content;
+    }
+  } @else {
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-within {
+      @content;
+    }
+  }
+}
+
+/// Make a context based selector a little more friendly
+/// @author Kitty Giraudel
+/// @param {String} $context
+@mixin when-inside($context) {
+  #{$context} & {
+    @content;
+  }
+}
+
+/// Mixin to manage responsive breakpoints
+/// @author Kitty Giraudel
+/// @param {String} $breakpoint - Breakpoint name
+/// @require $breakpoints
+@mixin respond-to($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+ 
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+@mixin font-size($step) {
+  font-size: var(--font-size-#{$step});
+  line-height: calc(8px + 2ex);
+}
+
--- a/assets/scss/abstracts/_variables.scss
+++ b/assets/scss/abstracts/_variables.scss
@ -0,0 +1,94 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass variables.
+// -----------------------------------------------------------------------------
+
+:root,
+[data-theme="default"] {
+  // --color-primary: rgb(18, 120, 175);
+  --color-primary: black;
+  --color-inline-code: hsl(0, 81%, 35%);
+
+  /* color contrasts */
+  --color-bg: rgb(248, 248, 248);
+  --color-contrast-lower: hsl(0, 0%, 95%);
+  --color-contrast-low: hsl(240, 1%, 83%);
+  --color-contrast-medium-low: hsl(240, 1%, 65%);
+  --color-contrast-medium: hsl(240, 1%, 48%);
+  --color-contrast-medium-high: hsl(240, 2%, 34%);
+  --color-contrast-high: hsl(240, 4%, 20%);
+  --color-contrast-higher: black;
+
+  --color-text: var(--color-contrast-high);
+
+  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
+  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
+  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
+  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
+  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
+}
+
+[data-theme] {
+  background-color: var(--color-bg);
+  color: var(--color-contrast-high);
+}
+
+[data-theme="dark"] {
+  // --color-primary: rgb(86, 184, 237);
+
+  --color-primary: white;
+  --color-inline-code: hsl(0, 81%, 70%);
+
+  /* color contrasts */
+  --color-bg: rgb(18, 18, 18);
+  --color-contrast-lower: hsl(240, 6%, 15%);
+  --color-contrast-low: hsl(252, 4%, 25%);
+  --color-contrast-medium-low: hsl(240, 2%, 34%);
+  --color-contrast-medium: hsl(240, 1%, 57%);
+  --color-contrast-medium-high: hsl(240, 1%, 65%);
+  --color-contrast-high: hsl(0, 0%, 89%);
+  --color-contrast-higher: white;
+
+  --color-text: var(--color-contrast-high);
+}
+
+// Fonts
+
+/// Regular font family
+/// @type List
+$text-font-stack: "Roboto", "Helvetica Neue Light", "Helvetica Neue",
+  "Helvetica", "Arial", sans-serif;
+
+/// Code (monospace) font family
+/// @type List
+$code-font-stack: "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
+  "Monaco", monospace;
+
+// Containers
+
+/// Container's maximum width
+/// @type Length
+$max-width: 1180px;
+
+// Responsiveness
+
+/// Breakpoints map
+/// @prop {String} keys - Keys are identifiers mapped to a given length
+/// @prop {Map} values - Values are actual breakpoints expressed in pixels
+$breakpoints: (
+  "x-small": 320px,
+  "small": 576px,
+  "medium": 768px,
+  "m-large": 900px,
+  "large": 1024px,
+  "x-large": 1200px,
+);
+
+// Assets
+
+/// Relative or absolute URL where all assets are served from
+/// @type String
+/// @example scss - When using a CDN
+///   $base-url: 'https://cdn.example.com/assets/';
+$base-url: "/assets/";
--- a/assets/scss/base/_base.scss
+++ b/assets/scss/base/_base.scss
@ -0,0 +1,182 @@
+// -----------------------------------------------------------------------------
+// This file contains very basic styles.
+// -----------------------------------------------------------------------------
+
+/**
+ * Set up a decent box model on the root element
+ */
+html {
+  box-sizing: border-box;
+}
+
+/**
+ * Make all elements from the DOM inherit from the parent box-sizing
+ * Since `*` has a specificity of 0, it does not override the `html` value
+ * making all elements inheriting from the root box-sizing value
+ * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+ */
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  /* Flex properties on body/main/footer are for floating footer
+  to bottom of page if main content doesn't fill viewport vertically */
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
+footer {
+  flex-shrink: 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+
+  @include on-event {
+    color: var(--color-text);
+    text-decoration: underline;
+  }
+}
+
+h1 {
+  @include font-size("xl");
+}
+
+h2 {
+  @include font-size("lg");
+}
+
+h3 {
+  @include font-size("md");
+}
+
+h4 {
+  @include font-size("base");
+}
+
+h5 {
+  @include font-size("sm");
+}
+
+h6 {
+  @include font-size("sm");
+}
+
+table {
+  border-collapse: collapse;
+  display: block;
+  overflow-x: auto;
+}
+
+td,
+th {
+  border: 1px solid var(--color-contrast-medium-low);
+  padding: 10px 20px;
+  font-size: 0.9rem;
+  line-height: 1.4rem;
+}
+
+th {
+  border: 1px solid var(--color-contrast-medium);
+  background-color: var(--color-contrast-medium-low);
+  color: var(--color-contrast-high);
+  font-size: 1rem;
+}
+
+td {
+  text-align: center;
+}
+
+tr:nth-child(even) td {
+  background-color: var(--color-contrast-lower);
+  color: var(--color-contrast-high);
+}
+
+tr:nth-child(odd) td {
+  background-color: var(--color-contrast-low);
+  color: var(--color-contrast-high);
+}
+
+blockquote {
+  background: var(--color-contrast-lower);
+  border-left: 10px solid var(--color-contrast-low);
+  margin: 1.5em 10px;
+  padding: 0.7em 10px;
+  quotes: "\201C""\201D";
+
+  p {
+    display: inline;
+  }
+
+  &::before {
+    color: var(--color-contrast-low);
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+  }
+}
+
+pre {
+  font-size: 1rem;
+  line-height: 1.6rem;
+  overflow-x: auto;
+}
+
+code {
+  overflow-x: scroll;
+}
+
+pre:not([style]) {
+  // If no highlighting is applied already
+  background-color: #272822;
+  color: #f8f8f2;
+  padding: 20px;
+}
+
+p > code,
+li > code {
+  background-color: var(--color-contrast-lower);
+  font-size: 1rem;
+  color: var(--color-inline-code);
+  padding: 2px 5px;
+  border-radius: 5px;
+}
+
+form {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 10px;
+
+  input,
+  textarea {
+    border: 1px solid var(--color-contrast-medium-low);
+    padding: 10px 12px;
+    font-size: 1rem;
+    background-color: var(--color-contrast-lower);
+    color: var(--color-contrast-high);
+
+    @include respond-to("small") {
+      padding: 15px 12px;
+      min-width: 250px;
+    }
+  }
+
+  button {
+    cursor: pointer;
+  }
+}
--- a/assets/scss/base/_fonts.scss
+++ b/assets/scss/base/_fonts.scss
@ -0,0 +1,115 @@
+// -----------------------------------------------------------------------------
+// This file contains all @font-face declarations, if any.
+// -----------------------------------------------------------------------------
+
+// -----------------------------------------------------------------------------
+// All fonts are not install localy, thus it not works in local development.
+// -----------------------------------------------------------------------------
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Thin"),
+    url("/fonts/Roboto/Roboto-Thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Thin Italic"),
+    url("/fonts/Roboto/Roboto-ThinItalic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Light"),
+    url("/fonts/Roboto/Roboto-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Light Italic"),
+    url("/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Regular"),
+    url("/fonts/Roboto/Roboto-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Italic"),
+    url("/fonts/Roboto/Roboto-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Medium"),
+    url("/fonts/Roboto/Roboto-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Italic"),
+    url("/fonts/Roboto/Roboto-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Bold"),
+    url("/fonts/Roboto/Roboto-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Bold Italic"),
+    url("/fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Black"),
+    url("/fonts/Roboto/Roboto-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto Black Italic"),
+    url("/fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
--- a/assets/scss/base/_helpers.scss
+++ b/assets/scss/base/_helpers.scss
@ -0,0 +1,69 @@
+// -----------------------------------------------------------------------------
+// This file contains CSS helper classes.
+// -----------------------------------------------------------------------------
+
+/**
+ * Clear inner floats
+ */
+ .clearfix::after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+/**
+ * Main content containers
+ * 1. Make the container full-width with a maximum width
+ * 2. Center it in the viewport
+ * 3. Leave some space on the edges, especially valuable on small screens
+ */
+.container {
+  max-width: $max-width; /* 1 */
+  margin-left: auto; /* 2 */
+  margin-right: auto; /* 2 */
+  padding-left: 16px; /* 3 */
+  padding-right: 16px; /* 3 */
+  width: 100%; /* 1 */
+
+  @include respond-to('small') {
+    padding-left: 20px; /* 3 */
+    padding-right: 20px; /* 3 */
+  }
+  
+  &--sm {
+    @extend .container;
+    max-width: 768px;
+  }
+}
+
+/**
+ * Hide text while making it readable for screen readers
+ * 1. Needed in WebKit-based browsers because of an implementation bug;
+ *    See: https://code.google.com/p/chromium/issues/detail?id=457146
+ */
+.hide-text {
+  overflow: hidden;
+  padding: 0; /* 1 */
+  text-indent: 101%;
+  white-space: nowrap;
+}
+
+/**
+ * Hide element while making it readable for screen readers
+ * Shamelessly borrowed from HTML5Boilerplate:
+ * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
+ */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.section {
+  padding: 50px 0;
+}
--- a/assets/scss/base/_typography.scss
+++ b/assets/scss/base/_typography.scss
@ -0,0 +1,31 @@
+// -----------------------------------------------------------------------------
+// This file contains typography styles.
+// -----------------------------------------------------------------------------
+
+/**
+ * Basic typography style for copy text
+ */
+ body {
+  color: var(--color-text);
+  font: normal 125% / 1.4 $text-font-stack;
+}
+
+.summary-text {
+  font-weight: 400;
+  @include font-size('base');
+  color: var(--color-contrast-medium-high);
+}
+
+.meta-text {
+  color: var(--color-contrast-medium);
+  @include font-size('sm');
+  font-weight: 400;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 15px;
+}
+
+.fallback-text {
+  color: var(--color-contrast-medium);
+  @include font-size('md');
+}
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@ -0,0 +1,42 @@
+.btn-group {
+  display: flex;
+  column-gap: 15px;
+  margin-top: 30px;
+}
+
+%btn {
+  border: 1px solid var(--color-primary);
+  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  border-radius: 4px;
+  transition: 0.3s ease-in-out all;
+  @include font-size("base");
+
+  @include respond-to("small") {
+    padding: 0.5rem 0.8rem;
+  }
+
+  @include on-event() {
+    text-decoration: none;
+  }
+}
+
+.btn-primary {
+  @extend %btn;
+  background-color: var(--color-primary);
+  color: var(--color-contrast-lower);
+
+  &:hover {
+    background: transparent;
+    color: var(--color-primary);
+  }
+}
+
+.btn-secondary {
+  @extend %btn;
+
+  &:hover {
+    background-color: var(--color-primary);
+    color: var(--color-contrast-lower);
+  }
+}
--- a/assets/scss/components/_clipboard.scss
+++ b/assets/scss/components/_clipboard.scss
@ -0,0 +1,44 @@
+// Adapted from the following tutorials:
+// https://logfetch.com/hugo-add-copy-to-clipboard-button/
+
+.clipboard-button {
+  position: absolute;
+  right: 0;
+  padding: 2px 7px 5px 7px;
+  margin: 5px;
+  color: #767676;
+  border-color: #767676;
+  background-color: #ededed;
+  border: 1px solid;
+  border-radius: 6px;
+  z-index: 1;
+  opacity: 0;
+  transition: 0.1s;
+}
+
+.clipboard-button > svg {
+  fill: #767676;
+}
+
+.clipboard-button:hover {
+  cursor: pointer;
+  border-color: #696969;
+  background-color: #e0e0e0;
+}
+
+.clipboard-button:hover > svg {
+  fill: #696969;
+}
+
+.clipboard-button:focus {
+  outline: 0;
+}
+
+.highlight {
+  position: relative;
+}
+
+.highlight:hover > .clipboard-button {
+  opacity: 1;
+  transition: 0.2s;
+}
--- a/assets/scss/components/_code-highlight.scss
+++ b/assets/scss/components/_code-highlight.scss
@ -0,0 +1,14 @@
+.code-language {
+  position: relative;
+  padding: 6px 15px;    
+  border-radius: 5px;
+  background-color: #272822;
+  color: #7f7f7f;
+  z-index: 1000;
+  top: 25px;
+  @include font-size('base');
+}
+
+.highlight > pre {
+  padding: 20px;
+}
--- a/assets/scss/components/_draft-label.scss
+++ b/assets/scss/components/_draft-label.scss
@ -0,0 +1,9 @@
+.draft::after {
+  content: 'Draft';
+  color: rgb(201, 8, 8);
+  border: 1px solid rgb(201, 8, 8);
+  border-radius: 5px;
+  @include font-size('sm');
+  padding: 2px 5px;
+  font-weight: 300;
+}
--- a/assets/scss/components/_markdown.scss
+++ b/assets/scss/components/_markdown.scss
@ -0,0 +1,24 @@
+.markdown {
+  @include font-size('base');
+
+  p > img, figure > img {      
+    max-width: 100%;
+    height: auto;
+  }
+
+  p img{    
+    display: flex;
+    margin: auto;
+  }
+
+  figure {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  figcaption {
+    @include font-size('sm');
+    color: var(--color-contrast-medium);
+    font-weight: 400;
+  }
+}
--- a/assets/scss/components/_newsletter.scss
+++ b/assets/scss/components/_newsletter.scss
@ -0,0 +1,16 @@
+.newsletter-header {
+  color: var(--color-contrast-high);
+  margin-bottom: 0;
+}
+
+.newsletter-desc {
+  color: var(--color-contrast-medium-high);
+  @include font-size('base');
+}
+
+#newsletter-form {
+
+  input {
+    border-right: none;
+  }
+}
--- a/assets/scss/components/_page-header.scss
+++ b/assets/scss/components/_page-header.scss
@ -0,0 +1,26 @@
+.page-header {
+  background-color: var(--color-contrast-lower);
+  padding: 30px;
+  margin: 0 0 50px 0;
+  border-radius: 20px;
+}
+
+.page-header--c {
+  @extend .page-header;
+  text-align: center;
+}
+
+.page-header-title {
+  margin: 0;
+  color: var(--color-contrast-high);
+  font-weight: 500;
+  @include font-size('lg');
+}
+
+.page-header-desc {
+  margin: 0;
+  margin-top: 15px;
+  color: var(--color-contrast-medium);
+  font-weight: 400;
+  @include font-size('base');
+}
--- a/assets/scss/components/_pagination.scss
+++ b/assets/scss/components/_pagination.scss
@ -0,0 +1,37 @@
+.pagination {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 15px 10px;
+  margin-top: 50px;
+  padding: 0;
+  @include font-size('base');
+}
+
+.page-link {
+  color: var(--color-contrast-medium-high);
+  padding: 8px 15px;
+  background-color: var(--color-contrast-lower);
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  @include on-event {
+    text-decoration: none;
+  }
+}
+
+.page-item {
+  
+  &.disabled > a {
+    color: var(--color-contrast-low);
+    cursor:unset;
+  }
+
+  &.active > a {
+    background-color: var(--color-primary);
+    color: var(--color-contrast-lower);
+  }
+}
--- a/assets/scss/components/_scroll.scss
+++ b/assets/scss/components/_scroll.scss
@ -0,0 +1,50 @@
+$animationSpeed: 40s;
+
+// Animation
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-250px * 7));
+  }
+}
+
+.slider {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+  overflow: hidden;
+
+  &::before,
+  &::after {
+    content: "";
+    height: 100px;
+    position: absolute;
+    width: 200px;
+    z-index: 2;
+  }
+
+  &::after {
+    right: 0;
+    top: 0;
+    transform: rotateZ(180deg);
+  }
+
+  &::before {
+    left: 0;
+    top: 0;
+  }
+
+  .slide-track {
+    animation: scroll $animationSpeed linear infinite;
+    display: flex;
+    width: calc(250px * 14);
+  }
+
+  .slide-track:hover {
+    animation-play-state: paused;
+  }
+}
--- a/assets/scss/components/_socials.scss
+++ b/assets/scss/components/_socials.scss
@ -0,0 +1,29 @@
+.social-links {
+  width: 100%;
+  opacity: 0.9;
+}
+
+.social-icons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 15px 40px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  &--share {
+    @extend .social-icons;
+    justify-content: flex-start;
+    gap: 10px 15px;
+    li {
+      border: 1px solid var(--color-contrast-medium-low);
+      border-radius: 100px;
+      padding: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
--- a/assets/scss/components/_switch-theme.scss
+++ b/assets/scss/components/_switch-theme.scss
@ -0,0 +1,107 @@
+:root {
+  /* style */
+  --switch-width: 48px;
+  --switch-height: 24px;
+  --switch-padding: 3px;
+  /* animation */
+  --switch-animation-duration: 0.2s;
+}
+
+.switch {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  width: 48px;
+  width: var(--switch-width);
+  height: 24px;
+  height: var(--switch-height);
+  border-radius: 50em;
+  padding: 3px 0;
+  padding: var(--switch-padding) 0;
+  cursor: pointer;
+
+  position: absolute;
+  top: 65px;
+  right: 20px;
+
+  @include respond-to("m-large") {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+}
+
+.switch-input,
+.switch-label {
+  position: absolute;
+  left: 0;
+  top: 0;
+  cursor: pointer;
+}
+
+.switch-input {
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+}
+
+.switch-input:checked + .switch-label {
+  background-color: hsl(228, 74%, 61%);
+  background-color: var(--color-primary);
+}
+
+.switch-input:checked + .switch-label + .switch-marker {
+  left: calc(100% - 29px);
+  left: calc(100% - var(--switch-height) + var(--switch-padding));
+}
+
+.switch-input:focus + .switch-label,
+.switch-input:active + .switch-label {
+  --color-shadow: hsla(228, 74%, 61%, 0.2);
+  box-shadow: undefined;
+  box-shadow: 0 0 0 3px var(--color-shadow);
+}
+
+.switch-input:focus + .switch-label,
+.switch-input:active + .switch-label {
+  box-shadow: 0 0 0 3px hsla(228, 74%, 61%, 0.2);
+  box-shadow: 0 0 0 3px var(--color-shadow);
+}
+
+.switch-label {
+  width: 100%;
+  height: 100%;
+  color: transparent;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: hsl(240, 1%, 83%);
+  background-color: var(--color-contrast-low);
+  border-radius: inherit;
+  z-index: 1;
+  transition: background 0.2s;
+  transition: background var(--switch-animation-duration);
+}
+
+.switch-marker {
+  position: relative;
+  background-color: hsl(0, 0%, 100%);
+  background-color: var(--color-contrast-high);
+  width: 20px;
+  width: calc(var(--switch-height) - var(--switch-padding) * 2);
+  height: 20px;
+  height: calc(var(--switch-height) - var(--switch-padding) * 2);
+  border-radius: 50%;
+  z-index: 2;
+  pointer-events: none;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  left: 3px;
+  left: var(--switch-padding);
+  transition: left 0.2s;
+  transition: left var(--switch-animation-duration);
+  will-change: left;
+}
--- a/assets/scss/components/_toc.scss
+++ b/assets/scss/components/_toc.scss
@ -0,0 +1,52 @@
+.toc {
+
+  @include respond-to('x-large') {
+    position: sticky;
+	  top: 2rem;
+	  align-self: start;
+    order: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 90vh;
+    overflow-y: scroll;
+  }
+}
+
+.toc-header, .toc-drop-icon {
+  @include font-size('sm');
+  font-weight: 500;
+  margin: 0;
+  text-align: center;
+}
+
+.toc-contents {
+  display: none;
+  @include font-size('sm');
+
+  &--active {      
+    display: block;
+  }
+
+  @include respond-to('x-large') {
+    display: block;
+
+    &--active {      
+      display: none;
+    }
+  }
+}
+
+#js-toc-toggle {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 10px;
+  padding: 10px 20px;
+  background-color: var(--color-contrast-lower);
+  border-radius: 20px;
+
+  &:hover {
+    cursor: pointer;
+    color: var(--color-primary);
+  }
+}
--- a/assets/scss/layout/_footer.scss
+++ b/assets/scss/layout/_footer.scss
@ -0,0 +1,18 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the footer of the site/application.
+// -----------------------------------------------------------------------------
+
+.footer {
+  background-color: var(--color-contrast-lower);
+}
+
+.footer-socials {
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.footer-copyright {
+  text-align: center;
+  @include font-size('base');
+  color: var(--color-contrast-medium-high);
+}
--- a/assets/scss/layout/_header.scss
+++ b/assets/scss/layout/_header.scss
@ -0,0 +1,147 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the header of the site.
+// -----------------------------------------------------------------------------
+
+.main-nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 0;
+  row-gap: 20px;
+
+  .nav-toggle {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+  }
+
+  @include respond-to("m-large") {
+    flex-direction: row; /* Horizontal nav on desktop */
+    align-items: center;
+    padding: 30px 0;
+
+    .nav-toggle {
+      display: none; /* Hide nav toggle on desktop */
+    }
+  }
+}
+
+.logo {
+  @include font-size("md");
+  font-weight: 700;
+  text-decoration: none;
+  width: fit-content;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.menu-link {
+  color: var(--color-text);
+
+  &:hover {
+    color: var(--color-contrast-lower);
+  }
+}
+
+.menu {
+  display: none;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid var(--color-contrast-low);
+  border-top: 1px solid var(--color-contrast-low);
+
+  &--active {
+    display: flex; /* Display mobile menu on click */
+  }
+
+  .menu-item {
+    display: block;
+    list-style-type: none;
+  }
+
+  .menu-item--align {
+    @extend .menu-item;
+    align-self: center;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+
+  .menu-link {
+    display: flex;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    padding: 1.4rem 1rem;
+    transition: 0.3s ease-in-out all;
+
+    &:hover {
+      background-color: var(--color-primary);
+      color: var(--color-contrast-lower);
+    }
+  }
+
+  .drop-icon {
+    margin-left: 10px;
+  }
+
+  @include respond-to("m-large") {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    border: none;
+
+    .menu-link {
+      padding: 0.5rem 1rem;
+      min-width: 5rem;
+      border-radius: 4px;
+      justify-content: center;
+    }
+
+    .menu-item:hover {
+      .sub-menu {
+        background-color: var(--color-contrast-lower);
+        padding-left: 0;
+        display: block;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+.sub-menu {
+  display: none;
+  border-radius: 4px;
+
+  &--active {
+    display: block;
+    z-index: 1;
+  }
+
+  .menu-link {
+    padding: 1rem;
+    font-weight: initial;
+    justify-content: flex-start;
+
+    &:hover {
+      padding-left: calc(1rem + 3px);
+    }
+  }
+
+  @include respond-to("m-large") {
+    display: none;
+    position: absolute;
+    min-width: 10rem;
+    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
+      rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
+
+    &--active {
+      display: none;
+    }
+  }
+}
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -0,0 +1,48 @@
+@charset "UTF-8";
+
+// 1. Configuration and helpers
+@import
+  'abstracts/variables',
+  'abstracts/functions',
+  'abstracts/mixins';
+
+// 2. Vendors
+@import
+  'vendors/normalize';
+
+// 3. Base stuff
+@import
+  'base/base',
+  'base/fonts',
+  'base/typography',
+  'base/helpers';
+
+// 4. Layout-related sections
+@import
+  'layout/header',
+  'layout/footer';
+
+// 5. Components
+@import
+  'components/scroll',
+  'components/switch-theme',
+  'components/socials',
+  'components/buttons',
+  'components/newsletter',
+  'components/pagination',
+  'components/draft-label',
+  'components/clipboard',
+  'components/code-highlight',
+  'components/markdown',
+  'components/toc',
+  'components/page-header';
+
+// 6. Page-specific styles
+@import
+  'pages/home',
+  'pages/contact',
+  'pages/single',
+  'pages/terms',
+  'pages/errors',
+  'pages/post-list',
+  'pages/project-list';
--- a/assets/scss/pages/_contact.scss
+++ b/assets/scss/pages/_contact.scss
@ -0,0 +1,10 @@
+#contact-form {
+  flex-direction: column;
+  row-gap: 15px;
+  max-width: 500px;
+  margin-top: 30px;
+  
+  button {
+    align-self: flex-start;
+  }
+}
--- a/assets/scss/pages/_errors.scss
+++ b/assets/scss/pages/_errors.scss
@ -0,0 +1,11 @@
+.error-404 {
+  margin-top: 50px;
+
+  h1 {
+    margin: 0;
+  }
+
+  p {
+    margin-top: 10px;
+  }
+}
--- a/assets/scss/pages/_home.scss
+++ b/assets/scss/pages/_home.scss
@ -0,0 +1,104 @@
+// -----------------------------------------------------------------------------
+// This file contains styles that are specific to the home page.
+// -----------------------------------------------------------------------------
+
+.hero {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 3rem 5vw;
+
+  @include respond-to('medium') {
+    flex-wrap: nowrap;
+  }
+
+  @include respond-to('m-large') {
+    padding: 80px 0;
+  }
+}
+
+.hero-info {
+
+  @include respond-to('medium') {
+    flex: 0 1 65%;
+  }
+
+  .hero-title {
+    font-weight: 900;
+    margin-top: 0;
+    @include font-size('xl');
+  }
+
+  .hero-subtitle {
+    color: var(--color-contrast-medium-high);
+    @include font-size('base');
+  }
+}
+
+.hero-owner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 20px;
+
+  @include respond-to('medium') {
+    flex: 0 1 35%;
+  }
+
+  .hero-avatar {
+    max-width: 300px;
+    width: 100%;
+    height: auto;
+    border-radius: 20px;
+    
+    @include respond-to('medium') {
+      max-width: 100%;
+      width: unset;
+    }
+  }
+}
+
+.home-section-title {
+
+  &::after {
+    background-color: var(--color-contrast-medium);
+    content: "";
+    display: block;
+    height: 2px;
+    position: relative;
+    width: 80px;
+    top: 8px;
+  }
+}
+
+.home-section-posts-title {
+  @extend .home-section-title;
+  margin: 0;
+}
+
+.home-title-dropdown {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 30px;
+  margin-bottom: 50px;
+}
+
+#select-posts {
+  @include font-size('sm');
+  padding: 0.4rem;
+  border: 1px solid var(--color-contrast-medium-low);
+  border-radius: 5px;
+  color: var(--color-contrast-high);
+  background-color: var(--color-contrast-lower);
+}
+
+.see-more {
+  margin-top: 30px;
+}
+
+.see-more-projects {
+  color: var(--color-contrast-medium);
+  font-weight: 400;
+  font-size: var(--font-size-base);
+}
--- a/assets/scss/pages/_post-list.scss
+++ b/assets/scss/pages/_post-list.scss
@ -0,0 +1,47 @@
+.post-entry {
+  margin: 20px 0;
+  max-width: 750px;
+}
+
+.post-entry-divider {
+  background-color: var(--color-contrast-low);
+  content: "";
+  display: block;
+  height: 1px;
+  position: relative;
+  max-width: 750px;
+}
+
+.post-list-title {
+  font-weight: 400;
+  margin: 0;
+  @include font-size('md');
+
+  a {
+    text-decoration: none;
+    color: var(--color-contrast-high);
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+}
+
+.post-list-summary {
+  @extend .summary-text;
+  margin: 10px 0 0 0;
+}
+
+.post-list-meta {
+  @extend .meta-text;
+  margin-top: 10px;
+}
+
+.post-list-dates {
+  font-weight: 400;
+}
+
+.post-list-categories {
+  display: inline-flex;
+  column-gap: 10px;
+}
--- a/assets/scss/pages/_project-list.scss
+++ b/assets/scss/pages/_project-list.scss
@ -0,0 +1,82 @@
+.project-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 2rem;
+
+  & > * {
+    flex: 1 1 350px;
+  }
+}
+
+.project-entry {
+  min-height: 26rem;
+  border: 1px solid var(--color-contrast-low);
+  border-radius: 10px;
+  box-shadow: 0 0 10px -10px var(--color-contrast-low),
+    0 0 20px -10px var(--color-contrast-low);
+}
+
+.project-entry-img {
+  position: relative;
+  border-radius: 10px 10px 0 0;
+  min-height: 1rem;
+
+  img {
+    width: 100%;
+    height: 20vh;
+    object-fit: cover;
+    border-radius: 10px 10px 0 0;
+    border-bottom: 1px solid var(--color-contrast-low);
+    // Image overlay
+    z-index: -1;
+    position: relative;
+    filter: grayscale(50%);
+  }
+}
+
+.project-entry-type {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 0.2rem 0.4rem;
+  border-radius: 8px;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-contrast-low);
+  line-height: 1rem;
+
+  a {
+    @include font-size("sm");
+  }
+}
+
+.project-entry-info {
+  padding: 1.2rem;
+
+  @include respond-to("small") {
+    padding: 1.5rem;
+  }
+}
+
+.project-entry-title {
+  margin: 0;
+  font-weight: 400;
+
+  a {
+    color: var(--color-contrast-high);
+
+    &:hover {
+      text-decoration: none;
+      color: var(--color-primary);
+    }
+  }
+}
+
+.project-list-summary {
+  @extend .summary-text;
+}
+
+.project-list-meta {
+  @extend .meta-text;
+  margin-top: 10px;
+}
--- a/assets/scss/pages/_single.scss
+++ b/assets/scss/pages/_single.scss
@ -0,0 +1,80 @@
+.single-feature-img {
+  display: flex;
+
+  img {
+    margin: 30px 0;
+    max-width: 100%;
+    height: auto;
+    filter: grayscale(50%);
+  }
+}
+
+.single-terms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-start;
+  margin-top: 20px;
+}
+
+.single-container {
+  @extend .container;
+  max-width: 900px;
+}
+
+.single-container-post {
+  @extend .container;
+  max-width: 900px;
+
+  @include respond-to('x-large') {
+    max-width: $max-width;
+    display: grid;
+    grid-template-columns: 1fr 15em;
+    gap: 1rem;
+  }
+}
+
+.single-post-contents {
+  overflow: auto;
+}
+
+.series {
+  @include font-size('base');
+  margin: 2rem 0;
+}
+
+.series-this-post {
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary);
+  border-radius: 5px;
+  padding: 0.3rem;
+  @include font-size('sm');
+  font-weight: 500;
+  margin-left: 10px;
+}
+
+.single-next-previous {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: space-between;
+  align-items: baseline;
+
+  & > * {
+    background-color: transparent;
+    border: 1px solid var(--color-contrast-medium-low);
+    border-radius: 12px;
+    padding: 10px;
+    @include font-size('base');
+    max-width: 300px;
+    
+    &:hover {
+      text-decoration: none;
+      border: 1px solid var(--color-contrast-high);
+    }
+  }
+}
+
+.related-posts {
+  @include font-size('base');
+}
--- a/assets/scss/pages/_terms.scss
+++ b/assets/scss/pages/_terms.scss
@ -0,0 +1,28 @@
+.terms {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 15px 15px;
+}
+
+.term {
+  border: 1px solid var(--color-primary);
+  border-radius: 20px;
+  @include font-size('sm');
+  padding: 0.4rem 0.6rem;
+  
+  &:hover {
+    text-decoration: none;
+    border: 1px solid var(--color-contrast-high);
+    color: var(--color-contrast-high);
+  }
+
+  @include respond-to('small') {
+    padding: 0.5rem 0.7rem;
+  }
+}
+
+.term-count {
+  color: var(--color-contrast-high);
+  margin-left: 2px;
+}
--- a/assets/scss/vendors/_normalize.scss
+++ b/assets/scss/vendors/_normalize.scss
@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
--- a/assets/svg/Meridian_Logo.svg
+++ b/assets/svg/Meridian_Logo.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.d{fill:#fff;}.e{fill:#1d1d1b;font-family:MontserratRoman-Regular, MontserratRoman Regular;font-size:66.58px;letter-spacing:.1em;}.f{fill:#010101;}</style></defs><g id="a"><rect class="d" width="512" height="512"/></g><g id="b"><path class="f" d="M130.28,143.11s.93,.55,.97,.59l123.87,123.87c1.18,1.18,3.1,1.18,4.28,0l124.04-124.04c.13-.13,.62-.43,.62-.42h0l.52-.27h0c29.39,31.24,47.39,73.3,47.39,119.57s-18.05,88.43-47.5,119.67c0,0,0,.02,0,.02l6.79,6.79s.02,0,.02,0c31.19-32.99,50.32-77.5,50.32-126.48s-19.08-93.39-50.21-126.37l.04-.04-7.38-7.38s-.02,0-.02,0l-7.35,7.62,.13-.1c-.11,.08-.22,.17-.32,.27l-116.7,116.7c-1.18,1.18-3.1,1.18-4.28,0l-116.91-116.91c-.2-.2-.42-.36-.66-.5h0l-7-7s-.02,0-.02,0l-7.32,7.32-.03-.03c-31.14,32.98-50.24,77.46-50.24,126.4s19.2,93.66,50.49,126.66c0,0,.02,0,.02,0l6.79-6.79s0-.02,0-.02c-29.55-31.26-47.67-73.44-47.67-119.85s17.94-88.17,47.23-119.38"/><path class="f" d="M377.16,135.77l6.81-6.81c-33-31.26-77.56-50.43-126.61-50.43-48.94,0-93.42,19.09-126.4,50.24l6.81,6.81c31.23-29.4,73.3-47.42,119.58-47.42,46.38,0,88.54,18.1,119.79,47.62Z"/><path class="f" d="M364.8,346.29l4.51,4.51c20.68-21.83,33.36-51.31,33.36-83.75,0-32.37-12.63-61.8-33.23-83.61l-4.51,4.51c19.45,20.66,31.37,48.49,31.37,79.11,0,30.68-11.97,58.57-31.5,79.24Z"/><path class="f" d="M149.76,346.21l-4.51,4.51c-20.68-21.83-33.36-51.31-33.36-83.75s12.63-61.8,33.23-83.61l4.51,4.51c-19.45,20.66-31.37,48.49-31.37,79.11,0,30.68,11.97,58.57,31.5,79.24Z"/><path class="f" d="M272.99,336.54c-.11-8.65-7.15-15.62-15.82-15.62-4.98,0-9.42,2.3-12.32,5.9,4.3,.7,9.38,2.01,14.71,3.87,5.1,1.78,9.71,3.82,13.43,5.86Z"/><path class="f" d="M241.35,337.04c.16,8.61,7.18,15.54,15.82,15.54,4.88,0,9.24-2.21,12.14-5.68-4.17-.72-9.02-1.99-14.1-3.76-5.3-1.85-10.07-3.98-13.87-6.1Z"/><path class="f" d="M255.88,341.24c-5.75-2.01-10.8-4.33-14.4-6.51-.08,.66-.13,1.33-.13,2.01,0,.1,0,.19,0,.29,3.79,2.12,8.56,4.25,13.87,6.1,5.08,1.77,9.93,3.04,14.1,3.76,.49-.59,.94-1.21,1.34-1.86-4.09-.58-9.28-1.87-14.78-3.79Z"/><path class="f" d="M259.29,331.47c5.38,1.88,10.15,4.04,13.69,6.09,.01-.27,.02-.54,.02-.81,0-.07,0-.14,0-.21-3.72-2.04-8.33-4.08-13.43-5.86-5.33-1.86-10.41-3.17-14.71-3.87-.22,.27-.42,.54-.62,.82,4.14,.56,9.43,1.87,15.06,3.83Z"/><path class="f" d="M244.23,327.64c-1.45,2.06-2.42,4.48-2.76,7.09,3.6,2.18,8.65,4.5,14.4,6.51,5.5,1.92,10.68,3.21,14.78,3.79,1.35-2.19,2.18-4.74,2.32-7.47-3.54-2.05-8.31-4.21-13.69-6.09-5.63-1.96-10.92-3.27-15.06-3.83Z"/><text class="e" transform="translate(90.61 463.6)"><tspan x="0" y="0">MERIDIAN</tspan></text><rect class="d" x="36.22" y="443.66" width="439.56" height="8.44"/></g><g id="c"><rect class="d" x="361.04" y="117.02" width="20.43" height="20.43" transform="translate(198.7 -225.25) rotate(45)"/><rect class="d" x="130.21" y="113.74" width="20.43" height="20.43" transform="translate(122.6 -62.5) rotate(43.1)"/></g></svg>
--- a/assets/uploads/screenshots/2023-09-01_01.35.31.png
+++ b/assets/uploads/screenshots/2023-09-01_01.35.31.png
--- a/assets/uploads/screenshots/gartic1.png
+++ b/assets/uploads/screenshots/gartic1.png
--- a/assets/uploads/screenshots/mdr.png
+++ b/assets/uploads/screenshots/mdr.png
--- a/assets/uploads/screenshots/minecraft_mc_sky.png
+++ b/assets/uploads/screenshots/minecraft_mc_sky.png
--- a/assets/uploads/screenshots/panda200.png
+++ b/assets/uploads/screenshots/panda200.png
--- a/assets/uploads/screenshots/tosopnoob.png
+++ b/assets/uploads/screenshots/tosopnoob.png
--- a/assets/uploads/screenshots/tutu.png
+++ b/assets/uploads/screenshots/tutu.png
--- a/assets/uploads/screenshots/unbonbain.png
+++ b/assets/uploads/screenshots/unbonbain.png
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,4 @@
+baseURL = 'https://meridian-corp.org'
+languageCode = 'fr-fr'
+title = 'Meridian Corp'
+theme = 'liftoff'
--- a/config/_default/hugo.toml
+++ b/config/_default/hugo.toml
@ -0,0 +1,248 @@
+### General
+baseURL = 'https://meridian-corp.org' # Enter your full production URL
+languageCode = 'fr-FR' # Default
+timeZone = 'Europe/Paris' # IANA timezone https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+title = 'Meridian Corp' # Site title used throughout site
+
+defaultContentLanguage = 'fr' # Default
+defaultContentLanguageInSubdir = false
+
+### SEO, Analytics & 3rd-party
+enableRobotsTXT = true # To overwrite the theme's robots.txt, add your own in the /layouts/ directory
+rssLimit = -1 # -1 is unlimited RSS entries
+# googleAnalytics = '' # Enter GA tracking ID to enable GA4
+# disqusShortname = '' # Enter Disqus shortname to enable comments
+
+### Content & Publishing
+# Please see https://gohugo.io/getting-started/configuration/ for detailed explanations
+buildDrafts = false # Default
+buildExpired = false # Default 
+buildFuture = false # Default
+canonifyURLs = false # Default
+disableAliases = true # Set to true if using server (Netlify, .htaccess) for redirects instead of Hugo
+disableKinds = [] # Default
+enableEmoji = true # Use Emojis in content
+enableGitInfo = false # Default, enable to use git for lastmod (can be overwritten in frontmatter)
+enableInlineShortcodes = false # Default, false is more security-friendly
+ignoreFiles = [] # Default
+# newContentEditor = 'code' # Set VS Code as default editor
+paginate = 10 # Default
+paginatePath = 'page' # Default
+pluralizeListTitles = true # Default
+publishDir = 'public' # Default
+relativeURLs = false # Default
+summaryLength = 70 # Default
+titleCaseStyle = 'AP' # Default, other options: Chicago (slightly different) or Go (all first letters capitalized)
+
+### Other
+archetypeDir = 'archetypes' # Default
+assetDir = 'assets' # Default
+
+contentDir = 'content' # Default
+dataDir = 'data' # Default
+disableHugoGeneratorInject = false # Default
+disableLiveReload = false # Default
+
+# Use this theme as git submodule
+theme = 'liftoff'
+# Or, use this theme as hugo module
+# [module]
+# [[module.imports]]
+#     path = 'liftoff'
+
+[taxonomies]
+    tag = 'tags'
+    category = 'categories'    
+    series = 'series' # Allows you to create an organized series of posts (e.g. multi-part tutorial)
+    project-type = 'project types' # Categorize projects by type (e.g. client work, personal, open source, etc.)
+
+[permalinks]
+    [permalinks.page]
+        # e.g. /subsection/example-post instead of /posts/subsection/example-post
+        posts = '/:sections[last]/:slug/' # Removes 'posts' from the permalink structure for posts created under nested sub-sections
+    [permalinks.section]
+        # e.g. /subsection/ instead of /posts/subsection/
+        posts = '/:slug/'
+
+[markup]
+  defaultMarkdownHandler = 'goldmark' # Default (everything under [markup] is unless otherwise specified)
+  [markup.goldmark]
+    [markup.goldmark.extensions]
+      definitionList = true
+      footnote = true
+      linkify = true
+      linkifyProtocol = 'https'
+      strikethrough = true
+      table = true
+      taskList = true
+      typographer = true
+    [markup.goldmark.parser]
+      autoHeadingID = true
+      autoHeadingIDType = 'github'
+      [markup.goldmark.parser.attribute]
+        block = false
+        title = true
+    [markup.goldmark.renderer]
+      hardWraps = false
+      unsafe = false
+      xhtml = false
+  [markup.highlight]
+    anchorLineNos = false
+    codeFences = true
+    guessSyntax = false
+    hl_Lines = ''
+    lineAnchors = ''
+    lineNoStart = 1
+    lineNos = true # Not the default
+    lineNumbersInTable = false # Not the default
+    noClasses = true
+    noHl = false
+    style = 'monokai'
+    tabWidth = 4
+  [markup.tableOfContents]
+    endLevel = 3
+    ordered = false
+    startLevel = 2
+
+[related]
+  # Default related posts settings
+  includeNewer = false
+  threshold = 80
+  toLower = false
+[[related.indices]]
+  name = 'keywords'
+  weight = 100
+[[related.indices]]
+  name = 'date'
+  weight = 10
+# Remove if not using tags taxonomy
+[[related.indices]]
+  name = 'tags'
+  weight = 80
+
+[sitemap]
+  # Default sitemap settings
+  changefreq = 'monthly'
+  filename = 'sitemap.xml'
+  priority = 0.5
+
+[frontmatter]
+  # Default frontmatter date settings
+  date = ['date', 'publishDate', 'lastmod']
+  expiryDate = ['expiryDate']
+  lastmod = ['lastmod', ':git', 'date', 'publishDate']
+  publishDate = ['publishDate', 'date']
+
+[caches]
+  # Default cache settings
+  [caches.assets]
+    dir = ':resourceDir/_gen'
+    maxAge = -1
+  [caches.getcsv]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.getjson]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.images]
+    dir = ':resourceDir/_gen'
+    maxAge = -1
+  [caches.modules]
+    dir = ':cacheDir/modules'
+    maxAge = -1
+
+[imaging]
+  # Default image processing settings
+  anchor = 'Smart'
+  bgColor = '#ffffff'
+  hint = 'photo'
+  quality = 75
+  resampleFilter = 'Box'
+
+[languages]
+  [languages.fr]
+    contentDir = 'content/fr'
+    disabled = false
+    languageCode = 'fr-FR'
+    languageDirection = 'ltr'
+    languageName = 'Français'
+    weight = 1
+    [languages.fr.params]
+      screeenshotTitle = "Les screens de l'équipe"
+      contact_name = "Votre nom..."
+      contact_email = "Votre meilleur e-mail..."
+      contact_placeholder = "Votre petit mot..."
+      button_send = "Envoyer"
+      next_article = 'Prochain article'
+      content_table = "Table de contenu"
+  [languages.en]
+    contentDir = 'content/en'
+    disabled = false
+    languageCode = 'en-US'
+    languageDirection = 'ltr'
+    languageName = 'English'
+    weight = 2
+    [languages.en.params]
+      screeenshotTitle = "Screenshots from the team"
+      contact_name = "Your name..."
+      contact_email = "Your best email..."
+      contact_placeholder = "Your lovely note..."
+      button_send = "Send"
+      next_article = 'Next article'
+      content_table = "Content Table"
+### Hugo Pipes
+[minify]
+  disableCSS = false
+  disableHTML = false
+  disableJS = false
+  disableJSON = false
+  disableSVG = false
+  disableXML = false
+  minifyOutput = false
+  [minify.tdewolff]
+    [minify.tdewolff.css]
+      keepCSS2 = true
+      precision = 0
+    [minify.tdewolff.html]
+      keepComments = false
+      keepConditionalComments = true
+      keepDefaultAttrVals = true
+      keepDocumentTags = true
+      keepEndTags = true
+      keepQuotes = false
+      keepWhitespace = false
+    [minify.tdewolff.js]
+      keepVarNames = false
+      noNullishOperator = false
+      precision = 0
+    [minify.tdewolff.json]
+      keepNumbers = false
+      precision = 0
+    [minify.tdewolff.svg]
+      precision = 0
+    [minify.tdewolff.xml]
+      keepWhitespace = false
+
+### Netlify settings
+# add redirects/headers
+[outputs]
+  home = ["HTML", "RSS", "REDIRECTS", "HEADERS"]
+
+# remove .{ext} from text/netlify
+[mediaTypes."text/netlify"]
+  suffixes = [""]
+  delimiter = ""
+
+# add output format for netlify _redirects
+[outputFormats.REDIRECTS]
+  mediatype = "text/netlify"
+  baseName = "_redirects"
+  isPlainText = true
+  notAlternative = true
+
+# add output format for netlify _headers
+[outputFormats.HEADERS]
+  mediatype = "text/netlify"
+  baseName = "_headers"
+  isPlainText = true
+  notAlternative = true
--- a/config/_default/menus/menus.en.toml
+++ b/config/_default/menus/menus.en.toml
@ -0,0 +1,54 @@
+[[main]]
+    # Top-level menu entry
+    identifier = "projets"
+    name = "Project"
+    url = "/en/projets/"
+    weight = 1
+
+[[main]]
+    # Top-level menu entry
+    identifier = "content"
+    name = "More"
+    url = "/en/posts/"
+    weight = 2
+
+[[main]]
+    identifier = "posts"
+    name = "Redaction"
+    url = "/en/posts/"
+    parent = "content"
+    weight = 2
+
+[[main]]
+    identifier = "jeux"
+    name = "Our games"
+    url = "/en/jeux/"
+    # url = "/posts/subsection/" # Remove url param from subsection/_index.md frontmatter to use full permalink
+    parent = "content"
+    weight = 3
+
+[[main]]
+    identifier = "jdb"
+    name = "The lore"
+    url = "/en/jdb/"
+    parent = "content"
+    weight = 4
+
+[[main]]
+    identifier = "tags"
+    name = "Tags"
+    url = "/en/tags/"
+    parent = "content"
+    weight = 5
+
+[[main]]
+    identifier = "contact"
+    name = "Contact"
+    url = "/en/contact/"
+    weight = 4
+
+[[main]]
+    identifier = "about"
+    name = "Us"
+    url = "/en/about/"
+    weight = 5
--- a/config/_default/menus/menus.fr.toml
+++ b/config/_default/menus/menus.fr.toml
@ -0,0 +1,54 @@
+[[main]]
+    # Top-level menu entry
+    identifier = "projets"
+    name = "Projets"
+    url = "/projets/"
+    weight = 1
+
+[[main]]
+    # Top-level menu entry
+    identifier = "content"
+    name = "Plus"
+    url = "/posts/"
+    weight = 2
+
+[[main]]
+    identifier = "posts"
+    name = "La redac"
+    url = "/posts/"
+    parent = "content"
+    weight = 2
+
+[[main]]
+    identifier = "jeux"
+    name = "Nos jeux"
+    url = "/jeux/"
+    # url = "/posts/subsection/" # Remove url param from subsection/_index.md frontmatter to use full permalink
+    parent = "content"
+    weight = 3
+
+[[main]]
+    identifier = "jdb"
+    name = "Le lore"
+    url = "/jdb/"
+    parent = "content"
+    weight = 4
+
+[[main]]
+    identifier = "tags"
+    name = "Tags"
+    url = "/tags/"
+    parent = "content"
+    weight = 5
+
+[[main]]
+    identifier = "contact"
+    name = "Contact"
+    url = "/contact/"
+    weight = 4
+
+[[main]]
+    identifier = "about"
+    name = "Nous"
+    url = "/about/"
+    weight = 5
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -0,0 +1,65 @@
+### SEO, Analytics & 3rd-party
+netlify_forms = true # add data-netlify attribute to contact and newsletter forms, false to disable Netlify forms
+# gtm_id = '' # GTM tracking (leave blank to use GA)
+disallow_search_engines = false # Disallow search engine crawling in robots.txt
+
+### Content
+favicon = true # Enable favicon, add your favicon files to /static/ directory
+avatar = 'Meridian_Logo_2bis.png' # Custom avatar image in /assets/
+grayscale_avatar = false # Add a grayscale filter to the avatar image
+author = 'Meridian Corp' # Default author for <head> meta
+description = "Site de la Meridian Corp." # Add a global meta description to <head>
+footer_text = "Crée avec [Hugo Liftoff](https://github.com/wjh18/hugo-liftoff) theme." # Customize footer text
+fallback_text = "Il n'y a rien ici, revenez plus tard! " # Fallback text for empty content
+label_drafts = true # Add a label indicator next to the title of any built drafts (dev only)
+
+# Customize newsletter text
+newsletter_header = "Ma newsletter pour être au courant rapidement"
+newsletter_description = "Inscrivez-vous et recevez les nouvelles du blog directement sur votre boite mail !"
+newsletter_submit = "Rejoindre"
+global_newsletter = false # Enable newsletter site-wide
+
+# CSS / JavaScript
+enable_postcss = false # Enable if you're using npm and want to utilize PostCSS processing
+custom_css = 'custom.css' # Add the specified file to assets before setting this param to avoid errors
+custom_js = 'custom.js' # Add the specified file to assets before setting this param to avoid errors
+
+### Web schemas
+# Open Graph
+images = ['images/default.png'] # Fallback for Open Graph and Twitter Cards images if none are present in front matter. Enter path to the image.
+ogLocale = "fr_FR" # Open graph locale
+
+# Twitter Cards
+twitterSite = "corp_meridian" # Enter your twitter handle without the @
+twitterCreator = "corp_meridian" # Enter your twitter handle without the @
+
+# JSON-LD structured data schemas
+schemaName = "Martin Gasque" # Enter your name
+schemaLocale = "fr-fr" # Structured data locale
+schemaImage = "images/default.png" # Image for Person structured data schema. Enter path to the image.
+schemaImageWidth = 453 # Width of the above image
+schemaImageHeight = 455 # Height of the above image
+
+### Social
+# Show social links in footer, home hero section, or about page
+footer_socials = true
+home_hero_socials = false
+about_page_socials = true
+
+# Enable or disable individual social icons
+[social.links]
+  twitter = "corp_meridian"
+  # github = "username"
+  # stack_overflow = "userid/username" # include user id
+  email = "MeridianCorpTV@gmail.com"
+  # linkedin = "username" # Comment out to disable
+  # mastodon_server = "example.social" # include subdomains if relevant, scheme not needed (defaults to https)
+  # mastodon_user = "username" # don't include preceding @
+
+# Enable or disable individual social share icons in posts
+[social.share]
+  facebook = false
+  linkedin = false
+  twitter = true
+  reddit = false
+  email = true
--- a/config/development/server.toml
+++ b/config/development/server.toml
@ -0,0 +1,9 @@
+# Adds custom security headers for development environment only
+[[headers]]
+for = '/**'
+[headers.values]
+  # Content-Security-Policy = 'script-src localhost:1313'
+  Referrer-Policy = 'strict-origin-when-cross-origin'
+  X-Content-Type-Options = 'nosniff'
+  X-Frame-Options = 'DENY'
+  X-XSS-Protection = '1; mode=block'
--- a/config/production/hugo.toml
+++ b/config/production/hugo.toml
@ -0,0 +1,3 @@
+### Config for production environment
+# Includes but overwrites anything in _default/config.toml
+# Excludes anything in _development/config.toml if it exists
--- a/config/production/params.toml
+++ b/config/production/params.toml
@ -0,0 +1,3 @@
+### Params for production environment
+# Includes but overwrites anything in _default/params.toml
+# Excludes anything in _development/params.toml if it exists
--- a/content/_index.md
+++ b/content/_index.md
@ -0,0 +1,14 @@
+---
+title: Meridian Corp
+subtitle: Nous sommes un collectif de jeunes créateurs de contenu
+seo_title: Meridian Corp
+
+primary_cta_page: "about"
+secondary_cta_page: "projets"
+
+posts_section_heading: Derniers articles
+projects_section_heading: Les projets
+---
+
+<!-- {{< recent-posts 5 >}} -->
+{{< projets 5 >}}
--- a/content/emoji-support.md
+++ b/content/emoji-support.md
@ -0,0 +1,67 @@
+---
+title: Emoji Support
+seo_title: Emoji Support
+summary: Guide to emoji usage in Hugo.
+description: Guide to emoji usage in Hugo.
+slug: emoji-support
+author: John Doe
+
+draft: false
+date: 2020-11-17T21:21:46-05:00
+lastmod: 2020-11-18T21:21:46-05:00
+expiryDate: 
+publishDate: 
+
+feature_image: 
+feature_image_alt: 
+
+categories:
+  - Formatting
+tags:
+  - Emoji
+
+toc: true
+related: true
+social_share: true
+newsletter: true
+disable_comments: false
+---
+
+Emoji can be enabled in a Hugo project in a number of ways.
+
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
+
+To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
+
+I :heart: Hugo!
+
+<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
+<br>
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
+
+***
+
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+
+{{< highlight css >}}
+.emoji {
+  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
+}
+{{< /highlight >}}
+
+{{< css.inline >}}
+<style>
+.emojify {
+	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
+	font-size: 2rem;
+	vertical-align: middle;
+}
+@media screen and (max-width:650px) {
+  .nowrap {
+    display: block;
+    margin: 25px 0;
+  }
+}
+</style>
+{{< /css.inline >}}
--- a/content/en/JDB/index.md
+++ b/content/en/JDB/index.md
@ -0,0 +1,44 @@
+---
+title: Lorebook
+seo_title: Lorebook
+---
+
+Today, Meridian Corp is a fast-growing group, but that wasn't always the case...
+
+It all began in 2008 in a Battle.NET newsgroup set up by 3 fellow members and joined by a few fellow gamers.
+At the time, the team had no name, and played mainly Overwatch.
+
+The La Hype newsgroup was a first approach to a group on which we recruited a few companions as we went along. It was in this context that \*Stew, TosOp and Blazer-Scout joined the adventure.
+
+La Hype" server description (...) :
+
+> For 2 people:
+> slice the pelo
+> Place the pelo in a 200° oven for 10 min.
+> Remove the pelo and turn it over so that it can brown.
+> Serve the pelo in a soup plate with a white sauce (e.g. béarnaise).
+> Bon pélo !
+
+But this platform (Bnet) wasn't stable enough or adapted to our communication needs. It was impossible to transfer images, the conversation history was limited, and the chat channels were inaccessible at least once a week.
+
+Obsidian proposed a (first) transition to discord, and created a rather shabby server to accommodate our heroes:
+
+![](/uploads/image_page/roadtomaster.png)
+
+As the first discord server in our entourage, he was soon joined by GeneralPetitCornichon/Furibar and his troupe, and although we didn't always play the same game, they were already listening to what was going on at home.
+
+It was in 2020, at the time of the Corona Virus crisis, that the server changed. Following altercations between members of the group, the server was no longer in use and didn't correspond to the space we needed to coexist without stepping on each other's toes.
+
+Obsidian set up the "Meridian" server, which was intended to be a family server, but in a broader sense. Not just one household, but several, were set up on this server, which was far more developed than its predecessor.
+
+A server on which we made a point of being the best versions of ourselves and welcoming new faces into the fold.
+
+![](/uploads/image_page/Meridian_originalserv.png)
+
+The server is now in full swing and has become a veritable den for us, combining a wide range of games with fascinating discussions.
+
+After that, many players joined the adventure thanks to the wave of Among Us from the pandemic, the most notorious being Betamèche, Karmared, Selenyx and Seum.
+
+It was after the pandemic that Obsidian, following all the encounters that had taken place on the discord, decided to turn Meridian into a community server, closed to no one and destined to be increasingly inhabited to develop more ambitious projects (Hanzo in his case).
+
+Obsidian then asked all Meridian players to join it on a new server, designed with greater care and rules facilitating the management of more companions: Meridian Corp.
--- a/content/en/about/index.md
+++ b/content/en/about/index.md
@ -0,0 +1,17 @@
+---
+title: About us
+seo_title: About us
+slug: about
+type: about
+description: Who are thoses freaks ? Let's find out...
+---
+
+Meridian Corp is a community of content and video game creators, gamers and players who met through gaming and founded a community that anyone can join.
+
+On this basis, from game to game, we recruit guild, company or squad members who seem to belong here and are looking for a place somewhere.
+
+Beyond that, we're a handful of creators who work daily to bring this community to life, by creating servers for the various multiplayer games, and by offering advice sessions when needed, whether it's to pass a diamond on League of Legends or to troubleshoot your computer on a bad day.
+
+Join us and let's see how we can create events that suit us.
+
+Our team is made up of some of the most amazing and hilarious members of the industry, such as :
--- a/content/en/contact/index.md
+++ b/content/en/contact/index.md
@ -0,0 +1,7 @@
+---
+type: contact
+title: Thoses aliens are trying to reach us
+seo_title: Contact
+description: Send us an email !
+---
+
--- a/content/en/createurs/Obsidian/Obsidian_Logo.png
+++ b/content/en/createurs/Obsidian/Obsidian_Logo.png
--- a/content/en/createurs/Obsidian/index.md
+++ b/content/en/createurs/Obsidian/index.md
@ -0,0 +1,17 @@
+---
+title: Obsidian
+seo_title: Obsidian Glover
+summary: Creator of the Meridian structure
+slug: obsidian
+feature_image: Obsidian_Logo.png
+---
+
+Obsidian Glover, Martin Gasque, is the creator of Meridian Corp.
+
+He mainly creates role-playing games, but also designed this website.
+
+He's only made games for his friends, but he's starting to make games for everyone!
+
+While he's always busy with his Hanzo project, he's always ready to chat with anyone about anything!
+
+His ambition is to create a community of gamers who can cross-fertilize their knowledge to create projects together.
--- a/content/en/createurs/Seum/index.md
+++ b/content/en/createurs/Seum/index.md
@ -0,0 +1,23 @@
+---
+date: 2023-05-10T14:52:30.000Z
+title: Seum
+seo_title: Seum
+summary: Marketing and graphic design for the community.
+description: Marketing and graphic design for the community.
+slug: Seum
+author: Seum
+draft: false
+lastmod: null
+expiryDate: null
+publishDate: null
+feature_image: seum.jpg
+feature_image_alt: seum.jpg
+project types: null
+techstack: null
+live_url: null
+source_url: null
+published: true
+---
+
+S3UM, Samuel Bouyeau, has been a designer since the founding of Meridian Corp.
+He designed the Meridian Corp logo and has been guiding our group's graphics ever since.
--- a/content/en/createurs/Vek/grit_rouge.png
+++ b/content/en/createurs/Vek/grit_rouge.png
--- a/content/en/createurs/Vek/index.md
+++ b/content/en/createurs/Vek/index.md
@ -0,0 +1,22 @@
+---
+date: 2023-05-10T14:52:30.000Z
+title: Veko
+seo_title: Veko
+summary: Editor and administrator.
+slug: veko
+author: Vek
+draft: false
+lastmod: null
+expiryDate: null
+publishDate: null
+feature_image: grit_rouge.png
+feature_image_alt: grit_rouge.png
+project types: null
+techstack: null
+live_url: null
+source_url: null
+published: true
+description: Editor and administrator.
+---
+
+Veko, Yannis P, is
--- a/content/en/createurs/_index.md
+++ b/content/en/createurs/_index.md
@ -0,0 +1,5 @@
+---
+title: "Les créateurs"
+summary: "La liste des créateurs"
+description: "Les créateurs de contenus sur le Meridian."
+---
--- a/content/en/jeux/_index.md
+++ b/content/en/jeux/_index.md
@ -0,0 +1,9 @@
+---
+categories: 
+    - 'Jeux'
+date: 
+title: Our games
+summary: The games we play and how to reach us !
+description: The list of the games we play
+published: true
+---
--- a/content/en/jeux/dofus/index.md
+++ b/content/en/jeux/dofus/index.md
@ -0,0 +1,38 @@
+---
+title: Dofus
+seo_title: Dofus
+summary: Dofus is our star MMO, come and join the guild !
+description: Meridian c'est l'histoire d'une guilde...
+slug: dofus
+feature_image: screenshot.png
+date: 1970-01-01T00:00:00.000Z
+tags:
+  - MMO
+  - RPG
+  - mmo
+  - multi
+  - rpg
+  - strategy
+---
+
+Dofus what a crazy game
+
+Seriously, this is a game I've underestimated for far too long.
+At the time, dofus players were even laughed at, but today I can say that I've never been so wrong.
+
+The game is an ode to MMO players, with rewards for the greatest grinders, a complete crafting system and a constant need for the community to be dynamic.
+
+\
+But it's also an RPG, with a characteristic system and a variety of spells allowing for numerous builds and team configurations (19 classes, that's a lot of group strategies).
+
+\
+And finally, tactical, because they've thought up so many strategies based on square combat. Their Action Point/Movement Point system gives you the greatest freedom in combat of any board game, and allows you to be more strategic and prepared than some action RPGs. Time becomes precious, as turns only last about ten seconds!
+
+In Dofus, you play the role of a soul gifted with powers conferred by the gods themselves! \
+Find the dofus and explore the world of the twelve! That's the simple but effective promise of Dofus.
+
+The game is challenging, and its emphasis on boss strategies and quest battles rewards the most determined and cleverest.
+
+While there's some smoothing out between classes on certain aspects (they can all use healing, for example), the feeling of having a unique gameplay is present every time, and the diversity of spells (30~) usable on each turn allows for unique or roundabout uses of many mechanics.
+\
+objectives are all attainable, but often with help. Many hours of farm and tryhard work will be needed to complete the quest sequences, which often offer great rewards for those with the patience.
--- a/content/en/jeux/dofus/logo.png
+++ b/content/en/jeux/dofus/logo.png
--- a/content/en/jeux/dofus/screenshot.png
+++ b/content/en/jeux/dofus/screenshot.png
--- a/content/en/jeux/minecraft/index.md
+++ b/content/en/jeux/minecraft/index.md
@ -0,0 +1,36 @@
+---
+title: Minecraft
+seo_title: Minecraft
+summary: You like building and adventure ? Come on hop in our minecraft server !
+description: You like building and adventure ? Come on hop in our minecraft server !
+slug: minecraft
+author: Obsidian
+draft: false
+date: 
+lastmod: null
+expiryDate: null
+publishDate: null
+feature_image: null
+feature_image_alt: null
+categories:
+  - Jeux
+tags:
+  - Multijoueur
+  - Craft
+series: null
+toc: true
+related: true
+social_share: true
+newsletter: true
+disable_comments: false
+---
+
+Ahh, minecraft...
+
+...
+
+![Minecraft game](./logo.png)
+
+...
+
+...
--- a/content/en/jeux/minecraft/logo.png
+++ b/content/en/jeux/minecraft/logo.png
--- a/content/en/posts/_index.md
+++ b/content/en/posts/_index.md
@ -0,0 +1,8 @@
+---
+date: '2023-10-11 15:41 +0200'
+published: true
+title: Blog
+slug: posts
+summary: All posts from the site editors.
+description: All posts from the site editors
+---
--- a/content/en/posts/bienvenue/index.md
+++ b/content/en/posts/bienvenue/index.md
@ -0,0 +1,35 @@
+---
+newsletter: true
+social_share: true
+related: true
+toc: true
+date: 2023-10-05T10:46:55.000Z
+published: true
+title: Bienvenue
+seo_title: Bienvenue
+summary: null
+description: null
+slug: bienvenue
+author:
+  - <no value>
+draft: false
+lastmod: null
+expiryDate: null
+publishDate: null
+feature_image_alt: null
+series: null
+disable_comments: false
+---
+
+## Welcome
+
+Hello everyone and welcome to the Meridian Corp website!
+
+This site is dedicated to archiving projects and writing articles on subjects our team finds relevant.
+As we don't claim to be educated enough to discuss everything, we'll stick to our field, which is video games. (LOL)
+
+We hope you'll be happy to find the latest news from the group on this site, and that you'll enjoy reading our editorial team, who owe nothing to anyone and can express themselves freely.
+
+Kind regards
+
+Obsidian Glover
--- a/content/en/posts/le-site/index.md
+++ b/content/en/posts/le-site/index.md
@ -0,0 +1,125 @@
+---
+title: Le site
+seo_title: Le site
+slug: website
+date: 2023-10-09T18:20:00.000Z
+toc: true
+author:
+  - obsidian
+series: null
+---
+
+### 1 week
+
+That's how long it took me to create this site.
+Although it's time-consuming, I still haven't been able to find a real working method, and if I knew where to get my info, I've discovered a few tips for working with Hugo
+
+This is a static site, and I refer you to this article I wrote at the time:
+[https://site.lafun.fr/siteloweb/](https://site.lafun.fr/siteloweb/)
+
+But I'd like to tell you from a developer's point of view how these projects are a joy
+
+Hugo
+
+The framework used, Hugo, is a site generator based on file and code organization. As a dev, you understand the mechanics of the framework very well, so you can do what you're looking for, and the Go language, while not very elegant on the page, allows for correct verbosity while using command-line codes, so you don't get lost.
+
+### TinaCMS
+
+I spent nearly a week finding a CMS that meets the site's needs.
+
+Tina seems perfectly suited to its purpose and was as easy to set up as netlify or forestry: a config file that takes the content data structure in JSON and applies properties to the fields to create the forms. Really a piece of cake... but it took days to configure Tina in the desired mold.
+
+For example, in Hugo, files are arranged in folders and subfolders.\ folders.
+A simple list is a list of .md files containing information.
+But if you also want to store images or other content for each article created, you need to create a folder with an index.md file inside. This is called a branch bundle.
+And to create a branch bundle with Tina, we need to pass it a function so that it creates our files as index.md in a folder containing the title of our article:
+
+``typescript
+{
+  name: 'createurs',
+    label: 'Createurs',
+      path: 'content/createurs',
+        ui: {
+    filename: {
+      // if disabled, the editor can not edit the filename
+      readonly: true,
+        // Example of using a custom slugify function
+        slugify: (values) => {
+          // Values is an object containing all the values of the form. In this case it is {title?: string, topic?: string}
+          return `${values?.title
+            ?.toLowerCase()
+            .replace(/ /g, '-') + '/index.md'}`
+        },
+          }
+  },
+```
+
+\
+\
+Already, it matched my site and I could edit articles locally, but what about the online version?
+
+\
+Without any in-depth knowledge of automatic deployment modules, I had to write a CI/CD Pipeline to match the TinaCMS + Hugo integration.
+
+yaml
+name: Firebase update
+run-name: ${{ github.actor }} launched an update of the Meridian site
+on:
+  push:
+    branches:
+      - master
+jobs:
+  deploy:
+    runs-on: ubuntu-22.04
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Copy images
+        run: cp -r static/uploads/screenshots assets/images
+
+      - name: Setup Node
+        run: npm ci
+        
+      - name: Build TinaCMS
+        env:
+          TINA_PUBLIC_CLIENT_ID: ${{ secrets.TINA_PUBLIC_CLIENT_ID }}
+          TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
+        run: npx tinacms build
+
+      - name: Hugo setup
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: '0.119.0'
+          extended: true
+
+      - name: Build
+        run: hugo --minify
+        
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MERIDIAN_CORP }}'
+          projectId: meridian-corp
+          channelId: live
+```
+
+So there are several things:
+
+* actions/checkout\@v3 reads the file architecture on github
+* copy image transfers the screenshots folder from static/uploads/screenshots to assets/screenshots so that Hugo can retrieve them as image objects, and .resize them for example (he can't with the static folder).
+* Setup Node, without which tina won't work
+* Build TinaCMS is used to create the administration. You need to meet the prerequisites given in [their guide ](https://tina.io/docs/frameworks/hugo/) and install node.
+* Hugo Setup + Build to create the folder
+* Firebase lets you deploy my site automatically, manage production...
+
+### Domain
+
+Hosted at Gandi, I found a meridian-corp.org site available
+
+Sounds good... .org as an organization cut off from political members. A place that transcends countries.
+
+All we had to do was match the DNS keys between Gandi and Firebase, and the deployment was complete!
+
+And that's how this site was born.
--- a/content/en/projets/Hanzo/index.md
+++ b/content/en/projets/Hanzo/index.md
@ -0,0 +1,82 @@
+---
+title: Hanzo
+seo_title: Hanzo
+summary: First role playing game project.
+description: An adventure of ninja and mechas !
+slug: hanzo
+toc: true
+feature_image: hanzo_wallpaper.jpg
+date: 2022-05-10T14:52:30.000Z
+author:
+  - Obsidian
+project_types:
+  - Obsidian
+tech_stack:
+  - foundry
+---
+
+The aim of this article is to give you details of the Hanzo project and its creation.
+
+## Project history
+
+First of all, a little background is in order.
+
+The project was born in March 2021. Working in unenviable conditions at the time, I was looking for a way to satisfy my desire to create a game, and to mix it with a concrete project that was close to my heart.
+
+So I thought of a role-playing game.
+
+I've been interested in role-playing games for several years now, and in my spare time I've been creating games without beginning or end, where the rules were invented on the fly until they became tacit for the few players who shared them with me.
+
+With the advent of online role-playing platforms such as roll20, I've taken up this approach, which I believe shows even greater ability to provide players with an element of context to create immersive games.
+
+I therefore decided to implement a set of rules designed to be simpler, more affordable and more flexible than those of DnD5e.
+Despite this, I've endeavored to keep one rule template so that you can easily switch from one system to another as you see fit.
+
+So I designed the prototype for what would become a great adventure for me: Hanzo's Ruin.
+
+## Game content
+
+### Ninja class
+
+This role-playing game features a ninja class that's been thought out and designed to be modular in order to match traditional role-playing archetypes while maintaining uniformity between characters.
+
+As a strategic role-playing game, ninja techniques can be used in a wide range of combat configurations (increased mobility, camouflage layout or close-combat choices).
+
+The use of elemental Jutsus also enables them to react quickly both in combat and on the realm's scenery.
+
+Secret techniques let you play the famous 'manga protagonist' without taking advantage of the scenarium, giving each player a choice of spells rarely used by other shinobi.
+
+### Archetypes, clans & secret techniques
+
+The various archetypes are as follows:
+
+* Master of Blades, specializing in ninja weaponry and exploiting surprise attacks, will always seek to gain an advantage over an opponent before attacking.
+* Master of Taïjutsu, a specialist in mixing, he has learned numerous techniques to use his chakra in his muscles. His stamina and power in combat make him a powerful ally.
+* Chakra Masters, jutsu specialists with access to more chakra than other shinobi. They can manipulate the elements with precision.
+* Master of a Thousand Objects, specializing in ninja inventions, they create their own gadgets and tools for adventuring in the kingdom. Their great invention allows them to improve a weapon of choice.
+
+### Cards
+
+I've also thought about a game map, fully modeled to avoid getting lost in the terrain or having extra content for game masters to manage.
+\
+So I set up 3 maps of 125x125 squares, giving a real impression of exploration and dense, living forests.
+
+* The Cherry Forest, cradle of peace in the kingdom of Hanzo. Here you'll find a number of notable sites, including the 9 Wise Men and Hermit Hill.
+* The Desecrated Forest, a dark forest where evil reigns in web-covered caverns. However, the presence of great spirits continues to fight against the corruption that reigns here.
+* The forest of spirits, where the trees are so massive that you can walk on their branches. The cycle is disrupted here, and the dangers are great in this chakra-laden forest.
+
+I then created a town, Xaen, which contains all kinds of merchants, still in 125x125, allowing you to move between buildings and have the organic construction of a hidden village.
+
+A second, smaller village hides behind it, providing the city's inhabitants with a valuable rice farm.
+
+I then created the missing elements: mountain, palace, spring lake... taking more care with map sizes.
+
+While the forests are pleasantly large, the verticality of each map makes certain aspects of the journey unpleasant. The last maps, for example, are designed as a dungeon, a road and an arena.
+
+### Lore & Bestiary
+
+## Game design
+
+## Get the game
+
+## Install the game
--- a/content/en/projets/_index.md
+++ b/content/en/projets/_index.md
@ -0,0 +1,5 @@
+---
+title: Projects
+summary: All our projects, our games, our ambitions.
+description: Explore Meridian Corp. projects.
+---
--- a/content/en/projets/hanzo-vg/index.md
+++ b/content/en/projets/hanzo-vg/index.md
@ -0,0 +1,36 @@
+---
+title: Hanzo - The video-game
+seo_title: Hanzo - The video-game
+summary: Adaptation from the role playing game to a video game.
+description: Adaptation from the role playing game to a video game.
+slug: hanzo-vg
+feature_image: website.jpg
+date: 2023-02-20T08:52:30.000Z
+author:
+  - Obsidian
+project_types:
+  - Obsidian
+---
+
+### A video game?
+
+Yes, even though I'm already a bit overwhelmed by role-playing, I'm already projecting myself into video games.
+
+Having already made a few small games and feeling comfortable with the technical infrastructure of video game projects, I have the marbles to be able to make a great product.
+
+### Ambitions
+
+I'm not looking to make the new AAA or a game on the scale of NIndo: shinobi war, but an action-rpg type game where we follow the story of a team of ninja exploring the kingdom.
+So I think all I'd have to do is reuse or adapt role-playing game assets,
+It also pays homage to my favorite game series: the Tales of... (phantasia forever in my heart)
+
+But taking the approach that it's not Japanese writing stories set in a fantasized Europe, but Europeans writing a story set in a fantasized Japan!
+
+## Means
+
+To do this, I'm using the latest technologies: Unreal Engine, an obvious choice given its proven efficiency and ease of use.
+But I've also used tools to perform certain actions:
+
+## Prototype
+
+For the moment, the prototype has been set up under ...
--- a/content/en/projets/meridian-corp/Meridian_Logo_2bis.png
+++ b/content/en/projets/meridian-corp/Meridian_Logo_2bis.png
--- a/content/en/projets/meridian-corp/Meridian_Logo_Minecraft.png
+++ b/content/en/projets/meridian-corp/Meridian_Logo_Minecraft.png
--- a/content/en/projets/meridian-corp/index.md
+++ b/content/en/projets/meridian-corp/index.md
@ -0,0 +1,21 @@
+---
+title: Meridian Corp
+seo_title: Meridian Corp
+summary: Balance is finding it's place
+description: Meridian Corp is a project of community growing stronger each day !
+slug: meridian-corp
+date: 2023-07-20T08:52:30.000Z
+feature_image: Meridian_Logo_2bis.png
+author:
+  - Martin Gasque
+project_types:
+  - Community
+---
+
+Our very own baby, our island of freshness.
+
+The Meridian Corp is a bunch of good people who get together every day (or almost every day) to play on our discord.
+
+Despite our ambition to welcome anyone into our little sect, we're looking for a relaxed, family atmosphere so that we can remain human, even when the scale has been exceeded. :)
+
+{{< discordLink >}}
--- a/content/fr/JDB/index.md
+++ b/content/fr/JDB/index.md
@ -0,0 +1,44 @@
+---
+title: Journal de bord
+seo_title: journal-de-bord
+---
+
+La Meridian Corp est aujourd'hui un groupe en plein développement, mais ce n'a pas toujours été le cas...
+
+Tout commença en 2008 dans un groupe de discussion sur Battle.NET qui a été mis en place par 3 collocataires et rejoins par quelques collègues de jeu.\
+A cette époque, l'équipe n'avait pas de nom, et jouait principalement à Overwatch.
+
+Le groupe de discussion La Hype était une première approche d'un groupe sur lequel on recrutait quelques compagnons au fil de l'eau. C'est dans ce contexte que \*Stew, TosOp et Blazer-Scout \*ont rejoins l'aventure.
+
+Description du serveur "La Hype" (...) :
+
+> Pour 2 personnes :
+> \- Émincez le pelo
+> \- Placez le pelo dans un four a 200° pendant 10min
+> \- Pensez a sortir le pelo et le retourné afin qu'il puisse dorer
+> \- Servez le pelo dans une assiette creuse avec une sauce blanche (béarnaise par ex.)
+> Bon pélo !
+
+Mais cette plateforme (Bnet) n'était pas assez stable ni adapté a notre volonté de communication. Impossible de se transférer des images, l'historique de conversation est limité, et les canaux de discussions étaient inaccessibles une fois par semaine au moins.
+
+Obsidian proposa une (première) transition vers discord, et créât un serveur un peu miteux pour accueillir nos héros :
+
+![](/uploads/image_page/roadtomaster.png)
+
+Etant le premier serveur discord dans notre entourage, il a rapidement été rejoins par GeneralPetitCornichon/Furibar et sa troupe, et si on ne jouait pas toujours au même jeu, ils étaient déjà à l'écoute de ce qu'il se passait chez nous.
+
+C'est en 2020, au moment de la crise du Corona Virus, que le serveur s'est modifié. Suite a des altercations entre les membres du groupe le serveur ne servait plus et ne correspondait pas a l'espace dont on avait besoin pour coexister sans se marcher dessus.
+
+Obsidian a mis en place le serveur "Meridian" qui s'est voulu un serveur familial mais au sens plus large. Ce n'était pas un foyer, mais plusieurs qui se sont installés dans ce serveur bien plus développé que le précédent
+
+Un serveur sur lequel on s'est dû d'être les meilleures versions de nous même et accueillir en son sein de nouvelles têtes.
+
+![](/uploads/image_page/Meridian_originalserv.png)
+
+Le serveur bât alors son plein et deviens un véritable repaire qui nous corresponds, mélant de nombreux jeux et des discussions passionnantes.
+
+Après cela, de nombreux joueurs ont rejoins l'aventure grâce a la vague de Among Us de la pandémie, les plus notoires étant Betamèche, Karmared, Selenyx et Seum
+
+C'est après la pandémie que Obsidian, suite a toutes les rencontres qui ont été faites sur le discord, souhaita modifier le Meridian en un serveur communautaire, qui ne se ferme a personne et qui est voué a être de plus en plus habité pour y développer des projets plus ambitieux (Hanzo en ce qui le concerne).
+
+Obsidian demande alors à tout les joueurs du Meridian de le rejoindre sur un nouveau serveur, conçu avec plus de soin et des règles facilitant la gestion de plus de compagnons : Meridian Corp
--- a/content/fr/about/index.md
+++ b/content/fr/about/index.md
@ -0,0 +1,17 @@
+---
+title: À propos
+seo_title: À propos
+slug: about
+type: about
+description: Qui sont ces mystérieux personnages ? Voyons cela tout de suite...
+---
+
+La Meridian Corp est une communauté de créateurs de contenus et de jeux vidéos, de joueurs et joueuses qui se sont rencontrés par le jeu et qui ont fondé une communauté qu'il est possible à tous de rejoindre.
+
+Sur cette base, nous recrutons de jeux en jeux des membres de guilde, de compagnie ou d'escouade qui semblent avoir leur place chez nous et qui en cherchent une quelque part.
+
+Au-delà, nous sommes quelques créateurs qui recherchent quotidiennement comment animer et faire exister cette communautée, cela passe par la création de serveurs pour les divers jeux multijoueurs, par des sessions de conseils si besoin, que ce soit pour passer diamant sur League of Legends ou pour dépanner son ordinateur un jour de galère.
+
+Rejoignez-nous et voyons tous ensemble comment créer des événements qui nous ressemblent.
+
+Notre équipe, à l'attention quotidienne de ces derniers, est composée de membre plus étonnants, plus hilarants les uns que les autres, tels que :
--- a/content/fr/contact/index.md
+++ b/content/fr/contact/index.md
@ -0,0 +1,7 @@
+---
+type: contact
+title: Ce martien essaie de communiquer...
+seo_title: Contact
+description: Envoyez nous un mail ! On le lira avec grande attention.
+---
+
--- a/content/fr/createurs/Obsidian/Obsidian_Logo.png
+++ b/content/fr/createurs/Obsidian/Obsidian_Logo.png
--- a/content/fr/createurs/Obsidian/index.md
+++ b/content/fr/createurs/Obsidian/index.md
@ -0,0 +1,17 @@
+---
+title: Obsidian
+seo_title: Obsidian Glover
+summary: 'Créateur de la structure Meridian.'
+slug: obsidian
+feature_image: Obsidian_Logo.png
+---
+
+Obsidian Glover, Martin Gasque, est le créateur de la Meridian Corp. 
+
+Il créer des jeux de rôle principalement, mais a également conçu ce site web.
+
+Il n'a créer que des jeux pour ses amis mais commence a crafter du jv pour tous !
+
+S'il est toujours occupé par son projet Hanzo, il sera toujours prêt à discuter, échanger avec n'importe qui sur n'importe quoi !
+
+Son ambition est de créer une communauté de joueurs qui saurait croiser les savoirs pour créer des projets tous ensemble
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.d{fill:#fff;}.e{fill:#1d1d1b;font-family:MontserratRoman-Regular, MontserratRoman Regular;font-size:66.58px;letter-spacing:.1em;}.f{fill:#010101;}</style></defs><g id="a"><rect class="d" width="512" height="512"/></g><g id="b"><path class="f" d="M130.28,143.11s.93,.55,.97,.59l123.87,123.87c1.18,1.18,3.1,1.18,4.28,0l124.04-124.04c.13-.13,.62-.43,.62-.42h0l.52-.27h0c29.39,31.24,47.39,73.3,47.39,119.57s-18.05,88.43-47.5,119.67c0,0,0,.02,0,.02l6.79,6.79s.02,0,.02,0c31.19-32.99,50.32-77.5,50.32-126.48s-19.08-93.39-50.21-126.37l.04-.04-7.38-7.38s-.02,0-.02,0l-7.35,7.62,.13-.1c-.11,.08-.22,.17-.32,.27l-116.7,116.7c-1.18,1.18-3.1,1.18-4.28,0l-116.91-116.91c-.2-.2-.42-.36-.66-.5h0l-7-7s-.02,0-.02,0l-7.32,7.32-.03-.03c-31.14,32.98-50.24,77.46-50.24,126.4s19.2,93.66,50.49,126.66c0,0,.02,0,.02,0l6.79-6.79s0-.02,0-.02c-29.55-31.26-47.67-73.44-47.67-119.85s17.94-88.17,47.23-119.38"/><path class="f" d="M377.16,135.77l6.81-6.81c-33-31.26-77.56-50.43-126.61-50.43-48.94,0-93.42,19.09-126.4,50.24l6.81,6.81c31.23-29.4,73.3-47.42,119.58-47.42,46.38,0,88.54,18.1,119.79,47.62Z"/><path class="f" d="M364.8,346.29l4.51,4.51c20.68-21.83,33.36-51.31,33.36-83.75,0-32.37-12.63-61.8-33.23-83.61l-4.51,4.51c19.45,20.66,31.37,48.49,31.37,79.11,0,30.68-11.97,58.57-31.5,79.24Z"/><path class="f" d="M149.76,346.21l-4.51,4.51c-20.68-21.83-33.36-51.31-33.36-83.75s12.63-61.8,33.23-83.61l4.51,4.51c-19.45,20.66-31.37,48.49-31.37,79.11,0,30.68,11.97,58.57,31.5,79.24Z"/><path class="f" d="M272.99,336.54c-.11-8.65-7.15-15.62-15.82-15.62-4.98,0-9.42,2.3-12.32,5.9,4.3,.7,9.38,2.01,14.71,3.87,5.1,1.78,9.71,3.82,13.43,5.86Z"/><path class="f" d="M241.35,337.04c.16,8.61,7.18,15.54,15.82,15.54,4.88,0,9.24-2.21,12.14-5.68-4.17-.72-9.02-1.99-14.1-3.76-5.3-1.85-10.07-3.98-13.87-6.1Z"/><path class="f" d="M255.88,341.24c-5.75-2.01-10.8-4.33-14.4-6.51-.08,.66-.13,1.33-.13,2.01,0,.1,0,.19,0,.29,3.79,2.12,8.56,4.25,13.87,6.1,5.08,1.77,9.93,3.04,14.1,3.76,.49-.59,.94-1.21,1.34-1.86-4.09-.58-9.28-1.87-14.78-3.79Z"/><path class="f" d="M259.29,331.47c5.38,1.88,10.15,4.04,13.69,6.09,.01-.27,.02-.54,.02-.81,0-.07,0-.14,0-.21-3.72-2.04-8.33-4.08-13.43-5.86-5.33-1.86-10.41-3.17-14.71-3.87-.22,.27-.42,.54-.62,.82,4.14,.56,9.43,1.87,15.06,3.83Z"/><path class="f" d="M244.23,327.64c-1.45,2.06-2.42,4.48-2.76,7.09,3.6,2.18,8.65,4.5,14.4,6.51,5.5,1.92,10.68,3.21,14.78,3.79,1.35-2.19,2.18-4.74,2.32-7.47-3.54-2.05-8.31-4.21-13.69-6.09-5.63-1.96-10.92-3.27-15.06-3.83Z"/><text class="e" transform="translate(90.61 463.6)"><tspan x="0" y="0">MERIDIAN</tspan></text><rect class="d" x="36.22" y="443.66" width="439.56" height="8.44"/></g><g id="c"><rect class="d" x="361.04" y="117.02" width="20.43" height="20.43" transform="translate(198.7 -225.25) rotate(45)"/><rect class="d" x="130.21" y="113.74" width="20.43" height="20.43" transform="translate(122.6 -62.5) rotate(43.1)"/></g></svg>