inkletblot/inkletblot-com-v2
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/nav-theme' into 'develop'

Browse Source 
Feature/nav theme

See merge request inkletblot/inkletblot-com-v2!13
This commit is contained in:
Solomon Laing 2021-06-15 10:46:27 +00:00
commit 1e24dc45dd
13 changed files with 120 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/app.component.html
View File

@ -1,10 +1,8 @@
<div class="centre-content">
<app-nav></app-nav>
<div class="page-fixed-width">
<app-nav></app-nav>
<div class="page-fixed">
<div class="no-scroll-bar">
<app-header></app-header>
<div class="content no-scroll-bar">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
<app-footer></app-footer>

31
src/app/app.component.scss
View File

@ -1,50 +1,33 @@
@use 'src/app/shared/styles/_variables.color' as colors;
:host {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
justify-content: center;
align-items: center;
}
.centre-content {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
}
.page-fixed-width {
.page-fixed {
width: 1000px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow-y: auto;
background-color: colors.$inklets-color-grey;
}
.content {
flex-grow: 1;
overflow-y: auto;
}
app-nav {
margin-left: -125px;
}
app-footer {
bottom: 20px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scroll-bar::-webkit-scrollbar {
display: none;
overflow: auto;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scroll-bar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow: auto;
}

2
src/app/app.module.ts
View File

@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@ -27,6 +28,7 @@ import { Page404Component } from './page404/page404.component';
imports: [
SharedModule,
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule
],

6
src/app/home/home.component.scss
View File

@ -19,7 +19,7 @@
.headshot {
width: 200px;
height: 200px;
border: colors.$inklets-color-fg 5px solid;
border: colors.$inklets-color-red-light 5px solid;
border-radius: 100px;
}
@ -27,7 +27,7 @@
margin-left: 30px;
h1 {
border-bottom: colors.$inklets-color-fg 2px dashed;
border-bottom: colors.$inklets-color-red-light 2px dashed;
img {
width: 30px;
@ -50,7 +50,7 @@
color: colors.$inklets-color-white;
}
> a:hover {
color: colors.$inklets-color-fg;
color: colors.$inklets-color-red-light;
}
}
}

4
src/app/links/links.component.scss
View File

@ -28,7 +28,7 @@ a {
margin: 0;
color: colors.$inklets-color-white;
background-color: colors.$inklets-color-black;
border: 2px solid colors.$inklets-color-bg;
border: 2px solid colors.$inklets-color-red-dark;
border-radius: 10px;
> * {
@ -38,5 +38,5 @@ a {
}
a:hover {
border: colors.$inklets-color-fg 2px solid;
border: colors.$inklets-color-red-light 2px solid;
}

6
src/app/nav/nav.component.html
View File

@ -1,6 +1,6 @@
<ul>
<li><a routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
<li><a routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
<li (mouseover)="state[0] = 'bump'" (mouseout)="state[0] = 'norm'"><a [@openClose]="state[0]" routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
<li (mouseover)="state[1] = 'bump'" (mouseout)="state[1] = 'norm'"><a [@openClose]="state[1]" routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
<!-- <li><a routerLink="{{Pages.GALLERY}}" routerLinkActive="activeRoute">{{Pages.GALLERY}}</a></li> -->
<li><a routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
<li (mouseover)="state[2] = 'bump'" (mouseout)="state[2] = 'norm'"><a [@openClose]="state[2]" routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
</ul>

28
src/app/nav/nav.component.scss
View File

@ -8,10 +8,12 @@ ul {
}
li {
display: flex;
align-items: center;
justify-content: center;
margin: 25px;
border-radius: 50px;
width: 100px;
height: 100px;
width: 120px;
height: 120px;
}
li a {
@ -20,24 +22,24 @@ li a {
height: 100px;
line-height: 100px;
color: colors.$inklets-color-white;
background-color: colors.$inklets-color-bg;
background-color: colors.$inklets-color-red-dark;
display: block;
text-align: center;
text-decoration: none;
}
li .activeRoute {
background-color: colors.$inklets-color-fg;
background-color: colors.$inklets-color-red-light;
color: colors.$inklets-color-black;
}
li a:hover {
background-color: colors.$inklets-color-highlight-bg;
color: colors.$inklets-color-white;
}
// li a:hover {
// background-color: colors.$inklets-color-blue-dark;
// color: colors.$inklets-color-white;
// }
li a:hover.activeRoute {
background-color: colors.$inklets-color-highlight-fg;
color: colors.$inklets-color-black;
}
// li a:hover.activeRoute {
// background-color: colors.$inklets-color-blue-light;
// color: colors.$inklets-color-black;
// }

72
src/app/nav/nav.component.ts
View File

@ -1,18 +1,80 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { Pages } from '../shared/models/pages.model';
import { NavService } from './nav.service';
@Component({
selector: 'app-nav',
animations: [
trigger('openClose', [
state(
'bump',
style({
width: '110px',
height: '110px',
'line-height': '110px',
'border-radius': '55px'
})
),
state(
'norm',
style({
width: '100px',
height: '100px',
'line-height': '100px',
'border-radius': '50px'
})
),
transition('norm => bump', [
animate(
'0.2s', keyframes([
style({
width: '100px',
height: '100px',
'line-height': '100px',
'border-radius': '50px'
}),
style({
width: '120px',
height: '120px',
'line-height': '120px',
'border-radius': '60px'
}),
style({
width: '110px',
height: '110px',
'line-height': '110px',
'border-radius': '55px'
})
])
)
]),
transition('bump => norm', [
animate(
'0.1s', keyframes([
style({
width: '110px',
height: '110px',
'line-height': '110px',
'border-radius': '55px'
}),
style({
width: '100px',
height: '100px',
'line-height': '100px',
'border-radius': '50px'
})
])
)
])
])
],
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
Pages = Pages;
state: string[] = ['norm', 'norm', 'norm'];
constructor() { }

4
src/app/projects/project-card/project-card.component.scss
View File

@ -8,14 +8,14 @@
a {
color: colors.$inklets-color-white;
background-color: colors.$inklets-color-black;
border: 2px solid colors.$inklets-color-bg;
border: 2px solid colors.$inklets-color-red-dark;
text-decoration: none;
padding: 15px 20px 15px 20px;
border-radius: 10px;
}
a:hover {
border: 2px solid colors.$inklets-color-fg;
border: 2px solid colors.$inklets-color-red-light;
}
.right {

1
src/app/projects/project/project.component.html
View File

@ -1,2 +1,3 @@
<a routerLink="..">&lt; back</a>
<span [innerHTML]="project.content"></span>
<a routerLink="..">&lt; back</a>

2
src/app/projects/projects.component.scss
View File

@ -8,6 +8,6 @@
padding: 0 20px 0 20px;
h2 {
border-bottom: colors.$inklets-color-fg 2px dashed;
border-bottom: colors.$inklets-color-red-light 2px dashed;
}
}

8
src/app/shared/styles/_variables.color.scss
View File

@ -14,8 +14,8 @@
$inklets-color-black: #0e0906;
$inklets-color-grey: #191511;
$inklets-color-white: #f4efea;
$inklets-color-highlight-bg: #181846;
$inklets-color-highlight-fg:#6a9ccc;
$inklets-color-bg:#6d1d00;
$inklets-color-fg:#e6906c;
$inklets-color-red-dark:#6d1d00;
$inklets-color-red-light:#e6906c;
$inklets-color-blue-dark: #181846;
$inklets-color-blue-light:#6a9ccc;
$inklets-color-text-highlight: #f5d870;

2
src/styles.scss
View File

@ -99,7 +99,7 @@ span.linenos.special { color: #979797; background-color: #ffffc0; padding-left:
}
* a:hover {
color: colors.$inklets-color-highlight-fg;
color: colors.$inklets-color-blue-light;
}
* img {