style improvements

fabfile.py

@@ -56,6 +56,7 @@ def serveUp():
 
 @task(default=True)
 def build():
+    local("rm -rf ./build")
     local("mkdir -p build/{scripts,styles}")
     buildScss()
     buildJS()

src/scripts/post.tag

@@ -10,6 +10,7 @@
       next={this.next}
     >
     </div>
+    <loading if={this.loading && !this.parent.state.loaded}></loading>
     <div class="text-break">
       <div class={"animated " + (this.loading ? "invisible" : "fadeIn")}>
         <social
@@ -94,7 +95,7 @@ next(ev) {
 
 toTop() {
   jquery('html, body').stop().animate({
-     scrollTop: jquery(".navigate").offset().top-15
+     scrollTop: jquery(".blog-title").offset().top-15
   }, 1000);
 }
 

src/scripts/social.tag

@@ -1,6 +1,8 @@
 <social>
+  <div class="social-wrapper">
     <raw ref="button" content={this.tweetHtml}>
     </raw>
+  </div>
 <script>
 
 import './raw.tag';
@@ -16,7 +18,7 @@ updateButton(_id, title) {
   }
   if (_id != self._id) {
 
-    self.tweetHtml = `<a style="display:none;" class="twitter-share-button" data-text="${title}" data-via="weskerfoot" data-show-count="false" data-url="https://primop.me/blog/#!posts/${_id}" ref="tweet">Tweet ${_id}</a>`;
+    self.tweetHtml = `<a style="display:none;" data-size="large" class="btn twitter-share-button" data-text="${title}" data-via="weskerfoot" data-show-count="false" data-url="https://primop.me/blog/#!posts/${_id}" ref="tweet">Tweet ${_id}</a>`;
     self._id = _id;
     self.update();
   }

src/styles/riotblog.scss

@@ -5,10 +5,22 @@ $branding3: #1b4c6c;
 
 $menuWidth: 60px;
 
+.twitter-share-button-rendered {
+  font-size: 1.5em;
+}
+
+.social-wrapper {
+  height: 25px;
+}
+
+.social {
+  margin-top: 25%;
+}
+
 .branded, button {
-  border-radius: 5px;
+  border-radius: 5px !important;
   border-color: $branding2 !important;
-	display: block;
+	display: block !important;
 	margin-top: 0;
 	padding: .6rem 1.2rem .4rem 1.2rem;
 	text-decoration: none;
@@ -75,6 +87,7 @@ p, h6, h4 {
   font-weight: 600;
 	line-height: 1.6em;
 	color: #3A4145;
+  text-align: center;
 }
 
 .post-author {
@@ -170,15 +183,15 @@ p, h6, h4 {
 
 .content {
   margin: auto;
-  max-width: 50%;
-  @media (max-width: 1000px) {
   max-width: 70%;
+  @media (max-width: 1000px) {
+    max-width: 80%;
   }
   @media (max-width: 800px) {
-    max-width: 80%;
+    max-width: 90%;
   }
   @media (max-width: 400px) {
-    max-width: 90%;
+    max-width: 100%;
   }
 }