From ea23fbb731c2c3d33d5367c3416a546eafe431d7 Mon Sep 17 00:00:00 2001 From: Sven Hoehn Date: Thu, 1 Mar 2018 16:13:14 +0100 Subject: [PATCH] Donation page responsivness --- static/css/style.css | 152 ++++++++++++++++++++++-- static/scss/_donation.scss | 161 +++++++++++++++++++++++-- static/scss/_fonts.scss | 3 +- static/scss/_icons.scss | 6 + templates/donate.html | 228 +++++++++++++++++++++--------------- templates/modules/menu.html | 2 +- 6 files changed, 432 insertions(+), 120 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 3be2ffc..4c3db9b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -5469,10 +5469,61 @@ a.pswp__share--download:hover { .pswp--minimal--dark .pswp__top-bar { background: none; } +.donation { + background-image: url("../img/header-background.jpg"); + background-size: cover; + background-attachment: fixed; + background-position: center center; + width: 100vw; + height: 768px; + margin-bottom: 1122px; } + @media (min-width: 576px) { + .donation { + margin-bottom: 1078px; } } + @media (min-width: 768px) { + .donation { + margin-bottom: 668px; } } + @media (min-width: 992px) { + .donation { + margin-bottom: 522px; } } + @media (min-width: 1200px) { + .donation { + height: 800px; + margin-bottom: 328px; } } + .donation-card { border-radius: 4px; background-color: white; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } + @media (max-width: 767px) { + .donation-card { + background-color: transparent; + box-shadow: none; + border-radius: 0; } } + .donation-card h3 a { + color: white; } + @media (max-width: 767px) { + .donation-card .card { + height: 1100px; + margin-bottom: 32px; + border-radius: 4px; + background-color: white; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } } + @media (max-width: 575px) { + .donation-card .card { + border-radius: 0; + box-shadow: none; + margin-bottom: 0; } } + .donation-card .info { + border-radius: 4px 0 0 4px; } + @media (max-width: 767px) { + .donation-card .info { + border-radius: 4px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } } + @media (max-width: 575px) { + .donation-card .info { + border-radius: 0; + box-shadow: none; } } .ownamount { overflow: hidden; @@ -5495,7 +5546,10 @@ input.radiobtn:not(old) + label { background-image: url("/static/img/icons/icon-radiobtn-off.png"); background-repeat: no-repeat; background-position: 0 0; - padding-left: 38px; } + padding-left: 40px; } + @media (min-width: 992px) { + input.radiobtn:not(old) + label { + padding-left: 28px; } } input.radiobtn:not(old):checked + label { background-image: url("/static/img/icons/icon-radiobtn-on.png"); } @@ -5506,9 +5560,11 @@ input.radiobtn:not(old):checked + label { padding: 24px; position: relative; padding: 24px 20px; } + .inline-card #amount { + margin-left: -8px; } label.amount { - width: 84px; + width: 76px; height: 48px; display: block; background-color: white; @@ -5517,8 +5573,52 @@ label.amount { font-size: 20px; color: #42a5f5; text-align: center; - margin: 0 8px 16px 8px; + margin: 0 4px 12px 4px; padding: 8px 0 0 0; } + @media (min-width: 576px) { + label.amount { + width: 84px; + margin: 0 8px 16px 8px; } } + +label.cc img { + height: 24px; } + +@media (max-width: 1199px) { + #ccpayment, + #paymentpaypal, + #sepapayment { + padding-bottom: 24px; + margin-bottom: 32px; } + #ccpayment label img, + #paymentpaypal label img, + #sepapayment label img { + position: relative; } } + +@media (min-width: 992px) { + #ccpayment { + margin-top: 16px; } + #ccpayment label { + background-position: 0 4px; } } + +@media (max-width: 1199px) { + #paymentpaypal label img { + top: -7px; } } + +@media (min-width: 992px) { + #paymentpaypal { + margin-top: 14px; } + #paymentpaypal label { + background-position: 0 6px; } } + +@media (min-width: 1200px) { + #paymentpaypal { + margin-top: 0; } + #paymentpaypal label { + background-position: 0 20px; } } + +@media (min-width: 992px) { + #sepapayment { + padding-top: 20px; } } input[name=amount] { display: none; } @@ -5529,25 +5629,49 @@ input[name=amount]:checked + label { .or { display: block; - height: 200px; - width: 1px; + height: 1px; + width: 90%; border: 1px solid rgba(38, 50, 56, 0.3); position: absolute; - left: 350px; - top: 12px; } + left: 5%; + top: 212px; } + @media (min-width: 576px) { + .or { + top: 222px; } } + @media (min-width: 992px) { + .or { + height: 200px; + width: 1px; + border: 1px solid rgba(38, 50, 56, 0.3); + left: 257px; + top: 12px; } } + @media (min-width: 1200px) { + .or { + left: 350px; } } .or:before { content: "OR"; font-family: 'Ubuntu', sans-serif; font-size: 16px; font-weight: 500; + text-align: center; color: rgba(38, 50, 56, 0.3); background-color: #eceff1; display: block; position: absolute; - top: 12px; - left: -12px; - width: 24px; + top: -13px; + left: 50%; + margin-left: -20px; + width: 40px; height: 24px; } + @media (min-width: 992px) { + .or:before { + text-align: left; + display: block; + top: 12px; + left: -12px; + margin-left: 0; + width: 24px; + height: 24px; } } body { min-height: 100vh; @@ -5576,7 +5700,7 @@ h3 { h3 { font-size: 24px; line-height: 32px; - font-weight: 300; + font-weight: 500; margin-bottom: 0; } } h3.headline { text-align: center; @@ -5643,6 +5767,7 @@ p { @media (min-width: 768px) { .display-2 { font-size: 40px; + font-weight: 500; line-height: 56px; margin-bottom: 3rem; } } @@ -6186,6 +6311,11 @@ button:focus { .i_secure { fill: rgba(38, 50, 56, 0.3); } +.i_arrow_down_2 { + fill: white; + opacity: .75; + transform: translateY(3px); } + .amber-800 { color: #ff8f00; border-color: #ff8f00; } diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss index 09a733b..322b00c 100644 --- a/static/scss/_donation.scss +++ b/static/scss/_donation.scss @@ -1,7 +1,63 @@ +.donation { + background-image: url('../img/header-background.jpg'); + background-size: cover; + background-attachment: fixed; + background-position: center center; + width: 100vw; + height: 768px; + margin-bottom: 1122px; + @include media-breakpoint-up(sm) { + margin-bottom: 1078px; + } + @include media-breakpoint-up(md) { + margin-bottom: 668px; + } + @include media-breakpoint-up(lg) { + margin-bottom: 522px; + } + @include media-breakpoint-up(xl) { + height: 800px; + margin-bottom: 328px; + } +} + .donation-card { border-radius: 4px; background-color: white; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); + @include media-breakpoint-down(sm) { + background-color: transparent; + box-shadow: none; + border-radius: 0; + } + h3 a { + color: white; + } + .card { + @include media-breakpoint-down(sm) { + height: 1100px; + margin-bottom: 32px; + border-radius: 4px; + background-color: white; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); + } + @include media-breakpoint-down(xs) { + border-radius: 0; + box-shadow: none; + margin-bottom: 0; + } + } + .info { + border-radius: 4px 0 0 4px; + @include media-breakpoint-down(sm) { + border-radius: 4px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); + } + @include media-breakpoint-down(xs) { + border-radius: 0; + box-shadow: none; + } + } } .ownamount { @@ -28,7 +84,10 @@ input.radiobtn:not(old) + label { background-image: url("/static/img/icons/icon-radiobtn-off.png"); background-repeat: no-repeat; background-position: 0 0; - padding-left: 38px; + padding-left: 40px; + @include media-breakpoint-up(lg) { + padding-left: 28px; + } } input.radiobtn:not(old):checked + label { @@ -41,10 +100,13 @@ input.radiobtn:not(old):checked + label { padding: 24px; position: relative; padding: 24px 20px; + #amount { + margin-left: -8px; + } } label.amount { - width: 84px; + width: 76px; height: 48px; display: block; background-color: white; @@ -53,8 +115,63 @@ label.amount { font-size: 20px; color: $blue-400; text-align: center; - margin: 0 8px 16px 8px; + margin: 0 4px 12px 4px; padding: 8px 0 0 0; + @include media-breakpoint-up(sm) { + width: 84px; + margin: 0 8px 16px 8px; + } +} + +label.cc img { + height: 24px; +} + +#ccpayment, +#paymentpaypal, +#sepapayment { + @include media-breakpoint-down(lg) { + padding-bottom: 24px; + margin-bottom: 32px; + label img { + position: relative; + } + } +} + +#ccpayment { + @include media-breakpoint-up(lg) { + margin-top: 16px; + label { + background-position: 0 4px; + } + } +} + +#paymentpaypal { + @include media-breakpoint-down(lg) { + label img { + top: -7px; + } + } + @include media-breakpoint-up(lg) { + margin-top: 14px; + label { + background-position: 0 6px; + } + } + @include media-breakpoint-up(xl) { + margin-top: 0; + label { + background-position: 0 20px; + } + } +} + +#sepapayment { + @include media-breakpoint-up(lg) { + padding-top: 20px; + } } input[name=amount] { @@ -68,24 +185,48 @@ input[name=amount]:checked + label { .or { display: block; - height: 200px; - width: 1px; + height: 1px; + width: 90%; border: 1px solid $blue-grey-300; position: absolute; - left: 350px; - top: 12px; + left: 5%; + top: 212px; + @include media-breakpoint-up(sm) { + top: 222px; + } + @include media-breakpoint-up(lg) { + height: 200px; + width: 1px; + border: 1px solid $blue-grey-300; + left: 257px; + top: 12px; + } + @include media-breakpoint-up(xl) { + left: 350px; + } &:before { content: "OR"; font-family: 'Ubuntu', sans-serif; font-size: 16px; font-weight: 500; + text-align: center; color: $blue-grey-300; background-color: $blue-grey-50; display: block; position: absolute; - top: 12px; - left: -12px; - width: 24px; + top: -13px; + left: 50%; + margin-left: -20px; + width: 40px; height: 24px; + @include media-breakpoint-up(lg) { + text-align: left; + display: block; + top: 12px; + left: -12px; + margin-left: 0; + width: 24px; + height: 24px; + } } } \ No newline at end of file diff --git a/static/scss/_fonts.scss b/static/scss/_fonts.scss index c6826c5..37539b3 100644 --- a/static/scss/_fonts.scss +++ b/static/scss/_fonts.scss @@ -17,7 +17,7 @@ h3 { @include media-breakpoint-up(md) { font-size: 24px; line-height: 32px; - font-weight: 300; + font-weight: 500; margin-bottom: 0; } &.headline { @@ -94,6 +94,7 @@ p { margin-bottom: 40px; @include media-breakpoint-up(md) { font-size: 40px; + font-weight: 500; line-height: 56px; margin-bottom: 3rem; } diff --git a/static/scss/_icons.scss b/static/scss/_icons.scss index 28c5e75..1a420bb 100644 --- a/static/scss/_icons.scss +++ b/static/scss/_icons.scss @@ -71,4 +71,10 @@ .i_secure { fill: $blue_grey_300; +} + +.i_arrow_down_2 { + fill: white; + opacity: .75; + transform: translateY(3px); } \ No newline at end of file diff --git a/templates/donate.html b/templates/donate.html index 13e45f4..db86ea4 100644 --- a/templates/donate.html +++ b/templates/donate.html @@ -3,86 +3,26 @@ {% block title %}{{ _("Donate") }}{% end block %} {% block container %} -
-
-
-

{{ _("Donate") }}

- -
-
-
-
-
-
-

IPFire is an Open Source software project.

- {% if lang == "de" %} -

- Die Entwicklung und die Fortführung des Projekts wird allein - von einer Gruppe von Freiwilligen getragen, die ein Produkt - entwickelt hat, das tagtäglich von Hunderttausenden genutzt - wird. -

- -

- Jede einzelne Spende hilft IPFire noch weiter zu verbessern... -

- {% else %} -

- IPFire is an Open Source software project. -

- -

- Development and keeping the project healthy is carried out by a - group of volunteers who have built a very successful product, - which hundreds of thousands of people use every day. -

- -

- Your donation helps us to make IPFire even better... -

-
- -
-

Why should I donate?

- -

We are proud of what we are doing here at IPFire. We create a free firewall - distribution that is free to use for everyone anywhere in the world. To do that, - we need to provide the infrastructure to distribute it to our users and provide - the right tools for our developers to help them to make IPFire better every day. -

- -

Donations from individuals and corporations are the only way to keep all of our - services free for everyone. They pay for hosting, advertising, purchase - equipment and to fund the work of the people behind it. -

- -

Our ambition is to compete with projects backed by large corporations and - proprietary solutions and we cannot do that without you. Become a supporter - today! -

-
- -
-

How much should I give?

- -

Donations range from single digits donations to hundreds. For us it is important - to give something back to help this project to succeed. If you want to help, - please do so and encourage others to do so, too. -

-
- {% end %} -
-
-
-
-
+
+
+
+
+

{{ _("Donate") }}

+ +
+
+
+
+
+
+

Choose a currency

-
+
-
+
@@ -92,11 +32,11 @@

Frequency

-
+
-
+
@@ -105,12 +45,12 @@
-
+
-
-
+
+

Choose an amount

-
+
@@ -137,7 +77,7 @@
-
+

Choose payment

@@ -145,10 +85,10 @@
-
-
+
+
-
-
+
+ +
+ + +
-

+

There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc.

+ +
+
+

IPFire is an Open Source software project.

+ {% if lang == "de" %} +

+ Die Entwicklung und die Fortführung des Projekts wird allein + von einer Gruppe von Freiwilligen getragen, die ein Produkt + entwickelt hat, das tagtäglich von Hunderttausenden genutzt + wird. +

+ +

+ Jede einzelne Spende hilft IPFire noch weiter zu verbessern... +

+ {% else %} +

+ IPFire is an Open Source software project. +

+ +

+ Development and keeping the project healthy is carried out by a + group of volunteers who have built a very successful product, + which hundreds of thousands of people use every day. +

+ +

+ Your donation helps us to make IPFire even better... +

+
+ +
+

Why should I donate?

+
+ +
+

How much should I give?

+
+ {% end %} +
-
- +
+
+
+
+ +
+
-
+
+
+

Why should I donate?

+ +

We are proud of what we are doing here at IPFire. We create a free firewall + distribution that is free to use for everyone anywhere in the world. To do that, + we need to provide the infrastructure to distribute it to our users and provide + the right tools for our developers to help them to make IPFire better every day. +

+ +

Donations from individuals and corporations are the only way to keep all of our + services free for everyone. They pay for hosting, advertising, purchase + equipment and to fund the work of the people behind it. +

+ +

Our ambition is to compete with projects backed by large corporations and + proprietary solutions and we cannot do that without you. Become a supporter + today! +

+
+ +
+

How much should I give?

+ +

Donations range from single digits donations to hundreds. For us it is important + to give something back to help this project to succeed. If you want to help, + please do so and encourage others to do so, too. +

+
-
+

Frequently Asked Questions

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

-
-
+