added autonomic section, added fonts, switched over to using bulma as framework

resources/_gen/assets/scss/scss/main.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.json

@@ -0,0 +1 @@
+{"Target":"css/style.css","MediaType":"text/css","Data":{}}

resources/_gen/assets/scss/scss/main.scss_74b0be3b076f41d34d6d6797bafc278a.json

@@ -0,0 +1 @@
+{"Target":"static/css/style.css","MediaType":"text/css","Data":{}}

themes/cloud.autonomic.zone/assets/scss/main.scss

@@ -1,24 +1,42 @@
 
-// flexbox containers
+@import "./bulma/sass/utilities/_all.sass";
-.container {
+@import "./bulma/sass/layout/_all.sass";
-    display: flex;
+@import "./bulma/sass/grid/_all.sass";
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: baseline;
-    width: 100%;
-    text-align: left;
 
+$autonomic-main-color: #EE4A33;
+
+@mixin public-sans-family($weight, $uri) {
+    font-family: 'Public Sans';
+    src: url($uri) format("woff2");
+    font-weight: $weight;
+}
+
+
+@font-face { 
+    @include public-sans-family(bold, '../font/publicsans-bold.woff2')
+}
+@font-face { 
+    @include public-sans-family(light, '../font/publicsans-light.woff2')
+}
+    
+
+body {
+    font-family: 'Public Sans', sans-serif;
 }
 
 p {
     font-size: 1.5em;
     text-align: left;
-    color: #323232;
+}
 
+body {
+    color: #323232;
+    padding: 0;
+    margin: 0;
 }
 
 .question {
+    padding: 10px;
     h2 {
         font-weight: bold;
         font-size: 2em;
@@ -28,18 +46,39 @@ p {
         padding: 0;
         margin: 0;
     }
-    flex: 1 1 600px;
 }
 
-.break {
+
-    flex-basis: 100%;
+.section {
-    height: 0;
+    padding: 0 5%;
+    #who-is-involved {
+        color: white;
+        padding: 60px 10%;
+        .column{
+            padding: 0, 30px;
+        }
+        h1 {
+            font-size: 2rem;
+        }
+        a {
+            color: white;
+        }
+    }
+    .questions {
+        $top-bottom-padding: 60px;
+        padding-top: $top-bottom-padding;
+        padding-bottom: $top-bottom-padding;
+    }
 }
 
-.item {
+.is-autonomic {
-    padding: 5px
+    background-color: $autonomic-main-color;
+}
+
+.autonomic-hero {
+    color: white;
 }
 
 .page {
-    padding: 120px 7.5%;
+    padding: 0 7.5%;
 }

themes/cloud.autonomic.zone/layouts/index.html

@@ -3,26 +3,65 @@
   <h1 class="title">{{ .Site.Title }}</h1>
 </div>
 
-<div class="page">
+
-  <div class="container questions">
+<section class="section">
-    <div class="item question">
+  <div class="container questions">  
-      <h2>How is it similar do YunoHost?</h2>
+    <div class="columns is-desktop">
-      <p>I'm baby small batch street art pinterest snackwave. Asymmetrical art party sustainable williamsburg kogi iceland. Actually cliche synth microdosing ramps, typewriter yr XOXO crucifix DIY meggings you probably haven't heard of them.</p>
+      <div class="column question">
+        <h2>How is it similar do YunoHost?</h2>
+        <p>I'm baby small batch street art pinterest snackwave. Asymmetrical art party sustainable williamsburg kogi iceland. Actually cliche synth microdosing ramps, typewriter yr XOXO crucifix DIY meggings you probably haven't heard of them.</p>
+      </div>
+      <div class="column question">
+        <h2>This is another question?</h2>
+        <p>I'm baby tumblr activated charcoal forage, sustainable yr thundercats seitan selfies man braid post-ironic sartorial chia irony asymmetrical brunch.</p>
+      </div>
     </div>
-    <div class="item question">
+    <div class="columns is-desktop">
-      <h2>This is another question?</h2>
+      <div class="column question">
-      <p>I'm baby tumblr activated charcoal forage, sustainable yr thundercats seitan selfies man braid post-ironic sartorial chia irony asymmetrical brunch.</p>
+        <h2>Why is this the best service ever?</h2>
+        <p>Slow-carb vice butcher artisan raw denim offal keffiyeh mixtape copper mug chambray crucifix pug distillery. Celiac godard tousled taxidermy. Lumbersexual selfies retro, swag health goth YOLO pour-over. Raclette quinoa stumptown artisan vape yr vice street art tofu chambray.</p>
+      </div>
+      <div class="column question">
+        <h2>How <em>do</em> I make £3000 a month while working from home?</h2>
+        <p>Crucifix mustache artisan wayfarers, raw denim green juice prism poke jianbing celiac slow-carb. Tote bag snackwave single-origin coffee hell of cloud bread. Franzen try-hard kickstarter vice cornhole truffaut. Pok pok next level whatever af semiotics, bicycle rights brunch.</p>
+      </div>
     </div>
-    <div class="break"></div>
+  </div>
-    <div class="item question">
+</section>
-      <h2>Why is this the best service ever?</h2>
+<section class="is-autonomic">
-      <p>Slow-carb vice butcher artisan raw denim offal keffiyeh mixtape copper mug chambray crucifix pug distillery. Celiac godard tousled taxidermy. Lumbersexual selfies retro, swag health goth YOLO pour-over. Raclette quinoa stumptown artisan vape yr vice street art tofu chambray.</p>
+  <div class="section">
-    </div>
+    <div class="hero-body">
-    <div class="item question">
+      <div id="who-is-involved">
-      <h2>How <em>do</em> I make £3000 a month while working from home?</h2>
+        <div class="columns is-desktop is-vcentered is-centered is-8">
-      <p>Crucifix mustache artisan wayfarers, raw denim green juice prism poke jianbing celiac slow-carb. Tote bag snackwave single-origin coffee hell of cloud bread. Franzen try-hard kickstarter vice cornhole truffaut. Pok pok next level whatever af semiotics, bicycle rights brunch.</p>
+          <div id="column is-one-third autonomic-logo">
+            <img alt="Autonomic Logo" width="400px" src="/svg/autonomic_logo_white.svg">
+          </div>
+          <div id="column is-half autonomic-fluff-text">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies, lacus iaculis mollis vulputate, massa sem luctus velit, eu laoreet mi risus vel metus. Aenean sit amet massa eu dolor.</p>
+            <h1>visit: <a href="https://autonomic.zone">autonomic.zone</a></h3>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+
+</section>
+
+<div class="columns">
+  <div class="column">
+    First column
+  </div>
+  <div class="column">
+    Second column
+  </div>
+  <div class="column">
+    Third column
+  </div>
+  <div class="column">
+    Fourth column
+  </div>
 </div>
 
+
+
 {{ end }}

themes/cloud.autonomic.zone/layouts/partials/head.html

@@ -4,7 +4,7 @@
     {{ $title := print .Site.Title " | " .Title }}
     {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
     {{/*  scss compiling  */}}
-    {{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed") }}
+    {{ $options := (dict "targetPath" "css/style.css" "outputStyle" "compressed") }}
     {{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options }}
     <link href="{{ $style.Permalink }}" rel="stylesheet">
     <title>{{ $title }}</title>

themes/cloud.autonomic.zone/static/svg/autonomic_logo_white.svg

@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg901"
+   width="529.06665"
+   height="484.26666"
+   viewBox="0 0 529.06665 484.26666"
+   sodipodi:docname="autonomic_logo_white.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata907">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs905" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     id="namedview903"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="0.70710678"
+     inkscape:cx="287.88484"
+     inkscape:cy="224.67978"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0">
+    <sodipodi:guide
+       position="264.72392,133.30299"
+       orientation="1,0"
+       id="guide6297" />
+    <sodipodi:guide
+       position="398.69774,362.18026"
+       orientation="1,0"
+       id="guide836" />
+    <sodipodi:guide
+       position="131.8607,368.4363"
+       orientation="1,0"
+       id="guide838" />
+    <sodipodi:guide
+       position="47.78125,394.17291"
+       orientation="1,0"
+       id="guide840" />
+  </sodipodi:namedview>
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="Image 1"
+     style="display:inline">
+    <g
+       id="g6283"
+       transform="translate(-0.33327966,-0.582944)"
+       style="display:inline;fill:#ffffff;fill-opacity:1">
+      <path
+         style="opacity:1;fill:#ffffff;stroke-width:1.06667;fill-opacity:1"
+         d="m 265.85061,350.50909 -0.79341,0.43484 -43.19061,-24.34142 -42.13333,-24.34142 -24.0329,-13.87388 -23.50638,-13.89599 -45.826952,14.73333 c -15.470929,4.29952 -45.980651,15.05668 -45.980651,15.05668 l -0.02689,-6.77971 c 0,0 32.651903,-10.58617 48.973773,-15.89205 l 39.73333,-12.91641 v -74.4088 -74.40884 L 105.33326,112.12419 81.599927,104.37297 64.799928,98.877912 48.11453,93.382855 c 0.0026,-2.782182 -0.0062,-6.392142 -0.01723,-6.413409 l 84.09668,26.674154 66.03677,-38.282896 66.82645,-38.23891 133.97382,76.309766 83.10223,-47.829265 -0.017,3.99732 -0.017,3.466667 -79.92234,45.866668 -0.0219,76.96337 -0.0219,76.96336 c 0,0 -137.07591,78.68694 -136.28264,77.6495 z m 5.14076,-9.56508 5.92478,-3.34448 59.38209,-34.13334 59.38211,-34.13333 0.0265,-74.87111 0.0264,-74.87111 -130.67605,-75.053473 -64.94391,37.197845 -64.59572,37.197848 -0.0255,75.27742 -0.0255,75.27742 64.8,37.40039 64.8,37.40038 z m -0.84503,-23.95423 -3.45358,2.1009 -1.26416,-2.77451 -1.53826,-3.45216 c 17.17567,-9.96363 35.25386,-20.06932 52.72094,-30.10953 l 50.47803,-29.01512 1.33197,-0.51113 1.33198,-0.51114 1.21644,2.6698 1.21644,2.66979 -0.75978,0.44828 -0.75978,0.44827 -48.53333,27.96782 -48.53333,27.96782 z M 159.99999,254.93333 H 156.8 v -60.8 -60.8 h 3.19999 3.2 v 60.8 60.8 z m 157.86667,-148.40798 -49.6,-28.751318 -2.37274,-1.302542 -2.37273,-1.30254 1.8394,-2.774615 1.8394,-2.774613 51.2,29.755606 51.2,29.755612 1.44382,0.87209 1.4438,0.87209 c 0,0 -3.70277,5.23162 -3.61745,5.14513 0,0 -34.03025,-19.65613 -51.0035,-29.4949 z"
+         id="path6285"
+         sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="font 1">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:44px;line-height:1.25;font-family:sans-serif;letter-spacing:-3px;display:inline;fill:#ffffff;fill-opacity:1;stroke:none;"
+       x="66.027107"
+       y="400.44077"
+       id="text1530-7-2"><tspan
+         sodipodi:role="line"
+         id="tspan1528-2-1"
+         x="66.027107"
+         y="400.44077"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:44px;font-family:'Rubik Mono One';-inkscape-font-specification:'Rubik Mono One';fill:#ffffff;fill-opacity:1;">/AUTO|NOMIC\</tspan></text>
+  </g>
+</svg>