A fork of pds-dash for selfhosted.social
baileytownsend.dev
1<script lang="ts">
2 // Optional props to customize the header
3
4</script>
5
6<div class="info-header">
7 <h1 class="title">Who are we?</h1>
8 <p class="description">
9 We're hackers, designers, developers, ATProto enthusiasts, scrobblers, tinkerers, friends, and curious minds. Some of us are all these things, some of us are none of these things.
10 <br><br>
11 What brings us together isn't a checklist, but a shared space where everyone is welcome to be themselves. This is our slice of the atmosphere.
12 </p>
13</div>
14
15<style>
16 .info-header {
17 text-align: center;
18 padding: 3rem 1rem;
19 background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
20 border-radius: 12px;
21 margin-bottom: 3rem;
22 }
23
24 .title {
25 font-size: 3rem;
26 font-weight: 800;
27 color: var(--text-color, #111827);
28 margin: 0 0 1.5rem 0;
29 letter-spacing: -0.02em;
30 line-height: 1.2;
31 }
32
33 .description {
34 font-size: 1.125rem;
35 color: var(--text-color, #111827);
36 opacity: 0.8;
37 max-width: 750px;
38 margin: 0 auto;
39 line-height: 1.7;
40 }
41
42 .description strong {
43 font-weight: 700;
44 opacity: 1;
45 }
46
47 @media (max-width: 768px) {
48 .info-header {
49 padding: 2rem 1rem;
50 margin-bottom: 2rem;
51 }
52
53 .title {
54 font-size: 2rem;
55 }
56
57 .description {
58 font-size: 1rem;
59 }
60 }
61
62 @media (max-width: 480px) {
63 .info-header {
64 padding: 1.5rem 0.75rem;
65 }
66
67 .title {
68 font-size: 1.75rem;
69 }
70
71 .description {
72 font-size: 0.95rem;
73 }
74 }
75</style>