variables SCSSvariables TS

Couleurs

Les couleurs du thème sont organisés en trois couples, avec une couleur principale (utilisée pour les fonds notamment) et son accent (utilisée pour les boutons) :

Les noms sont inventés et ne correspondent pas à des valeurs standards.

En plus de ça il existe deux couleurs techniques : light et dark.

FLOWER

FLOWER

ABYSS

ABYSS

SUN

SUN

MIST

MIST

LAGOON

LAGOON

GROUND

GROUND

LIGHT

LIGHT

DARK

DARK
variables SCSS

Polices

Sur le site, il y a deux polices différentes :

  • Rubik Regular, utilisée pour le texte de base,
  • Roboto Slab Light pour les titres, les citations (composant Quote) et les noms de composants.
composantéchelle de pagedémontré globalement

Layout

Contient les éléments structurels communs à toutes les pages du site.

Il inclut :

composantuniquedans le layout

Back to top

Un bouton flottant pour remonter en haut de la page.

composantéchelle de sectiongénériqueauto-démonstration

Row

Une section de page : un titre et un id optionnel et surtout du contenu.

Le composant peut accueillir optionellement une liste de mots-clés, affiché par une Badges list

Spécialisations

Le composant peut être encapsulé et pré-configuré en d'autres composants de la même échelle, plus spécialisés.

Pour l'instant, la seule spécialisation est PageHeader.

Un PageHeader tout simple

Juste le titre et le sous-titre

Un PageHeader bien équipé

Assorti d'un LinksMenu grossi et d'une TableOfContent

composantitératiflienscontenu de row

Table of contents

Permet la navigation entre les sections d'une page.

Quote

Met en valeur un texte et, si applicable, affiche son auteur et sa source.

Ceci est une simple citation.
Ceci est une citation avec auteur et source

- Source optionnelle,Auteur optionnel

Project

Présente les grandes lignes d'un projet, avec : sa stack, sa date, son contenu.

Affiché dans le Carousel.

Titre du projet

full-stacktag 1tag 222 juin 2022

Contenu du projet
composantitératifspécifique à la page blogcontenu de row

Articles list

Sur la page Blog, affiche la liste des articles du site.

composantitératifspécifique à la page motifscontenu de row

Motifs list

Sur la page Motifs, affiche la liste des articles du site.

composantiteratif

Badges list

Affiche une liste inline de badges pilules.

La couleur des badges peut être paramétrée individuellement au besoin.

Badge 1Badge 2