diff --git a/components/01_Atoms/_atoms.scss b/components/01_Atoms/_atoms.scss index 47f1ace..beb6768 100644 --- a/components/01_Atoms/_atoms.scss +++ b/components/01_Atoms/_atoms.scss @@ -4,4 +4,5 @@ @import 'icon/icon'; @import 'textField/textField'; @import 'button/button'; -@import 'checkbox/checkbox'; \ No newline at end of file +@import 'checkbox/checkbox'; +@import 'input/input'; diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss new file mode 100644 index 0000000..e4856bf --- /dev/null +++ b/components/01_Atoms/input/_input.scss @@ -0,0 +1,89 @@ +.LP-Input:has( .LP-Input__Field:disabled){ + background-color: red; +} + +.LP-Input{ + $-margin-bottom: 30px; + display: flex; + flex-direction: column; + margin-bottom: -$-margin-bottom; + padding: 10px 0; + + .LP-Input__Field{ + border: none; + border-bottom: 1px solid $-secondary-color; + padding: 8px; + margin-bottom: $-margin-bottom; + + &:focus, &:active{ + margin-bottom: $-margin-bottom - 1px; + border-bottom: 2px solid $-primary-accent-color; + background-color: $-secondary-background-color; + border-radius: 3px 3px 0 0; + } + + &:disabled{ + background-color: transparent; + border-bottom: 1px dashed $-secondary-color; + cursor: not-allowed; + + &:active{ + margin-bottom: $-margin-bottom; + border-radius: 0; + } + + ~.LP-Input__Message{ + visibility: hidden; + } + + } + } + + .LP-Input__Label{ + font-family: $-primary-sans-serif-font; + font-size: 18px; + } + + .LP-Input__Message{ + font-family: $-primary-sans-serif-font; + font-style: italic; + font-size: 13px; + padding: 3px; + position: relative; + top: -$-margin-bottom; + + &:before{ + content: '* '; + } + } + + &--error{ + .LP-Input__Field{ + margin-bottom: 25px; + border-bottom: 2px solid $-primary-accent-color; + margin-bottom: $-margin-bottom - 1px; + } + + .LP-Input__Message{ + color: $-primary-accent-color; + } + } +} + +@media(max-width: $-viewport-small){ + .LP-Input{ + .LP-Input__Label{ + font-family: $-primary-sans-serif-font; + font-size: 2.5vw; + } + } +} + +@media(max-width: $-viewport-extra-small){ + .LP-Input{ + .LP-Input__Label{ + font-family: $-primary-sans-serif-font; + font-size: 18px; + } + } +} \ No newline at end of file diff --git a/components/01_Atoms/input/input.config.json b/components/01_Atoms/input/input.config.json new file mode 100644 index 0000000..544b7b4 --- /dev/null +++ b/components/01_Atoms/input/input.config.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/components/01_Atoms/input/input.hbs b/components/01_Atoms/input/input.hbs new file mode 100644 index 0000000..acb368e --- /dev/null +++ b/components/01_Atoms/input/input.hbs @@ -0,0 +1,10 @@ +
+ + + Field is required +
+
+ + + Field is required +
\ No newline at end of file diff --git a/components/02_Molecules/_molecules.scss b/components/02_Molecules/_molecules.scss index be1a91d..ea85891 100644 --- a/components/02_Molecules/_molecules.scss +++ b/components/02_Molecules/_molecules.scss @@ -1,4 +1,5 @@ @import 'logo/logo'; @import 'textSection/textSection'; @import 'place/place'; -@import 'securityMeasureList/securityMeasureList'; \ No newline at end of file +@import 'securityMeasureList/securityMeasureList'; +@import 'form/form'; \ No newline at end of file diff --git a/components/02_Molecules/form/_form.scss b/components/02_Molecules/form/_form.scss new file mode 100644 index 0000000..5729e65 --- /dev/null +++ b/components/02_Molecules/form/_form.scss @@ -0,0 +1,70 @@ +.LP-Form{ + max-width: 900px; + .LP-Form__Fieldset{ + border: none; + + .LP-Form__Legend{ + margin: 0; + padding: 0; + } + + .LP-Form__Composition{ + display: flex; + flex-direction: row; + justify-content: space-between; + + .LP-Form__Field{ + flex: 3 1 100px; + padding: 0 15px; + + &--wider{ + flex: 5 1 200px; + } + + &--wide{ + flex: 4 1 150px; + } + + &--narrow{ + flex: 2 0 50px; + } + + &--narrower{ + flex: 1 0 25px; + } + + input{ + width: 100%; + } + } + } + } +} + +@media(max-width: $-viewport-small){ + .LP-Form{ + .LP-Form__Fieldset{ + .LP-Form__Composition--breakable{ + display: flex; + flex-direction: column; + justify-content: space-between; + } + } + } +} + +@media(max-width: $-viewport-extra-small){ + .LP-Form{ + .LP-Form__Fieldset{ + .LP-Form__Composition{ + display: flex; + flex-direction: column; + justify-content: space-between; + + .LP-Form__Field{ + flex: 3 1 100px; + } + } + } + } +} \ No newline at end of file diff --git a/components/02_Molecules/form/form.config.json b/components/02_Molecules/form/form.config.json new file mode 100644 index 0000000..544b7b4 --- /dev/null +++ b/components/02_Molecules/form/form.config.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/components/02_Molecules/form/form.hbs b/components/02_Molecules/form/form.hbs new file mode 100644 index 0000000..12b7946 --- /dev/null +++ b/components/02_Molecules/form/form.hbs @@ -0,0 +1,47 @@ +
+
+ Basic data + +
+ + + + Field is required + + + + + +
+ +
+ + + + We won't send any stalkers, promise + + + + + Field is required + + + + + Field is required + +
+ +
+ + + + + + + + +
+ +
+
\ No newline at end of file diff --git a/components/components.scss b/components/components.scss index 273dfa3..b124ce6 100644 --- a/components/components.scss +++ b/components/components.scss @@ -1,13 +1,35 @@ +@font-face { + font-family: Crimson; + src: + url('fonts/Crimson/CrimsonText-Regular.ttf'), + url('fonts/Crimson/CrimsonText-Bold.ttf'), + url('fonts/Crimson/CrimsonText-Italic.ttf') + ; + } + + @font-face { + font-family: Montserrat; + src: + url('fonts/Montserrat/Montserrat-Regular.ttf'), + url('fonts/Montserrat/Montserrat-Bold.ttf'), + url('fonts/Montserrat/Montserrat-Italic.ttf') + ; + } + $-primary-color: #D7CEC7; $-secondary-color: #565656; $-primary-accent-color: #76323F; $-secondary-accent-color: #C09F80; $-secondary-background-color: #f9f9f9; -$-primary-sans-serif-font: "Trebuchet MS", Helvetica, sans-serif; -$-primary-serif-font: "Times New Roman", Times, serif; +$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif; +$-primary-serif-font: Crimson, Times, serif; $-primary-sans-serif-accent-font: Roboto, Arial, sans-serif; +$-viewport-small: 650px; +$-viewport-extra-small: 390px; + + @import '01_Atoms/atoms'; @import '02_Molecules/molecules'; @import '03_Organisms/organisms'; diff --git a/package.json b/package.json index 14dcf68..632c6f8 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "communitea", + "name": "Lostplaces", "version": "0.1.0", "dependencies": { "@frctl/fractal": "^1.2.1", diff --git a/public/components.css b/public/components.css index 22120f0..5467557 100644 --- a/public/components.css +++ b/public/components.css @@ -1,3 +1,11 @@ +@font-face { + font-family: Crimson; + src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } + +@font-face { + font-family: Montserrat; + src: url("fonts/Montserrat/Montserrat-Regular.ttf"), url("fonts/Montserrat/Montserrat-Bold.ttf"), url("fonts/Montserrat/Montserrat-Italic.ttf"); } + .LP-Link { color: #565656; text-decoration: none; @@ -13,7 +21,7 @@ display: inline; } .LP-Headline { - font-family: "Trebuchet MS", Helvetica, sans-serif; + font-family: Montserrat, Helvetica, sans-serif; color: #565656; font-size: 1.7rem; padding-top: 0px; @@ -29,7 +37,7 @@ .LP-Text { color: black; - font-family: "Times New Roman", Times, serif; + font-family: Crimson, Times, serif; font-size: 1.2rem; } .LP-Icon { @@ -45,32 +53,61 @@ .LP-Icon__List .LP-Icon__Item { padding: 0 3px; } -.LP-Form .LP-Form__Input--text { - border: none; - border-bottom: 1px solid #C09F80; } - .LP-Form .LP-Form__Input--text:active, .LP-Form .LP-Form__Input--text:focus { - border-bottom: 1px solid #76323F; } +.LP-Input:has(.LP-Input__Field:disabled) { + background-color: red; } -.LP-Button { - background-color: #C09F80; - color: #565656; - border: none; - padding: 8px 14px; - border-radius: 2px; - font-weight: bold; } - .LP-Button:active { - background-color: #76323F; - color: #C09F80; } +.LP-Input { + display: flex; + flex-direction: column; + margin-bottom: -30px; + padding: 10px 0; } + .LP-Input .LP-Input__Field { + border: none; + border-bottom: 1px solid #565656; + padding: 8px; + margin-bottom: 30px; } + .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active { + margin-bottom: 29px; + border-bottom: 2px solid #76323F; + background-color: #f9f9f9; + border-radius: 3px 3px 0 0; } + .LP-Input .LP-Input__Field:disabled { + background-color: transparent; + border-bottom: 1px dashed #565656; + cursor: not-allowed; } + .LP-Input .LP-Input__Field:disabled:active { + margin-bottom: 30px; + border-radius: 0; } + .LP-Input .LP-Input__Field:disabled ~ .LP-Input__Message { + visibility: hidden; } + .LP-Input .LP-Input__Label { + font-family: Montserrat, Helvetica, sans-serif; + font-size: 18px; } + .LP-Input .LP-Input__Message { + font-family: Montserrat, Helvetica, sans-serif; + font-style: italic; + font-size: 13px; + padding: 3px; + position: relative; + top: -30px; } + .LP-Input .LP-Input__Message:before { + content: '* '; } + .LP-Input--error .LP-Input__Field { + margin-bottom: 25px; + border-bottom: 2px solid #76323F; + margin-bottom: 29px; } + .LP-Input--error .LP-Input__Message { + color: #76323F; } -.LP-Form .LP-Form__Checkbox { - display: none; } +@media (max-width: 650px) { + .LP-Input .LP-Input__Label { + font-family: Montserrat, Helvetica, sans-serif; + font-size: 2.5vw; } } -.LP-Form .LP-Form__CheckBox__CheckMark { - height: 1em; - width: 1em; - border: 1px solid black; - padding: 0 calc(.5em + 2px); - margin-right: .7em; } +@media (max-width: 390px) { + .LP-Input .LP-Input__Label { + font-family: Montserrat, Helvetica, sans-serif; + font-size: 18px; } } .LP-Logo { max-width: 100%; @@ -102,7 +139,7 @@ padding-bottom: 10px; } .LP-Place .LP-Place__Info .LP-Place__Title { - font-family: "Trebuchet MS", Helvetica, sans-serif; + font-family: Montserrat, Helvetica, sans-serif; color: #565656; font-size: 1rem; padding: 0px; @@ -113,7 +150,7 @@ color: #565656; } .LP-Place .LP-Place__Info .LP-Place__Detail { - font-family: "Trebuchet MS", Helvetica, sans-serif; + font-family: Montserrat, Helvetica, sans-serif; padding: 0; margin: 0; margin-top: 5px; @@ -130,9 +167,48 @@ background-color: #D7CEC7; border-radius: 2px; } .LP-SecurityMeasure__List .LP-SecurityMeasure__Item .LP-Text { - font-family: "Trebuchet MS", Helvetica, sans-serif; + font-family: Montserrat, Helvetica, sans-serif; font-size: 1.2rem; } +.LP-Form { + max-width: 900px; } + .LP-Form .LP-Form__Fieldset { + border: none; } + .LP-Form .LP-Form__Fieldset .LP-Form__Legend { + margin: 0; + padding: 0; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition { + display: flex; + flex-direction: row; + justify-content: space-between; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { + flex: 3 1 100px; + padding: 0 15px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider { + flex: 5 1 200px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide { + flex: 4 1 150px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow { + flex: 2 0 50px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower { + flex: 1 0 25px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field input { + width: 100%; } + +@media (max-width: 650px) { + .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable { + display: flex; + flex-direction: column; + justify-content: space-between; } } + +@media (max-width: 390px) { + .LP-Form .LP-Form__Fieldset .LP-Form__Composition { + display: flex; + flex-direction: column; + justify-content: space-between; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { + flex: 3 1 100px; } } + .LP-Header { display: flex; align-items: center; diff --git a/public/fonts/Crimson/CrimsonText-Bold.ttf b/public/fonts/Crimson/CrimsonText-Bold.ttf new file mode 100644 index 0000000..2a4951e Binary files /dev/null and b/public/fonts/Crimson/CrimsonText-Bold.ttf differ diff --git a/public/fonts/Crimson/CrimsonText-BoldItalic.ttf b/public/fonts/Crimson/CrimsonText-BoldItalic.ttf new file mode 100644 index 0000000..241ad8e Binary files /dev/null and b/public/fonts/Crimson/CrimsonText-BoldItalic.ttf differ diff --git a/public/fonts/Crimson/CrimsonText-Italic.ttf b/public/fonts/Crimson/CrimsonText-Italic.ttf new file mode 100644 index 0000000..45e9168 Binary files /dev/null and b/public/fonts/Crimson/CrimsonText-Italic.ttf differ diff --git a/public/fonts/Crimson/CrimsonText-Regular.ttf b/public/fonts/Crimson/CrimsonText-Regular.ttf new file mode 100644 index 0000000..a173714 Binary files /dev/null and b/public/fonts/Crimson/CrimsonText-Regular.ttf differ diff --git a/public/fonts/Crimson/CrimsonText-SemiBold.ttf b/public/fonts/Crimson/CrimsonText-SemiBold.ttf new file mode 100644 index 0000000..ea3bb66 Binary files /dev/null and b/public/fonts/Crimson/CrimsonText-SemiBold.ttf differ diff --git a/public/fonts/Crimson/CrimsonText-SemiBoldItalic.ttf b/public/fonts/Crimson/CrimsonText-SemiBoldItalic.ttf new file mode 100644 index 0000000..8c18b09 Binary files /dev/null and b/public/fonts/Crimson/CrimsonText-SemiBoldItalic.ttf differ diff --git a/public/fonts/Montserrat/Montserrat-Bold.otf b/public/fonts/Montserrat/Montserrat-Bold.otf new file mode 100644 index 0000000..cdfb83d Binary files /dev/null and b/public/fonts/Montserrat/Montserrat-Bold.otf differ diff --git a/public/fonts/Montserrat/Montserrat-Italic.otf b/public/fonts/Montserrat/Montserrat-Italic.otf new file mode 100644 index 0000000..450689e Binary files /dev/null and b/public/fonts/Montserrat/Montserrat-Italic.otf differ diff --git a/public/fonts/Montserrat/Montserrat-Regular.otf b/public/fonts/Montserrat/Montserrat-Regular.otf new file mode 100644 index 0000000..c1d1ee3 Binary files /dev/null and b/public/fonts/Montserrat/Montserrat-Regular.otf differ diff --git a/public/fonts/OFL.txt b/public/fonts/OFL.txt new file mode 100644 index 0000000..bb385d2 --- /dev/null +++ b/public/fonts/OFL.txt @@ -0,0 +1,94 @@ +Copyright (c) 2010, Sebastian Kosch (sebastian@aldusleaf.org), +with Reserved Font Name "Crimson" and "Crimson Text". + +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: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +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.