Initial commit

Will it deploy one day ?
This commit is contained in:
Martin Gasque 2024-02-20 08:59:37 +01:00
parent c1a9cccf84
commit 0ba3f3c7c5
401 changed files with 39221 additions and 1 deletions

70
.gitignore vendored Normal file
View File

@ -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

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "themes/liftoff"]
path = themes/liftoff
url = https://github.com/wjh18/hugo-liftoff.git

0
.hugo_build.lock Normal file
View File

View File

@ -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"

20
about/index.md Normal file
View File

@ -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 :

6
archetypes/default.md Normal file
View File

@ -0,0 +1,6 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1000 KiB

158
assets/custom.css Normal file
View File

@ -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;
}

17
assets/custom.js Normal file
View File

@ -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);
// });

BIN
assets/images/default.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

3
assets/js/app.js Normal file
View File

@ -0,0 +1,3 @@
import { switcher, clipboard, toggleToc } from './components/components';
import { header } from './layouts/header';
import { home } from './pages/home';

View File

@ -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 };

View File

@ -0,0 +1,3 @@
export { switcher } from './switchTheme';
export { clipboard } from './clipboard';
export { toggleToc } from './toc';

View File

@ -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 };

View File

@ -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 };

View File

@ -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 };

24
assets/js/pages/home.js Normal file
View File

@ -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 };

10
assets/jsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*"
]
}
}
}

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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/";

182
assets/scss/base/_base.scss Normal file
View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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');
}

View File

@ -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);
}
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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');
}

View File

@ -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);
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -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;
}

View File

@ -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);
}
}

View File

@ -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);
}

View File

@ -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;
}
}
}

48
assets/scss/main.scss Normal file
View File

@ -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';

View File

@ -0,0 +1,10 @@
#contact-form {
flex-direction: column;
row-gap: 15px;
max-width: 500px;
margin-top: 30px;
button {
align-self: flex-start;
}
}

View File

@ -0,0 +1,11 @@
.error-404 {
margin-top: 50px;
h1 {
margin: 0;
}
p {
margin-top: 10px;
}
}

View File

@ -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);
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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');
}

View File

@ -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;
}

349
assets/scss/vendors/_normalize.scss vendored Normal file
View File

@ -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;
}

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 485 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1016 KiB

4
config.toml Normal file
View File

@ -0,0 +1,4 @@
baseURL = 'https://meridian-corp.org'
languageCode = 'fr-fr'
title = 'Meridian Corp'
theme = 'liftoff'

248
config/_default/hugo.toml Normal file
View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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'

View File

@ -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

View File

@ -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

14
content/_index.md Normal file
View File

@ -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 >}}

67
content/emoji-support.md Normal file
View File

@ -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 >}}

44
content/en/JDB/index.md Normal file
View File

@ -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.

17
content/en/about/index.md Normal file
View File

@ -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 :

View File

@ -0,0 +1,7 @@
---
type: contact
title: Thoses aliens are trying to reach us
seo_title: Contact
description: Send us an email !
---

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

View File

@ -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.

View File

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -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

View File

@ -0,0 +1,5 @@
---
title: "Les créateurs"
summary: "La liste des créateurs"
description: "Les créateurs de contenus sur le Meridian."
---

View File

@ -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
---

View File

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 KiB

View File

@ -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)
...
...

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -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
---

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -0,0 +1,5 @@
---
title: Projects
summary: All our projects, our games, our ambitions.
description: Explore Meridian Corp. projects.
---

View File

@ -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 ...

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -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 >}}

44
content/fr/JDB/index.md Normal file
View File

@ -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

17
content/fr/about/index.md Normal file
View File

@ -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 :

View File

@ -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.
---

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

View File

@ -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

Some files were not shown because too many files have changed in this diff Show More