From aeb6d187bee909f1d4a704e79edf66ef0dcfde2c Mon Sep 17 00:00:00 2001
From: Willy Brauner <willybrauner@gmail.com>
Date: Tue, 6 Feb 2024 16:51:55 +0100
Subject: [PATCH]  refacto ratio

---
 .../fonts/roboto-regular/roboto-regular.ttf   | Bin
 .../fonts/roboto-regular/roboto-regular.woff  | Bin
 .../fonts/roboto-regular/roboto-regular.woff2 | Bin
 apps/front/src/styles/_fonts.scss             |  16 +
 apps/front/src/styles/_functions.scss         |  89 +++++
 apps/front/src/styles/_ratio.scss             |  76 ++++
 apps/front/src/styles/_reset.scss             | 332 ++++++++++++++++++
 apps/front/src/styles/_texts.scss             |   5 +
 apps/front/src/styles/_variables.scss         |  82 +----
 .../src/styles/fonts/_roboto-regular.scss     |  14 -
 apps/front/src/styles/index.scss              |  84 ++++-
 11 files changed, 602 insertions(+), 96 deletions(-)
 rename apps/front/src/{styles => }/fonts/roboto-regular/roboto-regular.ttf (100%)
 rename apps/front/src/{styles => }/fonts/roboto-regular/roboto-regular.woff (100%)
 rename apps/front/src/{styles => }/fonts/roboto-regular/roboto-regular.woff2 (100%)
 create mode 100644 apps/front/src/styles/_fonts.scss
 create mode 100644 apps/front/src/styles/_functions.scss
 create mode 100644 apps/front/src/styles/_ratio.scss
 create mode 100644 apps/front/src/styles/_reset.scss
 create mode 100644 apps/front/src/styles/_texts.scss
 delete mode 100644 apps/front/src/styles/fonts/_roboto-regular.scss

