diff --git a/angular.json b/angular.json index dbb4308..317e969 100644 --- a/angular.json +++ b/angular.json @@ -2,7 +2,8 @@ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "cli": { - "packageManager": "npm" + "packageManager": "npm", + "analytics": "9158c641-271e-49af-8875-4fde149fa8d0" }, "newProjectRoot": "projects", "projects": { diff --git a/src/app/app.component.html b/src/app/app.component.html deleted file mode 100644 index a36d575..0000000 --- a/src/app/app.component.html +++ /dev/null @@ -1 +0,0 @@ -

app works!

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index f88ce83..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - let component: AppComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(AppComponent); - component = fixture.componentInstance; - await fixture.whenStable(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts deleted file mode 100644 index af63d4e..0000000 --- a/src/app/app.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - imports: [], - templateUrl: './app.component.html', - styleUrl: './app.component.scss', -}) -export class AppComponent { - -} diff --git a/src/app/app.html b/src/app/app.html index e0118a1..67e7bd4 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,342 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title() }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'}, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - diff --git a/src/app/app.component.scss b/src/app/app.scss similarity index 100% rename from src/app/app.component.scss rename to src/app/app.scss diff --git a/src/app/features/landing/index.ts b/src/app/features/landing/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..52513f2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,3 @@ -/* You can add global styles to this file, and also import other style files */ +@use "styles/abstracts"; +@use "styles/base"; +@use "styles/layout"; \ No newline at end of file diff --git a/src/styles/abstracts/_functions.scss b/src/styles/abstracts/_functions.scss new file mode 100644 index 0000000..95e17bd --- /dev/null +++ b/src/styles/abstracts/_functions.scss @@ -0,0 +1,21 @@ +@use 'sass:math'; + +@function rem($px) { + @if math.is-unitless($px) { + @return math.div($px, 16) * 1rem; + } + + @else { + @error 'Keine Einheit für die rem() Funktion eingeben; nur Zahlen sind erlaubt.'; + } +} + +@function em($px) { + @if math.is-unitless($px) { + @return math.div($px, 16) * 1em; + } + + @else { + @error 'Keine Einheit für die em() Funktion eingeben; nur Zahlen sind erlaubt.'; + } +} \ No newline at end of file diff --git a/src/styles/abstracts/_index.scss b/src/styles/abstracts/_index.scss new file mode 100644 index 0000000..23fd17f --- /dev/null +++ b/src/styles/abstracts/_index.scss @@ -0,0 +1,2 @@ +@forward "mixins"; +@forward "functions"; \ No newline at end of file diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss new file mode 100644 index 0000000..651975a --- /dev/null +++ b/src/styles/abstracts/_mixins.scss @@ -0,0 +1,15 @@ +@use 'functions' as f; +@use 'sass:math'; +@use 'sass:map'; + +$breakpoints: ( + 'sm': f.em(400), + 'md': f.em(700), + 'lg': f.em(1200), +); + +@mixin breakpoint($size) { + @media (width >=map.get($breakpoints, $size)) { + @content; + } +} \ No newline at end of file diff --git a/src/styles/base/_boilerplate.scss b/src/styles/base/_boilerplate.scss new file mode 100644 index 0000000..29cefdb --- /dev/null +++ b/src/styles/base/_boilerplate.scss @@ -0,0 +1,24 @@ +html { + font-size: 100%; + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + min-height: 100vh; + font-family: RobotoFlex, Helvetica, sans-serif; + background-color: var(--bg-surface); + color: var(--text-main); +} + +img { + display: block; + max-width: 100%; +} \ No newline at end of file diff --git a/src/styles/base/_index.scss b/src/styles/base/_index.scss new file mode 100644 index 0000000..5e12de5 --- /dev/null +++ b/src/styles/base/_index.scss @@ -0,0 +1,3 @@ +@forward "boilerplate"; +@forward "typography"; +@forward "tokens"; \ No newline at end of file diff --git a/src/styles/base/_tokens.scss b/src/styles/base/_tokens.scss new file mode 100644 index 0000000..247ca9d --- /dev/null +++ b/src/styles/base/_tokens.scss @@ -0,0 +1,40 @@ +:root { + // Farben + --brand-vue: 250; + --bg-surface: oklch(99% 0.01 var(--brand-vue)); + --bg-muted: oklch(99% 0.02 var(--brand-vue)); + --text-main: oklch(20% 0.01 var(--brand-vue)); + --text-muted: oklch(45% 0.02 var(--brand-vue)); + + --accent: oklch(60% 0.18 var(--brand-vue)); + --accent-hover: oklch(55% 0.22 var(--brand-vue)); + + --button-text: oklch(100% 0.01 var(--brand-vue)); + --border: oklch(90% 0.02 var(--brand-vue)); + --shadow-color: 0 0% 0%; + + // Skalierung (modulare Skala) + --space-unit: 0.25rem; + --space-1: calc(var(--space-unit) * 1); // 4px + --space-2: calc(var(--space-unit) * 2); // 8px + --space-3: calc(var(--space-unit) * 4); // 16px + --space-4: calc(var(--space-unit) * 8); // 32px + + // Typografie (fluid) + --font-size-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); + --font-size-lg: clamp(1.25rem, 1vw + 1rem, 1.5rem); + --font-size-xl: clamp(1.5rem, 2vw + 1rem, 2.5rem); +} + +[data-theme="dark"] { + --bg-surface: oklch(15% 0.02 var(--brand-vue)); + --bg-muted: oklch(20% 0.02 var(--brand-vue)); + --text-main: oklch(95% 0.01 var(--brand-vue)); + --text-muted: oklch(75% 0.02 var(--brand-vue)); + + --accent: oklch(70% 0.15 var(--brand-vue)); + --accent-hover: oklch(75% 0.18 var(--brand-vue)); + + --border: oklch(25% 0.02 var(--brand-vue)); + --shadow-color: 0 0% 100%; +} \ No newline at end of file diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/layout/_header.scss b/src/styles/layout/_header.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/layout/_index.scss b/src/styles/layout/_index.scss new file mode 100644 index 0000000..11ed64b --- /dev/null +++ b/src/styles/layout/_index.scss @@ -0,0 +1,2 @@ +@forward "grid"; +@forward "header"; \ No newline at end of file