diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss new file mode 100644 index 0000000..6956a3d --- /dev/null +++ b/src/app/grid/grid.component.scss @@ -0,0 +1,107 @@ +:host { + background-color: white; + padding: 0; + @media (min-width: 500px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2px; + grid-auto-flow: dense; + } + @media (min-width: 750px) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: 1000px) { + grid-template-columns: repeat(4, 1fr); + } + ::ng-deep>* { + background-color: #303030; + } + ::ng-deep>div { + padding: 10px; + } + max-width: 150ch; + margin: auto; +} + +// inspired by https://codepen.io/oliviale/pen/BaoXOOP +:host ::ng-deep p, +:host ::ng-deep span { + text-align: justify; + line-height: 1.3; +} + +:host ::ng-deep h1, +:host ::ng-deep h2, +:host ::ng-deep h3, +:host ::ng-deep h4, +:host ::ng-deep h5 { + font-weight: bolder; + text-align: center; +} + +:host ::ng-deep h1 { + font-size: 2em; +} + +:host ::ng-deep h3 { + font-size: 1.5em; +} + +:host ::ng-deep h4 { + font-size: 1.25em; +} + +:host ::ng-deep em { + font-style: italic; +} + +:host ::ng-deep .wide-2 { + grid-column: span 2; +} + +:host ::ng-deep .wide-3 { + grid-column: span 2; +} + +:host ::ng-deep .wide-full { + grid-column: 1 / -1; +} + +:host ::ng-deep .wide-4 { + grid-column: span 4; +} + +:host ::ng-deep .tall-2 { + grid-row: span 2; +} + +:host ::ng-deep .tall-3 { + grid-row: span 3; +} + +:host ::ng-deep .tall-4 { + grid-row: span 4; +} + +:host ::ng-deep img { + width: 100%; + filter: grayscale(1); + margin-bottom: 0.5rem; + border: 1px solid var(--black); + transition: 0.3s ease; +} + +@media (min-width: 700px) { + :host ::ng-deep .multi-column { + column-count: 2; + column-gap: 1.3rem; + margin-top: 0.75rem; + &-3 { + column-count: 3; + } + } +} + +:host ::ng-deep a:hover>img { + filter: grayscale(0); +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss new file mode 100644 index 0000000..6956a3d --- /dev/null +++ b/src/app/grid/grid.component.scss @@ -0,0 +1,107 @@ +:host { + background-color: white; + padding: 0; + @media (min-width: 500px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2px; + grid-auto-flow: dense; + } + @media (min-width: 750px) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: 1000px) { + grid-template-columns: repeat(4, 1fr); + } + ::ng-deep>* { + background-color: #303030; + } + ::ng-deep>div { + padding: 10px; + } + max-width: 150ch; + margin: auto; +} + +// inspired by https://codepen.io/oliviale/pen/BaoXOOP +:host ::ng-deep p, +:host ::ng-deep span { + text-align: justify; + line-height: 1.3; +} + +:host ::ng-deep h1, +:host ::ng-deep h2, +:host ::ng-deep h3, +:host ::ng-deep h4, +:host ::ng-deep h5 { + font-weight: bolder; + text-align: center; +} + +:host ::ng-deep h1 { + font-size: 2em; +} + +:host ::ng-deep h3 { + font-size: 1.5em; +} + +:host ::ng-deep h4 { + font-size: 1.25em; +} + +:host ::ng-deep em { + font-style: italic; +} + +:host ::ng-deep .wide-2 { + grid-column: span 2; +} + +:host ::ng-deep .wide-3 { + grid-column: span 2; +} + +:host ::ng-deep .wide-full { + grid-column: 1 / -1; +} + +:host ::ng-deep .wide-4 { + grid-column: span 4; +} + +:host ::ng-deep .tall-2 { + grid-row: span 2; +} + +:host ::ng-deep .tall-3 { + grid-row: span 3; +} + +:host ::ng-deep .tall-4 { + grid-row: span 4; +} + +:host ::ng-deep img { + width: 100%; + filter: grayscale(1); + margin-bottom: 0.5rem; + border: 1px solid var(--black); + transition: 0.3s ease; +} + +@media (min-width: 700px) { + :host ::ng-deep .multi-column { + column-count: 2; + column-gap: 1.3rem; + margin-top: 0.75rem; + &-3 { + column-count: 3; + } + } +} + +:host ::ng-deep a:hover>img { + filter: grayscale(0); +} \ No newline at end of file diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts new file mode 100644 index 0000000..1c37ca8 --- /dev/null +++ b/src/app/grid/grid.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridComponent } from './grid.component'; + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GridComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss new file mode 100644 index 0000000..6956a3d --- /dev/null +++ b/src/app/grid/grid.component.scss @@ -0,0 +1,107 @@ +:host { + background-color: white; + padding: 0; + @media (min-width: 500px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2px; + grid-auto-flow: dense; + } + @media (min-width: 750px) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: 1000px) { + grid-template-columns: repeat(4, 1fr); + } + ::ng-deep>* { + background-color: #303030; + } + ::ng-deep>div { + padding: 10px; + } + max-width: 150ch; + margin: auto; +} + +// inspired by https://codepen.io/oliviale/pen/BaoXOOP +:host ::ng-deep p, +:host ::ng-deep span { + text-align: justify; + line-height: 1.3; +} + +:host ::ng-deep h1, +:host ::ng-deep h2, +:host ::ng-deep h3, +:host ::ng-deep h4, +:host ::ng-deep h5 { + font-weight: bolder; + text-align: center; +} + +:host ::ng-deep h1 { + font-size: 2em; +} + +:host ::ng-deep h3 { + font-size: 1.5em; +} + +:host ::ng-deep h4 { + font-size: 1.25em; +} + +:host ::ng-deep em { + font-style: italic; +} + +:host ::ng-deep .wide-2 { + grid-column: span 2; +} + +:host ::ng-deep .wide-3 { + grid-column: span 2; +} + +:host ::ng-deep .wide-full { + grid-column: 1 / -1; +} + +:host ::ng-deep .wide-4 { + grid-column: span 4; +} + +:host ::ng-deep .tall-2 { + grid-row: span 2; +} + +:host ::ng-deep .tall-3 { + grid-row: span 3; +} + +:host ::ng-deep .tall-4 { + grid-row: span 4; +} + +:host ::ng-deep img { + width: 100%; + filter: grayscale(1); + margin-bottom: 0.5rem; + border: 1px solid var(--black); + transition: 0.3s ease; +} + +@media (min-width: 700px) { + :host ::ng-deep .multi-column { + column-count: 2; + column-gap: 1.3rem; + margin-top: 0.75rem; + &-3 { + column-count: 3; + } + } +} + +:host ::ng-deep a:hover>img { + filter: grayscale(0); +} \ No newline at end of file diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts new file mode 100644 index 0000000..1c37ca8 --- /dev/null +++ b/src/app/grid/grid.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridComponent } from './grid.component'; + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GridComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts new file mode 100644 index 0000000..5f9957a --- /dev/null +++ b/src/app/grid/grid.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-grid', + templateUrl: './grid.component.html', + styleUrls: ['./grid.component.scss'] +}) +export class GridComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss new file mode 100644 index 0000000..6956a3d --- /dev/null +++ b/src/app/grid/grid.component.scss @@ -0,0 +1,107 @@ +:host { + background-color: white; + padding: 0; + @media (min-width: 500px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2px; + grid-auto-flow: dense; + } + @media (min-width: 750px) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: 1000px) { + grid-template-columns: repeat(4, 1fr); + } + ::ng-deep>* { + background-color: #303030; + } + ::ng-deep>div { + padding: 10px; + } + max-width: 150ch; + margin: auto; +} + +// inspired by https://codepen.io/oliviale/pen/BaoXOOP +:host ::ng-deep p, +:host ::ng-deep span { + text-align: justify; + line-height: 1.3; +} + +:host ::ng-deep h1, +:host ::ng-deep h2, +:host ::ng-deep h3, +:host ::ng-deep h4, +:host ::ng-deep h5 { + font-weight: bolder; + text-align: center; +} + +:host ::ng-deep h1 { + font-size: 2em; +} + +:host ::ng-deep h3 { + font-size: 1.5em; +} + +:host ::ng-deep h4 { + font-size: 1.25em; +} + +:host ::ng-deep em { + font-style: italic; +} + +:host ::ng-deep .wide-2 { + grid-column: span 2; +} + +:host ::ng-deep .wide-3 { + grid-column: span 2; +} + +:host ::ng-deep .wide-full { + grid-column: 1 / -1; +} + +:host ::ng-deep .wide-4 { + grid-column: span 4; +} + +:host ::ng-deep .tall-2 { + grid-row: span 2; +} + +:host ::ng-deep .tall-3 { + grid-row: span 3; +} + +:host ::ng-deep .tall-4 { + grid-row: span 4; +} + +:host ::ng-deep img { + width: 100%; + filter: grayscale(1); + margin-bottom: 0.5rem; + border: 1px solid var(--black); + transition: 0.3s ease; +} + +@media (min-width: 700px) { + :host ::ng-deep .multi-column { + column-count: 2; + column-gap: 1.3rem; + margin-top: 0.75rem; + &-3 { + column-count: 3; + } + } +} + +:host ::ng-deep a:hover>img { + filter: grayscale(0); +} \ No newline at end of file diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts new file mode 100644 index 0000000..1c37ca8 --- /dev/null +++ b/src/app/grid/grid.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridComponent } from './grid.component'; + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GridComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts new file mode 100644 index 0000000..5f9957a --- /dev/null +++ b/src/app/grid/grid.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-grid', + templateUrl: './grid.component.html', + styleUrls: ['./grid.component.scss'] +}) +export class GridComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 3315574..4302aec 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,4 +1,4 @@ -
+

Welcome to my homepage!

@@ -19,7 +19,7 @@ Tree os is a hobby operating system I mainly develop just for the learning experience. As of now, it supports some multitasking and I am currently in the process of adding a file system and can already read files!

- I took most of my knowlege from the exellent OS dev wiki, wich, despite not having actively been updated for years still contians lots of accurate information. This is because most of the old standards + I took most of my knowlege from the excellent OS dev wiki, wich, despite not having actively been updated for years, still contians lots of accurate information. This is because most of the old standards like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible.

@@ -41,5 +41,4 @@ I personally created this website you are currently looking at using Angular and the Material design theme. Additionally, I also created Frank Eisenhauer's webpage and host an instance of gitBucket.

- -
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss new file mode 100644 index 0000000..6956a3d --- /dev/null +++ b/src/app/grid/grid.component.scss @@ -0,0 +1,107 @@ +:host { + background-color: white; + padding: 0; + @media (min-width: 500px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2px; + grid-auto-flow: dense; + } + @media (min-width: 750px) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: 1000px) { + grid-template-columns: repeat(4, 1fr); + } + ::ng-deep>* { + background-color: #303030; + } + ::ng-deep>div { + padding: 10px; + } + max-width: 150ch; + margin: auto; +} + +// inspired by https://codepen.io/oliviale/pen/BaoXOOP +:host ::ng-deep p, +:host ::ng-deep span { + text-align: justify; + line-height: 1.3; +} + +:host ::ng-deep h1, +:host ::ng-deep h2, +:host ::ng-deep h3, +:host ::ng-deep h4, +:host ::ng-deep h5 { + font-weight: bolder; + text-align: center; +} + +:host ::ng-deep h1 { + font-size: 2em; +} + +:host ::ng-deep h3 { + font-size: 1.5em; +} + +:host ::ng-deep h4 { + font-size: 1.25em; +} + +:host ::ng-deep em { + font-style: italic; +} + +:host ::ng-deep .wide-2 { + grid-column: span 2; +} + +:host ::ng-deep .wide-3 { + grid-column: span 2; +} + +:host ::ng-deep .wide-full { + grid-column: 1 / -1; +} + +:host ::ng-deep .wide-4 { + grid-column: span 4; +} + +:host ::ng-deep .tall-2 { + grid-row: span 2; +} + +:host ::ng-deep .tall-3 { + grid-row: span 3; +} + +:host ::ng-deep .tall-4 { + grid-row: span 4; +} + +:host ::ng-deep img { + width: 100%; + filter: grayscale(1); + margin-bottom: 0.5rem; + border: 1px solid var(--black); + transition: 0.3s ease; +} + +@media (min-width: 700px) { + :host ::ng-deep .multi-column { + column-count: 2; + column-gap: 1.3rem; + margin-top: 0.75rem; + &-3 { + column-count: 3; + } + } +} + +:host ::ng-deep a:hover>img { + filter: grayscale(0); +} \ No newline at end of file diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts new file mode 100644 index 0000000..1c37ca8 --- /dev/null +++ b/src/app/grid/grid.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridComponent } from './grid.component'; + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GridComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts new file mode 100644 index 0000000..5f9957a --- /dev/null +++ b/src/app/grid/grid.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-grid', + templateUrl: './grid.component.html', + styleUrls: ['./grid.component.scss'] +}) +export class GridComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 3315574..4302aec 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,4 +1,4 @@ -
+

Welcome to my homepage!

@@ -19,7 +19,7 @@ Tree os is a hobby operating system I mainly develop just for the learning experience. As of now, it supports some multitasking and I am currently in the process of adding a file system and can already read files!

- I took most of my knowlege from the exellent OS dev wiki, wich, despite not having actively been updated for years still contians lots of accurate information. This is because most of the old standards + I took most of my knowlege from the excellent OS dev wiki, wich, despite not having actively been updated for years, still contians lots of accurate information. This is because most of the old standards like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible.

@@ -41,5 +41,4 @@ I personally created this website you are currently looking at using Angular and the Material design theme. Additionally, I also created Frank Eisenhauer's webpage and host an instance of gitBucket.

- -
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 66761f8..e69de29 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,112 +0,0 @@ -// inspired by https://codepen.io/oliviale/pen/BaoXOOP -p, -span { - text-align: justify; - line-height: 1.3; -} - -main { - max-width: 150ch; - margin: auto; - padding: 2ch; -} - -h1, -h2, -h3, -h4, -h5 { - font-weight: bolder; - text-align: center; -} - -h1 { - font-size: 2em; -} - -h3 { - font-size: 1.5em; -} - -h4 { - font-size: 1.25em; -} - -em { - font-style: italic; -} - -main { - background-color: white; - padding: 0; - @media (min-width: 500px) { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2px; - grid-auto-flow: dense; - } - @media (min-width: 750px) { - grid-template-columns: repeat(3, 1fr); - } - @media (min-width: 1000px) { - grid-template-columns: repeat(4, 1fr); - } - * { - background-color: #303030; - } -} - -main>div { - padding: 10px; -} - -.wide-2 { - grid-column: span 2; -} - -.wide-3 { - grid-column: span 2; -} - -.wide-full { - grid-column: 1 / -1; -} - -.wide-4 { - grid-column: span 4; -} - -.tall-2 { - grid-row: span 2; -} - -.tall-3 { - grid-row: span 3; -} - -.tall-4 { - grid-row: span 4; -} - -img { - width: 100%; - filter: grayscale(95%); - margin-bottom: 0.5rem; - border: 1px solid var(--black); - transition: 0.3s ease; -} - -@media (min-width: 700px) { - .multi-column { - column-count: 2; - column-gap: 1.3rem; - margin-top: 0.75rem; - &-3 { - column-count: 3; - } - } -} - -a:hover>img { - filter: grayscale(0); -} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss new file mode 100644 index 0000000..6956a3d --- /dev/null +++ b/src/app/grid/grid.component.scss @@ -0,0 +1,107 @@ +:host { + background-color: white; + padding: 0; + @media (min-width: 500px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2px; + grid-auto-flow: dense; + } + @media (min-width: 750px) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: 1000px) { + grid-template-columns: repeat(4, 1fr); + } + ::ng-deep>* { + background-color: #303030; + } + ::ng-deep>div { + padding: 10px; + } + max-width: 150ch; + margin: auto; +} + +// inspired by https://codepen.io/oliviale/pen/BaoXOOP +:host ::ng-deep p, +:host ::ng-deep span { + text-align: justify; + line-height: 1.3; +} + +:host ::ng-deep h1, +:host ::ng-deep h2, +:host ::ng-deep h3, +:host ::ng-deep h4, +:host ::ng-deep h5 { + font-weight: bolder; + text-align: center; +} + +:host ::ng-deep h1 { + font-size: 2em; +} + +:host ::ng-deep h3 { + font-size: 1.5em; +} + +:host ::ng-deep h4 { + font-size: 1.25em; +} + +:host ::ng-deep em { + font-style: italic; +} + +:host ::ng-deep .wide-2 { + grid-column: span 2; +} + +:host ::ng-deep .wide-3 { + grid-column: span 2; +} + +:host ::ng-deep .wide-full { + grid-column: 1 / -1; +} + +:host ::ng-deep .wide-4 { + grid-column: span 4; +} + +:host ::ng-deep .tall-2 { + grid-row: span 2; +} + +:host ::ng-deep .tall-3 { + grid-row: span 3; +} + +:host ::ng-deep .tall-4 { + grid-row: span 4; +} + +:host ::ng-deep img { + width: 100%; + filter: grayscale(1); + margin-bottom: 0.5rem; + border: 1px solid var(--black); + transition: 0.3s ease; +} + +@media (min-width: 700px) { + :host ::ng-deep .multi-column { + column-count: 2; + column-gap: 1.3rem; + margin-top: 0.75rem; + &-3 { + column-count: 3; + } + } +} + +:host ::ng-deep a:hover>img { + filter: grayscale(0); +} \ No newline at end of file diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts new file mode 100644 index 0000000..1c37ca8 --- /dev/null +++ b/src/app/grid/grid.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridComponent } from './grid.component'; + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GridComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts new file mode 100644 index 0000000..5f9957a --- /dev/null +++ b/src/app/grid/grid.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-grid', + templateUrl: './grid.component.html', + styleUrls: ['./grid.component.scss'] +}) +export class GridComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 3315574..4302aec 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,4 +1,4 @@ -
+

Welcome to my homepage!

@@ -19,7 +19,7 @@ Tree os is a hobby operating system I mainly develop just for the learning experience. As of now, it supports some multitasking and I am currently in the process of adding a file system and can already read files!

- I took most of my knowlege from the exellent OS dev wiki, wich, despite not having actively been updated for years still contians lots of accurate information. This is because most of the old standards + I took most of my knowlege from the excellent OS dev wiki, wich, despite not having actively been updated for years, still contians lots of accurate information. This is because most of the old standards like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible.

@@ -41,5 +41,4 @@ I personally created this website you are currently looking at using Angular and the Material design theme. Additionally, I also created Frank Eisenhauer's webpage and host an instance of gitBucket.

- -
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 66761f8..e69de29 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,112 +0,0 @@ -// inspired by https://codepen.io/oliviale/pen/BaoXOOP -p, -span { - text-align: justify; - line-height: 1.3; -} - -main { - max-width: 150ch; - margin: auto; - padding: 2ch; -} - -h1, -h2, -h3, -h4, -h5 { - font-weight: bolder; - text-align: center; -} - -h1 { - font-size: 2em; -} - -h3 { - font-size: 1.5em; -} - -h4 { - font-size: 1.25em; -} - -em { - font-style: italic; -} - -main { - background-color: white; - padding: 0; - @media (min-width: 500px) { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2px; - grid-auto-flow: dense; - } - @media (min-width: 750px) { - grid-template-columns: repeat(3, 1fr); - } - @media (min-width: 1000px) { - grid-template-columns: repeat(4, 1fr); - } - * { - background-color: #303030; - } -} - -main>div { - padding: 10px; -} - -.wide-2 { - grid-column: span 2; -} - -.wide-3 { - grid-column: span 2; -} - -.wide-full { - grid-column: 1 / -1; -} - -.wide-4 { - grid-column: span 4; -} - -.tall-2 { - grid-row: span 2; -} - -.tall-3 { - grid-row: span 3; -} - -.tall-4 { - grid-row: span 4; -} - -img { - width: 100%; - filter: grayscale(95%); - margin-bottom: 0.5rem; - border: 1px solid var(--black); - transition: 0.3s ease; -} - -@media (min-width: 700px) { - .multi-column { - column-count: 2; - column-gap: 1.3rem; - margin-top: 0.75rem; - &-3 { - column-count: 3; - } - } -} - -a:hover>img { - filter: grayscale(0); -} \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico index 0b3b2f8..6a88275 100644 --- a/src/favicon.ico +++ b/src/favicon.ico Binary files differ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 494e89d..a6f5aac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,13 +11,15 @@ import { ToolbarComponent } from './toolbar/toolbar.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; +import { GridComponent } from './grid/grid.component'; @NgModule({ declarations: [ AppComponent, ToolbarComponent, HomeComponent, - FooterComponent + FooterComponent, + GridComponent ], imports: [ BrowserModule, diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html new file mode 100644 index 0000000..5691b37 --- /dev/null +++ b/src/app/grid/grid.component.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss new file mode 100644 index 0000000..6956a3d --- /dev/null +++ b/src/app/grid/grid.component.scss @@ -0,0 +1,107 @@ +:host { + background-color: white; + padding: 0; + @media (min-width: 500px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2px; + grid-auto-flow: dense; + } + @media (min-width: 750px) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: 1000px) { + grid-template-columns: repeat(4, 1fr); + } + ::ng-deep>* { + background-color: #303030; + } + ::ng-deep>div { + padding: 10px; + } + max-width: 150ch; + margin: auto; +} + +// inspired by https://codepen.io/oliviale/pen/BaoXOOP +:host ::ng-deep p, +:host ::ng-deep span { + text-align: justify; + line-height: 1.3; +} + +:host ::ng-deep h1, +:host ::ng-deep h2, +:host ::ng-deep h3, +:host ::ng-deep h4, +:host ::ng-deep h5 { + font-weight: bolder; + text-align: center; +} + +:host ::ng-deep h1 { + font-size: 2em; +} + +:host ::ng-deep h3 { + font-size: 1.5em; +} + +:host ::ng-deep h4 { + font-size: 1.25em; +} + +:host ::ng-deep em { + font-style: italic; +} + +:host ::ng-deep .wide-2 { + grid-column: span 2; +} + +:host ::ng-deep .wide-3 { + grid-column: span 2; +} + +:host ::ng-deep .wide-full { + grid-column: 1 / -1; +} + +:host ::ng-deep .wide-4 { + grid-column: span 4; +} + +:host ::ng-deep .tall-2 { + grid-row: span 2; +} + +:host ::ng-deep .tall-3 { + grid-row: span 3; +} + +:host ::ng-deep .tall-4 { + grid-row: span 4; +} + +:host ::ng-deep img { + width: 100%; + filter: grayscale(1); + margin-bottom: 0.5rem; + border: 1px solid var(--black); + transition: 0.3s ease; +} + +@media (min-width: 700px) { + :host ::ng-deep .multi-column { + column-count: 2; + column-gap: 1.3rem; + margin-top: 0.75rem; + &-3 { + column-count: 3; + } + } +} + +:host ::ng-deep a:hover>img { + filter: grayscale(0); +} \ No newline at end of file diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts new file mode 100644 index 0000000..1c37ca8 --- /dev/null +++ b/src/app/grid/grid.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridComponent } from './grid.component'; + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GridComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts new file mode 100644 index 0000000..5f9957a --- /dev/null +++ b/src/app/grid/grid.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-grid', + templateUrl: './grid.component.html', + styleUrls: ['./grid.component.scss'] +}) +export class GridComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 3315574..4302aec 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,4 +1,4 @@ -
+

Welcome to my homepage!

@@ -19,7 +19,7 @@ Tree os is a hobby operating system I mainly develop just for the learning experience. As of now, it supports some multitasking and I am currently in the process of adding a file system and can already read files!

- I took most of my knowlege from the exellent OS dev wiki, wich, despite not having actively been updated for years still contians lots of accurate information. This is because most of the old standards + I took most of my knowlege from the excellent OS dev wiki, wich, despite not having actively been updated for years, still contians lots of accurate information. This is because most of the old standards like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible.

@@ -41,5 +41,4 @@ I personally created this website you are currently looking at using Angular and the Material design theme. Additionally, I also created Frank Eisenhauer's webpage and host an instance of gitBucket.

- -
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 66761f8..e69de29 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,112 +0,0 @@ -// inspired by https://codepen.io/oliviale/pen/BaoXOOP -p, -span { - text-align: justify; - line-height: 1.3; -} - -main { - max-width: 150ch; - margin: auto; - padding: 2ch; -} - -h1, -h2, -h3, -h4, -h5 { - font-weight: bolder; - text-align: center; -} - -h1 { - font-size: 2em; -} - -h3 { - font-size: 1.5em; -} - -h4 { - font-size: 1.25em; -} - -em { - font-style: italic; -} - -main { - background-color: white; - padding: 0; - @media (min-width: 500px) { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2px; - grid-auto-flow: dense; - } - @media (min-width: 750px) { - grid-template-columns: repeat(3, 1fr); - } - @media (min-width: 1000px) { - grid-template-columns: repeat(4, 1fr); - } - * { - background-color: #303030; - } -} - -main>div { - padding: 10px; -} - -.wide-2 { - grid-column: span 2; -} - -.wide-3 { - grid-column: span 2; -} - -.wide-full { - grid-column: 1 / -1; -} - -.wide-4 { - grid-column: span 4; -} - -.tall-2 { - grid-row: span 2; -} - -.tall-3 { - grid-row: span 3; -} - -.tall-4 { - grid-row: span 4; -} - -img { - width: 100%; - filter: grayscale(95%); - margin-bottom: 0.5rem; - border: 1px solid var(--black); - transition: 0.3s ease; -} - -@media (min-width: 700px) { - .multi-column { - column-count: 2; - column-gap: 1.3rem; - margin-top: 0.75rem; - &-3 { - column-count: 3; - } - } -} - -a:hover>img { - filter: grayscale(0); -} \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico index 0b3b2f8..6a88275 100644 --- a/src/favicon.ico +++ b/src/favicon.ico Binary files differ diff --git a/src/styles.scss b/src/styles.scss index 90d5362..697ae39 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,7 @@ @use '~@angular/material' as mat; @include mat.core(); $Website-primary: mat.define-palette(mat.$green-palette); -$Website-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$Website-accent: mat.define-palette(mat.$deep-orange-palette); $Website-warn: mat.define-palette(mat.$red-palette); $Website-theme: mat.define-dark-theme(( color: ( primary: $Website-primary, accent: $Website-accent, warn: $Website-warn, ))); @include mat.all-component-themes($Website-theme);