Incremental updates during application on jekyll theme

gulpfile.js

@@ -32,6 +32,14 @@ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
     "./public/**/*.html",
   ],
   defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
+  whitelistPatterns: [
+    /^w-\d/,
+    /^h-\d/,
+    /^max-w-*/,
+    /^elevation-\d/,
+    /^text-*/,
+    /^ico--*/,
+  ],
 });
 
 
@@ -411,12 +419,13 @@ gulp.task('rollup:build:production', buildJSBundle("production"));
 
 gulp.task(
   "site:build",
-  gulp.parallel("tailwind-postcss:build", "rollup:build", "patternlab:build")
+  gulp.parallel("tailwind-postcss:build", "rollup:build")
 );
 
 gulp.task(
   "site:build:production",
-  gulp.parallel("tailwind-postcss:build:production", "rollup:build:production", "patternlab:build")
+  // Build patternlab first to have all the necessary CSS classes ready for auto purge.
+  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss:build:production", "rollup:build:production"))
 );
 
 /******************************************************

source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache

 <div class="social-icon-group space-x-2 {{ classes }}">
   {{> atoms-basic-social-icon(icon: "ico--twitter") }}
   {{> atoms-basic-social-icon(icon: "ico--feed") }}
+  {{> atoms-basic-social-icon(icon: "ico--youtube") }}
   {{> atoms-basic-social-icon(icon: "ico--instagram") }}
   {{> atoms-basic-social-icon(icon: "ico--flickr") }}
   {{> atoms-basic-social-icon(icon: "ico--envelope") }}

source/_patterns/01-molecules/program-point-list/program-point-list.mustache

+<dl class="program-point-list">
+  <dt>Participativní rozpočet.</dt>
+  <dd>Lidé vědí nejlépe, co jejich okolí trápí. Proto zavedeme participativní složku v rozpočtu města, o jejímž rozdělení mezi konkrétní projekty rozhodnou sami občané. Budeme usilovat o to, aby tato složka postupně rostla.</dd>
+  <dt>Participace ve školách.</dt>
+  <dd>Zapojíme děti do rozhodování o chodu jejich školy. Přirozenou formou se tak budou učit, co znamená být aktivním občanem.</dd>
+  <dt>Místní referenda, průzkumy a občanská setkání.</dt>
+  <dd>Chceme z Pardubic udělat město, které naslouchá svým občanům nejen před volbami. U každého velkého rozhodnutí se proto budeme již od začátku ptát na váš názor. Vše budeme plánovat tak, abyste se skutečně mohli zúčastnit.</dd>
+  <dt>Zpětná vazba od občanů.</dt>
+  <dd>Vidíte problém ve svém okolí, ale město ho neřeší? Dotáhneme stávající systém hlášení problémů tak, aby byl skutečně funkční a uživatelsky přívětivý, a zajistíme, abyste na každý podnět dostali odpověď.</dd>
+  <dt>Podaná ruka.</dt>
+  <dd>Řízení města není jednoduché. Budeme aktivně seznamovat občany s tím, jak jednotlivé procesy a postupy fungují (např. tvorba územního plánu a jeho změny).</dd>
+</dl>

source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache

 <article class="card elevation-0 bg-grey-50 container-padding--zero md:container-padding--auto">
   <div class="card__body p-4 lg:p-8 flex space-x-8 items-start">
-    <img src="/images/city-banner.png" />
+    <img src="/images/city-banner.png" class="w-16" />
     <div class="space-y-4 flex-grow">
       <div>
         <h1 class="head-alt-base mb-2"><a href="#">Svitavy</a></h1>
@@ -8,11 +8,12 @@
           {{> atoms-responsive-contact-line(icon: "ico--envelope", caption: "svitavsko@pirati.cz", classes: "font-light") }}
           {{> atoms-contact-line(icon: "ico--facebook text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
         </div>
+        <p class="mt-2 font-light text-sm leading-snug">{{ excerpt.short }}</p>
       </div>
       {{> molecules-condensed-badge(hideAvatar: true, hideOccupation: true) }}
     </div>
     <div class="hidden md:block">
-      <a href="#"><i class="ico--chevron-right text-3xl"></i></a>
+      <a href="#" class="no-underline hover:no-underline"><i class="ico--chevron-right text-3xl"></i></a>
     </div>
   </div>
 </article>

source/_patterns/01-molecules/switch/binary-switch.mustache

 <div class="switch">
-  <a class="switch__item {{^ secondActive }}switch__item--active{{/ secondActive }}">{{ cta1 }}{{^ cta1 }}{{ cta }}{{/ cta1 }}</a>
-  <a class="switch__item {{# secondActive }}switch__item--active{{/ secondActive }}">{{ cta2 }}{{^ cta2 }}{{ cta }}{{/ cta2 }}</a>
+  <a {{# viewProvider1 }}@click="toggleView('{{ viewProvider1 }}')"{{/ viewProvider1 }} class="switch__item {{^ secondActive }}switch__item--active{{/ secondActive }}">{{ cta1 }}{{^ cta1 }}{{ cta }}{{/ cta1 }}</a>
+  <a {{# viewProvider2 }}@click="toggleView('{{ viewProvider2 }}')"{{/ viewProvider2 }} class="switch__item {{# secondActive }}switch__item--active{{/ secondActive }}">{{ cta2 }}{{^ cta2 }}{{ cta }}{{/ cta2 }}</a>
 </div>

source/_patterns/03-templates/candidate-detail.mustache

@@ -2,8 +2,8 @@
 
 <article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 candidate-detail__hero {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
   <div class="container container--default text-center lg:text-left">
-    <h1 class="head-alt-md md:head-alt-xl">{{ person.first }} {{ person.last }}</h1>
-    <h2 class="head-xs mt-2">{{ person.occupation }}</h2>
+    <h1 class="head-alt-md md:head-alt-xl max-w-2xl">{{ person.first }} {{ person.last }}</h1>
+    <h2 class="head-xs mt-2 max-w-xl">{{ person.occupation }}</h2>
   </div>
 </article>
 

source/_patterns/03-templates/election-program-point.mustache

@@ -2,7 +2,7 @@
 
 <div class="container container--default py-8 lg:py-24">
   <main>
-    <div class="lg:flex lg:mt-8 lg:space-x-8 xl:space-x-16">
+    <div class="lg:flex lg:space-x-8 xl:space-x-16">
       <section class="lg:w-3/5 xl:w-2/3">
         <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">Řízení a organizační struktura města</h1>
         <p class="font-bold text-lg leading-normal mb-8">{{ excerpt.medium }}</p>

source/_patterns/03-templates/elections-candidates.mustache

-{{> organisms-header }}
-{{> organisms-elections-hero }}
-
-<div class="container container--default pt-8 lg:py-24">
-  <div class="text-center">
-    {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program") }}
-  </div>
-
-  <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Kandidátka do krajských voleb</h1>
-
-  <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border lg:candidate-card-list__item-wrapper--noborder") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
-    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
-    {{> molecules-banner(color: "bg-black", fullwidthButton: true, classes: "container-padding--zero sm:container-padding--auto")}}
-  </div>
-
-  <div class="candidate-table candidate-table--fadeout pt-8 container-padding--zero lg:container-padding--auto">
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-    {{> molecules-candidate-table-row }}
-  </div>
-
-  <div class="text-center pt-8">
-    {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "ico--chevron-right") }}
-  </div>
-
-  <div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
-    {{> atoms-super-button(cta: "Povolební strategie", icon: "ico--strategy", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
-    {{> atoms-super-button(cta: "Financování kampaně", icon: "ico--calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
-  </div>
-</div>
-
-{{> organisms-footer }}

source/_patterns/03-templates/elections-program.mustache

-{{> organisms-header }}
-{{> organisms-elections-hero }}
-
-<div class="container container--default pt-8 lg:py-24">
-  <div class="text-center">
-    {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program", secondActive: true) }}
-  </div>
-
-  <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Volební program</h1>
-
-  <div class="candidate-card-list grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Smart city" )}}
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Řízení a organizační struktura města" )}}
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Rozvoj města a bydlení" )}}
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Doprava" )}}
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Veřejný prostor a zeleň" )}}
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Vzdělávání" )}}
-    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Kultura a volný čas" )}}
-  </div>
-
-  <div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
-    {{> atoms-super-button(cta: "Povolební strategie", icon: "ico--strategy", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
-    {{> atoms-super-button(cta: "Financování kampaně", icon: "ico--calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
-  </div>
-</div>
-
-
-{{> organisms-footer }}

source/_patterns/03-templates/elections.mustache

+{{> organisms-header }}
+{{> organisms-elections-hero }}
+
+<div class="__js-root" data-app="ViewProvider">
+  <ui-view-provider inline-template :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
+    <main>
+      <div class="container container--default pt-8 lg:py-24">
+        <div class="text-center">
+          <div class="switch">
+            <a @click="toggleView('candidates')" class="switch__item" :class="{'switch__item--active': isCurrentView('candidates')}">Kandidáti</a>
+            <a @click="toggleView('program')" class="switch__item" :class="{'switch__item--active': isCurrentView('program')}">Program</a>
+          </div>
+        </div>
+
+        <template v-if="isCurrentView('candidates')">
+          <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Kandidátka do krajských voleb</h1>
+
+          <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
+            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border") }}
+            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
+            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border lg:candidate-card-list__item-wrapper--noborder") }}
+            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border") }}
+            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
+            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
+            {{> molecules-banner(color: "bg-black", fullwidthButton: true, classes: "container-padding--zero sm:container-padding--auto")}}
+          </div>
+
+          <ui-view-provider :initial="{fullCandidateTable: false}" v-slot="{ isCurrentView, setView }">
+            <div class="candidate-table pt-8 container-padding--zero lg:container-padding--auto" :class="{'candidate-table--fadeout': !isCurrentView('fullCandidateTable')}">
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              {{> molecules-candidate-table-row }}
+              <template v-if="isCurrentView('fullCandidateTable')">
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+                {{> molecules-candidate-table-row }}
+              </template>
+            </div>
+
+            <div class="text-center pt-8" v-if="!isCurrentView('fullCandidateTable')">
+              <button class="btn btn--icon text-xl btn--black btn--hoveractive" @click="setView('fullCandidateTable', true)">
+                <div class="btn__body-wrap">
+                  <div class="btn__body ">Zobrazit vše</div>
+                  <div class="btn__icon "><i class="ico--chevron-right"></i></div>
+                </div>
+              </button>
+            </div>
+          </ui-view-provider>
+        </template>
+
+        <template v-if="isCurrentView('program')">
+          <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Volební program</h1>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Smart city" )}}
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Řízení a organizační struktura města" )}}
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Rozvoj města a bydlení" )}}
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Doprava" )}}
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Veřejný prostor a zeleň" )}}
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Vzdělávání" )}}
+            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Kultura a volný čas" )}}
+          </div>
+        </template>
+
+        <div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
+          {{> atoms-super-button(cta: "Povolební strategie", icon: "ico--strategy", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
+          {{> atoms-super-button(cta: "Financování kampaně", icon: "ico--calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
+        </div>
+      </div>
+    </main>
+  </ui-view-provider>
+</div>
+
+{{> organisms-footer }}

source/css/atoms/contact-line.pcss

 .contact-line {
   i {
-    @apply mr-2;
+    @apply pr-2;
   }
 
   &.contact-line--responsive {

source/css/molecules/program-point-list.pcss

+.program-point-list {
+  dt:not(:first-of-type)::before {
+    @apply block whitespace-pre-wrap;
+    content: "\A";
+    height: 1em;
+  }
+
+  dt {
+    @apply font-bold;
+  }
+
+  dt, dd {
+    @apply inline m-0 leading-normal;
+  }
+}

source/css/molecules/switch.pcss

@@ -3,10 +3,10 @@
 }
 
 .switch__item {
-  @apply py-4 px-8 font-alt font-normal text-xl text-white text-center;
+  @apply py-4 px-8 font-alt font-normal text-xl text-white text-center cursor-pointer;
 
   &:hover {
-    @apply no-underline bg-grey-700;
+    @apply no-underline bg-grey-500;
   }
 
   &.switch__item--active,

source/css/style.pcss

@@ -43,6 +43,7 @@
 @import "./molecules/content-block.pcss";
 @import "./molecules/flip-clock.pcss";
 @import "./molecules/pagination.pcss";
+@import "./molecules/program-point-list.pcss";
 @import "./molecules/social-icon-group.pcss";
 @import "./molecules/switch.pcss";
 

source/icons/demo.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> pirati-ui <small class="fgc1">(Glyphs:&nbsp;52)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> pirati-ui <small class="fgc1">(Glyphs:&nbsp;61)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
@@ -117,6 +117,300 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--cross"></span>
+                <span class="mls"> ico--cross</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e937" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe937;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--checkbox-checked"></span>
+                <span class="mls"> ico--checkbox-checked</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e938" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe938;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--quill"></span>
+                <span class="mls"> ico--quill</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e939" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe939;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--feather"></span>
+                <span class="mls"> ico--feather</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e939" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe939;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--write"></span>
+                <span class="mls"> ico--write</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e939" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe939;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--edit"></span>
+                <span class="mls"> ico--edit</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e939" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe939;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--sphere"></span>
+                <span class="mls"> ico--sphere</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--globe"></span>
+                <span class="mls"> ico--globe</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--internet"></span>
+                <span class="mls"> ico--internet</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--wikipedia"></span>
+                <span class="mls"> ico--wikipedia</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--brand"></span>
+                <span class="mls"> ico--brand</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--youtube"></span>
+                <span class="mls"> ico--youtube</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e936" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe936;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--users"></span>
+                <span class="mls"> ico--users</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--group"></span>
+                <span class="mls"> ico--group</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--team"></span>
+                <span class="mls"> ico--team</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--members"></span>
+                <span class="mls"> ico--members</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--community"></span>
+                <span class="mls"> ico--community</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--collaborate"></span>
+                <span class="mls"> ico--collaborate</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--book"></span>
+                <span class="mls"> ico--book</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e935" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe935;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--read"></span>
+                <span class="mls"> ico--read</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e935" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe935;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--reading"></span>
+                <span class="mls"> ico--reading</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e935" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe935;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
                 <span class="ico--bubbles"></span>
@@ -644,6 +938,20 @@
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <div class="glyph fs6">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--tasks"></span>
+                <span class="mls"> ico--tasks</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93c" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93c;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs6">
             <div class="clearfix bshadow0 pbs">
                 <span class="ico--calculator"></span>

source/icons/fonts/pirati-ui.svg

@@ -59,4 +59,13 @@
 <glyph unicode="&#xe931;" glyph-name="calculator" horiz-adv-x="951" d="M219.429 73.143c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM438.857 73.143c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM219.429 292.571c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM658.286 73.143c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM438.857 292.571c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM219.429 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM658.286 292.571c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM438.857 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM877.714 73.143v219.429c0 40-33.143 73.143-73.143 73.143v0c-40 0-73.143-33.143-73.143-73.143v-219.429c0-40 33.143-73.143 73.143-73.143v0c40 0 73.143 33.143 73.143 73.143zM658.286 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM877.714 694.857v146.286c0 20-16.571 36.571-36.571 36.571h-731.429c-20 0-36.571-16.571-36.571-36.571v-146.286c0-20 16.571-36.571 36.571-36.571h731.429c20 0 36.571 16.571 36.571 36.571zM877.714 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM950.857 877.714v-877.714c0-40-33.143-73.143-73.143-73.143h-804.571c-40 0-73.143 33.143-73.143 73.143v877.714c0 40 33.143 73.143 73.143 73.143h804.571c40 0 73.143-33.143 73.143-73.143z" />
 <glyph unicode="&#xe932;" glyph-name="strategy" horiz-adv-x="736" d="M704-48c0 8.832-7.168 16-16 16h-576c-8.832 0-16-7.168-16-16s7.168-16 16-16h576c8.832 0 16 7.168 16 16zM40.768 660.672c-13.376-8.896-33.664-35.968-14.432-74.432 15.968-31.904 49.28-70.944 84.704-81.248 18.048-5.312 35.84-3.104 51.36 6.272 35.168 21.056 76.704 49.536 94.304 61.76 22.208-11.232 50.24-13.568 78.72-6.24 0.128 0.032 0.256 0.096 0.384 0.128-1.664-52.832-19.552-85.824-107.008-167.040-77.952-72.352-124.192-167.392-123.744-254.272 0.32-56.992 21.088-105.92 60.16-141.408 2.976-2.72 6.816-4.192 10.784-4.192h448c8.832 0 16 7.168 16 16s-7.168 16-16 16h-441.632c-29.408 28.96-45.024 68.16-45.28 113.76-0.416 76.864 43.104 165.28 113.504 230.656 93.28 86.592 117.408 127.616 117.408 199.584 0 1.312-0.448 2.464-0.736 3.68 17.504 9.44 32.64 21.92 42.976 37.024 12.96 18.88 40.864 67.36 20.16 110.272-3.84 7.904-13.408 11.264-21.376 7.424-7.936-3.84-11.296-13.408-7.424-21.376 9.312-19.296 2.688-48.544-17.728-78.24-11.776-17.152-32.832-31.008-56.352-37.024-23.904-6.112-46.624-3.424-62.464 7.424-5.536 3.776-12.8 3.744-18.272-0.128-0.576-0.384-56.864-40.032-100.768-66.368-8.032-4.8-16.512-5.824-25.984-3.008-24.768 7.232-52 38.784-65.024 64.832-10.528 21.056 0.256 31.104 5.152 34.688 110.304 95.264 165.664 194.24 167.936 198.432 2.112 3.904 2.56 8.512 1.152 12.768-0.16 0.48-11.2 34.016-17.28 65.056 33.472-20.16 91.040-48.32 150.976-48.32 83.328 0 277.056-31.104 277.056-319.232 0-1.568-0.288-158.208-63.040-330.464-3.040-8.288 1.248-17.472 9.568-20.512 1.824-0.608 3.648-0.928 5.472-0.928 6.528 0 12.672 4.032 15.040 10.528 64.672 177.536 64.992 334.912 64.96 341.472 0 325.856-236.576 351.168-309.056 351.168-80.288 0-160.384 60.896-161.152 61.536-4.896 3.68-11.36 4.288-16.864 1.632-5.472-2.688-8.928-8.256-8.928-14.336 0-31.392 14.88-82.176 20.672-100.704-13.376-22.336-66.112-104.992-155.904-182.624zM559.52 910.72c-51.232 34.528-108.512 49.28-191.52 49.28-8.832 0-16-7.168-16-16s7.168-16 16-16c76.16 0 128.096-13.088 173.664-43.808 74.048-49.984 162.336-149.568 162.336-340.192 0-46.432 0-110.016-31.52-236.128-2.112-8.576 3.072-17.248 11.648-19.392 1.312-0.32 2.592-0.48 3.872-0.48 7.2 0 13.728 4.832 15.52 12.128 32.48 129.888 32.48 195.776 32.48 243.872 0 204.672-95.968 312.416-176.48 366.72z" />
 <glyph unicode="&#xe933;" glyph-name="menu" d="M128 384h768c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-768c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM128 640h768c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-768c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM128 128h768c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-768c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667z" />
+<glyph unicode="&#xe934;" glyph-name="users, group, team, members, community, collaborate" horiz-adv-x="1152" d="M768 189.388v52.78c70.498 39.728 128 138.772 128 237.832 0 159.058 0 288-192 288s-192-128.942-192-288c0-99.060 57.502-198.104 128-237.832v-52.78c-217.102-17.748-384-124.42-384-253.388h896c0 128.968-166.898 235.64-384 253.388zM327.196 164.672c55.31 36.15 124.080 63.636 199.788 80.414-15.054 17.784-28.708 37.622-40.492 59.020-30.414 55.234-46.492 116.058-46.492 175.894 0 86.042 0 167.31 30.6 233.762 29.706 64.504 83.128 104.496 159.222 119.488-16.914 76.48-61.94 126.75-181.822 126.75-192 0-192-128.942-192-288 0-99.060 57.502-198.104 128-237.832v-52.78c-217.102-17.748-384-124.42-384-253.388h279.006c14.518 12.91 30.596 25.172 48.19 36.672z" />
+<glyph unicode="&#xe935;" glyph-name="book, read, reading" d="M896 832v-832h-672c-53.026 0-96 42.98-96 96s42.974 96 96 96h608v768h-640c-70.398 0-128-57.6-128-128v-768c0-70.4 57.602-128 128-128h768v896h-64zM224.056 128v0c-0.018-0.002-0.038 0-0.056 0-17.672 0-32-14.326-32-32s14.328-32 32-32c0.018 0 0.038 0.002 0.056 0.002v-0.002h607.89v64h-607.89z" />
+<glyph unicode="&#xe936;" glyph-name="youtube" d="M1013.8 652.8c0 0-10 70.6-40.8 101.6-39 40.8-82.6 41-102.6 43.4-143.2 10.4-358.2 10.4-358.2 10.4h-0.4c0 0-215 0-358.2-10.4-20-2.4-63.6-2.6-102.6-43.4-30.8-31-40.6-101.6-40.6-101.6s-10.2-82.8-10.2-165.8v-77.6c0-82.8 10.2-165.8 10.2-165.8s10-70.6 40.6-101.6c39-40.8 90.2-39.4 113-43.8 82-7.8 348.2-10.2 348.2-10.2s215.2 0.4 358.4 10.6c20 2.4 63.6 2.6 102.6 43.4 30.8 31 40.8 101.6 40.8 101.6s10.2 82.8 10.2 165.8v77.6c-0.2 82.8-10.4 165.8-10.4 165.8zM406.2 315.2v287.8l276.6-144.4-276.6-143.4z" />
+<glyph unicode="&#xe937;" glyph-name="cross" d="M1014.662 137.34c-0.004 0.004-0.008 0.008-0.012 0.010l-310.644 310.65 310.644 310.65c0.004 0.004 0.008 0.006 0.012 0.010 3.344 3.346 5.762 7.254 7.312 11.416 4.246 11.376 1.824 24.682-7.324 33.83l-146.746 146.746c-9.148 9.146-22.45 11.566-33.828 7.32-4.16-1.55-8.070-3.968-11.418-7.31 0-0.004-0.004-0.006-0.008-0.010l-310.648-310.652-310.648 310.65c-0.004 0.004-0.006 0.006-0.010 0.010-3.346 3.342-7.254 5.76-11.414 7.31-11.38 4.248-24.682 1.826-33.83-7.32l-146.748-146.748c-9.148-9.148-11.568-22.452-7.322-33.828 1.552-4.16 3.97-8.072 7.312-11.416 0.004-0.002 0.006-0.006 0.010-0.010l310.65-310.648-310.65-310.652c-0.002-0.004-0.006-0.006-0.008-0.010-3.342-3.346-5.76-7.254-7.314-11.414-4.248-11.376-1.826-24.682 7.322-33.83l146.748-146.746c9.15-9.148 22.452-11.568 33.83-7.322 4.16 1.552 8.070 3.97 11.416 7.312 0.002 0.004 0.006 0.006 0.010 0.010l310.648 310.65 310.648-310.65c0.004-0.002 0.008-0.006 0.012-0.008 3.348-3.344 7.254-5.762 11.414-7.314 11.378-4.246 24.684-1.826 33.828 7.322l146.746 146.748c9.148 9.148 11.57 22.454 7.324 33.83-1.552 4.16-3.97 8.068-7.314 11.414z" />
+<glyph unicode="&#xe938;" glyph-name="checkbox-checked" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM448 165.49l-237.254 237.256 90.51 90.508 146.744-146.744 306.746 306.746 90.508-90.51-397.254-397.256z" />
+<glyph unicode="&#xe939;" glyph-name="quill, feather, write, edit" d="M0-64c128 384 463 1024 1024 1024-263-211-384-704-576-704s-192 0-192 0l-192-320h-64z" />
+<glyph unicode="&#xe93a;" glyph-name="sphere, globe, internet" d="M480 896c-265.096 0-480-214.904-480-480 0-265.098 214.904-480 480-480 265.098 0 480 214.902 480 480 0 265.096-214.902 480-480 480zM751.59 256c8.58 40.454 13.996 83.392 15.758 128h127.446c-3.336-44.196-13.624-87.114-30.68-128h-112.524zM208.41 576c-8.58-40.454-13.996-83.392-15.758-128h-127.444c3.336 44.194 13.622 87.114 30.678 128h112.524zM686.036 576c9.614-40.962 15.398-83.854 17.28-128h-191.316v128h174.036zM512 640v187.338c14.59-4.246 29.044-11.37 43.228-21.37 26.582-18.74 52.012-47.608 73.54-83.486 14.882-24.802 27.752-52.416 38.496-82.484h-155.264zM331.232 722.484c21.528 35.878 46.956 64.748 73.54 83.486 14.182 10 28.638 17.124 43.228 21.37v-187.34h-155.264c10.746 30.066 23.616 57.68 38.496 82.484zM448 576v-128h-191.314c1.88 44.146 7.666 87.038 17.278 128h174.036zM95.888 256c-17.056 40.886-27.342 83.804-30.678 128h127.444c1.762-44.608 7.178-87.546 15.758-128h-112.524zM256.686 384h191.314v-128h-174.036c-9.612 40.96-15.398 83.854-17.278 128zM448 192v-187.34c-14.588 4.246-29.044 11.372-43.228 21.37-26.584 18.74-52.014 47.61-73.54 83.486-14.882 24.804-27.75 52.418-38.498 82.484h155.266zM628.768 109.516c-21.528-35.876-46.958-64.746-73.54-83.486-14.184-9.998-28.638-17.124-43.228-21.37v187.34h155.266c-10.746-30.066-23.616-57.68-38.498-82.484zM512 256v128h191.314c-1.88-44.146-7.666-87.040-17.28-128h-174.034zM767.348 448c-1.762 44.608-7.178 87.546-15.758 128h112.524c17.056-40.886 27.344-83.806 30.68-128h-127.446zM830.658 640h-95.9c-18.638 58.762-44.376 110.294-75.316 151.428 42.536-20.34 81.058-47.616 114.714-81.272 21.48-21.478 40.362-44.938 56.502-70.156zM185.844 710.156c33.658 33.658 72.18 60.932 114.714 81.272-30.942-41.134-56.676-92.666-75.316-151.428h-95.898c16.138 25.218 35.022 48.678 56.5 70.156zM129.344 192h95.898c18.64-58.762 44.376-110.294 75.318-151.43-42.536 20.34-81.058 47.616-114.714 81.274-21.48 21.478-40.364 44.938-56.502 70.156zM774.156 121.844c-33.656-33.658-72.18-60.934-114.714-81.274 30.942 41.134 56.678 92.668 75.316 151.43h95.9c-16.14-25.218-35.022-48.678-56.502-70.156z" />
+<glyph unicode="&#xe93b;" glyph-name="wikipedia, brand" d="M966.8 726.4c0-3.2-1-6.2-3-9-2-2.6-4.2-4-6.8-4-20-2-36.4-8.4-49-19.2-12.8-10.8-25.8-31.8-39.2-62.4l-206.4-465.4c-1.4-4.4-5.2-6.4-11.4-6.4-4.8 0-8.6 2.2-11.4 6.4l-115.8 242-133.2-242c-2.8-4.4-6.4-6.4-11.4-6.4-6 0-9.8 2.2-11.8 6.4l-202.6 465.2c-12.6 28.8-26 49-40 60.4s-33.6 18.6-58.6 21.2c-2.2 0-4.2 1.2-6 3.4-2 2.2-2.8 4.8-2.8 7.8 0 7.6 2.2 11.4 6.4 11.4 18 0 37-0.8 56.8-2.4 18.4-1.6 35.6-2.4 51.8-2.4 16.4 0 36 0.8 58.4 2.4 23.4 1.6 44.2 2.4 62.4 2.4 4.4 0 6.4-3.8 6.4-11.4s-1.4-11.2-4-11.2c-18-1.4-32.4-6-42.8-13.8s-15.6-18-15.6-30.8c0-6.4 2.2-14.6 6.4-24.2l167.4-378.4 95.2 179.6-88.6 185.8c-16 33.2-29 54.6-39.2 64.2s-25.8 15.4-46.6 17.6c-2 0-3.6 1.2-5.4 3.4s-2.6 4.8-2.6 7.8c0 7.6 1.8 11.4 5.6 11.4 18 0 34.6-0.8 49.8-2.4 14.6-1.6 30-2.4 46.6-2.4 16.2 0 33.2 0.8 51.4 2.4 18.6 1.6 37 2.4 55 2.4 4.4 0 6.4-3.8 6.4-11.4s-1.2-11.2-4-11.2c-36.2-2.4-54.2-12.8-54.2-30.8 0-8 4.2-20.6 12.6-37.6l58.6-119 58.4 108.8c8 15.4 12.2 28.4 12.2 38.8 0 24.8-18 38-54.2 39.6-3.2 0-4.8 3.8-4.8 11.2 0 2.8 0.8 5.2 2.4 7.6s3.2 3.6 4.8 3.6c13 0 28.8-0.8 47.8-2.4 18-1.6 33-2.4 44.6-2.4 8.4 0 20.6 0.8 36.8 2 20.4 1.8 37.6 2.8 51.4 2.8 3.2 0 4.8-3.2 4.8-9.6 0-8.6-3-13-8.8-13-21-2.2-38-8-50.8-17.4s-28.8-30.8-48-64.4l-78.2-143.2 105.2-214.4 155.4 361.4c5.4 13.2 8 25.4 8 36.4 0 26.4-18 40.4-54.2 42.2-3.2 0-4.8 3.8-4.8 11.2 0 7.6 2.4 11.4 7.2 11.4 13.2 0 28.8-0.8 47-2.4 16.8-1.6 30.8-2.4 42-2.4 12 0 25.6 0.8 41.2 2.4 16.2 1.6 30.8 2.4 43.8 2.4 4 0 6-3.2 6-9.6z" />
+<glyph unicode="&#xe93c;" glyph-name="tasks" d="M585.143 146.286h365.714v73.143h-365.714v-73.143zM365.714 438.857h585.143v73.143h-585.143v-73.143zM731.429 731.428h219.429v73.143h-219.429v-73.143zM1024 256v-146.286c0-20-16.571-36.571-36.571-36.571h-950.857c-20 0-36.571 16.571-36.571 36.571v146.286c0 20 16.571 36.571 36.571 36.571h950.857c20 0 36.571-16.571 36.571-36.571zM1024 548.571v-146.286c0-20-16.571-36.571-36.571-36.571h-950.857c-20 0-36.571 16.571-36.571 36.571v146.286c0 20 16.571 36.571 36.571 36.571h950.857c20 0 36.571-16.571 36.571-36.571zM1024 841.143v-146.286c0-20-16.571-36.571-36.571-36.571h-950.857c-20 0-36.571 16.571-36.571 36.571v146.286c0 20 16.571 36.571 36.571 36.571h950.857c20 0 36.571-16.571 36.571-36.571z" />
 </font></defs></svg>
\ No newline at end of file