diff --git a/src/app/app.component.html b/src/app/app.component.html index f68ee54..943027a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - - - - +
+ + +
\ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index f68ee54..943027a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - - - - +
+ + +
\ No newline at end of file diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 6a82aac..7e4d5e7 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -1,8 +1,6 @@ @use '~@angular/material' as mat; @include mat.core(); footer { - position: absolute; - bottom: 0; width: 100%; } diff --git a/src/app/app.component.html b/src/app/app.component.html index f68ee54..943027a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - - - - +
+ + +
\ No newline at end of file diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 6a82aac..7e4d5e7 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -1,8 +1,6 @@ @use '~@angular/material' as mat; @include mat.core(); footer { - position: absolute; - bottom: 0; width: 100%; } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index f6dbae4..3315574 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1 +1,45 @@ -

Hey, it's me!

\ No newline at end of file +
+
+
+

Welcome to my homepage!

+
+
+

Who am I?

+

+ I'm Lukas, a german student doing software development and more cool sciency stuff and this is my webpage where I want to showcase some of my work. +

+
+
+ +

Tree-os

+ + +
+

+ 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 + like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible. +

+
+
+ +
+ +

Traffic simulator

+ + +

+ For school, I have to write a scientific article about something regarding "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code + on my git. +

+
+
+

Websites

+

+ 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 diff --git a/src/app/app.component.html b/src/app/app.component.html index f68ee54..943027a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - - - - +
+ + +
\ No newline at end of file diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 6a82aac..7e4d5e7 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -1,8 +1,6 @@ @use '~@angular/material' as mat; @include mat.core(); footer { - position: absolute; - bottom: 0; width: 100%; } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index f6dbae4..3315574 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1 +1,45 @@ -

Hey, it's me!

\ No newline at end of file +
+
+
+

Welcome to my homepage!

+
+
+

Who am I?

+

+ I'm Lukas, a german student doing software development and more cool sciency stuff and this is my webpage where I want to showcase some of my work. +

+
+
+ +

Tree-os

+ + +
+

+ 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 + like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible. +

+
+
+ +
+ +

Traffic simulator

+ + +

+ For school, I have to write a scientific article about something regarding "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code + on my git. +

+
+
+

Websites

+

+ 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 diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index e69de29..66761f8 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -0,0 +1,112 @@ +// 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.component.html b/src/app/app.component.html index f68ee54..943027a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - - - - +
+ + +
\ No newline at end of file diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 6a82aac..7e4d5e7 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -1,8 +1,6 @@ @use '~@angular/material' as mat; @include mat.core(); footer { - position: absolute; - bottom: 0; width: 100%; } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index f6dbae4..3315574 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1 +1,45 @@ -

Hey, it's me!

\ No newline at end of file +
+
+
+

Welcome to my homepage!

+
+
+

Who am I?

+

+ I'm Lukas, a german student doing software development and more cool sciency stuff and this is my webpage where I want to showcase some of my work. +

+
+
+ +

Tree-os

+ + +
+

+ 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 + like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible. +

+
+
+ +
+ +

Traffic simulator

+ + +

+ For school, I have to write a scientific article about something regarding "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code + on my git. +

+
+
+

Websites

+

+ 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 diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index e69de29..66761f8 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -0,0 +1,112 @@ +// 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/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html index 43fbac7..c5f7157 100644 --- a/src/app/toolbar/toolbar.component.html +++ b/src/app/toolbar/toolbar.component.html @@ -1,6 +1,6 @@ - Lukas Eisenhauer + Lukas Eisenhauer \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index f68ee54..943027a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - - - - +
+ + +
\ No newline at end of file diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 6a82aac..7e4d5e7 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -1,8 +1,6 @@ @use '~@angular/material' as mat; @include mat.core(); footer { - position: absolute; - bottom: 0; width: 100%; } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index f6dbae4..3315574 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1 +1,45 @@ -

Hey, it's me!

\ No newline at end of file +
+
+
+

Welcome to my homepage!

+
+
+

Who am I?

+

+ I'm Lukas, a german student doing software development and more cool sciency stuff and this is my webpage where I want to showcase some of my work. +

+
+
+ +

Tree-os

+ + +
+

+ 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 + like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible. +

+
+
+ +
+ +

Traffic simulator

+ + +

+ For school, I have to write a scientific article about something regarding "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code + on my git. +

+
+
+

Websites

+

+ 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 diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index e69de29..66761f8 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -0,0 +1,112 @@ +// 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/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html index 43fbac7..c5f7157 100644 --- a/src/app/toolbar/toolbar.component.html +++ b/src/app/toolbar/toolbar.component.html @@ -1,6 +1,6 @@ - Lukas Eisenhauer + Lukas Eisenhauer \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico index 997406a..0b3b2f8 100644 --- a/src/favicon.ico +++ b/src/favicon.ico Binary files differ diff --git a/src/app/app.component.html b/src/app/app.component.html index f68ee54..943027a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - - - - +
+ + +
\ No newline at end of file diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 6a82aac..7e4d5e7 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -1,8 +1,6 @@ @use '~@angular/material' as mat; @include mat.core(); footer { - position: absolute; - bottom: 0; width: 100%; } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index f6dbae4..3315574 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1 +1,45 @@ -

Hey, it's me!

\ No newline at end of file +
+
+
+

Welcome to my homepage!

+
+
+

Who am I?

+

+ I'm Lukas, a german student doing software development and more cool sciency stuff and this is my webpage where I want to showcase some of my work. +

+
+
+ +

Tree-os

+ + +
+

+ 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 + like the x86 instruction set are still in use to this day and newer standards, x86_64 are mostly if not completly backwards compatible. +

+
+
+ +
+ +

Traffic simulator

+ + +

+ For school, I have to write a scientific article about something regarding "everyday physics". I am focusing on the design of urban junctions and need a simulation for cars traversing different designs. You can find the current code + on my git. +

+
+
+

Websites

+

+ 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 diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index e69de29..66761f8 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -0,0 +1,112 @@ +// 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/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html index 43fbac7..c5f7157 100644 --- a/src/app/toolbar/toolbar.component.html +++ b/src/app/toolbar/toolbar.component.html @@ -1,6 +1,6 @@ - Lukas Eisenhauer + Lukas Eisenhauer \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico index 997406a..0b3b2f8 100644 --- a/src/favicon.ico +++ b/src/favicon.ico Binary files differ diff --git a/src/styles.scss b/src/styles.scss index b861640..90d5362 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -21,10 +21,25 @@ $accent: map-get($color, accent); $background: map_get($mat-grey, 800); a { - color: mat-color($accent); + color: mat-color($primary); text-decoration: none; } footer { background-color: $background; +} + +app-root { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100%; +} + +.primary { + color: mat-color($primary); +} + +.accent { + color: mat-color($accent); } \ No newline at end of file