diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/index.html b/index.html index d339e6856..5bd166fb2 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,542 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + NA MU + + + + + + + + + + + + + + - -

Hello Mate Academy

- + +
+
+ + + +
+ +
+
+ +

Художній Музей

+ + + КВИТКИ + + + +
+ +
+ +
+ NaMu +
+ +
+ + події +
+
+ + + +
+ +
+
+

Актуальні події

+
+
+ + picture 'to go and come back' + +
+
+ виставка + 26.08-29.11.2019 +
+
+

Йду і повертаюсь

+ +
+

Національний Художній Музей України + презентує унікальну частину колекції Градобанку - + українське мистецтво + другої половини 1980-1995 років. +

+
+
+ +
+ + picture 'to go and come back' + +
+
+ виставка + 26.08-29.11.2019 +
+
+

І спогади і мрії

+ +
+

Національний художній музей України + до 100 річчя від дня народження + видатної української художниці Тетяни Яблонської + відкриває ретроспективну ювілейну + виставку «І спогади і мрії». +

+
+
+ +
+
+ picture 'to go and come back' +
+
+
+ ЛЕКЦІЯ + 26/08/2019 - 11:00 +
+ +

Від класицизму до романтизму

+
+
+
+
+
+

Галерея

+ +
+ +
+
+
+ slider 1 +
+
+ slider 1 +
+
+ slider 1 +
+
+ slider 1 +
+ +
+
+
+
+
+
+
+ +

Підписка

+ +

+ Бути в курсі всіх + актуальних подій та останніх новин. +

