avatars

_docs/avatars.md

@@ -0,0 +1,77 @@
+---
+title: Avatars
+---
+
+### Simple avatar
+
+{% example html wrapper=avatar-list %}
+{% for user in site.data.users limit: 5 offset: 20 %}
+<span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
+{% endfor %}
+{% endexample %}
+
+### Avatar size
+
+{% example html wrapper=avatar-list %}
+<span class="avatar avatar-sm" style="background-image: url({{ site.base }}/{{ site.data.users[10].photo }})"></span>
+<span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[11].photo }})"></span>
+<span class="avatar avatar-md" style="background-image: url({{ site.base }}/{{ site.data.users[12].photo }})"></span>
+<span class="avatar avatar-lg" style="background-image: url({{ site.base }}/{{ site.data.users[13].photo }})"></span>
+<span class="avatar avatar-xl" style="background-image: url({{ site.base }}/{{ site.data.users[14].photo }})"></span>
+<span class="avatar avatar-xxl" style="background-image: url({{ site.base }}/{{ site.data.users[15].photo }})"></span>
+{% endexample %}
+
+
+### Avatar status
+
+{% example html wrapper=avatar-list %}
+<span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[39].photo }})"></span>
+<span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[40].photo }})">
+  <span class="avatar-status"></span>
+</span>
+<span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[41].photo }})">
+  <span class="avatar-status bg-red"></span>
+</span>
+<span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[42].photo }})">
+  <span class="avatar-status bg-green"></span>
+</span>
+<span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[43].photo }})">
+  <span class="avatar-status bg-yellow"></span>
+</span>
+{% endexample %}
+
+### Avatar placeholder
+
+{% example html wrapper=avatar-list %}
+{% for user in site.data.users limit: 3 offset: 10 %}
+<span class="avatar">{{ user.name | first_letter }}{{ user.surname | first_letter }}</span>
+{% endfor %}
+<span class="avatar avatar-placeholder"></span>
+<span class="avatar"><i class="fe fe-more-horizontal"></i></span>
+{% endexample %}
+
+{% example html wrapper=avatar-list %}
+{% for color in site.colors %}
+{% assign user = site.data.users[forloop.index] %}
+<span class="avatar avatar-{{ color[0] }}">{{ user.name | first_letter }}{{ user.surname | first_letter }}</span>
+{% endfor %}
+{% endexample %}
+
+### Avatars list
+
+{% example html %}
+<div class="avatar-list">
+{% for user in site.data.users limit: 5 offset: 20 %}
+  <span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
+{% endfor %}
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="avatar-list avatar-list-stacked">
+  {% for user in site.data.users limit: 5 offset: 30 %}
+  <span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
+  {% endfor %}
+  <span class="avatar">+8</span>
+</div>
+{% endexample %}

_docs/typography.md

@@ -90,8 +90,7 @@ When you can't use the CSS classes you want, or when you just want to directly u
   <h5>Fifth level</h5>
   <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
   <figure>
-    <img src="https://bulma.io/images/placeholders/256x256.png">
-    <img src="https://bulma.io/images/placeholders/256x256.png">
+    <img src="https://placehold.it/256x256">
     <figcaption>
       Figure 1: Some beautiful placeholders
     </figcaption>

_plugins/jekyll-tabler.rb

@@ -41,6 +41,10 @@ module Jekyll
         'red'
       end
     end
+
+    def first_letter(value)
+      return value[0, 1]
+    end
   end
 end
 

assets/scss/dashboard/_avatar.scss

@@ -4,11 +4,18 @@
 	line-height: 2rem;
 	border-radius: 50%;
 	display: inline-block;
-	background: #999 no-repeat center/cover;
+	background: $gray-400 no-repeat center/cover;
 	position: relative;
 	text-align: center;
-	color: rgba(#fff, .8);
+	color: $gray-600;
 	font-weight: 600;
+	vertical-align: bottom;
+	font-size: .875rem;
+
+	i {
+		font-size: 125%;
+		vertical-align: sub;
+	}
 }
 
 .avatar-status {
@@ -26,50 +33,68 @@
 	width: 1.5rem;
 	height: 1.5rem;
 	line-height: 1.5rem;
+	font-size: .75rem;
 }
 
 .avatar-md {
 	width: 2.5rem;
 	height: 2.5rem;
 	line-height: 2.5rem;
+	font-size: 1rem;
 }
 
 .avatar-lg {
 	width: 3rem;
 	height: 3rem;
 	line-height: 3rem;
+	font-size: 1.25rem;
 }
 
 .avatar-xl {
 	width: 4rem;
 	height: 4rem;
 	line-height: 4rem;
+	font-size: 1.75rem;
 }
 
 .avatar-xxl {
 	width: 5rem;
 	height: 5rem;
 	line-height: 5rem;
+	font-size: 2rem;
+}
+
+.avatar-placeholder {
+	background: $gray-400 url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="134" height="134" viewBox="0 0 134 134"><path fill="' + $gray-600 + '" d="M65.92 66.34h2.16c14.802.42 30.928 6.062 29.283 20.35l-1.618 13.32c-.844 6.815-5.208 7.828-13.972 7.866H52.23c-8.764-.038-13.13-1.05-13.973-7.865l-1.62-13.32C34.994 72.4 51.12 66.76 65.92 66.34zM49.432 43.934c0-9.82 7.99-17.81 17.807-17.81 9.82 0 17.81 7.99 17.81 17.81 0 9.82-7.99 17.807-17.81 17.807-9.82 0-17.808-7.987-17.808-17.806z"/></svg>') no-repeat center/80%;
 }
 
 .avatar-list {
-	display: flex;
-	flex-wrap: wrap;
-	list-style: none;
-	margin: 0 -.375rem -.75rem;
+	margin: 0 0 -.5rem;
 	padding: 0;
-}
+	font-size: 0;
 
-.avatar-list-item {
-	padding: 0 .375rem .75rem;
+	.avatar {
+		margin-bottom: .5rem;
+
+		&:not(:last-child) {
+			margin-right: .5rem;
+		}
+	}
 }
 
 .avatar-list-stacked {
-	.avatar-list-item + .avatar-list-item {
-		margin-left: -8%;
+	.avatar {
+		margin-right: -.8em !important;
 	}
 
 	.avatar {
 		box-shadow: 0 0 0 2px #fff;
 	}
+}
+
+@each $vendor, $color in $colors {
+	.avatar-#{$vendor} {
+		background-color: mix($color, #fff, 30%);
+		color: $color;
+	}
 }

assets/scss/dashboard/_example.scss

@@ -1,5 +1,5 @@
 .example {
-	padding: 1rem;
+	padding: 1.5rem;
 	border: 1px solid $border-color;
 	border-radius: 3px 3px 0 0;
 	font-size: px2rem(15px);

assets/scss/dashboard/_type.scss

@@ -82,9 +82,13 @@ img {
 
 	> {
 		h1, h2, h3, h4, h5, h6 {
-			margin-top: 1.5em;
+			margin-top: 1em;
 		}
 	}
+
+	table {
+		@extend .table, .table-bordered;
+	}
 }
 
 .section-nav {