Merge branch 'colour-scheme-reup' of gitlab.com:autonomic-cooperative/autonomic-cooperative.gitlab.io into colour-scheme-reup

Updated "Services we offer" section inline with #63

See merge request autonomic-cooperative/autonomic-cooperative.gitlab.io!24

_config.yml

@@ -10,6 +10,7 @@ sass:
 featured-image-source:
 500px_url:
 github_url:
+mastodon_url: https://sunbeam.city/@autonomic
 twitter_url: https://twitter.com/autonomiccoop
 markdown: kramdown
 permalink: pretty

src/_includes/blog.html

@@ -1,18 +0,0 @@
-<section id="two" class="wrapper alt style2">
-  {% assign posts = site.categories.values | concat: site.categories.howto | sort:"date" | reverse %}
-
-  {% for post in posts %}
-    <section class="spotlight">
-      <div class="image">
-        {% if post.image %}
-        <img src="{% if site.featured-image-source %}{{ post.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ post.image }}{% endif %}" alt="" loading="lazy">
-      {% endif %}
-    </div>
-      <div class="content">
-        <h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
-        <p class="h5">{{ post.date | date: '%B %d, %Y' }}</p>
-        <p>{{ post.description }}</p>
-      </div>
-    </section>
-  {% endfor %}
-</section>

src/_includes/contact.html

@@ -1,5 +1,5 @@
-<a class="named-anchor" name="contact"></a>
 <section id="contact" class="wrapper style5 special">
+  <a class="named-anchor" name="contact">
   <header class="major">
     <h2>Get in Touch</h2>
     <p>Contact us to discuss your project's needs and arrange a consultation.</p>
@@ -9,4 +9,5 @@
       Our key fingerprint is: <br/><code id="fingerprint">82FC 87C5 1A71 902F DC10 2CF5 4F90 D55B B24B 1147</code>
     </p>
   </header>
+  </a>
 </section>

src/_includes/foot-scripts.html

@@ -0,0 +1,7 @@
+<!-- Scripts -->
+<script src="{{ "/assets/js/jquery-3.4.1.min.js" | absolute_url }}"></script>
+<script src="{{ "/assets/js/jquery.scrollex.min.js" | absolute_url }}"></script>
+<script src="{{ "/assets/js/skel.min.js" | absolute_url }}"></script>
+<script src="{{ "/assets/js/util.js" | absolute_url }}"></script>
+<script src="{{ "/assets/js/particles.min.js" | absolute_url }}""></script>
+<script src="{{ "/assets/js/main.js" | absolute_url }}"></script>

src/_includes/footer.html

@@ -1,37 +1,50 @@
 <!-- Footer -->
 <footer id="footer">
-  <ul class="icons">
+  <div class="row">
+    <div class="column">
+      <a class="named-anchor" name="contact"></a>
+        <h3>Get in Touch</h3>
+        Contact us to discuss your project's needs and arrange a consultation.
+        <a href="mailto:helo@autonomic.zone">helo@autonomic.zone</a></br></br>
+        <a href="{{ '/assets/pgp/autonomic-key.asc' | relative_url }}">PGP key:</a>
+        <code id="fingerprint">82FC 87C5 1A71 902F DC10 2CF5 4F90 D55B B24B 1147</code>
+
+      <ul class="icons" style="margin-bottom: 0; padding-top: 1em">
         <li>
           <a rel="noopener" href="{{ site.twitter_url }}" style="border-bottom: none">
-        <svg style="height: 2rem;" viewBox="0 0 1792 1792">
+            <img alt="twitter" style="height: 2rem;" src="{{ '/assets/svg/twitter-brands.svg' | absolute_url }}">
-          <title>Twitter</title>
+          </a>
-          <path fill="#fff" d="M1684 408q-67 98-162 167l1 42q0 130-38 260t-115 248-185 211-258 146-323 54q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64t-114-160q33 5 61 5 43 0 85-11-112-23-185-111t-74-206v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 295 239t371 99q-8-38-8-74 0-134 95-228t228-95q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/>
+        </li>
-        </svg>
+        <li>
+          <a rel="me" href="{{ site.mastodon_url }}" style="border-bottom: none">
+            <img alt="mastodon" style="height: 2rem;" src="{{ '/assets/svg/mastodon-brands.svg' | absolute_url }}">
           </a>
         </li>
       </ul>
