Removable footer, compact styling for particle creator

This commit is contained in:
2025-12-27 21:04:55 +01:00
parent d1ff7b3f88
commit d9b60d8a94
13 changed files with 175 additions and 195 deletions
@@ -1,44 +1,49 @@
<footer>
<div class="footer">
<div class="footerInner">
<div class="footerText">
<h2>ABOUT US</h2>
<p>Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
to call "home". We are your place to get together with friends and play survival, with a few extra features
suggested by our community!</p>
<div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">
<a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
<img priority ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
</a>
<a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">
<img ngSrc="/public/img/logos/twitter.png" alt="Twitter Button" height="32" width="32">
</a>
<a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">
<img ngSrc="/public/img/logos/instagram.png" alt="Instagram Button" height="32" width="32">
</a>
@if (hideFooter()) {
} @else {
<footer>
<div class="footer">
<div class="footerInner">
<div class="footerText">
<h2>ABOUT US</h2>
<p>Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you
come
to call "home". We are your place to get together with friends and play survival, with a few extra features
suggested by our community!</p>
<div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">
<a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
<img priority ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
</a>
<a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">
<img ngSrc="/public/img/logos/twitter.png" alt="Twitter Button" height="32" width="32">
</a>
<a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">
<img ngSrc="/public/img/logos/instagram.png" alt="Instagram Button" height="32" width="32">
</a>
</div>
</div>
<div class="footerNav">
<h2>COMMUNITY</h2>
<ul>
<li><a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
<li><a target="_blank" rel="noopener" href="https://alttd.com/blog">Blog</a></li>
<li><a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">Twitter</a></li>
<li><a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">Instagram</a></li>
<li><a target="_blank" rel="noopener" href="https://reddit.com/r/alttd">Reddit</a></li>
</ul>
</div>
<div class="footerNav">
<h2>SERVER</h2>
<ul>
<li><a [routerLink]="['/about']">About Us</a></li>
<li><a [routerLink]="['/team']">Staffing Team</a></li>
<li><a [routerLink]="['/privacy']">Privacy Policy</a></li>
<li><a [routerLink]="['/terms']">Terms of Use</a></li>
</ul>
</div>
</div>
<div class="footerNav">
<h2>COMMUNITY</h2>
<ul>
<li><a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
<li><a target="_blank" rel="noopener" href="https://alttd.com/blog">Blog</a></li>
<li><a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">Twitter</a></li>
<li><a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">Instagram</a></li>
<li><a target="_blank" rel="noopener" href="https://reddit.com/r/alttd">Reddit</a></li>
</ul>
</div>
<div class="footerNav">
<h2>SERVER</h2>
<ul>
<li><a [routerLink]="['/about']">About Us</a></li>
<li><a [routerLink]="['/team']">Staffing Team</a></li>
<li><a [routerLink]="['/privacy']">Privacy Policy</a></li>
<li><a [routerLink]="['/terms']">Terms of Use</a></li>
</ul>
</div>
<p class="copyright">Copyright © 2015-{{ getCurrentYear() }} Altitude. All rights Reserved. Not affiliated with
Mojang AB or Microsoft.</p>
</div>
<p class="copyright">Copyright © 2015-{{ getCurrentYear() }} Altitude. All rights Reserved. Not affiliated with
Mojang AB or Microsoft.</p>
</div>
</footer>
</footer>
}
@@ -1,19 +1,21 @@
import {Component} from '@angular/core';
import {Component, computed, inject} from '@angular/core';
import {ALTITUDE_VERSION} from '@custom-types/constant';
import { NgOptimizedImage } from '@angular/common';
import {FooterService} from '@services/footer.service';
import {RouterLink} from '@angular/router';
@Component({
selector: 'app-footer',
standalone: true,
imports: [
RouterLink,
NgOptimizedImage
],
RouterLink
],
templateUrl: './footer.component.html',
styleUrl: './footer.component.scss'
})
export class FooterComponent {
private readonly footerService: FooterService = inject(FooterService);
hideFooter = computed(() => (this.footerService.hideFooter()));
public getCurrentYear() {
return new Date().getFullYear();
}