Add css reset
This commit is contained in:
parent
f4b87bb52b
commit
0b2bfa8406
5 changed files with 153 additions and 90 deletions
174
angular.json
174
angular.json
|
@ -1,91 +1,87 @@
|
||||||
{
|
{
|
||||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
"version": 1,
|
"version": 1,
|
||||||
"newProjectRoot": "projects",
|
"newProjectRoot": "projects",
|
||||||
"projects": {
|
"projects": {
|
||||||
"app": {
|
"app": {
|
||||||
"projectType": "application",
|
"projectType": "application",
|
||||||
"schematics": {
|
"schematics": {
|
||||||
"@schematics/angular:component": {
|
"@schematics/angular:component": {
|
||||||
"style": "scss"
|
"style": "scss"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"root": "",
|
"root": "",
|
||||||
"sourceRoot": "src",
|
"sourceRoot": "src",
|
||||||
"prefix": "app",
|
"prefix": "app",
|
||||||
"architect": {
|
"architect": {
|
||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular/build:application",
|
"builder": "@angular/build:application",
|
||||||
"options": {
|
"options": {
|
||||||
"browser": "src/main.ts",
|
"browser": "src/main.ts",
|
||||||
"tsConfig": "tsconfig.app.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"inlineStyleLanguage": "scss",
|
"inlineStyleLanguage": "scss",
|
||||||
"assets": [
|
"assets": [
|
||||||
{
|
{
|
||||||
"glob": "**/*",
|
"glob": "**/*",
|
||||||
"input": "public"
|
"input": "public"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": ["src/styles.scss"]
|
||||||
"src/styles.scss"
|
},
|
||||||
]
|
"configurations": {
|
||||||
},
|
"production": {
|
||||||
"configurations": {
|
"budgets": [
|
||||||
"production": {
|
{
|
||||||
"budgets": [
|
"type": "initial",
|
||||||
{
|
"maximumWarning": "500kB",
|
||||||
"type": "initial",
|
"maximumError": "1MB"
|
||||||
"maximumWarning": "500kB",
|
},
|
||||||
"maximumError": "1MB"
|
{
|
||||||
},
|
"type": "anyComponentStyle",
|
||||||
{
|
"maximumWarning": "4kB",
|
||||||
"type": "anyComponentStyle",
|
"maximumError": "8kB"
|
||||||
"maximumWarning": "4kB",
|
}
|
||||||
"maximumError": "8kB"
|
],
|
||||||
}
|
"outputHashing": "all"
|
||||||
],
|
},
|
||||||
"outputHashing": "all"
|
"development": {
|
||||||
},
|
"optimization": false,
|
||||||
"development": {
|
"extractLicenses": false,
|
||||||
"optimization": false,
|
"sourceMap": true
|
||||||
"extractLicenses": false,
|
}
|
||||||
"sourceMap": true
|
},
|
||||||
}
|
"defaultConfiguration": "production"
|
||||||
},
|
},
|
||||||
"defaultConfiguration": "production"
|
"serve": {
|
||||||
},
|
"builder": "@angular/build:dev-server",
|
||||||
"serve": {
|
"configurations": {
|
||||||
"builder": "@angular/build:dev-server",
|
"production": {
|
||||||
"configurations": {
|
"buildTarget": "app:build:production"
|
||||||
"production": {
|
},
|
||||||
"buildTarget": "app:build:production"
|
"development": {
|
||||||
},
|
"buildTarget": "app:build:development"
|
||||||
"development": {
|
}
|
||||||
"buildTarget": "app:build:development"
|
},
|
||||||
}
|
"defaultConfiguration": "development"
|
||||||
},
|
},
|
||||||
"defaultConfiguration": "development"
|
"extract-i18n": {
|
||||||
},
|
"builder": "@angular/build:extract-i18n"
|
||||||
"extract-i18n": {
|
},
|
||||||
"builder": "@angular/build:extract-i18n"
|
"test": {
|
||||||
},
|
"builder": "@angular/build:karma",
|
||||||
"test": {
|
"options": {
|
||||||
"builder": "@angular/build:karma",
|
"tsConfig": "tsconfig.spec.json",
|
||||||
"options": {
|
"inlineStyleLanguage": "scss",
|
||||||
"tsConfig": "tsconfig.spec.json",
|
"assets": [
|
||||||
"inlineStyleLanguage": "scss",
|
{
|
||||||
"assets": [
|
"glob": "**/*",
|
||||||
{
|
"input": "public"
|
||||||
"glob": "**/*",
|
}
|
||||||
"input": "public"
|
],
|
||||||
}
|
"styles": ["src/styles.scss"]
|
||||||
],
|
}
|
||||||
"styles": [
|
}
|
||||||
"src/styles.scss"
|
}
|
||||||
]
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<main>
|
||||||
|
<h1>Hello, world!</h1>
|
||||||
|
</main>
|
|
@ -0,0 +1,6 @@
|
||||||
|
:host {
|
||||||
|
align-items: center;;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
54
src/styles/reset.scss
Normal file
54
src/styles/reset.scss
Normal file
|
@ -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;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue