Skip to content

25 add labels to the orbiter #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
openscript merged 4 commits into from
Oct 30, 2025
Merged

25 add labels to the orbiter #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec8a92b
feat: add hover labels to orbit items in Orbiter component
yixuanwu4 Sep 2, 2025
276d27c
feat: add changeset
yixuanwu4 Sep 2, 2025
2a4bcfb
fix: update tooltip text color to use CSS variable
yixuanwu4 Sep 2, 2025
ebbc3b3
chore: enhance orbiter labels
openscript Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/small-rabbits-write.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"website": patch
---

Add labels to orbiter
39 changes: 32 additions & 7 deletions src/components/Orbiter.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,22 @@

@keyframes hide {
0% {
z-index: -1;
opacity: 0;
}

24.9% {
z-index: -1;
opacity: 0;
}
25% {
z-index: 0;
opacity: 1;
}
75% {
z-index: 0;
opacity: 1;
}
75.1% {
z-index: -1;
opacity: 0;
}
100% {
z-index: -1;
opacity: 0;
}
}

Expand Down Expand Up @@ -120,6 +119,32 @@
revolve var(--speed) linear infinite,
hide var(--speed) linear infinite;
animation-delay: calc(var(--speed) * -1 * (var(--sibling-index) - 1) / var(--sibling-count));
position: relative;
}

:global(.orbit):hover > :global(*) {
animation-play-state: paused;
}

:global(.orbit) > :global(*)::after {
content: attr(data-label);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 0.9rem;
color: var(--color-white);
background: rgba(0, 0, 0, 0.6);
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}

:global(.orbit) > :global(*):hover::after {
opacity: 1;
}

@container (width > 40rem) {
Expand Down
31 changes: 22 additions & 9 deletions src/pages/[...locale]/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,17 @@ const messages = useI18n("src/pages/[...locale]/index.astro", {
connectOldContent: "Don't hesitate to email or call us!",
connectModernTitle: "How we do it today",
connectModernContent: "Have a look at our social media:",
orbiterEducation: "Education",
orbiterLearningMaterials: "Learning Materials",
orbiterELearning: "eLearning",
orbiterLMS: "Learning Management System",
orbiterAssistedLearning: "Assisted Learning",
orbiterCollaboration: "Collaboration",
orbiterCreateContentQuickly: "Quickly create learning content",
orbiterEnlightening: "Enlightening",
orbiterTeaching: "Teaching",
orbiterIterativeEnhancement: "Iterative enhancement",
orbiterGamification: "Gamification",
});

const {
Expand Down Expand Up @@ -62,15 +73,17 @@ const products = i18nProps(collection, {
<Image slot="host" alt="Our logo as the orbiters host" src={LogoSquare} />
<Fragment slot="orbits">
<div class="orbit">
<div>🎓</div>
<div>📚</div>
<div>💻</div>
<div>☁️</div>
<div>🧠</div>
<div>💬</div>
<div>🚀</div>
<div>💡</div>
<div>🧑‍🏫</div>
<div data-label={messages.orbiterEducation}>🎓</div>
<div data-label={messages.orbiterLearningMaterials}>📚</div>
<div data-label={messages.orbiterELearning}>💻</div>
<div data-label={messages.orbiterLMS}>☁️</div>
<div data-label={messages.orbiterAssistedLearning}>🧠</div>
<div data-label={messages.orbiterCollaboration}>💬</div>
<div data-label={messages.orbiterCreateContentQuickly}>🚀</div>
<div data-label={messages.orbiterEnlightening}>💡</div>
<div data-label={messages.orbiterTeaching}>🧑‍🏫</div>
<div data-label={messages.orbiterIterativeEnhancement}>🔁</div>
<div data-label={messages.orbiterGamification}>🎮</div>
</div>
<div class="orbit">
<Image alt="Logo of Moodle" src={MoodleLogo} />
Expand Down
13 changes: 12 additions & 1 deletion src/translations/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,18 @@
"connectOldTitle": "Wie in alten Zeiten",
"connectOldContent": "Zögern Sie nicht, uns eine E-Mail zu schreiben oder anzurufen!",
"connectModernTitle": "So wie wir es heute machen",
"connectModernContent": "Schauen Sie doch auf unseren Social-Media-Kanälen vorbei:"
"connectModernContent": "Schauen Sie doch auf unseren Social-Media-Kanälen vorbei:",
"orbiterEducation": "Bildung",
"orbiterLearningMaterials": "Lernmaterialien",
"orbiterELearning": "E-Learning",
"orbiterLMS": "LMS",
"orbiterAssistedLearning": "Unterstütztes Lernen",
"orbiterCollaboration": "Zusammenarbeit",
"orbiterCreateContentQuickly": "Schnell Lerninhalte erstellen",
"orbiterEnlightening": "Erleuchtend",
"orbiterTeaching": "Unterrichten",
"orbiterIterativeEnhancement": "Iterative Verbesserung",
"orbiterGamification": "Gamifizierung"
},
"pages/[...locale]/[products]/index.astro": {
"title": "Produkte",
Expand Down