-  <ul class="copyright">
-    <svg style="height: 1rem; fill: rgba(255, 255, 255, 0.7); vertical-align: text-bottom;" viewBox="0 0 1792 1792"><path d="M605 1233q153 0 257-104 14-18 3-36l-45-82q-6-13-24-17-16-2-27 11l-4 3-11 10-18 14q-11 8-23 14t-29 13-33 10-38 3q-76 0-125-50t-49-127q0-76 48-125t122-50q37 0 72 14t50 28l16 14q11 11 26 10 16-2 24-14l53-78q13-20-2-39l-11-12q-8-8-30-23t-48-28-68-23-86-10q-148 0-246 97t-98 240q0 146 97 242t247 95zm630 0q153 0 257-104 14-18 4-36l-45-82q-8-14-25-17-16-2-27 11l-4 3-11 10-18 14q-11 8-23 14t-29 13-33 10-38 3q-76 0-125-50t-49-127q0-76 48-125t122-50q37 0 72 14t50 28l16 14q11 11 26 10 16-2 24-14l53-78q13-20-2-39l-11-12q-8-8-30-23t-48-28-68-23-86-10q-147 0-245 97t-99 240q0 146 97 242t247 95zM896 160q-150 0-286 59T376 376 219 610t-59 286 59 286 157 235 234 157 286 58 286-58 235-157 157-235 58-286-58-286-157-234-235-157-286-59zm0-160q182 0 348 71t286 191 191 286 71 348-71 348-191 286-286 191-348 71-348-71-286-191-191-286T0 896t71-348 191-286T548 71 896 0z"/></svg>&nbsp;
-    {{ site.title }}</li>
-  </ul>
-
-  <address>
-      Autonomic Co-operative</br>
-      1539 Pershore Road </br>
-      Stirchley</br>
-      B30 2JH
-  </address>
-</footer>
 
     </div>
-
+    <div class="column">
-<!-- Scripts -->
+      <div class="copyright">
-<script src="{{ "/assets/js/jquery-3.4.1.min.js" | absolute_url }}"></script>
+        <object style="height: 1.2rem; vertical-align: text-bottom;" type="image/svg+xml" data="{{ '/assets/svg/creative-commons-brands.svg' | absolute_url }}">
-<script src="{{ "/assets/js/jquery.scrollex.min.js" | absolute_url }}"></script>
+          Your browser does not support SVG
-<script src="{{ "/assets/js/skel.min.js" | absolute_url }}"></script>
+        </object>&nbsp;
-<script src="{{ "/assets/js/util.js" | absolute_url }}"></script>
+        {{ site.title }}
-<script src="{{ "/assets/js/particles.min.js" | absolute_url }}""></script>
+      </div>
-<script src="{{ "/assets/js/main.js" | absolute_url }}"></script>
+      <div class="cotech-box">
-
+        <a href="https://www.coops.tech/">
-</body>
+          <img class="cotech-logo" src="{{ '/assets/images/CoTech-white-logo.png' | relative_url }}" alt="CoTech"/>
-</html>
+          <span class="cotech-text">Member of the Cotech Network</span>
+        </a>
+      </div>
+      <div style="vertical-align: bottom;">
+        <address>
+          Autonomic Co-operative Limited</br>
+          1539 Pershore Road</br>
+          Birmingham</br>
+          B30 2JH</br>
+          United Kingdom</br>
+        </address>
+      </div>
+    </div>
+  </div>
+</footer>

src/_includes/services.html

@@ -2,7 +2,7 @@
 <section id="three" class="wrapper style6 special">
   <div class="inner">
     <header class="major">
-      <h2>Services we offer</h2>
+      <h2>Cooperative Cloud: For Organisations</h2>
       <p>
         This isn't an exhaustive list - if you don't see what you need, please contact us anyway.
       </p>
