Clean up the css and template for the detail view.

This commit is contained in:
Brent Simmons 2018-02-28 22:38:29 -08:00
parent a8068d8297
commit 8e03ac39b8
3 changed files with 41 additions and 63 deletions

View File

@ -163,12 +163,10 @@ class ArticleRenderer {
var d = [String: String]()
let title = titleOrTitleLink()
d["newsitem_title"] = title
d["article_title"] = title
d["title"] = title
let body = article.body == nil ? "" : article.body
d["article_description"] = body
d["newsitem_description"] = body
d["body"] = body
d["avatars"] = ""
var didAddAvatar = false
@ -462,7 +460,7 @@ class ArticleRenderer {
s += "\n\n</body></html>"
// print(s)
//print(s)
return s

View File

@ -1,10 +1,10 @@
body {
color: #444;
background-color: white;
margin-top: 0px;
margin-bottom: 100px;
margin-left: 0px;
margin-right: 0px;
margin-top: 20px;
margin-bottom: 64px;
margin-left: 64px;
margin-right: 64px;
font-family: -apple-system;
font-size: 18px;
}
@ -12,33 +12,33 @@ a {
text-decoration: none;
}
a, a:link, a:visited {
color: hsla(215, 99%, 43%, 1);
color: #416ED2;
}
a:hover {
text-decoration: underline;
}
.content {
margin-left: 64px;
margin-right: 64px;
.headerTable {
width: 100%;
height: 68px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.articleDateline {
color: rgba(0, 0, 0, 0.3);
padding-bottom: 0px;
padding-top: 0px;
margin-bottom: 26px;
font-weight: medium;
}
.articleDateline, .articleDateline a:link, .articleDateline a:visited {
.header a:link, .header a:visited {
color: rgba(0, 0, 0, 0.3);
}
#articleDescription {
line-height: 1.5em;
.header {
color: rgba(0, 0, 0, 0.3);
}
#authorAvatar {
margin-top: 2em;
text-align: left;
.feedlink {
font-weight: bold;
}
#authorAvatar img {
.feedlink a:link, .feedlink a:visited {
color: rgba(0, 0, 0, 0.6);
}
.avatar img {
border-radius: 4px;
}
.feedIcon {
border-radius: 4px;
}
.rightAlign {
@ -47,44 +47,27 @@ a:hover {
.leftAlign {
text-align: left;
}
.articleTitle {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 1em;
padding-bottom: 0;
margin-bottom: 0;
margin-top: 26px;
}
.headerContainer {
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(66, 66, 73, 1.0);
.articleDateline {
color: rgba(0, 0, 0, 0.3);
margin-bottom: 25px;
font-weight: bold;
}
/*.headerContainer a:link, .headerContainer a:visited {*/
/* color: rgba(1, 1, 1, 0.3);*/
/*}*/
.header, .header a:link, .header a:visited {
color: rgba(255, 255, 255, 0.75);
.articleDateline, .articleDateline a:link, .articleDateline a:visited {
color: rgba(0, 0, 0, 0.3);
}
.header {
padding-left: 64px;
padding-right: 64px;
}
.headerTable {
width: 100%;
height: 68px;
}
.avatar img {
border-radius: 4px;
}
.feedIcon {
border-radius: 4px;
.articleBody {
line-height: 1.6em;
}
h1 {
line-height: 1.15em;
font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, "Helvetica Neue"
}
code, pre {
font-family: "SF Mono", Menlo, "Courier New", Courier, monospace;
font-size: 14px;

View File

@ -1,15 +1,12 @@
<!--<div class="headerContainer"><p>[[avatars]]</p>
<p>[[feedlink]] • [[byline]] • [[date_short]]</p></div>-->
<div class="headerContainer">
<table cellpadding=0 cellspacing=0 border=0 class="headerTable">
<tr>
<td class="header leftAlign"><b>[[feedlink]]</b><br />[[byline]]</td>
<td class="header leftAlign"><span class="feedlink">[[feedlink]]</span><br />[[byline]]</td>
[[avatars]]
</tr>
</table>
</div>
<div class="content">
<div class="articleTitle"><h1>[[newsitem_title]]</h1></div>
<div class="articleTitle"><h1>[[title]]</h1></div>
<div class="articleDateline">[[date_medium]]</div>
<div id="articleDescription">[[newsitem_description]]</div>
</div>
<div class="articleBody">[[body]]</div>