more faicons system wide

This commit is contained in:
2026-08-04 10:29:40 +02:00
parent 43994d73b0
commit 1a2430b321
10 changed files with 62 additions and 66 deletions
+21 -19
View File
@@ -5,16 +5,17 @@
<!-- Desktop Navigation -->
<nav class="nav-desktop">
<RouterLink to="/" class="nav-link">{{ t('nav.home') }}</RouterLink>
<RouterLink to="/catalog" class="nav-link">{{ t('nav.catalog') }}</RouterLink>
<RouterLink to="/blog" class="nav-link">{{ t('nav.blog') }}</RouterLink>
<RouterLink to="/howtos" class="nav-link">{{ t('nav.howtos') }}</RouterLink>
<RouterLink to="/code" class="nav-link">{{ t('nav.code') }}</RouterLink>
<RouterLink to="/team" class="nav-link">{{ t('nav.team') }}</RouterLink>
<RouterLink to="/contact" class="nav-link">{{ t('nav.contact') }}</RouterLink>
<a v-if="isAdmin" href="/admin" class="nav-link-admin">Admin</a>
<RouterLink to="/" class="nav-link"><i class="fa-solid fa-house nav-icon"></i>{{ t('nav.home') }}</RouterLink>
<RouterLink to="/catalog" class="nav-link"><i class="fa-solid fa-gamepad nav-icon"></i>{{ t('nav.catalog') }}</RouterLink>
<RouterLink to="/blog" class="nav-link"><i class="fa-solid fa-newspaper nav-icon"></i>{{ t('nav.blog') }}</RouterLink>
<RouterLink to="/howtos" class="nav-link"><i class="fa-solid fa-lightbulb nav-icon"></i>{{ t('nav.howtos') }}</RouterLink>
<RouterLink to="/code" class="nav-link"><i class="fa-solid fa-code nav-icon"></i>{{ t('nav.code') }}</RouterLink>
<RouterLink to="/team" class="nav-link"><i class="fa-solid fa-users nav-icon"></i>{{ t('nav.team') }}</RouterLink>
<RouterLink to="/contact" class="nav-link"><i class="fa-solid fa-envelope nav-icon"></i>{{ t('nav.contact') }}</RouterLink>
<a v-if="isAdmin" href="/admin" class="nav-link-admin"><i class="fa-solid fa-wrench nav-icon"></i>Admin</a>
<div class="locale-switcher">
<i class="fa-solid fa-globe text-gray-500 text-xs"></i>
<button :class="locale === 'en' ? 'text-white' : 'text-gray-400 hover:text-white'" class="locale-btn" @click="switchLocale('en')">EN</button>
<span class="locale-separator">|</span>
<button :class="locale === 'hu' ? 'text-white' : 'text-gray-400 hover:text-white'" class="locale-btn" @click="switchLocale('hu')">HU</button>
@@ -23,21 +24,19 @@
<!-- Hamburger Button (Mobile only) -->
<button class="hamburger-btn" @click="toggleMenu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<i class="fa-solid fa-bars text-xl"></i>
</button>
<!-- Mobile Navigation -->
<nav v-show="menuOpen" class="nav-mobile">
<RouterLink to="/" class="nav-mobile-link">{{ t('nav.home') }}</RouterLink>
<RouterLink to="/catalog" class="nav-mobile-link">{{ t('nav.catalog') }}</RouterLink>
<RouterLink to="/blog" class="nav-mobile-link">{{ t('nav.blog') }}</RouterLink>
<RouterLink to="/howtos" class="nav-mobile-link">{{ t('nav.howtos') }}</RouterLink>
<RouterLink to="/code" class="nav-mobile-link">{{ t('nav.code') }}</RouterLink>
<RouterLink to="/team" class="nav-mobile-link">{{ t('nav.team') }}</RouterLink>
<RouterLink to="/contact" class="nav-mobile-link">{{ t('nav.contact') }}</RouterLink>
<a v-if="isAdmin" href="/admin" class="nav-mobile-link"><i class="fa-solid fa-wrench"></i> Admin</a>
<RouterLink to="/" class="nav-mobile-link"><i class="fa-solid fa-house nav-icon"></i>{{ t('nav.home') }}</RouterLink>
<RouterLink to="/catalog" class="nav-mobile-link"><i class="fa-solid fa-gamepad nav-icon"></i>{{ t('nav.catalog') }}</RouterLink>
<RouterLink to="/blog" class="nav-mobile-link"><i class="fa-solid fa-newspaper nav-icon"></i>{{ t('nav.blog') }}</RouterLink>
<RouterLink to="/howtos" class="nav-mobile-link"><i class="fa-solid fa-lightbulb nav-icon"></i>{{ t('nav.howtos') }}</RouterLink>
<RouterLink to="/code" class="nav-mobile-link"><i class="fa-solid fa-code nav-icon"></i>{{ t('nav.code') }}</RouterLink>
<RouterLink to="/team" class="nav-mobile-link"><i class="fa-solid fa-users nav-icon"></i>{{ t('nav.team') }}</RouterLink>
<RouterLink to="/contact" class="nav-mobile-link"><i class="fa-solid fa-envelope nav-icon"></i>{{ t('nav.contact') }}</RouterLink>
<a v-if="isAdmin" href="/admin" class="nav-mobile-link"><i class="fa-solid fa-wrench nav-icon"></i>Admin</a>
<div class="locale-switcher-mobile">
<button :class="locale === 'en' ? 'text-white' : 'text-gray-400'" class="locale-btn-mobile" @click="switchLocale('en')">EN</button>
<span class="locale-separator">|</span>
@@ -132,6 +131,9 @@ function switchLocale(lang: string) {
.locale-separator {
@apply text-gray-600;
}
.nav-icon {
@apply mr-1.5 text-xs opacity-70;
}
.hamburger-btn {
@apply md:hidden p-2 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md;
}
@@ -42,7 +42,7 @@
<span class="new-post-dot"></span>
{{ t('blog.newPost') }}
</span>
<span>{{ formatDateTime(page.createdAt) }}</span>
<span><i class="fa-solid fa-calendar text-gray-300 mr-1"></i>{{ formatDateTime(page.createdAt) }}</span>
</div>
</div>
</div>
@@ -61,9 +61,7 @@
<div class="mt-6">
<RouterLink :to="getPermalink(page.path)" class="read-more-btn">
{{ t('blog.readMore') }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
<i class="fa-solid fa-arrow-right text-sm ml-1"></i>
</RouterLink>
</div>
</div>
+2 -2
View File
@@ -7,11 +7,11 @@
</div>
<div class="post-hero-container">
<RouterLink to="/blog" class="back-link"> Back to Blog</RouterLink>
<RouterLink to="/blog" class="back-link"><i class="fa-solid fa-arrow-left mr-1"></i> Back to Blog</RouterLink>
<template v-if="pageContent">
<h1 class="hero-title mt-4">{{ pageContent.title }}</h1>
<p class="hero-subtitle mb-4">{{ pageContent.description }}</p>
<div class="blog-post-timestamp text-indigo-200">{{ formatDateTime(pageContent.createdAt) }}</div>
<div class="blog-post-timestamp text-indigo-200"><i class="fa-solid fa-calendar mr-1"></i>{{ formatDateTime(pageContent.createdAt) }}</div>
</template>
</div>
</header>
@@ -46,12 +46,12 @@
:href="getLatestStable(releases)?.htmlFolderPath"
target="_blank"
class="btn-play-sm"
>{{ t('catalog.play') }}</a>
><i class="fa-solid fa-play mr-1.5 text-xs"></i>{{ t('catalog.play') }}</a>
<RouterLink :to="`/catalog/${software.name}`" class="btn-info-sm">
<i class="fa-solid fa-circle-info"></i> {{ t('catalog.moreInfo') }}
</RouterLink>
<span v-if="getTotalDownloads(software.name)" class="software-download-count">
{{ getTotalDownloads(software.name) }} {{ t('catalog.downloads') }}
<i class="fa-solid fa-download text-[10px]"></i> {{ getTotalDownloads(software.name) }} {{ t('catalog.downloads') }}
</span>
</div>
</div>
@@ -4,7 +4,7 @@
<div class="hero-container">
<nav class="mb-8">
<RouterLink to="/catalog" class="catalog-back-link">
{{ t('catalogShow.back') }}
<i class="fa-solid fa-arrow-left"></i> {{ t('catalogShow.back') }}
</RouterLink>
</nav>
@@ -66,7 +66,7 @@
<dt class="catalog-info-label">{{ t('catalogShow.links') }}</dt>
<dd class="flex flex-col gap-1.5">
<a v-for="link in software.externalLinks" :key="link.url" :href="link.url" target="_blank" class="catalog-external-link">
{{ link.label }} <span class="text-xs"></span>
{{ link.label }} <i class="fa-solid fa-up-right-from-square text-xs"></i>
</a>
</dd>
</div>
@@ -88,10 +88,10 @@
<span class="latest-release-badge">{{ t('catalogShow.latestStable') }}</span>
</div>
<h2 class="latest-release-version">{{ latestStable.version }}</h2>
<p class="latest-release-date">{{ t('catalogShow.released') }} {{ formatDateTime(latestStable.UpdatedAt) }}</p>
<p class="latest-release-date"><i class="fa-solid fa-calendar mr-1"></i>{{ t('catalogShow.released') }} {{ formatDateTime(latestStable.UpdatedAt) }}</p>
</div>
<a v-if="latestStable.htmlFolderPath" :href="latestStable.htmlFolderPath" target="_blank" class="latest-release-play-btn">{{ t('catalogShow.playNow') }}</a>
<a v-if="latestStable.htmlFolderPath" :href="latestStable.htmlFolderPath" target="_blank" class="latest-release-play-btn"><i class="fa-solid fa-play mr-2"></i>{{ t('catalogShow.playNow') }}</a>
</div>
<div v-if="tableAssets(latestStable).length" class="latest-release-assets">
@@ -143,7 +143,7 @@
<td class="px-8 py-4">
<div class="release-version-row">
<span class="release-version">{{ release.version }}</span>
<span v-if="release.downloadCount" class="release-download-count"> {{ release.downloadCount }}</span>
<span v-if="release.downloadCount" class="release-download-count"><i class="fa-solid fa-download text-[10px]"></i> {{ release.downloadCount }}</span>
</div>
<a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="release-play-link">{{ t('catalogShow.play') }}</a>
</td>
@@ -10,13 +10,13 @@
@keydown.left="prev"
@keydown.right="next"
>
<button class="lightbox-close-btn" @click="close">&times;</button>
<button class="lightbox-close-btn" @click="close"><i class="fa-solid fa-xmark"></i></button>
<button
v-if="images.length > 1" class="lightbox-nav-btn left-4"
@click="prev"
>
&lsaquo;
<i class="fa-solid fa-chevron-left"></i>
</button>
<img
@@ -29,7 +29,7 @@
v-if="images.length > 1" class="lightbox-nav-btn right-4"
@click="next"
>
&rsaquo;
<i class="fa-solid fa-chevron-right"></i>
</button>
<div v-if="images.length > 1" class="lightbox-counter">
@@ -4,7 +4,7 @@
<h1 class="hero-title">{{ t('code.title') }}</h1>
<p class="hero-subtitle text-teal-50 mb-10">{{ t('code.subtitle') }}</p>
<a href="https://git.teletype.hu" target="_blank" class="btn-hero-teal">
{{ t('code.openGitea') }}
<i class="fa-solid fa-code-branch mr-2"></i>{{ t('code.openGitea') }}
</a>
</div>
</header>
@@ -21,12 +21,12 @@
<div v-for="repo in publicRepos" :key="repo.name" class="card-base">
<h3 class="repo-card-title">
<a :href="repo.html_url" target="_blank" class="repo-link">
{{ repo.owner.login }}/{{ repo.name }}
<i class="fa-solid fa-code-branch mr-1 text-sm opacity-60"></i>{{ repo.owner.login }}/{{ repo.name }}
</a>
</h3>
<p v-if="repo.description" class="repo-card-desc">{{ repo.description }}</p>
<p v-if="repo.language" class="repo-card-meta">{{ t('code.language') }} {{ repo.language }}</p>
<p class="repo-card-meta">{{ t('code.updated') }} {{ formatDateTime(repo.updated_at) }}</p>
<p v-if="repo.language" class="repo-card-meta"><i class="fa-solid fa-circle text-[6px] mr-1 align-middle"></i>{{ t('code.language') }} {{ repo.language }}</p>
<p class="repo-card-meta"><i class="fa-solid fa-clock text-[10px] mr-1 opacity-50"></i>{{ t('code.updated') }} {{ formatDateTime(repo.updated_at) }}</p>
</div>
</div>
@@ -47,7 +47,7 @@
: <span class="text-gray-700">{{ commit.message.split('\n')[0] }}</span>
</p>
<p class="commit-meta">
{{ t('code.authoredBy') }} <span class="font-bold">{{ commit.author.name }}</span> {{ t('code.on') }} {{ formatDateTime(commit.date) }}
<i class="fa-solid fa-user text-[10px] mr-0.5 opacity-50"></i>{{ t('code.authoredBy') }} <span class="font-bold">{{ commit.author.name }}</span> <i class="fa-solid fa-clock text-[10px] mx-0.5 opacity-50"></i>{{ t('code.on') }} {{ formatDateTime(commit.date) }}
<a :href="commit.url" target="_blank" class="commit-sha-link">
<span class="font-mono text-xs">{{ commit.sha.substring(0, 7) }}</span>
</a>
+13 -15
View File
@@ -4,9 +4,7 @@
<h1 class="hero-title mb-6">{{ t('contact.title') }}</h1>
<p class="hero-subtitle mb-10 text-blue-100">{{ t('contact.subtitle') }}</p>
<a :href="DISCORD_INVITE_LINK" target="_blank" class="discord-hero-btn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.862-1.297 1.197-1.99.051-.105.001-.23-.106-.272a13.223 13.223 0 0 1-1.878-.894.077.077 0 0 1-.007-.128c.126-.094.252-.192.372-.29a.074.074 0 0 1 .077-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .077.01c.12.098.246.196.373.29a.077.077 0 0 1-.006.128 12.299 12.299 0 0 1-1.878.894.077.077 0 0 0-.106.272c.335.693.735 1.36 1.197 1.99a.078.078 0 0 0 .084.028 19.83 19.83 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.956-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.956 2.419-2.156 2.419zm7.974 0c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.955-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.946 2.419-2.156 2.419z" />
</svg>
<i class="fa-brands fa-discord text-2xl"></i>
{{ t('contact.joinDiscord') }}
</a>
</div>
@@ -32,15 +30,15 @@
<div class="community-grid-3">
<div class="community-section border-[#5865F2]">
<h3 class="community-section-title text-[#5865F2]">Discord</h3>
<h3 class="community-section-title text-[#5865F2]"><i class="fa-brands fa-discord"></i> Discord</h3>
<p class="community-section-desc">{{ t('contact.discord.desc') }}</p>
<a :href="DISCORD_INVITE_LINK" target="_blank" class="community-link-discord">
{{ t('contact.discord.link') }} <span></span>
{{ t('contact.discord.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
</a>
</div>
<div class="community-section border-green-500">
<h3 class="community-section-title text-green-700">IRC</h3>
<h3 class="community-section-title text-green-700"><i class="fa-solid fa-terminal"></i> IRC</h3>
<p class="community-section-desc">{{ t('contact.irc.desc') }}</p>
<div class="irc-box">
<span class="irc-network">Network: Libera.Chat</span>
@@ -49,7 +47,7 @@
</div>
<div class="community-section border-amber-500">
<h3 class="community-section-title text-amber-700">BBS</h3>
<h3 class="community-section-title text-amber-700"><i class="fa-solid fa-tower-broadcast"></i> BBS</h3>
<p class="community-section-desc">{{ t('contact.bbs.desc') }}</p>
<div class="bbs-box">
<span class="bbs-host">Host: games.teletype.hu</span>
@@ -67,34 +65,34 @@
<div class="social-grid">
<div class="community-section border-red-600">
<h3 class="community-section-title text-red-600">YouTube</h3>
<h3 class="community-section-title text-red-600"><i class="fa-brands fa-youtube"></i> YouTube</h3>
<p class="community-section-desc">{{ t('contact.youtube.desc') }}</p>
<a href="https://www.youtube.com/@teletypegames" target="_blank" class="community-link-youtube">
{{ t('contact.youtube.link') }} <span></span>
{{ t('contact.youtube.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
</a>
</div>
<div class="community-section border-[#1877F2]">
<h3 class="community-section-title text-[#1877F2]">Facebook</h3>
<h3 class="community-section-title text-[#1877F2]"><i class="fa-brands fa-facebook"></i> Facebook</h3>
<p class="community-section-desc">{{ t('contact.facebook.desc') }}</p>
<a href="https://www.facebook.com/teletypegames" target="_blank" class="community-link-facebook">
{{ t('contact.facebook.link') }} <span></span>
{{ t('contact.facebook.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
</a>
</div>
<div class="community-section border-[#0A66C2]">
<h3 class="community-section-title text-[#0A66C2]">LinkedIn</h3>
<h3 class="community-section-title text-[#0A66C2]"><i class="fa-brands fa-linkedin"></i> LinkedIn</h3>
<p class="community-section-desc">{{ t('contact.linkedin.desc') }}</p>
<a href="https://www.linkedin.com/company/teletypegames/" target="_blank" class="community-link-linkedin">
{{ t('contact.linkedin.link') }} <span></span>
{{ t('contact.linkedin.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
</a>
</div>
<div class="community-section border-[#1DB954]">
<h3 class="community-section-title text-[#1DB954]">Spotify</h3>
<h3 class="community-section-title text-[#1DB954]"><i class="fa-brands fa-spotify"></i> Spotify</h3>
<p class="community-section-desc">{{ t('contact.spotify.desc') }}</p>
<a href="https://open.spotify.com/playlist/4T7hMkdiERkkW7HaPXqgfX?si=7cdaa091c3274422" target="_blank" class="community-link-spotify">
{{ t('contact.spotify.link') }} <span></span>
{{ t('contact.spotify.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
</a>
</div>
</div>
+4 -4
View File
@@ -22,7 +22,7 @@
<div class="countdown-card">
<h2 class="countdown-event-name">{{ nextEvent.name }}</h2>
<div class="countdown-timer">{{ countdownText }}</div>
<p class="countdown-date">{{ t('home.startsOn') }} <span class="font-semibold">{{ nextEvent.dateText }}</span></p>
<p class="countdown-date"><i class="fa-solid fa-calendar-days mr-1"></i>{{ t('home.startsOn') }} <span class="font-semibold">{{ nextEvent.dateText }}</span></p>
<div v-if="followingEvents.length > 0" class="upcoming-events-section">
<h3 class="upcoming-events-title">{{ t('home.upcomingEvents') }}</h3>
@@ -57,9 +57,9 @@
:href="highlightedStableRelease.htmlFolderPath"
target="_blank"
class="featured-btn-play"
>{{ t('home.playInBrowser') }}</a>
><i class="fa-solid fa-play mr-2"></i>{{ t('home.playInBrowser') }}</a>
<RouterLink :to="`/catalog/${highlightedSoftware.software.name}`" class="featured-btn-secondary">
{{ t('home.viewProjectDetails') }}
<i class="fa-solid fa-circle-info mr-2"></i>{{ t('home.viewProjectDetails') }}
</RouterLink>
</div>
</div>
@@ -118,7 +118,7 @@
<div class="mt-6">
<a :href="`https://www.youtube.com/watch?v=${ytVideoId}`" target="_blank" class="yt-play-button">
<span class="text-xl"></span> {{ t('home.watchOnYoutube') }}
<i class="fa-brands fa-youtube text-xl text-red-500"></i> {{ t('home.watchOnYoutube') }}
</a>
</div>
</div>
@@ -13,7 +13,7 @@
</h1>
<p class="hero-subtitle mb-10">{{ t('howtos.subtitle') }}</p>
<a :href="WIKI_BASE" target="_blank" class="btn-hero-indigo">
{{ t('howtos.knowledgeBase') }}
<i class="fa-solid fa-book mr-2"></i>{{ t('howtos.knowledgeBase') }}
</a>
</div>
</header>
@@ -47,7 +47,7 @@
<span class="new-dot"></span>
{{ t('howtos.new') }}
</span>
<span>{{ formatDateTime(page.updatedAt) }}</span>
<span><i class="fa-solid fa-calendar text-gray-300 mr-1"></i>{{ formatDateTime(page.updatedAt) }}</span>
</div>
</div>
@@ -57,8 +57,8 @@
<div v-else class="howto-card-no-desc">{{ t('howtos.noDesc') }}</div>
<div class="howto-card-footer">
<span class="howto-card-path">{{ page.path }}</span>
<span class="howto-card-read-link">{{ t('howtos.read') }} <span class="text-lg"></span></span>
<span class="howto-card-path"><i class="fa-solid fa-file-lines mr-1 opacity-50"></i>{{ page.path }}</span>
<span class="howto-card-read-link">{{ t('howtos.read') }} <i class="fa-solid fa-arrow-right text-sm"></i></span>
</div>
</a>
</div>
@@ -66,9 +66,7 @@
<div v-if="!error && recentPages.length > 0" class="howtos-footer">
<a :href="WIKI_BASE" target="_blank" class="browse-wiki-btn">
{{ t('howtos.browseWiki') }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</main>