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/package-lock.json b/package-lock.json index cb33dce27..7f6274085 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.2", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", @@ -1783,10 +1783,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz", - "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", + "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 55a744c57..53a569adf 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.2", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", diff --git a/src/fonts/Playfair_Display,Raleway.zip b/src/fonts/Playfair_Display,Raleway.zip new file mode 100644 index 000000000..e2fac2c8a Binary files /dev/null and b/src/fonts/Playfair_Display,Raleway.zip differ diff --git a/src/fonts/Playfair_Display/OFL.txt b/src/fonts/Playfair_Display/OFL.txt new file mode 100644 index 000000000..3f1f22a3b --- /dev/null +++ b/src/fonts/Playfair_Display/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2017 The Playfair Display Project Authors (https://github.com/clauseggers/Playfair-Display), with Reserved Font Name "Playfair Display" + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/fonts/Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght.ttf b/src/fonts/Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght.ttf new file mode 100644 index 000000000..ca2222066 Binary files /dev/null and b/src/fonts/Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght.ttf differ diff --git a/src/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf b/src/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf new file mode 100644 index 000000000..b8d2d2cf2 Binary files /dev/null and b/src/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf differ diff --git a/src/fonts/Playfair_Display/README.txt b/src/fonts/Playfair_Display/README.txt new file mode 100644 index 000000000..c96f492c7 --- /dev/null +++ b/src/fonts/Playfair_Display/README.txt @@ -0,0 +1,75 @@ +Playfair Display Variable Font +============================== + +This download contains Playfair Display as both variable fonts and static fonts. + +Playfair Display is a variable font with this axis: + wght + +This means all the styles are contained in these files: + Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf + Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Playfair Display: + Playfair_Display/static/PlayfairDisplay-Regular.ttf + Playfair_Display/static/PlayfairDisplay-Medium.ttf + Playfair_Display/static/PlayfairDisplay-SemiBold.ttf + Playfair_Display/static/PlayfairDisplay-Bold.ttf + Playfair_Display/static/PlayfairDisplay-ExtraBold.ttf + Playfair_Display/static/PlayfairDisplay-Black.ttf + Playfair_Display/static/PlayfairDisplay-Italic.ttf + Playfair_Display/static/PlayfairDisplay-MediumItalic.ttf + Playfair_Display/static/PlayfairDisplay-SemiBoldItalic.ttf + Playfair_Display/static/PlayfairDisplay-BoldItalic.ttf + Playfair_Display/static/PlayfairDisplay-ExtraBoldItalic.ttf + Playfair_Display/static/PlayfairDisplay-BlackItalic.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them in your products & projects – print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-Black.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-Black.ttf new file mode 100644 index 000000000..2b53a15f1 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-Black.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-BlackItalic.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-BlackItalic.ttf new file mode 100644 index 000000000..7963352e6 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-BlackItalic.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf new file mode 100644 index 000000000..86bfcfa2c Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-BoldItalic.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-BoldItalic.ttf new file mode 100644 index 000000000..82e9ca0fe Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-BoldItalic.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-ExtraBold.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-ExtraBold.ttf new file mode 100644 index 000000000..a16e13c56 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-ExtraBold.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-ExtraBoldItalic.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-ExtraBoldItalic.ttf new file mode 100644 index 000000000..3b9556899 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-ExtraBoldItalic.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf new file mode 100644 index 000000000..520b9db75 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-Medium.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-Medium.ttf new file mode 100644 index 000000000..42f7c0247 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-Medium.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-MediumItalic.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-MediumItalic.ttf new file mode 100644 index 000000000..055af6295 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-MediumItalic.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf new file mode 100644 index 000000000..2cd12a31c Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-SemiBold.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-SemiBold.ttf new file mode 100644 index 000000000..a1a040116 Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-SemiBold.ttf differ diff --git a/src/fonts/Playfair_Display/static/PlayfairDisplay-SemiBoldItalic.ttf b/src/fonts/Playfair_Display/static/PlayfairDisplay-SemiBoldItalic.ttf new file mode 100644 index 000000000..9fd91534f Binary files /dev/null and b/src/fonts/Playfair_Display/static/PlayfairDisplay-SemiBoldItalic.ttf differ diff --git a/src/fonts/Raleway/OFL.txt b/src/fonts/Raleway/OFL.txt new file mode 100644 index 000000000..7e00c5f9e --- /dev/null +++ b/src/fonts/Raleway/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2010 The Raleway Project Authors (impallari@gmail.com), with Reserved Font Name "Raleway". + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/fonts/Raleway/README.txt b/src/fonts/Raleway/README.txt new file mode 100644 index 000000000..184ed8226 --- /dev/null +++ b/src/fonts/Raleway/README.txt @@ -0,0 +1,81 @@ +Raleway Variable Font +===================== + +This download contains Raleway as both variable fonts and static fonts. + +Raleway is a variable font with this axis: + wght + +This means all the styles are contained in these files: + Raleway/Raleway-VariableFont_wght.ttf + Raleway/Raleway-Italic-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Raleway: + Raleway/static/Raleway-Thin.ttf + Raleway/static/Raleway-ExtraLight.ttf + Raleway/static/Raleway-Light.ttf + Raleway/static/Raleway-Regular.ttf + Raleway/static/Raleway-Medium.ttf + Raleway/static/Raleway-SemiBold.ttf + Raleway/static/Raleway-Bold.ttf + Raleway/static/Raleway-ExtraBold.ttf + Raleway/static/Raleway-Black.ttf + Raleway/static/Raleway-ThinItalic.ttf + Raleway/static/Raleway-ExtraLightItalic.ttf + Raleway/static/Raleway-LightItalic.ttf + Raleway/static/Raleway-Italic.ttf + Raleway/static/Raleway-MediumItalic.ttf + Raleway/static/Raleway-SemiBoldItalic.ttf + Raleway/static/Raleway-BoldItalic.ttf + Raleway/static/Raleway-ExtraBoldItalic.ttf + Raleway/static/Raleway-BlackItalic.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them in your products & projects – print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/src/fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf b/src/fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf new file mode 100644 index 000000000..64f5882c7 Binary files /dev/null and b/src/fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf differ diff --git a/src/fonts/Raleway/Raleway-VariableFont_wght.ttf b/src/fonts/Raleway/Raleway-VariableFont_wght.ttf new file mode 100644 index 000000000..8aa222662 Binary files /dev/null and b/src/fonts/Raleway/Raleway-VariableFont_wght.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-Black.ttf b/src/fonts/Raleway/static/Raleway-Black.ttf new file mode 100644 index 000000000..658de3630 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-Black.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-BlackItalic.ttf b/src/fonts/Raleway/static/Raleway-BlackItalic.ttf new file mode 100644 index 000000000..99d169c35 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-BlackItalic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-Bold.ttf b/src/fonts/Raleway/static/Raleway-Bold.ttf new file mode 100644 index 000000000..92d30ce8c Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-Bold.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-BoldItalic.ttf b/src/fonts/Raleway/static/Raleway-BoldItalic.ttf new file mode 100644 index 000000000..cdf44e1fb Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-BoldItalic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-ExtraBold.ttf b/src/fonts/Raleway/static/Raleway-ExtraBold.ttf new file mode 100644 index 000000000..4b0371b27 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-ExtraBold.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-ExtraBoldItalic.ttf b/src/fonts/Raleway/static/Raleway-ExtraBoldItalic.ttf new file mode 100644 index 000000000..49f5cb140 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-ExtraBoldItalic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-ExtraLight.ttf b/src/fonts/Raleway/static/Raleway-ExtraLight.ttf new file mode 100644 index 000000000..d68221956 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-ExtraLight.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-ExtraLightItalic.ttf b/src/fonts/Raleway/static/Raleway-ExtraLightItalic.ttf new file mode 100644 index 000000000..2d47fbf6a Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-ExtraLightItalic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-Italic.ttf b/src/fonts/Raleway/static/Raleway-Italic.ttf new file mode 100644 index 000000000..0f8107ee1 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-Italic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-Light.ttf b/src/fonts/Raleway/static/Raleway-Light.ttf new file mode 100644 index 000000000..23f7fb18e Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-Light.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-LightItalic.ttf b/src/fonts/Raleway/static/Raleway-LightItalic.ttf new file mode 100644 index 000000000..187619ec1 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-LightItalic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-Medium.ttf b/src/fonts/Raleway/static/Raleway-Medium.ttf new file mode 100644 index 000000000..b46bd1834 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-Medium.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-MediumItalic.ttf b/src/fonts/Raleway/static/Raleway-MediumItalic.ttf new file mode 100644 index 000000000..aabbfe952 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-MediumItalic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-Regular.ttf b/src/fonts/Raleway/static/Raleway-Regular.ttf new file mode 100644 index 000000000..ec9b48365 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-Regular.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-SemiBold.ttf b/src/fonts/Raleway/static/Raleway-SemiBold.ttf new file mode 100644 index 000000000..d228458df Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-SemiBold.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-SemiBoldItalic.ttf b/src/fonts/Raleway/static/Raleway-SemiBoldItalic.ttf new file mode 100644 index 000000000..6c5bbc113 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-SemiBoldItalic.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-Thin.ttf b/src/fonts/Raleway/static/Raleway-Thin.ttf new file mode 100644 index 000000000..ed4875177 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-Thin.ttf differ diff --git a/src/fonts/Raleway/static/Raleway-ThinItalic.ttf b/src/fonts/Raleway/static/Raleway-ThinItalic.ttf new file mode 100644 index 000000000..a431542b8 Binary files /dev/null and b/src/fonts/Raleway/static/Raleway-ThinItalic.ttf differ diff --git a/src/images/NAMU-logo.png b/src/images/NAMU-logo.png new file mode 100644 index 000000000..aaf8fa27b Binary files /dev/null and b/src/images/NAMU-logo.png differ diff --git a/src/images/NAMU-logo.svg b/src/images/NAMU-logo.svg new file mode 100644 index 000000000..feeec5150 --- /dev/null +++ b/src/images/NAMU-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/current-exhibitions__img-1.png b/src/images/current-exhibitions__img-1.png new file mode 100644 index 000000000..5905ccf1c Binary files /dev/null and b/src/images/current-exhibitions__img-1.png differ diff --git a/src/images/current-exhibitions__img-2.png b/src/images/current-exhibitions__img-2.png new file mode 100644 index 000000000..3f277068f Binary files /dev/null and b/src/images/current-exhibitions__img-2.png differ diff --git a/src/images/header__bg-img.png b/src/images/header__bg-img.png new file mode 100644 index 000000000..705502038 Binary files /dev/null and b/src/images/header__bg-img.png differ diff --git a/src/images/icons/icon--arrow.svg b/src/images/icons/icon--arrow.svg new file mode 100644 index 000000000..43f997158 --- /dev/null +++ b/src/images/icons/icon--arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon--close.png b/src/images/icons/icon--close.png new file mode 100644 index 000000000..b1db68d29 Binary files /dev/null and b/src/images/icons/icon--close.png differ diff --git a/src/images/icons/icon--close.svg b/src/images/icons/icon--close.svg new file mode 100644 index 000000000..97c11e4ad --- /dev/null +++ b/src/images/icons/icon--close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon--dropdown.svg b/src/images/icons/icon--dropdown.svg new file mode 100644 index 000000000..0e01947fd --- /dev/null +++ b/src/images/icons/icon--dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon--facebook.svg b/src/images/icons/icon--facebook.svg new file mode 100644 index 000000000..60a54402f --- /dev/null +++ b/src/images/icons/icon--facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon--instagram.svg b/src/images/icons/icon--instagram.svg new file mode 100644 index 000000000..8da693132 --- /dev/null +++ b/src/images/icons/icon--instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon--menu.png b/src/images/icons/icon--menu.png new file mode 100644 index 000000000..076007a36 Binary files /dev/null and b/src/images/icons/icon--menu.png differ diff --git a/src/images/icons/icon--menu.svg b/src/images/icons/icon--menu.svg new file mode 100644 index 000000000..bc5d4069d --- /dev/null +++ b/src/images/icons/icon--menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon--scroll-up.svg b/src/images/icons/icon--scroll-up.svg new file mode 100644 index 000000000..c49ca0cbe --- /dev/null +++ b/src/images/icons/icon--scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon--telegram.svg b/src/images/icons/icon--telegram.svg new file mode 100644 index 000000000..a4369c774 --- /dev/null +++ b/src/images/icons/icon--telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon--twitter.svg b/src/images/icons/icon--twitter.svg new file mode 100644 index 000000000..93a78dc12 --- /dev/null +++ b/src/images/icons/icon--twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon--union.png b/src/images/icons/icon--union.png new file mode 100644 index 000000000..f848763fd Binary files /dev/null and b/src/images/icons/icon--union.png differ diff --git a/src/images/menu__bg-img.png b/src/images/menu__bg-img.png new file mode 100644 index 000000000..6df85f906 Binary files /dev/null and b/src/images/menu__bg-img.png differ diff --git a/src/images/news__img-1.jpg b/src/images/news__img-1.jpg new file mode 100644 index 000000000..a73328540 Binary files /dev/null and b/src/images/news__img-1.jpg differ diff --git a/src/images/news__img-1.png b/src/images/news__img-1.png new file mode 100644 index 000000000..26cc5ba3b Binary files /dev/null and b/src/images/news__img-1.png differ diff --git a/src/images/news__img-2.jpg b/src/images/news__img-2.jpg new file mode 100644 index 000000000..eddd5ed06 Binary files /dev/null and b/src/images/news__img-2.jpg differ diff --git a/src/images/plan-your-trip__bg-img.png b/src/images/plan-your-trip__bg-img.png new file mode 100644 index 000000000..3a1bd2db4 Binary files /dev/null and b/src/images/plan-your-trip__bg-img.png differ diff --git a/src/images/upcoming-events__img-1.png b/src/images/upcoming-events__img-1.png new file mode 100644 index 000000000..2cd8f81de Binary files /dev/null and b/src/images/upcoming-events__img-1.png differ diff --git a/src/images/upcoming-events__img-2.png b/src/images/upcoming-events__img-2.png new file mode 100644 index 000000000..19e1abe94 Binary files /dev/null and b/src/images/upcoming-events__img-2.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..aaf23f540 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,364 @@ + + - + - Title + NAMU - museum - -

Hello Mate Academy

+ + + + + +
+
+
+ +
    +
  • + +
    • + +
  • + UA +
    + EN +
    • +
+
+
+
10 серпня - 10 листопада
+
+

Мистецтво ХІХ - ХХ ст.

+
+
Внесок українських митців у світову культуру 19-20ст
+
+ Купити квиток +
+
+
10.08 - 10.10
+
+
+
+
+ Header background +
+
+ + + + + + +
+ + + + + +
+
+

Актуальні виставки

+ + Архів виставок +
+ + +
+
+
+ Current exhibitions image +
+
11.07 - 22.09
+

Кураторська виставка “Ангели”

+
Виставковий проект «Ангели» – знакова подія для української культури і водночас наймасштабніший...
+
Купити квиток
+
+ +
+
+ Current exhibitions image +
+
Діє постійно
+

Мистецтво ХХ ст. — XXI ст.

+
Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського та інших митців.
+
Купити квиток
+
+
+ + +
+ + + + +
+

Найближчі події

+ + Календар подій +
+ +
+
+ Upcoming events img +
+
+
14.08 о 13:00
+

Кураторські екскурсії від Павла Гудімова

+
Таємниці підготовки, історії експонатів, магія дійства до і в момент вашої присутності – розгортатиметься...
+ Зареєструватись +
+
+ +
+
+ Upcoming events img +
+
+
16.08 о 13:00
+

Майстер-клас “Подорож до Австралії”

+
Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт кругосвітньої подорожі - Австралія.
+ Зареєструватись +
+
+
+ + + + +
+ +
+ plan a visit bg img +
+
+

Сплануйте
візит до музею

+
Оберіть зручний день, зареєструйтесь на події, що цікавлять, купіть квиток заздалегідь, щоб ніщо не завадило вам насолоджуватись мистецтвом
+ Почати +
+
+
+ + + + +
+
+

Новини

+ + Усі новини +
+ + +
+
+
+ news img +
+
9 серпня 2019
+
Оголошення переможця
+
Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця розіграшу...
+
+ +
+
+ news img +
+
9 серпня 2019
+
Міжнародний день котів
+
Музей з левами не може просто так взяти і пропустити Міжнародний день котів!
+
+
+
+ + + + +
+ + + +
+
+ + + + + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 33c3ed2b3..016576a55 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1 +1,9 @@ -// put fonts here +@font-face { + font-family: 'Playfair Display'; + src: url('../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype'); +} + +@font-face { + font-family: Raleway; + src: url('../fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype'); +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..fdd8ca75e 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,109 @@ h1 { - @extend %h1; + margin: 0; + padding: 0; + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 96px; + line-height: 100%; + + @include on-tablet{ + font-style: Bold; + font-size: 72px; + } + + @include on-phone{ + font-style: Bold; + font-size: 48px; + } +} + +h2 { + margin: 0; + padding: 0; + font-family: "Playfair Display", serif; + font-weight: 700; + font-style: Bold; + font-size: 80px; + line-height: 100%; + + @include on-tablet{ + font-size: 62px; + } + + @include on-phone{ + font-size: 38px; + } +} + +h3 { + margin: 0; + padding: 0; + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 48px; + line-height: 120%; + + @include on-tablet{ + font-style: Bold; + font-size: 40px; + } + + @include on-phone{ + font-style: Bold; + font-size: 28px; + } +} + +h4 { + margin: 0; + padding: 0; + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 24px; + line-height: 125%; + + @include on-phone{ + font-style: Bold; + font-size: 20px; + } +} + +h5 { + margin: 0; + padding: 0; + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 20px; + line-height: 150%; +} + +h6 { + margin: 0; + padding: 0; + font-family: 'Playfair Display', serif; + font-weight: 700; + font-style: Bold; + font-size: 14px; + line-height: 125%; +} + +.button { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; +} + +.main { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; +} + +.additional { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; } diff --git a/src/styles/current-exhibitions.scss b/src/styles/current-exhibitions.scss new file mode 100644 index 000000000..258e967b3 --- /dev/null +++ b/src/styles/current-exhibitions.scss @@ -0,0 +1,122 @@ +.current-exhibitions{ + margin-top: 110px; + grid-column: 1 / -1; + + @include on-grid; + + &__title{ + color: $black; + grid-column: span 6; + + @include on-tablet{ + grid-column: span 4; + } + + @include on-phone{ + grid-column: span 2; + } + } + + &__button{ + grid-column: 10 / -1; + display: flex; + + @include on-tablet{ + grid-column: 5 / -1; + } + + @include on-phone{ + margin-top: 30px; + grid-column: span 2; + order: 3; + } + + @include button-with-icon; + + } + + &__content{ + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + margin-top: 70px; + + @include on-phone{ + margin-top: 0; + } + } + + &__card{ + grid-column: span 6; + display: grid; + grid-template-columns: subgrid; + + @include on-tablet{ + grid-column: span 3; + } + + @include on-phone{ + grid-column: span 2; + margin-top: 60px; + } + + &-img-wrapper{ + grid-column: 1 / -1; + position: relative; + width: 100%; + height: 484px; + overflow: hidden; + + @include on-tablet{ + height: 420px; + } + + @include on-phone{ + height: 356px; + } + } + + &-img{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition-duration: .3s; + + &:hover{ + scale: 1.1;; + } + } + + &-date{ + grid-column: 1 / -1; + color: $main; + margin-top: 20px; + } + + &-title{ + grid-column: 1 / -1; + color: $black; + margin-top: 10px; + + @include on-tablet{ + height: 60px; + } + } + + &-text{ + grid-column: 1 / -1; + color: $grey; + margin-top: 20px; + } + + &-button{ + grid-column: span 3; + margin-top: 50px; + + @include button-regular; + } + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..4ec6fea15 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,134 @@ +.footer{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin-top: 200px; + background-color: $background; + padding-bottom: 30px; + box-sizing: border-box; + + @include on-tablet{ + margin-top: 128px; + } + + &__wrapper{ + max-width: 1280px; + width: 100%; + box-sizing: border-box; + + @include content-paddings; + @include on-grid; + } + + &__title{ + grid-column: span 4; + margin-top: 50px; + color: $white; + order: 1; + + @include on-tablet{ + grid-column: span 2; + } + + @include on-phone{ + order: initial; + } + } + + &__list{ + order: 2; + grid-column: span 4; + list-style: none; + padding: 0; + margin: 0; + margin-top: 40px; + display: flex; + flex-direction: column; + + &-item{ + color: $white; + } + + &:last-of-type{ + gap: 10px; + } + + @include on-tablet{ + grid-column: span 2; + } + + @include on-phone{ + order: initial; + } + } + + &__link { + color: $white; + text-decoration: none; + display: inline; + white-space: nowrap; + width: fit-content; + position: relative; + + &::before{ + position: absolute; + content: ""; + height: 1px; + background-color: $white; + bottom: 0; + width: 0; + transition-duration: 0.3s; + } + + &:hover::before{ + width: 100%; + } + } + + &__icon-list{ + list-style: none; + padding: 0; + margin: 0; + margin-top: 50px; + grid-column: span 4; + display: flex; + flex-direction: row; + gap: 20px; + } + + &__content{ + position: relative; + margin-top: 70px; + order: 3; + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + align-items: center; + + & .icon{ + position: absolute; + right: 0; + } + + &-list{ + grid-column: span 4; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0 30px; + overflow: visible; + + @include on-tablet{ + display: flex; + flex-direction: row; + gap: 22px; + } + } + + } + + &__copyright{ + color: $white; + overflow: visible; + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..331c43516 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,262 @@ +.header{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background-color: $background; + position: relative; + justify-content: space-between; + + @include on-tablet{ + height: 100vh; + min-height: 100vh; + } + + + &__wrapper{ + height: 100%; + max-width: 1280px; + position: relative; + box-sizing: border-box; + + @include on-grid; + @include content-paddings; + + grid-template-rows: auto auto 1fr; + align-content: start; + } + + &__top{ + grid-column: 1 / -1; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + height: 90px; + + // @include content-paddings; + + @include on-tablet{ + height: 77px; + } + + @include on-phone{ + height: 80px; + } + } + + &__logo{ + width: 124px; + height: 37px; + background-color: $white; + mask-image: url(../images/NAMU-logo.svg); + mask-position: center; + mask-repeat: no-repeat; + + @include on-phone{ + width: 123px; + height: 40px; + } + } + + &__list { + display: flex; + flex-direction: row; + list-style: none; + padding: 0; + margin: 0; + gap: 40px; + + &-item{ + position: relative; + display: flex; + flex-direction: row; + align-items: center; + color: $white; + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + text-align: center; + vertical-align: middle; + } + } + + &__dropdown-ua{ + color: $white; + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + text-align: center; + vertical-align: middle; + text-decoration: none; + } + + &__dropdown-en{ + text-decoration: none; + color: $white; + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + text-align: center; + vertical-align: middle; + position: absolute; + bottom: 10px; + opacity: 0; + transition-duration: .3s; + } + + &__dropdown{ + position: relative; + + &:hover &-en{ + position: absolute; + opacity: 1; + bottom: -20px; + } + + @include on-phone{ + display: none; + } + } + + &__content{ + box-sizing: border-box; + + display: grid; + grid-template-columns: subgrid; + + grid-column: 1 / -1; + margin-top: 90px; + align-content: start; + + @include on-tablet{ + margin-top: 100px; + height: 100%; + align-content: start; + } + + @include on-phone{ + margin-top: 50px; + } + } + + &__dates{ + color: $white; + grid-column: span 6; + } + + &__title{ + color: $white; + grid-column: span 6; + margin-top: 10px; + } + + &__subtitle{ + color: $white; + grid-column: span 6; + margin-top: 30px; + + @include on-tablet{ + grid-column: span 3; + margin-top: 20px; + } + + @include on-tablet{ + grid-column: span 2; + margin-top: 30px; + } + } + + &__button{ + grid-column: span 3; + margin-top: 81px; + + @include button-regular; + + @include on-tablet{ + margin-top: 50px; + } + + @include on-phone{ + margin-top: 40px; + } + } + + &__blank{ + grid-column: span 6; + } + + &__img{ + display: flex; + position: absolute; + bottom: 0; + right: 0; + max-width: 100%; + max-height: 100%; + + & img{ + object-fit: contain; + } + + @include on-tablet{ + position: relative; + box-sizing: border-box; + padding-top: 70px; + grid-column: 2 / -2; + max-height: 100%; + + & img{ + object-fit: cover; + width: 100%; + position: absolute; + bottom: 0; + } + } + + @include on-phone{ + display: flex; + position: static; + margin-top: 40px; + grid-column: 1 / -1; + justify-content: center; + height: 100%; + + & img{ + display: flex; + object-fit: cover; + width: 245px; + } + } + } + + &__line-wrapper{ + grid-column: 1 / -1; + margin-top: 135px; + margin-bottom: 50px; + + @include on-grid; + + align-items: center; + + @include on-tablet{ + position: absolute; + opacity: 0; + } + } + + &__date{ + color: $white; + grid-column: span 1; + } + + &__line { + grid-column: span 5; + height: 1px; + width: 100%; + background-color: $white; + } +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 000000000..65ee0ce5f --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,50 @@ +.icon { + display: flex; + width: 20px; + height: 20px; + background-color: $white; + mask-position: center; + mask-repeat: no-repeat; + + &--menu{ + width: 30px; + height: 30px; + mask-image: url(../images/icons/icon--menu.svg); + } + + &--close{ + width: 30px; + height: 30px; + mask-image: url(../images/icons/icon--close.svg); + } + + &--dropdown{ + mask-image: url(../images/icons/icon--dropdown.svg); + } + + &--arrow{ + mask-image: url(../images/icons/icon--arrow.svg); + } + + &--scroll-up{ + width: 30px; + height: 30px; + mask-image: url(../images/icons/icon--scroll-up.svg); + } + + &--facebook{ + mask-image: url(../images/icons/icon--facebook.svg); + } + + &--instagram{ + mask-image: url(../images/icons/icon--instagram.svg); + } + + &--telegram{ + mask-image: url(../images/icons/icon--telegram.svg); + } + + &--twitter{ + mask-image: url(../images/icons/icon--twitter.svg); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..e3562f19f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,34 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'header'; +@import 'icon'; +@import 'menu'; +@import 'current-exhibitions'; +@import 'upcoming-events'; +@import 'plan-a-visit'; +@import 'news'; +@import 'subscribe'; +@import 'footer'; + +.page { + scroll-behavior: smooth; + + &__body{ + position: relative; + background: $white; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + } + + &__main { + max-width: 1280px; + box-sizing: border-box; + + @include content-paddings; + @include on-grid; + } -body { - background: $c-gray; } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 000000000..7b09298ab --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,329 @@ +.menu{ + box-sizing: border-box; + z-index: 2; + position: absolute; + top: 0; + opacity: 0; + right: 0; + left: 0; + transition-duration: .3s; + pointer-events: none; + background-color: $background; + height: 100%; + display: flex; + justify-content: center; + + &:target{ + left: 0; + right: 0; + opacity: 1; + pointer-events: all; + } + + &__wrapper{ + position: relative; + display: flex; + flex-direction: column; + + width: 100%; + height: 100%; + max-width: 1280px; + box-sizing: border-box; + + @include content-paddings; + @include on-grid; + + align-content: start; + + @include on-tablet{ + grid-template-rows: auto auto 1fr; + } + } + + + &__top{ + grid-column: 1 / -1; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + min-height: 90px; + + @include on-tablet{ + min-height: 77px; + } + } + + &__logo{ + width: 124px; + height: 37px; + background-color: $white; + mask-image: url(../images/NAMU-logo.svg); + mask-position: center; + mask-repeat: no-repeat; + } + + &__list{ + display: flex; + flex-direction: row; + list-style: none; + padding: 0; + margin: 0; + gap: 40px; + + &-item{ + display: flex; + flex-direction: row; + align-items: center; + color: $white; + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + text-align: center; + vertical-align: middle; + } + + @include on-phone{ + flex-direction: row-reverse; + gap: 30px; + } + } + + &__dropdown-en{ + text-decoration: none; + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + text-align: center; + vertical-align: middle; + position: absolute; + bottom: 10px; + opacity: 0; + transition-duration: .3s; + color: $white; + } + + &__dropdown{ + position: relative; + + &:hover &-en{ + position: absolute; + opacity: 1; + bottom: -20px; + } + } + + &__dropdown-ua{ + color: $white; + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + text-align: center; + vertical-align: middle; + text-decoration: none; + } + + &__content{ + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + align-content: start; + + @include on-tablet{ + margin-bottom: 30px; + } + } + + &__dates{ + color: $white; + margin-top: 23px; + grid-column: span 2; + + @include on-tablet{ + margin-top: 30px; + } + + @include on-phone{ + grid-column: span 2; + } + + &-text{ + color: $white; + font-family: Raleway, sans-serif; + font-weight: 600; + font-style: SemiBold; + font-size: 16px; + line-height: 150%; + vertical-align: middle; + text-decoration: none; + + &-link{ + font-family: Raleway, sans-serif; + font-weight: 600; + font-style: SemiBold; + font-size: 16px; + line-height: 150%; + vertical-align: middle; + text-decoration: none; + display: flex; + width: fit-content; + color: $white; + position: relative; + + &::before{ + position: absolute; + content: ""; + height: 1px; + background-color: $white; + bottom: 0; + width: 0; + transition-duration: 0.3s; + } + + &:hover::before{ + width: 100%; + } + } + } + } + + &__adress{ + color: $white; + margin-top: 23px; + grid-column: span 3; + + @include on-phone{ + grid-column: span 2; + } + } + + &__nav{ + grid-row: 2; + grid-column: 1 / -1; + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + margin-top: 70px; + gap: 60px; + + @include on-phone{ + margin-top: 40px; + grid-row: auto; + gap: 20px; + } + + &-link{ + display: flex; + width: fit-content; + color: $white; + text-decoration: none; + position: relative; + + h5{ + display: none; + } + + @include on-phone{ + h5 { + display: block; + } + + h3 { + display: none; + } + } + + &::before{ + position: absolute; + content: ""; + height: 1px; + background-color: $white; + bottom: 0; + width: 0; + transition-duration: 0.3s; + } + + &:hover::before{ + width: 100%; + } + } + + @include on-tablet{ + margin-top: 50px; + gap: 30px; + } + } + + &__line{ + grid-row: 3; + margin-top: 60px; + height: 1px; + width: 100%; + background-color: $white; + grid-column: span 6; + + @include on-tablet{ + margin-top: 50px; + } + + @include on-phone{ + margin-top: 40px; + grid-row: auto; + } + } + + &__button{ + grid-row: 4; + margin-top: 60px; + grid-column: span 3; + + @include button-regular; + + @include on-tablet{ + margin-top: 50px; + } + + @include on-phone{ + margin-top: 40px; + grid-row: auto; + } + } + + .menu__img { + display: flex; + position: absolute; + bottom: 0; + right: 0; + + + img { + width: 100%; + height: auto; + object-fit: contain; + } + + @include on-tablet { + grid-column: 2 / -2; + position: relative; + height: 100%; + + & img{ + object-fit: contain; + max-height: 100%; + position: absolute; + bottom: 0; + } + } + + @include on-phone{ + display: none; + } + } + +} diff --git a/src/styles/news.scss b/src/styles/news.scss new file mode 100644 index 000000000..5e7ade75f --- /dev/null +++ b/src/styles/news.scss @@ -0,0 +1,110 @@ +.news{ + margin-top: 110px; + grid-column: 1 / -1; + + @include on-grid; + + &__top{ + grid-column: 1 / -1; + + @include on-grid; + } + + &__title{ + color: $black; + grid-column: span 6; + + @include on-tablet{ + grid-column: span 4; + } + + @include on-phone{ + grid-column: span 2; + } + } + + &__button{ + grid-column: 10 / -1; + + @include on-tablet{ + grid-column: 5 / -1; + } + + @include on-phone{ + margin-top: 30px; + grid-column: span 2; + order: 3; + } + + @include button-with-icon; + } + + &__content{ + margin-top: 55px; + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + + @include on-phone{ + margin-top: 60px; + } + } + + &__card{ + grid-column: span 6; + display: grid; + grid-template-columns: subgrid; + + @include on-tablet{ + grid-column: span 3; + } + + @include on-phone{ + grid-column: span 2; + } + + &-img-wrapper{ + position: relative; + box-sizing: border-box; + grid-column: 1 / -1; + width: 100%; + padding-bottom: 65%; + overflow: hidden; + + @include on-tablet{ + padding-bottom: 100%; + } + } + + &-img{ + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + transition-duration: .3s; + top: 0; + left: 0; + + &:hover{ + scale: 1.1;; + } + } + + &-date{ + margin-top: 20px; + grid-column: 1 / -1; + color: $black; + } + + &-title{ + grid-column: 1 / -1; + color: $black; + } + + &-text{ + grid-column: 1 / -1; + color: $grey; + margin-top: 20px; + } + } +} diff --git a/src/styles/plan-a-visit.scss b/src/styles/plan-a-visit.scss new file mode 100644 index 000000000..97fdf161e --- /dev/null +++ b/src/styles/plan-a-visit.scss @@ -0,0 +1,73 @@ +.plan-a-visit{ + position: relative; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + margin-top: 110px; + background-color: $background; + width: 100%; + + @include on-tablet{ + height: fit-content; + } + + &__wrapper{ + max-width: 1280px; + height: 100%; + position: relative; + box-sizing: border-box; + + @include content-paddings; + @include on-grid; + } + + &__bg{ + position: absolute; + left: 0; + bottom: 0; + height: 100%; + max-width: 100%; + + @include on-tablet{ + display: none; + } + } + + &__content{ + align-self: center; + grid-column: 6 / -1; + display: grid; + grid-template-columns: subgrid; + + @include on-tablet{ + margin-top: 80px; + margin-bottom: 80px; + grid-column: 1 / -3; + } + + @include on-phone{ + margin-top: 50px; + margin-bottom: 50px; + grid-column: span 2; + } + } + + &__title{ + color: $white; + grid-column: span 7; + } + + &__text{ + color: $white; + margin-top: 30px; + grid-column: span 5; + } + + &__button{ + grid-column: span 3; + margin-top: 50px; + + @include button-regular; + } +} diff --git a/src/styles/subscribe.scss b/src/styles/subscribe.scss new file mode 100644 index 000000000..2c33de5e6 --- /dev/null +++ b/src/styles/subscribe.scss @@ -0,0 +1,81 @@ +.subscribe{ + margin-top: 200px; + grid-column: 1 / -1; + + @include on-grid; + + &__title { + grid-column: span 6; + color: $black; + + @include on-phone{ + grid-column: span 2; + } + } + + &__text{ + grid-column: span 6; + color: $black; + + @include on-tablet{ + grid-column: span 5; + margin-top: 20px; + } + + @include on-phone{ + grid-column: span 2; + } + } + + &__form { + display: grid; + grid-column: span 5; + grid-template-columns: subgrid; + margin-top: 50px; + + @include on-phone{ + grid-column: span 2; + } + } + + &__input{ + grid-column: span 5; + width: 100%; + border: 0; + background-color: $white; + border-bottom: 1px solid $black; + color: $black; + transition-duration: .3s; + + @include on-phone{ + grid-column: span 2; + } + + &:hover{ + color: $main; + border-color: $main; + } + + &:focus{ + color: $button-pressed; + border-color: $button-pressed; + } + + &:disabled{ + color: $button-disabled; + border-color: $button-disabled; + } + } + + &__button{ + grid-column: span 3; + margin-top: 40px; + + @include on-phone{ + grid-column: span 2; + margin-top: 30px; + } + + @include button-regular; + } +} diff --git a/src/styles/upcoming-events.scss b/src/styles/upcoming-events.scss new file mode 100644 index 000000000..c336a813a --- /dev/null +++ b/src/styles/upcoming-events.scss @@ -0,0 +1,105 @@ +.upcoming-events{ + margin-top: 200px; + grid-column: 1 /-1; + + @include on-grid; + + &__title{ + color: $black; + grid-column: span 6; + + @include on-tablet{ + grid-column: span 4; + } + + @include on-phone{ + grid-column: span 2; + } + } + + &__button{ + grid-column: 10 / -1; + + @include on-tablet{ + grid-column: 5 / -1; + } + + @include on-phone{ + margin-top: 30px; + grid-column: span 2; + order: 3; + } + + @include button-with-icon; + } + + &__card{ + grid-column: 1 / -1; + margin-top: 60px; + + @include on-grid; + + grid-template-rows: repeat(4, auto); + + &:first-child{ + margin-top: 70px; + + @include on-phone{ + margin-top: 60px; + } + } + + &-img{ + width: 100%; + transition-duration: .3s; + + &:hover{ + scale: 1.1; + } + + &-wrapper { + grid-column: span 4; + grid-row: span 4; + overflow: hidden; + + @include on-tablet{ + grid-column: span 3; + } + } + } + + &-content{ + display: grid; + grid-column: span 6; + grid-template-columns: subgrid; + + @include on-tablet{ + grid-column: span 3; + } + } + + &-date { + grid-column: span 6; + color: $main; + } + + &-title{ + grid-column: span 6; + margin-top: 10px; + color: $black; + } + + &-text{ + color: $grey; + grid-column: span 6; + margin-top: 20px; + } + + &-button{ + grid-column: span 3; + margin-top: 50px; + + @include button-regular; + } + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..6e17b0e41 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,135 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet{ + @media (max-width: 768px){ + @content; + } +} + +@mixin on-phone{ + @media (max-width: 320px){ + @content; + } +} + +@mixin on-grid{ + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 0 30px; + + @include on-tablet{ + grid-template-columns: repeat(6, 1fr); + } + + @include on-phone{ + grid-template-columns: repeat(2, 1fr); + gap: 0 20px; + } +} + +@mixin content-margins{ + margin: 0 55px; + + @include on-tablet{ + margin: 0 39px; + } + + @include on-phone{ + margin: 0 20px; + } +} + +@mixin content-paddings{ + padding: 0 55px; + + @include on-tablet{ + padding: 0 39px; + } + + @include on-phone{ + padding: 0 20px; + } +} + +@mixin button-with-icon{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + text-decoration: none; + color: $main; + background-color: $white; + border: 1px solid $main; + height: 60px; + width: 100%; + box-sizing: border-box; + gap: 8px; + transition-duration: .3s; + + & .icon{ + background-color: $main; + } + + &:hover{ + border-color: $button-hover; + color: $button-hover; + + & .icon{ + background-color: $button-hover; + } + } + + &:active{ + border-color: $button-pressed; + color: $button-pressed; + + & .icon{ + background-color: $button-pressed; + } + } + + &:disabled{ + border-color: $button-disabled; + color: $button-disabled; + + & .icon{ + background-color: $button-disabled; + } + } +} + +@mixin button-regular{ + color: $white; + height: 60px; + margin-top: 50px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid $main; + background-color: $main; + text-decoration: none; + transition-duration: .3s; + + &:hover{ + border-color: $button-hover; + background-color: $white; + color: $button-hover; + } + + &:active{ + border-color: $button-pressed; + background-color: $white; + color: $button-pressed; + } + + &:disabled{ + border-color: $button-disabled; + background-color: $white; + color: $button-disabled; + } +} + + diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..1b4ad0f65 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ $c-gray: #eee; +$main: #CD4D31; +$white: #F1F5F4; +$background: #3F5252; +$black: #1C1B29; +$grey: #504F5E; +$button-hover: #AF3419; +$button-pressed: #EA340D; +$button-disabled: #DD836F;