refacto ratio

apps/front/src/styles/_fonts.scss

@@ -0,0 +1,12 @@
+@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;
+}

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

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))
+      }
+    }
+  }
+}