build(frontned): setting up the project and creating the main structure

.gitignore

@@ -16,6 +16,7 @@ logs
 .DS_Store
 .fleet
 .idea
+.stylelintcache
 
 # Local env files
 .env

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 
-# yarn lint-staged
+yarn lint-staged

.vscode/settings.json

@@ -2,10 +2,6 @@
   "stylelint.enable": true,
   "css.validate": false,
   "scss.validate": false,
-  "stylelint.validate": [
-    "css",
-    "scss",
-    "vue"
-  ],
+  "stylelint.validate": ["css", "scss", "vue"],
   "stylelint.packageManager": "yarn"
 }

README.md

@@ -1,63 +1,3 @@
-# Nuxt 3 Minimal Starter
+# deliveryVue
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+Интенсив SPA на Vue + Nuxt + GraphQL от Glo Academy

app.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="wrapper-text">123</div>
+  <NuxtLayout />
 </template>
 
-<style scoped lang="scss">
-  .wrapper {
-    &-text {
-      width: 10px;
-      height: 10px;
-      color: red;
-    }
-  }
-</style>
+<script setup>
+  import userTemplateStore from '@/store/modules/template.ts';
+
+  const root = useNuxtApp();
+  const { template: TemplateModel } = root.$models;
+
+  console.log('TemplateModel: ', TemplateModel.getInfo());
+  console.log('userTemplateStore: ', userTemplateStore);
+</script>

assets/styles/global/colors.scss

@@ -0,0 +1,9 @@
+$WHITE: #fff;
+$BLACK: #000;
+$GRAY: #CFCFCF;
+$GREEN: #618967;
+$GREEN-LIGHT: #79B382;
+$GREEN-GRADIENT: linear-gradient(114.93deg, #618967 5.11%, #72A479 94%);
+$BACKGROUND: #393535;
+$BACKGROUND-LIGHT: linear-gradient(90deg, #494544 0%, #504B4A 100%);
+$FOOTER-BACKGROUND-GRADIENT: linear-gradient(304deg, #44403f 0%, #211f20 100%);

assets/styles/global/mixins.scss

@@ -0,0 +1,72 @@
+@mixin font-face($font-name, $file-path, $weight: 'normal', $style: 'normal') {
+  $url: 'url("' + $file-path + '.woff2") format("woff2"), ';
+  $url: $url + 'url("' + $file-path + '.woff") format("woff")';
+
+  @font-face {
+    font-display: auto;
+    font-family: $font-name;
+    font-style: unquote($style);
+    font-weight: unquote($weight);
+    src: unquote($url);
+  }
+}
+
+@mixin font($font-size, $line-height: 'normal', $font-weight: 500, $font-name: $STYRENE, $letter-spacing: 0) {
+  font-family: $font-name;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  letter-spacing: $letter-spacing;
+  line-height: $line-height;
+}
+
+@mixin mobile {
+  @media screen and (max-width: 767px) {
+    @content;
+  }
+}
+
+@mixin mobile-tablet {
+  @media screen and (max-width: 1023px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media screen and (min-width: 768px) and (max-width: 1023px) {
+    @content;
+  }
+}
+
+@mixin tablet-desktop {
+  @media screen and (min-width: 768px) {
+    @content;
+  }
+}
+
+
+@mixin desktop {
+  @media screen and (min-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) and (pointer: fine) {
+    @content;
+  }
+}
+
+
+$max-width: 144;
+@mixin adaptive-font($pc-size, $mob-size) {
+  $add-size: $pc-size - $mob-size;
+  $add-mob-size: $add-size + $add-size * 0.7;
+
+  @media (min-width: 76.7rem) {
+    font-size: calc(#{$mob-size + rem} + #{$add-size} * (100vw / #{$max-width}));
+  }
+
+  @media (max-width: 76.7rem) {
+    font-size: calc(#{$mob-size + rem} + #{$add-mob-size} * ((100vw - 37.5rem) / #{$max-width}));
+  }
+}

assets/styles/global/vars.scss

@@ -0,0 +1,54 @@
+/* Толщины шрифтов */
+$FW_THIN: 100;
+$FW_EXTRA_LIGHT: 200;
+$FW_LIGHT: 300;
+$FW_NORMAL: 400;
+$FW_MEDIUM: 500;
+$FW_SEMI_BOLD: 600;
+$FW_BOLD: 700;
+$FW_EXTRA_BOLD: 800;
+$FW_HEAVY: 900;
+
+/* Стиль шрифта */
+$FW_ITALIC: italic;
+
+/* Настройки колоночной системы на десктопах */
+$COL_COUNT_DESKTOP: 12;
+$COL_GAP_DESKTOP: 2rem;
+$COL_GAP_DESKTOP_LARGE: 5rem;
+$CONTAINER_WIDTH_DESKTOP: 130rem;
+$SECTION_SIDE_OFFSET_DESKTOP: 4rem;
+$COL_WIDTH_DESKTOP: calc(($CONTAINER_WIDTH_DESKTOP - ($COL_COUNT_DESKTOP - 1) * $COL_GAP_DESKTOP) / $COL_COUNT_DESKTOP);
+
+/* Настройки колоночной системы на планшетах */
+$COL_COUNT_TABLET: 8;
+$COL_GAP_TABLET: 2rem;
+$CONTAINER_WIDTH_TABLET: auto;
+$SECTION_SIDE_OFFSET_TABLET: 2rem;
+
+/* Настройки колоночной системы на мобильных */
+$COL_COUNT_MOBILE: 2;
+$COL_GAP_MOBILE: 2rem;
+$CONTAINER_WIDTH_MOBILE: auto;
+$SECTION_SIDE_OFFSET_MOBILE: 2rem;
+
+$VERTICAL_OFFSET_MOBILE: 2.5rem;
+$VERTICAL_OFFSET_DESKTOP: 5rem;
+
+/* Уровни слоёв */
+$zLayerHide: -1; /* скрытый блок */
+$zLayerBack: 0; /* Видео и бекграунд */
+$zLayerContent: 3; /* Контент */
+$zLayerDecor1: 5; /* Декор разный */
+$zLayerDecor2: 6; /* Про запас */
+$zLayerSubNav: 7; /* Про запас */
+$zLayerSubInfo: 8; /* Про запас */
+$zLayerNav: 9; /* Навигация/ссылки */
+$zLayerOverlay: 10; /* Попапы и тп */
+$zLayerTop: 15; /* Открытое меню (топовый/верхний слой) */
+$zLayerHeaderPopup: 20; /* попап в хэдере */
+$zLayerPopups: 50; /* Попапы и тп */
+$zLayerTop: 100; /* Открытое меню (топовый/верхний слой) */
+
+/* Семейства шрифтов */
+$FONT_DEFAULT: 'Gilroy', arial, sans-serif;

assets/styles/index.scss

@@ -0,0 +1,10 @@
+@import './modules/normalize.scss';
+//@import 'swiper/swiper.min.css';
+@import './modules/fonts.scss';
+@import './modules/common.scss';
+@import './modules/transitions.scss';
+
+/* stylelint-disable-next-line selector-id-pattern */
+#__nuxt {
+  width: 100%;
+}