Add css reset

This commit is contained in:
Z. Charles Dziura 2025-06-30 20:38:15 -04:00
parent f4b87bb52b
commit 0b2bfa8406
5 changed files with 153 additions and 90 deletions

View file

@ -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" }
] }
} }
}
}
}
}
} }

View file

@ -0,0 +1,3 @@
<main>
<h1>Hello, world!</h1>
</main>

View file

@ -0,0 +1,6 @@
:host {
align-items: center;;
display: grid;
justify-items: center;
min-height: 100vh;
}

View file

@ -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
View 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;
}