oeiuwq.com
fake.modules transposition for aspect-oriented Dendritic Nix. with cross-aspect dependencies. Discussions: https://oeiuwq.zulipchat.com/join/nqp26cd4kngon6mo3ncgnuap/
dendrix.oeiuwq.com/Dendritic.html
dendritic
nix
aspect
oriented
1---
2import { LinkButton, Icon } from '@astrojs/starlight/components';
3---
4
5<section class="sponsor-card">
6 <div class="content">
7 <div class="header">
8 <Icon name="heart" size="2.5rem" class="heart-icon" />
9 <h4><code>vic/flake-aspects</code>?</h4>
10 </div>
11
12 <LinkButton href="https://dendritic.oeiuwq.com/sponsor" variant="primary">Become a Sponsor</LinkButton>
13
14 <p class="description">
15 flake-aspects is part of <a href="https://dendritic.oeiuwq.com">@vic's Dendritic Ecosystem</a> — made with love and maintained with passion.
16 </p>
17
18 <ul class="ecosystem">
19 <li><a href="https://github.com/vic/import-tree">import-tree</a></li>
20 <li><a href="https://github.com/vic/flake-file">flake-file</a></li>
21 <li><a href="https://github.com/vic/with-inputs">with-inputs</a></li>
22 <li><a href="https://github.com/vic/den">den</a></li>
23 <li><a href="https://github.com/vic/denful">denful</a></li>
24 <li><a href="https://github.com/vic/dendrix">dendrix</a></li>
25 </ul>
26
27 </div>
28</section>
29
30<style>
31 .sponsor-card {
32 border-radius: 1rem;
33 padding: 2rem 1.5rem;
34 margin: 2rem 1rem;
35 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
36 transition: all 0.4s ease;
37 max-width: 20em;
38 }
39
40 .sponsor-card:hover {
41 background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
42 box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
43 transform: translateY(-2px);
44 }
45
46 .content * {
47 color: var(--sl-color-fg);
48 }
49
50 .content {
51 text-align: center;
52 }
53
54 .content:hover * {
55 color: white;
56 }
57
58 .content a:link {
59 color: inherit;
60 }
61
62 .content a.primary:link {
63 color: var(--sl-color-bg);
64 }
65
66 .content a.primary:visited {
67 color: var(--sl-color-bg);
68 }
69
70 .content a:visited {
71 color: inherit;
72 }
73
74 .header {
75 display: flex;
76 align-items: center;
77 justify-content: center;
78 gap: 0.75rem;
79 margin-bottom: 1rem;
80 }
81
82 .heart-icon {
83 animation: pulse 2s ease-in-out infinite;
84 }
85
86 @keyframes pulse {
87 0%, 100% {
88 opacity: 1;
89 }
90 50% {
91 opacity: 0.7;
92 }
93 }
94
95 h3 {
96 font-size: 1.5rem;
97 font-weight: 700;
98 margin: 0;
99 letter-spacing: -0.02em;
100 }
101
102 .description {
103 font-size: 0.95rem;
104 line-height: 1.6;
105 margin: 1rem 0 1.5rem 0;
106 opacity: 0.95;
107 }
108
109 .description a {
110 font-weight: 600;
111 text-decoration: underline;
112 text-decoration-thickness: 2px;
113 text-underline-offset: 4px;
114 }
115
116 .description a:hover {
117 opacity: 0.85;
118 }
119
120 .ecosystem {
121 list-style: none;
122 padding: 0;
123 margin: 1.5rem 0;
124 display: grid;
125 grid-template-columns: repeat(2, 1fr);
126 gap: 0.75rem;
127 font-size: 0.9rem;
128 }
129
130 .ecosystem li {
131 background: rgba(255, 255, 255, 0.15);
132 padding: 0.5rem 0.75rem;
133 border-radius: 0.5rem;
134 backdrop-filter: blur(10px);
135 }
136
137 .ecosystem a {
138 text-decoration: none;
139 font-weight: 500;
140 transition: opacity 0.2s;
141 }
142
143 .ecosystem a:hover {
144 opacity: 0.85;
145 text-decoration: underline;
146 }
147
148 .cta-button {
149 display: inline-flex;
150 align-items: center;
151 gap: 0.5rem;
152 background: rgba(255, 255, 255, 0.25);
153 padding: 0.875rem 1.75rem;
154 border-radius: 0.75rem;
155 font-weight: 600;
156 font-size: 1rem;
157 text-decoration: none;
158 border: 2px solid rgba(255, 255, 255, 0.4);
159 transition: all 0.3s ease;
160 margin-top: 1rem;
161 cursor: pointer;
162 }
163
164 .cta-button:hover {
165 background: rgba(255, 255, 255, 0.35);
166 border-color: rgba(255, 255, 255, 0.6);
167 transform: scale(1.05);
168 }
169
170 .cta-button:active {
171 transform: scale(0.98);
172 }
173</style>