@@ -11,13 +11,13 @@
       <li class="features-item">
         <svg class="features-icon" viewBox="0 0 1792 1792"><path d="M127 896q0-163 67-313l367 1005q-196-95-315-281T127 896zm1288-39l-2 39q-2 20-10 49t-12 44-17 59-18 58l-76 256-278-826q46-3 88-8 19-2 26-18t-2-31-29-14l-205 10q-75-1-202-10-12-1-20 5t-12 15-1 19 9 16 19 8l80 8 120 328-168 504-280-832q46-3 88-8 19-2 26-18t-2-31-29-14l-205 10h-23l-26-1q105-160 275-253t367-94q147 0 281 53t238 149h-10q-55 0-92 41t-37 95l2 24 4 22q2 10 8 23t9 21 12 22 13 21 14 24 14 23q63 107 63 212zM909 963l237 647q1 6 5 11-126 44-255 44-112 0-217-32zm661-436q95 174 95 369 0 209-104 386t-279 278l235-678q59-169 59-276 0-42-6-79zM896 0q182 0 348 71t286 191 191 286 71 348-71 348-191 286-286 191-348 71-348-71-286-191-191-286T0 896t71-348 191-286T548 71 896 0zm0 1751q173 0 332-68t273-182 182-273 68-332-68-331-182-273-273-183-332-68-331 68-273 183-183 273-68 331 68 332 183 273 273 182 331 68z"/></svg>
         <div>
-          <h3>Wordpress websites</h3>
+          <h3>Websites</h3>
           <p>
-            We will build and host your website, using Wordpress, which is free software and very user-friendly so you can add and edit your own content if you want to.
+            We offer <a href="https://wordpress.com/">Wordpress</a> and static sites. Either managed or unmanaged with frictionless tools for editing and publishing that empower users. <a href="https://matomo.org/">Matamo</a> provides ethical analytics to measure impact. 
           </p>
           </div>
       </li>
-      <li class="features-item">
+      <!-- <li class="features-item">
         <svg class="features-icon" viewBox="0 0 1792 1792"><path d="M1703 478q40 57 18 129l-275 906q-19 64-76 108t-123 43H324q-77 0-148-53T76 1479q-24-67-2-127l3-27 4-37q1-8-3-21t-3-20q2-11 8-21t17-23 16-24q23-38 45-91t30-92q3-10 1-30t-1-28q3-11 17-28t17-23q21-36 42-92t25-90q1-9-2-32t0-28q4-13 22-30t22-23q19-26 43-84t27-97q1-8-3-25t-2-27q2-8 9-18t18-23 17-21q8-12 17-30t15-35 16-36 19-32 27-24 36-11 47 5l-1 3q38-9 51-9h761q74 0 114 56t18 130l-274 906q-36 119-71 154t-129 34H220q-27 0-38 15-11 16-1 43 24 70 144 70h923q29 0 56-15t35-42l300-987q7-22 5-57 38 15 59 43zm-1064 2q-4 13 2 23t20 9h608q13 0 26-9t16-23l21-64q4-13-2-22t-20-10H702q-13 0-25 10t-17 22zm-83 256q-4 13 2 23t20 9h608q13 0 26-9t16-23l21-64q4-13-2-22t-20-10H619q-13 0-25 10t-17 22z"/></svg>
         <div>
           <h3>CRM and Case Management</h3>
@@ -25,8 +25,8 @@
             For case work (e.g. housing or asylum support) we offer our own system, OpenCase. It's simple and user-friendly, perfect for small, volunteer-led groups. We will also consider CiviCRM depending on requirements.
           </p>
         </div>
-      </li>
+      </li> -->
-      <li class="features-item">
+      <!-- <li class="features-item">
         <svg class="features-icon" viewBox="0 0 1792 1792"><path d="M1764 11q33 24 27 64l-256 1536q-5 29-32 45-14 8-31 8-11 0-24-5l-527-215-298 327q-18 21-47 21-14 0-23-4-19-7-30-23t-11-37v-452L40 1083q-37-14-40-55-3-39 32-59L1696 9q35-21 68 2zm-342 1499l221-1323-1434 827 336 137 863-639-478 797z"/></svg>
         <div>
           <h3>Encrypted Email</h3>
@@ -36,11 +36,11 @@
             encrypted mailbox storage.
           </p>
         </div>
