Merge pull request #98 from YummyOreo/april-17th

feat: add stuff for taylor swift day and add a place for the petition

.gitattributes

@@ -1,2 +1,2 @@
 # Declare files that will always have LF line endings on checkout.
-* text eol=lf
+*.{html,md,css,js,json} text eol=lf

about.html

@@ -81,6 +81,7 @@ <h2 id="getinvolved">Get Involved</h2>
 				&copy; The TBFighters Project | <a href="privacy.html" class="footer-link">Privacy Policy</a>
 			</p>
 			<p class="too-small">
+
 				We lead by following and we act with compassion. Get in touch: contact at tbfighters dot org
 			</p>
 		</footer>

action-page.css

@@ -0,0 +1,25 @@
+#petition-wrapper {
+	background-image: url('./img/petition header 1.png');
+	background-position: center;
+	background-size: cover;
+	color: #F5F5F5;
+	text-shadow: #121212 1px 1px 10px;
+}
+
+#petition-wrapper div div {
+	margin-left: 40%;
+	max-width: 40%;
+}
+
+
+@media only screen and (max-width: 992px) {
+	#petition-wrapper {
+		background: #3c3f60;
+	}
+
+	#petition-wrapper div div {
+		margin: 0 1em;
+		width: auto;
+		max-width: none;
+	}
+}

action.html

@@ -28,6 +28,7 @@
 		/>
 		<script src="actions.js"></script>
 		<script src="action-page.js" defer></script>
+		<link rel="stylesheet" href="action-page.css">
 		<title>Take Action | TBFighters</title>
 	</head>
 
@@ -57,21 +58,29 @@ <h1 class="break-anywhere">Take <span class="red">Action</span></h1>
 					<p>
 						Join the fight for accessible and affordable testing! We'll keep this page updated with current actions, theme days and other campaigns, contact information, templates, graphics, and more!
 					</p>
-					<p>
-						You can also stay up-to-date by <a href="#list">signing up for our mailing list</a>. Emails may be authored by TBFighters, John Green, and partner organizations, such as MSF Access and PIH.
-					</p>
-					<p class="smaller">
-						<em>Threats and intimidation are <strong>never okay</strong>. Be polite and respectful in all interactions&mdash;we're all human here! Please read the <a href="activism-guide.html">activism guide</a> as well!</em>
-					</p>
-					<h2 id="contact">Contact <span class="red">Danaher and Cepheid</span></h2>
-					<p>
-						Come up with your own messages, or use our templates, guides, and graphics to tell Danaher and Cepheid it's #TimeFor5!
-					</p>
-					<p class="featured">
-						<strong>FEATURED ACTION:</strong> <a href="https://timefor5.msfaccess.org/" target="_blank">Sign the petition</a> asking Danaher to lower the cost of ALL their crucial tests to $5!
-
+					<p class="featured" style="margin-top: 1.4em;">
+						<strong>FEATURED ACTION:</strong> It's time to ask Danaher a <em>Question</em>... <em>Long Story Short</em> we need them to <em>Change</em> the price of their GeneXpert tests, so we wrote them an album to tell them how we feel. We want an end to the <em>Great War</em> so we can all have some <em>Closure</em>. Find memes and graphics in the <a href="https://tbfighter.link/theme" target="_blank">TBFighters Graphics Library</a> and check out the community-made <a href="https://tbfighter.link/songs">Taylor Swift parodies here</a>!<br><span class="buttons" style="width: 100%;"><a class="button" href="https://tbfighter.link/songs" style="margin: 0.5em 0;">Songs</a> <a href="https://tbfighter.link/theme" class="button button-subtle" style="margin: 0.5em 0;">Graphics Library</a></span>
 					</p>
 				</div>
+				<div id="petition-wrapper" style="margin: 2em 0;">
+					<div class="wrapper-full">
+						<div style="height: 5px;"></div>
+						<hr>
+						<div class="action">
+							<h3 class="wrap-centered" id="petition">
+								Sign the <strong class="highlight">Petition</strong>
+							</h3>
+							<p>
+								We call on <span class="highlight">Danaher</span> to drop the price of their GeneXpert medical tests supplied to low- and middle-income countries to <span class="highlight">US$5</span> each for all diseases so that millions more people around the world can be properly diagnosed and receive the treatment they need to stay alive and healthy.
+							</p>
+							<p class="smaller">
+								<a class="button" href="https://timefor5.msfaccess.org" target="_blank" style="box-shadow: var(--aside-shadow);">Sign the petition</a>
+							</p>
+						</div>
+						<hr>
+						<div style="height: 5px;"></div>
+					</div>
+				</div>
 				<div class="wrapper-full wrapper-action-grid">
 					<div class="action">
 						<p class="larger">

index.html

@@ -61,13 +61,14 @@ <h1>
 				</div>
 				<div class="wrapper wrapper-columns featured-columns">
 					<p>
