Skip to content

Commit 0fc36a2

Browse files
DIYgodDIYgod
committed
feat: add RSS3 section and social links
1 parent 257f4ea commit 0fc36a2

2 files changed

Lines changed: 289 additions & 4 deletions

File tree

‎index.html‎

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<a href="#vision" data-section-link="vision">Vision</a>
2828
<a href="#folo" data-section-link="folo">Folo</a>
2929
<a href="#rsshub" data-section-link="rsshub">RSSHub</a>
30+
<a href="#rss3" data-section-link="rss3">RSS3</a>
3031
<a href="#ecosystem" data-section-link="ecosystem">Ecosystem</a>
3132
</nav>
3233
</div>
@@ -179,6 +180,44 @@ <h2>Infrastructure for the readable web.</h2>
179180
</div>
180181
</section>
181182

183+
<section id="rss3" class="section chapter chapter--rss3">
184+
<div class="wrap chapter-layout">
185+
<div class="chapter-copy" data-reveal>
186+
<p class="eyebrow">Chapter 03 — RSS3</p>
187+
<h2><span class="chapter-token">$RSS3</span> The link between infrastructure and adoption.</h2>
188+
<p class="chapter-lead">
189+
$RSS3 connects infrastructure and products across RSSNext, linking
190+
open data, applications, and the value they generate.
191+
</p>
192+
<p>
193+
It gives contributors, developers, and users a shared stake in the
194+
ecosystem so it grows as one.
195+
</p>
196+
<ul class="chapter-tags" aria-label="RSS3 themes">
197+
<li>Open Data</li>
198+
<li>Applications</li>
199+
<li>Shared Stake</li>
200+
</ul>
201+
</div>
202+
203+
<div class="chapter-art chapter-art--rss3" aria-hidden="true" data-reveal>
204+
<div class="rss3-stage">
205+
<div class="rss3-beam rss3-beam--one"></div>
206+
<div class="rss3-beam rss3-beam--two"></div>
207+
<div class="rss3-panel rss3-panel--one"></div>
208+
<div class="rss3-panel rss3-panel--two"></div>
209+
<div class="rss3-panel rss3-panel--three"></div>
210+
<div class="rss3-orbit rss3-orbit--one"></div>
211+
<div class="rss3-orbit rss3-orbit--two"></div>
212+
<div class="rss3-node rss3-node--one"></div>
213+
<div class="rss3-node rss3-node--two"></div>
214+
<div class="rss3-node rss3-node--three"></div>
215+
<div class="rss3-node rss3-node--four"></div>
216+
</div>
217+
</div>
218+
</div>
219+
</section>
220+
182221
<section id="ecosystem" class="section section--ecosystem">
183222
<div class="wrap ecosystem-layout">
184223
<div class="section-heading" data-reveal>
@@ -210,8 +249,45 @@ <h2>Built in public, growing in the open.</h2>
210249

211250
<footer class="site-footer">
212251
<div class="wrap footer-inner">
213-
<p>RSSNext</p>
214-
<p>Open information, rebuilt with care.</p>
252+
<div class="footer-copy">
253+
<p>RSSNext</p>
254+
<p>Open information, rebuilt with care.</p>
255+
</div>
256+
<div class="footer-socials" aria-label="Social media">
257+
<a class="social-link" href="https://github.com/RSSNext" target="_blank" rel="noreferrer" aria-label="RSSNext on GitHub">
258+
<span class="social-link__icon" aria-hidden="true">
259+
<svg viewBox="0 0 24 24" focusable="false">
260+
<path
261+
fill="currentColor"
262+
d="M12 1.5a10.5 10.5 0 0 0-3.32 20.46c.53.1.72-.22.72-.5v-1.94c-2.93.64-3.55-1.24-3.55-1.24-.48-1.2-1.16-1.52-1.16-1.52-.95-.65.07-.64.07-.64 1.05.08 1.6 1.08 1.6 1.08.93 1.6 2.45 1.14 3.05.87.09-.67.36-1.14.66-1.41-2.34-.27-4.81-1.17-4.81-5.2 0-1.15.41-2.1 1.08-2.84-.11-.27-.47-1.37.1-2.86 0 0 .88-.28 2.89 1.08a10.02 10.02 0 0 1 5.26 0c2.01-1.36 2.89-1.08 2.89-1.08.57 1.49.21 2.59.1 2.86.67.74 1.08 1.69 1.08 2.84 0 4.04-2.48 4.92-4.84 5.19.37.32.7.96.7 1.94v2.88c0 .28.19.61.73.5A10.5 10.5 0 0 0 12 1.5Z"
263+
/>
264+
</svg>
265+
</span>
266+
<span>GitHub</span>
267+
</a>
268+
<a class="social-link" href="https://x.com/rss3_" target="_blank" rel="noreferrer" aria-label="RSSNext on X">
269+
<span class="social-link__icon" aria-hidden="true">
270+
<svg viewBox="0 0 24 24" focusable="false">
271+
<path
272+
fill="currentColor"
273+
d="M18.9 2.25H22l-6.78 7.74L23.2 21.75h-6.24l-4.9-6.92-6.05 6.92H2.9l7.25-8.29L.8 2.25h6.4l4.43 6.27 5.48-6.27Zm-1.1 17.62h1.72L6.25 4.03H4.4l13.4 15.84Z"
274+
/>
275+
</svg>
276+
</span>
277+
<span>Twitter</span>
278+
</a>
279+
<a class="social-link" href="mailto:contact@rssnext.org" aria-label="Email RSSNext">
280+
<span class="social-link__icon" aria-hidden="true">
281+
<svg viewBox="0 0 24 24" focusable="false">
282+
<path
283+
fill="currentColor"
284+
d="M3 5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25v13.5A2.25 2.25 0 0 1 18.75 21H5.25A2.25 2.25 0 0 1 3 18.75V5.25Zm2.06.39 6.43 5.36a.75.75 0 0 0 .96 0l6.43-5.36a.75.75 0 0 0-.48-.14H5.54a.75.75 0 0 0-.48.14Zm14.44 1.32-5.57 4.64a2.25 2.25 0 0 1-2.88 0L5.5 6.96v11.79c0 .41.34.75.75.75h12.5c.41 0 .75-.34.75-.75V6.96Z"
285+
/>
286+
</svg>
287+
</span>
288+
<span>contact@rssnext.org</span>
289+
</a>
290+
</div>
215291
</div>
216292
</footer>
217293
</body>

