From 7bc7beac4abd20050f3897609182cee89a2ffb57 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 3 Feb 2021 18:27:44 +0000
Subject: [PATCH] init
---
README.md | 25 +-----
package.json | 2 +-
public/favicon.ico | Bin 4286 -> 1150 bytes
public/index.html | 67 ++++++++++++----
src/App.vue | 58 +++++++++++---
src/components/HelloWorld.vue | 130 -------------------------------
src/components/JoinMicrocosm.vue | 109 ++++++++++++++++++++++++++
src/components/TellmeMore.vue | 53 +++++++++++++
src/router/index.js | 14 ++--
src/views/About.vue | 5 --
src/views/Credits.vue | 20 +++++
src/views/Home.vue | 18 -----
src/views/Start.vue | 69 ++++++++++++++++
13 files changed, 358 insertions(+), 212 deletions(-)
delete mode 100644 src/components/HelloWorld.vue
create mode 100644 src/components/JoinMicrocosm.vue
create mode 100644 src/components/TellmeMore.vue
delete mode 100644 src/views/About.vue
create mode 100644 src/views/Credits.vue
delete mode 100644 src/views/Home.vue
create mode 100644 src/views/Start.vue
diff --git a/README.md b/README.md
index 4a9363f..d13f3d6 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1 @@
-# vue3
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# nodenogg.in (beta)
diff --git a/package.json b/package.json
index f6a9f27..bb676b9 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "vue3",
+ "name": "nodenogg.in",
"version": "0.1.0",
"private": true,
"scripts": {
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..c93e47241c4a33a8f9f30eceacbc3a7df19285f4 100644
GIT binary patch
literal 1150
zcmZQzU}Ruq5D);-3Je)63=Con3=A3!3=9Gc3=9ek5OD?&U}0bo;)Y-l7adnro@7wd
z{lyRwb(=pR_`bQP&x0Tj?+3yDLHF&#BJYUS)a++S%ea894a|>>zRwUFf0x@o=uwPc
z(96AnAs=1`hJOAY82b4~V91B}{z0!#`2{{MjEKG`5)}G?p|#~KSRaV+^ts32<$FiK
z$N%Znz|fCBLLz?s4~_iuKO_QzLF~}T-~WTczWntKc)rQY_ny4F*8_%}yax<%2@e^P
zQtoj020Wb@6#C^aNNq^uzyHDEe^78p#NYp+k$?XOhkyU?8}MRNc;r2i(1-^No<5Hl
zeEc8!28Mk20@528`s2To>x2IRA>aQ8hlAAr`5zSa`@gg6!~cFkU%+Mrg?;(w<NvtG
z(e*7uX!u1opMV$3Ln40u2if82^ZLKI=(PVjy1V}ehW-S*!OZ;he__Fi{~cZK{SS%w
z_aEdJzrfcgeFJWb`3K%n^bdY}8)P@k%{F#d{|gE9{nypq^WVhm<bOf_-v7oX$NmR}
z{Q{c@QX3fZ@q=%`184uh`{n^5AKrk(VERGsu(7@RpO2^WKM!Zie<S0gV0{RAke|N%
z@(p;D;2(6~EFk2=Yh?W(bs#tM^LG8`<L*H63nV;1@e&mJ`Ile7!?@tkyYd0SZ*Ri%
zgTl(x{M3IzzMlWaCddC<+g<_t1r#2TF#Q9L+rW^I?*oD!I24y$Vf7Dsz8E?DB*bTe
z{Tm$q8yu#f@DLN3`rpwR5`G~OzyJFOzd9Zjb4S$O>mh@G&_kDi;P>x9ZUBXmhxbc(
zSb_Wk!XDnQz;Oyn1A!p72R=?Wv3Sl97Wsf7Chi)ux8IZ6z>rTrL1u)2(+T$U6BPFK
zzqjAB1pz^~dHsX#gOV?Ux8FSmZ{J&7-hNN&1A^aw0Qm)E4l)L%>A;XrKYaY3&GGWN
zE9U8apCLK*9#}t!2n@Ny5E6Ei#V_!on}5*r6#*e{?+1o{_!t=a@l!zXyT^V(FSq#x
zK8g$qz0DO6gwO}l3&WG99AyXzzsHc6e1knS;+|?~!~@5W@CPn|!S}QxqHc2O8NOkt
ot3Lr#4yJ$bGcY`0XJ9zM%)rpV2*F?pECfs*q!y&-hdcuV0G3V=PXGV_
literal 4286
zcmZQzU}RuqP*4ET3Jfa*7#PGD7#K7d7#I{77#JKFAmR)lAOIqU2X5Zs$bgLL=_@3A
zjhlBkf-u-E^l}5#e(vTSjvJvE#HNe&P`g3?jcVTE_#KKtY>*hu-2k;;s(FXw$>tr7
z|DhPf28q$seyH6be^xc`aQp|g8{`HM8zcsjqlp`k?AB}E;dmd(Zjk*T3=#v$(Zmf<
z`&pZJIL^XiH^_bv2FZccP&Evoc7y!o(Y(X)10MT9av(JzwN!Hh)P8~H9gaKj*bVYO
z2!qss)KbNMsNEp{q&4qw{6&QQAT=PhAUzbj0cyWO^A5*L7<TV;{ND`1h<ph0KL~@=
zg7i>iKh$o<<{gf0*zB%ZV*ek6akv4b2c(xQH$d$Mg`s)#4##Kc_BU;D{GXL$3C18c
zx;#`5NH53?lHCBcpR;*~<1!4hcRKzrpKSX--p3S-L2Mjh0MZLGgCzT*c7xm<)V#y-
z3yS?a9sf71bNHW@Xz@SJ!xW4`Y>*fhH-Pkl%mA51v>TxIi#G3YJcMF5D4p$e{9n{+
z^FPkh6a|CCu-Feuiy$*VW)WpS)NYV_3!8U1{z0*Sr{n+HW%mD*!_C3|hP%PT6f6dk
z!{P>z86dMjW)gG*)P9ZT9geq9><0OLyW{`dGAmTOVd3Cm3YKf$4zCkIeurU@Ss*j<
z+7Gpxxp{}<Bn-QEI{vSmZTCMRzznDTAUTj4EMWk02gpp2*;w5GwHp*h4$V6p-=N#y
zxXIyvW~Sx;Sa;NThsS}ZDOe7q2Ba2UKh#W+*&sVG+yJ$o7uuczxfg+VI{q*1v;80M
zjoWURJ3wkcYH@@CsJ#ZV1I2!*-5__xHt%r!f#UX^j{ob|IQ&nIMN4y_c=s}W8VAB4
zHVk{1g4KfbU~vP;Y>*uwyWnns+ArO_!|@D?-JmqL!|{JXy){Z+gZlMPypL%f2*-Jv
z{(*|Y)q(V2GYe`5$S$z`P`g3ysYPp3f$Nr<MfU%bLNL=@yqD?0!~ip45C*YP?DsGQ
z>jCM-5(c2Q8ptk?oiME5yu<M!x_g_pI{wcow8WO)Kgau+2E=)oGJr6c?P>ZM-3=hU
zAT!X-h1vzO6J$So^A5*3=xSPaIsUJhX8S+E&kP=>F!STRO_wBvm~$isnlXSdhz$~h
z$-`)nUXU3ev(U|l+6l5d9HUJID&yBX{7+ATmhrH(1){x7pC<U4nZ|pYGGwJ$f-#5<
z62q1jL1r|pcL2vFnj1iEHIUt)Hsgur9gfFfxMi2)v9gJ_$Kt(BkHvYS;FIy*rllE)
zmP|>(=HT=LB0y}A7)UP8)AS^=9*`Lzvp{CT%!kq-J3)5yHScf)<w*qI>ByT?WW^if
zV!|8eX^Mgqe9c%vaSpN<8H2>Ya%k#7X5<uE@;2{8vjbu$AF>$(!Tt{e|LXt$|6>oq
zKji=a2jLI=|NlQ=hu{Ou|Nnz<1LOby3=ClWkAa~cg#R!w*n{v71_t>L3=I4r{D6Uh
a9fS`sFffB~17iat17ib}cK|F4vKj!X^7qaF
diff --git a/public/index.html b/public/index.html
index 3e5a139..fe66dc2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,52 @@
<!DOCTYPE html>
-<html lang="">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title><%= htmlWebpackPlugin.options.title %></title>
- </head>
- <body>
- <noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
- </noscript>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- </body>
-</html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+ <!-- Open Graph -->
+ <meta property="og:image" content="https://alpha.nodenogg.in/files/logo_nt.png" />
+ <meta property="og:image:width" content="216" />
+ <meta property="og:image:height" content="226" />
+ <meta property="og:image:type" content="image/png" />
+ <meta property="og:title" content="nodenogg.in - BETA build" />
+ <meta property="og:description"
+ content="nodenogg.in is a Free Open Source Software (FOSS) project that empowers communities of practice to build and create knowledge by bridging the physical and digital studio spaces. designers and makers gather and spatially arrange materials, links and thoughts within the shared digital platform." />
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="https://beta.nodenogg.in" />
+
+ <!-- Twitter -->
+ <meta name="twitter:card" content="summary" />
+ <meta property="twitter:image" content="https://alpha.nodenogg.in/files/logo_nt.jpg" />
+ <meta property="twitter:image:width" content="216" />
+ <meta property="twitter:image:height" content="226" />
+ <meta property="twitter:image:type" content="image/png" />
+ <meta property="twitter:title" content="nodenogg.in - BETA build" />
+ <meta property="twitter:description"
+ content="nodenogg.in is a Free Open Source Software (FOSS) project that empowers communities of practice to build and create knowledge by bridging the physical and digital studio spaces. designers and makers gather and spatially arrange materials, links and thoughts within the shared digital platform." />
+
+ <meta property="twitter:url" content="https://beta.nodenogg.in" />
+ <meta property="twitter:site" content="@nodenoggin" />
+ <meta property="twitter:creator" content="@nodenoggin" />
+
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+ <link rel="apple-touch-icon" href="<%= BASE_URL %>favicon.ico">
+
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title>
+ <%= htmlWebpackPlugin.options.title %>
+ </title>
+</head>
+
+<body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+ Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 6a65bcc..ac4fc3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,66 @@
<template>
<div id="nav">
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
+ <router-link to="/">Start</router-link> |
+ <router-link to="/credits">Credits</router-link>
</div>
<router-view />
</template>
<style>
+@import url("https://use.typekit.net/mwd7zcu.css");
+
#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-family: source-code-pro, monospace;
+ font-weight: 400;
+ font-size: 18px;
+ font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
-}
-
-#nav {
- padding: 30px;
}
#nav a {
- font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
- color: #42b983;
+ color: #1cc469;
+}
+
+h1 {
+ margin: 0.2em 0 0 0;
+ padding: 0em;
+ font-size: 6.2em;
+ font-family: houschka-rounded, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ color: black;
+}
+
+h2 {
+ margin: 0em 0em 1em 0.3em;
+ font-size: 1.1em;
+ font-family: houschka-rounded, sans-serif;
+ font-weight: 300;
+ font-style: normal;
+ color: #707070;
+}
+
+.long {
+ word-wrap: break-word;
+ width: 305px;
+ line-height: 1em;
+}
+
+.highlight {
+ color: #1cc469;
+}
+
+@media only screen and (min-width: 630px) {
+ h2 {
+ margin-top: -1em;
+ }
+ .long {
+ word-wrap: normal;
+ }
}
</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1bafda5..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<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-router"
- target="_blank"
- rel="noopener"
- >router</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
- target="_blank"
- rel="noopener"
- >vuex</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>
-h3 {
- margin: 40px 0 0;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
diff --git a/src/components/JoinMicrocosm.vue b/src/components/JoinMicrocosm.vue
new file mode 100644
index 0000000..bfca06c
--- /dev/null
+++ b/src/components/JoinMicrocosm.vue
@@ -0,0 +1,109 @@
+<template>
+ <form>
+ <span class="arrow">โฌโฌ</span>
+ <h1>What shall we call you ? ๐ฉโ๐</h1>
+ <p>
+ First we need to connect this device to your ideas. This name is what
+ allows you to create and edit your nodes and this name can be anything you
+ like, this name is always anonymous.
+ </p>
+ <div class="breaker-one">
+ <label for="name">Name:</label>
+ <input
+ type="text"
+ id="name"
+ autocomplete="name"
+ placeholder="type name here!"
+ autocorrect="off"
+ autocapitalize="none"
+ />
+ <button type="button">Store</button>
+ </div>
+ <h2>Next start or join a <span class="long">microcosm !</span> ๐</h2>
+
+ <p>
+ Start your own microcosm to store your ideas and ask others to join you,
+ either tell them the microcosm name or share the URL and add the ending;
+ /microcosm/<strong>nameofyourmicrocosm</strong>
+ </p>
+ <div class="breaker-two">
+ <label for="microcosm">Microcosm:</label>
+ <input
+ type="text"
+ id="microcosm"
+ autocomplete="microcosm"
+ placeholder="type microcosm name here!"
+ autocorrect="off"
+ autocapitalize="none"
+ />
+ <button type="button">Start or Join</button>
+ </div>
+ </form>
+</template>
+
+<script>
+export default {
+ name: "JoinMicrocosm"
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+ margin-top: -0.5em;
+ font-size: 5.2em;
+ line-height: 1.2em;
+}
+
+h2 {
+ font-size: 5.2em;
+ line-height: 1.2em;
+ margin: -0.5em 0 0 0;
+ padding: 0em;
+ font-family: houschka-rounded, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ color: black;
+}
+
+.arrow {
+ font-size: 6em;
+ color: #1cc469;
+}
+
+.breaker-one {
+ padding: 1em;
+ margin-left: -1em;
+ margin-right: -0.4em;
+ margin-bottom: 2.5em;
+ background-color: rgba(196, 47, 152, 0.4);
+}
+
+.breaker-two {
+ padding: 1em;
+ margin-left: -1em;
+ margin-right: -0.4em;
+ margin-bottom: 1em;
+ background-color: rgba(37, 194, 194, 0.4);
+}
+
+label,
+button {
+ display: block;
+}
+
+input {
+ margin-top: 0.8em;
+ border: none;
+ padding: 1em;
+ font-size: 1em;
+}
+button {
+ cursor: pointer;
+ background-color: #1cc469;
+ border: none;
+ margin-top: 1em;
+ padding: 1em;
+ font-size: 1em;
+}
+</style>
diff --git a/src/components/TellmeMore.vue b/src/components/TellmeMore.vue
new file mode 100644
index 0000000..ef7b148
--- /dev/null
+++ b/src/components/TellmeMore.vue
@@ -0,0 +1,53 @@
+<template
+ ><div>
+ <h1>Messy mapping tool for multiplayer thinking</h1>
+ <p class="info">โ ๏ธThis is a non functional beta build of nodenogg.inโ ๏ธ</p>
+ <p>
+ nodenogg.in is free/libre open source software, built in the open,
+ inclusive by design, private by design, human led design, humane by
+ design, delightful by design, intuitive and decentralised by design.
+ </p>
+ <p>
+ nodenogg.in is a <em>messy</em> serendipitous
+ <em>multiplayer</em> co-creation space to <em>play</em> and
+ <em>push</em> ideas together. nodenogg.in is designed to support a new
+ type of <em>co-creation</em>, a messy <em>spatial</em> canvas where
+ <em>makers</em> can <em>tinker</em> with ideas and connect thoughts.
+ </p>
+ <p>
+ nodenogg.in built from scratch with ๐ using open accessible web tech
+ HTML, CSS, Javascript, SVG, Vue 3, PouchDB and CouchDB (and a few plugins
+ such as markdown).
+ </p>
+ <p>
+ Working Vue 2 alpha version can be played with at
+ <a href="https://alpha.nodenogg.in">alpha.nodenogg.in</a>
+ </p>
+ <p>Made by Adam Procter</p>
+ <p><a href="#">LICENSE</a></p>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "TellmeMore",
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+ font-size: 3em;
+}
+
+.info {
+ font-style: italic;
+}
+
+em {
+ font-style: normal;
+ font-weight: 700;
+ background-color: #1cc469;
+ padding: 0 1em 0 1em;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d100dc9..3933ab5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,20 +1,20 @@
import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import Start from "../views/Start.vue";
const routes = [
{
path: "/",
- name: "Home",
- component: Home
+ name: "Start",
+ component: Start
},
{
- path: "/about",
- name: "About",
+ path: "/credits",
+ name: "Credits",
// route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
+ // this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
- import(/* webpackChunkName: "about" */ "../views/About.vue")
+ import(/* webpackChunkName: "credits" */ "../views/Credits.vue")
}
];
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
- <div class="about">
- <h1>This is an about page</h1>
- </div>
-</template>
diff --git a/src/views/Credits.vue b/src/views/Credits.vue
new file mode 100644
index 0000000..a8c10e8
--- /dev/null
+++ b/src/views/Credits.vue
@@ -0,0 +1,20 @@
+<template>
+ <h1>This will be the credits and thank you information.</h1>
+ <p>
+ You can read the doctoral thesis that accompanies this work
+ <a href="https://thesis.adamprocter.co.uk">here</a>
+ </p>
+</template>
+
+<script>
+export default {
+ name: "Credits",
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+ font-size: 3em;
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 191049e..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
- <div class="home">
- <img alt="Vue logo" src="../assets/logo.png" />
- <HelloWorld msg="Welcome to Your Vue.js App" />
- </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
- name: "Home",
- components: {
- HelloWorld
- }
-};
-</script>
diff --git a/src/views/Start.vue b/src/views/Start.vue
new file mode 100644
index 0000000..c3eaa64
--- /dev/null
+++ b/src/views/Start.vue
@@ -0,0 +1,69 @@
+<template>
+ <header class="header">
+ <h1 class="long">nodenogg<span class="highlight">.in</span></h1>
+ <h2>a messy mapping tool for multiplayer thinking</h2>
+ </header>
+ <nav class="nav">
+ <a role="button" class="tellmemore" href="#" @click="isTellme = !isTellme"
+ >tell me more</a
+ >
+ <a role="button" class="letsplay" href="#" @click="isStart = !isStart"
+ >let's play !</a
+ >
+ </nav>
+ <main>
+ <JoinMicrocosm v-show="isStart" />
+ </main>
+ <aside>
+ <TellmeMore v-show="isTellme" />
+ </aside>
+</template>
+
+<script>
+// @ is an alias to /src
+import JoinMicrocosm from "@/components/JoinMicrocosm.vue";
+import TellmeMore from "@/components/TellmeMore.vue";
+
+export default {
+ name: "Start",
+ components: {
+ JoinMicrocosm,
+ TellmeMore,
+ },
+ data() {
+ return {
+ isStart: false,
+ isTellme: false,
+ };
+ },
+};
+</script>
+
+<style scoped>
+aside {
+ max-width: 800px;
+}
+a {
+ display: block;
+ font-size: 0.8em;
+ color: black;
+ text-decoration-line: none;
+ border-radius: 1em;
+ margin: 1em 0.8em;
+ padding: 1em 1.2em;
+}
+
+.tellmemore {
+ background-color: rgba(196, 47, 152, 0.4);
+}
+
+.letsplay {
+ background-color: rgba(37, 194, 194, 0.4);
+}
+
+@media only screen and (min-width: 330px) {
+ a {
+ display: inline-block;
+ }
+}
+</style>
--
GitLab