vacp2p
/
vac.dev-experimental-old
mirror of https://github.com/vacp2p/vac.dev-experimental-old.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add header

This commit is contained in:
Maria Rushkova 2021-07-29 19:02:18 +02:00
parent 18c570b3a9
commit c03233d1f9
21 changed files with 385 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_config.yml
View File

@ -1,5 +1,5 @@
title: Tailwind Jekyll Starter Kit
description: A starter kit for using Tailwind with Jekyll
title: Vac
description: VAC researches peer-to-peer, private, censorship resistant communication.
exclude:
- Gemfile

2
_includes/footer.html
View File

@ -1,2 +0,0 @@
</body>
</html>

224
_includes/header.html
View File

@ -1,22 +1,210 @@
<!DOCTYPE html>
<html class="no-js" lang="en-US">
<header>
<div class="container max-w-screen-xl 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="{{site.url}}{{ site.baseurl }}"
><img src="{{ '/assets/img/logo.png' | relative_url }}"
/></a>
</div>
<head>
{% if page.title %}
<title>{{ site.title }} - {{ page.title }}</title>
{% else %}
<title>{{ site.title }}</title>
{% endif %}
<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' | relative_url }}"
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' | relative_url }}"
alt="Close menu button"
/>
</button>
</div>
<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">
<nav class="nav 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="{{site.url}}{{ site.baseurl }}/#work"
>Work</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
>About</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#join"
>Join VAC</a
>
</li>
<li class="hover:opacity-50">
<a
class="nav__link"
href="{{site.url}}{{ site.baseurl }}/research-log/"
>Research log</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/media"
>Media</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="https://specs.vac.dev" target="_blank"
>Specs</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="https://forum.vac.dev/" target="_blank"
>Forum</a
>
</li>
</ul>
</nav>
<link rel="shortcut icon" href="{{ '/assets/img/favicon.png' | relative_url }}" type="image/png" />
<ul class="social items-center hidden md:flex">
{% include social.html %}
</ul>
<link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css" />
</head>
<body>
</html>
<div
class="
overlay
container
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
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="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
>Work</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
>About</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#who"
>Join VAC</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a
class="nav__link"
href="{{site.url}}{{ site.baseurl }}/research-log/"
>Research log</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/media"
>Media</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="https://specs.vac.dev" target="_blank"
>Specs</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="https://forum.vac.dev/" target="_blank"
>Forum</a
>
</li>
</ul>
<ul class="social items-center flex mt-8">
{% include social.html %}
</ul>
</nav>
</div>
</div>
</div>
</header>

51
_includes/social.html Normal file
View File

@ -0,0 +1,51 @@
<li class="pr-5">
<a href="https://twitter.com/vacp2p" target="_blank"
><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"
><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.com/" target="_blank"
><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>

41
_layouts/default.html
View File

@ -1,10 +1,41 @@
---
---
{% include header.html %}
<!DOCTYPE html>
<html class="no-js" lang="en-US">
<head>
{% if page.title %}
<title>{{ site.title }} - {{ page.title }}</title>
{% else %}
<title>{{ site.title }}</title>
{% endif %}
<main class="bg-indigo-500 flex h-screen items-center justify-center w-full">
{{ content }}
</main>
<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" />
{% include footer.html %}
<link
rel="shortcut icon"
href="{{ '/assets/img/favicon.png' | relative_url }}"
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="{{ site.baseurl }}/assets/css/style.css" />
</head>
<body>
<div class="container max-w-screen-xl mx-auto px-5 md:px-12 lg:pt-6">
{% include header.html %}
<main class="bg-white text-black flex flex-col">{{ content }}</main>
</div>
{% include footer.html %}
<script src="{{ '/assets/js/main.js' | relative_url }}"></script>
</body>
</html>

BIN
assets/img/1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
assets/img/2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/img/3.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
assets/img/4.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
assets/img/5.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

6
assets/img/burger.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" fill="white"/>
<rect x="12" y="15" width="24" height="2" fill="black"/>
<rect x="12" y="23" width="24" height="2" fill="black"/>
<rect x="12" y="31" width="24" height="2" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

5
assets/img/close.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="47.0204" fill="white"/>
<path d="M16.2217 15L34 33.3848L31.778 33.3848L14 15H16.2217Z" fill="black"/>
<path d="M14 33.414L31.7783 15.0294L34.0001 14.9999L16.2219 33.4141L14 33.414Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 325 B

3
assets/img/discord.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
assets/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 707 B

3
assets/img/github.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
assets/img/twitter.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 952 B

25
assets/js/main.js Normal file
View File

@ -0,0 +1,25 @@
"use strict";
document.querySelectorAll(".nav__link").forEach((link) =>
link.addEventListener("click", function (e) {
e.preventDefault();
const id = e.target.getAttribute("data-href");
document.querySelector(id).scrollIntoView({
behavior: "smooth",
});
})
);
const burger = document.querySelector(".burger");
const burgerOpen = document.querySelector(".burger__button--open");
const burgerClose = document.querySelector(".burger__button--close");
const menuMobile = document.querySelector(".nav-mobile");
const overlay = document.querySelector(".overlay");
burger.addEventListener("click", function (e) {
e.preventDefault();
burgerOpen.classList.toggle("hidden");
burgerClose.classList.toggle("hidden");
menuMobile.classList.toggle("hidden");
overlay.classList.toggle("hidden");
});

4
index.html
View File

@ -2,4 +2,6 @@
layout: default
---
<h1 class="text-white text-4xl font-semibold">Vac</h1>
<h1 class="text-4xl font-semibold">Vac</h1>
<section id="work">Work</section>

14
src/style.css
View File

@ -1,3 +1,17 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.nav {
max-width: 680px;
}
.nav-mobile {
height: 73%;
}
@media (max-width: 768px) {
.nav {
max-width: 480px;
}
}

28
tailwind.config.js
View File

@ -2,6 +2,34 @@ module.exports = {
purge: [`_site/**/*.html`],
theme: {
extend: {},
screens: {
xs: { max: "450px" },
sm: "570px",
"md-max": { max: "768px" },
md: "768px",
"lg-max": { max: "1024px" },
lg: "1024px",
l: "1199px",
xl: "1440px",
},
maxHeight: {
0: "0",
"1/4": "25%",
"1/2": "50%",
"3/4": "75%",
nav: "350px",
full: "100%",
},
fontFamily: {
sans: ["Open Sans", "sans-serif"],
},
colors: {
white: "#fff",
black: "#151512",
grey: {
test: "#242424",
},
},
},
variants: {},
plugins: [],