vacp2p/vac.dev-experimental-old
1
0
Fork 0
mirror of https://github.com/vacp2p/vac.dev-experimental-old.git synced 2025-02-27 12:30:32 +00:00
Code Issues Packages Projects Releases Wiki Activity
vac.dev-experimental-old/vac-overview.html

681 lines
26 KiB
HTML
Raw Normal View History

Updates
2021-09-02 21:14:19 +00:00
<!DOCTYPE html>
<html class="h-full" lang="en-US">
<head>
<title>Vac - Vac - A Rough Overview</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Vac</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="shortcut icon"
href="/assets/img/favicon.png"
type="image/png"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/assets/css/style.css" />
</head>
<body class="h-full flex flex-col">
<div
class="flex-grow container max-w-screen-xl mx-auto px-5 md:px-12 lg:pt-6"
>
<header>
<div class="container max-w-screen-xl sm:border-b">
<div
class="
nav-section
flex
justify-between
items-center
py-3
md:py-5
lg:py-10
"
>
<div class="logo md:pr-8 l:p-0">
<a href="/"
><img src="/assets/img/logo.png"
/></a>
</div>
<div class="flex justify-between items-center w-9/12">
<div class="burger block sm:hidden z-50">
<button
class="
burger__button burger__button--open
fixed
top-2
right-5
w-12
h-12
"
type="button"
aria-label="Mobile menu button"
>
<img
class="burger__icon"
src="/assets/img/burger.svg"
alt="Open menu button"
/>
</button>
<button
class="
burger__button burger__button--close
hidden
fixed
top-2
right-5
w-12
h-12
"
type="button"
aria-label="Close mobile menu button"
>
<img
class="burger__icon burger__icon--close"
src="/assets/img/close.svg"
alt="Close menu button"
/>
</button>
</div>
<nav class="nav max-w-screen-xm md:max-w-screen-sl container">
<ul
class="
nav__list
hidden
sm:flex
justify-between
container
text-xs
font-semibold
md:pr-8
l:p-0
"
>
<li class="hover:opacity-50">
<a class="nav__link" href="/#work">Work</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/#about">About</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/#join">Join VAC</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/research-log">Research log</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/media">Media</a>
</li>
<li class="hover:opacity-50">
<a href="https://specs.vac.dev" target="_blank" rel="noopener noreferrer"
>Specs</a
>
</li>
<li class="hover:opacity-50">
<a href="https://forum.vac.dev/" target="_blank" rel="noopener noreferrer"
>Forum</a
>
</li>
</ul>
</nav>
<ul class="social items-center hidden md:flex">
<li class="pr-5">
<a href="https://twitter.com/vacp2p" target="_blank" rel="noopener noreferrer"
><svg
width="25"
height="21"
viewBox="0 0 25 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="hover:opacity-50"
>
<path
d="M24.8872 3.04499C23.9872 3.43499 23.0572 3.70498 22.0672 3.82499C23.0872 3.22498 23.8672 2.26499 24.2272 1.09499C23.2672 1.66499 22.2172 2.05499 21.1072 2.29499C20.2072 1.33499 18.9172 0.734985 17.5072 0.734985C14.7772 0.734985 12.5872 2.95499 12.5872 5.65499C12.5872 6.04499 12.6172 6.40498 12.7072 6.76498C8.62721 6.58498 5.02721 4.60498 2.59721 1.63499C0.857207 4.75498 2.80721 7.33499 4.09721 8.20499C3.31721 8.20499 2.53721 7.96499 1.87721 7.60499C1.87721 10.035 3.58721 12.045 5.80721 12.495C5.32721 12.645 4.24721 12.735 3.58721 12.585C4.21721 14.535 6.04721 15.975 8.17721 16.005C6.49721 17.325 4.03721 18.375 0.887207 18.045C3.07721 19.455 5.65721 20.265 8.44721 20.265C17.5072 20.265 22.4272 12.765 22.4272 6.28499C22.4272 6.07499 22.4272 5.86499 22.3972 5.65499C23.4172 4.90499 24.2572 4.03499 24.8872 3.04499Z"
fill="#151512"
/>
</svg>
</a>
</li>
<li class="pr-5">
<a href="https://github.com/vacp2p" target="_blank" rel="noopener noreferrer"
><svg
width="26"
height="25"
viewBox="0 0 26 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="hover:opacity-50"
>
<path
d="M12.8857 0.856567C6.26021 0.856567 0.915339 6.20154 0.950043 12.7951C0.9778 18.0687 4.43935 22.5427 9.21766 24.1227C9.81824 24.2327 10.0353 23.864 10.0336 23.5474C10.0321 23.2635 10.0177 22.5129 10.0065 21.5171C6.67274 22.238 5.95552 19.9163 5.95552 19.9163C5.40376 18.5369 4.61433 18.1698 4.61433 18.1698C3.51994 17.4296 4.69151 17.4444 4.69151 17.4444C5.89646 17.5291 6.53549 18.6751 6.53549 18.6751C7.61609 20.4989 9.35182 19.9727 10.0342 19.6665C10.1382 18.8951 10.4459 18.3689 10.7878 18.0702C8.12222 17.7684 5.31483 16.7443 5.29076 12.1708C5.2839 10.8672 5.74629 9.80152 6.50989 8.96619C6.3838 8.66445 5.96641 7.45009 6.61027 5.80766C6.61027 5.80766 7.61658 5.4866 9.9167 7.03094C10.8723 6.76636 11.8976 6.63408 12.9191 6.62962C13.9376 6.63556 14.9658 6.76636 15.9257 7.03242C18.2081 5.48809 19.2163 5.80914 19.2163 5.80914C19.8789 7.45306 19.4743 8.66594 19.3529 8.96767C20.1268 9.80301 20.5959 10.8687 20.6028 12.1723C20.6269 16.7577 17.8272 17.767 15.1558 18.0628C15.5882 18.4314 15.976 19.1597 15.9819 20.273C15.9903 21.8693 15.9821 23.1565 15.9841 23.5474C15.9858 23.867 16.2038 24.2386 16.8122 24.1212C21.5663 22.5397 24.9778 18.0672 24.95 12.7951C24.9153 6.20154 19.5142 0.856567 12.8857 0.856567Z"
fill="#151512"
/>
</svg>
</a>
</li>
<li>
<a
href="https://discord.gg/PQFdubGt6d"
target="_blank"
rel="noopener noreferrer"
><svg
width="25"
height="21"
viewBox="0 0 25 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="hover:opacity-50"
>
<path
d="M22.7861 9.04256C21.8482 5.74455 20.7799 4.04048 20.7627 4.00991C20.7017 3.93459 19.189 2.104 15.5271 0.75L15.0353 2.0764C16.7774 2.72057 18.0116 3.50643 18.6899 4.01419C16.6599 3.40408 14.2431 3.03041 12.1008 3.03041C9.95851 3.03041 7.53775 3.40408 5.50128 4.01419C6.18496 3.50648 7.42744 2.72057 9.17631 2.0764L8.69846 0.75C5.02238 2.104 3.49044 3.93459 3.42863 4.00991C3.41108 4.04048 2.32479 5.74455 1.35221 9.04256C0.414855 12.2208 0.0415214 16.7045 0.027872 16.8843C0.109225 17.0131 1.97891 20.25 7.12077 20.25L8.43406 18.3536C6.97595 17.964 5.58693 17.3357 4.31689 16.4832L5.10228 15.3069C7.15122 16.6822 9.54509 17.4092 12.0251 17.4092C14.5051 17.4092 16.9067 16.6822 18.9701 15.3069L19.7431 16.4832C18.4641 17.3357 17.0684 17.964 15.6062 18.3536L16.8995 20.25C22.0414 20.25 23.9452 17.0131 24.0279 16.8843C24.0161 16.7045 23.69 12.2208 22.7861 9.04256ZM8.79853 12.7392H7.39228L7.40468 10.3841H8.81093L8.79853 12.7392ZM16.7071 12.7392H15.3008L15.3132 10.3841H16.7195L16.7071 12.7392Z"
fill="#151512"
/>
</svg>
</a>
</li>
</ul>
</div>
<div
class="
overlay
container
max-w-screen-sm
w-full
hidden
sm:hidden
fixed
top-0
right-0
h-screen
bg-black bg-opacity-40
z-30
"
>
<nav
class="
nav-mobile
hidden
fixed
top-0
right-0
flex flex-col
justify-between
items-center
pt-14
px-12
pb-5
bg-white
w-9/12
h-3/4
z-40
"
>
<ul
class="
nav__list
flex flex-col flex-1
justify-between
items-center
container
box-content
w-32
h-auto
max-h-nav
text-xs
font-normal
"
>
<li class="hover:opacity-50">
<a class="nav__link" href="/#work">Work</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/#about">About</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/#join">Join VAC</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/research-log">Research log</a>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="/media">Media</a>
</li>
<li class="hover:opacity-50">
<a href="https://specs.vac.dev" target="_blank" rel="noopener noreferrer"
>Specs</a
>
</li>
<li class="hover:opacity-50">
<a href="https://forum.vac.dev/" target="_blank" rel="noopener noreferrer"
>Forum</a
>
</li>
</ul>
<ul class="social items-center flex mt-8">
<li class="pr-5">
<a href="https://twitter.com/vacp2p" target="_blank" rel="noopener noreferrer"
><svg
width="25"
height="21"
viewBox="0 0 25 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="hover:opacity-50"
>
<path
d="M24.8872 3.04499C23.9872 3.43499 23.0572 3.70498 22.0672 3.82499C23.0872 3.22498 23.8672 2.26499 24.2272 1.09499C23.2672 1.66499 22.2172 2.05499 21.1072 2.29499C20.2072 1.33499 18.9172 0.734985 17.5072 0.734985C14.7772 0.734985 12.5872 2.95499 12.5872 5.65499C12.5872 6.04499 12.6172 6.40498 12.7072 6.76498C8.62721 6.58498 5.02721 4.60498 2.59721 1.63499C0.857207 4.75498 2.80721 7.33499 4.09721 8.20499C3.31721 8.20499 2.53721 7.96499 1.87721 7.60499C1.87721 10.035 3.58721 12.045 5.80721 12.495C5.32721 12.645 4.24721 12.735 3.58721 12.585C4.21721 14.535 6.04721 15.975 8.17721 16.005C6.49721 17.325 4.03721 18.375 0.887207 18.045C3.07721 19.455 5.65721 20.265 8.44721 20.265C17.5072 20.265 22.4272 12.765 22.4272 6.28499C22.4272 6.07499 22.4272 5.86499 22.3972 5.65499C23.4172 4.90499 24.2572 4.03499 24.8872 3.04499Z"
fill="#151512"
/>
</svg>
</a>
</li>
<li class="pr-5">
<a href="https://github.com/vacp2p" target="_blank" rel="noopener noreferrer"
><svg
width="26"
height="25"
viewBox="0 0 26 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="hover:opacity-50"
>
<path
d="M12.8857 0.856567C6.26021 0.856567 0.915339 6.20154 0.950043 12.7951C0.9778 18.0687 4.43935 22.5427 9.21766 24.1227C9.81824 24.2327 10.0353 23.864 10.0336 23.5474C10.0321 23.2635 10.0177 22.5129 10.0065 21.5171C6.67274 22.238 5.95552 19.9163 5.95552 19.9163C5.40376 18.5369 4.61433 18.1698 4.61433 18.1698C3.51994 17.4296 4.69151 17.4444 4.69151 17.4444C5.89646 17.5291 6.53549 18.6751 6.53549 18.6751C7.61609 20.4989 9.35182 19.9727 10.0342 19.6665C10.1382 18.8951 10.4459 18.3689 10.7878 18.0702C8.12222 17.7684 5.31483 16.7443 5.29076 12.1708C5.2839 10.8672 5.74629 9.80152 6.50989 8.96619C6.3838 8.66445 5.96641 7.45009 6.61027 5.80766C6.61027 5.80766 7.61658 5.4866 9.9167 7.03094C10.8723 6.76636 11.8976 6.63408 12.9191 6.62962C13.9376 6.63556 14.9658 6.76636 15.9257 7.03242C18.2081 5.48809 19.2163 5.80914 19.2163 5.80914C19.8789 7.45306 19.4743 8.66594 19.3529 8.96767C20.1268 9.80301 20.5959 10.8687 20.6028 12.1723C20.6269 16.7577 17.8272 17.767 15.1558 18.0628C15.5882 18.4314 15.976 19.1597 15.9819 20.273C15.9903 21.8693 15.9821 23.1565 15.9841 23.5474C15.9858 23.867 16.2038 24.2386 16.8122 24.1212C21.5663 22.5397 24.9778 18.0672 24.95 12.7951C24.9153 6.20154 19.5142 0.856567 12.8857 0.856567Z"
fill="#151512"
/>
</svg>
</a>
</li>
<li>
<a
href="https://discord.gg/PQFdubGt6d"
target="_blank"
rel="noopener noreferrer"
><svg
width="25"
height="21"
viewBox="0 0 25 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="hover:opacity-50"
>
<path
d="M22.7861 9.04256C21.8482 5.74455 20.7799 4.04048 20.7627 4.00991C20.7017 3.93459 19.189 2.104 15.5271 0.75L15.0353 2.0764C16.7774 2.72057 18.0116 3.50643 18.6899 4.01419C16.6599 3.40408 14.2431 3.03041 12.1008 3.03041C9.95851 3.03041 7.53775 3.40408 5.50128 4.01419C6.18496 3.50648 7.42744 2.72057 9.17631 2.0764L8.69846 0.75C5.02238 2.104 3.49044 3.93459 3.42863 4.00991C3.41108 4.04048 2.32479 5.74455 1.35221 9.04256C0.414855 12.2208 0.0415214 16.7045 0.027872 16.8843C0.109225 17.0131 1.97891 20.25 7.12077 20.25L8.43406 18.3536C6.97595 17.964 5.58693 17.3357 4.31689 16.4832L5.10228 15.3069C7.15122 16.6822 9.54509 17.4092 12.0251 17.4092C14.5051 17.4092 16.9067 16.6822 18.9701 15.3069L19.7431 16.4832C18.4641 17.3357 17.0684 17.964 15.6062 18.3536L16.8995 20.25C22.0414 20.25 23.9452 17.0131 24.0279 16.8843C24.0161 16.7045 23.69 12.2208 22.7861 9.04256ZM8.79853 12.7392H7.39228L7.40468 10.3841H8.81093L8.79853 12.7392ZM16.7071 12.7392H15.3008L15.3132 10.3841H16.7195L16.7071 12.7392Z"
fill="#151512"
/>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<main class="bg-white text-black flex flex-col"><section
class="
container
max-w-screen-xl
flex flex-col
sm:flex-row
pt-10
pb-0
md:pb-10
lg:pb-0
"
>
<div
class="
heading-block
w-full
sm:w-2/12
lg:w-3/12
flex
lg:justify-center
items-start
pb-3
sm:pb-0
"
>
<a class="link link--back" href="/research-log/">Back</a>
</div>
<div
class="info-block w-full sm:w-10/12 lg:w-9/12 pb-5 sm:pb-10 overflow-hidden"
>
<div class="post mb-10">
<h1 class="text-xl md:text-xxl mb-5 sm:max-w-md lg:max-w-2xl">
Vac - A Rough Overview
</h1>
<div>
<span class="text-s lg:text-base">
02 Aug 2019 • by
</span>
<a
href="/authors/oskarth"
class="text-s lg:text-base font-bold hover:underline"
>oskarth</a
>
</div>
</div>
<div class="post__content"><p>Vac is a <strong>modular peer-to-peer messaging stack, with a focus on secure messaging</strong>. What does that mean? Let’s unpack it a bit.</p>
<h2 id="basic-terms">Basic terms</h2>
<p><em>messaging stack</em>. While the initial focus is on <a href="https://vac.dev/p2p-data-sync-for-mobile">data sync</a>, we are concerned with all layers in the stack. That means all the way from underlying transports, p2p overlays and routing, to initial trust establishment and semantics for things like group chat. The ultimate goal is to give application developers the tools they need to provide secure messaging for their users, so they can focus on their domain expertise.</p>
<p><em>modular</em>. Unlike many other secure messaging applications, our goal is not to have a tightly coupled set of protocols, nor is it to reinvent the wheel. Instead, we aim to provide options at each layer in the stack, and build on the shoulders of giants, putting a premimum on interoperability. It’s similar in philosophy to projects such as <a href="https://libp2p.io/">libp2p</a> or <a href="https://www.parity.io/substrate/">Substrate</a> in that regard. Each choice comes with different trade-offs, and these look different for different applications.</p>
<p><em>peer-to-peer</em>. The protocols we work on are pure p2p, and aim to minimize centralization. This too is in opposition to many initiatives in the secure messaging space.</p>
<p><em>messaging</em>. By messaging we mean messaging in a generalized sense. This includes both human to human communication, as well machine to machine communication. By messaging we also mean something more fundamental than text messages, we also include things like transactions (state channels, etc) under this moniker.</p>
<p><em>secure messaging</em>. Outside of traditional notions of secure messaging, such as ensuring end to end encryption, forward secrecy, avoiding MITM-attacks, etc, we are also concerned with two other forms of secure messaging. We call these <em>private messaging</em> and <em>censorship-resistance</em>. Private messaging means viewing privacy as a security property, with all that entails. Censorship resistance ties into being p2p, but also in terms of allowing for transports and overlays that can’t easily be censored by port blocking, traffic analysis, and similar.</p>
<p><em>Vāc</em>. Is a Vedic goddess of speech. It also hints at being a vaccine.</p>
<h2 id="protocol-stack">Protocol stack</h2>
<p>What does this stack look like? We take inspiration from <a href="https://tools.ietf.org/html/rfc793">core</a> <a href="https://www.ietf.org/rfc/rfc1122.txt">internet architecture</a>, existing <a href="http://cacr.uwaterloo.ca/techreports/2015/cacr2015-02.pdf">survey work</a> and other <a href="https://code.briarproject.org/briar/briar/wikis/A-Quick-Overview-of-the-Protocol-Stack">efforts</a> that have been done to decompose the problem into orthogonal pieces. Each layer provides their own set of properties and only interact with the layers it is adjacent to. Note that this is a rough sketch.</p>
<table>
<thead>
<tr>
<th>Layer / Protocol</th>
<th>Purpose</th>
<th>Examples</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application layer</td>
<td>End user semantics</td>
<td>1:1 chat, group chat</td>
</tr>
<tr>
<td>Data Sync</td>
<td>Data consistency</td>
<td>MVDS, BSP</td>
</tr>
<tr>
<td>Secure Transport</td>
<td>Confidentiality, PFS, etc</td>
<td>Double Ratchet, MLS</td>
</tr>
<tr>
<td>Transport Privacy</td>
<td>Transport and metadata protection</td>
<td>Whisper, Tor, Mixnet</td>
</tr>
<tr>
<td>P2P Overlay</td>
<td>Overlay routing, NAT traversal</td>
<td>devp2p, libp2p</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Trust Establishment</td>
<td>Establishing end-to-end trust</td>
<td>TOFU, web of trust</td>
</tr>
</tbody>
</table>
<p>As an example, end user semantics such as group chat or moderation capabilities can largely work regardless of specific choices further down the stack. Similarly, using a mesh network or Tor doesn’t impact the use of Double Ratchet at the Secure Transport layer.</p>
<p>Data Sync plays a similar role to what TCP does at the transport layer in a traditional Internet architecture, and for some applications something more like UDP is likely to be desirable.</p>
<p>In terms of specific properties and trade-offs at each layer, we’ll go deeper down into them as we study them. For now, this is best treated as a rough sketch or mental map.</p>
<h2 id="problems-and-rough-priorities">Problems and rough priorities</h2>
<p>With all the pieces involved, this is quite an undertaking. Luckily, a lot of pieces are already in place and can be either incorporated as-is or iterated on. In terms of medium and long term, here’s a rough sketch of priorities and open problems.</p>
<ol>
<li><strong>Better data sync.</strong> While the current <a href="https://specs.vac.dev/specs/mvds.html">MVDS</a> works, it is lacking in a few areas:</li>
</ol>
<ul>
<li>Lack of remote log for mostly-offline offline devices</li>
<li>Better scalability for multi-user chat contexts</li>
<li>Better usability in terms of application layer usage and supporting more transports</li>
</ul>
<ol>
<li><strong>Better transport layer support.</strong> Currently MVDS runs primarily over Whisper, which has a few issues:</li>
</ol>
<ul>
<li>scalability, being able to run with many nodes</li>
<li>spam-resistance, proof of work is a poor mechanism for heterogeneous devices</li>
<li>no incentivized infrastructure, leading to centralized choke points</li>
</ul>
<p>In addition to these most immediate concerns, there are other open problems. Some of these are overlapping with the above.</p>
<ol>
<li>
<p><strong>Adaptive nodes.</strong> Better support for resource restricted devices and nodes of varying capabilities. Light connection strategy for resources and guarantees. Security games to outsource processing with guarantees.</p>
</li>
<li>
<p><strong>Incentivized and spam-resistant messaging.</strong> Reasons to run infrastructure and not relying on altruistic nodes. For spam resistance, in p2p multicast spam is a big attack vector due to amplification. There are a few interesting directions here, such as EigenTrust, proof of burn with micropayments, and leveraging zero-knowledge proofs.</p>
</li>
<li><strong>Strong privacy guarantees at transport privacy layer</strong>. More rigorous privacy guarantees and explicit trade-offs for metadata protection. Includes Mixnet.</li>
<li>
<p><strong>Censorship-resistant and robust P2P overlay</strong>. NAT traversal; running in the browser; mesh networks; pluggable transports for traffic obfuscation.</p>
</li>
<li>
<p><strong>Scalable and decentralized secure conversational security.</strong> Strong security guarantees such as forward secrecy, post compromise security, for large group chats. Includes projects such MLS and extending Double Ratchet.</p>
</li>
<li><strong>Better trust establishment and key handling</strong>. Avoiding MITM attacks while still enabling a good user experience. Protecting against ghost users in group chat and providing better ways to do key handling.</li>
</ol>
<p>There is also a set of more general problems, that touch multiple layers:</p>
<ol>
<li>
<p><strong>Ensuring modularity and interoperability</strong>. Providing interfaces that allow for existing and new protocols to be at each layer of the stack.</p>
</li>
<li>
<p><strong>Better specifications</strong>. Machine-readable and formally verified specifications. More rigorous analysis of exact guarantees and behaviors. Exposing work in such a way that it can be analyzed by academics.</p>
</li>
<li>
<p><strong>Better simulations</strong>. Providing infrastructure and tooling to be able to test protocols in adverse environments and at scale.</p>
</li>
<li>
<p><strong>Enabling excellent user experience</strong>. A big reason for the lack of widespread adoption of secure messaging is the fact that more centralized, insecure methods provide a better user experience. Given that incentives can align better for users interested in secure messaging, providing an even better user experience should be doable.</p>
</li>
</ol>
<hr />
<p>We got some work to do. Come help us if you want. See you in the next update!</p>
</div>
</div>
</section>
</main>
</div>
<footer class="footer bg-black flex flex-shrink-0 justify-center">
<div
class="
container
max-w-screen-xl
flex
sl:justify-between
lm:justify-start
p-5
pb-10
md:px-12 md:pt-5
lg:pt-10
"
>
<div class="logo mr-10 sm:mr-0 sm:w-2/12 lg:w-3/12">
<a href="/"
><img
src="/assets/img/logo.png"
alt="Vac logo"
class="w-9 h-11"
/></a>
</div>
<div
class="flex flex-col xm:flex-row xm:justify-between sm:w-10/12 lg:w-9/12"
>
<p
class="
hidden
ml:inline-block ml:mr-10
w-52
text-base text-white
opacity-75
lm:mr-32
"
>
VAC researches peer-to-peer, private, censorship resistant communication
</p>
<nav class="flex max-w-xs mr-0 xm:mr-5 l:mr-32 mb-5 sm:mb-0">
<div class="flex">
<div class="flex flex-col mr-5 sm:mr-10 sl:mr-14">
<p class="text-base text-white mb-5 lg:mb-4">Research</p>
<ul>
<li class="text-xxs lg:text-base text-white opacity-75 hover:opacity-50 mb-5">
<a href="https://status.im/" target="_blank" rel="noopener noreferrer"
>Log</a
>
</li>
<li class="text-xxs lg:text-base text-white opacity-75 hover:opacity-50 mb-5">
<a href="https://forum.vac.dev/" target="_blank" rel="noopener noreferrer"
>Forum</a
>
</li>
<li class="text-xxs lg:text-base text-white opacity-75 hover:opacity-50 mb-5">
<a href="https://status.im/" target="_blank" rel="noopener noreferrer"
>Media</a
>
</li>
<li class="text-xxs lg:text-base text-white opacity-75 hover:opacity-50 mb-5">
<a href="https://jobs.status.im/?search=Vac" target="_blank" rel="noopener noreferrer"
>Careers</a
>
</li>
</ul>
</div>
<div class="flex flex-col sl:mr-14">
<p class="text-base text-white mb-5 lg:mb-4 mr-5">Socials</p>
<ul>
<li class="text-xxs lg:text-base text-white opacity-75 hover:opacity-50 mb-5">
<a href="https://twitter.com/vacp2p" target="_blank" rel="noopener noreferrer"
>Twitter</a
>
</li>
<li class="text-xxs lg:text-base text-white opacity-75 hover:opacity-50 mb-5">
<a href="https://discord.gg/PQFdubGt6d" target="_blank" rel="noopener noreferrer"
>Discord</a
>
</li>
<li class="text-xxs lg:text-base text-white opacity-75 hover:opacity-50 mb-5">
<a href="https://t.me/vacp2p" target="_blank" rel="noopener noreferrer"
>Telegram</a
>
</li>
</ul>
</div>
</div></nav>
<div class="flex flex-col w-52">
<h3 class="text-base text-white mb-5">Signup for updates</h3>
<form action="" class="footer__form">
<div class="flex items-center w-full">
<input
class="
text-xs text-white
w-full
bg-black
border-b border-white
rounded-none
mr-2
focus:outline-none
placeholder-white placeholder-opacity-50
"
type="email"
placeholder="your email"
required
/>
<button
class="
h-10
w-10
bg-arrowWhite bg-auto bg-no-repeat bg-left
focus:outline-none
hover:opacity-50
"
type="submit"
></button>
</div>
</form>
<p
class="footer__confirm text-base italic text-white opacity-75 hidden"
>
You signed up! Check your e-mail
</p>
</div>
</div>
</div>
</footer>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/smooth-scroll.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink