Messing with tag image size and img margins within posts

ostyn · May 22, 2017 · 98504e7 · 98504e7
1 parent 688b89d
commit 98504e7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
@@ -194,13 +194,18 @@ h2 {
 .expandedPostTitle {
     bottom: 0px;
     right: 0px;
+    font-size: 20px;
     background-color: rgba(0, 0, 0, 0.5);
     padding: 10px;
     border-radius: 4px;
 }
 .headerImage {
     position:relative;
     min-height: 100px;
+    display: table-row;
+    border-radius: 4px;
+    width: auto;
+    max-width: 100%;
 }
 .header {
     position:relative;
@@ -269,6 +274,8 @@ h2 {
     left: 0px;
 }
 .blogPostBody * img {
+    margin-top: 10px;
+    margin-bottom: 10px;
     display: table-row;
     border-radius: 4px;
     width: auto;
@@ -437,8 +444,8 @@ button:first-child {
     overflow: hidden;
 }
 .tagsFeedPostWidget {
-    max-width: 19%;
-    min-width: 180px;
+    max-width: 23%;
+    min-width: 200px;
     display: inline-block;
     vertical-align: top;
     margin-right: 10px;

diff --git a/frontend/src/widgets/post-widget.html b/frontend/src/widgets/post-widget.html
@@ -2,7 +2,7 @@
     <require from="converters/trim-html-converter"></require>
     <require from="converters/markdown-format"></require>
     <require from="attributes/oneDriveProxyOnError"></require>
-    <div class="blogPostBody" show.bind="post != undefined">
+    <div show.bind="post != undefined">
 
         <center>
             <a if.bind="(showTitleLink === 'true' || showTitleLink === true)" class="titleLink" route-href="route: post; params.bind: getLinkParams(post)">
@@ -25,7 +25,7 @@
             <button class="mapButton" click.trigger="toggleMap()">${(mapShown)?'X':post.locationInfo.name}</button>
             <google-map if.bind="mapLoaded" show.bind="mapShown" address.bind="post.locationInfo.name" zoom="7"></google-map>
         </span>
-        <div innerhtml.bind="post.content | markdownFormat | trimHtml : contentLength"></div>
+        <div class="blogPostBody" innerhtml.bind="post.content | markdownFormat | trimHtml : contentLength"></div>
         <div if.bind="(showLastEditedDate === 'true' || showLastEditedDate === true) && post.dateLastEdited != undefined">
             <p class="grey">Updated on ${formatLib.secondsToDate(post.dateLastEdited)} at ${formatLib.secondsToTime(post.dateLastEdited)}</p>
         </div>