Gainburua CSS modules-era pasatzen du (#11)

* chore: CSS modules sartzen du

* refactor: alergeno legenda CSS modules

* refactor: css modules erabiltzen du

* chore: datubasea berreskuratzen du

* chore: kontaktu datuak aldatzen ditu

* ignore: saltoa

* feat: mugikor nabigazioa erakusten du

* chore: mugikor nabigazioa pasatzen du

* refactor: kontaktu datuak batzen ditu

* fix: gezia konpontzen du

* refactor: move component

* refactor: move component

* refactor: move component

* fix: builda konpontzen du

* chore: erabiltzen ez zen konponentea kentzen du

* fix: hasiera eta kafetegia ez diren atalak konpontzen ditu

* chore: react-responsive dependentzia kentzen du

* chore: yarn.lock eguneratzen du

* fix: kontsolako erroreak kentzen ditu

front/src/styles/cssConfig.scss

@@ -0,0 +1,4 @@
+@import 'settings';
+@import 'generic';
+@import 'tools';
+@import 'utilities';

front/src/styles/generic/index.scss

@@ -0,0 +1,2 @@
+@import 'reset';
+@import 'reboot';

front/src/styles/generic/reboot.scss

@@ -0,0 +1,35 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  /* 1 */
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  /* 4 */
+  /* stylelint-disable-line */
+  -ms-text-size-adjust: 100%;
+  /* 4 */
+  /* stylelint-disable-line */
+  -ms-overflow-style: scrollbar;
+  /* 5 */
+  -webkit-tap-highlight-color: rgba(#000, 0);
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Martel Sans', sans-serif;
+  min-height: 100vh;
+}
+
+/* stylelint-disable-next-line */
+-ms-viewport {
+  width: device-width;
+}
+
+strong {
+  font-weight: 700;
+}

front/src/styles/generic/reset.scss

@@ -0,0 +1,146 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+u,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit; /* stylelint-disable-line */
+  vertical-align: baseline;
+}
+em,
+i,
+b {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+  display: block;
+}
+*:focus,
+:active {
+  outline: 0;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a:link,
+a:visited,
+a:active {
+  text-decoration: none;
+  color: inherit;
+}

front/src/styles/settings/colors.scss

@@ -0,0 +1,8 @@
+:root {
+  --color-beltza: #191919;
+  --color-urdina: #8fbbfd;
+  --color-morea: #510dfb;
+  --color-horia: #fdb201;
+  --color-gorria: #fd3647;
+  --color-zuria: #ffffff;
+}

front/src/styles/settings/index.scss

@@ -0,0 +1,2 @@
+@import 'colors';
+@import 'sizes';

front/src/styles/settings/sizes.scss

@@ -0,0 +1,14 @@
+@import '../tools/functions.scss';
+
+:root {
+  --size-none: #{toRem(0)};
+  --size-xtiny: #{toRem(4)};
+  --size-tiny: #{toRem(8)};
+  --size-small: #{toRem(12)};
+  --size-mini: #{toRem(16)};
+  --size-base: #{toRem(24)};
+  --size-medium: #{toRem(32)};
+  --size-large: #{toRem(48)};
+  --size-xlarge: #{toRem(64)};
+  --size-huge: #{toRem(96)};
+}

front/src/styles/tools/functions.scss

@@ -0,0 +1,5 @@
+@function toRem($value) {
+    $remValue: calc($value / 16) + rem;
+
+    @return $remValue;
+}

front/src/styles/tools/index.scss

@@ -0,0 +1,2 @@
+@import 'functions';
+@import 'mediaQueries';

front/src/styles/tools/mediaQueries.scss

@@ -0,0 +1,17 @@
+// Hemos visto que .98 es una solución standard para no romper los estilos en las décimas de pixel entre un mediaquerie y otro.
+// OJO! Tienen que ser unidades fraccionarias, .99 no funciona
+// https://stackoverflow.com/questions/70120238/do-i-consider-decimal-point-of-px-in-media-query
+$mobileMax: 767.98px;
+
+$tabletMin: 768px;
+$tabletMax: 1023.98px;
+
+$desktopMin: 1024px;
+
+$onlyMobile: 'only screen and (max-width: ' + $mobileMax + ')';
+$onlyTablet: 'only screen and (min-width: ' + $tabletMin + ') AND (max-width: ' +
+  $tabletMax + ')';
+$onlyDesktop: 'only screen and (min-width: ' + $desktopMin + ')';
+
+$fromTablet: 'only screen and (min-width: ' + $tabletMin + ')';
+$fromDesktop: 'only screen and (min-width: ' + $desktopMin + ')';

front/src/styles/tools/mixins/container.scss

@@ -0,0 +1,19 @@
+@import '../mediaQueries.scss';
+
+@mixin container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--size-small);
+  padding-right: var(--size-small);
+  width: 100%;
+
+  @media #{$fromTablet} {
+    padding-left: 0;
+    padding-right: 0;
+    width: 744px;
+  }
+
+  @media #{$fromDesktop} {
+    width: 1014px;
+  }
+}

front/src/styles/tools/mixins/font.scss

@@ -0,0 +1,31 @@
+@import '../functions.scss';
+
+@mixin tinyFont() {
+  font-size: #{toRem(12.64)};
+  line-height: #{toRem(17)};
+}
+
+@mixin smallFont() {
+  font-size: #{toRem(16)};
+  line-height: #{toRem(22)};
+}
+
+@mixin baseFont() {
+  font-size: #{toRem(18)};
+  line-height: #{toRem(24)};
+}
+
+@mixin largeFont() {
+  font-size: #{toRem(25.63)};
+  line-height: #{toRem(35)};
+}
+
+@mixin hugeFont() {
+  font-size: #{toRem(36.41)};
+  line-height: #{toRem(50)};
+}
+
+@mixin gargantuanFont() {
+  font-size: #{toRem(41.83)};
+  line-height: #{toRem(57)};
+}

front/src/styles/tools/mixins/outline.scss

@@ -0,0 +1,5 @@
+@import '../functions.scss';
+
+@mixin outline {
+  outline: #{toRem(2)} solid var(--focus-outline);
+}

front/src/styles/utilities/index.scss

@@ -0,0 +1 @@
+@import 'visuallyHidden';

front/src/styles/utilities/visuallyHidden.scss

@@ -0,0 +1,14 @@
+.visually-hidden:not(:focus):not(:active) {
+  position: absolute;
+
+  overflow: hidden;
+
+  border: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}