+ +
+ + + +
+
+
+ NaMu +
+ + +
+
+ + + + diff --git a/package-lock.json b/package-lock.json index fbfeb1428..112c6cd93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,9 @@ "version": "1.0.0", "hasInstallScript": true, "license": "GPL-3.0", + "dependencies": { + "swiper": "^12.0.3" + }, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/eslint-config": "latest", @@ -60,6 +63,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -544,6 +548,7 @@ "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.4.tgz", "integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==", "dev": true, + "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -592,6 +597,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -633,6 +639,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1315,7 +1322,6 @@ "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", "dev": true, - "peer": true, "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", @@ -1333,7 +1339,6 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1346,7 +1351,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1358,15 +1362,13 @@ "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@isaacs/cliui/node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", "dev": true, - "peer": true, "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", @@ -1384,7 +1386,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", "dev": true, - "peer": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -1400,7 +1401,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", @@ -1955,7 +1955,6 @@ "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz", "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", "dev": true, - "peer": true, "engines": { "node": ">= 20" } @@ -1984,7 +1983,6 @@ "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.2.tgz", "integrity": "sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0", "universal-user-agent": "^7.0.2" @@ -1998,7 +1996,6 @@ "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.3.tgz", "integrity": "sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==", "dev": true, - "peer": true, "dependencies": { "@octokit/request": "^10.0.6", "@octokit/types": "^16.0.0", @@ -2012,8 +2009,7 @@ "version": "27.0.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-27.0.0.tgz", "integrity": "sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", @@ -2075,7 +2071,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.7.tgz", "integrity": "sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==", "dev": true, - "peer": true, "dependencies": { "@octokit/endpoint": "^11.0.2", "@octokit/request-error": "^7.0.2", @@ -2092,7 +2087,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.1.0.tgz", "integrity": "sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0" }, @@ -2280,7 +2274,6 @@ "resolved": "https://registry.npmjs.org/@octokit/types/-/types-16.0.0.tgz", "integrity": "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==", "dev": true, - "peer": true, "dependencies": { "@octokit/openapi-types": "^27.0.0" } @@ -2587,7 +2580,6 @@ "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", "dev": true, "optional": true, - "peer": true, "engines": { "node": ">=14" } @@ -3073,6 +3065,7 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3156,6 +3149,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3725,8 +3719,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/bl": { "version": "4.1.0", @@ -3777,8 +3770,7 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz", "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", - "dev": true, - "peer": true + "dev": true }, "node_modules/browserslist": { "version": "4.28.0", @@ -3799,6 +3791,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4797,7 +4790,6 @@ "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz", "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==", "dev": true, - "peer": true, "engines": { "node": ">=0.3.1" } @@ -4939,8 +4931,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/ecc-jsbn": { "version": "0.1.2", @@ -4990,6 +4981,7 @@ "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", "dev": true, + "peer": true, "dependencies": { "ansi-colors": "^4.1.1", "strip-ansi": "^6.0.1" @@ -5274,6 +5266,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -5329,6 +5322,7 @@ "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz", "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==", "dev": true, + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -5431,6 +5425,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -5485,6 +5480,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz", "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==", "dev": true, + "peer": true, "dependencies": { "eslint-plugin-es": "^3.0.0", "eslint-utils": "^2.0.0", @@ -5535,6 +5531,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.3.1.tgz", "integrity": "sha512-bY2sGqyptzFBDLh/GMbAxfdJC+b0f23ME63FOE4+Jao0oZ3E1LEwFtWJX/1pGMJLiTtrSSern2CRM/g+dfc0eQ==", "dev": true, + "peer": true, "engines": { "node": ">=6" } @@ -5558,6 +5555,7 @@ "url": "https://feross.org/support" } ], + "peer": true, "peerDependencies": { "eslint": ">=5.0.0" } @@ -5926,8 +5924,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -6099,7 +6096,6 @@ "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz", "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==", "dev": true, - "peer": true, "bin": { "flat": "cli.js" } @@ -6144,7 +6140,6 @@ "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", "dev": true, - "peer": true, "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" @@ -6161,7 +6156,6 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true, - "peer": true, "engines": { "node": ">=14" }, @@ -6697,7 +6691,6 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true, - "peer": true, "bin": { "he": "bin/he" } @@ -7620,7 +7613,6 @@ "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", "dev": true, - "peer": true, "dependencies": { "@isaacs/cliui": "^8.0.2" }, @@ -8987,7 +8979,6 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "dev": true, - "peer": true, "engines": { "node": ">=16 || 14 >=14.17" } @@ -8997,7 +8988,6 @@ "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.7.5.tgz", "integrity": "sha512-mTT6RgopEYABzXWFx+GcJ+ZQ32kp4fMf0xvpZIIfSq9Z8lC/++MtcCnQ9t5FP2veYEP95FIYSvW+U9fV4xrlig==", "dev": true, - "peer": true, "dependencies": { "browser-stdout": "^1.3.1", "chokidar": "^4.0.1", @@ -9033,15 +9023,13 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true, - "peer": true + "dev": true }, "node_modules/mocha/node_modules/brace-expansion": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, - "peer": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -9051,7 +9039,6 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", "dev": true, - "peer": true, "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" @@ -9068,7 +9055,6 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", "dev": true, - "peer": true, "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", @@ -9089,7 +9075,6 @@ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", "dev": true, - "peer": true, "dependencies": { "argparse": "^2.0.1" }, @@ -9102,7 +9087,6 @@ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, - "peer": true, "dependencies": { "p-locate": "^5.0.0" }, @@ -9118,7 +9102,6 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, - "peer": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -9134,7 +9117,6 @@ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, - "peer": true, "dependencies": { "p-limit": "^3.0.2" }, @@ -9150,7 +9132,6 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "dev": true, - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -9166,7 +9147,6 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", "dev": true, - "peer": true, "engines": { "node": ">=12" } @@ -9871,8 +9851,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true, - "peer": true + "dev": true }, "node_modules/parent-module": { "version": "1.0.1", @@ -9966,7 +9945,6 @@ "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", "dev": true, - "peer": true, "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" @@ -9982,8 +9960,7 @@ "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/path-to-regexp": { "version": "1.9.0", @@ -10097,6 +10074,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -10175,6 +10153,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -10212,6 +10191,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.3.tgz", "integrity": "sha512-QgODejq9K3OzoBbuyobZlUhznP5SKwPqp+6Q6xw6o8gnhr4O85L2U915iM2IDcfF2NPXVaM9zlo9tdwipnYwzg==", "dev": true, + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -10431,7 +10411,6 @@ "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", "dev": true, - "peer": true, "dependencies": { "safe-buffer": "^5.1.0" } @@ -10921,6 +10900,7 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", "dev": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -10962,7 +10942,6 @@ "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, - "peer": true, "dependencies": { "randombytes": "^2.1.0" } @@ -11360,7 +11339,6 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", "dev": true, - "peer": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -11444,7 +11422,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "dev": true, - "peer": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -11518,6 +11495,7 @@ "url": "https://github.com/sponsors/stylelint" } ], + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-syntax-patches-for-csstree": "^1.0.19", @@ -11879,6 +11857,25 @@ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, + "node_modules/swiper": { + "version": "12.0.3", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.3.tgz", + "integrity": "sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -12058,6 +12055,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -12353,8 +12351,7 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", - "dev": true, - "peer": true + "dev": true }, "node_modules/universalify": { "version": "2.0.1", @@ -12576,6 +12573,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -12933,8 +12931,7 @@ "version": "9.3.4", "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.3.4.tgz", "integrity": "sha512-TmPRQYYSAnnDiEB0P/Ytip7bFGvqnSU6I2BcuSw7Hx+JSg/DsUi5ebYfc8GYaSdpuvOcEs6dXxPurOYpe9QFwg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/wrap-ansi": { "version": "6.2.0", @@ -12956,7 +12953,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -13039,23 +13035,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", - "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - }, - "funding": { - "url": "https://github.com/sponsors/eemeli" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", @@ -13088,7 +13067,6 @@ "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz", "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==", "dev": true, - "peer": true, "dependencies": { "camelcase": "^6.0.0", "decamelize": "^4.0.0", @@ -13104,7 +13082,6 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -13117,7 +13094,6 @@ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz", "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -13130,7 +13106,6 @@ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", "dev": true, - "peer": true, "engines": { "node": ">=8" } diff --git a/package.json b/package.json index ab5f87b9b..b20393432 100644 --- a/package.json +++ b/package.json @@ -55,5 +55,8 @@ "backstop": false, "cypress": true } + }, + "dependencies": { + "swiper": "^12.0.3" } } diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/events/picture-1_big.png b/src/images/events/picture-1_big.png new file mode 100644 index 000000000..231fc33fe Binary files /dev/null and b/src/images/events/picture-1_big.png differ diff --git a/src/images/events/picture-1_small.png b/src/images/events/picture-1_small.png new file mode 100644 index 000000000..9dc455112 Binary files /dev/null and b/src/images/events/picture-1_small.png differ diff --git a/src/images/events/picture-2_big.png b/src/images/events/picture-2_big.png new file mode 100644 index 000000000..219f05fab Binary files /dev/null and b/src/images/events/picture-2_big.png differ diff --git a/src/images/events/picture-2_small.png b/src/images/events/picture-2_small.png new file mode 100644 index 000000000..258f35453 Binary files /dev/null and b/src/images/events/picture-2_small.png differ diff --git a/src/images/events/picture-3_big.png b/src/images/events/picture-3_big.png new file mode 100644 index 000000000..fd58771cb Binary files /dev/null and b/src/images/events/picture-3_big.png differ diff --git a/src/images/events/picture-3_small.png b/src/images/events/picture-3_small.png new file mode 100644 index 000000000..7d98cb886 Binary files /dev/null and b/src/images/events/picture-3_small.png differ diff --git a/src/images/favicon_io/about.txt b/src/images/favicon_io/about.txt new file mode 100644 index 000000000..e367a58d5 --- /dev/null +++ b/src/images/favicon_io/about.txt @@ -0,0 +1,6 @@ +This favicon was generated using the following font: + +- Font Title: Montserrat +- Font Author: undefined +- Font Source: https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC70w-Y3tcoqK5.ttf +- Font License: undefined) diff --git a/src/images/favicon_io/android-chrome-192x192.png b/src/images/favicon_io/android-chrome-192x192.png new file mode 100644 index 000000000..7ef431594 Binary files /dev/null and b/src/images/favicon_io/android-chrome-192x192.png differ diff --git a/src/images/favicon_io/android-chrome-512x512.png b/src/images/favicon_io/android-chrome-512x512.png new file mode 100644 index 000000000..ea2dec011 Binary files /dev/null and b/src/images/favicon_io/android-chrome-512x512.png differ diff --git a/src/images/favicon_io/apple-touch-icon.png b/src/images/favicon_io/apple-touch-icon.png new file mode 100644 index 000000000..7408c2117 Binary files /dev/null and b/src/images/favicon_io/apple-touch-icon.png differ diff --git a/src/images/favicon_io/favicon-16x16.png b/src/images/favicon_io/favicon-16x16.png new file mode 100644 index 000000000..bf876f0be Binary files /dev/null and b/src/images/favicon_io/favicon-16x16.png differ diff --git a/src/images/favicon_io/favicon-32x32.png b/src/images/favicon_io/favicon-32x32.png new file mode 100644 index 000000000..eece89431 Binary files /dev/null and b/src/images/favicon_io/favicon-32x32.png differ diff --git a/src/images/favicon_io/favicon.ico b/src/images/favicon_io/favicon.ico new file mode 100644 index 000000000..3a31baadb Binary files /dev/null and b/src/images/favicon_io/favicon.ico differ diff --git a/src/images/favicon_io/site.webmanifest b/src/images/favicon_io/site.webmanifest new file mode 100644 index 000000000..45dc8a206 --- /dev/null +++ b/src/images/favicon_io/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/src/images/hero-img_desktop.png b/src/images/hero-img_desktop.png new file mode 100644 index 000000000..87254ac69 Binary files /dev/null and b/src/images/hero-img_desktop.png differ diff --git a/src/images/hero-img_mobile.png b/src/images/hero-img_mobile.png new file mode 100644 index 000000000..510ebfb3a Binary files /dev/null and b/src/images/hero-img_mobile.png differ diff --git a/src/images/hero-img_tablet.png b/src/images/hero-img_tablet.png new file mode 100644 index 000000000..e624321c9 Binary files /dev/null and b/src/images/hero-img_tablet.png differ diff --git a/src/images/icons/icon-arrow_ticket.svg b/src/images/icons/icon-arrow_ticket.svg new file mode 100644 index 000000000..ad9be9fe3 --- /dev/null +++ b/src/images/icons/icon-arrow_ticket.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-errow-black.svg b/src/images/icons/icon-errow-black.svg new file mode 100644 index 000000000..4bd4df415 --- /dev/null +++ b/src/images/icons/icon-errow-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon_arrow-top.svg b/src/images/icons/icon_arrow-top.svg new file mode 100644 index 000000000..3ac7d7967 --- /dev/null +++ b/src/images/icons/icon_arrow-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-NA-MU.svg b/src/images/logo-NA-MU.svg new file mode 100644 index 000000000..e560af0bd --- /dev/null +++ b/src/images/logo-NA-MU.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slides/slide-1_m.png b/src/images/slides/slide-1_m.png new file mode 100644 index 000000000..4d929a6ce Binary files /dev/null and b/src/images/slides/slide-1_m.png differ diff --git a/src/images/slides/slide-1_s.png b/src/images/slides/slide-1_s.png new file mode 100644 index 000000000..f289f715f Binary files /dev/null and b/src/images/slides/slide-1_s.png differ diff --git a/src/images/slides/slide-2_m.png b/src/images/slides/slide-2_m.png new file mode 100644 index 000000000..d26cd80b9 Binary files /dev/null and b/src/images/slides/slide-2_m.png differ diff --git a/src/images/slides/slide-2_s.png b/src/images/slides/slide-2_s.png new file mode 100644 index 000000000..1afdc83cd Binary files /dev/null and b/src/images/slides/slide-2_s.png differ diff --git a/src/images/slides/slide-3_m.png b/src/images/slides/slide-3_m.png new file mode 100644 index 000000000..a07c41031 Binary files /dev/null and b/src/images/slides/slide-3_m.png differ diff --git a/src/images/slides/slide-3_s.png b/src/images/slides/slide-3_s.png new file mode 100644 index 000000000..c6ce628ab Binary files /dev/null and b/src/images/slides/slide-3_s.png differ diff --git a/src/images/slides/slide-4_m.png b/src/images/slides/slide-4_m.png new file mode 100644 index 000000000..b20accb7b Binary files /dev/null and b/src/images/slides/slide-4_m.png differ diff --git a/src/images/slides/slide-4_s.png b/src/images/slides/slide-4_s.png new file mode 100644 index 000000000..39f051241 Binary files /dev/null and b/src/images/slides/slide-4_s.png differ diff --git a/src/images/slides/slide-5_m.png b/src/images/slides/slide-5_m.png new file mode 100644 index 000000000..519b3dfce Binary files /dev/null and b/src/images/slides/slide-5_m.png differ diff --git a/src/images/slides/slide-5_s.png b/src/images/slides/slide-5_s.png new file mode 100644 index 000000000..dea36b4c9 Binary files /dev/null and b/src/images/slides/slide-5_s.png differ diff --git a/src/images/subscrip_m.png b/src/images/subscrip_m.png new file mode 100644 index 000000000..559f0908d Binary files /dev/null and b/src/images/subscrip_m.png differ diff --git a/src/images/subscrip_s.png b/src/images/subscrip_s.png new file mode 100644 index 000000000..559f0908d Binary files /dev/null and b/src/images/subscrip_s.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..709168f86 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,62 @@ -'use strict'; +import Swiper from 'swiper/bundle'; +import 'swiper/css/bundle'; + +const galery = document.querySelector('.galery'); +const slider = galery?.querySelector('.swiper'); + +let swiperInstance = null; + +function iniOrDestroySwiper() { + const isDesktop = window.innerWidth >= 1280; + + if (!slider) { + return; + } + + if (isDesktop && swiperInstance) { + swiperInstance.destroy(true, true); + swiperInstance = null; + + return; + } + + if (!isDesktop && !swiperInstance) { + swiperInstance = new Swiper(slider, { + slidesPerView: 1, + spaceBetween: 20, + pagination: { + el: galery.querySelector('.swiper-pagination'), + clickable: true, + }, + breakpoints: { + 640: { slidesPerView: 2}, + }, + }); + } +} +iniOrDestroySwiper(); +window.addEventListener('resize', iniOrDestroySwiper); + +const burger = document.querySelector('.header-top__burger'); +const menu = document.querySelector('.nav-menu'); +const overlay = document.querySelector('.overlay'); +const body = document.querySelector('.body'); +const navLinks = document.querySelectorAll('.menu__link'); + +burger.addEventListener('click', () => { + burger.classList.toggle('header-top__burger--active'); + menu.classList.toggle('nav-menu--open'); + overlay.classList.toggle('overlay--active'); + body.classList.toggle('body--locked'); +}); + +function closeMenu() { + burger.classList.remove('header-top__burger--active'); + menu.classList.remove('nav-menu--open'); + overlay.classList.remove('overlay--active'); + body.classList.remove('body--locked'); +} + +navLinks.forEach((link) => { + link.addEventListener('click', closeMenu); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 000000000..37048d9b3 --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,52 @@ +body { + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; + font-size: inherit; + font-weight: inherit; +} + +a { + cursor: pointer; + display: inline-block; + color: inherit; + text-decoration: none; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +span { + display: block; +} + +input, +textarea { + resize: none; + + box-sizing: border-box; + border: none; + + font-family: inherit; + + background: transparent; + outline: none; +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..27b349ed5 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,35 @@ h1 { - @extend %h1; + @extend %h1-title; +} + +h2 { + @extend %h2-title; + + @include on-tablet { + font-size: 48px; + } +} + +h3 { + @extend %h3-subtitle; + + @include on-tablet { + font-size: 36px; + } +} + +p { + @extend %ibm-300; +} + +.text-secondary { + @extend %ibm-600; +} + +.text-primary { + @extend %ibm-400; +} + +.text-primary strong { + font-weight: 600; } diff --git a/src/styles/blocks/_actual-events.scss b/src/styles/blocks/_actual-events.scss new file mode 100644 index 000000000..9b2f899f2 --- /dev/null +++ b/src/styles/blocks/_actual-events.scss @@ -0,0 +1,119 @@ +.actual-events { + & > :first-child { + @include content-padding-inline; + + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__title { + color: $color-primary; + text-align: center; + + @include on-tablet { + text-align: left; + } + } + + &__cards { + & > :not(:last-child) { + @include content-padding-inline; + + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + display: flex; + flex-direction: row; + column-gap: 130px; + margin-bottom: 104px; + } + } + } + + .actual-events__card--lecture { + position: relative; + padding-inline: 0; + + @include on-tablet { + @include content-padding-inline; + } + + @include on-desktop { + max-width: none; + padding-inline: 0; + } + + & > :first-child { + margin-bottom: 0; + } + + & > :last-child { + margin-inline: auto; + } + + .card__lecture { + transform: translateY(-50%); + + box-sizing: border-box; + width: 280px; + height: fit-content; + padding-block: 20px; + + background-color: #fff; + box-shadow: 0 2px 0 0 #1a5a4c40; + + @include on-tablet { + width: 470px; + padding-block: 45px; + padding-inline: 55px; + } + + @include on-desktop { + width: 570px; + padding-inline: 100px; + } + + & > :first-child { + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 16px; + } + } + } + + .card__event-wrapper { + column-gap: 20px; + padding-inline: 20px; + + @include on-tablet { + column-gap: 150px; + padding-inline: 0; + } + + @include on-desktop { + column-gap: 120px; + } + } + + .card__subtitle { + padding-inline: 0; + text-align: center; + + @include on-tablet { + text-align: left; + } + } + } +} diff --git a/src/styles/blocks/_art-museum.scss b/src/styles/blocks/_art-museum.scss new file mode 100644 index 000000000..326a1252a --- /dev/null +++ b/src/styles/blocks/_art-museum.scss @@ -0,0 +1,91 @@ +.art-museum { + @include on-tablet { + // @include grid-layout-g; + + grid-column: 1 / 4; + } + + @include on-desktop { + @include grid-layout-g; + + grid-column: 1 / -1; + } + + @include on-desktop { + row-gap: 0; + } + + &__title { + max-width: 12ch; + margin-bottom: 20px; + margin-inline: auto; + + text-align: center; + text-transform: uppercase; + + @include on-tablet { + grid-column: span 3; + + max-width: 12ch; + margin-bottom: 38px; + margin-inline: 0; + + font-size: 48px; + line-height: 120%; + text-align: left; + } + + @include on-desktop { + grid-column: 1 / 6; + margin-bottom: 89px; + font-size: 72px; + } + } + + &__btn { + display: flex; + box-sizing: border-box; + border: 1px solid $color-green; + + @include on-tablet { + width: 270px; + } + + @include on-desktop { + grid-column: 3 / 6; + } + + @include hover(transform, scale($scale)) { + box-shadow: 0 4px 15px rgba(26, 90, 86, 0.4); + } + + &:active { + transform: scale(1); + } + } + + &__text { + display: grid; + place-items: center; + width: 100%; + } + + &__arrow { + display: grid; + flex-shrink: 0; + place-items: center; + + width: 50px; + height: 50px; + + background-color: $color-green; + background-image: url(/src/images/icons/icon-arrow_ticket.svg); + background-repeat: no-repeat; + background-position: center; + + @include on-tablet { + width: 70px; + height: 70px; + } + } +} diff --git a/src/styles/blocks/_card.scss b/src/styles/blocks/_card.scss new file mode 100644 index 000000000..8b440bea0 --- /dev/null +++ b/src/styles/blocks/_card.scss @@ -0,0 +1,83 @@ +.card { + &__img-link { + width: 100%; + height: 100%; + + @include hover(transform, scale($scale-bilds)) { + box-shadow: 0 4px 15px 0 #09423440; + } + } + + &__img { + width: 100%; + height: 100%; + } + + &__event-wrapper { + display: flex; + column-gap: 55px; + align-items: center; + width: fit-content; + } + + &__event-name { + @extend %ibm-500; + + color: $color-grey; + } + + &__event-date { + @extend %ibm-700; + + color: $color-green; + + @include hover(transform, scale($scale)); + } + + &__subtitle-wrapper { + display: flex; + column-gap: 15px; + align-items: center; + } + + &__subtitle { + color: $color-primary; + } + + &__subtitle-deko { + width: 10px; + height: 10px; + background-color: $color-sq-deko; + } + + &__img-background { + + @include on-desktop { + height: 560px; + } + } + + &__row { + max-width: 460px; + + & > .card__event-wrapper { + margin-bottom: 15px; + + @include on-tablet { + margin-bottom: 30px; + } + } + + & > .card__subtitle-wrapper { + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 15px; + } + } + } + + & > *.card__img-link { + margin-bottom: 20px; + } +} diff --git a/src/styles/blocks/_deko-line.scss b/src/styles/blocks/_deko-line.scss new file mode 100644 index 000000000..8c5241771 --- /dev/null +++ b/src/styles/blocks/_deko-line.scss @@ -0,0 +1,28 @@ +.deko-line { + display: block; + width: 100%; + height: 1px; + background-color: $color-text-header-nav; + + @include on-tablet { + flex-shrink: 0; + width: 1px; + height: auto; + } + + &--footer { + background-color: rgba(26, 90, 76, 0.5); + + @include on-tablet { + width: 100%; + max-width: 460px; + height: 1px; + } + + @include on-desktop { + flex-shrink: 0; + width: 1px; + height: auto; + } + } +} diff --git a/src/styles/blocks/_events.scss b/src/styles/blocks/_events.scss new file mode 100644 index 000000000..8b1a39374 --- /dev/null +++ b/src/styles/blocks/_events.scss @@ -0,0 +1 @@ +// empty diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..7ed38ba6f --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,207 @@ +.footer { + @include content-padding-inline; + + padding-block: 32px 56px; + + @include on-tablet { + padding-block: 51px 35px; + } + + @include on-desktop { + padding-block: 41px 35px; + } + + &__wrapper { + @include on-tablet { + display: flex; + flex-direction: row; + column-gap: 40px; + } + + @include on-desktop { + column-gap: 130px; + } + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + flex-direction: column; + row-gap: 62px; + justify-content: start; + height: fit-content; + margin-bottom: 0; + } + + @include on-desktop { + align-items: center; + } + } + + &__inner { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: 80px; + + @include on-tablet { + column-gap: 40px; + margin-bottom: 120px; + } + + @include on-desktop { + flex-direction: row; + column-gap: 65px; + margin-bottom: 87px; + } + } + + &__inner-wrapper { + position: relative; + display: flex; + flex-direction: row; + column-gap: 20px; + + @include on-desktop { + column-gap: 31px; + } + } + + &__contacts { + > a { + display: block; + } + } + + &__contacts-title { + margin-bottom: 20px; + line-height: 141%; + } + + &__contacts-adress { + @include hover(transform, scale($scale-bilds)); + } + + &__contacts-tel { + @include hover(transform, scale($scale-bilds)); + } + &__contacts-fax { + @include hover(transform, scale($scale-bilds)); + } + &__contacts-email { + @include hover(transform, scale($scale-bilds)); + } + + &__social { + display: flex; + column-gap: 20px; + + @include on-tablet { + column-gap: 32px; + } + + @include on-desktop { + column-gap: 20px; + } + } + + &__social-link { + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + + @include hover(transform, scale($scale)); + } + + &__social-icon { + width: 100%; + height: 100%; + color: black; + + @include hover(color, $color-green); + } + + &__schedule { + @include on-tablet { + width: 220px; + } + + @include on-desktop { + width: 170px; + } + } + + &__arrow-top { + position: absolute; + right: 0; + bottom: 0; + transform: translateY(100%); + + box-sizing: border-box; + width: 50px; + height: 50px; + border: 1px solid $color-green; + border-radius: 50%; + + @include on-tablet { + display: none; + } + } + + &__arrow { + width: 100%; + height: 100%; + + background-image: url(/src/images/icons/icon_arrow-top.svg); + background-repeat: no-repeat; + background-position: center; + } + + &__deko-line { + margin-block: 70px 40px; + + @include on-tablet { + margin-block: 64px; + } + + @include on-desktop { + margin-block: 0; + } + } + + &__bottom { + display: flex; + flex-direction: column; + row-gap: 10px; + + @include on-tablet { + flex-direction: row; + row-gap: 0; + align-items: center; + justify-content: space-between; + } + } + + &__designer { + @extend %ibm-300; + + font-size: 12px; + line-height: 141%; + color: $color-primary; + text-align: center; + } + + &__copyright { + @extend %ibm-300; + + font-size: 12px; + line-height: 141%; + color: $color-primary; + text-align: center; + } +} diff --git a/src/styles/blocks/_galery.scss b/src/styles/blocks/_galery.scss new file mode 100644 index 000000000..3cb16757f --- /dev/null +++ b/src/styles/blocks/_galery.scss @@ -0,0 +1,97 @@ +.galery { + @include content-padding-inline; + + .galery__title { + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + .swiper { + --swiper-pagination-bullet-horizontal-gap: 0; + + overflow: visible; + } + + .swiper-wrapper { + @include on-desktop { + @include grid-layout-g; + } + } + .swiper-slide { + height: 410px; + + @include on-tablet { + height: 543px; + } + + @include on-desktop { + @include hover(transform, scale(0.97)) { + box-shadow: 0 4px 15px rgba(26, 90, 86, 0.4); + } + } + + &--one { + @include on-desktop { + grid-column: span 4; + height: 600px; + } + } + + &--two { + @include on-desktop { + grid-column: 5 / -1; + height: 600px; + } + } + &--three { + @include on-desktop { + grid-column: span 8; + height: 360px; + } + } + &--four { + @include on-desktop { + grid-column: 9 / -1; + height: 360px; + } + } + } + + .swiper-pagination { + position: static; + margin-top: 20px; + + @include on-tablet { + margin-top: 32px; + } + + @include on-desktop { + display: none; + } + + .swiper-pagination-bullet:not(:last-child) { + margin-right: 22px; + } + } + + .swiper-pagination-bullet-active { + background-color: $color-green; + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__viewport { + overflow: hidden; + } +} diff --git a/src/styles/blocks/_header-top.scss b/src/styles/blocks/_header-top.scss new file mode 100644 index 000000000..b26285721 --- /dev/null +++ b/src/styles/blocks/_header-top.scss @@ -0,0 +1,107 @@ +.header-top { + & > *:first-child { + margin-top: 27px; + + @include on-tablet { + margin-top: 39px; + } + } + + & > *:last-child { + margin-top: 9px; + + @include on-tablet { + margin-top: 15px; + } + } + + &__burger { + cursor: pointer; + + position: relative; + z-index: 30; + + width: 24px; + height: 24px; + padding: 0; + border: none; + + background-color: transparent; + + @include hover(transform, scale($scale)); + } + + &__burger-line { + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + + width: 100%; + height: 3px; + border-radius: 2px; + + background-color: $color-primary; + + &::before { + content: ''; + + position: absolute; + top: -7.5px; + left: 0; + + width: 100%; + height: 3px; + border-radius: 2px; + + background-color: $color-primary; + } + + &::after { + content: ''; + + position: absolute; + top: 8px; + left: 0; + + width: 100%; + height: 3px; + border-radius: 2px; + + background-color: $color-primary; + } + } + + .header-top__burger--active { + .header-top__burger-line { + background-color: transparent; + + &::before { + top: 50%; + transform: translateY(0) rotate(45deg); + background-color: $color-text-header-nav; + } + + &::after { + top: 50%; + transform: translateY(0) rotate(-45deg); + background-color: $color-text-header-nav; + } + } + } + + &__logo { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + + @include on-tablet { + left: calc(50% + 17.5%); + } + + @include on-desktop { + left: 50%; + } + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..e1ece873f --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,89 @@ +.header { + @include content-padding-inline; + + position: relative; + + + .header-top { + margin-bottom: 269px; + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 143px; + } + } + + .header-bottom { + @include on-tablet { + @include grid-layout-g; + } + } + + .hero-img { + position: absolute; + z-index: -1; + top: 0; + left: 0; + + width: 100%; + max-width: 100%; + height: 300px; + + @include on-tablet { + left: calc(50% + 15px); + height: 100%; + } + + @include on-desktop { + left: calc(50% - 85px); + height: 100%; + } + + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .nav-menu { + position: absolute; + } + + &__deko { + display: flex; + gap: 20px; + align-items: center; + + width: fit-content; + + opacity: 0; + + @include on-desktop { + position: absolute; + bottom: 55px; + left: 0; + transform: rotate(-90deg); + + opacity: 1; + } + } + + &__deko-line { + width: 70px; + height: 1px; + background-color: $color-green; + } + + &__deko-events { + text-align: center; + } + + @include on-desktop { + min-height: 655px; + } +} diff --git a/src/styles/blocks/_logo.scss b/src/styles/blocks/_logo.scss new file mode 100644 index 000000000..04fffa05c --- /dev/null +++ b/src/styles/blocks/_logo.scss @@ -0,0 +1,15 @@ +.logo { + width: 55px; + height: 61px; + + &__link { + width: 100%; + height: 100%; + + @include hover(transform, scale($scale)); + } + + &__img { + width: 100%; + } +} diff --git a/src/styles/blocks/_main-layout.scss b/src/styles/blocks/_main-layout.scss new file mode 100644 index 000000000..efa0ece2d --- /dev/null +++ b/src/styles/blocks/_main-layout.scss @@ -0,0 +1,25 @@ +.main-layout { + .actual-events { + margin-bottom: 183px; + + @include on-tablet { + margin-bottom: 208px; + } + + @include on-desktop { + margin-bottom: 302px; + } + } + + .galery { + margin-bottom: 100px; + + @include on-tablet { + margin-bottom: 92px; + } + + @include on-desktop { + margin-bottom: 200px; + } + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 000000000..2eb7f685e --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,41 @@ +.menu { + padding-inline: 52px 10px; + + @include on-desktop { + padding-inline: 102px; + } + + &__list { + display: grid; + grid-template-columns: repeat(2, minmax(100px, 1fr)); + gap: 24px 22px; + } + + &__link { + @extend %ibm-500; + + color: $color-text-header-nav; + + @include on-desktop { + font-size: 22px; + } + + @include hover(transform, scale($scale)); + } + + &--footer { + padding: 0; + + .menu__link { + @extend %ibm-400; + + line-height: 100%; + color: $color-primary; + } + + .menu__list { + grid-template-columns: repeat(2, minmax(100px, 360px)); + gap: 20px 35px; + } + } +} diff --git a/src/styles/blocks/_nav-menu.scss b/src/styles/blocks/_nav-menu.scss new file mode 100644 index 000000000..622d36683 --- /dev/null +++ b/src/styles/blocks/_nav-menu.scss @@ -0,0 +1,37 @@ +.nav-menu { + @include content-padding-inline; + + position: fixed; + z-index: 20; + top: -100%; + left: 0; + + display: flex; + flex-direction: column; + row-gap: 24px; + justify-content: center; + + box-sizing: border-box; + width: 100%; + max-width: 100%; + height: fit-content; + padding-block: 27px; + + background-color: $color-green; + + transition: $transition; + + @include on-tablet { + flex-direction: row; + padding-block: 40px; + } + + @include on-desktop { + padding-bottom: 48px; + } + + &--open { + top: 0; + color: $color-text-header-nav; + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 000000000..ca1959120 --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,48 @@ +html { + scroll-behavior: smooth; + position: relative; +} + +.body { + overflow-x: hidden; + + > .header { + margin-bottom: 70px; + + @include on-tablet { + margin-bottom: 107px; + } + + @include on-desktop { + margin-bottom: 318px; + } + } + + > .overlay { + pointer-events: none; + + position: fixed; + z-index: 10; + inset: 0; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.5); + } + + > .main-layout { + margin-bottom: 18px; + + @include on-tablet { + margin-bottom: 0; + } + } + + > .overlay--active { + pointer-events: auto; + opacity: 1; + } + + &--locked { + overflow: hidden; + } +} diff --git a/src/styles/blocks/_schedule.scss b/src/styles/blocks/_schedule.scss new file mode 100644 index 000000000..08032b07b --- /dev/null +++ b/src/styles/blocks/_schedule.scss @@ -0,0 +1,84 @@ +.schedule { + @include on-tablet { + display: flex; + flex-direction: row; + column-gap: 20px; + align-items: flex-end; + } + + @include on-desktop { + column-gap: 35px; + padding-left: 102px; + } + + &__title { + line-height: 141%; + } + + &__inner { + height: 100%; + + @include on-tablet { + padding-left: 20px; + } + + & > .schedule__title { + margin-bottom: 20px; + } + } + + &__closing { + @include on-desktop { + max-width: 170px; + } + + &--footer { + width: 130px; + + @include on-tablet { + width: 100%; + } + } + } + + &__works { + display: flex; + column-gap: 5px; + + &--column { + flex-direction: column; + + @include on-tablet { + flex-direction: row; + column-gap: 5px; + } + } + } + + &__hours { + white-space: nowrap; + } + + & > .schedule__inner { + margin-bottom: 14px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &--footer { + padding-left: 0; + + > .schedule__inner { + height: auto; + padding-left: 0; + } + + @include on-tablet { + flex-direction: column; + row-gap: 20px; + align-items: start; + } + } +} diff --git a/src/styles/blocks/_subscription.scss b/src/styles/blocks/_subscription.scss new file mode 100644 index 000000000..b506eb4a0 --- /dev/null +++ b/src/styles/blocks/_subscription.scss @@ -0,0 +1,132 @@ +.subscription { + position: relative; + margin-inline: auto; + + &__title { + margin-bottom: 20px; + color: $color-text-header-nav; + text-align: center; + + @include on-tablet { + margin-bottom: 16px; + } + } + + &__wrapper { + @include content-padding-inline; + + max-width: 570px; + padding-block: 88px; + + @include on-tablet { + padding: 82px 154px; + } + + @include on-desktop { + padding: 163px 355px; + } + } + + &__text { + margin-bottom: 50px; + font-size: 18px; + color: $color-text-header-nav; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 72px; + } + } + + &__form { + display: flex; + width: 100%; + height: 100%; + justify-content: space-between; + margin-inline: auto; + + @include on-tablet { + column-gap: 16px; + } + + @include on-desktop { + column-gap: 30px; + } + } + + &__input { + flex: 1 1 auto; + + box-sizing: border-box; + height: 50px; + padding-left: 24px; + padding-block: 18px; + + background-color: $color-text-header-nav; + + &::placeholder { + @extend %h3-subtitle; + + font-size: 14px; + color: $color-grey; + } + + @include on-tablet { + height: 70px; + padding-block: 28px; + } + + @include on-desktop { + padding-left: 24px; + } + } + + &__btn { + cursor: pointer; + + flex-shrink: 0; + + width: 50px; + height: 50px; + padding: 0; + border: none; + + background-color: $color-sq-deko; + background-image: url(/src/images/icons/icon-errow-black.svg); + background-repeat: no-repeat; + background-position: center; + + transition: transform $transition; + + @include on-tablet { + width: 70px; + height: 70px; + } + + @include hover(transform, scale($scale)); + + &:active { + transform: scale(1); + } + } + + &__background { + position: absolute; + z-index: -1; + top: 0; + left: 0; + + width: 100%; + height: 100%; + } + + &__background-img { + width: 100%; + height: 100%; + object-fit: cover; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..8e92f7969 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,18 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './reset'; +@import './utils'; +@import './typography'; +@import './blocks/page'; +@import './blocks/header'; +@import './blocks/header-top'; +@import './blocks/logo'; +@import './blocks/art-museum'; +@import './blocks/nav-menu'; +@import './blocks/deko-line'; +@import './blocks/menu'; +@import './blocks/schedule'; +@import './blocks/main-layout'; +@import './blocks/actual-events'; +@import './blocks/card'; +@import './blocks/galery'; +@import './blocks/subscription'; +@import './blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..1badd2a6d 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,54 @@ -%h1 { - font-family: Roboto, sans-serif; +%h1-title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; +} + +%h2-title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; +} +%h3-subtitle { + font-family: Montserrat, sans-serif; + font-size: 26px; + font-weight: 400; + line-height: 100%; +} + +%ibm-700 { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; +} + +%ibm-600 { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 150%; +} + +%ibm-500 { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; +} + +%ibm-400 { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; font-weight: 400; + line-height: 150%; +} + +%ibm-300 { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 300; + line-height: 150%; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..14c7c2423 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,54 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $transform; &:hover { #{$_property}: $_toValue; + @content; + } +} + +// break points +@mixin on-tablet { + @media (min-width: $tablet-size) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-size) { + @content; + } +} + +// page padding inline +@mixin content-padding-inline { + max-width: 1170px; + margin-inline: auto; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 25px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + +// grid-layout +@mixin grid-layout-g { + --colomns: 2; + + display: grid; + grid-template-columns: repeat(var(--colomns), 1fr); + column-gap: 20px; + + @include on-tablet { + --colomns: 6; + + gap: 30px; + } + + @include on-desktop { + --colomns: 12; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..362014334 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,17 @@ -$c-gray: #eee; +// color +$color-primary: #0f0e08; +$color-green: #1a5a4c; +$color-grey: #687480; +$color-text: #4e4e4e; +$color-text-header-nav: #fff; +$color-sq-deko: #f14a27; + +// break points +$tablet-size: 640px; +$desktop-size: 1280px; + +// animations +$transition: 0.3s ease; +$transform: 0.3s; +$scale: 1.08; +$scale-bilds: 1.02;