-      </li>
+      </li> -->
       <li class="features-item">
         <svg class="features-icon" viewBox="0 0 1024 901"><g fill-rule="nonzero"><path d="M898 350zM308 38c32 18 62 40 87 64 41-7 84-11 127-11 128 0 250 34 343 95 48 32 86 70 113 112a279 279 0 010 305c-27 42-65 80-113 111-93 62-215 95-343 95-43 0-86-3-127-11-25 25-55 47-87 65-168 84-308 2-308 2s130-111 109-208c-58-59-90-131-90-207 0-75 32-147 90-207C130 146 0 36 0 36s140-82 308 2zM208 618c16 52 6 111-29 176l-5 10c30-3 61-11 92-27 24-13 46-30 65-48l36-34c48 13 101 20 157 20 225 0 408-118 408-265 0-146-183-264-408-264-226 0-409 118-409 264 0 64 35 123 93 168z"/><path d="M328 509a60 60 0 110-120 60 60 0 010 120zm194 0a60 60 0 110-120 60 60 0 010 120zm194 0a60 60 0 11-1-120 60 60 0 011 120z"/></g></svg>
         <div>
-          <h3>Text and Video Chat</h3>
+          <h3>Team Chat</h3>
           <p>
             Mobile friendly multi-channel team chat using <a href="https://rocket.chat/">Rocket.Chat</a>,
             with no artificial limits on features. Vital for remote project coordination.
@@ -52,14 +52,11 @@
         <div>
           <h3>Cloud Storage and Collaboration</h3>
           <p>
-            <a href="https://cloudron.io/">Cloudron</a> is a personal "cloud
+            <a href="https://nextcloud.com/">Nextcloud</a> for file-storage, collaborative document editing, calendars. We also host <a href="https://github.com/hackmdio/codimd">CodiMD</a>, <a href="https://etherpad.org/">Etherpad</a>, <a href="https://gitea.io">Gitea</a> and <a href="https://wekan.github.io/">Wekan</a> instances.
-            in a box" , designed with the utmost security in mind. It allows you to
-            deploy apps for file-storage, collaborative document editing,
-            calendars, to-do lists and much more.
           </p>
         </div>
       </li>
-      <li class="features-item">
+      <!-- <li class="features-item">
         <svg class="features-icon" viewBox="0 0 1792 1792"><path d="M1728 886q0 166-60 314l-20 49-185 33q-22 83-90 137t-157 53v32q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23V928q0-14 9-23t23-9h64q14 0 23 9t9 23v32q71 0 130 36t93 95l68-12q29-95 29-193 0-148-88-279t-236-209-316-78-315 78-237 209-88 279q0 98 29 193l68 12q34-60 93-95t130-36v-32q0-14 9-23t23-9h64q14 0 23 9t9 23v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-32q-88 0-156-53t-91-137l-185-33-20-49q-60-148-60-314 0-151 67-291t179-242 266-164 320-61 320 61 266 164 179 242 67 291z"/></svg>
         <div>
           <h3>Voice Conferencing</h3>
@@ -68,7 +65,7 @@
             Perfect for meetings, even with large groups, on mobile, or with low bandwidth.
           </p>
         </div>
-      </li>
+      </li> -->
       <li class="features-item">
         <svg class="features-icon" viewBox="0 0 1792 1792"><path d="M704 384q-153 0-286 52T207 577t-79 191q0 82 53 158t149 132l97 56-35 84q34-20 62-39l44-31 53 10q78 14 153 14 153 0 286-52t212-141 78-191-78-191-212-141-286-52zm0-128q191 0 354 69t256 186 94 257-94 257-256 187-354 68q-86 0-176-16-124 88-278 128-36 9-86 16h-3q-11 0-20-8t-12-21l-1-6 1-7 2-6 2-5 4-5 4-5 4-5 4-5 23-25 26-29 23-29q15-19 25-39t20-44q-124-72-195-177T0 768q0-139 94-257t257-186 353-69zm822 1169q10 24 21 44t25 39 22 29 26 29 23 25l4 5 5 5 4 5 3 5 3 5 2 6v7l-1 6q-3 14-13 22t-22 7q-50-7-86-16-154-40-278-128-90 16-176 16-271 0-472-132 58 4 88 4 161 0 309-45t264-129q125-92 192-212t67-254q0-77-23-152 129 71 204 178t75 230q0 120-71 225t-195 176z"/></svg>
         <div>
@@ -80,7 +77,7 @@
           </p>
         </div>
       </li>
