Donation page responsivness

[people/shoehn/ipfire.org.git] / static / css / style.css

diff --git a/static/css/style.css b/static/css/style.css
index 3be2ffc9ecf520d535cd697d0b734e353382c3b0..4c3db9bef6036faa46afd797bccd0b9432a17623 100644 (file)
--- 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; }