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

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

@ -1,11 +1,10 @@
<div class="page-fixed-width">
<app-header></app-header>
<div class="centre-content">
<app-nav></app-nav>
<div class="page-fixed-width">
<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>

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

@ -4,18 +4,25 @@
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
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 {
width: 1000px;
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
border-left: colors.$inklets-color-fg 2px dashed;
border-right: colors.$inklets-color-fg 2px dashed;
background-color: colors.$inklets-color-grey;
}
.content {
@ -23,6 +30,14 @@
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;

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

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

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

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

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

@ -2,7 +2,6 @@
:host {
padding: 0 20px 0 20px;
margin: 0 140px 10px 140px;
display: flex;
align-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
.card-wrapper {
padding-top: 20px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
@ -20,15 +20,16 @@
}
a {
color: colors.$inklets-color-white;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
margin: 0;
border: colors.$inklets-color-highlight-bg 2px dashed;
background-color: colors.$inklets-color-fg;
color: colors.$inklets-color-white;
background-color: colors.$inklets-color-black;
border: 2px solid colors.$inklets-color-bg;
border-radius: 10px;
> * {
margin: 10px;
@ -37,6 +38,5 @@ a {
}
a:hover {
background-color: colors.$inklets-color-highlight-fg;
color: colors.$inklets-color-black;
border: colors.$inklets-color-fg 2px solid;
}

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

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

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

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

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

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

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

@ -1,4 +1,4 @@
@use 'src/app/shared/styles/_variables.color' as colors;
@use 'src/app/shared/styles/_variables.color'as colors;
:host {
display: flex;
@ -6,5 +6,8 @@
flex-grow: 1;
overflow-y: auto;
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; }
*/
$inklets-color-black: #0f0f0f;
$inklets-color-white: #fafafa;
$inklets-color-bg: #1b262c;
$inklets-color-fg:#0f4c75;
$inklets-color-highlight-bg:#3282b8;
$inklets-color-highlight-fg:#bbe1fa;
$inklets-color-text-highlight: #009fc1;
$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-text-highlight: #f5d870;

6
src/styles.scss
View File

@ -8,7 +8,7 @@ html, body {
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: colors.$inklets-color-black;
background-color: colors.$inklets-color-grey;
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; }
span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.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 .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
@ -95,7 +95,7 @@ span.linenos.special { color: #979797; background-color: #ffffc0; padding-left:
* a {
text-decoration: none;
color: colors.$inklets-color-fg;
color: colors.$inklets-color-text-highlight;
}
* a:hover {