Chapter Text

Note: I have edited the OG code to what is shown down below as well as some minor edits like color changes and the clickbait boxes at the bottom. On mobile those are still squished and I currently do not have a fix for that. The OG code also has a dropdown menu for "Home" "News" etc, but I took that off as I personally did not want it.

<div class="article">
<div class="header">
<h1>Daily Planet</h1>
<div class="navbar">
<ul class="nobullets">
<li>News</li>
<li>The Planet</li>
<li>Voices</li>
<li>Metropolis</li>
<li>Superman</li>
</ul>
</div>
</div>
<div class="content">
<div class="textbody">
<h2>The Hidden Gems of Gotham</h2>

<p class="byline">By <span class="author">Clark Kent</span> | 02/02/XX</p>

<p>Gotham has never been an easy place to call home. Between the crime, corruption, and the occasional supervillain rampage it sometimes feels like the city itself is working against its people. But Gotham is more than its worst days. It’s a city built on resilience and held together not just by the ones in capes and masks but by the everyday people who refuse to let crime win.</p>

<p>They don’t make headlines. They don’t ask for recognition. But without them, Gotham wouldn’t stand a chance. Here are just a few of the city’s unsung heroes.</p>

<p><b><u>Haven Shelter</u></b>. After the 2022 flood, thousands of Gothamites were left without homes, but even before that the city’s homelessness crisis was impossible to ignore. The Haven Shelter, a converted warehouse in the Bowery, offers beds, hot meals, and most importantly a second chance. Run by Harvey Dent the shelter doesn’t just provide a place to sleep; it helps people get back on their feet with job training, legal aid, and mental health services.</p>

<p><b><u>The Gotham Greenway Project</u></b>. What was once a collection of abandoned lots and forgotten spaces is now something almost unheard of in Gotham: thriving community gardens. Volunteers with the Greenway Project have been hard at work, transforming neglected patches of land into urban oases where residents can grow fresh produce and learn sustainable agriculture. “It’s about more than just food,” says project lead Pamela Lillian Isley. “It’s about reclaiming our own neighborhoods and showing people that Gotham doesn’t have to be all steel and concrete.” And in a city where access to fresh, healthy food is a struggle for many, the Greenway Project is proving that a little green can go a long way.</p>

<p><b><u>Free Clinic at Bristol Commons</u></b>. In Gotham a hospital visit can mean the difference between getting help and going bankrupt. That’s why the Free Clinic at Bristol Commons is so vital. Run by Dr. Harleen Quinzel and other volunteer doctors, nurses, and medical students, the clinic provides free healthcare services to Gotham’s uninsured. No appointments, no bills, just help. Whether it’s a flu shot, a check-up, or something more serious, the clinic’s staff works tirelessly to make sure that no one in Gotham has to choose between paying rent and seeing a doctor.</p>

<p><b><u>St. Maria’s Community Kitchen &amp; Food Pantry</u></b>. If you’ve ever walked through Gotham’s East End on a cold night, chances are you’ve seen the line outside St. Maria’s. For decades, this small but mighty kitchen has been a beacon for the city’s homeless and struggling families, serving up hot meals with no questions asked. <b><i>Bruce Wayne</i></b> is a regular volunteer at this location, dedicating his time to helping wherever he’s needed and can be seen making meals or restocking. The volunteers here don’t do it for recognition, and they certainly don’t do it for profit. They do it because in a city where people fall through the cracks every day, someone has to be there to catch them.</p>

<p><b><u>The Ironwood Workshop</u></b>. Second chances are hard to come by in Gotham, but the Ironwood Workshop is built on them. Literally. Tucked away in the industrial district this nonprofit teaches woodworking and trade skills to at risk youth and formerly incarcerated individuals. Inside the scent of sawdust and fresh cut timber fills the air as apprentices craft everything from park benches to custom furniture for local businesses. “A lot of these guys, no one’s ever given them the time of day,” says founder Matt Hagen, a skilled carpenter. “Here they get a chance to build for a great change.”</p>

<p>Like all cities Gotham isn’t perfect. But for every shadow, there’s a light. And more often than not, that light comes from the people who refuse to give up on this city even when things get uncertain.</p>

<p class="disclaimer">As part of an opinion piece, the views contained herein are neither endorsed nor condemned by <em>Daily Planet</em>.</p></div>
<div class="clickbait">
<h3>You might also like . . .</h3>
<ul class="nobullets">
<li class="thumbnail">

<p class="category"><span class="news">Metropolis Traffic Report:</span></p><br />
<h4>It’s Bad, and Superman Won’t Carry You to Work</h4>
</li>
<li class="thumbnail">

