namespace page content in app layout

thescientist13 · thescientist13 · commit 0edb78bd66cc · 2024-08-27T21:44:29.000-04:00
diff --git a/src/layouts/app.html b/src/layouts/app.html
@@ -30,7 +30,7 @@
   <body>
     <app-header></app-header>
 
-    <main>
+    <main class="page-content">
       <page-outlet></page-outlet>
     </main>
 
diff --git a/src/layouts/blog.html b/src/layouts/blog.html
@@ -7,7 +7,7 @@
   </head>
 
   <body>
-    <article class="blog-post-content-container">
+    <article>
       <content-outlet></content-outlet>
     </article>
   </body>
diff --git a/src/pages/blog/release/v0-26-0.md b/src/pages/blog/release/v0-26-0.md
@@ -15,7 +15,7 @@ layout: blog
 After a lot of hard work, the Greenwood team is eager to share our first round of enhancements related to our [SSR work](/blog/release/v0-24-0/). By fully leaning into Web Components as a standard API for server rendered pages, we have finally realized something we've been chasing since the early days of the project; all made possible through a new library we've started developing called [**Web Components Compiler (WCC)**](https://github.com/ProjectEvergreen/wcc)! 📣
 
 <style>
-  .blog-post-content-container img {
+  .page-content img {
     width: 60%!important;
     margin-left: 20%;
   }
diff --git a/src/pages/blog/release/v0-27-0.md b/src/pages/blog/release/v0-27-0.md
@@ -17,7 +17,7 @@ Innovations in the industry like with [serverless and edge platforms](https://gi
 ![Full Stack Web Components](/assets/blog/full-stack-web-components.webp) Greenwood is ecstatic to embrace this future for the web, in which there is a world where dynamic can be just as practical as static, and the web can be all around you. With this release, Greenwood is able to deliver another step towards making sure it's just as easy to write a Web Component on the server, as it is in the browser; introducing _**Full Stack Web Components**_! ✨
 
 <style>
-  .blog-post-content-container img {
+  .page-content img {
     width: 30%!important;
     margin-left: 2%;
     float: right;
diff --git a/src/styles/blog.css b/src/styles/blog.css
@@ -1,55 +1,55 @@
 /* would be nice to have CSS nesting here... */
-.blog-post-content-container {
+.page-content {
   max-width: 100ch;
   padding: 0 var(--font-size-1);
 }
 
-.blog-post-content-container h1 {
+.page-content h1 {
   font-size: var(--font-size-5);
   margin: var(--size-4) 0 0;
 }
 
-.blog-post-content-container h2 {
+.page-content h2 {
   font-size: var(--font-size-4);
   font-weight: bold;
   line-height: 1.8rem;
   margin: var(--size-4) 0 var(--size-2);
 }
 
-.blog-post-content-container h3 {
+.page-content h3 {
   font-size: var(--font-size-2);
   margin: var(--size-3) 0;
 }
 
-.blog-post-content-container p,
-.blog-post-content-container em,
-.blog-post-content-container a,
-.blog-post-content-container strong,
-.blog-post-content-container code,
-.blog-post-content-container li {
+.page-content p,
+.page-content em,
+.page-content a,
+.page-content strong,
+.page-content code,
+.page-content li {
   font-size: var(--font-size-1);
 }
 
-.blog-post-content-container p {
+.page-content p {
   margin: var(--size-4) 0 var(--size-3);
   line-height: var(--font-lineheight-2);
 }
 
-.blog-post-content-container img {
+.page-content img {
   width: 100%;
   margin: var(--size-2) 0;
 }
 
-.blog-post-content-container ol,
-.blog-post-content-container ul {
+.page-content ol,
+.page-content ul {
   padding-left: var(--size-4);
 }
 
-.blog-post-content-container li {
+.page-content li {
   padding: var(--size-1);
 }
 
-.blog-post-content-container blockquote {
+.page-content blockquote {
   padding: var(--size-1);
   background-color: var(--color-accent) !important;
   border-left: var(--size-1) solid var(--color-secondary);
@@ -62,25 +62,25 @@
   font-style: italic;
 }
 
-.blog-post-content-container code[class*="language-"],
-.blog-post-content-container pre[class*="language-"],
-.blog-post-content-container .token {
+.page-content code[class*="language-"],
+.page-content pre[class*="language-"],
+.page-content .token {
   font-size: 0.9rem;
 }
 
 @media (min-width: 768px) {
-  .blog-post-content-container {
+  .page-content {
     max-width: 65ch;
     margin: var(--size-2) auto var(--size-4);
   }
 
-  .blog-post-content-container code[class*="language-"],
-  .blog-post-content-container pre[class*="language-"],
-  .blog-post-content-container .token {
+  .page-content code[class*="language-"],
+  .page-content pre[class*="language-"],
+  .page-content .token {
     font-size: 1rem;
   }
 
-  .blog-post-content-container blockquote {
+  .page-content blockquote {
     margin: var(--size-1);
     padding: var(--size-2);
   }

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ layout: blog`
`15`	`15`	`After a lot of hard work, the Greenwood team is eager to share our first round of enhancements related to our [SSR work](/blog/release/v0-24-0/). By fully leaning into Web Components as a standard API for server rendered pages, we have finally realized something we've been chasing since the early days of the project; all made possible through a new library we've started developing called [Web Components Compiler (WCC)](https://github.com/ProjectEvergreen/wcc)! 📣`
`16`	`16`
`17`	`17`	`<style>`
`18`		`- .blog-post-content-container img {`
	`18`	`+ .page-content img {`
`19`	`19`	`width: 60%!important;`
`20`	`20`	`margin-left: 20%;`
`21`	`21`	`}`