diff --git a/.changeset/small-rabbits-write.md b/.changeset/small-rabbits-write.md new file mode 100644 index 0000000..21e2b91 --- /dev/null +++ b/.changeset/small-rabbits-write.md @@ -0,0 +1,5 @@ +--- +"website": patch +--- + +Add labels to orbiter diff --git a/src/components/Orbiter.astro b/src/components/Orbiter.astro index a2da599..d79a1c4 100644 --- a/src/components/Orbiter.astro +++ b/src/components/Orbiter.astro @@ -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; } } @@ -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) { diff --git a/src/pages/[...locale]/index.astro b/src/pages/[...locale]/index.astro index e9f0374..2a5faa4 100644 --- a/src/pages/[...locale]/index.astro +++ b/src/pages/[...locale]/index.astro @@ -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 { @@ -62,15 +73,17 @@ const products = i18nProps(collection, { Our logo as the orbiters host
-
🎓
-
📚
-
💻
-
☁️
-
🧠
-
💬
-
🚀
-
💡
-
🧑‍🏫
+
🎓
+
📚
+
💻
+
☁️
+
🧠
+
💬
+
🚀
+
💡
+
🧑‍🏫
+
🔁
+
🎮
Logo of Moodle diff --git a/src/translations/de.json b/src/translations/de.json index 63a3098..023f7f2 100644 --- a/src/translations/de.json +++ b/src/translations/de.json @@ -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",