added social links to user bios and styling

lemonstand · Aug 15, 2016 · 3e0546d · 3e0546d
1 parent 4313706
commit 3e0546d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/pages/blog-post/page-blog-post.htm b/pages/blog-post/page-blog-post.htm
@@ -7,12 +7,21 @@
 url: /blog/:slug
 ---
 <div class="row">
+	<!-- BLOG -->
     <em class="twelve columns">In {{ post.type }} | {{ post.published_on | date("F j, Y") }}</em> 
     {{ post.body | unescape }}
     <p class="twelve columns">– {{ post.author_name }}</p>
-    <img src="{{ post.profile_image.thumbnail(252, 'auto')|default('http://placehold.it/1000x365') }}" height="200" width="200"/>
-    {{ post.user.user_bio|unescape }}
-    <a href="{{ post.user.getSocialLink("facebook") }}"><img src="{{ 'images/facebook.png'|theme_resource }}"/></a>
-    <a href="{{ post.user.getSocialLink("twitter") }}"><img src="{{ 'images/twitter.png'|theme_resource }}"/></a>
-    <a href="{{ post.user.getSocialLink("instagram") }}"><img src="{{ 'images/instagram.png'|theme_resource }}"/></a>
+    <!-- BIO -->
+	<div class="bio-container">
+	    <img class="img-circle" src="{{ post.profile_image.thumbnail(252, 'auto')|default('http://placehold.it/1000x365') }}" style="height: 100px; width: 100px;"/>
+	    <strong>{{ post.author_name }}</strong>
+	    <span class="social-links">
+		    <a href="{{ post.user.getSocialLink("facebook") }}"><img src="{{ theme.facebookImage.thumbnail('auto', 'auto') }}"/></a>
+		    <a href="{{ post.user.getSocialLink("twitter") }}"><img src="{{ theme.twitterImage.thumbnail('auto', 'auto') }}"/></a>
+		    <a href="{{ post.user.getSocialLink("instagram") }}"><img src="{{ theme.instagramImage.thumbnail('auto', 'auto') }}"/></a>
+	    </span>
+		<div class="author-bio">
+			{{ post.user.user_bio|unescape }}
+		</div>
+	</div>
 </div>
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -605,3 +605,28 @@ float:right;
 .padding-bottom {
   padding-bottom: 40px;
 }
+
+/* AUTHOR BIO */
+
+.img-circle {
+    border-radius: 50%; 
+    float: left; 
+    margin-right: 10px; }
+
+.author-bio {
+    font-size: 75%;
+    padding-left: 5px; }
+
+.bio-container {
+  float: left; }
+
+strong {
+   float: left; 
+   padding-right: 10px; }
+
+.social-links a {
+  text-decoration: none;
+  color: #4a4a4a; 
+  display: inline-block;
+  padding-left: 1px;
+  margin-top: 1px; }
diff --git a/theme.yaml b/theme.yaml
@@ -1,13 +1,13 @@
 ---
 name: 'Zest Theme'
-author: 'LemonStand'
+author: LemonStand
 website: 'https://lemonstand.com'
 engine: twig
 404: '404'
 customFields:
     logoImage: { type: image, title: 'Logo Image', default: '@images/zest-logo.png', comment: 'Upload your logo! Recommended height of 77px.' }
     bannerImage: { type: image, title: 'Banner Image', default: '@images/zest-banner-bg.jpg', comment: 'Upload your own homepage banner! Recommended dimensions of 960px by 368px.' }
-    bannerTitleText: { type: text, title: 'Banner Title Text', default: 'Zest', comment: 'Text used for the homepage banner title.' }
+    bannerTitleText: { type: text, title: 'Banner Title Text', default: Zest, comment: 'Text used for the homepage banner title.' }
     bannerSentenceText: { type: text, title: 'Banner Sentence Text', default: 'A responsive LemonStand theme', comment: 'Text used for the homepage banner sentence.' }
     globalLinkColor: { type: color, title: 'Global Link Color', default: '#DC3E2F', comment: 'Color used for links throughout the website, including product names.' }
     globalLinkHoverColor: { type: color, title: 'Global Link Hover Color', default: '#9f261b', comment: 'Color used for links throughout the website when you hover your mouse cursor over.' }
@@ -17,6 +17,7 @@ customFields:
     buttonHoverColor: { type: color, title: 'Button Hover Color', default: '#b92c1f', comment: 'Button color when you hover your mouse cursor over.' }
     buttonBorderColor: { type: color, title: 'Button Border Color', default: '#DC3E2F', comment: 'Border color for buttons.' }
     faviconImage: { type: image, title: 'Favicon Image', default: '@images/favicon.png', comment: 'Upload your favicon. Recommended dimmensions of 16px by 16px. You must use a .png file.' }
+    facebookImage: { type: image, title: 'Facebook Logo', default: '@images/facebook.png', comment: 'Upload your own social link icons! Recommended dimmensions of 16px by 16px.' }
+    twitterImage: { type: image, title: 'Twitter Logo', default: '@images/twitter.png', comment: 'Upload your own social link icons! Recommended dimmensions of 16px by 16px.' }
+    instagramImage: { type: image, title: 'Instagram Logo', default: '@images/instagram.png', comment: 'Upload your own social link icons! Recommended dimmensions of 16px by 16px.' }
 ---
-
-