diff --git a/apps/front/src/styles/fonts/roboto-regular/roboto-regular.ttf b/apps/front/src/fonts/roboto-regular/roboto-regular.ttf
similarity index 100%
rename from apps/front/src/styles/fonts/roboto-regular/roboto-regular.ttf
rename to apps/front/src/fonts/roboto-regular/roboto-regular.ttf
diff --git a/apps/front/src/styles/fonts/roboto-regular/roboto-regular.woff b/apps/front/src/fonts/roboto-regular/roboto-regular.woff
similarity index 100%
rename from apps/front/src/styles/fonts/roboto-regular/roboto-regular.woff
rename to apps/front/src/fonts/roboto-regular/roboto-regular.woff
diff --git a/apps/front/src/styles/fonts/roboto-regular/roboto-regular.woff2 b/apps/front/src/fonts/roboto-regular/roboto-regular.woff2
similarity index 100%
rename from apps/front/src/styles/fonts/roboto-regular/roboto-regular.woff2
rename to apps/front/src/fonts/roboto-regular/roboto-regular.woff2
diff --git a/apps/front/src/styles/_fonts.scss b/apps/front/src/styles/_fonts.scss
new file mode 100644
index 00000000..a7fef3c5
--- /dev/null
+++ b/apps/front/src/styles/_fonts.scss
@@ -0,0 +1,16 @@
+@font-face {
+  font-family: "roboto-regular";
+  src: url("/src/fonts/roboto-regular/roboto-regular.woff2") format("woff2"),
+       url("/src/fonts/roboto-regular/roboto-regular.woff") format("woff"),
+       url("/src/fonts/roboto-regular/roboto-regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@mixin font-roboto-regular {
+  font-family: "roboto-regular", sans-serif;
+}
+
+
+// Declare font-face & font mixin...
+// Add the fonts in src/fonts folder
diff --git a/apps/front/src/styles/_functions.scss b/apps/front/src/styles/_functions.scss
new file mode 100644
index 00000000..83b3c9cb
--- /dev/null
+++ b/apps/front/src/styles/_functions.scss
@@ -0,0 +1,89 @@
+@use  "./_variables" as *;
+@use 'sass:math';
+
+///////////////////////////////////////
+//
+//
+// FUNCTIONS
+//
+//
+///////////////////////////////////////
+
+/// Is a number
+/// @param {any} $value -
+/// @return {boolean} -
+@function is-number($value) {
+  @return type-of($value)=='number';
+}
+
+//// check if a value is a string
+@function is-string($value) {
+  @return type-of($value)=="string";
+}
+
+/// Is absolute number
+/// @param {Number} $value -
+/// @return {Boolean} -
+@function is-absolute-number($value) {
+  @return is-number($value) and unitless($value);
+}
+
+/// Is a "calc" value
+/// @param {any} $value -
+/// @return {Boolean} -
+@function is-calc($value) {
+ @return is-string($value) and index('calc', $value) != null;
+}
+
+/// Calculate VW ratio
+/// @param {Number} $n1 -
+/// @param {Number} $n2 [1920] -
+/// @return {} - vw value
+@function ratioVW($n1, $n2: $viewport-reference-width) {
+  @if not is-absolute-number($n1) or is-calc($n1) {
+    @return $n1;
+  }
+  @else {
+    @return calc($n1 / $n2 * 100) + vw;
+  }
+}
+
+/// Calculate VH ratio
+/// @param {Number} $n1 -
+/// @param {Number} $n2 [1080] -
+/// @return {type} -
+@function ratioVH($n1, $n2 : 1080) {
+  @if not is-absolute-number($n1) or is-calc($n1) {
+    @return $n1;
+  }
+  @else {
+    @return calc($n1 / $n2 * 100)+vh;
+  }
+}
+
+/// Add pixel unit to values
+/// @param {Number} $value -
+/// @return {string} - pixel value
+@function toPx($value) {
+  @if is-number($value) {
+    @return #{$value} + px;
+  } @else {
+    @return $value;
+  }
+}
+
+/// Add rem to values
+/// @param {Number} $value -
+/// @return {string} - rem value
+@function toRem($value) {
+  @if is-number($value) {
+    @return #{$value} + rem;
+  } @else {
+    @return $value;
+  }
+}
+
+// remove Units from a string
+@function strip-units($number) {
+  @return math.div($number, ($number * 0 + 1));
+}
diff --git a/apps/front/src/styles/_ratio.scss b/apps/front/src/styles/_ratio.scss
new file mode 100644
index 00000000..b9d36776
--- /dev/null
+++ b/apps/front/src/styles/_ratio.scss
@@ -0,0 +1,76 @@
+@use "./_variables" as *;
+@use "./_functions" as *;
+
+/// Set property calculated with VH & VW ratio
+/// @param {css property} $property
+/// @param {Number} $n1
+/// @param {Number} $ratioVH [850]
+/// @param {Number} $ratioVW [1440]
+/// @output
+@mixin propertyVH($property, $n1,$ratioVH: $viewport-reference-desktop-height, $ratioVW: $viewport-reference-desktop-width) {
+  #{$property} : #{ratioVH($n1, $ratioVH)};
+  @if $ratioVW > 0 {
+    @media (max-aspect-ratio: #{ #{$ratioVW} / #{$ratioVH+1} }) {
+      #{$property} : #{ratioVW($n1, $ratioVW)};
+    }
+  }
+}
+
+/// Set property calculated with VW ratio
+/// @param {css property} $property
+/// @param {Number} $n1
+/// @param {Number} $ratioVW []
+/// @output
+@mixin propertyVW($property, $n1, $ratioVW: strip-units($breakpoint-mobile)) {
+  #{$property} : #{ratioVW($n1, $ratioVW)};
+}
+
+/// Set property rem
+/// @param {css property} $property
+/// @param {Number | Number[]} $value1 - desktop value
+/// @param {Number | Number[]} $value2 [] - mobile value
+/// @output
+@mixin propertyRem($property, $value1, $value2: $value1) {
+  @if length($value1) == 1 {
+    #{$property}: toRem($value1);
+  } @else if length($value1) == 2 {
+    #{$property}: toRem(nth($value1, 1)) toRem(nth($value1, 2))
+  } @else if length($value1) == 3 {
+    #{$property}: toRem(nth($value1, 1)) toRem(nth($value1, 2)) toRem(nth($value1, 3))
+  } @else if length($value1) == 4 {
+    #{$property}: toRem(nth($value1, 1)) toRem(nth($value1, 2)) toRem(nth($value1, 3)) toRem(nth($value1, 4))
+  }
+  @if $value2 != $value1 {
+    @media screen and (max-width: $breakpoint-tablet) {
+      @if length($value2) == 1 {
+        #{$property}: toRem($value2);
+      } @else if length($value2) == 2 {
+        #{$property}: toRem(nth($value2, 1)) toRem(nth($value2, 2))
+      } @else if length($value2) == 3 {
+        #{$property}: toRem(nth($value2, 1)) toRem(nth($value2, 2)) toRem(nth($value2, 3))
+      } @else if length($value2) == 4 {
+        #{$property}: toRem(nth($value2, 1)) toRem(nth($value2, 2)) toRem(nth($value2, 3)) toRem(nth($value2, 4))
+      }
+    }
+  }
+}
+
+@mixin propertyViewport($property, $value1, $value2: $value1, $breakpoint: $breakpoint-tablet, $cap: false) {
+  @include propertyVH($property, $value1);
+  @media screen and (max-width: $breakpoint-tablet) {
+    @include propertyVW($property, $value2);
+  }
+  @if $cap {
+    @media (min-width: $breakpoint-bigLaptop) {
+      @if length($value1) == 1 {
+        #{$property}: toPx($value1);
+      } @else if length($value1) == 2 {
+        #{$property}: toPx(nth($value1, 1)) toPx(nth($value1, 2))
+      } @else if length($value1) == 3 {
+        #{$property}: toPx(nth($value1, 1)) toPx(nth($value1, 2)) toPx(nth($value1, 3))
+      } @else if length($value1) == 4 {
+        #{$property}: toPx(nth($value1, 1)) toPx(nth($value1, 2)) toPx(nth($value1, 3)) toPx(nth($value1, 4))
+      }
+    }
+  }
+}
diff --git a/apps/front/src/styles/_reset.scss b/apps/front/src/styles/_reset.scss
new file mode 100644
index 00000000..585b1b10
--- /dev/null
+++ b/apps/front/src/styles/_reset.scss
@@ -0,0 +1,332 @@
+/* ----------------------------------------------------------------------------- GLOBAL */
+
+/**
+ * Hard reset margin and padding
+ */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Default Box sizing on before & after pseudo elements
+ */
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * Default Box sizing
+ * Correct the line height in all browsers.
+ * Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  box-sizing: border-box;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+/* ----------------------------------------------------------------------------- SECTION */
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/* ----------------------------------------------------------------------------- TEXT */
+
+/**
+ * Remove default title browser margin
+ * Remove default title browser UGLY bold font weight
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-size: 1em;
+  margin: 0;
+  font-weight: normal;
+}
+
+/**
+ * Remove the gray background on active links in IE 10.
+ * Remove default underline
+ */
+a {
+  background-color: transparent;
+  text-decoration: none;
+}
+
+/**
+ * Init flat font-wheight
+ */
+b,
+strong {
+  font-weight: normal;
+}
+
+/**
+ * Remove list style dote by default
+ */
+ul {
+  list-style: none;
+}
+
+/**
+ * Correct the inheritance and scaling of font size in all browsers.
+ * Correct the odd `em` font sizing in all browsers.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
+ */
+pre {
+  font-size: 1em;
+  font-family: inherit;
+  margin: 0;
+}
+
+/**
+ * Correct the inheritance and scaling of font size in all browsers.
+ * Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: inherit;
+  font-size: 1em;
+}
+
+/**
+ * Init the correct font size in all browsers.
+ */
+small {
+  font-size: 1em;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 1em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: 0;
+}
+
+sup {
+  top: 0;
+}
+
+/**
+ * Add the correct box sizing in Firefox.
+ * Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  margin: 0 auto;
+}
+
+/* ----------------------------------------------------------------------------- TEXT CONTENT */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+/*
+ * Add the correct display in all browsers.
+ * Remove outline.
+ */
+summary {
+  display: block;
+  outline: none;
+}
+
+/**
+ * Remove arrow indicatore
+ */
+details summary::-webkit-details-marker {
+  display:none;
+}
+
+
+/* ----------------------------------------------------------------------------- MEDIA */
+
+/**
+ * Init position
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  display: block;
+  border-style: none;
+}
+
+/* ----------------------------------------------------------------------------- FORM */
+
+/**
+ * Change the font styles in all browsers.
+ * Remove the margin in Firefox and Safari.
+ * Remove background color
+ * Remove border
+ * Remove outline
+ */
+button,
+input,
+optgroup,
+option,
+select,
+textarea {
+  display: block;
+  margin: 0;
+  border: 0;
+  font-family: inherit;
+  font-size: 1em;
+  font-weight: normal;
+  line-height: normal;
+  color: inherit;
+  background: none;
+  text-transform: none;
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  overflow: visible;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Init full style
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Fieldset
+ */
+fieldset {
+  display: block;
+  font-size: 1em;
+  padding: 0;
+  border: 0;
+}
+
+/**
+ * Correct the text wrapping in Edge and IE.
+ * Correct the color inheritance from `fieldset` elements in IE.
+ * Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend
+ */
+legend {
+  display: block;
+  box-sizing: border-box;
+  color: inherit;
+  border: none;
+  padding: 0;
+  white-space: normal;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Add the correct box sizing in IE 10.
+ * Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+/**
+ * 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;
+}
+
+/**
+ *  Correct the odd appearance in Chrome and Safari.
+ *  Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ * Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+/* ----------------------------------------------------------------------------- MISC */
+
+/**
+ * Add the correct display in IE 10+.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
diff --git a/apps/front/src/styles/_texts.scss b/apps/front/src/styles/_texts.scss
new file mode 100644
index 00000000..0d91ff1f
--- /dev/null
+++ b/apps/front/src/styles/_texts.scss
@@ -0,0 +1,5 @@
+@use "./_variables" as *;
+
+@mixin text-title-1 ($ratio:1) {
+
+}
diff --git a/apps/front/src/styles/_variables.scss b/apps/front/src/styles/_variables.scss
index b6581831..35697272 100644
--- a/apps/front/src/styles/_variables.scss
+++ b/apps/front/src/styles/_variables.scss
@@ -1,11 +1,7 @@
-// @import "./index.scss";
-
-// ----------------------------------------------------------------------------- LESS VAR
-
-// Used by ratio.less
+// Used by ratio
 $viewport-reference-width: 375;
 $viewport-reference-height: 667;
-$viewport-reference-desktop-width: 1400;
+$viewport-reference-desktop-width: 1440;
 $viewport-reference-desktop-height: 900;
 
 // breakpoints
@@ -15,77 +11,3 @@ $breakpoint-laptop: 1024px;
 $breakpoint-bigLaptop: 1440px;
 $breakpoint-desktop: 1680px;
 
-// ----------------------------------------------------------------------------- CSS VAR
-
-:root {
-  // DO NOT TOUCH
-  //  .propertyViewport(--font-size, 1);
-
-  // Ratio variables
-  --viewport-reference-width: $viewport-reference-width;
-  --viewport-reference-height: $viewport-reference-height;
-  --viewport-reference-desktop-width: $viewport-reference-desktop-width;
-  --viewport-reference-desktop-height: $viewport-reference-desktop-height;
-
-  // breakpoints
-  --breakpoint-mobile: $breakpoint-mobile;
-  --breakpoint-tablet: $breakpoint-tablet;
-  --breakpoint-laptop: $breakpoint-laptop;
-  --breakpoint-bigLaptop: $breakpoint-bigLaptop;
-  --breakpoint-desktop: $breakpoint-desktop;
-
-  // Colors
-  --color-black: #000;
-  --color-white: #fff;
-  --color-bg: var(--color-white);
-  --color-text: var(--color-black);
-  --color-blue-cher-ami: #2263fd;
-  // ...
-
-  // Grid columns
-  --grid-column-1: 8rem;
-  --grid-column-2: calc(var(--grid-column-1) * 2);
-  --grid-column-3: calc(var(--grid-column-1) * 3);
-  --grid-column-4: calc(var(--grid-column-1) * 4);
-  --grid-column-5: calc(var(--grid-column-1) * 5);
-  --grid-column-6: calc(var(--grid-column-1) * 6);
-  --grid-column-7: calc(var(--grid-column-1) * 7);
-  --grid-column-8: calc(var(--grid-column-1) * 8);
-  --grid-column-9: calc(var(--grid-column-1) * 9);
-  --grid-column-10: calc(var(--grid-column-1) * 10);
-  --grid-column-11: calc(var(--grid-column-1) * 11);
-  --grid-column-12: calc(var(--grid-column-1) * 12);
-  --grid-column-13: calc(var(--grid-column-1) * 13);
-  --grid-column-14: calc(var(--grid-column-1) * 14);
-  --grid-column-15: calc(var(--grid-column-1) * 15);
-  --grid-column-16: calc(var(--grid-column-1) * 16);
-  --grid-column-17: calc(var(--grid-column-1) * 17);
-  --grid-column-18: calc(var(--grid-column-1) * 18);
-
-  // ease
-  // $credit http://matthewlein.com/ceaser/
-  --ease-power1-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-  --ease-power1-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --ease-power1-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  --ease-power2-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --ease-power3-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-  --ease-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);
-  --ease-power3-in-out: cubic-bezier(0.77, 0, 0.175, 1);
-  --ease-power4-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-  --ease-power4-out: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-power4-in-out: cubic-bezier(0.86, 0, 0.07, 1);
-  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
-  --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);
-  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
-  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);
-  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
-  --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
diff --git a/apps/front/src/styles/fonts/_roboto-regular.scss b/apps/front/src/styles/fonts/_roboto-regular.scss
deleted file mode 100644
index a5aafc0c..00000000
--- a/apps/front/src/styles/fonts/_roboto-regular.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@font-face {
-  font-family: "roboto-regular";
-  // prettier-ignore
-  src: url("/src/styles/fonts/roboto-regular/roboto-regular.woff2") format("woff2"),
-       url("/src/styles/fonts/roboto-regular/roboto-regular.woff") format("woff"),
-       url("/src/styles/fonts/roboto-regular/roboto-regular.ttf") format("truetype");
-
-  font-weight: normal;
-  font-style: normal;
-}
-
-@mixin font-roboto-regular {
-  font-family: "roboto-regular", sans-serif;
-}
diff --git a/apps/front/src/styles/index.scss b/apps/front/src/styles/index.scss
index 7c618911..030e8d94 100644
--- a/apps/front/src/styles/index.scss
+++ b/apps/front/src/styles/index.scss
@@ -1,5 +1,85 @@
+// fonts
+@import "./_fonts.scss";
+
+// mixins
+@import "./reset.scss";
+@import "./_functions.scss";
+@import "./_ratio.scss";
+@import "./_texts.scss";
 @import "./_variables.scss";
-@import "./fonts/_roboto-regular.scss";
+
+:root {
+  // DO NOT TOUCH
+  @include propertyViewport(--font-size, 1);
+
+  // Ratio variables
+  --viewport-reference-width: $viewport-reference-width;
+  --viewport-reference-height: $viewport-reference-height;
+  --viewport-reference-desktop-width: $viewport-reference-desktop-width;
+  --viewport-reference-desktop-height: $viewport-reference-desktop-height;
+
+  // breakpoints
+  --breakpoint-mobile: $breakpoint-mobile;
+  --breakpoint-tablet: $breakpoint-tablet;
+  --breakpoint-laptop: $breakpoint-laptop;
+  --breakpoint-bigLaptop: $breakpoint-bigLaptop;
+  --breakpoint-desktop: $breakpoint-desktop;
+
+  // Colors
+  --color-black: #000;
+  --color-white: #fff;
+  --color-bg: var(--color-white);
+  --color-text: var(--color-black);
+  --color-blue-cher-ami: #2263fd;
+  // ...
+
+  // Grid columns
+  --grid-column-1: 8rem;
+  --grid-column-2: calc(var(--grid-column-1) * 2);
+  --grid-column-3: calc(var(--grid-column-1) * 3);
+  --grid-column-4: calc(var(--grid-column-1) * 4);
+  --grid-column-5: calc(var(--grid-column-1) * 5);
+  --grid-column-6: calc(var(--grid-column-1) * 6);
+  --grid-column-7: calc(var(--grid-column-1) * 7);
+  --grid-column-8: calc(var(--grid-column-1) * 8);
+  --grid-column-9: calc(var(--grid-column-1) * 9);
+  --grid-column-10: calc(var(--grid-column-1) * 10);
+  --grid-column-11: calc(var(--grid-column-1) * 11);
+  --grid-column-12: calc(var(--grid-column-1) * 12);
+  --grid-column-13: calc(var(--grid-column-1) * 13);
+  --grid-column-14: calc(var(--grid-column-1) * 14);
+  --grid-column-15: calc(var(--grid-column-1) * 15);
+  --grid-column-16: calc(var(--grid-column-1) * 16);
+  --grid-column-17: calc(var(--grid-column-1) * 17);
+  --grid-column-18: calc(var(--grid-column-1) * 18);
+
+  // ease
+  // $credit http://matthewlein.com/ceaser/
+  --ease-power1-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-power1-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-power1-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-power2-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-power3-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-power3-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-power4-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-power4-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-power4-in-out: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);
+  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
+  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);
+  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
+  --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
 
 html {
   // When you use --font-size var, 1px = 1rem
@@ -7,9 +87,9 @@ html {
 }
 
 body {
+  font-size: 16rem;
   font-family: sans-serif;
   @include font-roboto-regular;
   background: var(--color-bg);
   color: var(--color-text);
-  //  font-size: 16rem;
 }