From a5ee592e455be6d0c141d571a677d90781df300b Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 20 Mar 2021 13:13:06 -0400 Subject: [PATCH] fixed styles --- src/styles/post-details.css | 26 ++++++++++++++++++++++++++ src/styles/theme.css | 7 +++++++ src/templates/post.html | 1 + src/templates/post.js | 13 ++++++++++++- 4 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/styles/post-details.css diff --git a/src/styles/post-details.css b/src/styles/post-details.css new file mode 100644 index 0000000..01ef724 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/styles/theme.css b/src/styles/theme.css index 8012da2..d2bf504 100644 --- 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; } \ No newline at end of file diff --git a/src/templates/post.html b/src/templates/post.html index 9b34f28..31cf150 100644 --- a/src/templates/post.html +++ b/src/templates/post.html @@ -3,6 +3,7 @@ + diff --git a/src/templates/post.js b/src/templates/post.js index 50e5426..e30e775 100644 --- 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;