mirror of
https://github.com/vacp2p/vac.dev-experimental-old.git
synced 2025-01-27 14:05:33 +00:00
Add section intro
This commit is contained in:
Maria Rushkova
parent
c03233d1f9
commit
ccb0086a35
@ -1,5 +1,5 @@
|
||||
<header>
|
||||
<div class="container max-w-screen-xl border-b">
|
||||
<div class="container max-w-screen-xl sm:border-b">
|
||||
<div
|
||||
class="
|
||||
nav-section
|
||||
@ -16,104 +16,105 @@
|
||||
><img src="{{ '/assets/img/logo.png' | relative_url }}"
|
||||
/></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' | 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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 class="social items-center hidden md:flex">
|
||||
{% include social.html %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<ul class="social items-center hidden md:flex">
|
||||
{% include social.html %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
|
||||
3
assets/img/arrow.svg
Normal file
3
assets/img/arrow.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0L0 8L6 4L0 0Z" fill="#151512"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 144 B |
24
index.html
24
index.html
@ -2,6 +2,28 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<h1 class="text-4xl font-semibold">Vac</h1>
|
||||
<section
|
||||
class="
|
||||
intro
|
||||
container
|
||||
max-w-screen-xl
|
||||
flex flex-col
|
||||
sm:flex-row
|
||||
pt-10
|
||||
pb-8
|
||||
lg:py-10
|
||||
border-b
|
||||
"
|
||||
>
|
||||
<div class="heading-block w-full sm:w-2/12 lg:w-3/12"></div>
|
||||
<div class="info-block w-full sm:w-10/12 lg:w-9/12">
|
||||
<h1 class="mb-10">
|
||||
VAC researches peer-to-peer, private, censorship resistant communication.
|
||||
</h1>
|
||||
<a class="link link--external" href="https://vac.dev/" target="_blank"
|
||||
>See VAC openings</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="work">Work</section>
|
||||
|
||||
@ -2,6 +2,47 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.link--external {
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.link--external::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
background-image: url(/assets/img/arrow.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.link--external::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.link--external:hover::after {
|
||||
background-color: #151512;
|
||||
}
|
||||
|
||||
.nav {
|
||||
max-width: 680px;
|
||||
}
|
||||
@ -10,7 +51,12 @@
|
||||
height: 73%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {},
|
||||
screens: {
|
||||
xs: { max: "450px" },
|
||||
xs: "450px",
|
||||
sm: "570px",
|
||||
"md-max": { max: "768px" },
|
||||
md: "768px",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user