wizardloop.github.io/src/pages/posts.astro at main · WizardLoop/wizardloop.github.io · 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
---
import Base from '../layouts/Base.astro';
import Icon from '../components/Icon.astro';
import MotionArt from '../components/MotionArt.astro';
import { site } from '../config/site';
import '../styles/destinations.css';
---

<Base
  title="Posts from the studio"
  description="Read my posts on Telegram. I share design, motion, creative experiments and notes from the making, in their original home."
>
  <section class="destination-page destination-posts wrap">
    <header class="destination-heading">
      <p class="eyebrow">POSTS / NOTES FROM THE STUDIO</p>
      <h1>
        Fresh from
        <br />
        <em>the loop.</em>
      </h1>
      <p>
        Thoughts, visual experiments and things in the making. Find the posts on
        my Telegram channel.
      </p>
    </header>
    <section
      class="destination-stage destination-dispatch"
      aria-labelledby="posts-heading"
    >
      <div class="destination-copy">
        <span class="destination-index">A DIRECT LINE TO THE STUDIO</span>
        <h2 id="posts-heading">
          Read it where
          <br />
          it happens.
        </h2>
        <p>
          Open the public feed to explore the original posts and media, or join
          the channel to follow along in Telegram.
        </p>
        <div class="destination-actions">
          <a class="button" href={site.links.channelPreview}>
            Read the posts <Icon name="northeast" size={19} />
          </a>
          <a class="text-link" href={site.links.channel}>
            <Icon name="telegram" size={19} /> Join the channel
          </a>
        </div>
        <p class="destination-address">Opens the public Telegram feed.</p>
      </div>
      <div class="destination-art dispatch-drawing">
        <div class="dispatch-seal">
          <svg
            class="dispatch-orbits"
            viewBox="0 0 460 460"
            fill="none"
            aria-hidden="true"
            focusable="false"
          >
            <circle class="drawing-violet" cx="230" cy="230" r="175" />
            <ellipse
              class="drawing-accent-stroke drawing-dotted"
              cx="230"
              cy="230"
              rx="220"
              ry="125"
              transform="rotate(-35 230 230)"
            />
            <path
              class="drawing-yellow drawing-stroke"
              d="m80 65 7 19 20 6-20 7-7 19-7-19-20-7 20-6z"
            />
            <path
              class="drawing-stroke"
              d="m371 356 18 6m-27 10 12 14m-29-7 4 17"
            />
          </svg>
          <MotionArt
            name="silver-grimoire"
            class="dispatch-grimoire"
            alt="A silver infinity emblem with engraved details and glinting highlights"
          />
          <span class="dispatch-telegram" aria-hidden="true">
            <Icon name="telegram" size={28} />
          </span>
        </div>
        <span class="destination-handnote">
          A little magic, from me to you.
        </span>
      </div>
    </section>
    <div class="destination-after">
      <p>Keep the conversation going.</p>
      <a class="text-link" href={site.links.community}>
        Join the community <Icon name="arrow" size={19} />
      </a>
    </div>
  </section>
</Base>