-      <li class="features-item">
+      <!-- <li class="features-item">
         <svg class="features-icon" viewBox="0 0 2048 1792"><path d="M2020 11q28 20 28 53v1408q0 20-11 36t-29 23l-640 256q-24 11-48 0l-616-246-616 246q-10 5-24 5-19 0-36-11-28-20-28-53V320q0-20 11-36t29-23L680 5q24-11 48 0l616 246L1960 5q32-13 60 6zM736 146v1270l576 230V376zM128 363v1270l544-217V146zm1792 1066V159l-544 217v1270z"/></svg>
         <div>
           <h3>Interactive Data and Mapping</h3>
@@ -91,14 +88,13 @@
             data by presenting it in a bespoke web app.
           </p>
         </div>
-      </li>
+      </li> -->
       <li class="features-item">
         <svg class="features-icon" viewBox="0 0 2048 1792"><path d="M681 1399l-50 50q-10 10-23 10t-23-10L119 983q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23L288 960l393 393q10 10 10 23t-10 23zm591-1067L899 1623q-4 13-15 20t-24 2l-62-17q-13-4-19-15t-3-25l373-1291q4-13 16-19t23-3l62 17q13 4 20 16t2 24zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z"/></svg>
         <div>
           <h3>Bespoke Development</h3>
           <p>
-            For some problems, there may not be a pre-existing free software solution. Let
+            For some problems, there may not be a pre-existing solution. Let us guide you through the full development cycle to deliver your bespoke solution.
-            us guide you through the full development cycle to deliver your bespoke solution.
           </p>
         </div>
       </li>

src/_layouts/default.html

@@ -6,10 +6,7 @@
   {% include banner.html %}
   {% include core-values.html %}
   {% include services.html %}
-  {% include contact.html %}
-  {% include blog.html %}
   {% include footer.html %}
-  {% include membership-footer.html %}
   {% include foot-scripts.html %}
 </body>
 </html>

src/assets/js/main.js

