Eaglefeather1/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>The Homestuck Green Pages</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link rel="icon" href="images/logo.png">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CJMPMVVC28"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-CJMPMVVC28');
</script>

<body>
	<h1 style="margin: 30px 15vw;" class="typoStuckFont">The Homestuck Green Pages</h1>
	<div class="wipNotice textCenter">
		<i class="material-symbols-outlined" style="font-size: 500%;">warning</i>
		<h2 style="margin-top: 5px; font-size:2em;">This website is still being worked on. Please be patient with us, and check back often to see when we update!</h2>
	</div>
	<section class="faq">
		<h2 class="textCenter typoStuckFont">FaQ</h2>
		<div class="faqCard">
			<h4>What is this?</h4>
			<p>The Homestuck Green Pages (THSGP) is a website dedicated to archiving and displaying both deprecated and still-running regional Homestuck groups. This ranges from city-wide cosplay groups, to state-wide networks of Homestucks, to groups hosting Homestuck gatherings for entire countries and with anywhere from 20 to 1500 members. Most of these groups were active in the older days of the Homestuck fandom circa 2011-2016. Some, however, have been active for over a decade, and others still have come around only in the past few years. Regardless of size, location, or longevity, THSGP is determined to archive them all.</p>
		</div>
		<div class="faqCard">
			<h4>What if they don't want to be archived?</h4>
			<p>Then they won’t be. For both safety and privacy reasons, all active groups have been asked for permission before being displayed on this site and the leader of any group at any time, past or present, is welcome to request their group be taken off the site.</p>
		</div>
		<div class="faqCard">
			<h4>I’m in one of these pictures and I don’t like it.</h4>
			<p>That's not a question.</p>
		</div>
		<div class="faqCard">
			<h4>I’m in one of these pictures and I don’t like it?</h4>
			<p>Let us know using the provided contact information and we’ll either blur your face, find a replacement picture, or remove the picture altogether.</p>
		</div>
		<div class="faqCard">
			<h4>I know of/run a group that isn’t on this list, how do I add it?</h4>
			<p>Please let us know using the provided contact information at the bottom of the page! We’d be happy to display your site on THSGP. However, we do have a couple of requirements for you to meet in order for us to feature your group:
			<ul>
				<li>Your group must have existed for at least a month.</li>
				<li>Your group must have at least 15 members.</li>
				<li>Your group must encompass a specific and reasonabily sized region in the world.</li>
			</ul>
			</p>
		</div>
		<div class="faqCard">
			<h4>What counts as reasonably sized?</h4>
			<p>For example, a group encompassing the entirety of the continental US probably wouldn’t be of a reasonable size so as to function as a regional Homestuck group. Conversely, a group encompassing only your neighborhood probably wouldn’t be large enough to garner the members required (but if you’re able to do so anyways, feel free to reach out!)</p>
		</div>
		<div class="faqCard">
			<h4>How do I start a regional Homestuck group?</h4>
			<p>I’m glad you’re interested! As I, BattleblockB0ss (the creator of THSGP), currently run one of the largest still-active regional Homestuck groups (that I know of), I have some tips to offer:
			<ul>
				<li>Choose a reasonable area. The group I run, Calibornia Homestucks, started as Bay Area Homestucks. However, we (Calibornia Staff) quickly realized there are a hell of a lot of Homestucks in California, so after a month or two we expanded to the entirety of our state. While that made sense for our situation, the same might not be true for you, so consider what size you reasonably can/want to manage.</li>
				<li>Organize! Put together a couple of official spaces with clear rules and discussion spaces. Using Calibornia as an example again, the day I created our Discord server I made a set of rules for members to follow, and soon after created a channel list in our Discord. A few months later I put together a team of local fans to manage the Discord, a team to manage in-person events, and a team to manage our social media. This helped us stimulate interactions, keep an eye on bad actors and keep our IRL spaces safe for everyone.</li>
				<li>Go to conventions and local events. Our biggest pull as a group has been local conventions (such as FanimeCon, SacAnime, and Anime Los Angeles). Take charge and organize gatherings and/or panels, and consider printing out some business cards! You can get 500 of decent quality for $20 from Staples (if you’re in the US).</li>
				<li>Finally, and most importantly: put safety above anything else! IRL meetups hosted by regional Homestuck groups usually entail a lot of people of a variety of ages meeting for the first time. My strongest advice in this regard is to never condone a gathering with 3 or less people in attendance, especially if the attendees have a sizable age difference, and provide a clear avenue to report misconduct.</li>
			</ul>
			I think the best advice I can give you is not to force it! Putting effort into forming a group is one thing, but trying to force dynamics that just aren’t natural is another. Make sure everyone is having fun.
			</p>
		</div>
		<div class="faqCard">
			<h4>This project is dumb and you are dumb.</h4>
			<p>That’s not a question. Also, I don’t care. You’re welcome to voice your own opinion about this project and we're always open to constructive criticism and suggestions, but if you plan on doing nothing but talk shit about us, do it somewhere else.</p>
		</div>
		<div class="faqCard">
			<h4>This project is cool and you are cool! How can I help?</h4>
			<p>Thanks! If you’re interested in helping out, we’re always looking for more people to search the internet for new data. People with experience working with HTML, CSS, and/or Javascript are always appreciated, but the only skill you really need to contribute is knowing how to use Google.</p>
		</div>
		<div class="faqCard">
			<h4>Can I provide a donation for the hosting service/[other reason]?</h4>
			<p>Not right now, no. If there’s interest I’ll consider putting up a Patreon or Ko-fi, but the maintenance of this website is completely free thanks to Github Pages!</p>
		</div>
		<div class="faqCard">
			<h4>Can I make a similar project?</h4>
			<p>Of course! THSGP is open source, so feel free to use/adapt the project to your own needs, provided you supply the appropriate credit. Everything I’ve created for this project is licensed under CC BY-SA 3.0.</p>
		</div>
		<div class="faqCard">
			<h4>Why does this have such a stupid name?</h4>
			<p>Well, the inspiration was the yellow pages from the phone book but green, because Homestuck. However, The Genesis Project shares the same initials as The Green Pages, so I added a “Homestuck” in the middle and now it just sounds kind of shitty. If you have a better idea feel free to suggest it!</p>
		</div>
		<div class="faqCard">
			<h4>I have a suggestion! How do I suggest it?</h4>
			<p>Reach out to us via one of the platforms listed at the bottom of the page!</p>
		</div>
		<div class="faqCard">
			<h4>There's an error/typo/bug! How do I fix it?</h4>
			<p>Either report it to us via one of the avenues listed at the bottom of the page or, if you have web dev experience, try fixing it yourself by forking our Github.</p>
		</div>
		<div class="faqCard">
			<h4>I have another question that’s not answered here?</h4>
			<p>Feel free to reach out via the contact information listed at the bottom of the page and ask me!</p>
		</div>
		<div class="faqCard">
			<h4>Is the FaQ over yet? Can I see the groups now?</h4>
			<p>Fine.</p>
		</div>
	</section>
	<div class="warning">
		<h2 style="margin: -35px 0px;" class="textCenter">DISCLAIMER</h2>
		<h4 style="color:lightgrey; margin: -10px 0px;" class="textCenter"><i>TW: Pedophilia, sexual assault</i></h6>
		<p >While we, The Homestuck Green Pages, have collected these groups and I, BattleblockB0ss, have reviewed each group, please keep in mind that <b>we cannot guarantee their safety.</b> We have not performed in-depth investigations of any link or organization listed on this page. Many - if not all - active groups host IRL meetups, so please be careful and keep your safety in mind above all else. To share a personal anecdote relating to Homestuck group safety: during the peak days of Homestuck there was a thriving Homestuck culture in my city. One person led most of the efforts and meetups that occured, and was regarded as a bit of a "con mom" by many. Unfortunately it eventually came out that she was a pedophile and had sexually assaulted multiple underage cosplayers on multiple occasions. Her betrayal of the community's trust killed off Homestuck activity for years, and more importantly, hurt people irreparably. The moral of the story? Be careful, and nobody is above suspicion. That said, enjoy the project.</p>
	</div>
	<div id="myData">
