diff --git a/apps/front/src/pages/homePage/HomePage.module.scss b/apps/front/src/pages/homePage/HomePage.module.scss index 9c16a35..5f70aef 100644 --- a/apps/front/src/pages/homePage/HomePage.module.scss +++ b/apps/front/src/pages/homePage/HomePage.module.scss @@ -1,5 +1,4 @@ @use "../../styles/index" as *; .root { - } diff --git a/apps/front/src/pages/workPage/WorkPage.module.scss b/apps/front/src/pages/workPage/WorkPage.module.scss index 9c16a35..5f70aef 100644 --- a/apps/front/src/pages/workPage/WorkPage.module.scss +++ b/apps/front/src/pages/workPage/WorkPage.module.scss @@ -1,5 +1,4 @@ @use "../../styles/index" as *; .root { - } diff --git a/apps/front/src/styles/_fonts.scss b/apps/front/src/styles/_fonts.scss index a7fef3c..9baac18 100644 --- a/apps/front/src/styles/_fonts.scss +++ b/apps/front/src/styles/_fonts.scss @@ -1,8 +1,9 @@ @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"); + 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; } @@ -11,6 +12,5 @@ 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 index 374b12d..84f2bc3 100644 --- a/apps/front/src/styles/_functions.scss +++ b/apps/front/src/styles/_functions.scss @@ -1,16 +1,16 @@ -@use "./_viewport" as viewport; -@use 'sass:math'; +@use "./_viewport" as viewport; +@use "sass:math"; /// Is a number /// @param {any} $value - /// @return {boolean} - @function is-number($value) { - @return type-of($value)=='number'; + @return type-of($value) == "number"; } //// check if a value is a string @function is-string($value) { - @return type-of($value)=="string"; + @return type-of($value) == "string"; } /// Is absolute number @@ -24,7 +24,7 @@ /// @param {any} $value - /// @return {Boolean} - @function is-calc($value) { - @return is-string($value) and index('calc', $value) != null; + @return is-string($value) and index("calc", $value) != null; } /// Calculate VW ratio @@ -34,8 +34,7 @@ @function ratioVW($n1, $n2: viewport.$viewport-reference-width) { @if not is-absolute-number($n1) or is-calc($n1) { @return $n1; - } - @else { + } @else { @return calc($n1 / $n2 * 100) + vw; } } @@ -44,12 +43,11 @@ /// @param {Number} $n1 - /// @param {Number} $n2 [1080] - /// @return {type} - -@function ratioVH($n1, $n2 : 1080) { +@function ratioVH($n1, $n2: 1080) { @if not is-absolute-number($n1) or is-calc($n1) { @return $n1; - } - @else { - @return calc($n1 / $n2 * 100)+vh; + } @else { + @return calc($n1 / $n2 * 100) + vh; } } diff --git a/apps/front/src/styles/_ratio.scss b/apps/front/src/styles/_ratio.scss index 9da1380..9706973 100644 --- a/apps/front/src/styles/_ratio.scss +++ b/apps/front/src/styles/_ratio.scss @@ -8,11 +8,16 @@ /// @param {Number} $ratioVH [850] /// @param {Number} $ratioVW [1440] /// @output -@mixin propertyVH($property, $n1,$ratioVH: viewport.$viewport-reference-desktop-height, $ratioVW: viewport.$viewport-reference-desktop-width) { - #{$property} : #{fn.ratioVH($n1, $ratioVH)}; +@mixin propertyVH( + $property, + $n1, + $ratioVH: viewport.$viewport-reference-desktop-height, + $ratioVW: viewport.$viewport-reference-desktop-width +) { + #{$property}: #{fn.ratioVH($n1, $ratioVH)}; @if $ratioVW > 0 { @media (max-aspect-ratio: #{ #{$ratioVW} / #{$ratioVH+1} }) { - #{$property} : #{fn.ratioVW($n1, $ratioVW)}; + #{$property}: #{fn.ratioVW($n1, $ratioVW)}; } } } @@ -22,8 +27,12 @@ /// @param {Number} $n1 /// @param {Number} $ratioVW [] /// @output -@mixin propertyVW($property, $n1, $ratioVW: fn.strip-units(breakpoints.$breakpoint-mobile)) { - #{$property} : #{fn.ratioVW($n1, $ratioVW)}; +@mixin propertyVW( + $property, + $n1, + $ratioVW: fn.strip-units(breakpoints.$breakpoint-mobile) +) { + #{$property}: #{fn.ratioVW($n1, $ratioVW)}; } /// Set property rem @@ -35,28 +44,44 @@ @if length($value1) == 1 { #{$property}: fn.toRem($value1); } @else if length($value1) == 2 { - #{$property}: fn.toRem(nth($value1, 1)) fn.toRem(nth($value1, 2)) + #{$property}: fn.toRem(nth($value1, 1)) fn.toRem(nth($value1, 2)); } @else if length($value1) == 3 { - #{$property}: fn.toRem(nth($value1, 1)) fn.toRem(nth($value1, 2)) fn.toRem(nth($value1, 3)) + #{$property}: fn.toRem(nth($value1, 1)) + fn.toRem(nth($value1, 2)) + fn.toRem(nth($value1, 3)); } @else if length($value1) == 4 { - #{$property}: fn.toRem(nth($value1, 1)) fn.toRem(nth($value1, 2)) fn.toRem(nth($value1, 3)) fn.toRem(nth($value1, 4)) + #{$property}: fn.toRem(nth($value1, 1)) + fn.toRem(nth($value1, 2)) + fn.toRem(nth($value1, 3)) + fn.toRem(nth($value1, 4)); } @if $value2 != $value1 { @media screen and (max-width: breakpoints.$breakpoint-tablet) { @if length($value2) == 1 { #{$property}: fn.toRem($value2); } @else if length($value2) == 2 { - #{$property}: fn.toRem(nth($value2, 1)) fn.toRem(nth($value2, 2)) + #{$property}: fn.toRem(nth($value2, 1)) fn.toRem(nth($value2, 2)); } @else if length($value2) == 3 { - #{$property}: fn.toRem(nth($value2, 1)) fn.toRem(nth($value2, 2)) fn.toRem(nth($value2, 3)) + #{$property}: fn.toRem(nth($value2, 1)) + fn.toRem(nth($value2, 2)) + fn.toRem(nth($value2, 3)); } @else if length($value2) == 4 { - #{$property}: fn.toRem(nth($value2, 1)) fn.toRem(nth($value2, 2)) fn.toRem(nth($value2, 3)) fn.toRem(nth($value2, 4)) + #{$property}: fn.toRem(nth($value2, 1)) + fn.toRem(nth($value2, 2)) + fn.toRem(nth($value2, 3)) + fn.toRem(nth($value2, 4)); } } } } -@mixin propertyViewport($property, $value1, $value2: $value1, $breakpoint: breakpoints.$breakpoint-tablet, $cap: false) { +@mixin propertyViewport( + $property, + $value1, + $value2: $value1, + $breakpoint: breakpoints.$breakpoint-tablet, + $cap: false +) { @include propertyVH($property, $value1); @media screen and (max-width: breakpoints.$breakpoint-tablet) { @include propertyVW($property, $value2); @@ -66,11 +91,16 @@ @if length($value1) == 1 { #{$property}: fn.toPx($value1); } @else if length($value1) == 2 { - #{$property}: fn.toPx(nth($value1, 1)) fn.toPx(nth($value1, 2)) + #{$property}: fn.toPx(nth($value1, 1)) fn.toPx(nth($value1, 2)); } @else if length($value1) == 3 { - #{$property}: fn.toPx(nth($value1, 1)) fn.toPx(nth($value1, 2)) fn.toPx(nth($value1, 3)) + #{$property}: fn.toPx(nth($value1, 1)) + fn.toPx(nth($value1, 2)) + fn.toPx(nth($value1, 3)); } @else if length($value1) == 4 { - #{$property}: fn.toPx(nth($value1, 1)) fn.toPx(nth($value1, 2)) fn.toPx(nth($value1, 3)) fn.toPx(nth($value1, 4)) + #{$property}: fn.toPx(nth($value1, 1)) + fn.toPx(nth($value1, 2)) + fn.toPx(nth($value1, 3)) + fn.toPx(nth($value1, 4)); } } } diff --git a/apps/front/src/styles/_reset.scss b/apps/front/src/styles/_reset.scss index 585b1b1..a577e33 100644 --- a/apps/front/src/styles/_reset.scss +++ b/apps/front/src/styles/_reset.scss @@ -11,7 +11,9 @@ /** * Default Box sizing on before & after pseudo elements */ -*, *:before, *:after { +*, +*:before, +*:after { box-sizing: inherit; } @@ -41,7 +43,12 @@ main { * Remove default title browser margin * Remove default title browser UGLY bold font weight */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-size: 1em; margin: 0; font-weight: normal; @@ -152,10 +159,9 @@ summary { * Remove arrow indicatore */ details summary::-webkit-details-marker { - display:none; + display: none; } - /* ----------------------------------------------------------------------------- MEDIA */ /** diff --git a/apps/front/src/styles/_texts.scss b/apps/front/src/styles/_texts.scss index 1481182..d1ef284 100644 --- a/apps/front/src/styles/_texts.scss +++ b/apps/front/src/styles/_texts.scss @@ -1,5 +1,4 @@ -@use "./_viewport"; - -@mixin text-title-1 ($ratio:1) { +@use "./_viewport"; +@mixin text-title-1($ratio: 1) { }