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

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/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),