-						<strong>FEATURED ACTION:</strong> <a href="https://timefor5.msfaccess.org/" target="_blank">Sign the petition</a> asking Danaher to lower the cost of ALL their crucial tests to $5!
+						<strong>FEATURED ACTION:</strong> It's time to ask Danaher a <em>Question</em>... <em>Long Story Short</em> we need them to <em>Change</em> the price of their GeneXpert tests, so we wrote them an album to tell them how we feel. We want an end to the <em>Great War</em> so we can all have some <em>Closure</em>. Find memes and graphics in the <a href="https://tbfighter.link/theme" target="_blank">TBFighters Graphics Library</a> and check out the community-made <a href="https://tbfighter.link/songs">Taylor Swift parodies here</a>!<br><span class="buttons" style="width: 100%;"><a class="button" href="https://tbfighter.link/songs" style="margin: 0.5em 0;">Songs</a> <a href="https://tbfighter.link/theme" class="button button-subtle" style="margin: 0.5em 0;">Graphics Library</a></span>
 
 					</p>
-					<div class="buttons">
-						<a class="button" href="action.html">More actions</a>
-						<a class="button button-subtle" href="action.html#list">Newsletter signup</a>
-					</div>
+					<!-- TODO: uncomment this when you change the featured action  -->
+					<!-- <div class="buttons"> -->
+					<!-- 	<a class="button" href="action.html">More actions</a> -->
+					<!-- 	<a class="button button-subtle" href="action.html#list">Newsletter signup</a> -->
+					<!-- </div> -->
 				</div>
 				<div class="wrapper wrap-centered">
 					<a href="#primer"><img src="img/arrow-down.svg" class="scroll-arrow" alt="down-arrow"></a>
@@ -143,8 +144,7 @@ <h2 class="action-head">Take <span class="red">Action</span>:</h2>
 							</div>
 							<div class="join-right">
 								<p class="featured">
-									<strong>FEATURED ACTION:</strong> <a href="https://timefor5.msfaccess.org/" target="_blank">Sign the petition</a> asking Danaher to lower the cost of ALL their crucial tests to $5!
-
+									<strong>FEATURED ACTION:</strong> It's time to ask Danaher a <em>Question</em>... <em>Long Story Short</em> we need them to <em>Change</em> the price of their GeneXpert tests, so we wrote them an album to tell them how we feel. We want an end to the <em>Great War</em> so we can all have some <em>Closure</em>. Find memes and graphics in the <a href="https://tbfighter.link/theme" target="_blank">TBFighters Graphics Library</a> and check out the community-made <a href="https://tbfighter.link/songs">Taylor Swift parodies here</a>!<br><span class="buttons" style="width: 100%;"><a class="button" href="https://tbfighter.link/songs" style="margin: 0.5em 0;">Songs</a> <a href="https://tbfighter.link/theme" class="button button-subtle" style="margin: 0.5em 0;">Graphics Library</a></span>
 								</p>
 								<a class="button button-centered" href="action.html">More actions and templates</a>
 							</div>

style.css

@@ -182,6 +182,7 @@ a[target="_blank"]:not(:has(img))::after {
 	width: 10px;
 	margin: 0 3px;
 }
+
 a:has(img) {
 	display: inline-block;
 }
@@ -274,8 +275,9 @@ p.featured {
 	display: block;
 	background-color: #DDDDDD;
 	text-align: center;
-	padding: 10px 15px;
+	padding: 20px 25px;
 	margin: 0 1em .6em;
+	font-size: 1.2em;
 	box-shadow: var(--aside-shadow);
 }
 
@@ -288,9 +290,17 @@ p.featured {
 .featured-columns .button, .featured-columns .button-subtle {
 	margin: .125em .5em;
 	width: 200px;
+	min-width: fit-content;
 	padding: .5em .8em;
 }
 
+.highlight {
+	background-image: url("img/highlight.svg");
+	padding: 0 0.15em;
+	margin: 0 -0.15em;
+	color: #F5F5F5;
+}
+
 /* ===============
    PAGE HEADER
    =============== */
@@ -847,6 +857,7 @@ h2.action-head {
 		flex-direction: row;
 		flex-wrap: nowrap;
 		justify-content: flex-start;
+		gap: 0.5em;
 	}
 
 	.buttons .button {

timeline.html

@@ -185,6 +185,7 @@ <h2>July 11 2023</h2>
 				&copy; The TBFighters Project | <a href="privacy.html" class="footer-link">Privacy Policy</a>
 			</p>
 			<p class="too-small">
+
 				We lead by following and we act with compassion. Get in touch: contact at tbfighters dot org
 			</p>
 		</footer>

update-action/featured-action.html

@@ -1 +1 @@
-<a href="https://timefor5.msfaccess.org/" target="_blank">Sign the petition</a> asking Danaher to lower the cost of ALL their crucial tests to $5!
+It's time to ask Danaher a <em>Question</em>... <em>Long Story Short</em> we need them to <em>Change</em> the price of their GeneXpert tests, so we wrote them an album to tell them how we feel. We want an end to the <em>Great War</em> so we can all have some <em>Closure</em>. Find memes and graphics in the <a href="https://tbfighter.link/theme" target="_blank">TBFighters Graphics Library</a> and check out the community-made <a href="https://tbfighter.link/songs">Taylor Swift parodies here</a>!<br><span class="buttons" style="width: 100%;"><a class="button" href="https://tbfighter.link/songs" style="margin: 0.5em 0;">Songs</a> <a href="https://tbfighter.link/theme" class="button button-subtle" style="margin: 0.5em 0;">Graphics Library</a></span>