Started work on basic home screen/about content

package.json

@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
+    "fork-awesome": "^1.1.7",
+    "typeface-montserrat": "^0.0.54",
+    "typeface-noto-sans": "^0.0.72",
     "vue": "^2.6.10",
     "vue-gettext": "^2.1.5",
     "vue-router": "^3.0.3"
+
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.11.0",
@@ -29,6 +33,7 @@
     "node-sass": "^4.9.0",
     "prerender-spa-plugin": "^3.4.0",
     "prettier": "^1.18.2",
+    "purecss": "^1.0.0",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.10"
   },

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link :to="{ name: 'home', params: { locale: $language.current } }"
-        >Home</router-link
-      >
-      |
-      <router-link
-        :to="{ name: 'about', params: { locale: $language.current } }"
-        >About</router-link
-      >
-    </div>
-    <router-view />
-    <language-switcher></language-switcher>
+    <navigation/>
+    <main>
+      <router-view/>
+    </main>
+    <footer class="main-footer">
+      <div class="very wide wrapper">
+        <div class="pure-g">
+          <div class="pure-u-1 pure-u-md-1-4">
+            <h5>
+              <translate translate-context="Content/Footer/Header">About us</translate>
+            </h5>
+            <div class="pure-menu custom-restricted-width">
+              <ul class="pure-menu-list">
+                <li>
+                  <a href="https://funkwhale.audio/en_US/collective" target="_blank">
+                    <translate translate-context="Content/Footer/List.Item">Collective and statutes</translate>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://funkwhale.audio/en_US/code-of-conduct" target="_blank">
+                    <translate translate-context="Content/Footer/List.Item">Code of Conduct</translate>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://funkwhale.audio/en_US/support-us" target="_blank">
+                    <translate translate-context="Content/Footer/List.Item">Support us</translate>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://funkwhale.audio/en_US/contact" target="_blank">
+                    <translate translate-context="Content/Footer/List.Item">Contact</translate>
+                  </a>
+                </li>
+                <li>
+                  <a href="https://funkwhale.audio/en_US/logos" target="_blank">
+                    <translate
+                      translate-context="Content/Logos/Header"
+                    >Logos and identity guidelines</translate>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="pure-u-1 pure-u-md-1-4">
+            <h5>
+              <translate translate-context="Content/Footer/Header">Links</translate>
+            </h5>
+            <div class="pure-menu custom-restricted-width">
+              <ul class="pure-menu-list">
+                <li>
+                  <a rel="me" href="https://mastodon.eliotberriot.com/@eliotberriot">
+                    <translate
+                      translate-context="Content/Footer/List.Item"
+                    >Retribute on the fediverse</translate>
+                  </a>
+                </li>
+                <li class="pure-menu-item">
+                  <a href="https://governance.funkwhale.audio">
+                    <translate translate-context="Navigation/Link">Forum</translate>
+                  </a>
+                </li>
+                <li class="pure-menu-item">
+                  <a href="https://docs.funkwhale.audio">
+                    <translate translate-context="Navigation/Link">Documentation</translate>
+                  </a>
+                </li>
+                <li class="pure-menu-item">
+                  <a href="https://dev.funkwhale.audio/funkwhale">
+                    <translate translate-context="Navigation/Link">Source code</translate>
+                  </a>
+                </li>
+                <li class="pure-menu-item">
+                  <a href="https://blog.funkwhale.audio/local">
+                    <translate translate-context="Navigation/Link">Blog</translate>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="pure-u-1 pure-u-md-1-4">
+            <h5>
+              <label for="language" class="label">
+                <i class="fa fa-language"></i>&nbsp;
+                <translate translate-context="Label for language switcher">Language</translate>
+              </label>
+            </h5>
+            <language-switcher id="language" />
+            <a href="#">
+              <translate translate-context="Navigation/Link">Back to top</translate>
+            </a>
+          </div>
+          <div class="pure-u-1 pure-u-md-1-4">
+            <h5>
+              <translate translate-context="Footer/Title">Credits</translate>
+            </h5>
+            <p>
+              <translate
+                translate-context="Footer/Paragraph"
+              >Retribute is part of the Funkwhale community</translate>
+            </p>
+            <p>
+              <translate
+                translate-context="Footer/Paragraph"
+              >The illustrations were kindly drawn by Robin.</translate>
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script>
+
+require("typeface-noto-sans");
+require("typeface-montserrat");
+
+import Navigation from "./components/Navigation";
 import LanguageSwitcher from "./components/LanguageSwitcher";
 
 export default {
   components: {
+    Navigation,
     LanguageSwitcher
   }
 };
 </script>
 
 <style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+@import "./style/main";
