From 1c6d39cd2ab2aa9a2ba6cb9867ab88d99a48ea71 Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Tue, 29 Oct 2019 12:52:47 -0700
Subject: [PATCH] Theme: Add basic styles for My Pledges page.

There's more work to do here, but this gets us close enough to start beta testing.

See #56
---
 .../css/components/_components.scss           |  1 +
 .../css/components/_my_pledges.scss           | 67 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 themes/wporg-5ftf/css/components/_my_pledges.scss

diff --git a/themes/wporg-5ftf/css/components/_components.scss b/themes/wporg-5ftf/css/components/_components.scss
index fa04d67..13cde17 100644
--- a/themes/wporg-5ftf/css/components/_components.scss
+++ b/themes/wporg-5ftf/css/components/_components.scss
@@ -22,6 +22,7 @@
 @import "about";
 @import "archive";
 @import "entry-content";
+@import "my_pledges";
 @import "page";
 @import "pagination";
 @import "pledge-contributors";
diff --git a/themes/wporg-5ftf/css/components/_my_pledges.scss b/themes/wporg-5ftf/css/components/_my_pledges.scss
new file mode 100644
index 0000000..745cc24
--- /dev/null
+++ b/themes/wporg-5ftf/css/components/_my_pledges.scss
@@ -0,0 +1,67 @@
+body.page-my-pledges .entry-content {
+	// move avatar and "pledge x hours" into place, align, etc
+
+	.avatar {
+		display: none;
+
+		@include breakpoint($breakpoint-tablet) {
+			display: block;
+			// round corners
+		}
+	}
+}
+
+.fftf_pledge {
+	text-align: center;
+	margin-bottom: 25px;
+
+	.pledge-logo-container {
+		display: block;
+		background-color: #FAFAFA; // todo make var
+		max-width: 80%;
+		margin: 0 auto;
+
+		.attachment-pledge-logo {
+			max-height: 100px;
+			width: auto;
+			// todo needs tweaking
+		}
+	}
+
+	.pledge-title a {
+		text-decoration: underline;
+		// font size etc
+	}
+
+	.pledge-actions {
+		input {
+			display: block;
+			margin: 1em auto;
+
+			&[name="decline_invitation"],
+			&[name="leave_organization"] {
+				color: #bf2b2b; // todo var
+			}
+		}
+	}
+
+
+	@include breakpoint($breakpoint-tablet) {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-areas: "logo name actions";
+		text-align: left;
+
+		.pledge-logo-container {
+			grid-area: logo;
+		}
+
+		.pledge-title {
+			grid-area: name;
+		}
+
+		.pledge-actions {
+			grid-area: actions;
+		}
+	}
+}