@@ -85,7 +85,7 @@
             }
           },
           color: {
-            value: "#f99081"
+            value: "#ff5555"
           },
           shape: {
             type: "circle",
@@ -125,7 +125,7 @@
           line_linked: {
             enable: true,
             distance: 250,
-            color: "#f99081",
+            color: "#ff5555",
             opacity: 0.8,
             width: 2
           },

src/assets/styles/components/_banner.scss

@@ -104,7 +104,7 @@ body.is-loading {
 .particle {
   position: relative;
   user-select: none;
-  background: _palette(accent3, bg);
+  background: _palette(bg);
 
   @include breakpoint(medium) {
     background: none;

src/assets/styles/libs/_drac.scss

@@ -0,0 +1,13 @@
+$background: #282a36;
+$current-line: #44475a;
+$selection: #44475a;
+$foreground: #f8f8f2;
+$dark-foreground: mix($foreground, #000, 90%);
+$comment: #6272a4;
+$cyan: #8be9fd;
+$green: #50fa7b;
+$orange: #ffb86c;
+$pink: #ff79c6;
+$purple: #bd93f9;
+$red: #ff5555;	
+$yellow: #f1fa8c;

src/assets/styles/libs/_vars.scss

@@ -1,3 +1,5 @@
+@import "drac";
+
 // Misc.
   $misc: (
     max-spotlights:   10,
@@ -31,20 +33,20 @@
 
 // Palette.
   $palette: (
-    bg:         #29335C,
+    bg:         $background,
-    fg:         #fff,
+    fg:         $foreground,
-    fg-bold:      #fff,
+    fg-bold:      $foreground,
-    fg-light:     rgba(255,255,255,0.5),
+    fg-light:     rgba($foreground, 0.5),
-    border:       #fff,
+    border:       $foreground,
     border-bg:      rgba(144,144,144,0.25),
-    border2:      #fff,
+    border2:      $foreground,
     border2-bg:     rgba(144,144,144,0.5),
 
     accent1: (
-      bg:       #F3A712,
+      bg:       $pink,
       fg-bold:    #ffffff,
-      fg:       mix(#F3A712, #ffffff, 25%),
+      fg:       mix($pink, #ffffff, 25%),
-      fg-light:   mix(#F3A712, #ffffff, 40%),
+      fg-light:   mix($pink, #ffffff, 40%),
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),
@@ -63,10 +65,10 @@
     ),
 
     accent3: (
-      bg:       #ed4933,
+      bg:       $red,
-      fg-bold:    #ffffff,
+      fg-bold:    $foreground,
-      fg:       mix(#ed4933, #ffffff, 25%),
+      fg:       #282a36,//mix($nord11, #ffffff, 25%),
-      fg-light:   mix(#ed4933, #ffffff, 40%),
+      fg-light:   #282a36,
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),
@@ -74,10 +76,10 @@
     ),
 
     accent4: (
-      bg:       #25558C,
+      bg:       mix(#44475a, #000, 50%),
-      fg-bold:    #ffffff,
+      fg-bold:    $foreground,
-      fg:       mix(#25558C, #ffffff, 25%),
+      fg:       $dark-foreground,
-      fg-light:   mix(#25558C, #ffffff, 40%),
+      fg-light:   $dark-foreground,
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),
@@ -87,8 +89,8 @@
     accent5: (
       bg:       #e2e2e2,
       fg-bold:    #ffffff,
-      fg:       mix(#F3A712, #ffffff, 25%),
+      fg:       mix($pink, #ffffff, 25%),
-      fg-light:   mix(#F3A712, #ffffff, 40%),
+      fg-light:   mix($pink, #ffffff, 40%),
       border:     rgba(0,0,0,0.125),
       border-bg:    rgba(255,255,255,0.075),
       border2:    rgba(0,0,0,0.25),

src/assets/styles/main.scss

@@ -142,12 +142,17 @@ body.is-mobile {
     }
   }
 
-  .copyright {
+  .copyright, .cotech-text {
     font-size: 0.8em;
     letter-spacing: _size(letter-spacing-alt);
-    list-style: none;
+    
-    padding: 0;
     text-transform: uppercase;
+  }
+
+  .copyright {
+    list-style: none;
+    padding: 0.25em 0;
+    
 
     li {
       border-left: solid 1px _palette(fg-light);
@@ -179,16 +184,42 @@ body.is-mobile {
       }
     }
   }
+  .row {
+    display: flex;
+    margin: 0 10%;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+  }
+  
+  .column {
+    flex: 50%;
+  }
+
+  .cotech-box {
+    padding-bottom: 1em;
+  }
+  
+  .cotech-text {
+    vertical-align: middle;
+  }
+  
+  .cotech-logo {
+    height: 1em;
+    vertical-align: text-bottom;
+  }
 
   @include breakpoint(medium) {
-    @include padding(4em, 3em);
+    @include padding(4em, 0em);
   }
 
   @include breakpoint(small) {
-    @include padding(3em, 2em);
+    @include padding(3em, 0em);
   }
 }
 
+
+
+
 /* Landing */
 
 body.landing {

src/assets/svg/creative-commons-brands.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons" class="svg-inline--fa fa-creative-commons fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="rgba(255,255,255,0.9)" d="M245.83 214.87l-33.22 17.28c-9.43-19.58-25.24-19.93-27.46-19.93-22.13 0-33.22 14.61-33.22 43.84 0 23.57 9.21 43.84 33.22 43.84 14.47 0 24.65-7.09 30.57-21.26l30.55 15.5c-6.17 11.51-25.69 38.98-65.1 38.98-22.6 0-73.96-10.32-73.96-77.05 0-58.69 43-77.06 72.63-77.06 30.72-.01 52.7 11.95 65.99 35.86zm143.05 0l-32.78 17.28c-9.5-19.77-25.72-19.93-27.9-19.93-22.14 0-33.22 14.61-33.22 43.84 0 23.55 9.23 43.84 33.22 43.84 14.45 0 24.65-7.09 30.54-21.26l31 15.5c-2.1 3.75-21.39 38.98-65.09 38.98-22.69 0-73.96-9.87-73.96-77.05 0-58.67 42.97-77.06 72.63-77.06 30.71-.01 52.58 11.95 65.56 35.86zM247.56 8.05C104.74 8.05 0 123.11 0 256.05c0 138.49 113.6 248 247.56 248 129.93 0 248.44-100.87 248.44-248 0-137.87-106.62-248-248.44-248zm.87 450.81c-112.54 0-203.7-93.04-203.7-202.81 0-105.42 85.43-203.27 203.72-203.27 112.53 0 202.82 89.46 202.82 203.26-.01 121.69-99.68 202.82-202.84 202.82z"></path></svg>

src/assets/svg/mastodon-brands.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="mastodon" class="svg-inline--fa fa-mastodon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"></path></svg>

src/assets/svg/twitter-brands.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#fff" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>