fix(styles/fonts/project): add fonts + change styles + edit default project name

package-lock.json

@@ -1,10 +1,10 @@
 {
-  "name": "lsrp_connexion",
+  "name": "next-app",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "lsrp_connexion",
+      "name": "next-app",
       "dependencies": {
         "next": "12.0.10",
         "react": "17.0.2",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "lsrp_connexion",
+  "name": "next-app",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
 
 import "../styles/main.scss";
+import "../styles/fonts.scss";
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return <Component {...pageProps} />;

styles/abstracts/_mixins.scss

@@ -8,25 +8,18 @@
 @mixin element-invisible($enforce: true) {
   $important: if($enforce, "!important", null);
 
-  position: absolute #{$important};
+  max-height: 0 #{$important};
-  width: 1px #{$important};
+  opacity: 0 #{$important};
-  height: 1px #{$important};
+  visibility: hidden #{$important};
-  padding: 0 #{$important};
+  transition: $default-transition;
-  overflow: hidden #{$important};
-  clip: rect(0, 0, 0, 0) #{$important};
-  white-space: nowrap #{$important};
-  border: 0 #{$important};
 }
 
-@mixin element-invisible-off($enforce: true) {
+@mixin element-invisible-off($value-visibility: 100px, $enforce: true) {
   $important: if($enforce, "!important", null);
 
-  position: static #{$important};
+  max-height: #{$value-visibility} #{$important};
-  width: auto #{$important};
+  opacity: 1 #{$important};
-  height: auto #{$important};
+  visibility: visible #{$important};
-  overflow: visible #{$important};
-  clip: auto #{$important};
-  white-space: normal #{$important};
 }
 
 @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {

styles/base/_helpers.scss

@@ -11,25 +11,6 @@
   padding: 20px;
 }
 
-%vertical-center {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-%horizontal-center {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-%absolute-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 %button {
   outline: none;
   border: none;

styles/base/_root.scss

@@ -15,3 +15,8 @@
   padding: 0;
   box-sizing: border-box;
 }
+
+body {
+  min-height: 100vh;
+  max-width: 100vw;
+}

styles/fonts.scss

@@ -0,0 +1,179 @@
+@font-face {
+  font-family: Poppins-Italic;
+  src: url("/fonts/Poppins-Italic.woff2") format("woff2"),
+    url("/fonts/Poppins-Italic.woff") format("woff"),
+    url("/fonts/Poppins-Italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Light-Italic;
+  src: url("/fonts/Poppins-LightItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-LightItalic.woff") format("woff"),
+    url("/fonts/Poppins-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-SemiBold;
+  src: url("/fonts/Poppins-SemiBold.woff2") format("woff2"),
+    url("/fonts/Poppins-SemiBold.woff") format("woff"),
+    url("/fonts/Poppins-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Thin;
+  src: url("/fonts/Poppins-Thin.woff2") format("woff2"),
+    url("/fonts/Poppins-Thin.woff") format("woff"),
+    url("/fonts/Poppins-Thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Medium-Italic;
+  src: url("/fonts/Poppins-MediumItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-MediumItalic.woff") format("woff"),
+    url("/fonts/Poppins-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Regular;
+  src: url("/fonts/Poppins-Regular.woff2") format("woff2"),
+    url("/fonts/Poppins-Regular.woff") format("woff"),
+    url("/fonts/Poppins-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Extra-Bold-Italic;
+  src: url("/fonts/Poppins-ExtraBoldItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-ExtraBoldItalic.woff") format("woff"),
+    url("/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Extra-Light-Italic;
+  src: url("/fonts/Poppins-ExtraLightItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-ExtraLightItalic.woff") format("woff"),
+    url("/fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Light;
+  src: url("/fonts/Poppins-Light.woff2") format("woff2"),
+    url("/fonts/Poppins-Light.woff") format("woff"),
+    url("/fonts/Poppins-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Medium;
+  src: url("/fonts/Poppins-Medium.woff2") format("woff2"),
+    url("/fonts/Poppins-Medium.woff") format("woff"),
+    url("/fonts/Poppins-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Semi-Bold-Italic;
+  src: url("/fonts/Poppins-SemiBoldItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-SemiBoldItalic.woff") format("woff"),
+    url("/fonts/Poppins-SemiBoldItalic.ttf") format("truetype");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Extra-Light;
+  src: url("/fonts/Poppins-ExtraLight.woff2") format("woff2"),
+    url("/fonts/Poppins-ExtraLight.woff") format("woff"),
+    url("/fonts/Poppins-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Thin-Italic;
+  src: url("/fonts/Poppins-ThinItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-ThinItalic.woff") format("woff"),
+    url("/fonts/Poppins-ThinItalic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Black;
+  src: url("/fonts/Poppins-Black.woff2") format("woff2"),
+    url("/fonts/Poppins-Black.woff") format("woff"),
+    url("/fonts/Poppins-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins;
+  src: url("/fonts/Poppins-BoldItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-BoldItalic.woff") format("woff"),
+    url("/fonts/Poppins-BoldItalic.ttf") format("truetype");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Bold;
+  src: url("/fonts/Poppins-Bold.woff2") format("woff2"),
+    url("/fonts/Poppins-Bold.woff") format("woff"),
+    url("/fonts/Poppins-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Black-Italic;
+  src: url("/fonts/Poppins-BlackItalic.woff2") format("woff2"),
+    url("/fonts/Poppins-BlackItalic.woff") format("woff"),
+    url("/fonts/Poppins-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins-Extra-Bold;
+  src: url("/fonts/Poppins-ExtraBold.woff2") format("woff2"),
+    url("/fonts/Poppins-ExtraBold.woff") format("woff"),
+    url("/fonts/Poppins-ExtraBold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}