<p class="category"><span class="health">Sleep? In THIS Economy? </span></p><br />
<h4>5 Alternatives to Resting Like an Average Person!</h4>
</li>
<li class="thumbnail">

<p class="category"><span class="sport">Dating in Metropolis:</span></p><br />
<h4>Should You Ask If They’ve Been Kidnapped Before?</h4>
</li>
</ul>
</div>
</div>
</div>

#workskin NEWSPAPER ARTICLE BY deathbymistletoe ################################## {
  color: INHERIT;
}

#workskin .nobullets {
  list-style-type: none;
}

#workskin .article {
  background: hsl(60, 25%, 98%);
  border: 1px solid hsl(0, 0%, 60%);
  box-shadow: 0 0 15px 1px #0002;
  box-sizing: border-box;
  font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
  font-size: 1em;
  margin: 0 5%;
  max-width: 72em;
  position: relative;
  width: 90%;
  z-index: 1;
}

#workskin .article * {
  border: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#workskin .article p {
  color: #000;
  margin-bottom: 1em;
}

#workskin .article .header {
  background: transparent;
  height: 7em;
  position: relative;
  z-index: 3;
}

#workskin .article .header h1 {
  background: linear-gradient(to bottom,#8ca9d3, #3053aa);
  border-bottom: 2.5px solid black;
  color: white;
  font-style: italic;
  font-weight: bold;
  height: 2em;
  line-height: 2em;
  margin: 0 auto;
  position: relative;
  text-align: center;
  text-shadow: 1px 1px #000;
  z-index: 3;
}

#workskin .article .navbar {
  background: transparent;
  height: 2em;
  width: 100%;
}

#workskin .article .navbar ul,
#workskin .article .navbar li {
  background: #223499;
  color: white;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 2;
}

#workskin .article .navbar li {
  display: block;
  float: left;
  height: 2em;
  line-height: 2em;
  width: 20%;
}

#workskin .article .content {
  background: transparent;
  box-sizing: unset;
  color: #000;
  padding: 1.5em 7.5%;
  width: 85%;
  word-wrap: break-word;
}

#workskin .article .textbody,
#workskin .article .clickbait {
  background: transparent;
  width: 100%;
}

#workskin .article .textbody h2 {
  font-weight: bold;
  height: fit-content;
  line-height: 2em;
  color: black;
  text-align: center;
}

#workskin .article .textbody .byline {
  color: #444;
}

#workskin .article .textbody p {
  line-height: 1.5em;
  text-align: justify;
}

#workskin .article .disclaimer {
  background: hsl(0, 50%, 90%);
  border-left: 5px solid hsl(0, 50%, 50%);
  color: #424242;
  font-variant: small-caps;
  font-weight: bold;
  margin-bottom: 0;
  padding: 0.5em;
}

#workskin .article .clickbait {
  height: 15em;
  padding: 0 5px;
  width: 100%;
}

#workskin .article .clickbait h3 {
  font-size: 1.5em;
  font-style: italic;
  height: 2em;
  line-height: 2em;
  margin: 0.5em 0;
  text-align: left;
}

#workskin .article .clickbait ul {
  height: 11em;
  width: 100%;
}

#workskin .article .thumbnail {
  background: white;
  box-shadow: 0 0 15px 1px #0001;
  display: inline-block;
  height: 11em;
  padding: 1%;
  width: 32%;
}

#workskin .article .thumbnail:hover {
  box-shadow: 0 0 15px 1px #0004;
  cursor: pointer;
}

#workskin .article .thumbnail:first-child {
  margin-left: 0;
}

#workskin .article .thumbnail:last-child {
  margin-right: 0;
}

#workskin .article .thumbnail .category {
  height: 2em;
  line-height: 2em;
  margin: 0;
  margin-bottom: 0.5em;
}

#workskin .article .thumbnail .category span {
  display: block;
  float: left;
  font-style: italic;
  height: 2em;
  line-height: 2em;
  padding: 0 0.1em;
  width: fit-content;
}

#workskin .article span.news {
  border-bottom: 3px double #2D862D;
  color: #2D862D;
}

#workskin .article span.health {
  border-bottom: 3px double #2D2D86;
  color: #2D2D86;
}

#workskin .article span.sport {
  border-bottom: 3px double #40BFBF;
  color: #40BFBF;
}

#workskin .article .thumbnail h4 {
  font-size: 14px;
  height: fit-content;
  max-height: 16px;
  width: 100%;
}