From 66332cbb51f3ec0f47add312af2831a3efb05455 Mon Sep 17 00:00:00 2001 From: memorte03 Date: Mon, 3 Feb 2020 20:22:41 +0100 Subject: [PATCH 1/2] added bagde-avatar badge-tag and changed color of the dafault badge --- pages/_docs/badges.md | 22 +++++++++++++++++++++ pages/_includes/ui/badge.html | 19 +++++++++++++++++- scss/ui/_badges.scss | 36 +++++++++++++++++++++++++++++------ 3 files changed, 70 insertions(+), 7 deletions(-) diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md index e4249c72e..44623a40e 100644 --- a/pages/_docs/badges.md +++ b/pages/_docs/badges.md @@ -56,3 +56,25 @@ If you don't want your badge to contain any text you can do it by leaving the ht {% endfor %} {% endexample %} + +### Badge addons + +You can add badge addon by adding `.badge-addon` class. + +{% example %} +{% include ui/badge.html text="task" color="green" addon="finished" %} +{% include ui/badge.html text="bundle" color="purple" addon="passing" %} +{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %} +{% endexample %} + +### Badge avatars + +If you want to add an avatar to your badge just create `.badge-avatar` class. + +{% example %} +{% include ui/badge.html person-id=1 color="blue" %} +{% include ui/badge.html person-id=2 color="blue" %} +{% include ui/badge.html person-id=3 color="blue" %} +{% include ui/badge.html person-id=4 color="blue" %} +{% include ui/badge.html person-id=5 color="blue" %} +{% endexample %} \ No newline at end of file diff --git a/pages/_includes/ui/badge.html b/pages/_includes/ui/badge.html index dd95f023b..beb5a5a9c 100644 --- a/pages/_includes/ui/badge.html +++ b/pages/_includes/ui/badge.html @@ -1 +1,18 @@ -{{ include.text }} +{% assign el = 'span' %} +<{{ el }} class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}"> +{% if include.person-id %} + {% assign person-id = include.person-id | minus: 1 %} + {% assign person = site.data.people[person-id] %} + {% assign src = person.photo %} + {% unless src %} + {% assign placeholder = person.full_name | first_letters %} + {% endunless %} + <{{ el }} class="badge-avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %} + {% endif %} +{% if include.text %} + {{ include.text }} +{% else %} + {{ person.full_name }} +{% endif %} +{% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}{% endif %} + diff --git a/scss/ui/_badges.scss b/scss/ui/_badges.scss index 8c3cfa30b..f1b7193a3 100644 --- a/scss/ui/_badges.scss +++ b/scss/ui/_badges.scss @@ -1,9 +1,13 @@ - - .badge { @include subheader(false); - background: $gray-200; - + display: inline-flex; + justify-content: center; + padding: 0 .5em; + line-height: 1.75em; + background: $gray-500; + overflow: hidden; + vertical-align: text-bottom; + @at-root a#{&} { color: $white; } @@ -23,8 +27,8 @@ position: absolute; top: 25%; right: 0; - min-width: 1rem; - min-height: 1rem; + min-width: 1.75em; + min-height: 1.75em; padding: 0 .25rem; line-height: 1rem; background-clip: padding-box; @@ -39,4 +43,24 @@ .badge-pill { border-radius: 100px; + min-width: 1.75em; } + +.badge-avatar { + box-sizing: content-box; + width: 1.75em; + margin: 0 .5em 0 -.5em; + color: $light-white; + background: $light-black no-repeat center/cover; + vertical-align: text-bottom; +} + +.badge-addon { + padding: 0 .5rem; + margin: 0 -.5em 0 .5em; + min-width: 1.75em; + background: $light-black; + text-align: center; + color: $white; + text-decoration: none; +} \ No newline at end of file From 4289a763b3043cc6fd61c6f390172a6f7799b68d Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 16 Feb 2020 20:45:19 +0100 Subject: [PATCH 2/2] reformat code --- pages/_layouts/base.html | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html index 79869666c..d4b2b8c60 100644 --- a/pages/_layouts/base.html +++ b/pages/_layouts/base.html @@ -2,34 +2,36 @@ {% include layout/banner.html %} - - - + + + - {% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }} + {% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }} - + - - - - - - + + + + + + - - + + - {% if page.description %} - - {% endif %} + {% if page.description %} + + {% endif %} - {% include layout/og.html show=layout.og-component %} - {% include layout/css.html %} + {% include layout/og.html show=layout.og-component %} + {% include layout/css.html %} + + {% include layout/js.html %} {% assign dark-theme = page.dark-theme | default: site.dark-theme %} @@ -39,7 +41,6 @@ {% include layout/modals-capture.html %} - {% include layout/js.html %} {% include layout/js-capture.html %} {% if site.debug and jekyll.environment == 'development' %}