</div>
	<section class="contact">
		<h2 class="textCenter typoStuckFont">Contact</h2>
			<div class="emailForm">
				<p>Find me on Discord as <b>BattleblockB0ss#7148</b> or send me an email down below!</p>
				<form action="mailto:princeali123012@gmail.com" method="get" enctype="text/plain">
		    Subject:<br>
		    <input type="text" name="subject" placeholder="im falling down all these stairs"><br>
		    Email:<br>
		    <input type="email" name="email" placeholder="itkeepshappening@hussnasty.net"><br>
		    Message:<br>
		    <textarea name="body" rows="5" cols="30" placeholder="i told you bro"></textarea><br>
		    <input type="submit" value="Send">
		  </form>
			</div>
	</section>
	<script src="script.js"></script>
</body>

</html>

## script.js
function appendDiv(classes, container, divId) {
	let div = document.createElement("div");
	div.setAttribute("class", classes);
	if (divId != undefined) {
		div.setAttribute("id", divId);
	}
	container.appendChild(div);
	return div;
}

function appendImg(container, img) {
	if (img != undefined) {
		let newImg = new Image();
		newImg.src = `images/${img}`;
		newImg.setAttribute("class", "groupImg");
		container.appendChild(newImg);
	}
}

function appendText(textVal, container, textTag, classes) {
	let text = document.createElement(textTag);
	if (classes != undefined) {
		text.setAttribute("class", classes);
	}
	text.innerHTML = textVal;
	container.appendChild(text);
}

function createRegionSection(regionName, regionData) {
	const section = document.createElement("section");
	section.setAttribute("class", "region");

	//create Title
	const headerDiv = appendDiv("headerDiv", section);
	const regionHeader = appendText(regionName, headerDiv, "h2", "header");

	//create Cards
	const groupsDiv = appendDiv("groupsDiv", section);
	regionData.forEach((group) => {
		groupsDiv.appendChild(createGroupCard(group));
	});

	return section;
}

function createGroupCard(group){
	const {groupName, period, location, size, desc, img, links, status} = group;

	const groupCard = document.createElement("div");
	groupCard.setAttribute('class', 'groupCard');

	appendImg(groupCard, img);
	appendText(groupName, groupCard, "h3", "textCenter");
	appendText(`<i>${period}</i>`, groupCard, "p", "textCenter lessHeight");
	appendText(`<b>Region: </b>${location}<br><b>Member Count: </b>${size}<br><br>${desc}`, groupCard, "p");
	let linksLoc = links;
	appendDiv("links", groupCard, "links");
	for (var e = 0; e < linksLoc.length; e++) {
			if (linksLoc[e].includes("instagram")) {
				var linkText = "Instagram";
			} else if (linksLoc[e].includes("discord")) {
				var linkText = "Discord";
			} else if (linksLoc[e].includes("tumblr")) {
				var linkText = "Tumblr";
			} else if (linksLoc[e].includes("tiktok")) {
				var linkText = "TikTok";
			} else if (linksLoc[e].includes("youtube")) {
				var linkText = "YouTube";
			} else if (linksLoc[e].includes("linktr.ee")) {
				var linkText = "Linktree";
			} else if (linksLoc[e].includes("facebook")) {
				var linkText = "Facebook";
			}	else if (linksLoc[e].includes("twitter")) {
				var linkText = "Twitter";
			} else if (linksLoc[e].includes("deviantart")) {
				var linkText = "DeviantArt";
			} else {
				var linkText = "Unknown";
			}
			appendText(`<a href=${linksLoc[e]} target="_blank">${linkText}</a> `, groupCard.lastChild, "span", linkText);
			}
	appendDiv(`${status} activityDiv`, groupCard)
	appendText(`<b>${status.toUpperCase()}</b>`, groupCard.lastChild, "p");

	return groupCard;
}

fetch('worldstuck.json')
	.then(function(response) {
		return response.json();
	})
	.then(function(data) {
		const mainContainer = document.getElementById("myData");
		for (const [regionName, regionData] of Object.entries(data)) {
			regionData.sort((a,b) => a.groupName.localeCompare(b.groupName))
			const section = createRegionSection(regionName, regionData)
			mainContainer.appendChild(section);
		}
		})
	.catch(function(err) {
		console.log('error: ' + err);
	});

## style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Zanabazar+Square&display=swap');
@font-face {
  font-family: typoStuck;
  src: url(fonts/TYPOSTUCK.ttf);
}

html {
  height: 100%;
  width: 100%;
}
body {
	background-color: #404258;
	color: white;
	font-family: Open Sans, Helvetica, sans-serif;
}
h1 {
	font-size: 10vw;
	text-align: center;
}
h2 {
	font-family: Noto Sans Zanabazar Square;
	font-size: 5vw;
}
h3 {
	font-size: 200%;
}
h4 {
	font-size: 150%;
}
img {
	display: block;
  margin-left: auto;
  margin-right: auto;
}
span {
	border: 2px solid white;
	border-radius: 25px;
	padding: 3px;
	padding-left: 6px;
	margin: 3px;
	line-height: 35px;
	background: black;
}
a {
	color: white;
}
a:link,visited,hover,active {
  text-decoration: none;
}

.textCenter {
	text-align: center;
}
.lessHeight {
	margin-top: -20px;
}
.typoStuckFont {
	font-family: typoStuck;
  text-shadow: 0.5vw 0.5vw 0px black
}

/* NOTICES */
.wipNotice {
	border: solid 3px black;
	border-radius: 5px;
	background-color: #f7e463;
	margin: 30px;
	padding: 0px 15px;
	color: black;
}
.wipNotice * {
	line-height: 100%;
}
.warning {
	border: solid 3px darkred;
	border-radius: 5px;
	background-color: #eb6060;
	margin: 30px;
	padding: 0px 15px;
}
/* END NOTICES */

/* GROUPS */
.region h2 {
	font-size: 250%;
	margin-bottom: 10px;
}
.groupImg {
	width: 95%;
	margin-top: 15px;
	margin-bottom: -10px;
}
.links {
	margin-bottom: 10px;
}
.region {
	border-radius: 10px;
	margin: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #474E68;
}
.groupsDiv {
	-webkit-column-width: 10em;
	-webkit-column-gap: 1em;
	-webkit-column-count: 6;
	-moz-column-width: 20em;
	-moz-column-gap: 2em;
	-moz-column-count: 6;
	-ms-column-width: 20em;
	-ms-column-gap: 2em;
	-ms-column-count: 6;
	column-width: 20em;
	column-gap: 2em;
	column-count: 6;
	padding-bottom: 15px;
}
.groupCard {
	border: 2px solid black;
	border-radius: 25px;
	padding: 10px;
	background-color: #50577A;


	/* COLUMNS */
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	width: 100%;
	box-sizing:border-box;
}
.groupCard:not(:first-of-type) {
  margin: 20px 0;
}
/* END GROUPS */

/* FAQ */
.faq {
	margin-left: 15px;
	margin-right: 15px;
	padding: 10px;
	border-radius: 10px;
	background-color: #50577A;
}
.faq h2 {
	font-size: 500%;
	margin: 20px;
}
.faqCard {
	background-color: #474E68;
	border-radius: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}
div.faqCard p {
	margin-left: 15px;
	margin-right: 15px;
}
div.faqCard h4 {
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: -10px;
}
/* END FAQ */

/* ACTIVITY BANNER */
.activityDiv {
	font-size: 30px;
	padding: 10px 5px;
	margin: 10px -10px -10px -10px;
	border-radius: 0% 0% 23px 23px;
	text-align: center;
}
.activityDiv * {
	margin-top: auto;
	margin-bottom: auto;
}
.Active {
	background-color: #7cd992;
}
.Inactive {
	background-color: #f7e463;
}
.Dead {
	background-color: #eb6060;
}
.Unknown {
	background-color: #a8a8a8;
}
/* END ACTIVITY BANNER */

/* CONTACT */

.contact h2 {
	font-size: 500%;
	margin: 20px;
}

