lander/index.html at main · SillyLittleTech/lander · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SillyLittleTech</title>
    <script>
      /* ensure theme attribute is present early to avoid FOUC */ (function () {
        try {
          const t = localStorage.getItem("theme");
          if (t) document.documentElement.dataset.theme = t;
        } catch (e) {
          console.warn(e);
        }
      })();
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
    />
    <link rel="stylesheet" href="base.css" />
    <link rel="stylesheet" href="site.css" />
    <link rel="stylesheet" href="donors.css" />

    <!-- Added styles for the safety pill button -->
    <style>
      .safety-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 16px 4px 4px;
        margin-top: 1rem;
        background-color: rgba(128, 128, 128, 0.1);
        border: 1px solid rgba(128, 128, 128, 0.2);
        color: inherit;
        text-decoration: none;
        border-radius: 9999px;
        font-size: 0.85rem;
        font-weight: 500;
        transition: background-color 0.2s ease;
        width: fit-content;
      }
      .safety-pill:hover {
        background-color: rgba(128, 128, 128, 0.2);
      }
      .safety-pill img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
      }
    </style>
  </head>
  <body class="home-page">
    <noscript>
      <p class="noscript-notice">JavaScript is required to use this site.</p>
    </noscript>
    <!-- theme-toggle button is injected by theme.js -->
    <div class="container">
      <div class="left-section">
        <div class="profile">
          <div class="avatar">
            <img
              src="assetlab/raster/newslticon.png"
              alt="SillyLittleTech logo"
              class="avatar-img"
              data-fallback="assetlab/smallicon.png"
            />
          </div>
          <h1 class="name">Silly Little <span class="tech-thin">Tech</span></h1>
        </div>
        <p class="description">
          SillyLittleTech is a small organization building open-source web tools
          and hosting platforms for creative and educational projects.
        </p>

        <!-- Wrapped both the button group and pill so they don't break flex spacing -->
        <div class="actions-wrapper">
          <div class="button-group">
            <a href="apply.html" class="contact-button">Contact Us</a>
            <a href="/github" class="github-button" aria-label="GitHub">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
                />
              </svg>
            </a>
            <a href="/donate.html" class="icon-button" aria-label="Donate">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                />
              </svg>
            </a>
          </div>

          <!-- NEW PILL BUTTON -->
          <a href="https://socks.sillylittle.tech" class="safety-pill">
            <img
              src="https://raw.githubusercontent.com/SillyLittleTech/sillylittletech.github.io/refs/heads/main/assets/socksiconDefault-1024x1024%401x.png"
              alt="Safety Icon"
            />
            <span>Learn how to stay safe online</span>
          </a>
        </div>
      </div>

      <div class="right-section">
        <!-- Contributor profile icons — populated from contributors.json -->
        <div class="contributor-icons" id="contributorsContainer"></div>
        <div class="links" id="linksContainer">
          <!-- Links will be rendered here from links.json -->
        </div>
        <div class="announcement-wrap" id="announcementContainer"></div>
      </div>
    </div>

    <section class="with-help-from" aria-label="Technology Partners">
      <span class="help-label">With help from</span>
      <div class="help-logos" id="helpFromContainer"></div>
    </section>

    <footer class="site-footer" id="siteFooter">
      <!-- Footer content is loaded dynamically from includes/footer.html -->
      <div class="footer-inner">
        <a href="brand.html">Our Brand</a> ·
        <a href="policy.html">Privacy Policy</a>
        <div class="footer-copyright">
          &copy; 2026 SillyLittleTech.<br />
          Fiscally sponsored by The Hack Foundation (d.b.a. Hack Club), a
          501(c)(3) nonprofit (EIN: 81-2908499).
        </div>
      </div>
    </footer>

    <script src="theme.js"></script>
    <script src="script.js"></script>
    <script src="donors.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        if (globalThis.SLT && globalThis.SLT.donors) {
          globalThis.SLT.donors.renderTechDonors(
            "#helpFromContainer",
            "donors.json",
          );
        }
      });
    </script>
  </body>
</html>