diff --git a/angular.json b/angular.json index c9d6aec..cc3af0a 100644 --- a/angular.json +++ b/angular.json @@ -1,91 +1,87 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "app": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular/build:application", - "options": { - "browser": "src/main.ts", - "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": [ - { - "glob": "**/*", - "input": "public" - } - ], - "styles": [ - "src/styles.scss" - ] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kB", - "maximumError": "1MB" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "4kB", - "maximumError": "8kB" - } - ], - "outputHashing": "all" - }, - "development": { - "optimization": false, - "extractLicenses": false, - "sourceMap": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular/build:dev-server", - "configurations": { - "production": { - "buildTarget": "app:build:production" - }, - "development": { - "buildTarget": "app:build:development" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n" - }, - "test": { - "builder": "@angular/build:karma", - "options": { - "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", - "assets": [ - { - "glob": "**/*", - "input": "public" - } - ], - "styles": [ - "src/styles.scss" - ] - } - } - } - } - } + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "app": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "browser": "src/main.ts", + "tsConfig": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.scss"] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "app:build:production" + }, + "development": { + "buildTarget": "app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "tsConfig": "tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.scss"] + } + } + } + } + } } diff --git a/src/app/app.html b/src/app/app.html index e69de29..7fc4e60 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -0,0 +1,3 @@ +
+

Hello, world!

+
diff --git a/src/app/app.scss b/src/app/app.scss index e69de29..0f7aef2 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -0,0 +1,6 @@ +:host { + align-items: center;; + display: grid; + justify-items: center; + min-height: 100vh; +} diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..f611ef5 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,5 @@ -/* You can add global styles to this file, and also import other style files */ +@import url(styles/reset.scss); + +body { + font-size: calc(15px + 0.390625vw); +} diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 0000000..0761796 --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,54 @@ +/* 1. Use a more-intuitive box-sizing model */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* 2. Remove default margin */ +* { + margin: 0; +} + +/* 3. Enable keyword animations */ +@media (prefers-reduced-motion: no-preference) { + html { + interpolate-size: allow-keywords; + } +} + +body { + /* 4. Add accessible line-height */ + line-height: 1.5; + /* 5. Improve text rendering */ + -webkit-font-smoothing: antialiased; +} + +/* 6. Improve media defaults */ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +/* 7. Inherit fonts for form controls */ +input, button, textarea, select { + font: inherit; +} + +/* 8. Avoid text overflows */ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +/* 9. Improve line wrapping */ +p { + text-wrap: pretty; +} +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} + +/* + 10. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +}