Better styling on code elements

This commit is contained in:
Marcus Noble 2021-02-21 09:30:11 +00:00
parent 122bfd666a
commit 126820ade6

View File

@ -35,12 +35,20 @@ class FeedItem extends HTMLElement {
img { img {
margin: auto auto !important; margin: auto auto !important;
} }
h1, h2, h3, h4 {
margin-top: 1.3em;
}
h1:first-of-type {
margin-top: 0;
}
p, a {
line-height: 1.2em;
}
p { p {
font-family: charter, Georgia, "Times New Roman", Times, serif; font-family: charter, Georgia, "Times New Roman", Times, serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
letter-spacing: -0.063px; letter-spacing: -0.063px;
line-height: 32px
} }
a { a {
color: #333; color: #333;
@ -53,12 +61,26 @@ class FeedItem extends HTMLElement {
color: #ff2e88; color: #ff2e88;
} }
pre {
overflow-x: scroll;
padding: 8px;
background: #62848463;
}
pre code {
margin-right: 8px;
}
p code {
background: #62848463;
padding: 0 4px;
}
</style> </style>
`; `;
fetch(`/api/item/${this.getAttribute('item-id')}`) fetch(`/api/item/${this.getAttribute('item-id')}`)
.then(res => res.json()) .then(res => res.json())
.then(item => { .then(item => {
template.innerHTML += `<h1><a href="${item.URL}" target="_blank" rel="noopener">${item.Title}</a></h1>`;
template.innerHTML += item.Content || item.Description; template.innerHTML += item.Content || item.Description;
this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.appendChild(template.content.cloneNode(true));
[...this.shadowRoot.querySelectorAll('a[href^=http]')].forEach(a => { [...this.shadowRoot.querySelectorAll('a[href^=http]')].forEach(a => {