diff --git a/client/package-lock.json b/client/package-lock.json
index 72ef38c..bcfd4be 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11,7 +11,6 @@
"@formkit/i18n": "^1.6.3",
"@formkit/vue": "^1.6.3",
"@quasar/extras": "^1.16.4",
- "@vueuse/components": "^10.10.0",
"axios": "^1.2.1",
"core-js": "^3.6.5",
"esm": "^3.2.25",
@@ -22,6 +21,7 @@
"scrolltrigger": "^1.0.1",
"swiper": "^11.1.3",
"vue": "^3.3.13",
+ "vue-content-loader": "^2.0.1",
"vue-final-modal": "^4.5.4",
"vue-router": "^4.0.0",
"vuex": "^4.0.1",
@@ -3990,74 +3990,6 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
"integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
},
- "node_modules/@vueuse/components": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.10.0.tgz",
- "integrity": "sha512-HiA10NQ9HJAGnju+8ZK4TyA8LIc0a6BnJmVWDa/k+TRhaYCVacSDU04k0BQ2otV+gghUDdwu98upf6TDRXpoeg==",
- "dependencies": {
- "@vueuse/core": "10.10.0",
- "@vueuse/shared": "10.10.0",
- "vue-demi": ">=0.14.7"
- }
- },
- "node_modules/@vueuse/components/node_modules/@vueuse/core": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
- "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
- "dependencies": {
- "@types/web-bluetooth": "^0.0.20",
- "@vueuse/metadata": "10.10.0",
- "@vueuse/shared": "10.10.0",
- "vue-demi": ">=0.14.7"
- },
- "funding": {
- "url": "https://github.com/sponsors/antfu"
- }
- },
- "node_modules/@vueuse/components/node_modules/@vueuse/metadata": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
- "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
- "funding": {
- "url": "https://github.com/sponsors/antfu"
- }
- },
- "node_modules/@vueuse/components/node_modules/@vueuse/shared": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
- "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
- "dependencies": {
- "vue-demi": ">=0.14.7"
- },
- "funding": {
- "url": "https://github.com/sponsors/antfu"
- }
- },
- "node_modules/@vueuse/components/node_modules/vue-demi": {
- "version": "0.14.8",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
- "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
- "hasInstallScript": true,
- "bin": {
- "vue-demi-fix": "bin/vue-demi-fix.js",
- "vue-demi-switch": "bin/vue-demi-switch.js"
- },
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/antfu"
- },
- "peerDependencies": {
- "@vue/composition-api": "^1.0.0-rc.1",
- "vue": "^3.0.0-0 || ^2.6.0"
- },
- "peerDependenciesMeta": {
- "@vue/composition-api": {
- "optional": true
- }
- }
- },
"node_modules/@vueuse/core": {
"version": "10.9.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
@@ -15061,6 +14993,14 @@
}
}
},
+ "node_modules/vue-content-loader": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-2.0.1.tgz",
+ "integrity": "sha512-pkof4+q2xmzNEdhqelxtJejeP/vQUJtLle4/v2ueG+HURqM9Q/GIGC8GJ2bVVWeLfTDET51jqimwQdmxJTlu0g==",
+ "peerDependencies": {
+ "vue": "^3"
+ }
+ },
"node_modules/vue-eslint-parser": {
"version": "9.3.2",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
@@ -18623,48 +18563,6 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
"integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
},
- "@vueuse/components": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.10.0.tgz",
- "integrity": "sha512-HiA10NQ9HJAGnju+8ZK4TyA8LIc0a6BnJmVWDa/k+TRhaYCVacSDU04k0BQ2otV+gghUDdwu98upf6TDRXpoeg==",
- "requires": {
- "@vueuse/core": "10.10.0",
- "@vueuse/shared": "10.10.0",
- "vue-demi": ">=0.14.7"
- },
- "dependencies": {
- "@vueuse/core": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
- "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
- "requires": {
- "@types/web-bluetooth": "^0.0.20",
- "@vueuse/metadata": "10.10.0",
- "@vueuse/shared": "10.10.0",
- "vue-demi": ">=0.14.7"
- }
- },
- "@vueuse/metadata": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
- "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug=="
- },
- "@vueuse/shared": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
- "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
- "requires": {
- "vue-demi": ">=0.14.7"
- }
- },
- "vue-demi": {
- "version": "0.14.8",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
- "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
- "requires": {}
- }
- }
- },
"@vueuse/core": {
"version": "10.9.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
@@ -26407,6 +26305,12 @@
"@vue/shared": "3.4.27"
}
},
+ "vue-content-loader": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-2.0.1.tgz",
+ "integrity": "sha512-pkof4+q2xmzNEdhqelxtJejeP/vQUJtLle4/v2ueG+HURqM9Q/GIGC8GJ2bVVWeLfTDET51jqimwQdmxJTlu0g==",
+ "requires": {}
+ },
"vue-eslint-parser": {
"version": "9.3.2",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
diff --git a/client/package.json b/client/package.json
index 0215ee3..9c614b0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -29,6 +29,7 @@
"scrolltrigger": "^1.0.1",
"swiper": "^11.1.3",
"vue": "^3.3.13",
+ "vue-content-loader": "^2.0.1",
"vue-final-modal": "^4.5.4",
"vue-router": "^4.0.0",
"vuex": "^4.0.1",
diff --git a/client/src/assets/css/common.scss b/client/src/assets/css/common.scss
index 53ca6a6..2346053 100644
--- a/client/src/assets/css/common.scss
+++ b/client/src/assets/css/common.scss
@@ -62,7 +62,7 @@ a {
}
html{
- scrollbar-color: var(--color-black) var(--color-white-opacity);
+ scrollbar-color: var(--color-black) var(--bg-opacity);
scrollbar-gutter: stable;
scrollbar-width: thin;
}
diff --git a/client/src/assets/css/mixins/text.scss b/client/src/assets/css/mixins/text.scss
index f77a911..0de661e 100644
--- a/client/src/assets/css/mixins/text.scss
+++ b/client/src/assets/css/mixins/text.scss
@@ -1,326 +1,336 @@
@define-mixin __p {
- position: relative;
- z-index: 2;
- &:first-child {
- margin-top: 0;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &.m--mb-1 {
- margin-bottom: 1rem;
- }
-
- &.m--mb-2 {
- margin-bottom: 2rem;
- }
-
- &.m--mb-3 {
- margin-bottom: 3rem;
- }
-
- &.m--mb-4 {
- margin-bottom: 4rem;
- }
-
- &.m--mb-5 {
- margin-bottom: 5rem;
- }
-}
-
-@define-mixin h1 {
- @mixin __p;
-
- /*margin-top: 32px;*/
- margin-bottom: 1.5rem;
- font-size: 100px;
- line-height: 1.2;
- font-weight: 500;
- color: var(--color-white);
- padding-bottom: 6px;
- @mixin responsive-l {
- font-size: 84px;
- }
- @mixin responsive-m {
- font-size: 48px;
- }
- @mixin responsive-s {
- font-size: 36px;
- }
-}
-
-@define-mixin h2 {
- @mixin __p;
-
- margin: 2.5rem 0;
- font-size: 3.375rem;
- line-height: 1.3;
- font-weight: 500;
- color: transparent;
- padding-bottom: 6px;
- background-clip: text;
- background-image: var(--linear-gradient);
- text-transform: uppercase;
-
- &.m--white {
- color: var(--color-white);
- margin: 1.5rem 0;
- }
-
- &.m--border {
- &:after {
- margin-top: 10px;
- content: '';
- display: block;
- background: url("./assets/img/icon/borderLine.svg");
- max-width: 260px;
- width: 100%;
- height: 10px;
- }
- }
-
- a {
- text-decoration: none;
- font-weight: 500;
- color: var(--color-white);
- transition: color 0.5s ease;
-
- &:hover {
- color: var(--color-white);
- }
- }
-}
-
-@define-mixin h3 {
- @mixin __p;
-
- margin-top: 24px;
- margin-bottom: 16px;
- font-weight: 700;
- font-size: 20px;
- line-height: 1.2;
-}
-
-@define-mixin h4 {
- @mixin __p;
-
- margin-top: 16px;
- margin-bottom: 8px;
- font-weight: 500;
- font-size: 18px;
- line-height: 1.2;
-}
-
-@define-mixin p {
- @mixin __p;
- margin-top: 8px;
- margin-bottom: 8px;
-}
-
-@define-mixin ul {
- @mixin p;
-
- list-style: none;
- padding: 0;
-
- li {
- padding-left: 15px;
position: relative;
- margin-bottom: 16px;
-
- /* &:before {
- content: '';
- position: absolute;
- left: 0;
- width: 15px;
- height: 14px;
- top: 3px;
- background-size: contain;
- background-position: center;
- background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
- background-repeat: no-repeat;
- }*/
- &:before {
- content: '';
- position: absolute;
- left: 0;
- width: 5px;
- height: 5px;
- top: 7px;
- background: var(--color-white);
- border-radius: 50%;
+ z-index: 2;
+ &:first-child {
+ margin-top: 0;
}
&:last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
- }
- &.m--dots {
+ &.m--mb-1 {
+ margin-bottom: 1rem;
+ }
+
+ &.m--mb-2 {
+ margin-bottom: 2rem;
+ }
+
+ &.m--mb-3 {
+ margin-bottom: 3rem;
+ }
+
+ &.m--mb-4 {
+ margin-bottom: 4rem;
+ }
+
+ &.m--mb-5 {
+ margin-bottom: 5rem;
+ }
+}
+
+@define-mixin h1 {
+ @mixin __p;
+
+ /*margin-top: 32px;*/
+ margin-bottom: 1.5rem;
+ font-size: 100px;
+ line-height: 1.2;
+ font-weight: 500;
+ color: var(--color-white);
+ padding-bottom: 6px;
+ @mixin responsive-l {
+ font-size: 84px;
+ }
+ @mixin responsive-m {
+ font-size: 48px;
+ }
+ @mixin responsive-s {
+ font-size: 36px;
+ }
+}
+
+@define-mixin h2 {
+ @mixin __p;
+
+ margin: 2.5rem 0;
+ font-size: 3.375rem;
+ line-height: 1.3;
+ font-weight: 500;
+ color: transparent;
+ padding-bottom: 6px;
+ background-clip: text;
+ background-image: var(--linear-gradient);
+ text-transform: uppercase;
+ @mixin responsive-l {
+ font-size:40px;
+ line-height: 1.1;
+ }
+ @mixin responsive-m {
+ font-size:32px;
+ }
+ /*@mixin responsive-s {
+ font-size: 36px;
+ }*/
+ &.m--white {
+ color: var(--color-white);
+ margin: 1.5rem 0;
+ }
+
+ &.m--border {
+ &:after {
+ margin-top: 10px;
+ content: '';
+ display: block;
+ background: url("./assets/img/icon/borderLine.svg");
+ max-width: 260px;
+ width: 100%;
+ height: 10px;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ font-weight: 500;
+ color: var(--color-white);
+ transition: color 0.5s ease;
+
+ &:hover {
+ color: var(--color-white);
+ }
+ }
+}
+
+@define-mixin h3 {
+ @mixin __p;
+
+ margin-top: 24px;
+ margin-bottom: 16px;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 1.2;
+}
+
+@define-mixin h4 {
+ @mixin __p;
+
+ margin-top: 16px;
+ margin-bottom: 8px;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 1.2;
+}
+
+@define-mixin p {
+ @mixin __p;
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
+
+@define-mixin ul {
+ @mixin p;
+
+ list-style: none;
+ padding: 0;
+
li {
- padding-left: 1rem;
+ padding-left: 15px;
+ position: relative;
+ margin-bottom: 16px;
- &:before {
- content: '•';
- top: 0;
- height: auto;
- width: auto;
- background: none;
- }
+ /* &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ width: 15px;
+ height: 14px;
+ top: 3px;
+ background-size: contain;
+ background-position: center;
+ background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
+ background-repeat: no-repeat;
+ }*/
+ &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ width: 5px;
+ height: 5px;
+ top: 7px;
+ background: var(--color-white);
+ border-radius: 50%;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ &.m--dots {
+ li {
+ padding-left: 1rem;
+
+ &:before {
+ content: '•';
+ top: 0;
+ height: auto;
+ width: auto;
+ background: none;
+ }
+ }
}
- }
}
@define-mixin ol {
- @mixin p;
+ @mixin p;
- list-style: none;
- counter-reset: item;
- li {
- counter-increment: item;
- margin-bottom: 16px;
- vertical-align: middle;
+ list-style: none;
+ counter-reset: item;
+ li {
+ counter-increment: item;
+ margin-bottom: 16px;
+ vertical-align: middle;
- &:before {
- content: counter(item);
- padding-left: 12px;
- font-weight: 500;
- font-size: 18px;
- line-height: 24px;
- color: var(--color-white);
+ &:before {
+ content: counter(item);
+ padding-left: 12px;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 24px;
+ color: var(--color-white);
+ }
}
- }
}
@define-mixin hr {
- @mixin p;
+ @mixin p;
}
@define-mixin a {
- text-decoration: none;
- font-weight: 500;
- transition: all 0.5s ease;
- color: var(--color-white);
- position: relative;
- z-index: 2;
- &:hover {
- color: transparent;
- -webkit-background-clip: text;
- background-image: var(--linear-gradient);
- cursor: url("./assets/img/icon/cursor.svg"), auto;
text-decoration: none;
- }
-
- &.m--link {
- display: flex;
- align-items: center;
- border-bottom: 1px solid transparent;
-
- &::after {
- margin-left: 10px;
- content: '';
- width: 20px;
- height: 20px;
- background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
- background-size: cover;
- transition: background 0.3s ease, width 0.3s ease;
- }
-
+ font-weight: 500;
+ transition: all 0.5s ease;
+ color: var(--color-white);
+ position: relative;
+ z-index: 2;
&:hover {
- color: var(--color-white);
- border-bottom: 1px solid var(--color-white);
+ color: transparent;
+ -webkit-background-clip: text;
+ background-image: var(--linear-gradient);
+ cursor: url("./assets/img/icon/cursor.svg"), auto;
+ text-decoration: none;
}
- &:hover::after {
- width: 40px;
+ &.m--link {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid transparent;
+
+ &::after {
+ margin-left: 10px;
+ content: '';
+ width: 20px;
+ height: 20px;
+ background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
+ background-size: cover;
+ transition: background 0.3s ease, width 0.3s ease;
+ }
+
+ &:hover {
+ color: var(--color-white);
+ border-bottom: 1px solid var(--color-white);
+ }
+
+ &:hover::after {
+ width: 40px;
+ }
+ }
+
+ &.m--underline {
+ text-decoration: underline;
}
- }
- &.m--underline{
- text-decoration: underline;
- }
}
@define-mixin a--color $color {
- color: $color;
- border-color: rgba($color, 0.5);
+ color: $color;
+ border-color: rgba($color, 0.5);
}
@define-mixin table {
- /* dummy */
+ /* dummy */
}
@define-mixin base {
- font: $font-size-base/$line-height-base $font-family-base;
- color: $color-base;
+ font: $font-size-base/$line-height-base $font-family-base;
+ color: $color-base;
}
@define-mixin format {
- h1:not(.nostyle) {
- @mixin h1;
- }
+ h1:not(.nostyle) {
+ @mixin h1;
+ }
- h2:not(.nostyle) {
- @mixin h2;
- }
+ h2:not(.nostyle) {
+ @mixin h2;
+ }
- h3:not(.nostyle) {
- @mixin h3;
- }
+ h3:not(.nostyle) {
+ @mixin h3;
+ }
- h4:not(.nostyle) {
- @mixin h4;
- }
+ h4:not(.nostyle) {
+ @mixin h4;
+ }
- p:not(.nostyle) {
- @mixin p;
- }
+ p:not(.nostyle) {
+ @mixin p;
+ }
- ul:not(.nostyle) {
- @mixin ul;
- }
+ ul:not(.nostyle) {
+ @mixin ul;
+ }
- ol:not(.nostyle) {
- @mixin ol;
- }
+ ol:not(.nostyle) {
+ @mixin ol;
+ }
- hr:not(.nostyle) {
- @mixin hr;
- }
+ hr:not(.nostyle) {
+ @mixin hr;
+ }
- a:not(.nostyle) {
- @mixin a;
- }
+ a:not(.nostyle) {
+ @mixin a;
+ }
- table:not(.nostyle) {
- @mixin table;
- }
+ table:not(.nostyle) {
+ @mixin table;
+ }
- b:not(.nostyle),
- strong:not(.nostyle) {
- font-weight: bold;
- }
+ b:not(.nostyle),
+ strong:not(.nostyle) {
+ font-weight: bold;
+ }
- i:not(.nostyle),
- em:not(.nostyle) {
- font-style: italic;
- }
+ i:not(.nostyle),
+ em:not(.nostyle) {
+ font-style: italic;
+ }
- u:not(.nostyle),
- ins:not(.nostyle) {
- text-decoration: underline;
- }
+ u:not(.nostyle),
+ ins:not(.nostyle) {
+ text-decoration: underline;
+ }
- strike:not(.nostyle),
- del:not(.nostyle) {
- text-decoration: line-through;
- }
+ strike:not(.nostyle),
+ del:not(.nostyle) {
+ text-decoration: line-through;
+ }
}
@define-mixin text {
- @mixin format;
+ @mixin format;
- font: $font-size-text/$line-height-text $font-family-text;
- color: $color-text;
+ font: $font-size-text/$line-height-text $font-family-text;
+ color: $color-text;
}
diff --git a/client/src/assets/css/module/app-footer.scss b/client/src/assets/css/module/app-footer.scss
index 8fd6329..f5ee14f 100644
--- a/client/src/assets/css/module/app-footer.scss
+++ b/client/src/assets/css/module/app-footer.scss
@@ -1,43 +1,81 @@
-.footer{
- padding-bottom: var(--space-between-block);
- width: 100%;
- &__top{
- padding-bottom: 80px;
- margin-bottom: 80px;
- border-bottom: 1px solid var(--color-white-opacity);
- }
- &__question{
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- &__bottom{
- display: flex;
- justify-content: space-between;
- }
- &__menu{
- display: grid;
- grid-template-columns: var(--space-between-sections) var(--space-between-sections);
- grid-template-rows: min-content min-content;
- grid-column-gap: var(--space-between-sections);
- grid-row-gap: var(--space-between-block);
- &-item{
+.footer {
+ padding-bottom: var(--space-between-block);
+ width: 100%;
+ &__top {
+ padding-bottom: 80px;
+ margin-bottom: 80px;
+ border-bottom: 1px solid var(--color-white-opacity);
}
- &-link{
- font-size: 1.2rem;
+
+ &__question {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ @mixin responsive-xs {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+
+ &-button {
+ margin-left: auto;
+ }
+ }
+
+ &__bottom {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
+
+ &__menu {
+ display: grid;
+ grid-template-columns: var(--space-between-sections) var(--space-between-sections);
+ grid-template-rows: fit-content fit-content;
+ grid-column-gap: var(--space-between-sections);
+ grid-row-gap: var(--space-between-block);
+ @mixin responsive-m {
+ width: 100%;
+ grid-row-gap: 10px;
+ grid-template-rows: min-content;
+ grid-template-columns: min-content min-content min-content;
+ margin-bottom: var(--space-between-block);
+ }
+ @mixin responsive-s {
+ display: flex;
+ flex-wrap: wrap;
+ }
+ &-item {
+ @mixin responsive-s {
+ width: 100%;
+ }
+ }
+
+ &-link {
+ font-size: 1.2rem;
+ }
+ }
+
+ &__social {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-between-block);
+ @mixin responsive-m {
+ margin-bottom: var(--space-between-block);
+ grid-row-gap: 10px;
+ }
+ }
+
+ &__connection {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 1rem;
+ @mixin responsive-m {
+ width: 100%;
+ align-items: flex-start;
+ }
}
- }
- &__social{
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-between-block);
- }
- &__connection{
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- justify-content: space-between;
- gap: 1rem;
- }
}
diff --git a/client/src/assets/css/module/blog.scss b/client/src/assets/css/module/blog.scss
index bac9041..3a12aaa 100644
--- a/client/src/assets/css/module/blog.scss
+++ b/client/src/assets/css/module/blog.scss
@@ -5,19 +5,39 @@
display: flex;
justify-content: space-between;
align-items: start;
+ flex-wrap: wrap;
+ margin-bottom: var(--space-between-block);
+ row-gap: var(--space-between-block);
+ &-title{
+ margin-bottom: 0;
+ }
+ &-btn{
+ margin-left: auto;
+ @mixin responsive-xxs {
+ width: 100%;
+ }
+ }
}
&__content {
display: flex;
gap: 80px;
+ @mixin responsive-m {
+ flex-direction: column;
+ }
}
&__cover {
- width: 50%;
+ width: 100%;
max-height: 640px;
background: url("./assets/img/bg/blog.svg") no-repeat center;
position: relative;
z-index: 2;
+ background-size: cover;
+ @mixin responsive-m {
+ height: calc(var(--base-content-size) / 2);
+ max-height: none;
+ }
}
&__list {
diff --git a/client/src/assets/css/module/home.scss b/client/src/assets/css/module/home.scss
index b3771ff..e6430c0 100644
--- a/client/src/assets/css/module/home.scss
+++ b/client/src/assets/css/module/home.scss
@@ -118,7 +118,7 @@
display: flex;
justify-content: space-between;
flex-wrap: wrap;
- margin-bottom: var(--space-between-sections);
+ margin-bottom: var(--space-between-sections);
@mixin responsive-m {
gap: var(--space-between-block);
}
@@ -135,6 +135,10 @@
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
+ @mixin responsive-s {
+ flex-direction: column;
+ gap: 10px;
+ }
&.m--circle {
align-items: end;
@@ -144,6 +148,12 @@
width: 130px;
height: 130px;
background: url("./assets/img/icon/circleGradient.svg") no-repeat center;
+ @mixin responsive-s {
+ margin-right: auto;
+ width: 80px;
+ height: 80px;
+ background-size: contain;
+ }
}
}
@@ -154,6 +164,9 @@
@mixin responsive-m {
width: 75%;
}
+ @mixin responsive-s {
+ width: 100%;
+ }
}
}
}
@@ -163,6 +176,7 @@
@mixin responsive-m {
display: flex;
align-items: flex-start;
+ flex-wrap: wrap;
gap: calc(var(--space-between-block) / 2);
max-width: none;
}
@@ -171,11 +185,16 @@
flex-direction: column;
align-items: flex-start;
font-size: 16px;
- margin-bottom: 2.5rem;
position: relative;
z-index: 2;
+ &:not(&:last-child){
+ margin-bottom: var(--space-between-block);
+ }
@mixin responsive-m {
- width: calc(100% / 3);
+ width: calc((100% - var(--space-between-block)) / 3);
+ }
+ @mixin responsive-s {
+ width: 100%;
}
&:before {
content: '';
@@ -234,10 +253,15 @@
display: flex;
justify-content: space-between;
align-items: flex-end;
+ flex-wrap: wrap;
+ row-gap: var(--space-between-block);
}
&--description {
max-width: 45%;
+ @mixin responsive-xs {
+ max-width: 100%;
+ }
}
&--btns {
diff --git a/client/src/assets/css/module/rubric.scss b/client/src/assets/css/module/rubric.scss
index 1cbea8a..5b766d1 100644
--- a/client/src/assets/css/module/rubric.scss
+++ b/client/src/assets/css/module/rubric.scss
@@ -5,16 +5,31 @@
display: flex;
justify-content: space-between;
align-items: start;
+ flex-wrap: wrap;
+ &-title{
+ margin-bottom: 0;
+ }
}
+
&__description{
max-width: 60%;
margin-bottom: 2.5rem;
+ @mixin responsive-xxs {
+ max-width: none;
+ }
&.m--50{
margin-bottom: 0;
max-width: 50%;
width: 100%;
}
}
+ &__link{
+ @mixin responsive-xxs {
+ order: 1;
+ margin: var(--space-between-block) 0;
+ width: 100%;
+ }
+ }
&__list{
position: relative;
padding-bottom: 10px;
@@ -52,6 +67,8 @@
transition: all .3s ease;
margin-right: auto;
color: var(--color-white);
+ text-wrap: nowrap;
+ padding-right: 10px;
}
&__btn{
transition: all .35s ease, visibility .0s ease;
diff --git a/client/src/assets/css/module/team.scss b/client/src/assets/css/module/team.scss
index 1d46b49..d650f09 100644
--- a/client/src/assets/css/module/team.scss
+++ b/client/src/assets/css/module/team.scss
@@ -1,79 +1,122 @@
.team {
- margin-left: auto;
- max-width: calc(100vw - ((100vw - var(--container)) / 2));
- margin-bottom: var(--space-between-sections);
- position: relative;
- z-index: 2;
-
- &__header {
- display: flex;
- }
-
- &__title {
- margin-right: auto;
- }
-
- &__slider {
- &:hover {
- cursor: url("./assets/img/icon/cursorDragAndDrop.svg"), auto;
- }
-
- .swiper-wrapper {
- }
-
- }
-
- &__item {
-
- }
-
- &__tools {
- margin-top: 65px;
- display: flex;
- justify-content: space-between;
- max-width: var(--container);
- }
-
- &__progress {
- width: 100%;
- height: 4px;
+ margin-left: auto;
+ max-width: calc(100vw - ((100vw - var(--container)) / 2));
+ margin-bottom: var(--space-between-sections);
position: relative;
- max-width: 460px;
- background: var(--color-white-opacity);
- border-radius: 20px;
- overflow: hidden;
-
- span {
- background: var(--color-white);
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- transform-origin: left top;
+ z-index: 2;
+ @mixin responsive-xl {
+ padding: 0 0 0 20px;
}
- }
- &__cover {
- margin-bottom: 0.5rem;
- height: 450px;
- overflow: hidden;
- }
-
- &__name {
- font-weight: 500;
- font-size: 1.5rem;
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-
- span {
- font-weight: 400;
- font-size: 1.125rem;
+ &__header {
+ display: flex;
+ max-width: var(--container);
+ margin-right: auto;
+ padding: 0 50px 0;
+ margin-bottom: var(--space-between-block);
+ @mixin responsive-xl {
+ padding: 0 40px 0 0;
+ column-gap: var(--space-between-block);
+ }
+ @mixin responsive-s {
+ flex-wrap: wrap;
+ }
}
- }
- &__description {
- max-width: 820px;
- }
+ &__title {
+ margin-bottom: 0;
+ margin-right: auto;
+ text-wrap: nowrap;
+ }
+
+ &__slider {
+ &:hover {
+ cursor: url("./assets/img/icon/cursorDragAndDrop.svg"), auto;
+ }
+
+ .swiper-wrapper {
+ }
+
+ }
+
+ &__item {
+
+ }
+
+ &__tools {
+ margin-top: 65px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ max-width: var(--container);
+ margin-right: auto;
+ row-gap: 1.5rem;
+ padding: 0 50px 0;
+ @mixin responsive-xl {
+ padding: 0 80px 0 35px;
+ }
+ @mixin responsive-l {
+ padding: 0 40px 0 0;
+ }
+ .m--link{
+ @mixin responsive-s {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ }
+ }
+ }
+
+ &__progress {
+ width: 100%;
+ height: 4px;
+ position: relative;
+ max-width: 460px;
+ background: var(--color-white-opacity);
+ border-radius: 20px;
+ overflow: hidden;
+ @mixin responsive-s {
+ max-width: none;
+ }
+ span {
+ background: var(--color-white);
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ transform-origin: left top;
+ }
+ }
+
+ &__cover {
+ margin-bottom: 0.5rem;
+ height: 450px;
+ overflow: hidden;
+ }
+
+ &__name {
+ font-weight: 500;
+ font-size: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ span {
+ font-weight: 400;
+ font-size: 1.125rem;
+ }
+ }
+
+ &__description {
+ max-width: 820px;
+ @mixin responsive-xl {
+ max-width: calc(100% - var(--space-between-block));
+ }
+ @mixin responsive-s {
+ max-width: none;
+ width: 100%;
+ }
+ }
}
diff --git a/client/src/assets/css/setting.scss b/client/src/assets/css/setting.scss
index 1666967..d92b786 100644
--- a/client/src/assets/css/setting.scss
+++ b/client/src/assets/css/setting.scss
@@ -9,7 +9,7 @@ $color-primary: #5E5BFC;
--color-black: #232323;
--color-white: #FFFFFF;
--color-white-darker: #E7E7E7;
- --color-white-opacity: #404145;
+ --color-white-opacity: #BBB9CA;
--bg-wrapper-modal: #000000E5;
--color-primary: $color-primary;
--color-black-cc: #000000CC;
@@ -34,6 +34,7 @@ $color-primary: #5E5BFC;
}
@media (max-width: $document-width-m) {
--container: $document-width-s;
+ --space-between-sections: calc(var(--base-fz) * 2.7);
}
@media (max-width: $document-width-s) {
--container: $document-width-xs;
diff --git a/client/src/components/app-footer.vue b/client/src/components/app-footer.vue
index da9299c..0604e9b 100644
--- a/client/src/components/app-footer.vue
+++ b/client/src/components/app-footer.vue
@@ -4,7 +4,7 @@
Напишите нам