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

completed first re-theme, colors are red and brown/grey now also layout is drasitaclly changed

Browse Source
This commit is contained in:
Solomon Laing 2021-06-13 15:36:11 +09:30
parent 0bbe8e4627
commit 979481b39c
13 changed files with 84 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -4,18 +4,25 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
overflow-y: auto; overflow-y: auto;
justify-content: center;
align-items: center;
}
.centre-content {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} }
.page-fixed-width { .page-fixed-width {
width: 1000px; width: 1000px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1;
overflow-y: auto; overflow-y: auto;
border-left: colors.$inklets-color-fg 2px dashed; background-color: colors.$inklets-color-grey;
border-right: colors.$inklets-color-fg 2px dashed;
} }
.content { .content {
@ -23,6 +30,14 @@
overflow-y: auto; overflow-y: auto;
} }
app-nav {
margin-left: -125px;
}
app-footer {
bottom: 20px;
}
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
.no-scroll-bar::-webkit-scrollbar { .no-scroll-bar::-webkit-scrollbar {
display: none; display: none;

3
src/app/header/header.component.scss
View File

@ -1,6 +1,5 @@
@use 'src/app/shared/styles/_variables.color' as colors; @use 'src/app/shared/styles/_variables.color' as colors;
:host { :host {
padding: 0 40px 0 40px; padding: 0 20px 0 20px;
margin: 10px 0 10px 0;
} }

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

@ -6,7 +6,6 @@
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
margin: 0 140px 10px 140px;
} }
.bio { .bio {

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

@ -2,7 +2,6 @@
:host { :host {
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
margin: 0 140px 10px 140px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
@ -10,6 +9,7 @@
// padding 20, total width 1000, width 700 so 280/2 = margin left and right of 140 // padding 20, total width 1000, width 700 so 280/2 = margin left and right of 140
.card-wrapper { .card-wrapper {
padding-top: 20px;
display: grid; display: grid;
grid-template-columns: auto auto auto auto; grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
@ -20,15 +20,16 @@
} }
a { a {
color: colors.$inklets-color-white;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
margin: 0; margin: 0;
border: colors.$inklets-color-highlight-bg 2px dashed; color: colors.$inklets-color-white;
background-color: colors.$inklets-color-fg; background-color: colors.$inklets-color-black;
border: 2px solid colors.$inklets-color-bg;
border-radius: 10px;
> * { > * {
margin: 10px; margin: 10px;
@ -37,6 +38,5 @@ a {
} }
a:hover { a:hover {
background-color: colors.$inklets-color-highlight-fg; border: colors.$inklets-color-fg 2px solid;
color: colors.$inklets-color-black;
} }

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

@ -1,10 +1,5 @@
@use 'src/app/shared/styles/_variables.color'as colors; @use 'src/app/shared/styles/_variables.color'as colors;
:host {
padding: 0 90px 0 90px;
margin: 10px 0 60px 0;
}
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -13,23 +8,36 @@ ul {
} }
li { li {
float: left; margin: 25px;
background-color: colors.$inklets-color-fg; border-radius: 50px;
width: 100px;
height: 100px;
} }
li a { li a {
border-radius: 50px;
width: 100px;
height: 100px;
line-height: 100px;
color: colors.$inklets-color-white; color: colors.$inklets-color-white;
background-color: colors.$inklets-color-bg;
display: block; display: block;
text-align: center; text-align: center;
padding: 14px 16px;
text-decoration: none; text-decoration: none;
} }
.activeRoute { li .activeRoute {
background-color: colors.$inklets-color-highlight-bg; background-color: colors.$inklets-color-fg;
color: colors.$inklets-color-black;
} }
li a:hover { li a:hover {
background-color: colors.$inklets-color-highlight-bg;
color: colors.$inklets-color-white;
}
li a:hover.activeRoute {
background-color: colors.$inklets-color-highlight-fg; background-color: colors.$inklets-color-highlight-fg;
color: colors.$inklets-color-black; color: colors.$inklets-color-black;
} }

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

@ -1,3 +1,4 @@
<a routerLink="{{project.slug}}"> <a routerLink="{{project.slug}}">
{{project.title + " - " + project.date}} {{project.title + " - " + project.date}}
<span class="right">{{project.category}}</span>
</a> </a>

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

@ -3,20 +3,22 @@
:host { :host {
flex-direction: column; flex-direction: column;
display: flex; display: flex;
background-color: colors.$inklets-color-bg;
margin-bottom: 20px; margin-bottom: 20px;
a { a {
color: colors.$inklets-color-white; color: colors.$inklets-color-white;
border: colors.$inklets-color-highlight-bg 2px dashed; background-color: colors.$inklets-color-black;
background-color: colors.$inklets-color-fg; border: 2px solid colors.$inklets-color-bg;
text-decoration: none; text-decoration: none;
padding: 5px 20px 5px 20px; padding: 15px 20px 15px 20px;
border-radius: 10px;
} }
a:hover { a:hover {
background-color: colors.$inklets-color-highlight-fg; border: 2px solid colors.$inklets-color-fg;
color: colors.$inklets-color-black;
} }
.right {
float: right;
}
} }

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

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

3
src/app/projects/project/project.component.scss
View File

@ -5,6 +5,5 @@
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
padding: 0 20px 0 20px; padding: 0 40px 0 40px;
margin: 0 140px 10px 140px;
} }

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

@ -6,5 +6,8 @@
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
margin: 0 140px 10px 140px;
h2 {
border-bottom: colors.$inklets-color-fg 2px dashed;
}
} }

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

@ -11,10 +11,11 @@
* e.g. body { background-color: colors.$inklets-color-black; } * e.g. body { background-color: colors.$inklets-color-black; }
*/ */
$inklets-color-black: #0f0f0f; $inklets-color-black: #0e0906;
$inklets-color-white: #fafafa; $inklets-color-grey: #191511;
$inklets-color-bg: #1b262c; $inklets-color-white: #f4efea;
$inklets-color-fg:#0f4c75; $inklets-color-highlight-bg: #181846;
$inklets-color-highlight-bg:#3282b8; $inklets-color-highlight-fg:#6a9ccc;
$inklets-color-highlight-fg:#bbe1fa; $inklets-color-bg:#6d1d00;
$inklets-color-text-highlight: #009fc1; $inklets-color-fg:#e6906c;
$inklets-color-text-highlight: #f5d870;

6
src/styles.scss
View File

@ -8,7 +8,7 @@ html, body {
body { body {
margin: 0; margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif; font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: colors.$inklets-color-black; background-color: colors.$inklets-color-grey;
color: colors.$inklets-color-white; color: colors.$inklets-color-white;
} }
@ -23,7 +23,7 @@ span.linenos { color: inherit; background-color: transparent; padding-left: 5px;
td.linenos .special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } td.linenos .special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc } .codehilite .hll { background-color: #ffffcc }
.codehilite { background: #000000; padding: 5px; } .codehilite { background: colors.$inklets-color-black; padding: 5px; }
.codehilite .c { color: #408080; font-style: italic } /* Comment */ .codehilite .c { color: #408080; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */ .codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */ .codehilite .k { color: #008000; font-weight: bold } /* Keyword */
@ -95,7 +95,7 @@ span.linenos.special { color: #979797; background-color: #ffffc0; padding-left:
* a { * a {
text-decoration: none; text-decoration: none;
color: colors.$inklets-color-fg; color: colors.$inklets-color-text-highlight;
} }
* a:hover { * a:hover {