<script>
  import Header from "../lib/Header.svelte";
  import People from "../lib/People.svelte";
  import tippy from 'tippy.js';
  import 'tippy.js/dist/tippy.css';
  import { onMount } from "svelte";

  let tipFriendCloud;

  onMount(() => {
    tippy(tipFriendCloud, {
      content: 'A cloud for friends. A mix between Public and Private Cloud.',
      placement: 'bottom'
    });
  });
</script>

<svelte:head>
  <title>dark-firepit</title>
</svelte:head>

<main>
  <Header/>

  <div class="big paragraph neat-bg-container">
    <div class="neat-bg" style="transform: skewY(1deg)"></div>
    <pre>firepit</pre> is a friend group of sane<em>*</em> developers, mathematicians, artists
    and overall queer furries.
  </div>

  <div class="paragraph center">
    This domain <em>(and associated server)</em> is used for hosting various
    <span class="has-tooltip" bind:this={tipFriendCloud}>friend cloud</span> services. <span title="among us">Among</span> those
    services is:
  </div>

  <el>
    <li><a href="https://nextcloud.oat.zone">Nextcloud</a></li>
    <li><a href="https://git.oat.zone/">Gitea</a></li>
    <li><a href="https://nitter.oat.zone/">Nitter</a></li>
  </el>

  <div class="paragraph">
    Alongside those, we also host some miscellaneous pages and services:
  </div>

  <el>
    <li><a href="/videos-of-all-time">Videos of all time</a></li>
    <li><a href="https://yugoslavia.best">yugoslavia.best</a></li>
    <li>
      Personal sites of <pre>firepit</pre> members:
      <a href="https://oat.zone">oat.zone</a>,
      <a href="https://aether.gay">aether.gay</a>,
      <a href="https://mayf.pink">mayf.pink</a>,
      <a href="https://wint0r.zone">wint0r.zone</a>
    </li>
  </el>

  <div class="paragraph">
    And occasionally, we fork or develop software:
  </div>

  <el>
    <li><a href="https://git.oat.zone/dark-firepit/dark-firepit-modpack">1.19.2 Minecraft modpack</a></li>
    <li><a href="https://git.oat.zone/dark-firepit/dotfiles">NixOS system configuration</a></li>
  </el>

  <div class="big paragraph neat-bg-container center">
    <div class="neat-bg" style="transform: skewY(-1deg)"></div>
    But who are we, really?
  </div>

  <div class="paragraph center">
    We consist of 14 people, give or take:
  </div>

  <People/>

  <div class="big paragraph neat-bg-container center">
    <div class="neat-bg" style="transform: skewY(0.5deg)"></div>
    Why not reach out?
  </div>

  <div class="paragraph">
    <b>Tell us feedback about our services!</b> Tell us suggestions, issues, or just tell us about your day.
    We'll be sure to communally decide how to reply with the most informative, funniest or otherwise best
    response possible.
  </div>

  <div class="paragraph">
    Currently, you'll just have to use Jill's email, which would be <b>oat at [its domain]</b> (be sure
    to include <i>"firepit"</i> somewhere in the subject line). However, in the future we're looking to get
    more contact options. <i>Don't expect any requests to join the group to be taken seriously.</i>
  </div>

  <hr style="width: 120%; left: -10%; position: relative">

  <div class="center">
    <a href="https://stats.uptimerobot.com/ZyM4vi7Ao7" style="text-decoration: none">Status</a> • <a>more links??</a>
  </div>

  <footer class="center">
    <i>Thank you for sus lel meem fof.</i><br>
    <img src="wawoo.png" alt="wawoo.png">
    <img src="cat.gif" alt="a jumping cat">
    <br>
    <img src="badges/badge1.gif" alt="badge that says 'best viewed with any browser, any os'">
    <img src="badges/badge2.gif" alt="aol instant messenger badge">
    <img src="badges/badge3.gif" alt="'written in the vi editor' badge">
    <img src="badges/badge4.gif" alt="'get quake now' badge">
    <a class="stealth-link" href="https://dark-firepit.cloud"><img src="badges/dark-firepit.png" alt="the dark-firepit badge"></a>
    <a class="stealth-link" href="https://oat.zone"><img src="badges/oat-zone.gif" alt="the oat.zone badge"></a>
  </footer>
</main>