diff --git a/README.md b/README.md index afee6c841..dee70a428 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum_2/). + [DEMO LINK](https://dminikulin.github.io/Museum_2/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. 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..00fbc4526 --- /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: + PlayfairDisplay-VariableFont_wght.ttf + 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: + static/PlayfairDisplay-Regular.ttf + static/PlayfairDisplay-Medium.ttf + static/PlayfairDisplay-SemiBold.ttf + static/PlayfairDisplay-Bold.ttf + static/PlayfairDisplay-ExtraBold.ttf + static/PlayfairDisplay-Black.ttf + static/PlayfairDisplay-Italic.ttf + static/PlayfairDisplay-MediumItalic.ttf + static/PlayfairDisplay-SemiBoldItalic.ttf + static/PlayfairDisplay-BoldItalic.ttf + static/PlayfairDisplay-ExtraBoldItalic.ttf + 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..91c5afab1 --- /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-VariableFont_wght.ttf + 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: + static/Raleway-Thin.ttf + static/Raleway-ExtraLight.ttf + static/Raleway-Light.ttf + static/Raleway-Regular.ttf + static/Raleway-Medium.ttf + static/Raleway-SemiBold.ttf + static/Raleway-Bold.ttf + static/Raleway-ExtraBold.ttf + static/Raleway-Black.ttf + static/Raleway-ThinItalic.ttf + static/Raleway-ExtraLightItalic.ttf + static/Raleway-LightItalic.ttf + static/Raleway-Italic.ttf + static/Raleway-MediumItalic.ttf + static/Raleway-SemiBoldItalic.ttf + static/Raleway-BoldItalic.ttf + static/Raleway-ExtraBoldItalic.ttf + 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/cat.png b/src/images/cat.png new file mode 100644 index 000000000..325ddf144 Binary files /dev/null and b/src/images/cat.png differ diff --git a/src/images/guide.png b/src/images/guide.png new file mode 100644 index 000000000..0b5481825 Binary files /dev/null and b/src/images/guide.png differ diff --git a/src/images/header-img-2x.png b/src/images/header-img-2x.png new file mode 100644 index 000000000..5a98fd52b Binary files /dev/null and b/src/images/header-img-2x.png differ diff --git a/src/images/header-img.png b/src/images/header-img.png new file mode 100644 index 000000000..57d0f1a55 Binary files /dev/null and b/src/images/header-img.png differ diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..43f997158 --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/cross.svg b/src/images/icons/cross.svg new file mode 100644 index 000000000..97c11e4ad --- /dev/null +++ b/src/images/icons/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/dropdown.svg b/src/images/icons/dropdown.svg new file mode 100644 index 000000000..0e01947fd --- /dev/null +++ b/src/images/icons/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..6c0bad825 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..5af50bb18 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..97e7b55bd --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 000000000..bc5d4069d --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/scroll up.svg b/src/images/icons/scroll up.svg new file mode 100644 index 000000000..c49ca0cbe --- /dev/null +++ b/src/images/icons/scroll up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/telegram.svg b/src/images/icons/telegram.svg new file mode 100644 index 000000000..a4369c774 --- /dev/null +++ b/src/images/icons/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..a180591c8 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu-img.png b/src/images/menu-img.png new file mode 100644 index 000000000..cf388d985 Binary files /dev/null and b/src/images/menu-img.png differ diff --git a/src/images/plan.png b/src/images/plan.png new file mode 100644 index 000000000..e208d3a41 Binary files /dev/null and b/src/images/plan.png differ diff --git a/src/images/portrait.png b/src/images/portrait.png new file mode 100644 index 000000000..fb92e4708 Binary files /dev/null and b/src/images/portrait.png differ diff --git a/src/images/postcards.png b/src/images/postcards.png new file mode 100644 index 000000000..88fd8f2a7 Binary files /dev/null and b/src/images/postcards.png differ diff --git a/src/images/sculpture.png b/src/images/sculpture.png new file mode 100644 index 000000000..7bf0a12e8 Binary files /dev/null and b/src/images/sculpture.png differ diff --git a/src/images/visit.png b/src/images/visit.png new file mode 100644 index 000000000..468dff17f Binary files /dev/null and b/src/images/visit.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..387921d36 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,465 @@ - + - Title + НАМУ - -

Hello Mate Academy

+ + + + + + + +
+
+
+

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

+ +
+
+
+ sculpture +
+

+ 11.07 - 22.09 +

+

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

+

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

+
+ +
+
+ portrait +
+

+ Діє постійно +

+

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

+

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

+
+ +
+ +
+
+ +
+
+

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

+ +
+
+
+ Visit +
+

+ 14.08 о 13:00 +

+

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

+

+ Таємниці підготовки, історії експонатів, магія дійства до і в + момент вашої присутності – розгортатиметься... +

+ +
+
+
+ Guide +
+

+ 16.08 о 13:00 +

+

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

+

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

+ +
+
+ +
+
+ +
+
+ Plan +
+

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

+

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

+ +
+
+
+ +
+
+

Новини

+ +
+
+
+ sculpture +
+

9 серпня 2019

+

Оголошення переможця

+

+ Друзі, сьогодні п'ятниця! А це означає, що час оголосити + переможця розіграшу... +

+
+
+
+ sculpture +
+

9 серпня 2019

+

Міжнародний день котів

+

+ Музей з левами не може просто так взяти і пропустити Міжнародний + день котів! +

+
+
+ +
+
+ +
+ +
+
+ + diff --git a/src/styles/_button.scss b/src/styles/_button.scss new file mode 100644 index 000000000..dcdb2feb1 --- /dev/null +++ b/src/styles/_button.scss @@ -0,0 +1,18 @@ +.button { + font-family: Raleway, Arial, Helvetica, sans-serif; + box-sizing: border-box; + cursor: pointer; + height: 60px; + + @extend %button-text; + + &--primary { + border: none; + + @extend %button-primary; + } + + &--secondary { + @extend %button-secondary; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 33c3ed2b3..f9cb6298b 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1 +1,17 @@ // put fonts here +@font-face { + font-family: Raleway; + src: url('../fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype'); + font-weight: 100 900; + font-display: swap; + font-style: normal; +} + +@font-face { + font-family: 'Playfair Display'; + src: url('../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') + format('truetype'); + font-weight: 100 9000; + font-display: swap; + font-style: normal; +} diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 000000000..00aa74735 --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,116 @@ +.footer { + @include inline-padding; + + color: $color-white; + background-color: $color-background; + display: flex; + flex-direction: column; + gap: 60px; + padding-block: 30px; + + @include on-desktop { + gap: 70px; + } + + &__content { + display: flex; + flex-direction: column; + gap: 50px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + + h4 { + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 30px; + } + } + + a { + color: $color-white; + text-decoration: none; + position: relative; + display: inline-block; + width: fit-content; + + &::after { + content: ''; + position: absolute; + width: 100%; + bottom: -1px; + height: 1px; + display: block; + background-color: currentColor; + transform-origin: left; + transform: scaleX(0); + transition: transform $transition-time; + } + + &:hover::after { + transform: scaleX(1); + } + } + + &--contacts { + display: flex; + flex-direction: column; + } + + &--social { + display: flex; + flex-direction: row; + height: auto; + gap: 20px; + margin-top: 30px; + color: $color-white; + + @include on-desktop { + margin-top: 50px; + } + + a { + display: block; + width: 20px; + height: 20px; + } + } + + &--nav { + nav { + display: flex; + flex-direction: column; + gap: 5px; + + @include on-tablet { + gap: 10px; + } + } + } + } + + &__bottom { + display: flex; + justify-content: space-between; + + @include on-desktop { + display: grid; + grid-template-columns: 1fr 3fr 1fr; + column-gap: 10px; + } + + a { + &:first-of-type { + color: $color-white; + text-decoration: none; + } + + &:last-of-type { + justify-self: end; + } + } + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 000000000..6924993bb --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,98 @@ +.header { + @include inline-padding; + + background-color: $color-background; + + &__content { + position: relative; + display: flex; + flex-direction: column; + margin-top: 50px; + gap: 40px; + + @include on-tablet { + margin-top: 100px; + gap: 70px; + } + + @include on-desktop { + margin-top: 0; + gap: 80px; + flex-direction: row; + } + + &--text { + height: max-content; + display: flex; + flex-direction: column; + align-self: center; + color: $color-white; + + @include on-desktop { + height: 100%; + } + + p:first-of-type { + padding-bottom: 10px; + } + + p:last-of-type { + padding-top: 30px; + + @include on-tablet { + padding-top: 20px; + } + + @include on-desktop { + padding-top: 30px; + } + } + + button { + margin-top: 40px; + width: 100%; + + @include on-tablet { + margin-top: 50px; + width: 50%; + } + + @include on-desktop { + margin-top: 80px; + } + } + } + + &--date { + position: absolute; + bottom: 50px; + width: 50%; + display: none; + color: $color-white; + + @include on-desktop { + display: flex; + flex-direction: row; + align-items: center; + } + + hr { + width: 80%; + } + } + } + + &__image { + align-self: center; + width: 80%; + + @include on-tablet { + width: 58%; + } + + @include on-desktop { + width: 50%; + margin-right: -55px; + } + } +} diff --git a/src/styles/_icon.scss b/src/styles/_icon.scss new file mode 100644 index 000000000..22bb295e6 --- /dev/null +++ b/src/styles/_icon.scss @@ -0,0 +1,72 @@ +.icon { + display: block; + background-size: contain; + background-position: center; + background-color: $color-white; + background-repeat: no-repeat; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + + &--dropdown { + mask: url(../images/icons/dropdown.svg); + width: 10px; + height: 10px; + transition: transform $transition-time; + + &:hover { + transform: rotate(180deg); + } + } + + &--menu { + mask: url(../images/icons/menu.svg); + width: 30px; + height: 30px; + transition: transform $transition-time; + + &:hover { + transform: scale(1.05); + } + } + + &--close { + mask: url(../images/icons/cross.svg); + width: 30px; + height: 30px; + transition: transform $transition-time; + + &:hover { + transform: scale(1.05); + } + } + + &--arrow { + display: inline-block; + mask: url(../images/icons/arrow.svg); + background-color: currentColor; + width: 20px; + height: 20px; + } + + &--social-facebook { + mask: url(../images/icons/facebook.svg); + } + + &--social-twitter { + mask: url(../images/icons/twitter.svg); + } + + &--social-telegram { + mask: url(../images/icons/telegram.svg); + } + + &--social-instagram { + mask: url(../images/icons/instagram.svg); + } + + &--scroll-up { + mask: url(../images/icons/scroll\ up.svg); + width: 30px; + } +} diff --git a/src/styles/_input.scss b/src/styles/_input.scss new file mode 100644 index 000000000..3e19b421d --- /dev/null +++ b/src/styles/_input.scss @@ -0,0 +1,3 @@ +input { + @extend %input; +} diff --git a/src/styles/_main-container.scss b/src/styles/_main-container.scss new file mode 100644 index 000000000..025efc2f3 --- /dev/null +++ b/src/styles/_main-container.scss @@ -0,0 +1,3 @@ +.main { + @include inline-padding; +} diff --git a/src/styles/_menu.scss b/src/styles/_menu.scss new file mode 100644 index 000000000..070fff656 --- /dev/null +++ b/src/styles/_menu.scss @@ -0,0 +1,91 @@ +.menu { + @include inline-padding; + + box-sizing: border-box; + overflow: auto; + padding-inline: 20px; + + background-color: $color-background; + height: 100vh; + color: $color-white; + + @include on-desktop { + height: auto; + } + + &__top { + position: sticky; + top: 0; + z-index: 1; + } + + &__language { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + } + + &__content { + display: flex; + flex-direction: column; + + @include on-desktop { + flex-direction: row; + justify-content: space-between; + } + + &--options { + display: flex; + flex-direction: column; + gap: 40px; + margin-block: 10px; + } + + &--contacts{ + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + flex-direction: row; + gap: 120px; + } + + @include on-desktop { + gap: 80px; + } + } + + &--image { + object-fit: contain; + display: none; + margin-top: 20px; + + @include on-tablet { + width: 58%; + display: flex; + align-self: center; + } + + @include on-desktop { + margin-right: -55px; + width: 50%; + } + } + + hr { + width: 100%; + color: $color-white; + } + + button { + width: 100%; + + @include on-tablet { + width: 50%; + } + } + } +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 000000000..e256a977b --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,42 @@ +.nav{ + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__link { + color: $color-white; + text-decoration: none; + position: relative; + + &::after { + content: ''; + position: absolute; + width: 100%; + bottom: 0; + height: 1px; + display: block; + background-color: currentColor; + transform-origin: left; + transform: scale(0); + transition: transform $transition-time; + } + + &:hover::after{ + transform: scale(1); + } + } +} diff --git a/src/styles/_page.scss b/src/styles/_page.scss new file mode 100644 index 000000000..99c558e7e --- /dev/null +++ b/src/styles/_page.scss @@ -0,0 +1,60 @@ +.page { + font-family: Raleway, Arial, Helvetica, sans-serif; + color: $color-black; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + margin: 0; + min-width: 320px; + + @include on-desktop { + display: flex; + flex-direction: column; + align-items: stretch; + } + } + + &__overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba($color-black, 0.8); + z-index: 998; + opacity: 0; + display: block; + pointer-events: none; + transition: opacity 0.5s; + + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 999; + + transition: all 0.5s; + opacity: 0; + transform: translateY(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateY(0); + pointer-events: all; + } + } + +} + +.page__menu:target ~ .page__overlay { + opacity: 1; + pointer-events: all; +} diff --git a/src/styles/_section.scss b/src/styles/_section.scss new file mode 100644 index 000000000..40cc3864f --- /dev/null +++ b/src/styles/_section.scss @@ -0,0 +1,388 @@ +.section { + width: 100%; + + &[id='current'], + &[id='plan'], + &[id='news'] { + margin-top: 90px; + + @include on-tablet { + margin-top: 100px; + } + + @include on-desktop { + margin-top: 110px; + } + } + + &[id='events'] { + margin-top: 120px; + + @include on-tablet { + margin-top: 160px; + } + + @include on-desktop { + margin-top: 200px; + } + } + + &[id='subscribe'] { + margin-top: 120px; + margin-bottom: 80px; + + @include on-tablet { + margin-top: 160px; + margin-bottom: 128px; + } + + @include on-desktop { + margin-block: 200px; + } + } + + &__top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 60px; + + button { + display: none; + + @include on-tablet { + display: inline-flex; + width: 210px; + } + + @include on-desktop { + width: 270px; + } + } + } + + &__current { + display: grid; + grid-template-rows: repeat(2, auto); + + @include on-tablet { + grid-template-rows: none; + grid-template-columns: repeat(2, 1fr); + column-gap: 30px; + } + + &--block { + @include on-tablet { + display: grid; + grid-template-rows: auto 1fr auto; + height: 100%; + } + + &:last-of-type { + margin-top: 60px; + margin-bottom: 30px; + + @include on-tablet { + margin-block: 0; + } + } + + button { + width: 100%; + + @include on-desktop { + width: 50%; + } + } + } + + &--image { + width: 100%; + object-fit: cover; + transition: transform $transition-time; + + &:hover { + transform: scale(1.05); + } + } + + &--text { + padding-top: 20px; + padding-bottom: 30px; + + h4 { + margin-top: 10px; + } + + p:last-child { + margin-top: 20px; + } + + &__date { + color: $color-main; + } + } + + > button:last-of-type { + @include on-tablet { + display: none; + } + } + } + + &__events { + display: flex; + flex-direction: column; + + &--block { + display: flex; + flex-direction: column; + gap: 20px; + + &:last-of-type { + margin-top: 60px; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + @include on-tablet { + flex-direction: row; + gap: 30px; + } + + @include on-desktop { + width: 75%; + } + } + + &--image { + height: auto; + width: 100%; + object-fit: contain; + transition: transform $transition-time; + + &:hover { + transform: scale(1.05); + } + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + width: 370px; + } + } + + &--text { + display: flex; + flex-direction: column; + justify-content: flex-start; + + h4 { + margin-top: 10px; + margin-bottom: 20px; + } + + &__date { + color: $color-main; + } + + button { + margin-top: 30px; + width: 100%; + + @include on-desktop { + margin-top: 50px; + } + + @include on-desktop { + width: 50%; + } + } + } + + > button:last-of-type { + @include on-tablet { + display: none; + } + } + } + + &__plan { + display: flex; + align-items: center; + background-color: $color-background; + padding-block: 50px; + color: $color-white; + margin-inline: -20px; + + @include on-tablet { + padding-block: 80px; + margin-inline: -39px; + } + + @include on-desktop { + padding-block: 0; + margin-inline: -55px; + } + + &--image { + display: none; + transition: transform $transition-time; + + &:hover { + transform: scale(1.05); + } + + @include on-desktop { + display: block; + height: 800px; + object-fit: cover; + margin-left: -55px; + } + } + + &--text { + @include inline-padding; + + width: 100%; + + @include on-tablet { + width: 50%; + } + + h2 { + margin-bottom: 20px; + + @include on-desktop { + margin-bottom: 10px; + } + } + + button { + width: 100%; + margin-top: 40px; + + @include on-tablet { + width: 80%; + margin-top: 60px; + } + + @include on-desktop { + width: 50%; + margin-top: 50px; + } + } + } + } + + &__news { + display: grid; + grid-template-rows: repeat(2, auto); + + @include on-tablet { + grid-template-rows: none; + grid-template-columns: repeat(2, 1fr); + column-gap: 30px; + } + + &--block { + @include on-tablet { + display: grid; + grid-template-rows: auto 1fr auto; + height: 100%; + } + + &:last-of-type { + margin-top: 50px; + margin-bottom: 30px; + + @include on-tablet { + margin-block: 0; + } + } + } + + &--image { + width: 100%; + object-fit: cover; + transition: transform $transition-time; + + &:hover { + transform: scale(1.05); + } + } + + &--text { + padding-top: 20px; + + // padding-bottom: 30px; + + p:last-child { + margin-top: 20px; + } + } + + > button:last-of-type { + @include on-tablet { + display: none; + } + } + } + + &__subscribe { + display: flex; + flex-direction: column; + + @include on-tablet { + width: 80%; + } + + @include on-desktop { + width: 100%; + } + + &--text { + display: grid; + grid-template-rows: repeat(2, auto); + gap: 20px; + + @include on-desktop { + grid-template-rows: none; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + } + } + + input { + width: 100%; + margin-top: 50px; + + @include on-tablet { + width: 75%; + } + + @include on-desktop { + width: 40%; + } + } + + button { + width: 100%; + margin-top: 30px; + + @include on-tablet { + width: 70%; + } + + @include on-desktop { + margin-top: 40px; + width: 40%; + } + } + } +} diff --git a/src/styles/_top-bar.scss b/src/styles/_top-bar.scss new file mode 100644 index 000000000..522b44e1d --- /dev/null +++ b/src/styles/_top-bar.scss @@ -0,0 +1,59 @@ +.top-bar { + position: sticky; + padding-block: 20px; + background-color: inherit; + + display: flex; + justify-content: space-between; + align-items: center; + + @include on-desktop { + padding-block: 33px; + } + + &__left { + display: flex; + flex-direction: row; + align-items: center; + gap: 30px; + + @include on-tablet { + flex-direction: row-reverse; + gap: 40px; + } + } + + &__language { + display: none; + position: relative; + + span { + color: $color-white; + } + + @include on-tablet { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + padding-inline: 5px; + } + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 40px; + transition: transform $transition-time; + + &:hover { + transform: scale(1.05); + } + + @include on-tablet { + height: 37px; + } + } +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..104984d9b 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,41 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +h6 { + @extend %h6; +} + +.text { + &--main { + @extend %main-text; + + &:not(.section__current--text__date) { + align-self: start; + } + + &__bold { + font-weight: 600; + } + } + + &--additional { + @extend %additional-text; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..d8ab03fc8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,14 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'button'; +@import 'icon'; +@import 'page'; +@import 'top-bar'; +@import 'header'; +@import 'menu'; +@import 'nav'; +@import 'main-container'; +@import 'section'; +@import 'input'; +@import 'footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..2292a0c99 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,180 @@ %h1 { - font-family: Roboto, sans-serif; + margin: 0; + font-family: 'Playfair Display', 'Times New Roman', Times, serif; + font-size: 48px; + font-weight: 700; + line-height: 100%; + letter-spacing: 0; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + } +} + +%h2 { + margin: 0; + font-family: 'Playfair Display', 'Times New Roman', Times, serif; + font-size: 38px; + font-weight: 700; + line-height: 100%; + letter-spacing: 0; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } +} + +%h3 { + margin: 0; + font-family: 'Playfair Display', 'Times New Roman', Times, serif; + font-size: 28px; + font-weight: 700; + line-height: 125%; + letter-spacing: 0; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 58px; + } +} + +%h4 { + margin: 0; + font-family: 'Playfair Display', 'Times New Roman', Times, serif; + font-size: 20px; + font-weight: 700; + line-height: 125%; + letter-spacing: 0; + + @include on-tablet { + font-size: 24px; + } +} + +%h5 { + margin: 0; + font-family: 'Playfair Display', 'Times New Roman', Times, serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; + letter-spacing: 0; +} + +%h6 { + margin: 0; + font-family: 'Playfair Display', 'Times New Roman', Times, serif; + font-size: 14px; + font-weight: 700; + line-height: 125%; + letter-spacing: 0; +} + +%button-text { + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0; +} + +%main-text { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0; +} + +%additional-text { + margin: 0; font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0; +} + +%button-primary { + background-color: $color-main; + color: $color-white; + + transition: background-color $transition-time; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + &:disabled { + background-color: #dd836f; + } +} + +%button-secondary { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + + border: 1px solid $color-main; + background: none; + color: $color-main; + + transition: all $transition-time; + + &:hover { + border-color: #af3419; + color: #af3419; + } + + &:active { + border-color: #ea340d; + color: #ea340d; + } + + &:disabled { + border-color: #dd836f; + color: #dd836f; + } +} + +%input { + margin: 0; + padding: 0; + padding-block: 3px; + border: none; + border-bottom: 1px solid $color-black; + outline: none; + + transition: all $transition-time; + + &:hover, + &:active { + border-color: $color-main; + + &::placeholder { + color: $color-main; + } + } + + &:not(:placeholder-shown) { + font-weight: bold; + } + + &::placeholder { + color: $color-black; + transition: all $transition-time; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..2acbb1cf4 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,23 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin inline-padding { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..0386ca2ef 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ -$c-gray: #eee; +// screen vars +$tablet-min-width: 640px; +$desktop-min-width: 1280px; + +// color vars +$color-main: #cd4d31; +$color-white: #f1f5f4; +$color-background: #3f5252; +$color-black: #1c1b29; +$color-gray: #504f5e; + +// time vars +$transition-time: 0.3s;