diff --git a/assets/css/_contact.scss b/assets/css/_contact.scss new file mode 100644 index 0000000..b2dd58d --- /dev/null +++ b/assets/css/_contact.scss @@ -0,0 +1,54 @@ +.contact { + @include element(header) { + @include header-background; + padding: 2rem 0; + .grid-container { + margin: auto; + } + } + + @include element(form) { + margin: 2rem; + + label { + color: black; + background: none; + padding: 0.3rem 0; + } + + textarea { + min-height: 10rem; + } + + @include element(button) { + @include gather-button; + } + } + + hr { + margin: 3rem 0 2rem; + max-width: 100%; + } + + @include element(about) { + margin-bottom: 3rem; + + @include element(title) { + color: var(--secondary-bg-colour); + font-weight: bold; + } + + @include element(team) { + color: var(--main-bg-colour); + font-weight: bold; + } + + @include element(thanks) { + margin-bottom: 2rem; + + @include element(details) { + width: 90vw; + } + } + } +} \ No newline at end of file diff --git a/assets/css/_headers.scss b/assets/css/_headers.scss deleted file mode 100644 index e500c76..0000000 --- a/assets/css/_headers.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin headers { - h1 { - text-align: center; - } -} \ No newline at end of file diff --git a/assets/css/_home.scss b/assets/css/_home.scss index 5182c5d..5bfe665 100644 --- a/assets/css/_home.scss +++ b/assets/css/_home.scss @@ -1,8 +1,7 @@ .home { - width: 100%; - background-color: var(--main-bg-colour); - z-index: $home-background-zindex; + @include header-background; height: 90vh; + z-index: $home-background-zindex; @include element(image) { background-image: url(/images/welcome.svg); @@ -24,34 +23,6 @@ vertical-align: middle; margin: auto; - @include element(title) { - color: var(--text-light-colour); - font-weight: 900; - - line-height: 2.1rem; - font-size: 2rem; - - @include breakpoint(medium up) { - line-height: 5.5rem; - font-size: 5rem; - } - - margin: 0; - } - - @include element(subtitle) { - color: var(--text-dark-colour); - margin-bottom: 2rem; - font-weight: 700; - - font-size: 1.5rem; - line-height: 1.6rem; - @include breakpoint(medium up) { - font-size: 2.5rem; - line-height: 2.6rem; - } - } - @include element(button) { @include gather-button; diff --git a/assets/css/_login.scss b/assets/css/_login.scss index 06551d9..62dc3fc 100644 --- a/assets/css/_login.scss +++ b/assets/css/_login.scss @@ -1,6 +1,4 @@ .login { - @include headers; - @include element(form) { margin-bottom: 2rem; diff --git a/assets/css/_nav.scss b/assets/css/_nav.scss index 89227f2..2b412af 100644 --- a/assets/css/_nav.scss +++ b/assets/css/_nav.scss @@ -12,6 +12,7 @@ a { text-decoration: none; color: $black; + font-weight: normal; } select { diff --git a/assets/css/app.scss b/assets/css/app.scss index 65b799a..18d0363 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1,9 +1,9 @@ /* This file is for your main application css. */ -@import "./bem"; -@import "./buttons"; +@import "./mixins/bem"; +@import "./mixins/buttons"; @import "./colours.css"; -@import "./headers"; +@import "./mixins/headers"; @import "./zindices"; @import "~foundation-sites/scss/foundation"; @@ -11,8 +11,9 @@ @import "./nav"; // CSS for individual pages -@import "./login"; +@import "./contact"; @import "./home"; +@import "./login"; body { header { @@ -31,4 +32,20 @@ body { color: white; } } + + // Make links accessible + a { + color: var(--secondary-bg-colour); + font-weight: bold; + + &:hover, &:active, &:focus { + text-decoration: underline; + font-size: 1.2rem; + } + } + + // Hide the dropdown on select for Firefox since Foundation doesn't seem to. + select { + -moz-appearance: none; + } } \ No newline at end of file diff --git a/assets/css/_bem.scss b/assets/css/mixins/_bem.scss similarity index 100% rename from assets/css/_bem.scss rename to assets/css/mixins/_bem.scss diff --git a/assets/css/_buttons.scss b/assets/css/mixins/_buttons.scss similarity index 100% rename from assets/css/_buttons.scss rename to assets/css/mixins/_buttons.scss diff --git a/assets/css/mixins/_headers.scss b/assets/css/mixins/_headers.scss new file mode 100644 index 0000000..9dbbb14 --- /dev/null +++ b/assets/css/mixins/_headers.scss @@ -0,0 +1,38 @@ +@mixin headers { + h1 { + text-align: center; + } +} + +@mixin header-background { + width: 100%; + background-color: var(--main-bg-colour); + + h1 { + color: var(--text-light-colour); + font-weight: 900; + + line-height: 2.1rem; + font-size: 2rem; + + @include breakpoint(medium up) { + line-height: 5.5rem; + font-size: 5rem; + } + + margin: 0; + } + + h2 { + color: var(--text-dark-colour); + margin-bottom: 2rem; + font-weight: 700; + + font-size: 1.5rem; + line-height: 1.6rem; + @include breakpoint(medium up) { + font-size: 2.5rem; + line-height: 2.6rem; + } + } +} \ No newline at end of file diff --git a/lib/gather_web/templates/page/contact.html.eex b/lib/gather_web/templates/page/contact.html.eex index 56e19cf..c5db779 100644 --- a/lib/gather_web/templates/page/contact.html.eex +++ b/lib/gather_web/templates/page/contact.html.eex @@ -1,57 +1,66 @@ -
-

<%= gettext "Contact" %>

-

<%= gettext """ - Are you a refugee who wants to access this site? - Or do you just want to know more? Email us! - """ %>

-
- <%= form_for @conn, "mailto:gather.techfugees@gmail.com", [method: "get", csrf_token: false, target: "_blank", rel: "noopener noreferrer", enctype: "multipart/form-data"], fn f -> %> -
+
+
+
+

<%= gettext "Contact" %>

+

<%= gettext """ + Are you a refugee who wants to access this site? + Or do you just want to know more? Email us! + """ %> +

+
+
+ <%= form_for @conn, "mailto:gather.techfugees@gmail.com", [method: "get", csrf_token: false, target: "_blank", rel: "noopener noreferrer", enctype: "multipart/form-data", class: "contact__form grid-container grid-x"], fn f -> %> +
<%= label f, :subject, "Where are you living?", class: "label" %> <%= select f, :subject, @regions, class: "form-control" %>
-
+
<%= label f, :body, "Message:", class: "label" %> <%= textarea f, :body, value: "Hi,\n\nI'm interested in joining Gather.\n\nRegards,\n", class: "form-control" %>
- <%= submit gettext("Email us"), class: "form-control" %> + <%= submit gettext("Email us"), class: "form-control contact__form__button" %> <% end %> -
- -
-

<%= gettext "About" %>

-

<%= gettext """ -Resources for refugees arriving in New Zealand are spread over many -different government websites so they're hard to find - and often hard to -understand, even for native English speakers! They are given some support from -groups such as the Red Cross, but this is limited and often ends before a refugee -is fully settled. -""" %>

-

<%= gettext """ -%{name} is intended to be a community-focused website which collates external links and -allowing refugees to share and promote the sources they've found useful, to translate -advice into their native languages and to offer to support newcomers once they've been -through the process. -""", name: "Gather" %>

-

-<%= gettext("This website was created by %{teamname} as a result of the %{techfugees} hackathon", - teamname: "ByDefault", - techfugees: "Techfugees NZ" - ) |> raw() %> -

-
Icons made by: - -from www.flaticon.com and licensed by CC 3.0 +
+ +
+

<%= gettext "About" %>

+

<%= gettext """ + Resources for refugees arriving in New Zealand are spread over many + different government websites so they're hard to find - and often hard to + understand, even for native English speakers! They are given some support from + groups such as the Red Cross, but this is limited and often ends before a refugee + is fully settled. + """ %>

+

<%= gettext """ + %{name} is intended to be a community-focused website which collates external links and + allowing refugees to share and promote the sources they've found useful, to translate + advice into their native languages and to offer to support newcomers once they've been + through the process. + """, name: "Gather" %>

+

+ <%= gettext("This website was created by %{teamname} as a result of the %{techfugees} hackathon", + teamname: "ByDefault", + techfugees: "Techfugees NZ" + ) |> raw() %> +

+
+ Icons made by +
+ + from www.flaticon.com and licensed by CC 3.0 +
+
+
\ No newline at end of file