/* EMAIL FORM */
.emailForm {
	border-radius: 5px;
  background-color: #50577A;
  padding: 20px;
	margin: 20px 10%;
}
input[type=text], [type=email], textarea, select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #7cd992;
}
/* END EMAIL FORM */

/* END CONTACT */

/* LINK COLORS */
.Instagram {
	background-image: linear-gradient(to bottom right, 	#feda75, 	#fa7e1e, #d62976, #962fbf, 	#4f5bd5);
	border-color: #000000;
}
.Discord {
	background-color:	#5662F6;
	border-color: #23272a;
}
.Tumblr {
	background-color: #001935;
	border-color: #00B8FF;
}
.TikTok {
	background-image: linear-gradient(to bottom right, #00f2ea, #ff0050);
	border-color: black;
}
.YouTube {
	background-color: #FF0000;
	border-color: #282828;
}
.Linktree {
	background-color: #4d6d17;
	border-color: black;
}
.Facebook {
	background-color: #4292FF;
	border-color: #18191A;
}
.Twitter {
	background-color: #1D9BF0;
}
.DeviantArt {
	background-color: #00E59B;
	border-color: #06070D;
}
/* END LINK COLORS */

## worldstuck.json
{
  "Alabama": [
    {
      "groupName": "Alabamastuck",
      "location": "Alabama",
      "size": "304",
      "period": "2011-2018",
      "links": [
        "https://alabamastuck.tumblr.com/",
        "https://www.facebook.com/groups/alabamastuck/",
        "https://twitter.com/Alabamastuck"
      ],
      "status": "Dead",
      "desc": "A group for Homestucks in Alabama and the surrounding area. Gained a significant following in the earlier days of the fandom and stayed active until 2018. Unlike most Homestuck groups at the time Alabamastuck included a Twitter along with their Tumblr and Facebook pages.",
      "img": "Alabamastuck.jpg"
    }
  ],
  "California": [
    {
      "groupName": "Calibornia Homestucks",
      "location": "California",
      "size": "215",
      "period": "2022-Present",
      "links": [
        "https://www.instagram.com/caliborniahomestucks",
        "https://www.discord.gg/calibornia",
        "https://wwwtumblr.com/caliborniastuck",
        "https://www.tiktok.com/@calibornia.stuck",
        "https://youtube.com/channel/UC77y1UjGT_TKFNG6XkMAfcQ"
      ],
      "status": "Active",
      "desc": "Calibornia Homestucks is a California-wide Homestuck group founded at FanimeCon 2022. They are very active in online spaces, particularly their Discord, and host gatherings and/or panels at most major California conventions. They have a 15+ age limit.",
      "img": "CaliborniaHomestucks.jpg"
    },
    {
      "groupName": "SoCal Homestuck 18 and Over Group",
      "location": "Southern California",
      "size": "32",
      "period": "2014-2017",
      "links": [
        "https://www.facebook.com/groups/666498250112498/"
      ],
      "status": "Dead",
      "desc": "A Facebook group for adult Homestuck cosplayers located in Southern California. Had a very short and inactive lifespan."
    },
    {
      "groupName": "SoCalStuck",
      "location": "Southern California",
      "size": "Unknown",
      "period": "2012-2013",
      "links": [
        "https://socalstuck.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "A Tumblr page dedicated to tracking Homestuck meetups and groups in Southern California. While mostly dedicated to reporting on the activity of other, seperate SoCal groups, it did host multiple meetups of its own.",
      "img": "SoCalStuck.jpg"
    },
    {
      "groupName": "SanDiegoStuck",
      "location": "San Diego",
      "size": "81",
      "period": "2012-2018",
      "links": [
        "https://sandiegostuck.tumblr.com/",
        "https://www.facebook.com/groups/282144831811932/"
      ],
      "status": "Dead",
      "desc": "A San Diego Homestuck group that at one point hosted bi-monthly meetups. The group seems to have amassed a pretty significant following at one point and had initially formed from a meetup at a local convention. It seems as though the group eventually morphed into a general San Diego cosplay group judging by the Facebook page.",
      "img": "SanDiegoStuck.jpg"
    },
    {
      "groupName": "Orange County Homestuck Team",
      "location": "Orange County",
      "size": "170",
      "period": "2011-Unknown",
      "links": [
        "https://www.facebook.com/groups/208196309218508/"
      ],
      "status": "Dead",
      "desc": "All information on the page is wiped with only the note \"This group is now inactive. Sorry about that!\". No more information can be found."
    },
    {
      "groupName": "SoCal Homestuck Cosplay Group",
      "location": "Southern California",
      "size": "236",
      "period": "2012-Unknown",
      "links": [
        "https://www.facebook.com/groups/243886025731762/"
      ],
      "status": "Unknown",
      "desc": "The Facebook page is locked to members only. Judging by the member count, they amassed a significant following in their peak. The group is most likely dead."
    },
    {
      "groupName": "Southern? California Homestuck Meetup",
      "location": "California",
      "size": "134",
      "period": "2012-Unknown",
      "links": [
        "https://www.facebook.com/groups/383399895048609/"
      ],
      "status": "Unknown",
      "desc": "The Facebook page is locked to members only. It can be inferred from the title and member count that this was once a thriving Homestuck group spanning Southern California and at least part of Northern California. Latest activity is unknown, but can be safely assumed to be dead."
    },
    {
      "groupName": "Southern California Homestucks",
      "location": "Southern California",
      "size": "165",
      "period": "2013-2018",
      "links": [
        "https://www.facebook.com/groups/515355595200162/"
      ],
      "status": "Dead",
      "desc": "A Homestuck group based in Southern California that seems to have been active for a longer period of time than most. Some members do appear to be active on Facebook still, although there hasn't been any significant activity in the group since 2018.",
      "img": "SouthernCaliforniaHomestucks.jpg"
    },
    {
      "groupName": "South Bay Area Homestuck",
      "location": "South Bay Area",
      "size": "31",
      "period": "2012-2013",
      "links": [
        "https://southbaystuck.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "A blog for San Fransisco Bay Area Homestuck fans, specifically the South Bay. An offshoot of Bayareastuck",
      "img": "SouthBayAreaHomestuck.jpg"
    },
    {
      "groupName": "Bayareastuck",
      "location": "Bay Area",
      "size": "Unknown",
      "period": "2012-2014",
      "links": [
        "https://bayareastucks-blog.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "A general Tumblr page that spread information on San Fransisco Bay Area Homestuck meetups."
    },
    {
      "groupName": "Calistuck",
      "location": "California",
      "size": "106",
      "period": "2011-2013",
      "links": [
        "https://calistuck-blog.tumblr.com/",
        "https://www.facebook.com/people/Castuck-California-Homestuck/100068200025919/",
        "https://www.facebook.com/groups/271624109539975/"
      ],
      "status": "Dead",
      "desc": "A Homestuck group for California in general. Spread information about the more specifc group events.",
      "img": "Calistuck.jpg"
    },
    {
      "groupName": "Fresnostuck",
      "location": "Fresno",
      "size": "93",
      "period": "2011-Unknown",
      "links": [
        "https://www.facebook.com/groups/199977513430646"
      ],
      "status": "Unknown",
      "desc": "A group for the Fresno Area in California. The Facebook page is locked to members only and includes \"Inactive?\" at the top of the description, so the group can safely be assumed to have died off a while ago."
    }
  ],
  "Canada": [
    {
      "groupName": "London Homestuck meetups",
      "location": "London, Ontario",
      "size": "29",
      "period": "2014-2018",
      "links": [
        "https://www.facebook.com/LondonHomestuckMeetups"
      ],
      "status": "Dead",
      "desc": "A meetup group for the lesser-known London, Ontario. Seems like it was a relatively close-knit group during its peak and slowly declined in popularity over the years.",
      "img": "LondonHomestuckmeetups.jpg"
    }
  ],
  "Florida": [
    {
      "groupName": "Fort Meyers Homestuck Group",
      "location": "Fort Myers, FL",
      "size": "11",
      "period": "2013",
      "links": [
        "https://fortmyerstuck-blog.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "A Tumblr page for a cosplay group centered in Fort Meyers, FL: South-West Florida, Lee County. Appears to have only been active during 2013, but could have possibly been active elsewhere on the internet."
    }
  ],
  "Idaho": [
    {
      "groupName": "Idahostuck",
      "location": "Idaho",
      "size": "168",
      "period": "2011-Present",
      "links": [
        "https://idahostuck.tumblr.com/",
        "https://www.facebook.com/groups/160547577372707/",
        "https://www.deviantart.com/idahostuck"
      ],
      "status": "Inactive",
      "desc": "A group dedicated to Homestucks in Idaho. Not much activity nowadays, but infrequent spurts of posting occur around conventions."
    }
  ],
  "Ireland": [
    {
      "groupName ": "Homestuck Ireland",
      "location": "Ireland",
      "size": "214",
      "period": "2012-2014",
      "links": [
        "https://homestuckireland.tumblr.com/",
        "https://www.facebook.com/HomestuckIreland/photos",
        "https://www.flickr.com/photos/moysphotos/"
      ],
      "status": "Dead",
      "desc": "A Homestuck group for fans to meet up in cosplay and discuss all things Homestuck in Ireland. No activity since 2014."
    }
  ],
  "Missouri": [
    {
      "groupName": "Can Town St. Louis",
      "location": "St. Louis",
      "size": "307",
      "period": "2012-2022",
      "links": [
        "https://cantownstlouis.tumblr.com/",
        "https://www.facebook.com/CanTownStLouis",
        "http://www.cantownstlouis.com/"
      ],
      "status": "Inactive",
      "desc": "Can Town Project for the Greater St. Louis area. The group hosted several meetups centered around the Can Town Project and collecting canned food for charity. Collected some really astounding numbers for a great cause."
    }
  ],
  "Nevada": [
    {
      "groupName": "Vegastuck",
      "location": "Las Vegas",
      "size": "Unknown",
      "period": "2012-2019",
      "links": [
        "https://vegastuck.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "A group for Homestucks in Las Vegas, was purportedly on good terms with surrouncing Homestuck groups including Nevadastuck and \"Vegatalia\". Held annual meetups for a while, but has had no activity since 2019.",
      "img": "Vegastuck.jpg"
    },
    {
      "groupName": "Nevadastuck",
      "location": "Nevada",
      "size": "73",
      "period": "2015-2016",
      "links": [
        "https://www.facebook.com/nevadastuck/",
        "https://nevadastuckblog.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "This Nevada-based group held both gatherings outside cons and panels at cons, but was only active for a short period of time.",
      "img": "Nevadastuck.jpg"
    }
  ],
  "Pennsylvania": [
    {
      "groupName": "PhillyStuck!",
      "location": "Philadelphia",
      "size": "452",
      "period": "2011-2020",
      "links": [
        "https://www.facebook.com/groups/157087351043845"
      ],
      "status": "Dead",
      "desc": "A Facebook and meetup group for Homestucks in and around Philadelphia. One of the largest Homestuck groups that still seems to have active members on Facebook."
    }
  ],
  "Texas": [
    {
      "groupName": "DFWstuck",
      "location": "Dallas-Fort Worth",
      "size": "Unknown",
      "period": "2014-2015",
      "links": [
        "https://dfwstuck.tumblr.com",
        "https://dfwpromstuck.tumblr.com"
      ],
      "status": "Dead",
      "desc": "Group that briefly operated (mainly in conventions) in the year 2014. Hosted event \"Promstuck\". Most recent post has no notes."
    },
    {
      "groupName": "Houstonstuck",
      "location": "Houston",
      "size": "284",
      "period": "2017-2019",
      "links": [
        "https://www.instagram.com/houstonstuck/",
        "https://www.tumblr.com/houstonstuck"
      ],
      "status": "Dead",
      "desc": "Held gatherings and panels at conventions for a while but over the years since 2015 slowly stopped posting, except the occasional cross-promotion of someone else's Homestuck event. One of the few older groups with an Instagram.",
      "img": "Houstonstuck.jpg"
    },
    {
      "groupName": "Alamostuck",
      "location": "San Antonio",
      "size": "Unknown",
      "period": "2015-2016",
      "links": [
        "https://alamostuck.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "Created by the person that adopted (and subsequently lost the login info for) San Antoniostuck, Alamostuck operated for the last stretch of Homestuck, appearing on panels at conventions and at separate gatherings attracting about a dozen people each time.",
      "img": "Alamostuck.jpg"
    },
    {
      "groupName": "Texasstuck",
      "location": "Texas",
      "size": "Unknown",
      "period": "2012-2019",
      "links": [
        "https://texasstuck.tumblr.com/",
        "https://aminoapps.com/c/TexasHomestuck/home/"
      ],
      "status": "Dead",
      "desc": "A general directory for more specific Texas-based Homestuck groups. Seems to have had a close relationship with several other active groups at the time and hosted meetups in conjunction with them. Apparently has a Discord from 2019, but the link is dead."
    },
    {
      "groupName": "Corpus Christi Stuck",
      "location": "Corpus Christi",
      "size": "32",
      "period": "2012-2018",
      "links": [
        "https://corpusstuck.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "Corpus Christi Stuck formed after a Homestuck gathering at a local convention then did nothing for 2 years. In 2014, there was a huge spike in activity, which slowly petered out after years to come. The group fell silent forever in 2018.",
      "img": "CorpusChristiStuck.jpg"
    },
    {
      "groupName": "AustinStuck",
      "location": "Austin",
      "size": "284",
      "period": "2012-2022",
      "links": [
        "https://austinstuck.tumblr.com/",
        "https://www.facebook.com/groups/172388956196812/"
      ],
      "status": "Inactive",
      "desc": "The group hosted a glut of meetups in the height of Homestuck and died out pretty quickly afterwards. However, the Facebook group still has some members left, although most of the recent posts are ads and completely unrelated to Homestuck.",
      "img": "AustinStuck.jpg"
    },
    {
      "groupName": "Lubbockstuck",
      "location": "Lubbock",
      "size": "71",
      "period": "2014-2017",
      "links": [
        "https://web.archive.org/web/20170524174018/http://lubbockstuck.tumblr.com/",
        "https://www.tumblr.com/lubbockstuck",
        "https://www.facebook.com/groups/lubbockstuck"
      ],
      "status": "Dead",
      "desc": "A group for Lubbock and the surrounding area. Original Tumblr is wiped and only has three posts, all of them from January 25, 2023, and all about Owl House headcanons. Facebook page is locked with a note that they've moved to a new one, but said new one doesn't appear to exist anymore. The old Facebook page appears to have morphed into a general fandom space instead of something dedicated to Homestuck alone."
    },
    {
      "groupName": "San Antioniostuck",
      "location": "San Antonio",
      "size": "Unknown",
      "period": "2012-2013",
      "links": [
        "https://sanantoniostuck-blog.tumblr.com/"
      ],
      "status": "Dead",
      "desc": "A branch of Texasstuck that briefly operated during the height of Homestuck. Unlike most groups, asked for and collected detailed bios of its members. Appears to have mostly hosted gatherings at conventions instead of outside, as was typical of the time/area. After losing the login info for the blog, the owner would go on to form Alamostuck.",
      "img": "SanAntonioStuck.jpg"
    }
  ],
  "United Kingdoms": [
    {
      "groupName": "HS Cosplayers UK",
      "location": "United Kingdoms",
      "size": "1200+",
      "period": "2012-Present",
      "links": [
        "https://discord.gg/Y34sXq9Nax",
        "https://www.facebook.com/groups/345135745552840/"
      ],
      "status": "Active",
      "desc": "One of the longest-running, largest, still-active Homestuck Cosplay groups in the world. Not as much activity nowadays, but they regularly hold gatherings at local conventions and on auspicious dates such as 4/13.",
      "img": "HomestuckCosplayersUK.jpg"
    }
  ]
}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>The Homestuck Green Pages</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link rel="icon" href="images/logo.png">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
	</head>
	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-CJMPMVVC28"></script>
	<script>
	window.dataLayer = window.dataLayer \|\| [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());

	gtag('config', 'G-CJMPMVVC28');
	</script>

	<body>
	<h1 style="margin: 30px 15vw;" class="typoStuckFont">The Homestuck Green Pages</h1>
	<div class="wipNotice textCenter">
	<i class="material-symbols-outlined" style="font-size: 500%;">warning</i>
	<h2 style="margin-top: 5px; font-size:2em;">This website is still being worked on. Please be patient with us, and check back often to see when we update!</h2>
	</div>
	<section class="faq">
	<h2 class="textCenter typoStuckFont">FaQ</h2>
	<div class="faqCard">
	<h4>What is this?</h4>
	<p>The Homestuck Green Pages (THSGP) is a website dedicated to archiving and displaying both deprecated and still-running regional Homestuck groups. This ranges from city-wide cosplay groups, to state-wide networks of Homestucks, to groups hosting Homestuck gatherings for entire countries and with anywhere from 20 to 1500 members. Most of these groups were active in the older days of the Homestuck fandom circa 2011-2016. Some, however, have been active for over a decade, and others still have come around only in the past few years. Regardless of size, location, or longevity, THSGP is determined to archive them all.</p>
	</div>
	<div class="faqCard">
	<h4>What if they don't want to be archived?</h4>
	<p>Then they won’t be. For both safety and privacy reasons, all active groups have been asked for permission before being displayed on this site and the leader of any group at any time, past or present, is welcome to request their group be taken off the site.</p>
	</div>
	<div class="faqCard">
	<h4>I’m in one of these pictures and I don’t like it.</h4>
	<p>That's not a question.</p>
	</div>
	<div class="faqCard">
	<h4>I’m in one of these pictures and I don’t like it?</h4>
	<p>Let us know using the provided contact information and we’ll either blur your face, find a replacement picture, or remove the picture altogether.</p>
	</div>
	<div class="faqCard">
	<h4>I know of/run a group that isn’t on this list, how do I add it?</h4>
	<p>Please let us know using the provided contact information at the bottom of the page! We’d be happy to display your site on THSGP. However, we do have a couple of requirements for you to meet in order for us to feature your group:
	<ul>
	<li>Your group must have existed for at least a month.</li>
	<li>Your group must have at least 15 members.</li>
	<li>Your group must encompass a specific and reasonabily sized region in the world.</li>
	</ul>
	</p>
	</div>
	<div class="faqCard">
	<h4>What counts as reasonably sized?</h4>
	<p>For example, a group encompassing the entirety of the continental US probably wouldn’t be of a reasonable size so as to function as a regional Homestuck group. Conversely, a group encompassing only your neighborhood probably wouldn’t be large enough to garner the members required (but if you’re able to do so anyways, feel free to reach out!)</p>
	</div>
	<div class="faqCard">
	<h4>How do I start a regional Homestuck group?</h4>
	<p>I’m glad you’re interested! As I, BattleblockB0ss (the creator of THSGP), currently run one of the largest still-active regional Homestuck groups (that I know of), I have some tips to offer:
	<ul>
	<li>Choose a reasonable area. The group I run, Calibornia Homestucks, started as Bay Area Homestucks. However, we (Calibornia Staff) quickly realized there are a hell of a lot of Homestucks in California, so after a month or two we expanded to the entirety of our state. While that made sense for our situation, the same might not be true for you, so consider what size you reasonably can/want to manage.</li>
	<li>Organize! Put together a couple of official spaces with clear rules and discussion spaces. Using Calibornia as an example again, the day I created our Discord server I made a set of rules for members to follow, and soon after created a channel list in our Discord. A few months later I put together a team of local fans to manage the Discord, a team to manage in-person events, and a team to manage our social media. This helped us stimulate interactions, keep an eye on bad actors and keep our IRL spaces safe for everyone.</li>
	<li>Go to conventions and local events. Our biggest pull as a group has been local conventions (such as FanimeCon, SacAnime, and Anime Los Angeles). Take charge and organize gatherings and/or panels, and consider printing out some business cards! You can get 500 of decent quality for $20 from Staples (if you’re in the US).</li>
	<li>Finally, and most importantly: put safety above anything else! IRL meetups hosted by regional Homestuck groups usually entail a lot of people of a variety of ages meeting for the first time. My strongest advice in this regard is to never condone a gathering with 3 or less people in attendance, especially if the attendees have a sizable age difference, and provide a clear avenue to report misconduct.</li>
	</ul>
	I think the best advice I can give you is not to force it! Putting effort into forming a group is one thing, but trying to force dynamics that just aren’t natural is another. Make sure everyone is having fun.
	</p>
	</div>
	<div class="faqCard">
	<h4>This project is dumb and you are dumb.</h4>
	<p>That’s not a question. Also, I don’t care. You’re welcome to voice your own opinion about this project and we're always open to constructive criticism and suggestions, but if you plan on doing nothing but talk shit about us, do it somewhere else.</p>
	</div>
	<div class="faqCard">
	<h4>This project is cool and you are cool! How can I help?</h4>
	<p>Thanks! If you’re interested in helping out, we’re always looking for more people to search the internet for new data. People with experience working with HTML, CSS, and/or Javascript are always appreciated, but the only skill you really need to contribute is knowing how to use Google.</p>
	</div>
	<div class="faqCard">
	<h4>Can I provide a donation for the hosting service/[other reason]?</h4>
	<p>Not right now, no. If there’s interest I’ll consider putting up a Patreon or Ko-fi, but the maintenance of this website is completely free thanks to Github Pages!</p>
	</div>
	<div class="faqCard">
	<h4>Can I make a similar project?</h4>
	<p>Of course! THSGP is open source, so feel free to use/adapt the project to your own needs, provided you supply the appropriate credit. Everything I’ve created for this project is licensed under CC BY-SA 3.0.</p>
	</div>
	<div class="faqCard">
	<h4>Why does this have such a stupid name?</h4>
	<p>Well, the inspiration was the yellow pages from the phone book but green, because Homestuck. However, The Genesis Project shares the same initials as The Green Pages, so I added a “Homestuck” in the middle and now it just sounds kind of shitty. If you have a better idea feel free to suggest it!</p>
	</div>
	<div class="faqCard">
	<h4>I have a suggestion! How do I suggest it?</h4>
	<p>Reach out to us via one of the platforms listed at the bottom of the page!</p>
	</div>
	<div class="faqCard">
	<h4>There's an error/typo/bug! How do I fix it?</h4>
	<p>Either report it to us via one of the avenues listed at the bottom of the page or, if you have web dev experience, try fixing it yourself by forking our Github.</p>
	</div>
	<div class="faqCard">
	<h4>I have another question that’s not answered here?</h4>
	<p>Feel free to reach out via the contact information listed at the bottom of the page and ask me!</p>
	</div>
	<div class="faqCard">
	<h4>Is the FaQ over yet? Can I see the groups now?</h4>
	<p>Fine.</p>
	</div>
	</section>
	<div class="warning">
	<h2 style="margin: -35px 0px;" class="textCenter">DISCLAIMER</h2>
	<h4 style="color:lightgrey; margin: -10px 0px;" class="textCenter"><i>TW: Pedophilia, sexual assault</i></h6>
	<p >While we, The Homestuck Green Pages, have collected these groups and I, BattleblockB0ss, have reviewed each group, please keep in mind that <b>we cannot guarantee their safety.</b> We have not performed in-depth investigations of any link or organization listed on this page. Many - if not all - active groups host IRL meetups, so please be careful and keep your safety in mind above all else. To share a personal anecdote relating to Homestuck group safety: during the peak days of Homestuck there was a thriving Homestuck culture in my city. One person led most of the efforts and meetups that occured, and was regarded as a bit of a "con mom" by many. Unfortunately it eventually came out that she was a pedophile and had sexually assaulted multiple underage cosplayers on multiple occasions. Her betrayal of the community's trust killed off Homestuck activity for years, and more importantly, hurt people irreparably. The moral of the story? Be careful, and nobody is above suspicion. That said, enjoy the project.</p>
	</div>
	<div id="myData">
	</div>
	<section class="contact">
	<h2 class="textCenter typoStuckFont">Contact</h2>
	<div class="emailForm">
	<p>Find me on Discord as <b>BattleblockB0ss#7148</b> or send me an email down below!</p>
	<form action="mailto:princeali123012@gmail.com" method="get" enctype="text/plain">
	Subject:<br>
	<input type="text" name="subject" placeholder="im falling down all these stairs"><br>
	Email:<br>
	<input type="email" name="email" placeholder="itkeepshappening@hussnasty.net"><br>
	Message:<br>
	<textarea name="body" rows="5" cols="30" placeholder="i told you bro"></textarea><br>
	<input type="submit" value="Send">
	</form>
	</div>
	</section>
	<script src="script.js"></script>
	</body>

	</html>
	function appendDiv(classes, container, divId) {
	let div = document.createElement("div");
	div.setAttribute("class", classes);
	if (divId != undefined) {
	div.setAttribute("id", divId);
	}
	container.appendChild(div);
	return div;
	}

	function appendImg(container, img) {
	if (img != undefined) {
	let newImg = new Image();
	newImg.src = `images/${img}`;
	newImg.setAttribute("class", "groupImg");
	container.appendChild(newImg);
	}
	}

	function appendText(textVal, container, textTag, classes) {
	let text = document.createElement(textTag);
	if (classes != undefined) {
	text.setAttribute("class", classes);
	}
	text.innerHTML = textVal;
	container.appendChild(text);
	}

	function createRegionSection(regionName, regionData) {
	const section = document.createElement("section");
	section.setAttribute("class", "region");

	//create Title
	const headerDiv = appendDiv("headerDiv", section);
	const regionHeader = appendText(regionName, headerDiv, "h2", "header");

	//create Cards
	const groupsDiv = appendDiv("groupsDiv", section);
	regionData.forEach((group) => {
	groupsDiv.appendChild(createGroupCard(group));
	});

	return section;
	}

	function createGroupCard(group){
	const {groupName, period, location, size, desc, img, links, status} = group;

	const groupCard = document.createElement("div");
	groupCard.setAttribute('class', 'groupCard');

	appendImg(groupCard, img);
	appendText(groupName, groupCard, "h3", "textCenter");
	appendText(`<i>${period}</i>`, groupCard, "p", "textCenter lessHeight");
	appendText(`<b>Region: </b>${location}<br><b>Member Count: </b>${size}<br><br>${desc}`, groupCard, "p");
	let linksLoc = links;
	appendDiv("links", groupCard, "links");
	for (var e = 0; e < linksLoc.length; e++) {
	if (linksLoc[e].includes("instagram")) {
	var linkText = "Instagram";
	} else if (linksLoc[e].includes("discord")) {
	var linkText = "Discord";
	} else if (linksLoc[e].includes("tumblr")) {
	var linkText = "Tumblr";
	} else if (linksLoc[e].includes("tiktok")) {
	var linkText = "TikTok";
	} else if (linksLoc[e].includes("youtube")) {
	var linkText = "YouTube";
	} else if (linksLoc[e].includes("linktr.ee")) {
	var linkText = "Linktree";
	} else if (linksLoc[e].includes("facebook")) {
	var linkText = "Facebook";
	} else if (linksLoc[e].includes("twitter")) {
	var linkText = "Twitter";
	} else if (linksLoc[e].includes("deviantart")) {
	var linkText = "DeviantArt";
	} else {
	var linkText = "Unknown";
	}
	appendText(`<a href=${linksLoc[e]} target="_blank">${linkText}</a> `, groupCard.lastChild, "span", linkText);
	}
	appendDiv(`${status} activityDiv`, groupCard)
	appendText(`<b>${status.toUpperCase()}</b>`, groupCard.lastChild, "p");

	return groupCard;
	}

	fetch('worldstuck.json')
	.then(function(response) {
	return response.json();
	})
	.then(function(data) {
	const mainContainer = document.getElementById("myData");
	for (const [regionName, regionData] of Object.entries(data)) {
	regionData.sort((a,b) => a.groupName.localeCompare(b.groupName))
	const section = createRegionSection(regionName, regionData)
	mainContainer.appendChild(section);
	}
	})
	.catch(function(err) {
	console.log('error: ' + err);
	});
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Zanabazar+Square&display=swap');
	@font-face {
	font-family: typoStuck;
	src: url(fonts/TYPOSTUCK.ttf);
	}

	html {
	height: 100%;
	width: 100%;
	}
	body {
	background-color: #404258;
	color: white;
	font-family: Open Sans, Helvetica, sans-serif;
	}
	h1 {
	font-size: 10vw;
	text-align: center;
	}
	h2 {
	font-family: Noto Sans Zanabazar Square;
	font-size: 5vw;
	}
	h3 {
	font-size: 200%;
	}
	h4 {
	font-size: 150%;
	}
	img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	span {
	border: 2px solid white;
	border-radius: 25px;
	padding: 3px;
	padding-left: 6px;
	margin: 3px;
	line-height: 35px;
	background: black;
	}
	a {
	color: white;
	}
	a:link,visited,hover,active {
	text-decoration: none;
	}

	.textCenter {
	text-align: center;
	}
	.lessHeight {
	margin-top: -20px;
	}
	.typoStuckFont {
	font-family: typoStuck;
	text-shadow: 0.5vw 0.5vw 0px black
	}

	/* NOTICES */
	.wipNotice {
	border: solid 3px black;
	border-radius: 5px;
	background-color: #f7e463;
	margin: 30px;
	padding: 0px 15px;
	color: black;
	}
	.wipNotice * {
	line-height: 100%;
	}
	.warning {
	border: solid 3px darkred;
	border-radius: 5px;
	background-color: #eb6060;
	margin: 30px;
	padding: 0px 15px;
	}
	/* END NOTICES */

	/* GROUPS */
	.region h2 {
	font-size: 250%;
	margin-bottom: 10px;
	}
	.groupImg {
	width: 95%;
	margin-top: 15px;
	margin-bottom: -10px;
	}
	.links {
	margin-bottom: 10px;
	}
	.region {
	border-radius: 10px;
	margin: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #474E68;
	}
	.groupsDiv {
	-webkit-column-width: 10em;
	-webkit-column-gap: 1em;
	-webkit-column-count: 6;
	-moz-column-width: 20em;
	-moz-column-gap: 2em;
	-moz-column-count: 6;
	-ms-column-width: 20em;
	-ms-column-gap: 2em;
	-ms-column-count: 6;
	column-width: 20em;
	column-gap: 2em;
	column-count: 6;
	padding-bottom: 15px;
	}
	.groupCard {
	border: 2px solid black;
	border-radius: 25px;
	padding: 10px;
	background-color: #50577A;


	/* COLUMNS */
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	width: 100%;
	box-sizing:border-box;
	}
	.groupCard:not(:first-of-type) {
	margin: 20px 0;
	}
	/* END GROUPS */

	/* FAQ */
	.faq {
	margin-left: 15px;
	margin-right: 15px;
	padding: 10px;
	border-radius: 10px;
	background-color: #50577A;
	}
	.faq h2 {
	font-size: 500%;
	margin: 20px;
	}
	.faqCard {
	background-color: #474E68;
	border-radius: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	}
	div.faqCard p {
	margin-left: 15px;
	margin-right: 15px;
	}
	div.faqCard h4 {
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: -10px;
	}
	/* END FAQ */

	/* ACTIVITY BANNER */
	.activityDiv {
	font-size: 30px;
	padding: 10px 5px;
	margin: 10px -10px -10px -10px;
	border-radius: 0% 0% 23px 23px;
	text-align: center;
	}
	.activityDiv * {
	margin-top: auto;
	margin-bottom: auto;
	}
	.Active {
	background-color: #7cd992;
	}
	.Inactive {
	background-color: #f7e463;
	}
	.Dead {
	background-color: #eb6060;
	}
	.Unknown {
	background-color: #a8a8a8;
	}
	/* END ACTIVITY BANNER */

	/* CONTACT */

	.contact h2 {
	font-size: 500%;
	margin: 20px;
	}

	/* EMAIL FORM */
	.emailForm {
	border-radius: 5px;
	background-color: #50577A;
	padding: 20px;
	margin: 20px 10%;
	}
	input[type=text], [type=email], textarea, select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}
	input[type=submit] {
	width: 100%;
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}
	input[type=submit]:hover {
	background-color: #7cd992;
	}
	/* END EMAIL FORM */

	/* END CONTACT */

	/* LINK COLORS */
	.Instagram {
	background-image: linear-gradient(to bottom right, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
	border-color: #000000;
	}
	.Discord {
	background-color: #5662F6;
	border-color: #23272a;
	}
	.Tumblr {
	background-color: #001935;
	border-color: #00B8FF;
	}
	.TikTok {
	background-image: linear-gradient(to bottom right, #00f2ea, #ff0050);
	border-color: black;
	}
	.YouTube {
	background-color: #FF0000;
	border-color: #282828;
	}
	.Linktree {
	background-color: #4d6d17;
	border-color: black;
	}
	.Facebook {
	background-color: #4292FF;
	border-color: #18191A;
	}
	.Twitter {
	background-color: #1D9BF0;
	}
	.DeviantArt {
	background-color: #00E59B;
	border-color: #06070D;
	}
	/* END LINK COLORS */
	{
	"Alabama": [
	{
	"groupName": "Alabamastuck",
	"location": "Alabama",
	"size": "304",
	"period": "2011-2018",
	"links": [
	"https://alabamastuck.tumblr.com/",
	"https://www.facebook.com/groups/alabamastuck/",
	"https://twitter.com/Alabamastuck"
	],
	"status": "Dead",
	"desc": "A group for Homestucks in Alabama and the surrounding area. Gained a significant following in the earlier days of the fandom and stayed active until 2018. Unlike most Homestuck groups at the time Alabamastuck included a Twitter along with their Tumblr and Facebook pages.",
	"img": "Alabamastuck.jpg"
	}
	],
	"California": [
	{
	"groupName": "Calibornia Homestucks",
	"location": "California",
	"size": "215",
	"period": "2022-Present",
	"links": [
	"https://www.instagram.com/caliborniahomestucks",
	"https://www.discord.gg/calibornia",
	"https://wwwtumblr.com/caliborniastuck",
	"https://www.tiktok.com/@calibornia.stuck",
	"https://youtube.com/channel/UC77y1UjGT_TKFNG6XkMAfcQ"
	],
	"status": "Active",
	"desc": "Calibornia Homestucks is a California-wide Homestuck group founded at FanimeCon 2022. They are very active in online spaces, particularly their Discord, and host gatherings and/or panels at most major California conventions. They have a 15+ age limit.",
	"img": "CaliborniaHomestucks.jpg"
	},
	{
	"groupName": "SoCal Homestuck 18 and Over Group",
	"location": "Southern California",
	"size": "32",
	"period": "2014-2017",
	"links": [
	"https://www.facebook.com/groups/666498250112498/"
	],
	"status": "Dead",
	"desc": "A Facebook group for adult Homestuck cosplayers located in Southern California. Had a very short and inactive lifespan."
	},
	{
	"groupName": "SoCalStuck",
	"location": "Southern California",
	"size": "Unknown",
	"period": "2012-2013",
	"links": [
	"https://socalstuck.tumblr.com/"
	],
	"status": "Dead",
	"desc": "A Tumblr page dedicated to tracking Homestuck meetups and groups in Southern California. While mostly dedicated to reporting on the activity of other, seperate SoCal groups, it did host multiple meetups of its own.",
	"img": "SoCalStuck.jpg"
	},
	{
	"groupName": "SanDiegoStuck",
	"location": "San Diego",
	"size": "81",
	"period": "2012-2018",
	"links": [
	"https://sandiegostuck.tumblr.com/",
	"https://www.facebook.com/groups/282144831811932/"
	],
	"status": "Dead",
	"desc": "A San Diego Homestuck group that at one point hosted bi-monthly meetups. The group seems to have amassed a pretty significant following at one point and had initially formed from a meetup at a local convention. It seems as though the group eventually morphed into a general San Diego cosplay group judging by the Facebook page.",
	"img": "SanDiegoStuck.jpg"
	},
	{
	"groupName": "Orange County Homestuck Team",
	"location": "Orange County",
	"size": "170",
	"period": "2011-Unknown",
	"links": [
	"https://www.facebook.com/groups/208196309218508/"
	],
	"status": "Dead",
	"desc": "All information on the page is wiped with only the note \"This group is now inactive. Sorry about that!\". No more information can be found."
	},
	{
	"groupName": "SoCal Homestuck Cosplay Group",
	"location": "Southern California",
	"size": "236",
	"period": "2012-Unknown",
	"links": [
	"https://www.facebook.com/groups/243886025731762/"
	],
	"status": "Unknown",
	"desc": "The Facebook page is locked to members only. Judging by the member count, they amassed a significant following in their peak. The group is most likely dead."
	},
	{
	"groupName": "Southern? California Homestuck Meetup",
	"location": "California",
	"size": "134",
	"period": "2012-Unknown",
	"links": [
	"https://www.facebook.com/groups/383399895048609/"
	],
	"status": "Unknown",
	"desc": "The Facebook page is locked to members only. It can be inferred from the title and member count that this was once a thriving Homestuck group spanning Southern California and at least part of Northern California. Latest activity is unknown, but can be safely assumed to be dead."
	},
	{
	"groupName": "Southern California Homestucks",
	"location": "Southern California",
	"size": "165",
	"period": "2013-2018",
	"links": [
	"https://www.facebook.com/groups/515355595200162/"
	],
	"status": "Dead",
	"desc": "A Homestuck group based in Southern California that seems to have been active for a longer period of time than most. Some members do appear to be active on Facebook still, although there hasn't been any significant activity in the group since 2018.",
	"img": "SouthernCaliforniaHomestucks.jpg"
	},
	{
	"groupName": "South Bay Area Homestuck",
	"location": "South Bay Area",
	"size": "31",
	"period": "2012-2013",
	"links": [
	"https://southbaystuck.tumblr.com/"
	],
	"status": "Dead",
	"desc": "A blog for San Fransisco Bay Area Homestuck fans, specifically the South Bay. An offshoot of Bayareastuck",
	"img": "SouthBayAreaHomestuck.jpg"
	},
	{
	"groupName": "Bayareastuck",
	"location": "Bay Area",
	"size": "Unknown",
	"period": "2012-2014",
	"links": [
	"https://bayareastucks-blog.tumblr.com/"
	],
	"status": "Dead",
	"desc": "A general Tumblr page that spread information on San Fransisco Bay Area Homestuck meetups."
	},
	{
	"groupName": "Calistuck",
	"location": "California",
	"size": "106",
	"period": "2011-2013",
	"links": [
	"https://calistuck-blog.tumblr.com/",
	"https://www.facebook.com/people/Castuck-California-Homestuck/100068200025919/",
	"https://www.facebook.com/groups/271624109539975/"
	],
	"status": "Dead",
	"desc": "A Homestuck group for California in general. Spread information about the more specifc group events.",
	"img": "Calistuck.jpg"
	},
	{
	"groupName": "Fresnostuck",
	"location": "Fresno",
	"size": "93",
	"period": "2011-Unknown",
	"links": [
	"https://www.facebook.com/groups/199977513430646"
	],
	"status": "Unknown",
	"desc": "A group for the Fresno Area in California. The Facebook page is locked to members only and includes \"Inactive?\" at the top of the description, so the group can safely be assumed to have died off a while ago."
	}
	],
	"Canada": [
	{
	"groupName": "London Homestuck meetups",
	"location": "London, Ontario",
	"size": "29",
	"period": "2014-2018",
	"links": [
	"https://www.facebook.com/LondonHomestuckMeetups"
	],
	"status": "Dead",
	"desc": "A meetup group for the lesser-known London, Ontario. Seems like it was a relatively close-knit group during its peak and slowly declined in popularity over the years.",
	"img": "LondonHomestuckmeetups.jpg"
	}
	],
	"Florida": [
	{
	"groupName": "Fort Meyers Homestuck Group",
	"location": "Fort Myers, FL",
	"size": "11",
	"period": "2013",
	"links": [
	"https://fortmyerstuck-blog.tumblr.com/"
	],
	"status": "Dead",
	"desc": "A Tumblr page for a cosplay group centered in Fort Meyers, FL: South-West Florida, Lee County. Appears to have only been active during 2013, but could have possibly been active elsewhere on the internet."
	}
	],
	"Idaho": [
	{
	"groupName": "Idahostuck",
	"location": "Idaho",
	"size": "168",
	"period": "2011-Present",
	"links": [
	"https://idahostuck.tumblr.com/",
	"https://www.facebook.com/groups/160547577372707/",
	"https://www.deviantart.com/idahostuck"
	],
	"status": "Inactive",
	"desc": "A group dedicated to Homestucks in Idaho. Not much activity nowadays, but infrequent spurts of posting occur around conventions."
	}
	],
	"Ireland": [
	{
	"groupName ": "Homestuck Ireland",
	"location": "Ireland",
	"size": "214",
	"period": "2012-2014",
	"links": [
	"https://homestuckireland.tumblr.com/",
	"https://www.facebook.com/HomestuckIreland/photos",
	"https://www.flickr.com/photos/moysphotos/"
	],
	"status": "Dead",
	"desc": "A Homestuck group for fans to meet up in cosplay and discuss all things Homestuck in Ireland. No activity since 2014."
	}
	],
	"Missouri": [
	{
	"groupName": "Can Town St. Louis",
	"location": "St. Louis",
	"size": "307",
	"period": "2012-2022",
	"links": [
	"https://cantownstlouis.tumblr.com/",
	"https://www.facebook.com/CanTownStLouis",
	"http://www.cantownstlouis.com/"
	],
	"status": "Inactive",
	"desc": "Can Town Project for the Greater St. Louis area. The group hosted several meetups centered around the Can Town Project and collecting canned food for charity. Collected some really astounding numbers for a great cause."
	}
	],
	"Nevada": [
	{
	"groupName": "Vegastuck",
	"location": "Las Vegas",
	"size": "Unknown",
	"period": "2012-2019",
	"links": [
	"https://vegastuck.tumblr.com/"
	],
	"status": "Dead",
	"desc": "A group for Homestucks in Las Vegas, was purportedly on good terms with surrouncing Homestuck groups including Nevadastuck and \"Vegatalia\". Held annual meetups for a while, but has had no activity since 2019.",
	"img": "Vegastuck.jpg"
	},
	{
	"groupName": "Nevadastuck",
	"location": "Nevada",
	"size": "73",
	"period": "2015-2016",
	"links": [
	"https://www.facebook.com/nevadastuck/",
	"https://nevadastuckblog.tumblr.com/"
	],
	"status": "Dead",
	"desc": "This Nevada-based group held both gatherings outside cons and panels at cons, but was only active for a short period of time.",
	"img": "Nevadastuck.jpg"
	}
	],
	"Pennsylvania": [
	{
	"groupName": "PhillyStuck!",
	"location": "Philadelphia",
	"size": "452",
	"period": "2011-2020",
	"links": [
	"https://www.facebook.com/groups/157087351043845"
	],
	"status": "Dead",
	"desc": "A Facebook and meetup group for Homestucks in and around Philadelphia. One of the largest Homestuck groups that still seems to have active members on Facebook."
	}
	],
	"Texas": [
	{
	"groupName": "DFWstuck",
	"location": "Dallas-Fort Worth",
	"size": "Unknown",
	"period": "2014-2015",
	"links": [
	"https://dfwstuck.tumblr.com",
	"https://dfwpromstuck.tumblr.com"
	],
	"status": "Dead",
	"desc": "Group that briefly operated (mainly in conventions) in the year 2014. Hosted event \"Promstuck\". Most recent post has no notes."
	},
	{
	"groupName": "Houstonstuck",
	"location": "Houston",
	"size": "284",
	"period": "2017-2019",
	"links": [
	"https://www.instagram.com/houstonstuck/",
	"https://www.tumblr.com/houstonstuck"
	],
	"status": "Dead",
	"desc": "Held gatherings and panels at conventions for a while but over the years since 2015 slowly stopped posting, except the occasional cross-promotion of someone else's Homestuck event. One of the few older groups with an Instagram.",
	"img": "Houstonstuck.jpg"
	},
	{
	"groupName": "Alamostuck",
	"location": "San Antonio",
	"size": "Unknown",
	"period": "2015-2016",
	"links": [
	"https://alamostuck.tumblr.com/"
	],
	"status": "Dead",
	"desc": "Created by the person that adopted (and subsequently lost the login info for) San Antoniostuck, Alamostuck operated for the last stretch of Homestuck, appearing on panels at conventions and at separate gatherings attracting about a dozen people each time.",
	"img": "Alamostuck.jpg"
	},
	{
	"groupName": "Texasstuck",
	"location": "Texas",
	"size": "Unknown",
	"period": "2012-2019",
	"links": [
	"https://texasstuck.tumblr.com/",
	"https://aminoapps.com/c/TexasHomestuck/home/"
	],
	"status": "Dead",
	"desc": "A general directory for more specific Texas-based Homestuck groups. Seems to have had a close relationship with several other active groups at the time and hosted meetups in conjunction with them. Apparently has a Discord from 2019, but the link is dead."
	},
	{
	"groupName": "Corpus Christi Stuck",
	"location": "Corpus Christi",
	"size": "32",
	"period": "2012-2018",
	"links": [
	"https://corpusstuck.tumblr.com/"
	],
	"status": "Dead",
	"desc": "Corpus Christi Stuck formed after a Homestuck gathering at a local convention then did nothing for 2 years. In 2014, there was a huge spike in activity, which slowly petered out after years to come. The group fell silent forever in 2018.",
	"img": "CorpusChristiStuck.jpg"
	},
	{
	"groupName": "AustinStuck",
	"location": "Austin",
	"size": "284",
	"period": "2012-2022",
	"links": [
	"https://austinstuck.tumblr.com/",
	"https://www.facebook.com/groups/172388956196812/"
	],
	"status": "Inactive",
	"desc": "The group hosted a glut of meetups in the height of Homestuck and died out pretty quickly afterwards. However, the Facebook group still has some members left, although most of the recent posts are ads and completely unrelated to Homestuck.",
	"img": "AustinStuck.jpg"
	},
	{
	"groupName": "Lubbockstuck",
	"location": "Lubbock",
	"size": "71",
	"period": "2014-2017",
	"links": [
	"https://web.archive.org/web/20170524174018/http://lubbockstuck.tumblr.com/",
	"https://www.tumblr.com/lubbockstuck",
	"https://www.facebook.com/groups/lubbockstuck"
	],
	"status": "Dead",
	"desc": "A group for Lubbock and the surrounding area. Original Tumblr is wiped and only has three posts, all of them from January 25, 2023, and all about Owl House headcanons. Facebook page is locked with a note that they've moved to a new one, but said new one doesn't appear to exist anymore. The old Facebook page appears to have morphed into a general fandom space instead of something dedicated to Homestuck alone."
	},
	{
	"groupName": "San Antioniostuck",
	"location": "San Antonio",
	"size": "Unknown",
	"period": "2012-2013",
	"links": [
	"https://sanantoniostuck-blog.tumblr.com/"
	],
	"status": "Dead",
	"desc": "A branch of Texasstuck that briefly operated during the height of Homestuck. Unlike most groups, asked for and collected detailed bios of its members. Appears to have mostly hosted gatherings at conventions instead of outside, as was typical of the time/area. After losing the login info for the blog, the owner would go on to form Alamostuck.",
	"img": "SanAntonioStuck.jpg"
	}
	],
	"United Kingdoms": [
	{
	"groupName": "HS Cosplayers UK",
	"location": "United Kingdoms",
	"size": "1200+",
	"period": "2012-Present",
	"links": [
	"https://discord.gg/Y34sXq9Nax",
	"https://www.facebook.com/groups/345135745552840/"
	],
	"status": "Active",
	"desc": "One of the longest-running, largest, still-active Homestuck Cosplay groups in the world. Not as much activity nowadays, but they regularly hold gatherings at local conventions and on auspicious dates such as 4/13.",
	"img": "HomestuckCosplayersUK.jpg"
	}
	]
	}