‎styles.css‎

Lines changed: 211 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
--folo-soft: rgba(86, 120, 200, 0.24);
1212
--rsshub: #d46f2b;
1313
--rsshub-soft: rgba(212, 111, 43, 0.24);
14+
--rss3: #2f8f83;
1415
--max-width: 1240px;
1516
--radius: 32px;
1617
--section-gap: clamp(5rem, 12vw, 10rem);
@@ -484,6 +485,10 @@ h3 {
484485
max-width: 11ch;
485486
}
486487

488+
.chapter-token {
489+
color: var(--rss3);
490+
}
491+
487492
.chapter-copy > p:not(.chapter-lead) {
488493
max-width: 33rem;
489494
color: var(--muted);
@@ -571,16 +576,28 @@ h3 {
571576
linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(212, 111, 43, 0.1));
572577
}
573578

579+
.chapter-art--rss3 {
580+
background:
581+
radial-gradient(circle at 22% 16%, rgba(47, 143, 131, 0.3), transparent 24%),
582+
radial-gradient(circle at 76% 76%, rgba(47, 143, 131, 0.18), transparent 30%),
583+
linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(47, 143, 131, 0.1));
584+
}
585+
574586
.folo-stage,
575-
.rsshub-stage {
587+
.rsshub-stage,
588+
.rss3-stage {
576589
position: absolute;
577590
inset: 0;
578591
}
579592

580593
.folo-rail,
581594
.folo-card,
582595
.rsshub-route,
583-
.rsshub-node {
596+
.rsshub-node,
597+
.rss3-beam,
598+
.rss3-panel,
599+
.rss3-orbit,
600+
.rss3-node {
584601
position: absolute;
585602
}
586603

@@ -742,6 +759,136 @@ h3 {
742759
right: 34%;
743760
}
744761

762+
.chapter--rss3 .chapter-copy h2 {
763+
max-width: 12ch;
764+
}
765+
766+
.rss3-beam {
767+
height: 1px;
768+
border-radius: 999px;
769+
background: linear-gradient(
770+
90deg,
771+
rgba(47, 143, 131, 0.12),
772+
rgba(47, 143, 131, 0.55),
773+
rgba(47, 143, 131, 0.12)
774+
);
775+
}
776+
777+
.rss3-beam--one {
778+
top: 33%;
779+
left: 16%;
780+
width: 58%;
781+
transform: rotate(-12deg);
782+
}
783+
784+
.rss3-beam--two {
785+
right: 14%;
786+
bottom: 27%;
787+
width: 54%;
788+
transform: rotate(11deg);
789+
}
790+
791+
.rss3-panel {
792+
width: clamp(8.8rem, 19vw, 12.4rem);
793+
border-radius: 1.5rem;
794+
border: 1px solid rgba(255, 255, 255, 0.8);
795+
background: rgba(255, 255, 255, 0.8);
796+
box-shadow:
797+
inset 0 1px 0 rgba(255, 255, 255, 0.88),
798+
0 20px 40px rgba(47, 143, 131, 0.16);
799+
}
800+
801+
.rss3-panel::before,
802+
.rss3-panel::after {
803+
content: "";
804+
position: absolute;
805+
left: 16%;
806+
right: 16%;
807+
border-radius: 999px;
808+
}
809+
810+
.rss3-panel::before {
811+
top: 20%;
812+
height: 0.7rem;
813+
background: rgba(47, 143, 131, 0.14);
814+
}
815+
816+
.rss3-panel::after {
817+
top: 38%;
818+
height: 0.42rem;
819+
background: rgba(47, 143, 131, 0.28);
820+
box-shadow: 0 1rem 0 rgba(47, 143, 131, 0.16);
821+
}
822+
823+
.rss3-panel--one {
824+
top: 14%;
825+
left: 13%;
826+
height: 11rem;
827+
transform: rotate(-7deg);
828+
}
829+
830+
.rss3-panel--two {
831+
top: 33%;
832+
right: 18%;
833+
height: 9.6rem;
834+
transform: rotate(8deg);
835+
}
836+
837+
.rss3-panel--three {
838+
bottom: 12%;
839+
left: 24%;
840+
height: 10.4rem;
841+
transform: rotate(-4deg);
842+
}
843+
844+
.rss3-orbit {
845+
border: 1px solid rgba(47, 143, 131, 0.18);
846+
border-radius: 50%;
847+
}
848+
849+
.rss3-orbit--one {
850+
top: 7%;
851+
right: 12%;
852+
width: 15rem;
853+
height: 15rem;
854+
}
855+
856+
.rss3-orbit--two {
857+
bottom: 5%;
858+
left: 9%;
859+
width: 18rem;
860+
height: 12rem;
861+
transform: rotate(-12deg);
862+
}
863+
864+
.rss3-node {
865+
width: 0.95rem;
866+
aspect-ratio: 1;
867+
border-radius: 999px;
868+
background: #f7fffd;
869+
box-shadow: 0 0 0 10px rgba(47, 143, 131, 0.14);
870+
}
871+
872+
.rss3-node--one {
873+
top: 23%;
874+
left: 44%;
875+
}
876+
877+
.rss3-node--two {
878+
top: 42%;
879+
right: 25%;
880+
}
881+
882+
.rss3-node--three {
883+
bottom: 26%;
884+
left: 20%;
885+
}
886+
887+
.rss3-node--four {
888+
right: 20%;
889+
bottom: 18%;
890+
}
891+
745892
.chapter-caption {
746893
position: absolute;
747894
left: 1.2rem;
@@ -797,13 +944,71 @@ h3 {
797944
display: flex;
798945
align-items: center;
799946
justify-content: space-between;
947+
flex-wrap: wrap;
800948
gap: 1rem;
801949
padding-top: 1.2rem;
802950
border-top: 1px solid var(--line);
803951
color: var(--muted);
804952
font-size: 0.95rem;
805953
}
806954

955+
.footer-copy {
956+
display: grid;
957+
gap: 0.2rem;
958+
}
959+
960+
.footer-copy p:first-child {
961+
color: var(--text);
962+
font-weight: 700;
963+
}
964+
965+
.footer-socials {
966+
display: flex;
967+
flex-wrap: wrap;
968+
justify-content: flex-end;
969+
gap: 0.75rem;
970+
}
971+
972+
.social-link {
973+
display: inline-flex;
974+
align-items: center;
975+
gap: 0.65rem;
976+
min-height: 2.8rem;
977+
padding: 0 1rem;
978+
border-radius: 999px;
979+
border: 1px solid rgba(20, 17, 15, 0.1);
980+
background: rgba(255, 255, 255, 0.48);
981+
color: var(--text);
982+
transition:
983+
transform 180ms ease,
984+
background-color 180ms ease,
985+
border-color 180ms ease;
986+
}
987+
988+
.social-link:hover,
989+
.social-link:focus-visible {
990+
transform: translateY(-1px);
991+
background: rgba(255, 255, 255, 0.74);
992+
border-color: rgba(20, 17, 15, 0.14);
993+
}
994+
995+
.social-link:focus-visible {
996+
outline: 2px solid rgba(20, 17, 15, 0.26);
997+
outline-offset: 4px;
998+
}
999+
1000+
.social-link__icon {
1001+
display: inline-flex;
1002+
width: 1rem;
1003+
height: 1rem;
1004+
color: var(--muted);
1005+
}
1006+
1007+
.social-link__icon svg {
1008+
width: 100%;
1009+
height: 100%;
1010+
}
1011+
8071012
[data-reveal] {
8081013
opacity: 0;
8091014
transform: translateY(2rem);
@@ -856,6 +1061,10 @@ h3 {
8561061
.link-copy {
8571062
text-align: left;
8581063
}
1064+
1065+
.footer-socials {
1066+
justify-content: flex-start;
1067+
}
8591068
}
8601069

8611070
@media (max-width: 820px) {

0 commit comments

Comments
 (0)