X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=blobdiff_plain;f=static%2Fscss%2F_donation.scss;h=322b00cd6ef5169f8dbcda9d38145463544c19fd;hp=09a733b434db7c94645dac87b125995455037b22;hb=ea23fbb731c2c3d33d5367c3416a546eafe431d7;hpb=1e5f513f74b57dd91fd5b16b97c338bbf32cc81b

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