+</style>
\ No newline at end of file

src/PageMixin.vue

@@ -8,7 +8,60 @@ export default {
     this.autodetectLanguage();
   },
 
+  head: {
+    title() {
+      return {
+        inner: this.getInnerTitle()
+      };
+    },
+    meta: function() {
+      return [
+        {
+          name: "description",
+          content: this.$pgettext(
+            "Content/Home/Header",
+            "A Community Wealth Sharing Platform"
+          )
+        },
+        {
+          "http-equiv": "content-language",
+          content: this.$language.current.replace("_", "-")
+        }
+      ];
+    },
+    link: function() {
+      let self = this;
+      let links = locales.locales.map(l => {
+        let params = {
+          ...self.$route.params,
+          locale: l.code
+        };
+        let resolved = self.$router.resolve({
+          name: self.$route.name,
+          params
+        });
+        return {
+          rel: "alternate",
+          hreflang: l.code.replace("_", "-"),
+          href: `${resolved.href}`
+        };
+      });
+      links.push({
+        rel: "alternate",
+        type: "application/atom+xml",
+        title: "Blog - Atom Feed",
+        href: "https://blog.funkwhale.audio/~/Announcements/atom.xml"
+      });
+      return links;
+    }
+  },
   methods: {
+    getInnerTitle() {
+      return this.$pgettext(
+        "HTML/Meta/Title",
+        "A Community Wealth Sharing Platform"
+      );
+    },
     autodetectLanguage() {
       let userLanguage =
         this.locale || navigator.language || navigator.userLanguage;

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Navigation.vue

+<template>
+  <div class="navigation-wrapper">
+    <nav
+      role="navigation"
+      :aria-label="labels.ariaLabel"
+      class="main pure-menu pure-menu-horizontal"
+    >
+      <router-link
+        class="pure-menu-heading"
+        :to="{ name: 'home' }"
+        :title="labels.homeTitle"
+      >
+      Retribute
+      </router-link>
+      <button class="pure-button menu-button" @click="showMenu = !showMenu">
+        <i v-if="showMenu" class="fa fa-close"></i>
+        <i v-else class="fa fa-bars"></i>
+      </button>
+      <ul :class="['pure-menu-list', { hide: !showMenu }]">
+        <li class="pure-menu-item">
+          <router-link
+            class="pure-menu-link"
+            :to="{ name: 'about', params: { locale: $language.current } }"
+          >
+            <translate translate-context="Navigation/Link/Short,Noun"
+              >About</translate
+            >
+          </router-link>
+        </li>
+        <li class="pure-menu-item">
+          <router-link
+            class="pure-menu-link"
+            :to="{ name: 'community', params: { locale: $language.current } }"
+          >
+            <translate translate-context="Navigation/Link">Community</translate>
+          </router-link>
+        </li>
+        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
+          <a href="#" id="menuLink1" class="pure-menu-link">
+            <translate translate-context="Navigation/Link">Resources</translate>
+          </a>
+          <ul class="pure-menu-children">
+            <li class="pure-menu-item">
+              <router-link
+                class="pure-menu-link"
+                :to="{ name: 'collective', params: { locale: $language.current } }"
+              >
+                <translate translate-context="Content/Footer/List.Item"
+                  >Collective and statutes</translate
+                >
+              </router-link>
+            </li>
+            <li class="pure-menu-item">
+              <router-link
+                class="pure-menu-link"
+                :to="{ name: 'coc', params: { locale: $language.current } }"
+              >
+                <translate translate-context="Content/Footer/List.Item"
+                  >Code of Conduct</translate
+                >
+              </router-link>
+            </li>
+            <li class="pure-menu-item">
+              <a
+                href="https://governance.funkwhale.audio"
+                target="_blank"
+                class="pure-menu-link"
+              >
+                <translate translate-context="Navigation/Link">Forum</translate>
+              </a>
+            </li>
+            <li class="pure-menu-item">
+              <a
+                href="https://docs.funkwhale.audio"
+                target="_blank"
+                class="pure-menu-link"
+              >
+                <translate translate-context="Navigation/Link"
+                  >Documentation</translate
+                >
+              </a>
+            </li>
+            <li class="pure-menu-item">
+              <a
+                href="https://dev.funkwhale.audio/funkwhale"
+                target="_blank"
+                class="pure-menu-link"
+              >
+                <translate translate-context="Navigation/Link"
+                  >Source code</translate
+                >
+              </a>
+            </li>
+            <li class="pure-menu-item">
+              <a
+                href="https://blog.funkwhale.audio/local"
+                target="_blank"
+                class="pure-menu-link"
+              >
+                <translate translate-context="Navigation/Link">Blog</translate>
+              </a>
+            </li>
+            <li class="pure-menu-item">
+              <router-link
+                class="pure-menu-link"
+                :to="{ name: 'contact', params: { locale: $language.current } }"
+              >
+                <translate translate-context="Content/Footer/List.Item">Contact</translate>
+              </router-link>
+            </li>
+            <li class="pure-menu-item">
+              <router-link
+                class="pure-menu-link"
+                :to="{ name: 'support-us', params: { locale: $language.current } }"
+              >
+                <translate translate-context="Content/Footer/List.Item">Support us</translate>
+              </router-link>
+            </li>
+          </ul>
+        </li>
+        <li class="pure-menu-item">
+          <span class="pure-menu-link">
+            <i class="fa fa-language"></i>&nbsp;
+            <language-switcher />
+          </span>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script>
+import LanguageSwitcher from "./LanguageSwitcher";
+
+export default {
+  components: {
+    LanguageSwitcher
+  },
+  data() {
+    return {
+      showMenu: false
+    };
+  },
+  created() {
+    let self = this;
+    this.$router.afterEach(() => {
+      self.showMenu = false;
+    });
+  },
+  computed: {
+    labels() {
+      return {
+        ariaLabel: this.$pgettext("Navigation/Aria.Label", "Main navigation"),
+        homeTitle: this.$pgettext("Navigation/Link.Title", "Return to homepage")
+      };
+    }
+  }
+};
+</script>
\ No newline at end of file

src/setup.js

+import Vue from "vue";
+require("fork-awesome/css/fork-awesome.min.css");
+
+import GetTextPlugin from "vue-gettext";
+
+import locales from "@/locales";
+
+let availableLanguages = (function() {
+  let l = {};
+  locales.locales.forEach(c => {
+    l[c.code] = c.label;
+  });
+  return l;
+})();
+let defaultLanguage = "en_US";
+Vue.use(GetTextPlugin, {
+  availableLanguages: availableLanguages,
+  defaultLanguage: defaultLanguage,
+  languageVmMixin: {
+    computed: {
+      currentKebabCase: function() {
+        return this.current.toLowerCase().replace("_", "-");
+      }
+    }
+  },
+  translations: {},
+  silent: true
+});
+
+Vue.config.productionTip = false;
+
+export default {};

src/style/1-core/_reset.scss

+* {
+  box-sizing: border-box;
+  transition-duration: 100ms;
+  word-wrap: break-word;
+}
+html {
+  scroll-behavior: smooth;
+}

src/style/1-core/_typography.scss

+body {
+  color: $text-color;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 1.1em;
+}
+
+.pure-g, .pure-g [class*="pure-u"] {
+  font-family: 'Montserrat', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Sans', sans-serif;
+  margin: $content-padding 0;
+  font-weight: normal;
+  &:first-child:not(.divider) {
+    margin-top: 0;
+  }
+}
+p:first-child {
+  margin-top: 0;
+}
+p:last-child {
+  margin-bottom: 0;
+}
+h1 {
+  font-size: 2.2em;
+}
+h2 {
+  font-size: 1.9em;
+}
+h3 {
+  font-size: 1.7em;
+}
+h4 {
+  font-size: 1.5em;
+}
+h5 {
+  font-size: 1.3em;
+}
+h6 {
+  font-size: 1.2em;
+}
+
+section {
+  p, li {
+    line-height: 1.5;
+  }
+}
+section a:not(.pure-button) {
+  color: $link-color;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+hr {
+  color: $divider-color;
+  margin: $content-padding * 2 0;
+  clear: both;
+}
+hr.small {
+  margin: $content-padding / 2 0;
+}
+hr.hide {
+  visibility: hidden;
+}
+hr.visual {
+  margin: 0;
+}
+section {
+  li {
+    margin-bottom: $content-padding / 2;
+  }
+}
+
+p.big {
+  font-size: 1.2em;