fixed styles

thegreenhouseio · Mar 20, 2021 · a5ee592 · a5ee592
1 parent 08da600
commit a5ee592
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/src/styles/post-details.css b/src/styles/post-details.css
@@ -0,0 +1,26 @@
+p {
+  width: 60%;
+  margin: 10px auto;
+  padding: 10px;
+}
+
+img {
+  display: block;
+  width: 70%;
+  margin: 0 auto;
+}
+
+ul {
+  list-style-type: none;
+  width: 70%;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+}
+
+pre {
+  width: 400px;
+  display: block;
+  margin: 0 auto;
+  text-align: left;
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -20,4 +20,11 @@ h4,
 h5,
 h6 {
   line-height: 1.4;
+}
+
+p {
+  text-align: center;
+  width: 50%;
+  margin: 20px auto;
+  font-size: 1.1em;
 }
diff --git a/src/templates/post.html b/src/templates/post.html
@@ -3,6 +3,7 @@
 
   <head>
     <script type="module" src="/templates/post.js"></script>
+    <link rel="stylesheet" href="/styles/post-details.css"></script>
   </head>
 
   <body>

diff --git a/src/templates/post.js b/src/templates/post.js
@@ -1,7 +1,7 @@
 import { css, html, LitElement } from 'lit-element';
 import client from '@greenwood/plugin-graphql/core/client';
 import GraphQuery from '../queries/graph.gql';
-import '../components/blog-post-details/blog-post-details.js';
+// import '../components/blog-post-details/blog-post-details.js';
 
 class BlogPostComponent extends LitElement {
 
@@ -27,6 +27,17 @@ class BlogPostComponent extends LitElement {
 
   static get styles() {
     return css`
+      :host .header {
+        background-repeat: no-repeat;
+        background-position: center;
+        line-height: 125px;
+        height: 200px;
+      }
+        
+      :host .header h1, :host .header h5 {
+        text-align: center;
+      }
+
       p {
         width: 60%;
         margin: 10px auto;
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
       <head>
         <script type="module" src="/templates/post.js"></script>
+        <link rel="stylesheet" href="/styles/post-details.css"></script>
       </head>
       <body>
@@ Expand Down @@