chore: split and move definitions to a subdirectory

src/scss/_definitions.scss

@@ -1,38 +1,12 @@
-/* --- 01. DEFINITIONS --- */
+// DEFINITIONS
 
-/*
- * Les définitions globales de la stylesheet.
- * Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
- * D'autres définitions importantes sont visibles dans les autres parties de la fiche.
- *
- * Pour customiser les couleurs, voyez _palette.scss
- */
+// Global definitions and variables of the stylesheet
+// With them, you can customize easily how the style look
+// Look at each component inside the definitions subfolder to customize the
+// styles
 
-// A modifier pour customiser le style facilement :
-
-$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
-$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
-$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
-$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
-$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
-
-$baseline: 1.6;
-$fontsize: 4.75mm;
-
-$lineheight: $baseline * 1rem;
-$lineheight_half: $lineheight/2;
-$lineheight_quarter: $lineheight/4;
-
-$card-header-margin: $lineheight;
-
-$card-radius: 0px;
-$btn-radius: 0px;
-$border-size: 0px;
-
-$fontweight_big: 300;
-$fontweight_base: 400;
-$fontweight_bold: 600;
-$fontweight_hyper: 800;
-
-$basefont: Open Sans, sans-serif;
-$titlefont: Amatic SC, sans-serif;
+@import 'definitions/palette';
+@import 'definitions/shadows';
+@import 'definitions/fonts';
+@import 'definitions/borders';
+@import 'definitions/sizing';

src/scss/definitions/_borders.scss

@@ -0,0 +1,5 @@
+// BORDERS AND BORDER-RADIUSES
+
+$card-radius: 0px;
+$btn-radius: 0px;
+$border-size: 0px;

src/scss/definitions/_fonts.scss

@@ -0,0 +1,12 @@
+// FONTS
+// Define how looks the text
+
+$fontsize: 4.75mm;
+
+$fontweight_big: 300;
+$fontweight_base: 400;
+$fontweight_bold: 600;
+$fontweight_hyper: 800;
+
+$basefont: Open Sans, sans-serif;
+$titlefont: Amatic SC, sans-serif;

src/scss/definitions/_shadows.scss

@@ -0,0 +1,8 @@
+// SHADOWS
+// Define how looks the shadows and the relief effects
+
+$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
+$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
+$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
+$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
+$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);

src/scss/definitions/_sizing.scss

@@ -0,0 +1,10 @@
+// SIZING
+// All the spacing and sizing variables
+
+$baseline: 1.6;
+
+$lineheight: $baseline * 1rem;
+$lineheight_half: $lineheight/2;
+$lineheight_quarter: $lineheight/4;
+
+$card-header-margin: $lineheight;

src/scss/style.scss

@@ -19,8 +19,6 @@
 
 @import 'angled-edges';
 
-@import 'palette';
-
 @import 'definitions';
 
 @import 'mixins';