refactor: turn on view encapsulation for content pages (#647)

src/app/content-page/content-page.component.scss

@@ -1,25 +1,26 @@
 @use 'margins';
 @use 'page';
 
-app-content-page {
+:host {
   display: block;
   padding: page.$padding;
-}
 
-h1 {
-  margin-block-end: margins.$m;
-}
+  ::ng-deep {
+    h1 {
+      margin-block-end: margins.$m;
+    }
 
-h2 {
-  margin-block: margins.$m;
-}
-
-p {
-  margin-block: 1em;
-}
+    h2 {
+      margin-block: margins.$m;
+    }
 
-ul {
-  list-style-type: square;
-  margin-inline-start: 1em;
-  padding-inline-start: 1em;
+    p {
+      margin-block: 1em;
+    }
+    ul {
+      list-style-type: square;
+      margin-inline-start: 1em;
+      padding-inline-start: 1em;
+    }
+  }
 }

src/app/content-page/content-page.component.ts

@@ -1,11 +1,10 @@
-import { Component, ViewEncapsulation } from '@angular/core'
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-content-page',
   standalone: true,
   imports: [],
   template: '<ng-content></ng-content>',
   styleUrl: './content-page.component.scss',
-  encapsulation: ViewEncapsulation.None,
 })
 export class ContentPageComponent {}