fix: lower page common specificity (#124)

* fix: lower page common specificity

* fix: tidier specificity lower of default project types

* feat: fix merge not found and placeholder

Author: lee-chase

src/index.scss

@@ -19,8 +19,6 @@
    place from the start. In most case, avoid loading styles
    from the JavaScript. */
 @use 'layouts/page-layout';
-@use 'pages/not-found/not-found';
-@use 'pages/placeholder/placeholder';
 @use 'pages/welcome/welcome';
 @use 'pages/dashboard/dashboard';
 @use 'components/commonHeader/commonHeader';

src/layouts/page-layout.scss

@@ -41,9 +41,47 @@
   @include carbon-content-overrides;
 }
 
-.cs--page-layout-content {
+@mixin default-project-type() {
+  * {
+    /* 
+    text-wrap-style: balance aims to improve typography by creating more visually appealing text blocks. 
+    When text is balanced, the browser attempts to distribute text more evenly across lines, 
+    avoiding situations where you have very long lines followed by very short lines (orphans).
+    */
+    text-wrap-style: balance;
+  }
+
+  h1,
+  dd {
+    @include type-style('heading-07');
+
+    margin-block-end: $spacing-08;
+  }
+
+  h3 {
+    margin-block-end: $spacing-05;
+  }
+
+  p,
+  dt {
+    margin-block-end: $spacing-05;
+    margin-inline-end: $spacing-08;
+  }
+
+  dt {
+    @include type-style('label-02');
+  }
+}
+
+:where(.cs--page-layout-content) {
+  // low specificity to make it easier to override defaults
   @include default-type;
 
+  // after Carbon default type
+  @include default-project-type;
+}
+
+.cs--page-layout-content {
   // These following styles size the content area and move the scroll
   // from the body to this content area
   block-size: calc(100vh - $spacing-09);

src/pages/_page-common.scss

@@ -8,11 +8,6 @@
 @use '@carbon/react/scss/grid' as *;
 @use '@carbon/react/scss/spacing' as *;
 @use '@carbon/react/scss/type' as *;
-@use '../page-common' as common;
-
-.cs--dashboard {
-  @include common.page-common;
-}
 
 .cs--dashboard__tile {
   margin-block: $spacing-05;

src/pages/dashboard/dashboard.scss

@@ -8,11 +8,6 @@
 @use '@carbon/react/scss/spacing' as *;
 @use '@carbon/react/scss/type' as *;
 @use '@carbon/react/scss/breakpoint' as *;
-@use '../page-common' as common;
-
-.cs--welcome {
-  @include common.page-common;
-}
 
 .cs--welcome__about {
   margin-block-start: $spacing-07;