CodeMyUI · May 28, 2017 03:40 · May 28, 2017
diff --git a/index.jade b/index.jade
@@ -0,0 +1,25 @@
+- var images = [ 'https://static.pexels.com/photos/5938/food-salad-healthy-lunch-medium.jpg', 'https://static.pexels.com/photos/5927/food-salad-red-lunch-large.jpg', 'https://static.pexels.com/photos/6118/food-water-corn-cooking-medium.jpg', 'https://static.pexels.com/photos/5876/food-salad-healthy-vegetables-medium.jpg',  'https://static.pexels.com/photos/5928/salad-healthy-diet-spinach-medium.jpg'];
+.container
+  ul.posts
+    each img in images
+      li.post
+          .post-content
+            header: a(href="https://twitter.com/@kamciesla") @kamciesla posted this
+            img(src=img)
+            footer 
+              a(href="https://kamilciesla.pl")
+                i.fa.fa-globe
+              a(href="https://pl.linkedin.com/in/kamilciesla")
+                i.fa.fa-linkedin
+              a(href="https://twitter.com/@kamciesla")
+                i.fa.fa-twitter
+              a(href="https://www.behance.net/kamciesla")
+                i.fa.fa-behance
+              a(href="https://dribbble.com/kamilciesla")
+                i.fa.fa-dribbble
+          a.post-avatar(href="http://kamilciesla.pl")
+  p.no-posts Sorry... there are no more posts to show right now.
+
+
+
+
diff --git a/script.js b/script.js
@@ -0,0 +1,19 @@
+$('.post-avatar').each(function() {
+  var avatar = $(this),
+    avatarWatcher = scrollMonitor.create(avatar.parent(), {
+      top: 20,
+      bottom: -avatar.height() - 20
+    });
+
+  avatarWatcher.stateChange(function() {
+    if (avatarWatcher.isInViewport) {
+      if (avatarWatcher.isInViewport && avatarWatcher.isAboveViewport) {
+        avatar.removeClass('post-avatar--absolute').addClass('post-avatar--fixed');
+      } else if (!avatarWatcher.isAboveViewport) {
+        avatar.removeClass('post-avatar--absolute').removeClass('post-avatar--fixed');
+      }
+    } else {
+      avatar.removeClass('post-avatar--fixed').addClass('post-avatar--absolute');
+    }
+  });
+});
diff --git a/scripts b/scripts
@@ -0,0 +1,2 @@
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmonitor/1.0.12/scrollMonitor.min.js"></script>
diff --git a/sticky-avatars-dashboard.markdown b/sticky-avatars-dashboard.markdown
@@ -0,0 +1,7 @@
+Sticky Avatars Dashboard
+------------------------
+Avatar fixed positioning and locking inspired by Tumblr's dashboard using scrollMonitor.
+
+A [Pen](https://codepen.io/kamce/pen/jbrNKX) by [kamce](http://codepen.io/kamce) on [CodePen](http://codepen.io/).
+
+[License](https://codepen.io/kamce/pen/jbrNKX/license).
diff --git a/style.scss b/style.scss
@@ -0,0 +1,88 @@
+$max-width: 650px;
+$avatar-width: 80px;
+
+$grey-d: #666;
+$grey-l: #a2a2a2;
+$white: #fff; 
+
+body {
+  background: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/restaurant.png');
+  font: bold 13px Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: $grey-l;
+  text-decoration: none;
+  transition: color .3s ease;
+
+  footer & { margin-right: 10px; }
+
+  &:hover { color: $grey-d; }
+
+}
+
+.container {
+  max-width: $max-width;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.no-posts {
+  padding: 50px 10px 30px $avatar-width + 20;
+  text-align: center;
+  color: $white;
+}
+
+.posts {
+  list-style: none;
+  margin: 20px auto;
+  padding: 0;
+  width: 100%;
+
+  .post {
+    margin-top: 20px;
+    margin-left: $avatar-width+20;
+    position: relative;
+  }
+
+  .post-avatar {
+    background: $white url('http://on.be.net/1Noq5Sf') center/100%;
+    height: $avatar-width;
+    width: $avatar-width;
+    border-radius: 4px;
+    position: absolute;
+    left: -$avatar-width - 20px;
+    top: 0;
+
+
+    &.post-avatar--fixed {
+      position: fixed;
+      left: 50%;
+      top: 20px;
+      margin-left: -$max-width/2;
+    }
+
+    &.post-avatar--absolute {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      margin-left: -$avatar-width - 20;
+      top: auto;
+    }
+  }
+
+  .post-content {
+    background: $white;
+    border-radius: 4px;
+    width: 100%;
+
+    img {
+      width: 100%;
+    }
+
+    header, footer {
+      padding: 15px 20px;
+    }
+  }
+}
+
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmonitor/1.0.12/scrollMonitor.min.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />