Fixed anchorpoint and tiny-ing of navbar
This commit is contained in:
Peter
parent
8b76a729b8
commit
ca96b36246
|
|
@ -98,5 +98,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<ng-container>
|
||||
<header id="top">
|
||||
<nav id="nav">
|
||||
<nav id="nav" [ngClass]="active">
|
||||
<div class="container">
|
||||
<div id="mobile_nav">
|
||||
<div id="menu_toggle">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<li><a [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li><a [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li><a
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li class="nav_li"><a class="nav_link2"
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -134,11 +134,11 @@
|
|||
<ng-container *ngIf="current_page === 'home'">
|
||||
<div class="title">
|
||||
<h1 style="display: none;">{{ title }}</h1>
|
||||
<img id="headerimg" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
|
||||
<img id="header-img" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
|
||||
width="550">
|
||||
<h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ ALTITUDE_VERSION }}!</h2>
|
||||
</div>
|
||||
<a id="scrollbutton" href="#scrollingpoint">
|
||||
<a id="scroll-button" (click)="scrollToSection()">
|
||||
<span></span>
|
||||
<p style="display: none;">Scroll Down</p>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
header {
|
||||
background: url("/public/img/backgrounds/120spawn-min.png") no-repeat fixed center 0;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
|
@ -12,12 +14,19 @@ header .container {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#header-img {
|
||||
width: 45%;
|
||||
max-width: 550px;
|
||||
padding-bottom: 15px;
|
||||
margin-top: -120px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
z-index: 3;
|
||||
transition: height 0.3s, 0.5s background ease;
|
||||
transition: height 0.3s, background 0.5s ease;
|
||||
}
|
||||
|
||||
#nav.active {
|
||||
|
|
@ -251,6 +260,105 @@ nav img {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#scroll-button {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
color: #fff;
|
||||
transition: opacity .3s;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#scroll-button:hover {
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#scroll-button span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-left: -23px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#scroll-button span::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -12px 0 0 -8px;
|
||||
border-left: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#scroll-button span::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
-webkit-animation: sdb03 3s infinite;
|
||||
animation: sdb03 3s infinite;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sdb03 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sdb03 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.dropdown2{
|
||||
top: 12px;
|
||||
|
|
@ -263,6 +371,12 @@ nav img {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
#scroll-button {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1150px) {
|
||||
.dropdown {
|
||||
top: -10px;
|
||||
|
|
@ -337,8 +451,3 @@ nav img {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background-size: cover;
|
||||
background: url("/public/img/backgrounds/120spawn-min.png") no-repeat fixed center 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Component, HostListener, Input} from '@angular/core';
|
||||
import {ALTITUDE_VERSION} from '../constant';
|
||||
|
||||
@Component({
|
||||
|
|
@ -12,6 +12,28 @@ export class HeaderComponent {
|
|||
@Input() sub_title: string = '';
|
||||
@Input() current_page: string = ''
|
||||
|
||||
public active: string = ''
|
||||
|
||||
@HostListener('window:scroll', [])
|
||||
onWindowScroll(): void {
|
||||
const scrollPosition = window.scrollY;
|
||||
if (scrollPosition > 0) {
|
||||
this.active = 'active';
|
||||
} else {
|
||||
this.active = '';
|
||||
}
|
||||
}
|
||||
|
||||
scrollToSection(): void {
|
||||
const element = document.getElementById('scrollingpoint');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
} else {
|
||||
console.error('Element with id "scrollingpoint" not found.');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public getCurrentPageId(options: string[]) {
|
||||
if (options.includes(this.current_page)) {
|
||||
return 'current_page'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
#section1 {
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/town2.jpg");
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/town2.jpg");
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/town2.jpg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#section2 {
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/windmill.png");
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/windmill.png");
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/windmill.png");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="start()">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,15 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
:root{
|
||||
--white: #FFFFFF;
|
||||
--black: #282828;
|
||||
--pureblack: #000000;
|
||||
--grey: #A3A3A3;
|
||||
--link: #1f9bde;
|
||||
--linkhover: #00d9ff;
|
||||
--navlink: #4b4b4b;
|
||||
--switch: #FBFBFE;
|
||||
--error: #c23c3c;
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
--color-primary: #FBFBFE;
|
||||
--color-secondary: #FBFBFE;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user