mirror of
https://github.com/vacp2p/libp2p-website.git
synced 2026-01-08 23:08:08 -05:00
Oli Evans
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@@ -0,0 +1,13 @@
|
||||
# EditorConfig - http://EditorConfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
33
.gitignore
vendored
33
.gitignore
vendored
@@ -1,28 +1,7 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
npm-debug.log
|
||||
node_modules
|
||||
public/
|
||||
public
|
||||
static/js/*.js
|
||||
static/css/*.css
|
||||
dev.pid
|
||||
auth.token
|
||||
|
||||
91
Makefile
Normal file
91
Makefile
Normal file
@@ -0,0 +1,91 @@
|
||||
DOMAIN="libp2p.io"
|
||||
IPFSLOCAL="http://localhost:8080/ipfs/"
|
||||
IPFSGATEWAY="https://ipfs.io/ipfs/"
|
||||
NPMBIN=./node_modules/.bin
|
||||
NPM=npm
|
||||
OUTPUTDIR=public
|
||||
PIDFILE=dev.pid
|
||||
|
||||
build: clean install lint js css minify
|
||||
@hugo && \
|
||||
echo "" && \
|
||||
echo "Site built out to ./public dir"
|
||||
|
||||
help:
|
||||
@echo 'Makefile for a libp2p, a hugo built static site. '
|
||||
@echo ' '
|
||||
@echo 'Usage: '
|
||||
@echo ' make Build the optimised site to ./$(OUTPUTDIR) '
|
||||
@echo ' make serve Preview the production ready site at http://localhost:1313 '
|
||||
@echo ' make lint Check your JS and CSS are ok '
|
||||
@echo ' make js Browserify the *.js to ./static/js '
|
||||
@echo ' make css Compile the *.less to ./static/css '
|
||||
@echo ' make minify Optimise all the things! '
|
||||
@echo ' make dev Start a hot-reloding dev server on http://localhost:1313 '
|
||||
@echo ' make dev-stop Stop the dev server '
|
||||
@echo ' make deploy Add the website to your local IPFS node '
|
||||
@echo ' make publish-to-domain Update $(DOMAIN) DNS record to the ipfs hash from the last deploy '
|
||||
@echo ' make clean remove the generated files '
|
||||
@echo ' '
|
||||
|
||||
serve: install lint js css minify
|
||||
hugo server
|
||||
|
||||
node_modules:
|
||||
$(NPM) i
|
||||
|
||||
install: node_modules
|
||||
|
||||
lint: install
|
||||
$(NPMBIN)/standard && $(NPMBIN)/lessc --lint less/*.less
|
||||
|
||||
js: install
|
||||
$(NPMBIN)/browserify --noparse=jquery js/{index,implementations,bundles,media}.js -p [ factor-bundle -o static/js/index.js -o static/js/implementations.js -o static/js/bundles.js -o static/js/media.js ] -o static/js/common.js
|
||||
|
||||
css: install
|
||||
for f in less/*.less; do $(NPMBIN)/lessc $$f --autoprefix='> 1%, last 2 versions' --clean-css static/css/$$(basename $$f .less).css; done
|
||||
|
||||
minify: install minify-js minify-img
|
||||
|
||||
minify-js: install
|
||||
find static/js -name '*.js' -exec $(NPMBIN)/uglifyjs {} --compress --output {} \;
|
||||
|
||||
minify-img: install
|
||||
find static/img -type d -exec $(NPMBIN)/imagemin {}/* --out-dir={} \;
|
||||
|
||||
dev: install js css
|
||||
[ ! -f $(PIDFILE) ] || rm $(PIDFILE) ; \
|
||||
touch $(PIDFILE) ; \
|
||||
($(NPMBIN)/watchify --noparse=jquery js/{index,implementations,bundles,media}.js -p [ factor-bundle -o static/js/index.js -o static/js/implementations.js -o static/js/bundles.js -o static/js/media.js ] -o static/js/common.js & echo $$! >> $(PIDFILE) ; \
|
||||
$(NPMBIN)/nodemon --quiet --watch less --ext less --exec "make css" & echo $$! >> $(PIDFILE) ; \
|
||||
hugo server & echo $$! >> $(PIDFILE))
|
||||
|
||||
dev-stop:
|
||||
touch $(PIDFILE) ; \
|
||||
[ -z "`(cat $(PIDFILE))`" ] || kill `(cat $(PIDFILE))` ; \
|
||||
rm $(PIDFILE)
|
||||
|
||||
deploy:
|
||||
ipfs swarm peers >/dev/null || (echo "ipfs daemon must be online to publish" && exit 1)
|
||||
ipfs add -r -q $(OUTPUTDIR) | tail -n1 >versions/current
|
||||
cat versions/current >>versions/history
|
||||
@export hash=`cat versions/current`; \
|
||||
echo ""; \
|
||||
echo "published website:"; \
|
||||
echo "- $(IPFSLOCAL)$$hash"; \
|
||||
echo "- $(IPFSGATEWAY)$$hash"; \
|
||||
echo ""; \
|
||||
echo "next steps:"; \
|
||||
echo "- ipfs pin add -r /ipfs/$$hash"; \
|
||||
echo "- make publish-to-domain"; \
|
||||
|
||||
publish-to-domain: auth.token versions/current
|
||||
DNSIMPLE_TOKEN=$(shell cat auth.token) \
|
||||
./dnslink.sh $(DOMAIN) $(shell cat versions/current)
|
||||
|
||||
clean:
|
||||
[ ! -d $(OUTPUTDIR) ] || rm -rf $(OUTPUTDIR) && \
|
||||
[ ! -d static/js ] || rm -rf static/js/*.js && \
|
||||
[ ! -d static/css ] || rm -rf static/css/*.css
|
||||
|
||||
.PHONY: build help install lint js css minify minify-js minify-img dev stopdev deploy publish-to-domain clean
|
||||
115
README.md
115
README.md
@@ -1,22 +1,93 @@
|
||||
# [libp2p-website](libp2p.io)
|
||||
|
||||
## Implementations & Bundles
|
||||
|
||||
JSON arrays to update implementation & bundle status can be found in `/static/js/data`
|
||||
|
||||
## Development
|
||||
|
||||
```sh
|
||||
> hugo serve
|
||||
# ...
|
||||
Web Server is available at //localhost:1313/
|
||||
```
|
||||
|
||||
## Publish
|
||||
|
||||
```sh
|
||||
> hugo
|
||||
# ..
|
||||
|
||||
> ipfs add -r public
|
||||
```
|
||||
# [libp2p-website](libp2p.io)
|
||||
|
||||
[](http://ipn.io)
|
||||
[](http://github.com/libp2p/libp2p)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
|
||||
> Official website for libp2p http://libp2p.io
|
||||
|
||||
This repository contains the source code for the libp2p website available at http://libp2p.io
|
||||
|
||||
This project builds out a static site to explain libp2p, ready for deployment on ipfs. It uses `hugo` to glue the html together. It provides an informative, public-facing website. The most important things are the words, concepts and links it presents.
|
||||
|
||||
Much of the site content is data-driven, take a look at the `data` dir where find the data behind the implementations and bundles information as json.
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
git clone https://github.com/libp2p/website
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
To deploy the site libp2p.io, run:
|
||||
|
||||
```sh
|
||||
# Build out the optimised site to ./public, where you can check it locally.
|
||||
make
|
||||
|
||||
# Add the site to your local ipfs, you can check it via /ipfs/<hash>
|
||||
make deploy
|
||||
|
||||
# Save your dnsimple api token as auth.token
|
||||
cat "<api token here>" > auth.token
|
||||
|
||||
# Update the dns record for libp2p to point to the new ipfs hash.
|
||||
make publish-to-domain
|
||||
```
|
||||
|
||||
The following commands are available:
|
||||
|
||||
### `make`
|
||||
|
||||
Build the optimised site to the `./public` dir
|
||||
|
||||
### `make serve`
|
||||
|
||||
Preview the production ready site at http://localhost:1313 _(requires `hugo` on your `PATH`)_
|
||||
|
||||
### `make dev`
|
||||
|
||||
Start a hot-reloading dev server on http://localhost:1313 _(requires `hugo` on your `PATH`)_
|
||||
|
||||
### `make dev-stop`
|
||||
|
||||
Stop that server (and take a break!)
|
||||
|
||||
### `make minfy`
|
||||
|
||||
Optimise all the things!
|
||||
|
||||
### `make deploy`
|
||||
|
||||
Build the site in the `public` dir and add to `ipfs` _(requires `hugo` & `ipfs` on your `PATH`)_
|
||||
|
||||
### `make publish-to-domain` :rocket:
|
||||
|
||||
Update the DNS record for `libp2p.io`. _(requires an `auto.token` file to be saved in the project root.)_
|
||||
|
||||
If you'd like to update the dnslink TXT record for another domain, pass `DOMAIN=<your domain here>` like so:
|
||||
|
||||
```sh
|
||||
make publish-to-domain DOMAIN=tableflip.io
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
See the `Makefile` for the full list or run `make help` in the project root.
|
||||
|
||||
## Dependencies
|
||||
|
||||
* `hugo` to build website
|
||||
* `ipfs` to deploy changes
|
||||
* `jq`, `curl` and an `auth.token` file in the project root containing your dnsimple api token to update the dns.
|
||||
|
||||
All other dependencies are pulled from `npm` and the Makefile will run `npm install` for you because it's nice like that.
|
||||
|
||||
## Contribute
|
||||
|
||||
Please do! Check out [the issues](https://github.com/libp2p/website/issues), or open a PR!
|
||||
|
||||
Check out our [notes on contributing ](https://github.com/libp2p/js-libp2p#contribute) for more information on how we work, and about contributing in general. Please be aware that all interactions related to libp2p are subject to the IPFS [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md).
|
||||
|
||||
Small note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.
|
||||
|
||||
@@ -5,3 +5,4 @@ copyright = "libp2p - All rights reserved."
|
||||
canonifyurls = true
|
||||
relativeURLs = true
|
||||
baseURL = ""
|
||||
googleAnalytics = "UA-96910779-2"
|
||||
|
||||
79
content/bundles.html
Executable file
79
content/bundles.html
Executable file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
<link rel="stylesheet" type="text/css" href="/css/bundles.css">
|
||||
<title>Bundles - libp2p</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{{ partial "topbar.html" . }}
|
||||
|
||||
<main>
|
||||
<article class="center bundles">
|
||||
<header>
|
||||
<h2>Bundles.</h2>
|
||||
</header>
|
||||
<div class="wrap">
|
||||
<p> libp2p provides ready-to-use bundles for different use cases and different languages. You can use these
|
||||
to get all the functionality in one package, instead of including and bundling the different modules
|
||||
yourself. See it as a quickstart.</p>
|
||||
<div class="links">
|
||||
<div class="active-link">
|
||||
<div class="copy-block"></div>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col1"></div>
|
||||
<div class="column col2"></div>
|
||||
<div class="column col3"></div>
|
||||
<div class="column col4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle white"></div>
|
||||
</article>
|
||||
|
||||
<article class="center bundles-info">
|
||||
<div class="wrap">
|
||||
|
||||
{{ range where $.Site.Data.bundles "status" "live" }}
|
||||
{{ partial "bundle.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<section class="coming-soon">
|
||||
{{ range where $.Site.Data.bundles "status" "coming-soon" }}
|
||||
<div class="card">
|
||||
<div class="rectangle coming-soon" title="{{ .name }} bundle coming soon">
|
||||
<div class="img">
|
||||
<img src="{{ .image }}" alt="{{ .name }}">
|
||||
</div>
|
||||
<div class="text">In progress...</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="card empty">
|
||||
<div class="rectangle empty">
|
||||
<img src="../img/img4.png" alt="A 3 cube tetris block in a minimal L shape, pointing upwards."/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card empty">
|
||||
<div class="rectangle empty">
|
||||
<img src="../img/img5.png" alt="A single cube, corner pointing upwards; The isomorphic perspective revealing an hexangonal outline." />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<div class="triangle grey"></div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
<script type="text/javascript" src="/js/common.js"></script>
|
||||
<script type="text/javascript" src="/js/bundles.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,8 +0,0 @@
|
||||
+++
|
||||
draft = false
|
||||
date = "2017-03-14T12:01:31+02:00"
|
||||
title = "bundles"
|
||||
layout = "bundles"
|
||||
type = "bundles"
|
||||
+++
|
||||
|
||||
147
content/implementations.html
Executable file
147
content/implementations.html
Executable file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
<link rel="stylesheet" type="text/css" href="/css/implementations.css">
|
||||
<title>Implementations - libp2p</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
{{ partial "topbar.html" . }}
|
||||
|
||||
<main>
|
||||
<article class="center implementations">
|
||||
<header>
|
||||
<h2>Implementations.</h2></header>
|
||||
<div class="wrap">
|
||||
<p>libp2p is composed of many modules and different parts. Here you can see an overview over all the different libraries we develop, along with the status of the implementation.</p>
|
||||
|
||||
<div class="links">
|
||||
|
||||
<div class="active-link">
|
||||
<div class="copy-block">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/transports.svg" alt="Transports">
|
||||
</div>
|
||||
<span>Transports</span>
|
||||
</div>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column col1">
|
||||
<a href="#transports" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/transports.svg" alt="Transports">
|
||||
</div>
|
||||
<span>Transports</span>
|
||||
</a>
|
||||
<a href="#stream-muxers" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/stream-muxers.svg" alt="Stream Muxers">
|
||||
</div>
|
||||
<span>Stream Muxers</span>
|
||||
</a>
|
||||
<a href="#crypto-channels" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="14" src="/img/svg/crypto-channels.svg" alt="Crypto Channels">
|
||||
</div>
|
||||
<span>Crypto Channels</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="column col2">
|
||||
<a href="#discovery" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="18" src="/img/svg/discovery.svg" alt="Discovery">
|
||||
</div>
|
||||
<span>Discovery</span>
|
||||
</a>
|
||||
<a href="#peer-routing" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="13" src="/img/svg/peer-routing.svg" alt="Peer Routing">
|
||||
</div>
|
||||
<span>Peer Routing</span>
|
||||
</a>
|
||||
<a href="#record-stores" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/record-stores.svg" alt="Record Stores">
|
||||
</div>
|
||||
<span>Record Stores</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="column col3">
|
||||
<a href="#nat-traversal" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="14" src="/img/svg/nat-traversal.svg" alt="NAT Traversal">
|
||||
</div>
|
||||
<span>NAT Traversal</span>
|
||||
</a>
|
||||
<a href="#connection-upgrades" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/connection-upgrades.svg" alt="Connection & Connection Upgrades">
|
||||
</div>
|
||||
<span>Connection & Connection Upgrades</span>
|
||||
</a>
|
||||
<a href="#utils" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/utils.svg" alt="General Purpose Utils and Datatypes">
|
||||
</div>
|
||||
<span>General Purpose Utils & Datatypes</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="column col4">
|
||||
<a href="#others" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="13" src="/img/svg/others.svg" alt="Others">
|
||||
</div>
|
||||
<span>Others</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle white"></div>
|
||||
</article>
|
||||
|
||||
<div class="cube img">
|
||||
<div class="cubes-wrapper">
|
||||
<img class="cube-shape" width="125" src="/img/svg/cube_shape.svg" alt="cube_shape">
|
||||
<img class="cubes transports" width="46" src="/img/svg/transports.svg" alt="">
|
||||
<img class="cubes stream-muxers" width="46" src="/img/svg/stream-muxers.svg" alt="">
|
||||
<img class="cubes crypto-channels" width="46" src="/img/svg/crypto-channels.svg" alt="">
|
||||
<img class="cubes connection-upgrades" width="46" src="/img/svg/connection-upgrades.svg" alt="">
|
||||
<img class="cubes peer-routing" width="46" src="/img/svg/peer-routing.svg" alt="">
|
||||
<img class="cubes record-stores" width="46" src="/img/svg/record-stores.svg" alt="">
|
||||
<img class="cubes nat-traversal" width="46" src="/img/svg/nat-traversal.svg" alt="">
|
||||
<img class="cubes discovery" width="46" src="/img/svg/discovery.svg" alt="">
|
||||
<img class="cubes utils" width="46" src="/img/svg/utils.svg" alt="">
|
||||
<img class="cubes others" width="46" src="/img/svg/others.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="center implementations-info">
|
||||
<div class="wrap">
|
||||
|
||||
{{ range $.Site.Data.implementations}}
|
||||
{{ partial "implementation.html" . }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
<div class="triangle grey"></div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
<script type="text/javascript" src="/js/common.js"></script>
|
||||
<script type="text/javascript" src="/js/implementations.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,8 +0,0 @@
|
||||
+++
|
||||
date = "2017-03-14T13:28:58+02:00"
|
||||
title = "implementations"
|
||||
draft = false
|
||||
type = "implementations"
|
||||
layout = "implementations"
|
||||
+++
|
||||
|
||||
@@ -1,71 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<title>libp2p</title>
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
|
||||
{{ partial "head.html" . }}
|
||||
<link rel="stylesheet" type="text/css" href="/css/index.css">
|
||||
<title>libp2p</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<a class="logo" href="/">
|
||||
<img width="60" height="72" src="/img/logo_small.png" alt="">
|
||||
<b>lib</b>p2p</a>
|
||||
<a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
|
||||
<a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/implementations">Implementations</a></li>
|
||||
<li><a href="/bundles">Bundles</a></li>
|
||||
<li><a href="/media">Media</a></li>
|
||||
<li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
|
||||
<li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
{{ partial "topbar.html" . }}
|
||||
|
||||
<main>
|
||||
<article class="a-modular-network-stack">
|
||||
<div class="homepage-animation">
|
||||
<div id="Stage" class="EDGE-1720491910">
|
||||
<div id="Stage_Symbol_1" class="edgeLoad-EDGE-1720491910">
|
||||
<div id="Stage_Symbol_1_Pasted152"></div>
|
||||
<div id="Stage_Symbol_1_Pasted11"></div>
|
||||
<div id="Stage_Symbol_1_Pasted7"></div>
|
||||
<div id="Stage_Symbol_1_Pasted14"></div>
|
||||
<div id="Stage_Symbol_1_Pasted3"></div>
|
||||
<div id="Stage_Symbol_1_Pasted12"></div>
|
||||
<div id="Stage_Symbol_1_Pasted9"></div>
|
||||
<div id="Stage_Symbol_1_Pasted4"></div>
|
||||
<div id="Stage_Symbol_1_Pasted5"></div>
|
||||
<div id="Stage_Symbol_1_Pasted10"></div>
|
||||
<div id="Stage_Symbol_1_Pasted8"></div>
|
||||
<div id="Stage_Symbol_1_Pasted6"></div>
|
||||
</div>
|
||||
<div id="Stage_Pasted" class="edgeLoad-EDGE-1720491910"></div>
|
||||
</div>
|
||||
<img id="static-stage" src='/img/svg/cube.svg'>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<h2><span>A</span> <span>modular</span> <span>network</span> <span>stack.</span></h2>
|
||||
<p>Run your network applications free from runtime and address services, independently of their location.</p>
|
||||
<div class="buttons">
|
||||
<a href="https://github.com/libp2p/libp2p" class="btn-socials btn-more-videos" target="_blank">TRY LIBP2P</a>
|
||||
<!-- <a href="#" class="btn-socials btn-more-videos">SEE GITHUB</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle white"></div>
|
||||
</article>
|
||||
{{ partial "splash.html" . }}
|
||||
|
||||
<article class="center features">
|
||||
<header>
|
||||
@@ -161,14 +106,40 @@
|
||||
<h2>Implementations In</h2>
|
||||
</header>
|
||||
<div class="wrap">
|
||||
<!-- Bundles get injected here from bundles_data.js -->
|
||||
{{ range where $.Site.Data.bundles "status" "live" }}
|
||||
<div class="card">
|
||||
<a class="rectangle" href="/bundles#{{ .id }}">
|
||||
<div class="img-wrap">
|
||||
<img src="{{ .image }}" alt="{{ .name }}" title="{{ .name }}">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ range where $.Site.Data.bundles "status" "coming-soon" }}
|
||||
<div class="card">
|
||||
<a class="rectangle coming-soon">
|
||||
<img src="{{ .image }}" alt="{{ .name }}" title="{{ .name }}">
|
||||
<div>Coming soon...</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="card empty">
|
||||
<div class="rectangle empty">
|
||||
<img src="../img/img4.png" alt="A 3 cube tetris block in a minimal L shape, pointing upwards."/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card empty">
|
||||
<div class="rectangle empty">
|
||||
<img src="../img/img5.png" alt="A single cube, corner pointing upwards; The isomorphic perspective revealing an hexangonal outline." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle white"></div>
|
||||
</article>
|
||||
|
||||
<article class="center publications-talks">
|
||||
<header>
|
||||
<h2>Publications & Talks.</h2>
|
||||
<h2>Publications & Talks.</h2>
|
||||
</header>
|
||||
<div class="wrap">
|
||||
<iframe width="620" height="350" src="https://www.youtube.com/embed/HxueJbeMVG4" allowfullscreen></iframe>
|
||||
@@ -196,67 +167,15 @@
|
||||
<a href="https://twitter.com/libp2p" target="_blank" class="btn-socials btn-twitter">TWITTER</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="persons">
|
||||
|
||||
<svg id="shapes" width="0" height="0" style="border: none" xmlns="http://www.w3.org/2000/svg">
|
||||
{{ partial "contributors.html" . }}
|
||||
|
||||
<defs></defs>
|
||||
|
||||
<symbol id="shape-icon" viewBox="0 0 300 346">
|
||||
|
||||
<path d="M296.5,84.2L153.5,1c-0.9-0.5-2.1-0.8-3.3-0.8c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0c-0.8,
|
||||
0-1.5,0.1-2.2,0.3c-0.4,0.1-0.9,0.3-1.2,0.5L3.5,84.2C1.5,85.3,0,88,0,90.2v165c0,2.2,1.5,4.9,
|
||||
3.5,6l143.1,83.2c0.3,0.2,0.7,0.3,1.1,0.5c0.7,0.2,1.5,0.4,2.3,0.4c1.2,0,
|
||||
2.5-0.3,3.5-0.8l143.1-83.2c1.9-1.1,3.5-3.8,3.5-6v-165C300,88,298.5,85.3,296.5,84.2z">
|
||||
</path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="svg-wrapper hide">
|
||||
<svg class="contributors" width="100%" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="group-icons"></g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap">
|
||||
<p><div class="title">libp2p was started and is sponsored by</div></p>
|
||||
<p><a href="http://protocol.ai">
|
||||
<img src="/img/protocol-labs-logo.png" height="64px">
|
||||
</a></p>
|
||||
<div class="copyright">© Protocol Labs | Except as noted, content licensed CC-BY 3.0</div>
|
||||
<img class="decoration img8" width="63" height="75" src="/img/img8.png" alt="">
|
||||
</div>
|
||||
</footer>
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="/js/data/bundles_data.js"></script>
|
||||
<script type="text/javascript" src="/js/index.js"></script>
|
||||
<script type="text/javascript" src="/js/common.js"></script>
|
||||
<script type="text/javascript" src="/js/analytics.js"></script>
|
||||
|
||||
<!--Adobe Edge Runtime-->
|
||||
<script type="text/javascript" charset="utf-8" src="/js/edge6.0.0.js"></script>
|
||||
<style>
|
||||
.edgeLoad-EDGE-1720491910 {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
AdobeEdge.loadComposition('js/libp2p', 'EDGE-1720491910', {
|
||||
scaleToFit: "horizontal",
|
||||
centerStage: "horizontal",
|
||||
minW: "0px",
|
||||
maxW: "1440px",
|
||||
width: "1440px",
|
||||
height: "475px",
|
||||
bScaleToParent: true
|
||||
}, {"dom": {}}, {"dom": {}});
|
||||
</script>
|
||||
<!--Adobe Edge Runtime End-->
|
||||
|
||||
<script type="text/javascript" src="/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
42
content/media.html
Executable file
42
content/media.html
Executable file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
<link rel="stylesheet" type="text/css" href="/css/media.css">
|
||||
<title>Media - libp2p</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{{ partial "topbar.html" . }}
|
||||
|
||||
<main>
|
||||
<div class="pseudo-header"></div>
|
||||
<section class="wrap">
|
||||
<h1 class="title-page">Media.</h1>
|
||||
<div class="about-part">Talks, publications and demos.</div>
|
||||
|
||||
<div class="wrap-videos">
|
||||
<div class="item-video">
|
||||
<div class="video-container">
|
||||
<iframe width="300" height="200" src="https://www.youtube.com/embed/HxueJbeMVG4" allowfullscreen></iframe>
|
||||
</div>
|
||||
<p>libp2p ❤ devp2p: IPFS and Ethereum Networking - David Dias and Juan Benet</p>
|
||||
</div>
|
||||
|
||||
<div class="item-video last-element">
|
||||
<div class="video-container">
|
||||
<iframe src="https://archive.org/embed/DWebSummit2016_Panel_Peer_to_Peer_Networks" width="300" height="200" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
|
||||
</div>
|
||||
<p>Peer to Peer Networks at the Decentralised Web Summit</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
<script type="text/javascript" src="/js/common.js"></script>
|
||||
<script type="text/javascript" src="/js/media.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,8 +0,0 @@
|
||||
+++
|
||||
date = "2017-03-14T13:29:06+02:00"
|
||||
title = "media"
|
||||
draft = false
|
||||
type = "media"
|
||||
layout = "media"
|
||||
+++
|
||||
|
||||
303
data/bundles.json
Normal file
303
data/bundles.json
Normal file
@@ -0,0 +1,303 @@
|
||||
[
|
||||
{
|
||||
"id": "browser-js",
|
||||
"name": "Browser JS",
|
||||
"status": "live",
|
||||
"image": "/img/logo_1.png",
|
||||
"github": "https://github.com/ipfs/js-libp2p-ipfs-browser",
|
||||
"categories": [
|
||||
{
|
||||
"id": "transport",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-websockets",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-websockets"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-webrtc-star",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-star"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "stream-muxer",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-multiplex",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-multiplex"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-spdy",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-spdy"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "crypto-channels",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-secio",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-secio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "peer-routing",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-kad-dht",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-kad-dht"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "record-stores",
|
||||
"modules": [
|
||||
{
|
||||
"id": "record",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-record"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "discovery",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-webrtc-star",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-star"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-railing",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-railing"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "node-js",
|
||||
"name": "Node JS",
|
||||
"status": "live",
|
||||
"image": "/img/logo_2.png",
|
||||
"github": "https://github.com/ipfs/js-libp2p-ipfs-nodejs",
|
||||
"categories": [
|
||||
{
|
||||
"id": "transport",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-tcp",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-tcp"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-websockets",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-websockets"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-webrtc-star",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-star"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "stream-muxer",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-multiplex",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-multiplex"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-spdy",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-spdy"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "crypto-channels",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-secio",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-secio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "peer-routing",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-kad-dht",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-kad-dht"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "record-stores",
|
||||
"modules": [
|
||||
{
|
||||
"id": "record",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-record"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "discovery",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-mdns",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-mdns"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-webrtc-star",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-star"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-railing",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-railing"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "golang",
|
||||
"name": "Golang",
|
||||
"status": "live",
|
||||
"image": "/img/logo_3.png",
|
||||
"github": "https://github.com/libp2p/go-libp2p",
|
||||
"categories": [
|
||||
{
|
||||
"id": "transport",
|
||||
"modules": [
|
||||
{
|
||||
"id": "go-tcp-transport",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-tcp-transport"
|
||||
},
|
||||
{
|
||||
"id": "go-ws-transport",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-ws-transport"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "stream-muxer",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-yamux",
|
||||
"status": "Done",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"id": "libp2p-multiplex",
|
||||
"status": "Done",
|
||||
"url": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "crypto-channels",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-secio",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-secio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "peer-routing",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-kad-dht",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-kad-dht"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "record-stores",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-kad-dht",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-kad-dht"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "nat-traversal",
|
||||
"name": "NAT Traversal",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-nat",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-nat"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "discovery",
|
||||
"modules": [
|
||||
{
|
||||
"id": "libp2p-mdns",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p/blob/master/p2p/discovery/mdns.go"
|
||||
},
|
||||
{
|
||||
"id": "libp2p-railing",
|
||||
"status": "Unstable",
|
||||
"url": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Haskell",
|
||||
"status": "coming-soon",
|
||||
"image": "/img/logo_4.png",
|
||||
"github": "",
|
||||
"categories": []
|
||||
},
|
||||
{
|
||||
"name": "Java",
|
||||
"status": "coming-soon",
|
||||
"image": "/img/logo_java.png",
|
||||
"github": "",
|
||||
"categories": []
|
||||
},
|
||||
{
|
||||
"name": "Python",
|
||||
"status": "coming-soon",
|
||||
"image": "/img/logo_6.png",
|
||||
"github": "",
|
||||
"categories": []
|
||||
},
|
||||
{
|
||||
"name": "Rust",
|
||||
"status": "coming-soon",
|
||||
"image": "/img/logo_7.png",
|
||||
"github": "",
|
||||
"categories": []
|
||||
}
|
||||
]
|
||||
585
data/implementations.json
Normal file
585
data/implementations.json
Normal file
@@ -0,0 +1,585 @@
|
||||
[
|
||||
{
|
||||
"id": "transports",
|
||||
"interface": "https://github.com/libp2p/interface-transport",
|
||||
"libs": [
|
||||
{
|
||||
"id": "libp2p-tcp",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-tcp"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-tcp"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-tcp-transport"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-quic",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/marten-seemann/libp2p-quic-transport"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-websockets",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-websockets"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-websockets"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-ws-transport"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-webrtc-star",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-star"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-star"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-webrtc-direct",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-direct"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-webrtc-direct"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-udp",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-udp"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/go-udp-transport"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-utp",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-utp"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/go-utp-transport"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "stream-muxers",
|
||||
"interface": "https://github.com/libp2p/interface-stream-muxer",
|
||||
"libs": [
|
||||
{
|
||||
"id": "libp2p-spdy",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-spdy"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-spdy"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/docker/spdystream"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-multiplex",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-multiplex"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-multiplex"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/whyrusleeping/go-smux-multiplex"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-yamux",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/hashicorp/yamux"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "crypto-channels",
|
||||
"libs": [
|
||||
{
|
||||
"id": "libp2p-secio",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-secio"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-secio"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-secio"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "connection-upgrades",
|
||||
"title": "Connection & Connection Upgrades",
|
||||
"libs": [
|
||||
{
|
||||
"id": "libp2p-conn",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/interface-connection"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/interface-connection"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-conn"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "half-closed-connection-upgrade",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-half-closed-connection-upgrade"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-half-closed-connection-upgrade"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "peer-routing",
|
||||
"interface": "https://github.com/libp2p/interface-peer-routing",
|
||||
"libs": [
|
||||
{
|
||||
"id": "libp2p-kad-dht",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-dht"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-dht"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-kad-dht"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "record-stores",
|
||||
"interface": "https://github.com/libp2p/interface-record-store",
|
||||
"libs": [
|
||||
{
|
||||
"id": "record",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-record"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-record"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-record"
|
||||
},
|
||||
{
|
||||
"name": "C#",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/go-libp2p-record"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "nat-traversal",
|
||||
"title": "NAT Traversal",
|
||||
"libs": [
|
||||
{
|
||||
"id": "libp2p-nat",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/go-libp2p-nat"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "discovery",
|
||||
"interface": "https://github.com/libp2p/interface-peer-discovery",
|
||||
"libs": [
|
||||
{
|
||||
"id": "bootstrap",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-railing"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-railing"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/ipfs/go-ipfs/blob/master/core/bootstrap.go"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "random-walk",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-random-walk"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Unstable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-random-walk"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-kad-dht"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "mdns-discovery",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-mdns"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p/blob/master/p2p/discovery/mdns.go"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "utils",
|
||||
"title": "General Purpose Utils & Datatypes",
|
||||
"libs": [
|
||||
{
|
||||
"id": "crypto",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-crypto"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-crypto"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-crypto"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-ping",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-ping"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-ping"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p/p2p/protocol/ping"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-peer-id",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-peer-id"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-peer-id"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Missing",
|
||||
"url": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-peer-info",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-peer-info"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-peer-info"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-peer"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-peer-book",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-peer-book"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-peer-book"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p-peerstore"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "libp2p-swarm",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-swarm"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/js-libp2p-swarm"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-libp2p/tree/master/p2p/host/basic"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "others",
|
||||
"libs": [
|
||||
{
|
||||
"id": "libp2p-floodsub",
|
||||
"langs": [
|
||||
{
|
||||
"name": "Browser JS",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-floodsub"
|
||||
},
|
||||
{
|
||||
"name": "Node.js",
|
||||
"status": "Usable",
|
||||
"url": "https://github.com/libp2p/js-libp2p-floodsub"
|
||||
},
|
||||
{
|
||||
"name": "Go",
|
||||
"status": "Done",
|
||||
"url": "https://github.com/libp2p/go-floodsub"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
53
dnslink.sh
Executable file
53
dnslink.sh
Executable file
@@ -0,0 +1,53 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
#
|
||||
# Usage:
|
||||
# DNSIMPLE_TOKEN=<token> ./dnslink.sh <domain> <hash>
|
||||
#
|
||||
# Example:
|
||||
# DNSIMPLE_TOKEN=trustno1 ./dnslink.sh website.protocol.ai Qmfoobar
|
||||
#
|
||||
# Dependencies:
|
||||
# - bash
|
||||
# - curl
|
||||
# - jq
|
||||
#
|
||||
# From:
|
||||
# https://raw.githubusercontent.com/ipfs/infrastructure/master/scripts/dnslink.sh
|
||||
#
|
||||
|
||||
set -e
|
||||
|
||||
ZONE="$1"
|
||||
HASH="$2"
|
||||
|
||||
([ ! -z "$DNSIMPLE_TOKEN" ] && [ ! -z "$ZONE" ] && [ ! -z "$HASH" ]) \
|
||||
|| (echo "Usage: DNSIMPLE_TOKEN=<token> ./dnslink.sh <domain> <hash>" && exit 1)
|
||||
|
||||
RECORD_NAME="_dnslink"
|
||||
RECORD_TTL=120
|
||||
|
||||
record_id=$(
|
||||
curl -s "https://api.dnsimple.com/v1/domains/$ZONE/records?name=$RECORD_NAME&type=TXT" \
|
||||
-H "X-DNSimple-Domain-Token: $DNSIMPLE_TOKEN" \
|
||||
-H "Accept: application/json" \
|
||||
| jq -r '.[].record.id'
|
||||
)
|
||||
|
||||
if [ -z "$record_id" ]; then
|
||||
curl -v -s -X POST "https://api.dnsimple.com/v1/domains/$ZONE/records" \
|
||||
-H "X-DNSimple-Domain-Token: $DNSIMPLE_TOKEN" \
|
||||
-H "Accept: application/json" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"record\":{ \"name\":\"$RECORD_NAME\", \"record_type\":\"TXT\", \"content\":\"dnslink=/ipfs/$HASH\", \"ttl\":\"$RECORD_TTL\" }}" \
|
||||
| jq -r '.record' \
|
||||
&& printf "\\nIt looks like we're good: https://ipfs.io/ipns/$ZONE\\n"
|
||||
else
|
||||
curl -v -s -X PUT "https://api.dnsimple.com/v1/domains/$ZONE/records/$record_id" \
|
||||
-H "X-DNSimple-Domain-Token: $DNSIMPLE_TOKEN" \
|
||||
-H "Accept: application/json" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"record\":{ \"content\":\"dnslink=/ipfs/$HASH\", \"name\":\"$RECORD_NAME\", \"ttl\":\"$RECORD_TTL\" }}" \
|
||||
| jq -r '.record' \
|
||||
&& printf "\\nIt looks like we're good: https://ipfs.io/ipns/$ZONE\\n"
|
||||
fi
|
||||
123
js/bundles.js
Executable file
123
js/bundles.js
Executable file
@@ -0,0 +1,123 @@
|
||||
var $ = require('jquery')
|
||||
var initPage = require('./lib/init-page')
|
||||
|
||||
initPage()
|
||||
|
||||
$(function () {
|
||||
$('nav a', 'article').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var mobile = $(window).innerWidth() <= 767
|
||||
var $nav = $(this)
|
||||
var $parentNav = $nav.closest('nav')
|
||||
var $parent = $nav.closest('section')
|
||||
var showUl = $nav.data('info')
|
||||
|
||||
$parentNav.children('a').each(function () {
|
||||
$(this).removeClass('active')
|
||||
})
|
||||
$nav.addClass('active')
|
||||
|
||||
$('ul', $parent).each(function () {
|
||||
$(this).removeClass('show')
|
||||
})
|
||||
$('ul' + '.' + showUl, $parent).addClass('show')
|
||||
alignment()
|
||||
|
||||
if (mobile) {
|
||||
$parentNav.css('display', 'none')
|
||||
}
|
||||
$parent.find('.active-link span').text($nav.text())
|
||||
})
|
||||
|
||||
function alignment () {
|
||||
$('ul.calc-col.show').each(function () {
|
||||
var $ul = $(this)
|
||||
var ulWidth = $ul.outerWidth()
|
||||
var liCount = $ul[0].childElementCount
|
||||
var colCount = 0
|
||||
|
||||
if (liCount > 0 && liCount <= 5) {
|
||||
colCount = 1
|
||||
$ul.addClass('one-col')
|
||||
} else if (liCount <= 10) {
|
||||
colCount = 2
|
||||
$ul.addClass('two-col')
|
||||
} else {
|
||||
colCount = 3
|
||||
$ul.addClass('three-col')
|
||||
}
|
||||
|
||||
var maxWidth = 0
|
||||
$ul.children('li').each(function () {
|
||||
var $li = $(this)
|
||||
$li.css({'min-width': '0', 'width': 'auto'})
|
||||
|
||||
if ($li.width() > maxWidth) maxWidth = $li.width()
|
||||
})
|
||||
$ul.children('li').css({'min-width': '100px', 'max-width': maxWidth + 15 + 'px', 'width': '100%'})
|
||||
|
||||
if (colCount === 2) {
|
||||
var pad = (ulWidth - (((maxWidth + 15) * 2) + 60)) / 2
|
||||
$ul.css({'padding-left': pad + 'px', 'padding-right': pad + 'px'})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$(window).on('load resize', function () {
|
||||
alignment()
|
||||
})
|
||||
|
||||
$('a.scroll').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var scrollToId = $(this).attr('href')
|
||||
var $scrollTo = $(scrollToId)
|
||||
$('html, body').animate({scrollTop: $scrollTo.offset().top - 100}, 500, 'swing')
|
||||
|
||||
var mobile = $(window).innerWidth() <= 767
|
||||
if (mobile) {
|
||||
var $columns = $(this).closest('.columns')
|
||||
var $links = $columns.closest('.links')
|
||||
$columns.css('display', 'none')
|
||||
$links.find('.active-link .copy-block').html($(this).html())
|
||||
}
|
||||
})
|
||||
|
||||
$('.active-link', 'aside.left').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var $link = $(this)
|
||||
var $parent = $link.closest('aside.left')
|
||||
var $nav = $parent.find('nav')
|
||||
|
||||
if ($nav.css('display') === 'flex') {
|
||||
$nav.css('display', 'none')
|
||||
} else {
|
||||
$nav.css('display', 'flex')
|
||||
}
|
||||
})
|
||||
|
||||
$('.active-link', '.links').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var $link = $(this)
|
||||
var $parent = $link.closest('.links')
|
||||
var $columns = $parent.find('.columns')
|
||||
|
||||
if ($columns.css('display') === 'flex') {
|
||||
$columns.css('display', 'none')
|
||||
} else {
|
||||
$columns.css('display', 'flex')
|
||||
}
|
||||
})
|
||||
|
||||
$(window).on('click', function (e) {
|
||||
var $elem = e.target
|
||||
var mobile = $(window).innerWidth() <= 767
|
||||
if (mobile) {
|
||||
if (!$($elem.closest('aside.left')).length) {
|
||||
$('aside.left nav:visible').css('display', 'none')
|
||||
}
|
||||
if (!$($elem.closest('.links')).length) {
|
||||
$('.columns', '.links').css('display', 'none')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
178
js/implementations.js
Executable file
178
js/implementations.js
Executable file
@@ -0,0 +1,178 @@
|
||||
var $ = require('jquery')
|
||||
var initPage = require('./lib/init-page')
|
||||
|
||||
initPage()
|
||||
|
||||
$(function () {
|
||||
$('section table').each(showData)
|
||||
|
||||
function showData (i, table) {
|
||||
var $table = $(table)
|
||||
// $table.width(categories.length * 95)
|
||||
var $parent = $table.closest('.table')
|
||||
var tableHeight = $parent.find('.title').height() +
|
||||
$parent.find('.info').height() +
|
||||
($(window).innerWidth() < 940 ? 0 : $parent.find('.description').height())
|
||||
$parent.height(tableHeight)
|
||||
}
|
||||
|
||||
$('td').hover(function () {
|
||||
$(this).find('i').removeClass('icon-hexagon').addClass('icon-cat')
|
||||
}, function () {
|
||||
$(this).find('i').addClass('icon-hexagon').removeClass('icon-cat')
|
||||
})
|
||||
|
||||
$('a.scroll').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var scrollToId = $(this).attr('href')
|
||||
var $scrollTo = $(scrollToId)
|
||||
$('html, body').animate({scrollTop: $scrollTo.offset().top - 100 - 270}, 1000, 'swing')
|
||||
|
||||
var mobile = $(window).innerWidth() <= 940
|
||||
if (mobile) {
|
||||
var $columns = $(this).closest('.columns')
|
||||
var $links = $columns.closest('.links')
|
||||
$columns.css('display', 'none')
|
||||
$links.find('.active-link .copy-block').html($(this).html())
|
||||
}
|
||||
})
|
||||
|
||||
$('.active-link', '.links').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
var $link = $(this)
|
||||
var $parent = $link.closest('.links')
|
||||
var $columns = $parent.find('.columns')
|
||||
|
||||
if ($columns.css('display') === 'flex') {
|
||||
$columns.css('display', 'none')
|
||||
} else {
|
||||
$columns.css('display', 'flex')
|
||||
}
|
||||
})
|
||||
|
||||
$(window).on('load resize scroll', function () {
|
||||
fadeInCube()
|
||||
})
|
||||
|
||||
function fadeInCube () {
|
||||
var $cube = $('main > .cube')
|
||||
var $articleImpl = $('article.implementations')
|
||||
var $header = $('body > header')
|
||||
var scrollTop = $(window).scrollTop()
|
||||
|
||||
var $transports = $('#transports')
|
||||
var $other = $('#others')
|
||||
var $streamMuxers = $('#stream-muxers')
|
||||
var $cryptoChannels = $('#crypto-channels')
|
||||
var $connectionUpgrades = $('#connection-upgrades')
|
||||
var $peerRouting = $('#peer-routing')
|
||||
var $recordStores = $('#record-stores')
|
||||
var $natTraversal = $('#nat-traversal')
|
||||
var $discovery = $('#discovery')
|
||||
var $utils = $('#utils')
|
||||
|
||||
var sectionMarginTop = parseInt($transports.css('margin-top'))
|
||||
var headerHeight = $header.outerHeight()
|
||||
|
||||
if (scrollTop >= $articleImpl.outerHeight() - 26 && scrollTop <= $other.offset().top - headerHeight) {
|
||||
$cube.addClass('fixed')
|
||||
} else {
|
||||
$cube.removeClass('fixed')
|
||||
}
|
||||
|
||||
// var minHeight = 0
|
||||
var maxHeight = 0
|
||||
var opacity = 0.0
|
||||
|
||||
if (scrollTop >= 235 &&
|
||||
scrollTop <= $transports.offset().top - headerHeight - sectionMarginTop + 140) {
|
||||
maxHeight = $transports.offset().top - headerHeight - sectionMarginTop + 140
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.transports').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.transports').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $streamMuxers.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $streamMuxers.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $streamMuxers.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.stream-muxers').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.stream-muxers').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $cryptoChannels.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $cryptoChannels.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $cryptoChannels.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.crypto-channels').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.crypto-channels').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $connectionUpgrades.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $connectionUpgrades.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $connectionUpgrades.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.connection-upgrades').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.connection-upgrades').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $peerRouting.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $peerRouting.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $peerRouting.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.peer-routing').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.peer-routing').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $recordStores.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $recordStores.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $recordStores.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.record-stores').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.record-stores').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $natTraversal.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $natTraversal.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $natTraversal.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.nat-traversal').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.nat-traversal').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $discovery.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $discovery.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $discovery.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.discovery').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.discovery').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $utils.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $utils.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $utils.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.utils').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.utils').css('opacity', 0)
|
||||
}
|
||||
if (scrollTop >= $other.offset().top - headerHeight - sectionMarginTop - 60 &&
|
||||
scrollTop <= $other.offset().top - headerHeight - sectionMarginTop - 60 + 200) {
|
||||
maxHeight = $other.offset().top - headerHeight - sectionMarginTop - 60 + 200
|
||||
opacity = maxHeight !== scrollTop ? 1.0 / (70.0 / (maxHeight - scrollTop)) : 0
|
||||
$cube.find('.others').css('opacity', opacity)
|
||||
} else {
|
||||
$cube.find('.others').css('opacity', 0)
|
||||
}
|
||||
}
|
||||
|
||||
$(window).on('click', function (e) {
|
||||
var $elem = e.target
|
||||
var mobile = $(window).innerWidth() <= 767
|
||||
if (mobile) {
|
||||
if (!$($elem.closest('.links')).length) {
|
||||
$('.columns', '.links').css('display', 'none')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
5
js/index.js
Executable file
5
js/index.js
Executable file
@@ -0,0 +1,5 @@
|
||||
var initPage = require('./lib/init-page')
|
||||
var initLogo = require('./lib/logo')
|
||||
|
||||
initPage()
|
||||
initLogo()
|
||||
26
js/lib/fade-in-article.js
Normal file
26
js/lib/fade-in-article.js
Normal file
@@ -0,0 +1,26 @@
|
||||
var $ = require('jquery')
|
||||
|
||||
module.exports = function fadeInArcticle () {
|
||||
initFadeInArcticle()
|
||||
$(window).on('load resize scroll', function () {
|
||||
initFadeInArcticle()
|
||||
})
|
||||
}
|
||||
|
||||
function initFadeInArcticle () {
|
||||
if ($('article.features').length > 0 && $(window).scrollTop() >= $('article.features').offset().top - $(window).innerHeight() + 300) {
|
||||
$('article.features').addClass('show')
|
||||
}
|
||||
if ($('article.example').length > 0 && $(window).scrollTop() >= $('article.example').offset().top - $(window).innerHeight() + 300) {
|
||||
$('article.example').addClass('show')
|
||||
}
|
||||
if ($('article.implementations-in').length > 0 && $(window).scrollTop() >= $('article.implementations-in').offset().top - $(window).innerHeight() + 300) {
|
||||
$('article.implementations-in').addClass('show')
|
||||
}
|
||||
if ($('article.publications-talks').length > 0 && $(window).scrollTop() >= $('article.publications-talks').offset().top - $(window).innerHeight() + 300) {
|
||||
$('article.publications-talks').addClass('show')
|
||||
}
|
||||
if ($('article.community').length > 0 && $(window).scrollTop() >= $('article.community').offset().top - $(window).innerHeight() + 300) {
|
||||
$('article.community').addClass('show')
|
||||
}
|
||||
}
|
||||
11
js/lib/init-page.js
Executable file
11
js/lib/init-page.js
Executable file
@@ -0,0 +1,11 @@
|
||||
var fadeInArcticle = require('./fade-in-article')
|
||||
var scrollToHash = require('./scroll-to-hash')
|
||||
var initMobileNav = require('./mobile-nav')
|
||||
var initTriangles = require('./triangle')
|
||||
|
||||
module.exports = function initPage () {
|
||||
fadeInArcticle()
|
||||
scrollToHash()
|
||||
initMobileNav()
|
||||
initTriangles()
|
||||
}
|
||||
15
js/lib/logo.js
Normal file
15
js/lib/logo.js
Normal file
@@ -0,0 +1,15 @@
|
||||
var $ = require('jquery')
|
||||
|
||||
module.exports = function initLogoAnimation () {
|
||||
$(window).scroll(function (e) {
|
||||
var $logo = $('header .logo')
|
||||
|
||||
if ($(window).outerWidth() > 767 && !$logo.hasClass('static')) {
|
||||
if ($(window).scrollTop() > 300) {
|
||||
$logo.addClass('show')
|
||||
} else {
|
||||
$logo.removeClass('show')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
29
js/lib/mobile-nav.js
Normal file
29
js/lib/mobile-nav.js
Normal file
@@ -0,0 +1,29 @@
|
||||
var $ = require('jquery')
|
||||
|
||||
module.exports = function initMobileNav () {
|
||||
$('.bars', 'header').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
$('.bars', 'header').hide()
|
||||
$('.close', 'header').show()
|
||||
$('nav', 'header').show()
|
||||
})
|
||||
|
||||
$('.close', 'header').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
$('.bars', 'header').show()
|
||||
$('.close', 'header').hide()
|
||||
$('nav', 'header').hide()
|
||||
})
|
||||
|
||||
$(window).on('load resize', function () {
|
||||
if ($(window).outerWidth() > 767) {
|
||||
$('.bars', 'header').hide()
|
||||
$('.close', 'header').hide()
|
||||
$('nav', 'header').show()
|
||||
} else {
|
||||
$('.bars', 'header').show()
|
||||
$('.close', 'header').hide()
|
||||
$('nav', 'header').hide()
|
||||
}
|
||||
})
|
||||
}
|
||||
9
js/lib/scroll-to-hash.js
Normal file
9
js/lib/scroll-to-hash.js
Normal file
@@ -0,0 +1,9 @@
|
||||
var $ = require('jquery')
|
||||
|
||||
module.exports = function scrollToHash () {
|
||||
var hash = window.location.hash
|
||||
if (hash.length) {
|
||||
var $scrollTo = $(hash)
|
||||
$('html, body').animate({scrollTop: $scrollTo.offset().top - 100}, 500, 'swing')
|
||||
}
|
||||
}
|
||||
10
js/lib/triangle.js
Normal file
10
js/lib/triangle.js
Normal file
@@ -0,0 +1,10 @@
|
||||
var $ = require('jquery')
|
||||
|
||||
module.exports = function initTriangles () {
|
||||
$(window).on('load resize', function () {
|
||||
var width = $(window).innerWidth()
|
||||
var leftWidth = Math.round(width / 2)
|
||||
var rightWidth = leftWidth > (width / 2) ? leftWidth - 1 : leftWidth
|
||||
$('.triangle').css({'border-left-width': leftWidth + 'px', 'border-right-width': rightWidth + 'px'})
|
||||
})
|
||||
}
|
||||
3
js/media.js
Normal file
3
js/media.js
Normal file
@@ -0,0 +1,3 @@
|
||||
var initPage = require('./lib/init-page')
|
||||
|
||||
initPage()
|
||||
@@ -1,90 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<title>libp2p</title>
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/bundles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<a class="logo static" href="/">
|
||||
<img width="60" height="72" src="/img/logo_small.png" alt="">
|
||||
<b>lib</b>p2p</a>
|
||||
<a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
|
||||
<a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/implementations">Implementations</a></li>
|
||||
<li><a href="/bundles" class="active">Bundles</a></li>
|
||||
<li><a href="/media">Media</a></li>
|
||||
<li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
|
||||
<li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article class="center bundles">
|
||||
<header>
|
||||
<h2>Bundles.</h2>
|
||||
</header>
|
||||
<div class="wrap">
|
||||
<p> libp2p provides ready-to-use bundles for different use cases and different languages. You can use these
|
||||
to get all the functionality in one package, instead of including and bundling the different modules
|
||||
yourself. See it as a quickstart.</p>
|
||||
<div class="links">
|
||||
<div class="active-link">
|
||||
<div class="copy-block"></div>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col1"></div>
|
||||
<div class="column col2"></div>
|
||||
<div class="column col3"></div>
|
||||
<div class="column col4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle white"></div>
|
||||
</article>
|
||||
|
||||
<article class="center bundles-info">
|
||||
<div class="wrap">
|
||||
|
||||
<!--<section class="coming-soon"></section>-->
|
||||
|
||||
</div>
|
||||
<div class="triangle grey"></div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap">
|
||||
<p>
|
||||
<div class="title">libp2p was started and is sponsored by</div>
|
||||
</p>
|
||||
<p><a href="http://protocol.ai">
|
||||
<img src="../img/protocol-labs-logo.png" height="64px">
|
||||
</a></p>
|
||||
<div class="copyright">© Protocol Labs | Except as noted, content licensed CC-BY 3.0</div>
|
||||
<img class="decoration img8" width="63" height="75" src="/img/img8.png" alt="">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="/js/data/bundles_data.js"></script>
|
||||
<script type="text/javascript" src="/js/bundles.js"></script>
|
||||
<script type="text/javascript" src="/js/common.js"></script>
|
||||
<script type="text/javascript" src="/js/analytics.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,434 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<title>libp2p</title>
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/implementations.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<a class="logo static" href="/">
|
||||
<img width="60" height="72" src="/img/logo_small.png" alt="">
|
||||
<b>lib</b>p2p</a>
|
||||
<a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
|
||||
<a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/implementations" class="active">Implementations</a></li>
|
||||
<li><a href="/bundles">Bundles</a></li>
|
||||
<li><a href="/media">Media</a></li>
|
||||
<li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
|
||||
<li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article class="center implementations">
|
||||
<header><h2>Implementations.</h2></header>
|
||||
<div class="wrap">
|
||||
<p>libp2p is composed of many modules and different parts. Here you can see an overview over all the different libraries we develop, along with the status of the implementation.</p>
|
||||
<div class="links">
|
||||
<div class="active-link">
|
||||
<div class="copy-block">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/Pasted8.svg" alt="Transports">
|
||||
</div>
|
||||
<span>Transports</span>
|
||||
</div>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col1">
|
||||
<a href="#transports" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/Pasted8.svg" alt="Transports">
|
||||
</div>
|
||||
<span>Transports</span>
|
||||
</a>
|
||||
<a href="#stream-muxers" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/Pasted10.svg" alt="Stream Muxers">
|
||||
</div>
|
||||
<span>Stream Muxers</span>
|
||||
</a>
|
||||
<a href="#crypto-channels" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="14" src="/img/svg/Pasted5.svg" alt="Crypto Channels">
|
||||
</div>
|
||||
<span>Crypto Channels</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col2">
|
||||
<a href="#discovery" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="18" src="/img/svg/Pasted6.svg" alt="Discovery">
|
||||
</div>
|
||||
<span>Discovery</span>
|
||||
</a>
|
||||
<a href="#peer-routing" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="13" src="/img/svg/Peer-Routing.svg" alt="Peer Routing">
|
||||
</div>
|
||||
<span>Peer Routing</span>
|
||||
</a>
|
||||
<a href="#record-stores" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/Pasted11.svg" alt="Record Stores">
|
||||
</div>
|
||||
<span>Record Stores</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col3">
|
||||
<a href="#nat-traversal" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="14" src="/img/svg/Pasted12.svg" alt="NAT Traversal">
|
||||
</div>
|
||||
<span>NAT Traversal</span>
|
||||
</a>
|
||||
<a href="#connection-upgrades" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/Pasted3.svg" alt="Connection & Connection Upgrades">
|
||||
</div>
|
||||
<span>Connection & Connection Upgrades</span>
|
||||
</a>
|
||||
<a href="#utils" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="10" src="/img/svg/Pasted7.svg" alt="General Purpose Utils and Datatypes">
|
||||
</div>
|
||||
<span>General Purpose Utils & Datatypes</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col4">
|
||||
<a href="#others" class="link scroll">
|
||||
<div class="img">
|
||||
<img width="13" src="/img/svg/Pasted9.svg" alt="Others">
|
||||
</div>
|
||||
<span>Others</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle white"></div>
|
||||
</article>
|
||||
|
||||
<div class="cube img">
|
||||
<div class="cubes-wrapper">
|
||||
<img class="cube-shape" width="125" src="/img/svg/cube_shape.svg" alt="cube_shape">
|
||||
<img class="cubes transports" width="46" src="/img/svg/Pasted8.svg" alt="">
|
||||
<img class="cubes stream-muxers" width="46" src="/img/svg/Pasted10.svg" alt="">
|
||||
<img class="cubes crypto-channels" width="46" src="/img/svg/Pasted5.svg" alt="">
|
||||
<img class="cubes connection-upgrades" width="46" src="/img/svg/Pasted3.svg" alt="">
|
||||
<img class="cubes peer-routing" width="46" src="/img/svg/Peer-Routing.svg" alt="">
|
||||
<img class="cubes record-stores" width="46" src="/img/svg/Pasted11.svg" alt="">
|
||||
<img class="cubes nat-traversal" width="46" src="/img/svg/Pasted12.svg" alt="">
|
||||
<img class="cubes discovery" width="46" src="/img/svg/Pasted6.svg" alt="">
|
||||
<img class="cubes utils" width="46" src="/img/svg/Pasted7.svg" alt="">
|
||||
<img class="cubes others" width="46" src="/img/svg/Pasted9.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="center implementations-info">
|
||||
<div class="wrap">
|
||||
<section id="transports">
|
||||
<div class="table">
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Transports</div>
|
||||
<a class="btn-interface" href="https://github.com/libp2p/interface-transport">Interface</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="stream-muxers">
|
||||
|
||||
<div class="table">
|
||||
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Stream Muxers</div>
|
||||
<a class="btn-interface" href="https://github.com/libp2p/interface-stream-muxer">Interface</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="crypto-channels">
|
||||
|
||||
<div class="table">
|
||||
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Crypto Channels</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="discovery">
|
||||
<div class="table">
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Discovery</div>
|
||||
<a class="btn-interface" href="https://github.com/libp2p/interface-peer-discovery">Interface</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="peer-routing">
|
||||
|
||||
<div class="table">
|
||||
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Peer Routing</div>
|
||||
<a class="btn-interface" href="https://github.com/libp2p/interface-peer-routing">Interface</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="record-stores">
|
||||
|
||||
<div class="table">
|
||||
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Record Stores</div>
|
||||
<a class="btn-interface" href="https://github.com/libp2p/interface-record-store">Interface</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="nat-traversal">
|
||||
|
||||
<div class="table">
|
||||
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">NAT Traversal</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="connection-upgrades">
|
||||
|
||||
<div class="table">
|
||||
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Connection & Connection Upgrades</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="utils">
|
||||
<div class="table">
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">General Purpose Utils & Datatypes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="others">
|
||||
<div class="table">
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">Others</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<div class="triangle grey"></div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap">
|
||||
<p><div class="title">libp2p was started and is sponsored by</div></p>
|
||||
<p><a href="http://protocol.ai">
|
||||
<img src="../img/protocol-labs-logo.png" height="64px">
|
||||
</a></p>
|
||||
<div class="copyright">© Protocol Labs | Except as noted, content licensed CC-BY 3.0</div>
|
||||
<img class="decoration img8" width="63" height="75" src="/img/img8.png" alt="">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="/js/common.js"></script>
|
||||
<script type="text/javascript" src="/js/data/implementations_data.js"></script>
|
||||
<script type="text/javascript" src="/js/implementations.js"></script>
|
||||
<script type="text/javascript" src="/js/analytics.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,76 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<title>libp2p</title>
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/media.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<a class="logo static" href="/">
|
||||
<img width="60" height="72" src="/img/logo_small.png" alt="">
|
||||
<b>lib</b>p2p</a>
|
||||
<a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
|
||||
<a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/implementations">Implementations</a></li>
|
||||
<li><a href="/bundles">Bundles</a></li>
|
||||
<li><a href="/media" class="active">Media</a></li>
|
||||
<li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
|
||||
<li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="pseudo-header"></div>
|
||||
<section class="wrap">
|
||||
<h1 class="title-page">Media.</h1>
|
||||
<div class="about-part">Talks, publications and demos.</div>
|
||||
|
||||
<div class="wrap-videos">
|
||||
<div class="item-video">
|
||||
<div class="video-container">
|
||||
<iframe width="300" height="200" src="https://www.youtube.com/embed/HxueJbeMVG4" allowfullscreen></iframe>
|
||||
</div>
|
||||
<p>libp2p ❤ devp2p: IPFS and Ethereum Networking - David Dias and Juan Benet</p>
|
||||
</div>
|
||||
|
||||
<div class="item-video last-element">
|
||||
<div class="video-container">
|
||||
<iframe src="https://archive.org/embed/DWebSummit2016_Panel_Peer_to_Peer_Networks" width="300" height="200" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
|
||||
</div>
|
||||
<p>Peer to Peer Networks at the Decentralised Web Summit</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap">
|
||||
<p><div class="title">libp2p was started and is sponsored by</div></p>
|
||||
<p><a href="http://protocol.ai">
|
||||
<img src="/img/protocol-labs-logo.png" height="64px">
|
||||
</a></p>
|
||||
<div class="copyright">© Protocol Labs | Except as noted, content licensed CC-BY 3.0</div>
|
||||
<img class="decoration img8" width="63" height="75" src="/img/img8.png" alt="">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="/js/common.js"></script>
|
||||
<script type="text/javascript" src="/js/analytics.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
layouts/partials/bundle.html
Normal file
42
layouts/partials/bundle.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<section id="{{ .id }}">
|
||||
<aside class="left">
|
||||
<div class="active-link">
|
||||
<span>Transport</span><i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<nav>
|
||||
{{ range $index, $element := .categories }}
|
||||
<a href="#" {{ if eq $index 0 }}class="active"{{end}} data-info="{{ .id }}" style="text-transform: capitalize;">
|
||||
{{if isset . "name"}}
|
||||
{{ .name }}
|
||||
{{else}}
|
||||
{{ humanize .id }}
|
||||
{{end}}
|
||||
</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="img">
|
||||
<img src="{{ .image }}" alt="{{ .name }}" title="{{ .name }}">
|
||||
</div>
|
||||
<a class="btn-interface" target="_blank" href="{{ .github }}">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
{{ range $index, $element := .categories }}
|
||||
<ul class="{{ .id }} calc-col one-col {{if eq $index 0}}show{{end}}">
|
||||
{{ range .modules }}
|
||||
<li style="min-width: 100px; width: 100%; max-width: 168px;">
|
||||
<a href="{{ .url }}">
|
||||
{{ partial "status-icon" . }}
|
||||
<span>{{ .id }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
150
layouts/partials/contributors.html
Normal file
150
layouts/partials/contributors.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<style>
|
||||
@keyframes slide {
|
||||
0% { transform: translate(0,0); }
|
||||
100% { transform: translate(-100%,0);}
|
||||
}
|
||||
#contributors-slide {
|
||||
transform: translate3d(0,0,0); /* hint to prefer gpu rending. */
|
||||
animation: slide 60s ease-in-out both 0s infinite alternate;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
#contributors-slide.running {
|
||||
animation-play-state: running;
|
||||
}
|
||||
#contributors-slide.running:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
#contributors .hex {
|
||||
display: inline-block;
|
||||
width: 62px;
|
||||
height: 72px;
|
||||
opacity: 0;
|
||||
transition: opacity 1000ms ease-in, transform 100ms ease-out;
|
||||
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
#contributors .hex.show {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
#contributors .hex.show:hover {
|
||||
transform: scale(1.2);
|
||||
z-index: 10;
|
||||
}
|
||||
#contributors .contributors-row {
|
||||
height: 72px;
|
||||
overflow:visible;
|
||||
}
|
||||
#contributors .contributors-row:hover {
|
||||
z-index: 20;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="contributors" style="margin-top:90px; padding:10px 0; height: 320px; position: relative; overflow: hidden;">
|
||||
<div id="contributors-slide">
|
||||
<div class="contributors-row"></div>
|
||||
<div class="contributors-row" style="position:absolute;"></div>
|
||||
<div class="contributors-row" style="position:absolute;"></div>
|
||||
<div class="contributors-row" style="position:absolute;"></div>
|
||||
<div class="contributors-row" style="position:absolute;"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{/*
|
||||
Pull in the contributors array into a hugo var at build time.
|
||||
It's rendered inline as a JS array. We build out the content after the page
|
||||
has rendered to avoid loading 400+ images on intial load.
|
||||
The data looks like:
|
||||
```js
|
||||
[
|
||||
{"url":"https://github.com/0intro","photo":"https://avatars.githubusercontent.com/u/6043744?v=3","username":"0intro"}
|
||||
]
|
||||
```
|
||||
*/}}
|
||||
{{ $contributors := getJSON "https://contributors.cloud.ipfs.team/contributors?org=all" }}
|
||||
<script>
|
||||
(function () {
|
||||
var contributors = {{ $contributors }}
|
||||
var hexWidth = 62
|
||||
var hexHeight = 72
|
||||
var loadingDelayMs = 50
|
||||
var containerEl = document.getElementById('contributors-slide')
|
||||
var containerElTop = containerEl.getBoundingClientRect().top
|
||||
var screenHeight = window.innerHeight
|
||||
var pageYOffset = window.pageYOffset
|
||||
var inView = (pageYOffset + screenHeight + 500) > containerElTop
|
||||
if (inView) {
|
||||
renderContributors(contributors)
|
||||
} else {
|
||||
window.addEventListener('scroll', isContributorsSectionInView)
|
||||
}
|
||||
|
||||
function isContributorsSectionInView () {
|
||||
inView = (window.pageYOffset + screenHeight + 500) > containerElTop
|
||||
if (inView) {
|
||||
renderContributors(contributors)
|
||||
window.removeEventListener('scroll', isContributorsSectionInView)
|
||||
}
|
||||
}
|
||||
|
||||
function renderContributors (data) {
|
||||
containerEl.className = 'running'
|
||||
var rows = document.querySelectorAll('.contributors-row')
|
||||
var rowWidth = Math.ceil(data.length / rows.length) * hexWidth
|
||||
;[].forEach.call(rows, function (row, i) {
|
||||
row.style.height = hexHeight + 'px'
|
||||
row.style.width = rowWidth + 'px'
|
||||
row.style.top = i * hexHeight * 0.75 + 'px'
|
||||
if ((i % 2) === 1) {
|
||||
row.style.left = hexWidth / 2 + 'px'
|
||||
}
|
||||
})
|
||||
var nextRow = 0
|
||||
var lastRender = 0
|
||||
function renderWithPause(itemIndex) {
|
||||
if (itemIndex >= data.length) return
|
||||
renderContributor(data[itemIndex], function (err, el) {
|
||||
var nextIndex = itemIndex + 1
|
||||
if (err) renderWithPause(nextIndex)
|
||||
rows[nextRow].appendChild(el)
|
||||
setTimeout(function () {
|
||||
el.className = 'hex show'
|
||||
}, 10)
|
||||
var now = Date.now()
|
||||
var diff = now - lastRender
|
||||
var delay = loadingDelayMs - diff
|
||||
if (delay < 0) delay = 0
|
||||
lastRender = now
|
||||
nextRow = (nextRow + 1) % rows.length
|
||||
setTimeout(function () {
|
||||
renderWithPause(itemIndex + 1)
|
||||
}, delay)
|
||||
})
|
||||
}
|
||||
renderWithPause(0, Date.now())
|
||||
}
|
||||
|
||||
function renderContributor (item, cb) {
|
||||
var link = document.createElement('a')
|
||||
link.className = 'hex'
|
||||
link.href = 'https://github.com/' + item.username
|
||||
link.target = '_blank'
|
||||
link.title = item.username
|
||||
link.style.width = hexWidth + 'px'
|
||||
link.style.height = hexHeight + 'px'
|
||||
|
||||
var img = new Image()
|
||||
img.onload = function () {
|
||||
link.style.background = '#333 url(' + item.photo + ') no-repeat center'
|
||||
link.style.backgroundSize = 'cover'
|
||||
cb(null, link)
|
||||
}
|
||||
img.onerror = function (evt) {
|
||||
cb(evt, link)
|
||||
}
|
||||
img.src = item.photo
|
||||
}
|
||||
})()
|
||||
|
||||
</script>
|
||||
14
layouts/partials/footer.html
Normal file
14
layouts/partials/footer.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<footer>
|
||||
<div class="wrap">
|
||||
<p>
|
||||
<span class="title">libp2p was started and is sponsored by</span>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://protocol.ai">
|
||||
<img src="/img/protocol-labs-logo.png" height="64px">
|
||||
</a>
|
||||
</p>
|
||||
<div class="copyright">© Protocol Labs | Except as noted, content licensed CC-BY 3.0</div>
|
||||
<img class="decoration img8" width="63" height="75" src="/img/img8.png" alt="">
|
||||
</div>
|
||||
</footer>
|
||||
6
layouts/partials/head.html
Normal file
6
layouts/partials/head.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" type="text/css" href="/css/common.css">
|
||||
60
layouts/partials/implementation.html
Normal file
60
layouts/partials/implementation.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<section id="{{ .id }}">
|
||||
<div class="table">
|
||||
<div class="title">
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
{{ if .title }}
|
||||
{{ .title }}
|
||||
{{ else }}
|
||||
{{ humanize .id }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{if .interface}}
|
||||
<a class="btn-interface" href="{{.interface}}" target="_blank">Interface</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="head-row">
|
||||
<th class="head-col"></th>
|
||||
{{ range first 1 .libs }}
|
||||
{{ range .langs }}
|
||||
<th>{{ .name }}</th>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</tr>
|
||||
{{ range .libs }}
|
||||
<tr>
|
||||
<th class="head-col">{{ .id }}</th>
|
||||
{{ range .langs }}
|
||||
<td>
|
||||
<a href="{{ .url }}" target="_blank">
|
||||
{{ partial "status-icon.html" . }}
|
||||
</a>
|
||||
</td>
|
||||
{{end}}
|
||||
</tr>
|
||||
{{ end }}
|
||||
<tr class="empty">
|
||||
<th class="head-col"></th>
|
||||
{{ range first 1 .libs }}
|
||||
{{ range .langs }}
|
||||
<td></td>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div><i class="icon-hexagon green"></i><span>Done</span></div>
|
||||
<div><i class="icon-hexagon yellow"></i><span>In Progress / Usable</span></div>
|
||||
<div><i class="icon-hexagon red"></i><span>Prototype / Unstable</span></div>
|
||||
<div><i class="icon-hexagon grey"></i><span>Missing</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
92
layouts/partials/splash.html
Normal file
92
layouts/partials/splash.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<style>
|
||||
.a-modular-network-stack {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
overflow-y: visible;
|
||||
transform: translate3d(0,0,0); /* hint to prefer gpu rending. */
|
||||
}
|
||||
|
||||
.layer {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.module-transports {
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
.anim-fade {
|
||||
animation: fade 1000ms ease-in both;
|
||||
}
|
||||
|
||||
@keyframes throb {
|
||||
0% { transform: scale(1)}
|
||||
50% { transform: scale(1.05)}
|
||||
100% { transform: scale(1)}
|
||||
}
|
||||
|
||||
#splash-stage {
|
||||
animation: throb 200ms ease-in-out 2200ms both;
|
||||
}
|
||||
|
||||
#splash-headline {
|
||||
animation: fade 1000ms ease-in 800ms both;
|
||||
}
|
||||
|
||||
@keyframes rise {
|
||||
0% { transform: translate(0, 50px)}
|
||||
100% { transform: translate(0, 0px)}
|
||||
}
|
||||
|
||||
#splash-subhead {
|
||||
animation:
|
||||
fade 500ms ease-in 2400ms both,
|
||||
rise 500ms ease-in 2200ms both;
|
||||
}
|
||||
#splash-subhead * {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<article class="a-modular-network-stack" style="overflow:hidden;">
|
||||
<div style="height:475px;" id="splash-stage">
|
||||
<div class="layer module-transports anim-fade">
|
||||
<img src="/img/svg/transports.svg" alt="Transports" title="Transports">
|
||||
</div>
|
||||
{{ partial "symbol.html" (dict "id" "blue-2" "start" "translate(-31.8%, 346px)" "end" "translate(-55px, 234px)" "fadeDelay" "0ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "discovery" "start" "translate(39.8%, 297px)" "end" "translate(37px, 213px)" "fadeDelay" "100ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "stream-muxers" "start" "translate(14%, 40px)" "end" "translate(36px, 121px)" "fadeDelay" "200ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "crypto-channels" "start" "translate(-26.8%, 37px)" "end" "translate(-18px, 121px)" "fadeDelay" "300ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "connection-upgrades" "start" "translate(-42.2%, 178px)" "end" "translate(-73px, 142px)" "fadeDelay" "400ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "others" "start" "translate(13.5%, 346px)" "end" "translate(18px, 256px)" "fadeDelay" "500ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "orange-1" "start" "translate(calc(-15.5% - 18px), 259px)" "end" "translate(-36px, 211px)" "fadeDelay" "600ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "nat-traversal" "start" "translate(35.4%, 37px)" "end" "translate(55px, 142px)" "fadeDelay" "800ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "utils" "start" "translate(-7.6%, 365px)" "end" "translate(0px, 231px)" "fadeDelay" "900ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "record-stores" "start" "translate(22.6%, 225px)" "end" "translate(36px, 164px)" "fadeDelay" "700ms") }}
|
||||
{{ partial "symbol.html" (dict "id" "orange-2" "start" "translate(-15.5%, 211px)" "end" "translate(-18px, 164px)" "fadeDelay" "600ms") }}
|
||||
</div>
|
||||
<div class="wrap" style="padding-bottom:30px;">
|
||||
<h2 id="splash-headline"><span>A</span> <span>modular</span> <span>network</span> <span>stack.</span></h2>
|
||||
<div id="splash-subhead">
|
||||
<p style="margin-top:0;">Run your network applications free from runtime and address services, independently of their location.</p>
|
||||
<div class="buttons" style="text-align:center;">
|
||||
<a href="https://github.com/libp2p/libp2p" class="btn-socials btn-more-videos" target="_blank">TRY LIBP2P</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle white"></div>
|
||||
</article>
|
||||
15
layouts/partials/status-icon.html
Normal file
15
layouts/partials/status-icon.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{{ if eq .status "Done" }}
|
||||
<i class="green icon-hexagon"></i>
|
||||
{{end}}
|
||||
|
||||
{{ if eq .status "Usable" }}
|
||||
<i class="yellow icon-hexagon"></i>
|
||||
{{end}}
|
||||
|
||||
{{ if eq .status "Unstable" }}
|
||||
<i class="red icon-hexagon"></i>
|
||||
{{end}}
|
||||
|
||||
{{ if eq .status "Missing" }}
|
||||
<i class="grey icon-hexagon"></i>
|
||||
{{end}}
|
||||
20
layouts/partials/symbol.html
Normal file
20
layouts/partials/symbol.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<style>
|
||||
@keyframes {{ .id }} {
|
||||
0% {
|
||||
transform: {{ .start | safeCSS }};
|
||||
}
|
||||
84% {
|
||||
transform: {{ .start | safeCSS }};
|
||||
}
|
||||
100% {
|
||||
transform: {{ .end | safeCSS }};
|
||||
}
|
||||
}
|
||||
#{{ .id }} {
|
||||
animation: {{ .id }} 2000ms ease-in both;
|
||||
animation-play-state: running;
|
||||
}
|
||||
</style>
|
||||
<div id="{{ .id }}" class="layer">
|
||||
<img src="/img/svg/{{ .id }}.svg" alt="{{ .name }}" title="{{ .name }}" class="anim-fade" style="margin:0 auto; animation-delay: {{ .fadeDelay }}" />
|
||||
</div>
|
||||
19
layouts/partials/topbar.html
Normal file
19
layouts/partials/topbar.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<a class="logo {{ if (not (eq .URL "/")) }}static{{end}}" href="/">
|
||||
<img width="60" height="72" src="/img/logo_small.png" alt="">
|
||||
<b>lib</b>p2p
|
||||
</a>
|
||||
<a href='#' class='bars'><i class="fa fa-bars" aria-hidden="true"></i></a>
|
||||
<a href='#' class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/implementations" {{ if eq .URL "/implementations/" }}class="active"{{ end }}>Implementations</a></li>
|
||||
<li><a href="/bundles" {{ if eq .URL "/bundles/" }}class="active"{{ end }}>Bundles</a></li>
|
||||
<li><a href="/media" {{ if eq .URL "/media/" }}class="active"{{ end }}>Media</a></li>
|
||||
<li><a href="https://github.com/libp2p" target="_blank">Github</a></li>
|
||||
<li><a href="https://github.com/libp2p/specs" target="_blank">Specifications</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1,472 +1,472 @@
|
||||
@import "variables.less";
|
||||
@import "triangle.less";
|
||||
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF753F;
|
||||
}
|
||||
|
||||
article.bundles {
|
||||
padding-top: 127px;
|
||||
padding-bottom: 133px;
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
.wrap {
|
||||
p{
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #9099A9;
|
||||
margin: 20px 0 73px 0;
|
||||
@media (max-width: 767px){
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
|
||||
.active-link{
|
||||
display: none;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
.copy-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.img {
|
||||
width: 32px;
|
||||
height: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
&.node {
|
||||
width: 32px;
|
||||
}
|
||||
&.golang {
|
||||
width: 15px;
|
||||
}
|
||||
&.haskell {
|
||||
width: 25px;
|
||||
}
|
||||
&.java {
|
||||
width: 16px;
|
||||
}
|
||||
&.python {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
i {
|
||||
margin-left: 5px;
|
||||
font-size: 8px;
|
||||
color: #9099A9;
|
||||
}
|
||||
&.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
.img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
.column {
|
||||
border-right: 1px solid #F5F7FB;
|
||||
padding: 0 34px;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
border: none;
|
||||
}
|
||||
.link {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
.img {
|
||||
width: 32px;
|
||||
height: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
&.node {
|
||||
width: 32px;
|
||||
}
|
||||
&.golang {
|
||||
width: 15px;
|
||||
}
|
||||
&.haskell {
|
||||
width: 25px;
|
||||
}
|
||||
&.java {
|
||||
width: 16px;
|
||||
}
|
||||
&.python {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
&.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
.img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
left: calc(~"50% - 100px");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article.bundles-info {
|
||||
background: #F3F6F9;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 170px;
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 55px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
.wrap {
|
||||
section {
|
||||
display: flex;
|
||||
margin-bottom: 80px;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 240px;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-right: none;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
.active-link {
|
||||
display: none;
|
||||
height: 45px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #9099A9;
|
||||
font-size: 16px;
|
||||
i {
|
||||
font-size: 8px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
a {
|
||||
color: #9099A9;
|
||||
max-width: 240px;
|
||||
text-decoration: none;
|
||||
padding: 0 0 0 40px;
|
||||
border-bottom: 1px solid #DFE5EE;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
//border-bottom: none;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
background: #E9EEF5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
.title {
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 205px;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top-right-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
.wrapper {
|
||||
width: 130px;
|
||||
height: 127px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.img {
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info {
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 291px;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: 5px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
ul {
|
||||
display: none;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 15px;
|
||||
margin: 0;
|
||||
&.show {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-top: 27px;
|
||||
min-width: 100px;
|
||||
max-width: 250px;
|
||||
width: 100%;
|
||||
span {
|
||||
padding-left: 6px;
|
||||
font-size: 16px;
|
||||
color: #9099A9;
|
||||
}
|
||||
}
|
||||
&.one-col {
|
||||
justify-content: center;
|
||||
li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
section.coming-soon {
|
||||
margin-top: 90px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@media (max-width: 767px){
|
||||
justify-content: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
.card {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.rectangle {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background: @c_white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
transition: 0.3s linear;
|
||||
text-decoration: none;
|
||||
&.coming-soon, &.empty {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
.img {
|
||||
width: 170px;
|
||||
height: 70px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
div.text {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: @c_black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
width: 245px;
|
||||
height: 55px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.coming-soon {
|
||||
justify-content: flex-end;
|
||||
* {
|
||||
opacity: 0.3;
|
||||
}
|
||||
div.text {
|
||||
display: flex;
|
||||
color: black;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&.empty {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
padding: 0;
|
||||
|
||||
section {
|
||||
flex-direction: column;
|
||||
aside {
|
||||
width: 100%;
|
||||
|
||||
&.left {
|
||||
.active-link {
|
||||
display: flex;
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
background: rgba(233, 238, 245, 0.8);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 495px;
|
||||
.info {
|
||||
ul {
|
||||
padding: 16px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "lib/variables.less";
|
||||
@import "lib/triangle.less";
|
||||
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF753F;
|
||||
}
|
||||
|
||||
article.bundles {
|
||||
padding-top: 127px;
|
||||
padding-bottom: 133px;
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
.wrap {
|
||||
p{
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #9099A9;
|
||||
margin: 20px 0 73px 0;
|
||||
@media (max-width: 767px){
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
|
||||
.active-link{
|
||||
display: none;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
.copy-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.img {
|
||||
width: 32px;
|
||||
height: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
&.node {
|
||||
width: 32px;
|
||||
}
|
||||
&.golang {
|
||||
width: 15px;
|
||||
}
|
||||
&.haskell {
|
||||
width: 25px;
|
||||
}
|
||||
&.java {
|
||||
width: 16px;
|
||||
}
|
||||
&.python {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
i {
|
||||
margin-left: 5px;
|
||||
font-size: 8px;
|
||||
color: #9099A9;
|
||||
}
|
||||
&.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
.img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
.column {
|
||||
border-right: 1px solid #F5F7FB;
|
||||
padding: 0 34px;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
border: none;
|
||||
}
|
||||
.link {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
.img {
|
||||
width: 32px;
|
||||
height: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
&.node {
|
||||
width: 32px;
|
||||
}
|
||||
&.golang {
|
||||
width: 15px;
|
||||
}
|
||||
&.haskell {
|
||||
width: 25px;
|
||||
}
|
||||
&.java {
|
||||
width: 16px;
|
||||
}
|
||||
&.python {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
&.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
.img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
left: calc(~"50% - 100px");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article.bundles-info {
|
||||
background: #F3F6F9;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 170px;
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 55px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
.wrap {
|
||||
section {
|
||||
display: flex;
|
||||
margin-bottom: 80px;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 240px;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-right: none;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
.active-link {
|
||||
display: none;
|
||||
height: 45px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #9099A9;
|
||||
font-size: 16px;
|
||||
i {
|
||||
font-size: 8px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
a {
|
||||
color: #9099A9;
|
||||
max-width: 240px;
|
||||
text-decoration: none;
|
||||
padding: 0 0 0 40px;
|
||||
border-bottom: 1px solid #DFE5EE;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
//border-bottom: none;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
background: #E9EEF5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
.title {
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 205px;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top-right-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
.wrapper {
|
||||
width: 130px;
|
||||
height: 127px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.img {
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info {
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 291px;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: 5px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
ul {
|
||||
display: none;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 15px;
|
||||
margin: 0;
|
||||
&.show {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-top: 27px;
|
||||
min-width: 100px;
|
||||
max-width: 250px;
|
||||
width: 100%;
|
||||
span {
|
||||
padding-left: 6px;
|
||||
font-size: 16px;
|
||||
color: #9099A9;
|
||||
}
|
||||
}
|
||||
&.one-col {
|
||||
justify-content: center;
|
||||
li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
section.coming-soon {
|
||||
margin-top: 90px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@media (max-width: 767px){
|
||||
justify-content: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
.card {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.rectangle {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background: @c_white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
transition: 0.3s linear;
|
||||
text-decoration: none;
|
||||
&.coming-soon, &.empty {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
.img {
|
||||
width: 170px;
|
||||
height: 70px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
div.text {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: @c_black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
width: 245px;
|
||||
height: 55px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.coming-soon {
|
||||
justify-content: flex-end;
|
||||
* {
|
||||
opacity: 0.3;
|
||||
}
|
||||
div.text {
|
||||
display: flex;
|
||||
color: black;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&.empty {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
padding: 0;
|
||||
|
||||
section {
|
||||
flex-direction: column;
|
||||
aside {
|
||||
width: 100%;
|
||||
|
||||
&.left {
|
||||
.active-link {
|
||||
display: flex;
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
background: rgba(233, 238, 245, 0.8);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 495px;
|
||||
.info {
|
||||
ul {
|
||||
padding: 16px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,416 +1,418 @@
|
||||
@import "../css/fonts.css";
|
||||
@import "buttons.less";
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-ms-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
font-family: Roboto-Regular, SansSerif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
article.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding-top: 97px;
|
||||
padding-bottom: 100px;
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
max-width: 940px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@media (max-width: 940px) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-hexagon, .icon-cat {
|
||||
font-size: 14px;
|
||||
&.green {
|
||||
color: #15D476;
|
||||
}
|
||||
&.red {
|
||||
color: #FF753F;
|
||||
}
|
||||
&.yellow {
|
||||
color: #FFD006;
|
||||
}
|
||||
&.grey {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-cat {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
body > header {
|
||||
position: fixed;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
padding-bottom: 30px;
|
||||
.wrap {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
.logo {
|
||||
font-family: NexaLight, SansSerif;
|
||||
font-size: 24px;
|
||||
color: #48505D;
|
||||
padding-bottom: 4px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
left: -70px;
|
||||
-webkit-transition: all 0.6s;
|
||||
-moz-transition: all 0.6s;
|
||||
-ms-transition: all 0.6s;
|
||||
-o-transition: all 0.6s;
|
||||
transition: all 0.6s;
|
||||
img {
|
||||
display: inline;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 22px;
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
-webkit-transition: all 0.6s;
|
||||
-moz-transition: all 0.6s;
|
||||
-ms-transition: all 0.6s;
|
||||
-o-transition: all 0.6s;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
b {
|
||||
font-family: NexaBold, SansSerif;
|
||||
}
|
||||
&.show, &.static {
|
||||
left: 0;
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-bars, .fa-times {
|
||||
font-size: 28px;
|
||||
color: #48505D;
|
||||
}
|
||||
.bars, .close {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.close{
|
||||
order:6;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: relative;
|
||||
max-width: 590px;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
@media (max-width: 940px) {
|
||||
max-width: 550px;
|
||||
}
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: @c_grey;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
&:nth-child(1), &:nth-child(7){
|
||||
a:hover {
|
||||
color: #4FBAEB;
|
||||
}
|
||||
}
|
||||
&:nth-child(2), &:nth-child(8){
|
||||
a:hover {
|
||||
color: #D7E366;
|
||||
}
|
||||
}
|
||||
&:nth-child(3), &:nth-child(9){
|
||||
a:hover {
|
||||
color: #5B5B5B;
|
||||
}
|
||||
}
|
||||
&:nth-child(4), &:nth-child(10){
|
||||
a:hover {
|
||||
color: #B6BFCD;
|
||||
}
|
||||
}
|
||||
&:nth-child(5){
|
||||
a:hover {
|
||||
color: #F176AE;
|
||||
}
|
||||
}
|
||||
&:nth-child(6){
|
||||
a:hover {
|
||||
color: #FF9065;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.wrap {
|
||||
.logo {
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
font-size: 19px;
|
||||
img {
|
||||
opacity: 1;
|
||||
//display: inline;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
//left: -49px;
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 68px;
|
||||
left: 0;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
padding-bottom: 42px;
|
||||
background: white;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
margin-top: 42px;
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
font-family: Roboto-Bold;
|
||||
color: #48505D;
|
||||
letter-spacing: 1px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
header {
|
||||
align-self: center;
|
||||
|
||||
& > h2 {
|
||||
font-family: Roboto-Black;
|
||||
color: @c_black;
|
||||
margin: 0;
|
||||
font-size: 65px;
|
||||
@media (max-width: 767px) {
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.triangle {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
z-index: 0;
|
||||
&.white {
|
||||
border-left: 50vw solid #F3F6F9;
|
||||
border-right: 50vw solid #F3F6F9;
|
||||
border-top: 5vw solid white;
|
||||
}
|
||||
&.grey {
|
||||
border-left: 50vw solid white;
|
||||
border-right: 50vw solid white;
|
||||
border-top: 5vw solid #F3F6F9;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
padding: 20px 0 40px;
|
||||
width: 100%;
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.navigation {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
& > div {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.title {
|
||||
font-family: Roboto-Black;
|
||||
color: #48505D;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.links {
|
||||
border-top: 2px solid #F0F3F7;
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
line-height: 61px;
|
||||
@media (max-width: 767px) {
|
||||
//line-height: 40px;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
flex-basis: 52px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
color: #9AA2B1;
|
||||
}
|
||||
&:nth-child(1), &:nth-child(7){
|
||||
a:hover {
|
||||
color: #4FBAEB;
|
||||
}
|
||||
}
|
||||
&:nth-child(2), &:nth-child(8){
|
||||
a:hover {
|
||||
color: #D7E366;
|
||||
}
|
||||
}
|
||||
&:nth-child(3), &:nth-child(9){
|
||||
a:hover {
|
||||
color: #5B5B5B;
|
||||
}
|
||||
}
|
||||
&:nth-child(4), &:nth-child(10){
|
||||
a:hover {
|
||||
color: #B6BFCD;
|
||||
}
|
||||
}
|
||||
&:nth-child(5){
|
||||
a:hover {
|
||||
color: #F176AE;
|
||||
}
|
||||
}
|
||||
&:nth-child(6){
|
||||
a:hover {
|
||||
color: #FF9065;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icons-social {
|
||||
display: flex;
|
||||
width: 180px;
|
||||
justify-content: space-between;
|
||||
padding: 17px 0;
|
||||
}
|
||||
.copyright {
|
||||
padding: 25px 0;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
font-size: 16px;
|
||||
color: #5B626E;
|
||||
letter-spacing: -0.1px;
|
||||
@media (max-width: 767px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.img8 {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
bottom: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
footer .wrap .navigation{
|
||||
.links ul {
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
margin-right: 22px;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.filecoin, .protocol-labs {
|
||||
max-width: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.ipfs{
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.filecoin{
|
||||
margin-top:28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@import (inline) "lib/fonts.css";
|
||||
@import (inline) "lib/font-awesome.min.css";
|
||||
@import "lib/variables.less";
|
||||
@import "lib/buttons.less";
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-ms-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
font-family: Roboto-Regular, SansSerif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
article.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding-top: 97px;
|
||||
padding-bottom: 100px;
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
max-width: 940px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@media (max-width: 940px) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-hexagon, .icon-cat {
|
||||
font-size: 14px;
|
||||
&.green {
|
||||
color: #15D476;
|
||||
}
|
||||
&.red {
|
||||
color: #FF753F;
|
||||
}
|
||||
&.yellow {
|
||||
color: #FFD006;
|
||||
}
|
||||
&.grey {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-cat {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
body > header {
|
||||
position: fixed;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
padding-bottom: 30px;
|
||||
.wrap {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
.logo {
|
||||
font-family: NexaLight, SansSerif;
|
||||
font-size: 24px;
|
||||
color: #48505D;
|
||||
padding-bottom: 4px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
left: -70px;
|
||||
-webkit-transition: all 0.6s;
|
||||
-moz-transition: all 0.6s;
|
||||
-ms-transition: all 0.6s;
|
||||
-o-transition: all 0.6s;
|
||||
transition: all 0.6s;
|
||||
img {
|
||||
display: inline;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 22px;
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
-webkit-transition: all 0.6s;
|
||||
-moz-transition: all 0.6s;
|
||||
-ms-transition: all 0.6s;
|
||||
-o-transition: all 0.6s;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
b {
|
||||
font-family: NexaBold, SansSerif;
|
||||
}
|
||||
&.show, &.static {
|
||||
left: 0;
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-bars, .fa-times {
|
||||
font-size: 28px;
|
||||
color: #48505D;
|
||||
}
|
||||
.bars, .close {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.close{
|
||||
order:6;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: relative;
|
||||
max-width: 590px;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
@media (max-width: 940px) {
|
||||
max-width: 550px;
|
||||
}
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: @c_grey;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
&:nth-child(1), &:nth-child(7){
|
||||
a:hover {
|
||||
color: #4FBAEB;
|
||||
}
|
||||
}
|
||||
&:nth-child(2), &:nth-child(8){
|
||||
a:hover {
|
||||
color: #D7E366;
|
||||
}
|
||||
}
|
||||
&:nth-child(3), &:nth-child(9){
|
||||
a:hover {
|
||||
color: #5B5B5B;
|
||||
}
|
||||
}
|
||||
&:nth-child(4), &:nth-child(10){
|
||||
a:hover {
|
||||
color: #B6BFCD;
|
||||
}
|
||||
}
|
||||
&:nth-child(5){
|
||||
a:hover {
|
||||
color: #F176AE;
|
||||
}
|
||||
}
|
||||
&:nth-child(6){
|
||||
a:hover {
|
||||
color: #FF9065;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.wrap {
|
||||
.logo {
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
font-size: 19px;
|
||||
img {
|
||||
opacity: 1;
|
||||
//display: inline;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
//left: -49px;
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 68px;
|
||||
left: 0;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
padding-bottom: 42px;
|
||||
background: white;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
margin-top: 42px;
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
font-family: Roboto-Bold;
|
||||
color: #48505D;
|
||||
letter-spacing: 1px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
header {
|
||||
align-self: center;
|
||||
|
||||
& > h2 {
|
||||
font-family: Roboto-Black;
|
||||
color: @c_black;
|
||||
margin: 0;
|
||||
font-size: 65px;
|
||||
@media (max-width: 767px) {
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.triangle {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
z-index: 0;
|
||||
&.white {
|
||||
border-left: 50vw solid #F3F6F9;
|
||||
border-right: 50vw solid #F3F6F9;
|
||||
border-top: 5vw solid white;
|
||||
}
|
||||
&.grey {
|
||||
border-left: 50vw solid white;
|
||||
border-right: 50vw solid white;
|
||||
border-top: 5vw solid #F3F6F9;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
padding: 20px 0 40px;
|
||||
width: 100%;
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.navigation {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
& > div {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.title {
|
||||
font-family: Roboto-Black;
|
||||
color: #48505D;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.links {
|
||||
border-top: 2px solid #F0F3F7;
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
line-height: 61px;
|
||||
@media (max-width: 767px) {
|
||||
//line-height: 40px;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
flex-basis: 52px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
color: #9AA2B1;
|
||||
}
|
||||
&:nth-child(1), &:nth-child(7){
|
||||
a:hover {
|
||||
color: #4FBAEB;
|
||||
}
|
||||
}
|
||||
&:nth-child(2), &:nth-child(8){
|
||||
a:hover {
|
||||
color: #D7E366;
|
||||
}
|
||||
}
|
||||
&:nth-child(3), &:nth-child(9){
|
||||
a:hover {
|
||||
color: #5B5B5B;
|
||||
}
|
||||
}
|
||||
&:nth-child(4), &:nth-child(10){
|
||||
a:hover {
|
||||
color: #B6BFCD;
|
||||
}
|
||||
}
|
||||
&:nth-child(5){
|
||||
a:hover {
|
||||
color: #F176AE;
|
||||
}
|
||||
}
|
||||
&:nth-child(6){
|
||||
a:hover {
|
||||
color: #FF9065;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icons-social {
|
||||
display: flex;
|
||||
width: 180px;
|
||||
justify-content: space-between;
|
||||
padding: 17px 0;
|
||||
}
|
||||
.copyright {
|
||||
padding: 25px 0;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
font-size: 16px;
|
||||
color: #5B626E;
|
||||
letter-spacing: -0.1px;
|
||||
@media (max-width: 767px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.img8 {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
bottom: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding-top: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
footer .wrap .navigation{
|
||||
.links ul {
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
margin-right: 22px;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.filecoin, .protocol-labs {
|
||||
max-width: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.ipfs{
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.filecoin{
|
||||
margin-top:28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,4 @@
|
||||
@import "variables.less";
|
||||
@import "triangle.less";
|
||||
@import "lib/variables.less";
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
@@ -122,7 +121,6 @@ article.a-modular-network-stack {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
@@ -600,43 +598,6 @@ article.community {
|
||||
}
|
||||
}
|
||||
}
|
||||
.persons {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
//background: url(../img/photo_line.png) repeat-x center center;
|
||||
margin-top: 82px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.svg-wrapper {
|
||||
overflow-x: auto;
|
||||
height: 250px;
|
||||
overflow-y: hidden;
|
||||
//cursor: e-resize;
|
||||
|
||||
.tooltip {
|
||||
//visibility: hidden;
|
||||
|
||||
}
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
use {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
padding-bottom: 0;
|
||||
.wrap {
|
||||
margin-top: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@@ -722,4 +683,4 @@ article.community {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,146 +1,145 @@
|
||||
@import "../css/fonts.css";
|
||||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
|
||||
.btn-socials{
|
||||
width:200px;
|
||||
height:58px;
|
||||
border:none;
|
||||
color:@c_button_white;
|
||||
font-family: 'Roboto-Regular';
|
||||
font-size: 16px;
|
||||
letter-spacing: 1.2px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
.border-radius();
|
||||
}
|
||||
|
||||
.btn-twitter{
|
||||
.btn_state(@c_l_blue);
|
||||
}
|
||||
|
||||
.btn-freenode{
|
||||
.btn_state(@c_l_grey);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-github{
|
||||
.btn_state(@c_dd_grey);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-community{
|
||||
.btn_state(@c_grey);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.btn-more-videos{
|
||||
.btn_state(@c_pink);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-copy{
|
||||
display:block;
|
||||
width:76px;
|
||||
height:30px;
|
||||
font-size:12px;
|
||||
color:@c_white;
|
||||
font-family: 'Roboto-Bold';
|
||||
.btn_state(@c_orange);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height:30px;
|
||||
}
|
||||
|
||||
.btn-interface{
|
||||
display:block;
|
||||
width:100px;
|
||||
height:26px;
|
||||
font-size:14px;
|
||||
color:@c_white;
|
||||
font-family: 'Roboto-Medium';
|
||||
.btn_state(@c_blue);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height:26px;
|
||||
.border-radius(26px);
|
||||
}
|
||||
|
||||
.btn-soc-network{
|
||||
text-decoration: none;
|
||||
display:inline-block;
|
||||
color:@c_white;
|
||||
|
||||
i{
|
||||
veritical-align:middle;
|
||||
}
|
||||
}
|
||||
|
||||
.link-tw{
|
||||
.btn_state_hexagon(@c_l_blue,18px);
|
||||
|
||||
i{
|
||||
font-size:18px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-google-plus{
|
||||
.btn_state_hexagon(@bg_google_plus,18px);
|
||||
|
||||
i{
|
||||
font-size:13px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-fb{
|
||||
.btn_state_hexagon(@bg_facebook,18px);
|
||||
|
||||
i{
|
||||
font-size:17px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-youtube{
|
||||
.btn_state_hexagon(@bg_youtube,18px);
|
||||
|
||||
i{
|
||||
font-size:17px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-hexagon-item{
|
||||
display:block;
|
||||
.bg-heragons-block("../img/test.jpg",300px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-hexagon-item:hover .hexagon-hover{
|
||||
position: absolute;
|
||||
top:0;left:0;
|
||||
display:block;
|
||||
content: '';
|
||||
.hexagon(300px, rgba(50,52,55, 0.85));
|
||||
}
|
||||
|
||||
.hexagon-hover>span{
|
||||
color:#fff;
|
||||
font-size:12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hexagon-hover{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.wr-tringle{
|
||||
position:relative;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
text-align: center;
|
||||
|
||||
.bg-with-tringle(107px,@c_white,red);
|
||||
}
|
||||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
|
||||
.btn-socials{
|
||||
width:200px;
|
||||
height:58px;
|
||||
border:none;
|
||||
color:@c_button_white;
|
||||
font-family: 'Roboto-Regular';
|
||||
font-size: 16px;
|
||||
letter-spacing: 1.2px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
.border-radius();
|
||||
}
|
||||
|
||||
.btn-twitter{
|
||||
.btn_state(@c_l_blue);
|
||||
}
|
||||
|
||||
.btn-freenode{
|
||||
.btn_state(@c_l_grey);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-github{
|
||||
.btn_state(@c_dd_grey);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-community{
|
||||
.btn_state(@c_grey);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.btn-more-videos{
|
||||
.btn_state(@c_pink);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-copy{
|
||||
display:block;
|
||||
width:76px;
|
||||
height:30px;
|
||||
font-size:12px;
|
||||
color:@c_white;
|
||||
font-family: 'Roboto-Bold';
|
||||
.btn_state(@c_orange);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height:30px;
|
||||
}
|
||||
|
||||
.btn-interface{
|
||||
display:block;
|
||||
width:100px;
|
||||
height:26px;
|
||||
font-size:14px;
|
||||
color:@c_white;
|
||||
font-family: 'Roboto-Medium';
|
||||
.btn_state(@c_blue);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height:26px;
|
||||
.border-radius(26px);
|
||||
}
|
||||
|
||||
.btn-soc-network{
|
||||
text-decoration: none;
|
||||
display:inline-block;
|
||||
color:@c_white;
|
||||
|
||||
i{
|
||||
veritical-align:middle;
|
||||
}
|
||||
}
|
||||
|
||||
.link-tw{
|
||||
.btn_state_hexagon(@c_l_blue,18px);
|
||||
|
||||
i{
|
||||
font-size:18px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-google-plus{
|
||||
.btn_state_hexagon(@bg_google_plus,18px);
|
||||
|
||||
i{
|
||||
font-size:13px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-fb{
|
||||
.btn_state_hexagon(@bg_facebook,18px);
|
||||
|
||||
i{
|
||||
font-size:17px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-youtube{
|
||||
.btn_state_hexagon(@bg_youtube,18px);
|
||||
|
||||
i{
|
||||
font-size:17px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-hexagon-item{
|
||||
display:block;
|
||||
.bg-heragons-block("../img/test.jpg",300px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-hexagon-item:hover .hexagon-hover{
|
||||
position: absolute;
|
||||
top:0;left:0;
|
||||
display:block;
|
||||
content: '';
|
||||
.hexagon(300px, rgba(50,52,55, 0.85));
|
||||
}
|
||||
|
||||
.hexagon-hover>span{
|
||||
color:#fff;
|
||||
font-size:12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hexagon-hover{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.wr-tringle{
|
||||
position:relative;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
text-align: center;
|
||||
|
||||
.bg-with-tringle(107px,@c_white,red);
|
||||
}
|
||||
@@ -1,101 +1,101 @@
|
||||
@import "variables.less";
|
||||
@import "triangle.less";
|
||||
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF7F4D;
|
||||
}
|
||||
|
||||
article.examples {
|
||||
padding-top: 127px;
|
||||
padding-bottom: 93px;
|
||||
@media (max-width: 940px) {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
p {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #9099A9;
|
||||
margin: 20px 0 73px 0;
|
||||
@media (max-width: 940px) {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hexagons {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hexagons-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -88px;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
margin-top: -46px;
|
||||
}
|
||||
|
||||
&.row1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hexagon-wrapper {
|
||||
//max-width: 310px;
|
||||
//min-width: 230px;
|
||||
//max-height: 356px;
|
||||
//min-height: 265px;
|
||||
width: 310px;
|
||||
height: 356px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
//width: 230px;
|
||||
//height: 265px;
|
||||
width: 160px;
|
||||
height: 184px;
|
||||
}
|
||||
|
||||
svg {
|
||||
//max-width: 310px;
|
||||
//min-width: 220px;
|
||||
//max-height: 356px;
|
||||
//min-height: 255px;
|
||||
width: calc(~"100% - 10px");
|
||||
height: calc(~"100% - 10px");
|
||||
|
||||
g.hover {
|
||||
opacity: 0;
|
||||
//display: none;
|
||||
}
|
||||
}
|
||||
&.big {
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
image {
|
||||
filter: url(#blur);
|
||||
}
|
||||
g.hover {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "variables.less";
|
||||
@import "triangle.less";
|
||||
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF7F4D;
|
||||
}
|
||||
|
||||
article.examples {
|
||||
padding-top: 127px;
|
||||
padding-bottom: 93px;
|
||||
@media (max-width: 940px) {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
p {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #9099A9;
|
||||
margin: 20px 0 73px 0;
|
||||
@media (max-width: 940px) {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hexagons {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hexagons-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -88px;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
margin-top: -46px;
|
||||
}
|
||||
|
||||
&.row1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hexagon-wrapper {
|
||||
//max-width: 310px;
|
||||
//min-width: 230px;
|
||||
//max-height: 356px;
|
||||
//min-height: 265px;
|
||||
width: 310px;
|
||||
height: 356px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
//width: 230px;
|
||||
//height: 265px;
|
||||
width: 160px;
|
||||
height: 184px;
|
||||
}
|
||||
|
||||
svg {
|
||||
//max-width: 310px;
|
||||
//min-width: 220px;
|
||||
//max-height: 356px;
|
||||
//min-height: 255px;
|
||||
width: calc(~"100% - 10px");
|
||||
height: calc(~"100% - 10px");
|
||||
|
||||
g.hover {
|
||||
opacity: 0;
|
||||
//display: none;
|
||||
}
|
||||
}
|
||||
&.big {
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
image {
|
||||
filter: url(#blur);
|
||||
}
|
||||
g.hover {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,126 +1,126 @@
|
||||
@import "hexagon.less";
|
||||
@import "triangle.less";
|
||||
|
||||
|
||||
.box-sizing (@type: border-box) {
|
||||
-webkit-box-sizing: @type;
|
||||
-moz-box-sizing: @type;
|
||||
box-sizing: @type;
|
||||
}
|
||||
|
||||
.border-radius (@radius: 7px) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.box-shadow (@string) {
|
||||
-webkit-box-shadow: @string;
|
||||
-moz-box-shadow: @string;
|
||||
box-shadow: @string;
|
||||
}
|
||||
|
||||
.link {
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: all;
|
||||
}
|
||||
|
||||
|
||||
.btn_state(@color) {
|
||||
background: @color;
|
||||
&:hover{
|
||||
background:mix(@c_white,@color, @lighten-percentage);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
&:active{
|
||||
background:mix(#000,@color, @darken-percentage);
|
||||
}
|
||||
|
||||
&.disabled{
|
||||
background:lighten(@color, @lighten-percentage-dis);
|
||||
}
|
||||
}
|
||||
|
||||
.btn_state_hexagon(@color,@size){
|
||||
.hexagon(@size, @color);
|
||||
&:hover{
|
||||
.hexagon-changecolor(mix(@c_white,@color, @lighten-percentage));
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
&:active{
|
||||
.hexagon-changecolor(mix(#000,@color, @darken-percentage));
|
||||
}
|
||||
|
||||
&.disabled{
|
||||
.hexagon-changecolor(lighten(@color, @lighten-percentage-dis));
|
||||
}
|
||||
}
|
||||
|
||||
.bg-heragons-block(@image_url,@size){
|
||||
@radius: @size * 0.86602540378;
|
||||
position: relative;
|
||||
margin: @size auto;
|
||||
width: @radius * 2;;
|
||||
height: @size;
|
||||
/*background: url(@image_url) center center;*/
|
||||
z-index: 1;
|
||||
|
||||
.face1, .face2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
/* Keeps borders smooth in webkit */
|
||||
backface-visibility: hidden;
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: @size*2;
|
||||
height: @size*2;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.face1 {
|
||||
transform: rotate(60deg);
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
transform-origin: left top;
|
||||
transform: rotate(-60deg) translate(-@size, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.face2 {
|
||||
transform: rotate(-60deg);
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
transform-origin: right top;
|
||||
transform: rotate(60deg) translate(@size, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-with-tringle(@size,@bg_color,@color_triangle){
|
||||
background:@bg_color;
|
||||
|
||||
.i-triangle{
|
||||
margin-left:-7px;
|
||||
@w:100vw;
|
||||
.triangle(down, @w, @size, @color_triangle);
|
||||
|
||||
}
|
||||
}
|
||||
@import "hexagon.less";
|
||||
@import "triangle.less";
|
||||
|
||||
|
||||
.box-sizing (@type: border-box) {
|
||||
-webkit-box-sizing: @type;
|
||||
-moz-box-sizing: @type;
|
||||
box-sizing: @type;
|
||||
}
|
||||
|
||||
.border-radius (@radius: 7px) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.box-shadow (@string) {
|
||||
-webkit-box-shadow: @string;
|
||||
-moz-box-shadow: @string;
|
||||
box-shadow: @string;
|
||||
}
|
||||
|
||||
.link {
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: all;
|
||||
}
|
||||
|
||||
|
||||
.btn_state(@color) {
|
||||
background: @color;
|
||||
&:hover{
|
||||
background:mix(@c_white,@color, @lighten-percentage);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
&:active{
|
||||
background:mix(#000,@color, @darken-percentage);
|
||||
}
|
||||
|
||||
&.disabled{
|
||||
background:lighten(@color, @lighten-percentage-dis);
|
||||
}
|
||||
}
|
||||
|
||||
.btn_state_hexagon(@color,@size){
|
||||
.hexagon(@size, @color);
|
||||
&:hover{
|
||||
.hexagon-changecolor(mix(@c_white,@color, @lighten-percentage));
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
&:active{
|
||||
.hexagon-changecolor(mix(#000,@color, @darken-percentage));
|
||||
}
|
||||
|
||||
&.disabled{
|
||||
.hexagon-changecolor(lighten(@color, @lighten-percentage-dis));
|
||||
}
|
||||
}
|
||||
|
||||
.bg-heragons-block(@image_url,@size){
|
||||
@radius: @size * 0.86602540378;
|
||||
position: relative;
|
||||
margin: @size auto;
|
||||
width: @radius * 2;;
|
||||
height: @size;
|
||||
/*background: url(@image_url) center center;*/
|
||||
z-index: 1;
|
||||
|
||||
.face1, .face2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
/* Keeps borders smooth in webkit */
|
||||
backface-visibility: hidden;
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: @size*2;
|
||||
height: @size*2;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.face1 {
|
||||
transform: rotate(60deg);
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
transform-origin: left top;
|
||||
transform: rotate(-60deg) translate(-@size, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.face2 {
|
||||
transform: rotate(-60deg);
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
transform-origin: right top;
|
||||
transform: rotate(60deg) translate(@size, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-with-tringle(@size,@bg_color,@color_triangle){
|
||||
background:@bg_color;
|
||||
|
||||
.i-triangle{
|
||||
margin-left:-7px;
|
||||
@w:100vw;
|
||||
.triangle(down, @w, @size, @color_triangle);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,35 @@
|
||||
/* main colors*/
|
||||
|
||||
@c_ll_bue:#f3f6f9;
|
||||
@c_font:#949cac;
|
||||
@c_dark_grey:#48505d;
|
||||
@c_m_grey:#474F5C;
|
||||
|
||||
@c_yellow:#f9c234;
|
||||
|
||||
@c_purple:#953A8C;
|
||||
@c_l_blue:#24a8e6;
|
||||
@c_l_grey:#cedd40; /*bg_freenode*/
|
||||
@c_dd_grey:#333333;
|
||||
//@c_grey:#a4afc1;
|
||||
@c_grey: #9099A9;
|
||||
@c_pink: #ee5499; /*bg_video*/
|
||||
|
||||
|
||||
@bg_google_plus:#f24032;
|
||||
@bg_facebook:#43609c;
|
||||
@bg_youtube:#fb0014;
|
||||
|
||||
|
||||
@c_orange:#ff743e;
|
||||
@c_blue:#20b7ec;
|
||||
|
||||
|
||||
@c_white:#fff;
|
||||
@c_button_white: #fefefe;
|
||||
@c_black: #48505D;
|
||||
|
||||
|
||||
@lighten-percentage:20%;
|
||||
@darken-percentage: 20%;
|
||||
@lighten-percentage-dis:30%;
|
||||
|
||||
|
||||
/* main colors*/
|
||||
|
||||
@c_ll_bue:#f3f6f9;
|
||||
@c_font:#949cac;
|
||||
@c_dark_grey:#48505d;
|
||||
@c_m_grey:#474F5C;
|
||||
|
||||
@c_yellow:#f9c234;
|
||||
|
||||
@c_purple:#953A8C;
|
||||
@c_l_blue:#24a8e6;
|
||||
@c_l_grey:#cedd40; /*bg_freenode*/
|
||||
@c_dd_grey:#333333;
|
||||
//@c_grey:#a4afc1;
|
||||
@c_grey: #9099A9;
|
||||
@c_pink: #ee5499; /*bg_video*/
|
||||
|
||||
|
||||
@bg_google_plus:#f24032;
|
||||
@bg_facebook:#43609c;
|
||||
@bg_youtube:#fb0014;
|
||||
|
||||
|
||||
@c_orange:#ff743e;
|
||||
@c_blue:#20b7ec;
|
||||
|
||||
|
||||
@c_white:#fff;
|
||||
@c_button_white: #fefefe;
|
||||
@c_black: #48505D;
|
||||
|
||||
|
||||
@lighten-percentage:20%;
|
||||
@darken-percentage: 20%;
|
||||
@lighten-percentage-dis:30%;
|
||||
316
less/media.less
316
less/media.less
@@ -1,158 +1,158 @@
|
||||
@import "../css/fonts.css";
|
||||
@import "buttons.less";
|
||||
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF7F4D;
|
||||
}
|
||||
|
||||
.pseudo-header{
|
||||
height:70px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-bottom: 25px;
|
||||
|
||||
& > .wrap {
|
||||
margin-top: 63px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-page{
|
||||
font-family: Roboto-Black, SansSerif;
|
||||
font-size: 64px;
|
||||
line-height: 67px;
|
||||
letter-spacing: -0.3px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color:@c_m_grey;
|
||||
}
|
||||
|
||||
.about-part{
|
||||
margin-top:25px;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color:#8F99A9;
|
||||
font-size:30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap-videos{
|
||||
margin-top: 95px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-video{
|
||||
width:300px;
|
||||
margin-bottom:40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
&.last-elment{
|
||||
justify-content: flex-start;
|
||||
|
||||
@media (max-width: 667px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
>div{
|
||||
display:flex;
|
||||
width:100%;
|
||||
margin-top:3px;
|
||||
height:200px;
|
||||
background:url(../img/img6.png) center center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
font-size:16px;
|
||||
color:@c_m_grey;
|
||||
text-align: left;
|
||||
width:100%;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container{
|
||||
display: flex;
|
||||
height:206px;
|
||||
width: 310px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
iframe{
|
||||
.border-radius(5px);
|
||||
width:300px;
|
||||
height:200px;
|
||||
border:none;
|
||||
display: flex;
|
||||
transition: 0.3s linear;
|
||||
}
|
||||
|
||||
&:hover iframe{
|
||||
height:206px;
|
||||
width: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 940px) {
|
||||
.wrap-videos{
|
||||
justify-content:space-around;
|
||||
}
|
||||
}
|
||||
|
||||
//@media (max-width: 667px) {
|
||||
// .item-video{
|
||||
// width:280px;
|
||||
// }
|
||||
//
|
||||
// .video-container{
|
||||
// iframe{
|
||||
// width:280px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.pseudo-header {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
main > .wrap {
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.about-part {
|
||||
margin-top: 8px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.title-page{
|
||||
font-size:36px;
|
||||
}
|
||||
|
||||
.about-part{
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
.item-video{
|
||||
width:300px;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
iframe{
|
||||
width:300px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@import "lib/variables.less";
|
||||
@import "lib/buttons.less";
|
||||
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF7F4D;
|
||||
}
|
||||
|
||||
.pseudo-header{
|
||||
height:70px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-bottom: 25px;
|
||||
|
||||
& > .wrap {
|
||||
margin-top: 63px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-page{
|
||||
font-family: Roboto-Black, SansSerif;
|
||||
font-size: 64px;
|
||||
line-height: 67px;
|
||||
letter-spacing: -0.3px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color:@c_m_grey;
|
||||
}
|
||||
|
||||
.about-part{
|
||||
margin-top:25px;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color:#8F99A9;
|
||||
font-size:30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap-videos{
|
||||
margin-top: 95px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-video{
|
||||
width:300px;
|
||||
margin-bottom:40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
&.last-elment{
|
||||
justify-content: flex-start;
|
||||
|
||||
@media (max-width: 667px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
>div{
|
||||
display:flex;
|
||||
width:100%;
|
||||
margin-top:3px;
|
||||
height:200px;
|
||||
background:url(../img/img6.png) center center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
font-size:16px;
|
||||
color:@c_m_grey;
|
||||
text-align: left;
|
||||
width:100%;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container{
|
||||
display: flex;
|
||||
height:206px;
|
||||
width: 310px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
iframe{
|
||||
.border-radius(5px);
|
||||
width:300px;
|
||||
height:200px;
|
||||
border:none;
|
||||
display: flex;
|
||||
transition: 0.3s linear;
|
||||
}
|
||||
|
||||
&:hover iframe{
|
||||
height:206px;
|
||||
width: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 940px) {
|
||||
.wrap-videos{
|
||||
justify-content:space-around;
|
||||
}
|
||||
}
|
||||
|
||||
//@media (max-width: 667px) {
|
||||
// .item-video{
|
||||
// width:280px;
|
||||
// }
|
||||
//
|
||||
// .video-container{
|
||||
// iframe{
|
||||
// width:280px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.pseudo-header {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
main > .wrap {
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.about-part {
|
||||
margin-top: 8px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.title-page{
|
||||
font-size:36px;
|
||||
}
|
||||
|
||||
.about-part{
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
.item-video{
|
||||
width:300px;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
iframe{
|
||||
width:300px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
43
package.json
Normal file
43
package.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "libp2p-website",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpage of the libp2p project. A multi protocol approach for a interoperable network stack that follows the 'self description' in favor of assumptions",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "make serve"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/libp2p/website.git"
|
||||
},
|
||||
"author": "Protocol Labs",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/libp2p/website/issues"
|
||||
},
|
||||
"homepage": "https://github.com/libp2p/website#readme",
|
||||
"standard": {
|
||||
"ignore": [
|
||||
"/static/js"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"browserify": "^14.4.0",
|
||||
"dnslink-deploy": "^1.0.7",
|
||||
"factor-bundle": "^2.5.0",
|
||||
"imagemin-cli": "^3.0.0",
|
||||
"imagemin-jpegtran": "^5.0.2",
|
||||
"imagemin-optipng": "^5.2.1",
|
||||
"imagemin-svgo": "^5.2.2",
|
||||
"less": "^2.7.2",
|
||||
"less-plugin-autoprefix": "^1.5.1",
|
||||
"less-plugin-clean-css": "^1.5.1",
|
||||
"nodemon": "^1.11.0",
|
||||
"standard": "^10.0.2",
|
||||
"uglify-js": "^3.0.18",
|
||||
"watchify": "^3.9.0"
|
||||
}
|
||||
}
|
||||
0
static/css/.keep
Normal file
0
static/css/.keep
Normal file
@@ -1,463 +0,0 @@
|
||||
/* main colors*/
|
||||
/*bg_freenode*/
|
||||
/*bg_video*/
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF753F;
|
||||
}
|
||||
article.bundles {
|
||||
padding-top: 127px;
|
||||
padding-bottom: 133px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
}
|
||||
article.bundles .wrap p {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #9099A9;
|
||||
margin: 20px 0 73px 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles .wrap p {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
article.bundles .wrap .links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
}
|
||||
article.bundles .wrap .links .active-link {
|
||||
display: none;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .copy-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .img {
|
||||
width: 32px;
|
||||
height: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .img img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .img img.node {
|
||||
width: 32px;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .img img.golang {
|
||||
width: 15px;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .img img.haskell {
|
||||
width: 25px;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .img img.java {
|
||||
width: 16px;
|
||||
}
|
||||
article.bundles .wrap .links .active-link .img img.python {
|
||||
width: 18px;
|
||||
}
|
||||
article.bundles .wrap .links .active-link span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
article.bundles .wrap .links .active-link i {
|
||||
margin-left: 5px;
|
||||
font-size: 8px;
|
||||
color: #9099A9;
|
||||
}
|
||||
article.bundles .wrap .links .active-link.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
article.bundles .wrap .links .active-link.inactive .img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
article.bundles .wrap .links .active-link.inactive span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
article.bundles .wrap .links .active-link:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles .wrap .links .active-link {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
article.bundles .wrap .links .columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column {
|
||||
border-right: 1px solid #F5F7FB;
|
||||
padding: 0 34px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column:last-child {
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles .wrap .links .columns .column {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link .img {
|
||||
width: 32px;
|
||||
height: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link .img img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link .img img.node {
|
||||
width: 32px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link .img img.golang {
|
||||
width: 15px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link .img img.haskell {
|
||||
width: 25px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link .img img.java {
|
||||
width: 16px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link .img img.python {
|
||||
width: 18px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link.inactive .img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link.inactive span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
article.bundles .wrap .links .columns .column .link:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles .wrap .links .columns {
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
left: calc(50% - 100px);
|
||||
}
|
||||
}
|
||||
article.bundles-info {
|
||||
background: #F3F6F9;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 170px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles-info {
|
||||
padding-top: 55px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
}
|
||||
article.bundles-info .wrap section {
|
||||
display: flex;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles-info .wrap section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
article.bundles-info .wrap section:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
article.bundles-info .wrap section aside {
|
||||
width: 240px;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-right: none;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
article.bundles-info .wrap section aside .active-link {
|
||||
display: none;
|
||||
height: 45px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #9099A9;
|
||||
font-size: 16px;
|
||||
}
|
||||
article.bundles-info .wrap section aside .active-link i {
|
||||
font-size: 8px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
article.bundles-info .wrap section aside nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
article.bundles-info .wrap section aside nav a {
|
||||
color: #9099A9;
|
||||
max-width: 240px;
|
||||
text-decoration: none;
|
||||
padding: 0 0 0 40px;
|
||||
border-bottom: 1px solid #DFE5EE;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles-info .wrap section aside nav a {
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
article.bundles-info .wrap section aside nav a.active,
|
||||
article.bundles-info .wrap section aside nav a:hover {
|
||||
background: #E9EEF5;
|
||||
}
|
||||
article.bundles-info .wrap section .content {
|
||||
position: relative;
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
article.bundles-info .wrap section .content .title {
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 205px;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top-right-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
article.bundles-info .wrap section .content .title .wrapper {
|
||||
width: 130px;
|
||||
height: 127px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
article.bundles-info .wrap section .content .title .wrapper .img {
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
article.bundles-info .wrap section .content .title .wrapper .img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info {
|
||||
max-width: 700px;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 291px;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: 5px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul {
|
||||
display: none;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 15px;
|
||||
margin: 0;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul.show {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul a {
|
||||
text-decoration: none;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul li {
|
||||
list-style: none;
|
||||
margin-top: 27px;
|
||||
min-width: 100px;
|
||||
max-width: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul li span {
|
||||
padding-left: 6px;
|
||||
font-size: 16px;
|
||||
color: #9099A9;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul.one-col {
|
||||
justify-content: center;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul.one-col li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon {
|
||||
margin-top: 90px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles-info .wrap section.coming-soon {
|
||||
justify-content: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
transition: 0.3s linear;
|
||||
text-decoration: none;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle.coming-soon,
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle.empty {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle .img {
|
||||
width: 170px;
|
||||
height: 70px;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle .img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle div.text {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #48505d;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
width: 245px;
|
||||
height: 55px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle.coming-soon {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle.coming-soon * {
|
||||
opacity: 0.3;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle.coming-soon div.text {
|
||||
display: flex;
|
||||
color: black;
|
||||
width: 100%;
|
||||
}
|
||||
article.bundles-info .wrap section.coming-soon .card .rectangle.empty {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
article.bundles-info .wrap section.coming-soon .card.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.bundles-info .wrap {
|
||||
padding: 0;
|
||||
}
|
||||
article.bundles-info .wrap section {
|
||||
flex-direction: column;
|
||||
}
|
||||
article.bundles-info .wrap section aside {
|
||||
width: 100%;
|
||||
}
|
||||
article.bundles-info .wrap section aside.left .active-link {
|
||||
display: flex;
|
||||
}
|
||||
article.bundles-info .wrap section aside.left nav {
|
||||
display: none;
|
||||
background: rgba(233, 238, 245, 0.8);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
align-items: center;
|
||||
}
|
||||
article.bundles-info .wrap section aside.left nav a {
|
||||
border: none;
|
||||
padding: 0 30px;
|
||||
}
|
||||
article.bundles-info .wrap section .content {
|
||||
width: 100%;
|
||||
height: 495px;
|
||||
}
|
||||
article.bundles-info .wrap section .content .info ul {
|
||||
padding: 16px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -1,856 +0,0 @@
|
||||
@import "../css/fonts.css";
|
||||
/* main colors*/
|
||||
/*bg_freenode*/
|
||||
/*bg_video*/
|
||||
/***************************************************************/
|
||||
/* Author: db0 (db0company@gmail.com, http://db0.fr/) */
|
||||
/* Sources/Licence: https://github.com/db0company/css-hexagon */
|
||||
/***************************************************************/
|
||||
/***************************************************************/
|
||||
/* Sizes */
|
||||
/***************************************************************/
|
||||
/* Extra Extra Small */
|
||||
.hexagon-xxs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 9.799999999999999px;
|
||||
margin: 7px 0;
|
||||
width: 24.24871130584px;
|
||||
height: 14px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xxs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xxs:before,
|
||||
.hexagon-xxs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 12.12435565292px solid transparent;
|
||||
border-right: 13.12435565292px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xxs:before {
|
||||
border-bottom: 7px solid #ebebeb;
|
||||
top: -7px;
|
||||
}
|
||||
.hexagon-xxs:after {
|
||||
border-top: 7px solid #ebebeb;
|
||||
bottom: -7px;
|
||||
}
|
||||
/* Extra Small */
|
||||
.hexagon-xs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 15.399999999999999px;
|
||||
margin: 11px 0;
|
||||
width: 38.10511776632px;
|
||||
height: 22px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xs:before,
|
||||
.hexagon-xs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 19.05255888316px solid transparent;
|
||||
border-right: 20.05255888316px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xs:before {
|
||||
border-bottom: 11px solid #ebebeb;
|
||||
top: -11px;
|
||||
}
|
||||
.hexagon-xs:after {
|
||||
border-top: 11px solid #ebebeb;
|
||||
bottom: -11px;
|
||||
}
|
||||
/* Small */
|
||||
.hexagon-sm {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 30.799999999999997px;
|
||||
margin: 22px 0;
|
||||
width: 76.21023553264px;
|
||||
height: 44px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-sm:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-sm:before,
|
||||
.hexagon-sm:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 38.10511776632px solid transparent;
|
||||
border-right: 39.10511776632px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-sm:before {
|
||||
border-bottom: 22px solid #ebebeb;
|
||||
top: -22px;
|
||||
}
|
||||
.hexagon-sm:after {
|
||||
border-top: 22px solid #ebebeb;
|
||||
bottom: -22px;
|
||||
}
|
||||
/* Medium */
|
||||
.hexagon-md {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 44.8px;
|
||||
margin: 32px 0;
|
||||
width: 110.85125168384px;
|
||||
height: 64px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-md:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-md:before,
|
||||
.hexagon-md:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 55.42562584192px solid transparent;
|
||||
border-right: 56.42562584192px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-md:before {
|
||||
border-bottom: 32px solid #ebebeb;
|
||||
top: -32px;
|
||||
}
|
||||
.hexagon-md:after {
|
||||
border-top: 32px solid #ebebeb;
|
||||
bottom: -32px;
|
||||
}
|
||||
/* Large */
|
||||
.hexagon-lg {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 61.599999999999994px;
|
||||
margin: 44px 0;
|
||||
width: 152.42047106528px;
|
||||
height: 88px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-lg:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-lg:before,
|
||||
.hexagon-lg:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 76.21023553264px solid transparent;
|
||||
border-right: 77.21023553264px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-lg:before {
|
||||
border-bottom: 44px solid #ebebeb;
|
||||
top: -44px;
|
||||
}
|
||||
.hexagon-lg:after {
|
||||
border-top: 44px solid #ebebeb;
|
||||
bottom: -44px;
|
||||
}
|
||||
/* Extra large */
|
||||
.hexagon-xl {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 84px;
|
||||
margin: 60px 0;
|
||||
width: 207.8460969072px;
|
||||
height: 120px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xl:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xl:before,
|
||||
.hexagon-xl:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 103.9230484536px solid transparent;
|
||||
border-right: 104.9230484536px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xl:before {
|
||||
border-bottom: 60px solid #ebebeb;
|
||||
top: -60px;
|
||||
}
|
||||
.hexagon-xl:after {
|
||||
border-top: 60px solid #ebebeb;
|
||||
bottom: -60px;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Colors */
|
||||
/***************************************************************/
|
||||
/* Default */
|
||||
.hexagon-default {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:before {
|
||||
border-bottom-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:after {
|
||||
border-top-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:before {
|
||||
border-bottom-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:after {
|
||||
border-top-color: #cccccc;
|
||||
}
|
||||
/* Primary */
|
||||
.hexagon-primary {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:before {
|
||||
border-bottom-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:after {
|
||||
border-top-color: #428bca;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover {
|
||||
background-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:before {
|
||||
border-bottom-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:after {
|
||||
border-top-color: #3276b1;
|
||||
}
|
||||
/* Success */
|
||||
.hexagon-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:before {
|
||||
border-bottom-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:after {
|
||||
border-top-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover {
|
||||
background-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:before {
|
||||
border-bottom-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:after {
|
||||
border-top-color: #47a447;
|
||||
}
|
||||
/* Info */
|
||||
.hexagon-info {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:before {
|
||||
border-bottom-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:after {
|
||||
border-top-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover {
|
||||
background-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:before {
|
||||
border-bottom-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:after {
|
||||
border-top-color: #39b3d7;
|
||||
}
|
||||
/* Warning */
|
||||
.hexagon-warning {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:before {
|
||||
border-bottom-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:after {
|
||||
border-top-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover {
|
||||
background-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:before {
|
||||
border-bottom-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:after {
|
||||
border-top-color: #ed9c28;
|
||||
}
|
||||
/* Danger */
|
||||
.hexagon-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:before {
|
||||
border-bottom-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:after {
|
||||
border-top-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover {
|
||||
background-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:before {
|
||||
border-bottom-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:after {
|
||||
border-top-color: #d2322d;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Inline */
|
||||
/***************************************************************/
|
||||
.hexagon-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
.link {
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: all;
|
||||
}
|
||||
.btn-socials {
|
||||
width: 200px;
|
||||
height: 58px;
|
||||
border: none;
|
||||
color: #fefefe;
|
||||
font-family: 'Roboto-Regular';
|
||||
font-size: 16px;
|
||||
letter-spacing: 1.2px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.btn-twitter {
|
||||
background: #24a8e6;
|
||||
}
|
||||
.btn-twitter:hover {
|
||||
background: #50b9eb;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-twitter:active {
|
||||
background: #1d86b8;
|
||||
}
|
||||
.btn-twitter.disabled {
|
||||
background: #addff6;
|
||||
}
|
||||
.btn-freenode {
|
||||
background: #cedd40;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-freenode:hover {
|
||||
background: #d8e466;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-freenode:active {
|
||||
background: #a5b133;
|
||||
}
|
||||
.btn-freenode.disabled {
|
||||
background: #eff4c2;
|
||||
}
|
||||
.btn-github {
|
||||
background: #333333;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-github:hover {
|
||||
background: #5c5c5c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-github:active {
|
||||
background: #292929;
|
||||
}
|
||||
.btn-github.disabled {
|
||||
background: #808080;
|
||||
}
|
||||
.btn-community {
|
||||
background: #9099a9;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-community:hover {
|
||||
background: #a6adba;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-community:active {
|
||||
background: #737a87;
|
||||
}
|
||||
.btn-community.disabled {
|
||||
background: #e6e8ec;
|
||||
}
|
||||
.btn-more-videos {
|
||||
background: #ee5499;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-more-videos:hover {
|
||||
background: #f176ad;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-more-videos:active {
|
||||
background: #be437a;
|
||||
}
|
||||
.btn-more-videos.disabled {
|
||||
background: #fcdfec;
|
||||
}
|
||||
.btn-copy {
|
||||
display: block;
|
||||
width: 76px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
font-family: 'Roboto-Bold';
|
||||
background: #ff743e;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 30px;
|
||||
}
|
||||
.btn-copy:hover {
|
||||
background: #ff9065;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-copy:active {
|
||||
background: #cc5d32;
|
||||
}
|
||||
.btn-copy.disabled {
|
||||
background: #ffe2d7;
|
||||
}
|
||||
.btn-interface {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
font-family: 'Roboto-Medium';
|
||||
background: #20b7ec;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 26px;
|
||||
-webkit-border-radius: 26px;
|
||||
-moz-border-radius: 26px;
|
||||
border-radius: 26px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.btn-interface:hover {
|
||||
background: #4dc5f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-interface:active {
|
||||
background: #1a92bd;
|
||||
}
|
||||
.btn-interface.disabled {
|
||||
background: #ade5f8;
|
||||
}
|
||||
.btn-soc-network {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-soc-network i {
|
||||
veritical-align: middle;
|
||||
}
|
||||
.link-tw {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #24a8e6;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-tw:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-tw:before,
|
||||
.link-tw:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-tw:before {
|
||||
border-bottom: 9px solid #24a8e6;
|
||||
top: -9px;
|
||||
}
|
||||
.link-tw:after {
|
||||
border-top: 9px solid #24a8e6;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-tw:hover {
|
||||
background-color: #50b9eb;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-tw:hover:before {
|
||||
border-bottom-color: #50b9eb;
|
||||
}
|
||||
.link-tw:hover:after {
|
||||
border-top-color: #50b9eb;
|
||||
}
|
||||
.link-tw:active {
|
||||
background-color: #1d86b8;
|
||||
}
|
||||
.link-tw:active:before {
|
||||
border-bottom-color: #1d86b8;
|
||||
}
|
||||
.link-tw:active:after {
|
||||
border-top-color: #1d86b8;
|
||||
}
|
||||
.link-tw.disabled {
|
||||
background-color: #addff6;
|
||||
}
|
||||
.link-tw.disabled:before {
|
||||
border-bottom-color: #addff6;
|
||||
}
|
||||
.link-tw.disabled:after {
|
||||
border-top-color: #addff6;
|
||||
}
|
||||
.link-tw i {
|
||||
font-size: 18px;
|
||||
}
|
||||
.link-google-plus {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #f24032;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-google-plus:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-google-plus:before,
|
||||
.link-google-plus:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-google-plus:before {
|
||||
border-bottom: 9px solid #f24032;
|
||||
top: -9px;
|
||||
}
|
||||
.link-google-plus:after {
|
||||
border-top: 9px solid #f24032;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-google-plus:hover {
|
||||
background-color: #f5665b;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-google-plus:hover:before {
|
||||
border-bottom-color: #f5665b;
|
||||
}
|
||||
.link-google-plus:hover:after {
|
||||
border-top-color: #f5665b;
|
||||
}
|
||||
.link-google-plus:active {
|
||||
background-color: #c23328;
|
||||
}
|
||||
.link-google-plus:active:before {
|
||||
border-bottom-color: #c23328;
|
||||
}
|
||||
.link-google-plus:active:after {
|
||||
border-top-color: #c23328;
|
||||
}
|
||||
.link-google-plus.disabled {
|
||||
background-color: #fbc6c2;
|
||||
}
|
||||
.link-google-plus.disabled:before {
|
||||
border-bottom-color: #fbc6c2;
|
||||
}
|
||||
.link-google-plus.disabled:after {
|
||||
border-top-color: #fbc6c2;
|
||||
}
|
||||
.link-google-plus i {
|
||||
font-size: 13px;
|
||||
}
|
||||
.link-fb {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #43609c;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-fb:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-fb:before,
|
||||
.link-fb:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-fb:before {
|
||||
border-bottom: 9px solid #43609c;
|
||||
top: -9px;
|
||||
}
|
||||
.link-fb:after {
|
||||
border-top: 9px solid #43609c;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-fb:hover {
|
||||
background-color: #6980b0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-fb:hover:before {
|
||||
border-bottom-color: #6980b0;
|
||||
}
|
||||
.link-fb:hover:after {
|
||||
border-top-color: #6980b0;
|
||||
}
|
||||
.link-fb:active {
|
||||
background-color: #364d7d;
|
||||
}
|
||||
.link-fb:active:before {
|
||||
border-bottom-color: #364d7d;
|
||||
}
|
||||
.link-fb:active:after {
|
||||
border-top-color: #364d7d;
|
||||
}
|
||||
.link-fb.disabled {
|
||||
background-color: #a1b3d7;
|
||||
}
|
||||
.link-fb.disabled:before {
|
||||
border-bottom-color: #a1b3d7;
|
||||
}
|
||||
.link-fb.disabled:after {
|
||||
border-top-color: #a1b3d7;
|
||||
}
|
||||
.link-fb i {
|
||||
font-size: 17px;
|
||||
}
|
||||
.link-youtube {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #fb0014;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-youtube:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-youtube:before,
|
||||
.link-youtube:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-youtube:before {
|
||||
border-bottom: 9px solid #fb0014;
|
||||
top: -9px;
|
||||
}
|
||||
.link-youtube:after {
|
||||
border-top: 9px solid #fb0014;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-youtube:hover {
|
||||
background-color: #fc3343;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-youtube:hover:before {
|
||||
border-bottom-color: #fc3343;
|
||||
}
|
||||
.link-youtube:hover:after {
|
||||
border-top-color: #fc3343;
|
||||
}
|
||||
.link-youtube:active {
|
||||
background-color: #c90010;
|
||||
}
|
||||
.link-youtube:active:before {
|
||||
border-bottom-color: #c90010;
|
||||
}
|
||||
.link-youtube:active:after {
|
||||
border-top-color: #c90010;
|
||||
}
|
||||
.link-youtube.disabled {
|
||||
background-color: #ff959d;
|
||||
}
|
||||
.link-youtube.disabled:before {
|
||||
border-bottom-color: #ff959d;
|
||||
}
|
||||
.link-youtube.disabled:after {
|
||||
border-top-color: #ff959d;
|
||||
}
|
||||
.link-youtube i {
|
||||
font-size: 17px;
|
||||
}
|
||||
.link-hexagon-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 300px auto;
|
||||
width: 519.615242268px;
|
||||
height: 300px;
|
||||
/*background: url(@image_url) center center;*/
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-hexagon-item .face1,
|
||||
.link-hexagon-item .face2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
/* Keeps borders smooth in webkit */
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.link-hexagon-item .face1:before,
|
||||
.link-hexagon-item .face2:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: inherit;
|
||||
}
|
||||
.link-hexagon-item .face1 {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.link-hexagon-item .face1:before {
|
||||
left: 0;
|
||||
transform-origin: left top;
|
||||
transform: rotate(-60deg) translate(-300px, 0);
|
||||
}
|
||||
.link-hexagon-item .face2 {
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
.link-hexagon-item .face2:before {
|
||||
right: 0;
|
||||
transform-origin: right top;
|
||||
transform: rotate(60deg) translate(300px, 0);
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 210px;
|
||||
margin: 150px 0;
|
||||
width: 519.615242268px;
|
||||
height: 300px;
|
||||
background-color: rgba(50, 52, 55, 0.85);
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:before,
|
||||
.link-hexagon-item:hover .hexagon-hover:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 259.807621134px solid transparent;
|
||||
border-right: 260.807621134px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:before {
|
||||
border-bottom: 150px solid rgba(50, 52, 55, 0.85);
|
||||
top: -150px;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:after {
|
||||
border-top: 150px solid rgba(50, 52, 55, 0.85);
|
||||
bottom: -150px;
|
||||
}
|
||||
.hexagon-hover > span {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-hover {
|
||||
display: none;
|
||||
}
|
||||
.wr-tringle {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
}
|
||||
.wr-tringle .i-triangle {
|
||||
margin-left: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-transform: scale(0.9999);
|
||||
border-left: 50vw solid transparent;
|
||||
border-right: 50vw solid transparent;
|
||||
border-top: 107px solid #ff0000;
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
/* main colors*/
|
||||
/*bg_freenode*/
|
||||
/*bg_video*/
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF7F4D;
|
||||
}
|
||||
article.examples {
|
||||
padding-top: 127px;
|
||||
padding-bottom: 93px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.examples {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
}
|
||||
article.examples .wrap p {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #9099A9;
|
||||
margin: 20px 0 73px 0;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.examples .wrap p {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
article.examples .hexagons {
|
||||
overflow-x: auto;
|
||||
}
|
||||
article.examples .hexagons-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -88px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
article.examples .hexagons-wrapper {
|
||||
margin-top: -46px;
|
||||
}
|
||||
}
|
||||
article.examples .hexagons-wrapper.row1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
article.examples .hexagons-wrapper .hexagon-wrapper {
|
||||
width: 310px;
|
||||
height: 356px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
article.examples .hexagons-wrapper .hexagon-wrapper {
|
||||
width: 160px;
|
||||
height: 184px;
|
||||
}
|
||||
}
|
||||
article.examples .hexagons-wrapper .hexagon-wrapper svg {
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
article.examples .hexagons-wrapper .hexagon-wrapper svg g.hover {
|
||||
opacity: 0;
|
||||
}
|
||||
article.examples .hexagons-wrapper .hexagon-wrapper.big svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
article.examples .hexagons-wrapper .hexagon-wrapper.big svg a image {
|
||||
filter: url(#blur);
|
||||
}
|
||||
article.examples .hexagons-wrapper .hexagon-wrapper.big svg a g.hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,334 +0,0 @@
|
||||
/***************************************************************/
|
||||
/* Author: db0 (db0company@gmail.com, http://db0.fr/) */
|
||||
/* Sources/Licence: https://github.com/db0company/css-hexagon */
|
||||
/***************************************************************/
|
||||
/***************************************************************/
|
||||
/* Sizes */
|
||||
/***************************************************************/
|
||||
/* Extra Extra Small */
|
||||
.hexagon-xxs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 9.799999999999999px;
|
||||
margin: 7px 0;
|
||||
width: 24.24871130584px;
|
||||
height: 14px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xxs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xxs:before,
|
||||
.hexagon-xxs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 12.12435565292px solid transparent;
|
||||
border-right: 13.12435565292px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xxs:before {
|
||||
border-bottom: 7px solid #ebebeb;
|
||||
top: -7px;
|
||||
}
|
||||
.hexagon-xxs:after {
|
||||
border-top: 7px solid #ebebeb;
|
||||
bottom: -7px;
|
||||
}
|
||||
/* Extra Small */
|
||||
.hexagon-xs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 15.399999999999999px;
|
||||
margin: 11px 0;
|
||||
width: 38.10511776632px;
|
||||
height: 22px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xs:before,
|
||||
.hexagon-xs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 19.05255888316px solid transparent;
|
||||
border-right: 20.05255888316px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xs:before {
|
||||
border-bottom: 11px solid #ebebeb;
|
||||
top: -11px;
|
||||
}
|
||||
.hexagon-xs:after {
|
||||
border-top: 11px solid #ebebeb;
|
||||
bottom: -11px;
|
||||
}
|
||||
/* Small */
|
||||
.hexagon-sm {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 30.799999999999997px;
|
||||
margin: 22px 0;
|
||||
width: 76.21023553264px;
|
||||
height: 44px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-sm:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-sm:before,
|
||||
.hexagon-sm:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 38.10511776632px solid transparent;
|
||||
border-right: 39.10511776632px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-sm:before {
|
||||
border-bottom: 22px solid #ebebeb;
|
||||
top: -22px;
|
||||
}
|
||||
.hexagon-sm:after {
|
||||
border-top: 22px solid #ebebeb;
|
||||
bottom: -22px;
|
||||
}
|
||||
/* Medium */
|
||||
.hexagon-md {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 44.8px;
|
||||
margin: 32px 0;
|
||||
width: 110.85125168384px;
|
||||
height: 64px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-md:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-md:before,
|
||||
.hexagon-md:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 55.42562584192px solid transparent;
|
||||
border-right: 56.42562584192px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-md:before {
|
||||
border-bottom: 32px solid #ebebeb;
|
||||
top: -32px;
|
||||
}
|
||||
.hexagon-md:after {
|
||||
border-top: 32px solid #ebebeb;
|
||||
bottom: -32px;
|
||||
}
|
||||
/* Large */
|
||||
.hexagon-lg {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 61.599999999999994px;
|
||||
margin: 44px 0;
|
||||
width: 152.42047106528px;
|
||||
height: 88px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-lg:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-lg:before,
|
||||
.hexagon-lg:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 76.21023553264px solid transparent;
|
||||
border-right: 77.21023553264px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-lg:before {
|
||||
border-bottom: 44px solid #ebebeb;
|
||||
top: -44px;
|
||||
}
|
||||
.hexagon-lg:after {
|
||||
border-top: 44px solid #ebebeb;
|
||||
bottom: -44px;
|
||||
}
|
||||
/* Extra large */
|
||||
.hexagon-xl {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 84px;
|
||||
margin: 60px 0;
|
||||
width: 207.8460969072px;
|
||||
height: 120px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xl:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xl:before,
|
||||
.hexagon-xl:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 103.9230484536px solid transparent;
|
||||
border-right: 104.9230484536px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xl:before {
|
||||
border-bottom: 60px solid #ebebeb;
|
||||
top: -60px;
|
||||
}
|
||||
.hexagon-xl:after {
|
||||
border-top: 60px solid #ebebeb;
|
||||
bottom: -60px;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Colors */
|
||||
/***************************************************************/
|
||||
/* Default */
|
||||
.hexagon-default {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:before {
|
||||
border-bottom-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:after {
|
||||
border-top-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:before {
|
||||
border-bottom-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:after {
|
||||
border-top-color: #cccccc;
|
||||
}
|
||||
/* Primary */
|
||||
.hexagon-primary {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:before {
|
||||
border-bottom-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:after {
|
||||
border-top-color: #428bca;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover {
|
||||
background-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:before {
|
||||
border-bottom-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:after {
|
||||
border-top-color: #3276b1;
|
||||
}
|
||||
/* Success */
|
||||
.hexagon-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:before {
|
||||
border-bottom-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:after {
|
||||
border-top-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover {
|
||||
background-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:before {
|
||||
border-bottom-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:after {
|
||||
border-top-color: #47a447;
|
||||
}
|
||||
/* Info */
|
||||
.hexagon-info {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:before {
|
||||
border-bottom-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:after {
|
||||
border-top-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover {
|
||||
background-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:before {
|
||||
border-bottom-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:after {
|
||||
border-top-color: #39b3d7;
|
||||
}
|
||||
/* Warning */
|
||||
.hexagon-warning {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:before {
|
||||
border-bottom-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:after {
|
||||
border-top-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover {
|
||||
background-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:before {
|
||||
border-bottom-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:after {
|
||||
border-top-color: #ed9c28;
|
||||
}
|
||||
/* Danger */
|
||||
.hexagon-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:before {
|
||||
border-bottom-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:after {
|
||||
border-top-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover {
|
||||
background-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:before {
|
||||
border-bottom-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:after {
|
||||
border-top-color: #d2322d;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Inline */
|
||||
/***************************************************************/
|
||||
.hexagon-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -1,608 +0,0 @@
|
||||
/* main colors*/
|
||||
/*bg_freenode*/
|
||||
/*bg_video*/
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF7F4D;
|
||||
}
|
||||
article.implementations {
|
||||
padding-top: 127px;
|
||||
padding-bottom: 93px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
}
|
||||
article.implementations .wrap p {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #9099A9;
|
||||
margin: 20px 0 73px 0;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations .wrap p {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
}
|
||||
article.implementations .wrap .links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations .wrap .links {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
article.implementations .wrap .links .active-link {
|
||||
display: none;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .copy-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .img {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .img img.node {
|
||||
width: 32px;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .img img.golang {
|
||||
width: 15px;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .img img.haskell {
|
||||
width: 25px;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .img img.java {
|
||||
width: 16px;
|
||||
}
|
||||
article.implementations .wrap .links .active-link .img img.python {
|
||||
width: 18px;
|
||||
}
|
||||
article.implementations .wrap .links .active-link span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
article.implementations .wrap .links .active-link i {
|
||||
margin-left: 5px;
|
||||
font-size: 8px;
|
||||
color: #9099A9;
|
||||
}
|
||||
article.implementations .wrap .links .active-link.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
article.implementations .wrap .links .active-link.inactive .img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
article.implementations .wrap .links .active-link.inactive span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
article.implementations .wrap .links .active-link:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations .wrap .links .active-link {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
article.implementations .wrap .links .columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column {
|
||||
border-right: 1px solid #F5F7FB;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column .link {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column .link .img {
|
||||
width: 30px;
|
||||
height: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column .link span {
|
||||
color: #31BDEE;
|
||||
font-size: 16px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column .link.inactive {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column .link.inactive .img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column .link.inactive span {
|
||||
color: #DFE5EE;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column .link:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col1 {
|
||||
padding: 0 40px 0 12px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col1 .img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col2 {
|
||||
padding: 0 40px 0 33px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col2 .img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col3 {
|
||||
padding: 0 42px 0 34px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col3 .img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col4 {
|
||||
padding: 0 0 0 33px;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column.col4 .img {
|
||||
margin-right: 0;
|
||||
}
|
||||
article.implementations .wrap .links .columns .column:last-child {
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations .wrap .links .columns .column {
|
||||
border: none;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations .wrap .links .columns {
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
main > .img {
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #F3F6F9;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
main > .img.fixed {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
}
|
||||
main > .img .cubes-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 46px;
|
||||
-webkit-transition: opacity 0.7s;
|
||||
-moz-transition: opacity 0.7s;
|
||||
-ms-transition: opacity 0.7s;
|
||||
-o-transition: opacity 0.7s;
|
||||
transition: opacity 0.7s;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.transports {
|
||||
top: -1px;
|
||||
left: 40px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.transports.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.stream-muxers {
|
||||
top: 11px;
|
||||
left: 61px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.stream-muxers.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.crypto-channels {
|
||||
width: 67px;
|
||||
top: 10px;
|
||||
left: 18px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.crypto-channels.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.connection-upgrades {
|
||||
width: 47px;
|
||||
top: 22px;
|
||||
left: -2px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.connection-upgrades.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.peer-routing {
|
||||
width: 65px;
|
||||
top: 36px;
|
||||
left: 21px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.peer-routing.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.record-stores {
|
||||
width: 46px;
|
||||
top: 34px;
|
||||
left: 61px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.record-stores.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.nat-traversal {
|
||||
width: 67px;
|
||||
top: 22px;
|
||||
left: 59px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.nat-traversal.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.discovery {
|
||||
width: 89px;
|
||||
top: 60px;
|
||||
left: 39px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.discovery.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.utils {
|
||||
width: 46px;
|
||||
top: 72px;
|
||||
left: 40px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.utils.show {
|
||||
opacity: 1;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.others {
|
||||
width: 66px;
|
||||
top: 87px;
|
||||
left: 40px;
|
||||
}
|
||||
main > .img .cubes-wrapper img.cubes.others.show {
|
||||
opacity: 1;
|
||||
}
|
||||
article.implementations-info {
|
||||
background: #F3F6F9;
|
||||
padding-top: 0;
|
||||
padding-bottom: 170px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section {
|
||||
margin-top: 270px;
|
||||
}
|
||||
article.implementations-info .wrap section#transports .img img.cubes {
|
||||
top: -1px;
|
||||
left: 39px;
|
||||
}
|
||||
article.implementations-info .wrap section#transports .table {
|
||||
height: 690px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#transports .table {
|
||||
height: 635px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#stream-muxers .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#stream-muxers .table {
|
||||
height: 370px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#stream-muxers .table {
|
||||
height: 313px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#crypto-channels .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#crypto-channels .table {
|
||||
height: 323px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#crypto-channels .table {
|
||||
height: 265px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#connection-upgrades .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#connection-upgrades .table {
|
||||
height: 383px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#connection-upgrades .table {
|
||||
height: 313px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#peer-routing .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#peer-routing .table {
|
||||
height: 415px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#peer-routing .table {
|
||||
height: 358px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#record-stores .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#record-stores .table {
|
||||
height: 369px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#record-stores .table {
|
||||
height: 313px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#nat-traversal .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#nat-traversal .table {
|
||||
height: 324px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#nat-traversal .table {
|
||||
height: 266px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#discovery .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#discovery .table {
|
||||
height: 415px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#discovery .table {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#utils .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#utils .table {
|
||||
height: 324px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#utils .table {
|
||||
height: 266px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section#others .img img.cubes {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
}
|
||||
article.implementations-info .wrap section#others .table {
|
||||
height: 415px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section#others .table {
|
||||
height: 359px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section .table {
|
||||
margin-top: 55px;
|
||||
position: relative;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
article.implementations-info .wrap section .table .title {
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top-right-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 12;
|
||||
}
|
||||
article.implementations-info .wrap section .table .title .wrapper {
|
||||
height: 127px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
article.implementations-info .wrap section .table .title .wrapper .header {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
font-size: 30px;
|
||||
color: #48505D;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info {
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: white;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-top: none;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info .table-wrapper {
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
margin-left: 240px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section .table .info .table-wrapper {
|
||||
margin-left: 170px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table {
|
||||
font-size: 16px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table *:hover {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr {
|
||||
height: 46px;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr.empty {
|
||||
height: 13px;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr.empty th {
|
||||
height: 13px !important;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr th {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #A9B0BC;
|
||||
border-right: 1px solid #DFE5EE;
|
||||
width: 99px;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section .table .info table tr th {
|
||||
padding-left: 17px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr th.head-col {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: auto;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 47px;
|
||||
width: 240px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section .table .info table tr th.head-col {
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr td {
|
||||
text-align: center;
|
||||
border-right: 1px solid #DFE5EE;
|
||||
line-height: 0;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr td a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr:not(.empty):not(.head-row):hover th {
|
||||
color: #21B7EC;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr:not(.empty):not(.head-row):hover td {
|
||||
background: #FCFCFD;
|
||||
border-top: 1px solid #DFE5EE;
|
||||
border-bottom: 1px solid #DFE5EE;
|
||||
border-right-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr:not(.empty):not(.head-row):hover td:last-child {
|
||||
border-right-color: #DFE5EE;
|
||||
}
|
||||
article.implementations-info .wrap section .table .info table tr:first-of-type th {
|
||||
text-align: center;
|
||||
font-family: Roboto-Regular, SansSerif;
|
||||
color: #9099A9;
|
||||
padding: 0;
|
||||
border-right: 1px solid #DFE5EE;
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
article.implementations-info .wrap section .table .description {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 53px;
|
||||
z-index: 10;
|
||||
}
|
||||
article.implementations-info .wrap section .table .description > div {
|
||||
margin-right: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
article.implementations-info .wrap section .table .description > div:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
article.implementations-info .wrap section .table .description > div i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
article.implementations-info .wrap section .table .description > div span {
|
||||
color: #9FA7B6;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
article.implementations-info .wrap section .table .description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,668 +0,0 @@
|
||||
/* main colors*/
|
||||
/*bg_freenode*/
|
||||
/*bg_video*/
|
||||
article {
|
||||
position: relative;
|
||||
}
|
||||
article > * {
|
||||
opacity: 0;
|
||||
}
|
||||
article.a-modular-network-stack > * {
|
||||
opacity: 1;
|
||||
}
|
||||
article.show > * {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 1s;
|
||||
-moz-transition: opacity 1s;
|
||||
-ms-transition: opacity 1s;
|
||||
-o-transition: opacity 1s;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
article.a-modular-network-stack {
|
||||
width: 100%;
|
||||
padding-bottom: 38px;
|
||||
padding-top: 0;
|
||||
}
|
||||
article.a-modular-network-stack .homepage-animation {
|
||||
width: 100%;
|
||||
max-height: 475px;
|
||||
min-height: 231px;
|
||||
height: 475px;
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
article.a-modular-network-stack .homepage-animation.static {
|
||||
display: flex;
|
||||
}
|
||||
article.a-modular-network-stack .homepage-animation #static-stage {
|
||||
display: none;
|
||||
width: 220px;
|
||||
height: 260px;
|
||||
}
|
||||
article.a-modular-network-stack .homepage-animation #static-stage.show {
|
||||
display: block;
|
||||
margin-top: 95px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.a-modular-network-stack .homepage-animation #static-stage {
|
||||
width: 115px;
|
||||
height: 135px;
|
||||
}
|
||||
article.a-modular-network-stack .homepage-animation #static-stage.show {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
article.a-modular-network-stack .wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
article.a-modular-network-stack .wrap h2 {
|
||||
opacity: 0;
|
||||
font-family: Roboto-Bold, SansSerif;
|
||||
font-size: 65px;
|
||||
line-height: 67px;
|
||||
letter-spacing: -0.3px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
-webkit-transition: opacity 1.5s;
|
||||
-moz-transition: opacity 1.5s;
|
||||
-ms-transition: opacity 1.5s;
|
||||
-o-transition: opacity 1.5s;
|
||||
transition: opacity 1.5s;
|
||||
}
|
||||
article.a-modular-network-stack .wrap h2 span:nth-child(1) {
|
||||
color: #A8539E;
|
||||
}
|
||||
article.a-modular-network-stack .wrap h2 span:nth-child(2) {
|
||||
color: #EF65A4;
|
||||
}
|
||||
article.a-modular-network-stack .wrap h2 span:nth-child(3) {
|
||||
color: #F9C234;
|
||||
}
|
||||
article.a-modular-network-stack .wrap h2 span:nth-child(4) {
|
||||
color: #CDDD40;
|
||||
}
|
||||
article.a-modular-network-stack .wrap p {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
font-size: 30px;
|
||||
color: #9099a9;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
line-height: 40px;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
-webkit-transition: all 1s;
|
||||
-moz-transition: all 1s;
|
||||
-ms-transition: all 1s;
|
||||
-o-transition: all 1s;
|
||||
transition: all 1s;
|
||||
}
|
||||
article.a-modular-network-stack .wrap p.show {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
}
|
||||
article.a-modular-network-stack .wrap .buttons {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
-webkit-transition: all 1s;
|
||||
-moz-transition: all 1s;
|
||||
-ms-transition: all 1s;
|
||||
-o-transition: all 1s;
|
||||
transition: all 1s;
|
||||
}
|
||||
article.a-modular-network-stack .wrap .buttons.show {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
}
|
||||
article.a-modular-network-stack .wrap .buttons a {
|
||||
margin-top: 29px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.a-modular-network-stack .wrap .buttons {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.a-modular-network-stack .homepage-animation {
|
||||
height: 231px;
|
||||
}
|
||||
article.a-modular-network-stack .wrap {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
article.a-modular-network-stack .wrap h2 {
|
||||
font-size: 37px;
|
||||
line-height: 42px;
|
||||
}
|
||||
article.a-modular-network-stack .wrap p {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-top: 21px;
|
||||
}
|
||||
article.a-modular-network-stack .wrap .buttons button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
article.features {
|
||||
background: #f3f6f9;
|
||||
padding-bottom: 180px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.features {
|
||||
padding-bottom: 88px;
|
||||
}
|
||||
}
|
||||
article.features .wrap {
|
||||
margin-top: 55px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
article.features .wrap .card {
|
||||
margin-bottom: 10px;
|
||||
width: 310px;
|
||||
height: 270px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
article.features .wrap .rectangle {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
height: 260px;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 9px;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
article.features .wrap .rectangle div {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #48505d;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
margin-top: 10px;
|
||||
width: 245px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
article.features .wrap .rectangle img {
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
-ms-transition: all 0.3s;
|
||||
-o-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
article.features .wrap .rectangle p {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
color: #A8ACB2;
|
||||
width: 260px;
|
||||
letter-spacing: -0.6px;
|
||||
line-height: 26px;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
-ms-transition: all 0.3s;
|
||||
-o-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
article.features .wrap .rectangle:hover {
|
||||
width: 310px;
|
||||
height: 270px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
article.features .wrap .rectangle:hover img {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
article.features .wrap .rectangle:hover p {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
margin: 2px 0 17px 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.features .wrap .rectangle {
|
||||
width: 160px;
|
||||
height: 140px;
|
||||
}
|
||||
article.features .wrap .rectangle:hover {
|
||||
width: 165px;
|
||||
height: 145px;
|
||||
}
|
||||
article.features .wrap .rectangle img {
|
||||
width: 92px;
|
||||
height: auto;
|
||||
}
|
||||
article.features .wrap .rectangle div {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
article.features .wrap .rectangle p {
|
||||
font-size: 8px;
|
||||
width: 150px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
article.features .wrap {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.features .wrap {
|
||||
margin-top: 40px;
|
||||
}
|
||||
article.features .wrap .card {
|
||||
width: 165px;
|
||||
height: 145px;
|
||||
}
|
||||
article.features .wrap .rectangle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
article.features .img1 {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
right: 15px;
|
||||
}
|
||||
article.features .img2 {
|
||||
position: absolute;
|
||||
bottom: 141px;
|
||||
left: 54px;
|
||||
}
|
||||
article.example {
|
||||
padding-bottom: 97px;
|
||||
}
|
||||
article.example .wrap {
|
||||
margin-top: 58px;
|
||||
}
|
||||
article.example .wrap img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
article.example img.img3 {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 74px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.example {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
article.implementations-in {
|
||||
background: white;
|
||||
padding-bottom: 177px;
|
||||
}
|
||||
article.implementations-in header h2 {
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
article.implementations-in .wrap {
|
||||
margin-top: 68px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
article.implementations-in .wrap .card {
|
||||
position: relative;
|
||||
width: 310px;
|
||||
height: 230px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle {
|
||||
width: 300px;
|
||||
height: 220px;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
border: 1px solid #DFE5EE;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 10px 1px #DFE5EE;
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-ms-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
text-decoration: none;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle .img-wrap {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle .img-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle:hover {
|
||||
width: 310px;
|
||||
height: 230px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon,
|
||||
article.implementations-in .wrap .card .rectangle.empty {
|
||||
width: 300px;
|
||||
height: 220px;
|
||||
cursor: default;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle div {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #48505d;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
margin-top: 10px;
|
||||
width: 245px;
|
||||
height: 55px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.index1 div {
|
||||
margin-top: 29px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.index2 div {
|
||||
margin-top: 3px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.index3 div {
|
||||
margin-top: 43px;
|
||||
width: 100%;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon * {
|
||||
opacity: 0.3;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon div {
|
||||
display: flex;
|
||||
color: black;
|
||||
font-family: Roboto-Bold;
|
||||
width: 100%;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.empty {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
article.implementations-in .wrap .card.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.implementations-in {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 85px;
|
||||
}
|
||||
article.implementations-in .wrap {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
article.implementations-in .wrap .card {
|
||||
width: 165px;
|
||||
height: 125px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle .img-wrap {
|
||||
top: 0;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle img {
|
||||
-webkit-transform: scale(0.55);
|
||||
-moz-transform: scale(0.55);
|
||||
-ms-transform: scale(0.55);
|
||||
-o-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.index3 img {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle:hover {
|
||||
width: 165px;
|
||||
height: 125px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon,
|
||||
article.implementations-in .wrap .card .rectangle.empty {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
cursor: default;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle div {
|
||||
font-size: 8px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.index1 div {
|
||||
margin-top: 2px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.index2 div {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
article.publications-talks {
|
||||
background: #f3f6f9;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
article.publications-talks .wrap {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
article.publications-talks .wrap iframe {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 620px;
|
||||
min-width: 300px;
|
||||
width: 620px;
|
||||
max-height: 350px;
|
||||
min-height: 200px;
|
||||
height: 350px;
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.publications-talks .wrap iframe {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
article.publications-talks .btn-more-videos {
|
||||
margin: 0 auto;
|
||||
}
|
||||
article.publications-talks .img6 {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 115px;
|
||||
}
|
||||
article.publications-talks .img7 {
|
||||
position: absolute;
|
||||
bottom: -120px;
|
||||
right: 15px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.publications-talks {
|
||||
padding-top: 62px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
article.publications-talks .wrap {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
article.community {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
article.community .wrap {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
article.community .wrap p {
|
||||
font-size: 17px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.5px;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #555C68;
|
||||
}
|
||||
article.community .wrap h6 {
|
||||
font-size: 30px;
|
||||
font-weight: 100;
|
||||
margin-top: 43px;
|
||||
margin-bottom: 19px;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #555C68;
|
||||
}
|
||||
article.community .wrap .buttons {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
article.community .wrap .buttons button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.community .wrap .buttons {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
article.community .persons {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-top: 82px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
article.community .persons .svg-wrapper {
|
||||
overflow-x: auto;
|
||||
height: 250px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
article.community .persons .svg-wrapper.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
article.community .persons .svg-wrapper use:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
article.community {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
article.community .wrap {
|
||||
margin-top: 42px;
|
||||
}
|
||||
}
|
||||
/* responsive */
|
||||
@media (max-width: 376px) {
|
||||
article.features .wrap {
|
||||
margin-top: 37px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
article.features .wrap .card {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
article.features .wrap .rectangle div {
|
||||
margin-top: 4px;
|
||||
}
|
||||
article.implementations-in {
|
||||
padding-top: 66px;
|
||||
}
|
||||
article.implementations-in .wrap {
|
||||
justify-content: space-between;
|
||||
}
|
||||
article.implementations-in .wrap .card {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon img {
|
||||
max-height: 50px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon.index2 img {
|
||||
max-height: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon.index3 img {
|
||||
max-height: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon.index4 img {
|
||||
max-height: 65px;
|
||||
}
|
||||
article.implementations-in .wrap .card .rectangle.coming-soon div {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
article.publications-talks {
|
||||
padding-top: 56px;
|
||||
}
|
||||
footer .wrap .copyright {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 357px) {
|
||||
article.implementations-in .wrap,
|
||||
article.features .wrap {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
@@ -1,979 +0,0 @@
|
||||
@import "../css/fonts.css";
|
||||
@import "../css/fonts.css";
|
||||
/* main colors*/
|
||||
/*bg_freenode*/
|
||||
/*bg_video*/
|
||||
/***************************************************************/
|
||||
/* Author: db0 (db0company@gmail.com, http://db0.fr/) */
|
||||
/* Sources/Licence: https://github.com/db0company/css-hexagon */
|
||||
/***************************************************************/
|
||||
/***************************************************************/
|
||||
/* Sizes */
|
||||
/***************************************************************/
|
||||
/* Extra Extra Small */
|
||||
.hexagon-xxs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 9.799999999999999px;
|
||||
margin: 7px 0;
|
||||
width: 24.24871130584px;
|
||||
height: 14px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xxs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xxs:before,
|
||||
.hexagon-xxs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 12.12435565292px solid transparent;
|
||||
border-right: 13.12435565292px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xxs:before {
|
||||
border-bottom: 7px solid #ebebeb;
|
||||
top: -7px;
|
||||
}
|
||||
.hexagon-xxs:after {
|
||||
border-top: 7px solid #ebebeb;
|
||||
bottom: -7px;
|
||||
}
|
||||
/* Extra Small */
|
||||
.hexagon-xs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 15.399999999999999px;
|
||||
margin: 11px 0;
|
||||
width: 38.10511776632px;
|
||||
height: 22px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xs:before,
|
||||
.hexagon-xs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 19.05255888316px solid transparent;
|
||||
border-right: 20.05255888316px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xs:before {
|
||||
border-bottom: 11px solid #ebebeb;
|
||||
top: -11px;
|
||||
}
|
||||
.hexagon-xs:after {
|
||||
border-top: 11px solid #ebebeb;
|
||||
bottom: -11px;
|
||||
}
|
||||
/* Small */
|
||||
.hexagon-sm {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 30.799999999999997px;
|
||||
margin: 22px 0;
|
||||
width: 76.21023553264px;
|
||||
height: 44px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-sm:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-sm:before,
|
||||
.hexagon-sm:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 38.10511776632px solid transparent;
|
||||
border-right: 39.10511776632px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-sm:before {
|
||||
border-bottom: 22px solid #ebebeb;
|
||||
top: -22px;
|
||||
}
|
||||
.hexagon-sm:after {
|
||||
border-top: 22px solid #ebebeb;
|
||||
bottom: -22px;
|
||||
}
|
||||
/* Medium */
|
||||
.hexagon-md {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 44.8px;
|
||||
margin: 32px 0;
|
||||
width: 110.85125168384px;
|
||||
height: 64px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-md:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-md:before,
|
||||
.hexagon-md:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 55.42562584192px solid transparent;
|
||||
border-right: 56.42562584192px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-md:before {
|
||||
border-bottom: 32px solid #ebebeb;
|
||||
top: -32px;
|
||||
}
|
||||
.hexagon-md:after {
|
||||
border-top: 32px solid #ebebeb;
|
||||
bottom: -32px;
|
||||
}
|
||||
/* Large */
|
||||
.hexagon-lg {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 61.599999999999994px;
|
||||
margin: 44px 0;
|
||||
width: 152.42047106528px;
|
||||
height: 88px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-lg:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-lg:before,
|
||||
.hexagon-lg:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 76.21023553264px solid transparent;
|
||||
border-right: 77.21023553264px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-lg:before {
|
||||
border-bottom: 44px solid #ebebeb;
|
||||
top: -44px;
|
||||
}
|
||||
.hexagon-lg:after {
|
||||
border-top: 44px solid #ebebeb;
|
||||
bottom: -44px;
|
||||
}
|
||||
/* Extra large */
|
||||
.hexagon-xl {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 84px;
|
||||
margin: 60px 0;
|
||||
width: 207.8460969072px;
|
||||
height: 120px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xl:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xl:before,
|
||||
.hexagon-xl:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 103.9230484536px solid transparent;
|
||||
border-right: 104.9230484536px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xl:before {
|
||||
border-bottom: 60px solid #ebebeb;
|
||||
top: -60px;
|
||||
}
|
||||
.hexagon-xl:after {
|
||||
border-top: 60px solid #ebebeb;
|
||||
bottom: -60px;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Colors */
|
||||
/***************************************************************/
|
||||
/* Default */
|
||||
.hexagon-default {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:before {
|
||||
border-bottom-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:after {
|
||||
border-top-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:before {
|
||||
border-bottom-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:after {
|
||||
border-top-color: #cccccc;
|
||||
}
|
||||
/* Primary */
|
||||
.hexagon-primary {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:before {
|
||||
border-bottom-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:after {
|
||||
border-top-color: #428bca;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover {
|
||||
background-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:before {
|
||||
border-bottom-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:after {
|
||||
border-top-color: #3276b1;
|
||||
}
|
||||
/* Success */
|
||||
.hexagon-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:before {
|
||||
border-bottom-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:after {
|
||||
border-top-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover {
|
||||
background-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:before {
|
||||
border-bottom-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:after {
|
||||
border-top-color: #47a447;
|
||||
}
|
||||
/* Info */
|
||||
.hexagon-info {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:before {
|
||||
border-bottom-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:after {
|
||||
border-top-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover {
|
||||
background-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:before {
|
||||
border-bottom-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:after {
|
||||
border-top-color: #39b3d7;
|
||||
}
|
||||
/* Warning */
|
||||
.hexagon-warning {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:before {
|
||||
border-bottom-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:after {
|
||||
border-top-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover {
|
||||
background-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:before {
|
||||
border-bottom-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:after {
|
||||
border-top-color: #ed9c28;
|
||||
}
|
||||
/* Danger */
|
||||
.hexagon-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:before {
|
||||
border-bottom-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:after {
|
||||
border-top-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover {
|
||||
background-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:before {
|
||||
border-bottom-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:after {
|
||||
border-top-color: #d2322d;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Inline */
|
||||
/***************************************************************/
|
||||
.hexagon-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
.link {
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: all;
|
||||
}
|
||||
.btn-socials {
|
||||
width: 200px;
|
||||
height: 58px;
|
||||
border: none;
|
||||
color: #fefefe;
|
||||
font-family: 'Roboto-Regular';
|
||||
font-size: 16px;
|
||||
letter-spacing: 1.2px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.btn-twitter {
|
||||
background: #24a8e6;
|
||||
}
|
||||
.btn-twitter:hover {
|
||||
background: #50b9eb;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-twitter:active {
|
||||
background: #1d86b8;
|
||||
}
|
||||
.btn-twitter.disabled {
|
||||
background: #addff6;
|
||||
}
|
||||
.btn-freenode {
|
||||
background: #cedd40;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-freenode:hover {
|
||||
background: #d8e466;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-freenode:active {
|
||||
background: #a5b133;
|
||||
}
|
||||
.btn-freenode.disabled {
|
||||
background: #eff4c2;
|
||||
}
|
||||
.btn-github {
|
||||
background: #333333;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-github:hover {
|
||||
background: #5c5c5c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-github:active {
|
||||
background: #292929;
|
||||
}
|
||||
.btn-github.disabled {
|
||||
background: #808080;
|
||||
}
|
||||
.btn-community {
|
||||
background: #9099a9;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-community:hover {
|
||||
background: #a6adba;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-community:active {
|
||||
background: #737a87;
|
||||
}
|
||||
.btn-community.disabled {
|
||||
background: #e6e8ec;
|
||||
}
|
||||
.btn-more-videos {
|
||||
background: #ee5499;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn-more-videos:hover {
|
||||
background: #f176ad;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-more-videos:active {
|
||||
background: #be437a;
|
||||
}
|
||||
.btn-more-videos.disabled {
|
||||
background: #fcdfec;
|
||||
}
|
||||
.btn-copy {
|
||||
display: block;
|
||||
width: 76px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
font-family: 'Roboto-Bold';
|
||||
background: #ff743e;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 30px;
|
||||
}
|
||||
.btn-copy:hover {
|
||||
background: #ff9065;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-copy:active {
|
||||
background: #cc5d32;
|
||||
}
|
||||
.btn-copy.disabled {
|
||||
background: #ffe2d7;
|
||||
}
|
||||
.btn-interface {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
font-family: 'Roboto-Medium';
|
||||
background: #20b7ec;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 26px;
|
||||
-webkit-border-radius: 26px;
|
||||
-moz-border-radius: 26px;
|
||||
border-radius: 26px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.btn-interface:hover {
|
||||
background: #4dc5f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-interface:active {
|
||||
background: #1a92bd;
|
||||
}
|
||||
.btn-interface.disabled {
|
||||
background: #ade5f8;
|
||||
}
|
||||
.btn-soc-network {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-soc-network i {
|
||||
veritical-align: middle;
|
||||
}
|
||||
.link-tw {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #24a8e6;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-tw:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-tw:before,
|
||||
.link-tw:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-tw:before {
|
||||
border-bottom: 9px solid #24a8e6;
|
||||
top: -9px;
|
||||
}
|
||||
.link-tw:after {
|
||||
border-top: 9px solid #24a8e6;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-tw:hover {
|
||||
background-color: #50b9eb;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-tw:hover:before {
|
||||
border-bottom-color: #50b9eb;
|
||||
}
|
||||
.link-tw:hover:after {
|
||||
border-top-color: #50b9eb;
|
||||
}
|
||||
.link-tw:active {
|
||||
background-color: #1d86b8;
|
||||
}
|
||||
.link-tw:active:before {
|
||||
border-bottom-color: #1d86b8;
|
||||
}
|
||||
.link-tw:active:after {
|
||||
border-top-color: #1d86b8;
|
||||
}
|
||||
.link-tw.disabled {
|
||||
background-color: #addff6;
|
||||
}
|
||||
.link-tw.disabled:before {
|
||||
border-bottom-color: #addff6;
|
||||
}
|
||||
.link-tw.disabled:after {
|
||||
border-top-color: #addff6;
|
||||
}
|
||||
.link-tw i {
|
||||
font-size: 18px;
|
||||
}
|
||||
.link-google-plus {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #f24032;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-google-plus:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-google-plus:before,
|
||||
.link-google-plus:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-google-plus:before {
|
||||
border-bottom: 9px solid #f24032;
|
||||
top: -9px;
|
||||
}
|
||||
.link-google-plus:after {
|
||||
border-top: 9px solid #f24032;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-google-plus:hover {
|
||||
background-color: #f5665b;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-google-plus:hover:before {
|
||||
border-bottom-color: #f5665b;
|
||||
}
|
||||
.link-google-plus:hover:after {
|
||||
border-top-color: #f5665b;
|
||||
}
|
||||
.link-google-plus:active {
|
||||
background-color: #c23328;
|
||||
}
|
||||
.link-google-plus:active:before {
|
||||
border-bottom-color: #c23328;
|
||||
}
|
||||
.link-google-plus:active:after {
|
||||
border-top-color: #c23328;
|
||||
}
|
||||
.link-google-plus.disabled {
|
||||
background-color: #fbc6c2;
|
||||
}
|
||||
.link-google-plus.disabled:before {
|
||||
border-bottom-color: #fbc6c2;
|
||||
}
|
||||
.link-google-plus.disabled:after {
|
||||
border-top-color: #fbc6c2;
|
||||
}
|
||||
.link-google-plus i {
|
||||
font-size: 13px;
|
||||
}
|
||||
.link-fb {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #43609c;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-fb:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-fb:before,
|
||||
.link-fb:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-fb:before {
|
||||
border-bottom: 9px solid #43609c;
|
||||
top: -9px;
|
||||
}
|
||||
.link-fb:after {
|
||||
border-top: 9px solid #43609c;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-fb:hover {
|
||||
background-color: #6980b0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-fb:hover:before {
|
||||
border-bottom-color: #6980b0;
|
||||
}
|
||||
.link-fb:hover:after {
|
||||
border-top-color: #6980b0;
|
||||
}
|
||||
.link-fb:active {
|
||||
background-color: #364d7d;
|
||||
}
|
||||
.link-fb:active:before {
|
||||
border-bottom-color: #364d7d;
|
||||
}
|
||||
.link-fb:active:after {
|
||||
border-top-color: #364d7d;
|
||||
}
|
||||
.link-fb.disabled {
|
||||
background-color: #a1b3d7;
|
||||
}
|
||||
.link-fb.disabled:before {
|
||||
border-bottom-color: #a1b3d7;
|
||||
}
|
||||
.link-fb.disabled:after {
|
||||
border-top-color: #a1b3d7;
|
||||
}
|
||||
.link-fb i {
|
||||
font-size: 17px;
|
||||
}
|
||||
.link-youtube {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12.6px;
|
||||
margin: 9px 0;
|
||||
width: 31.17691453608px;
|
||||
height: 18px;
|
||||
background-color: #fb0014;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-youtube:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-youtube:before,
|
||||
.link-youtube:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 15.58845726804px solid transparent;
|
||||
border-right: 16.588457268040003px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-youtube:before {
|
||||
border-bottom: 9px solid #fb0014;
|
||||
top: -9px;
|
||||
}
|
||||
.link-youtube:after {
|
||||
border-top: 9px solid #fb0014;
|
||||
bottom: -9px;
|
||||
}
|
||||
.link-youtube:hover {
|
||||
background-color: #fc3343;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-youtube:hover:before {
|
||||
border-bottom-color: #fc3343;
|
||||
}
|
||||
.link-youtube:hover:after {
|
||||
border-top-color: #fc3343;
|
||||
}
|
||||
.link-youtube:active {
|
||||
background-color: #c90010;
|
||||
}
|
||||
.link-youtube:active:before {
|
||||
border-bottom-color: #c90010;
|
||||
}
|
||||
.link-youtube:active:after {
|
||||
border-top-color: #c90010;
|
||||
}
|
||||
.link-youtube.disabled {
|
||||
background-color: #ff959d;
|
||||
}
|
||||
.link-youtube.disabled:before {
|
||||
border-bottom-color: #ff959d;
|
||||
}
|
||||
.link-youtube.disabled:after {
|
||||
border-top-color: #ff959d;
|
||||
}
|
||||
.link-youtube i {
|
||||
font-size: 17px;
|
||||
}
|
||||
.link-hexagon-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 300px auto;
|
||||
width: 519.615242268px;
|
||||
height: 300px;
|
||||
/*background: url(@image_url) center center;*/
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-hexagon-item .face1,
|
||||
.link-hexagon-item .face2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
/* Keeps borders smooth in webkit */
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.link-hexagon-item .face1:before,
|
||||
.link-hexagon-item .face2:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: inherit;
|
||||
}
|
||||
.link-hexagon-item .face1 {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.link-hexagon-item .face1:before {
|
||||
left: 0;
|
||||
transform-origin: left top;
|
||||
transform: rotate(-60deg) translate(-300px, 0);
|
||||
}
|
||||
.link-hexagon-item .face2 {
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
.link-hexagon-item .face2:before {
|
||||
right: 0;
|
||||
transform-origin: right top;
|
||||
transform: rotate(60deg) translate(300px, 0);
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 210px;
|
||||
margin: 150px 0;
|
||||
width: 519.615242268px;
|
||||
height: 300px;
|
||||
background-color: rgba(50, 52, 55, 0.85);
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:before,
|
||||
.link-hexagon-item:hover .hexagon-hover:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 259.807621134px solid transparent;
|
||||
border-right: 260.807621134px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:before {
|
||||
border-bottom: 150px solid rgba(50, 52, 55, 0.85);
|
||||
top: -150px;
|
||||
}
|
||||
.link-hexagon-item:hover .hexagon-hover:after {
|
||||
border-top: 150px solid rgba(50, 52, 55, 0.85);
|
||||
bottom: -150px;
|
||||
}
|
||||
.hexagon-hover > span {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-hover {
|
||||
display: none;
|
||||
}
|
||||
.wr-tringle {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
}
|
||||
.wr-tringle .i-triangle {
|
||||
margin-left: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-transform: scale(0.9999);
|
||||
border-left: 50vw solid transparent;
|
||||
border-right: 50vw solid transparent;
|
||||
border-top: 107px solid #ff0000;
|
||||
}
|
||||
body > header .wrap nav ul li a.active {
|
||||
color: #FF7F4D;
|
||||
}
|
||||
.pseudo-header {
|
||||
height: 70px;
|
||||
}
|
||||
main {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
main > .wrap {
|
||||
margin-top: 63px;
|
||||
}
|
||||
.title-page {
|
||||
font-family: Roboto-Black, SansSerif;
|
||||
font-size: 64px;
|
||||
line-height: 67px;
|
||||
letter-spacing: -0.3px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #474f5c;
|
||||
}
|
||||
.about-part {
|
||||
margin-top: 25px;
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
color: #8F99A9;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap-videos {
|
||||
margin-top: 95px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.item-video {
|
||||
width: 300px;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.item-video.last-elment {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@media (max-width: 667px) {
|
||||
.item-video.last-elment {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.item-video.last-elment > div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
height: 200px;
|
||||
background: url(../img/img6.png) center center no-repeat;
|
||||
}
|
||||
.item-video p {
|
||||
font-family: Roboto-Light, SansSerif;
|
||||
font-size: 16px;
|
||||
color: #474f5c;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.video-container {
|
||||
display: flex;
|
||||
height: 206px;
|
||||
width: 310px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.video-container iframe {
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: none;
|
||||
display: flex;
|
||||
transition: 0.3s linear;
|
||||
}
|
||||
.video-container:hover iframe {
|
||||
height: 206px;
|
||||
width: 310px;
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
.wrap-videos {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.pseudo-header {
|
||||
height: 0;
|
||||
}
|
||||
main > .wrap {
|
||||
margin-top: 46px;
|
||||
}
|
||||
.about-part {
|
||||
margin-top: 8px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.title-page {
|
||||
font-size: 36px;
|
||||
}
|
||||
.about-part {
|
||||
font-size: 20px;
|
||||
}
|
||||
.item-video {
|
||||
width: 300px;
|
||||
}
|
||||
.video-container iframe {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
@@ -1,339 +0,0 @@
|
||||
/***************************************************************/
|
||||
/* Author: db0 (db0company@gmail.com, http://db0.fr/) */
|
||||
/* Sources/Licence: https://github.com/db0company/css-hexagon */
|
||||
/***************************************************************/
|
||||
/***************************************************************/
|
||||
/* Sizes */
|
||||
/***************************************************************/
|
||||
/* Extra Extra Small */
|
||||
.hexagon-xxs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 9.799999999999999px;
|
||||
margin: 7px 0;
|
||||
width: 24.24871130584px;
|
||||
height: 14px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xxs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xxs:before,
|
||||
.hexagon-xxs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 12.12435565292px solid transparent;
|
||||
border-right: 13.12435565292px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xxs:before {
|
||||
border-bottom: 7px solid #ebebeb;
|
||||
top: -7px;
|
||||
}
|
||||
.hexagon-xxs:after {
|
||||
border-top: 7px solid #ebebeb;
|
||||
bottom: -7px;
|
||||
}
|
||||
/* Extra Small */
|
||||
.hexagon-xs {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 15.399999999999999px;
|
||||
margin: 11px 0;
|
||||
width: 38.10511776632px;
|
||||
height: 22px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xs:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xs:before,
|
||||
.hexagon-xs:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 19.05255888316px solid transparent;
|
||||
border-right: 20.05255888316px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xs:before {
|
||||
border-bottom: 11px solid #ebebeb;
|
||||
top: -11px;
|
||||
}
|
||||
.hexagon-xs:after {
|
||||
border-top: 11px solid #ebebeb;
|
||||
bottom: -11px;
|
||||
}
|
||||
/* Small */
|
||||
.hexagon-sm {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 30.799999999999997px;
|
||||
margin: 22px 0;
|
||||
width: 76.21023553264px;
|
||||
height: 44px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-sm:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-sm:before,
|
||||
.hexagon-sm:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 38.10511776632px solid transparent;
|
||||
border-right: 39.10511776632px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-sm:before {
|
||||
border-bottom: 22px solid #ebebeb;
|
||||
top: -22px;
|
||||
}
|
||||
.hexagon-sm:after {
|
||||
border-top: 22px solid #ebebeb;
|
||||
bottom: -22px;
|
||||
}
|
||||
/* Medium */
|
||||
.hexagon-md {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 44.8px;
|
||||
margin: 32px 0;
|
||||
width: 110.85125168384px;
|
||||
height: 64px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-md:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-md:before,
|
||||
.hexagon-md:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 55.42562584192px solid transparent;
|
||||
border-right: 56.42562584192px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-md:before {
|
||||
border-bottom: 32px solid #ebebeb;
|
||||
top: -32px;
|
||||
}
|
||||
.hexagon-md:after {
|
||||
border-top: 32px solid #ebebeb;
|
||||
bottom: -32px;
|
||||
}
|
||||
/* Large */
|
||||
.hexagon-lg {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 61.599999999999994px;
|
||||
margin: 44px 0;
|
||||
width: 152.42047106528px;
|
||||
height: 88px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-lg:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-lg:before,
|
||||
.hexagon-lg:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 76.21023553264px solid transparent;
|
||||
border-right: 77.21023553264px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-lg:before {
|
||||
border-bottom: 44px solid #ebebeb;
|
||||
top: -44px;
|
||||
}
|
||||
.hexagon-lg:after {
|
||||
border-top: 44px solid #ebebeb;
|
||||
bottom: -44px;
|
||||
}
|
||||
/* Extra large */
|
||||
.hexagon-xl {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 84px;
|
||||
margin: 60px 0;
|
||||
width: 207.8460969072px;
|
||||
height: 120px;
|
||||
background-color: #ebebeb;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.hexagon-xl:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hexagon-xl:before,
|
||||
.hexagon-xl:after {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 103.9230484536px solid transparent;
|
||||
border-right: 104.9230484536px solid transparent;
|
||||
left: 0;
|
||||
}
|
||||
.hexagon-xl:before {
|
||||
border-bottom: 60px solid #ebebeb;
|
||||
top: -60px;
|
||||
}
|
||||
.hexagon-xl:after {
|
||||
border-top: 60px solid #ebebeb;
|
||||
bottom: -60px;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Colors */
|
||||
/***************************************************************/
|
||||
/* Default */
|
||||
.hexagon-default {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:before {
|
||||
border-bottom-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default:after {
|
||||
border-top-color: #ebebeb;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:before {
|
||||
border-bottom-color: #cccccc;
|
||||
}
|
||||
.hexagon-default.hexagon-hover:hover:after {
|
||||
border-top-color: #cccccc;
|
||||
}
|
||||
/* Primary */
|
||||
.hexagon-primary {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:before {
|
||||
border-bottom-color: #428bca;
|
||||
}
|
||||
.hexagon-primary:after {
|
||||
border-top-color: #428bca;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover {
|
||||
background-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:before {
|
||||
border-bottom-color: #3276b1;
|
||||
}
|
||||
.hexagon-primary.hexagon-hover:hover:after {
|
||||
border-top-color: #3276b1;
|
||||
}
|
||||
/* Success */
|
||||
.hexagon-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:before {
|
||||
border-bottom-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success:after {
|
||||
border-top-color: #5cb85c;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover {
|
||||
background-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:before {
|
||||
border-bottom-color: #47a447;
|
||||
}
|
||||
.hexagon-success.hexagon-hover:hover:after {
|
||||
border-top-color: #47a447;
|
||||
}
|
||||
/* Info */
|
||||
.hexagon-info {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:before {
|
||||
border-bottom-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info:after {
|
||||
border-top-color: #5bc0de;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover {
|
||||
background-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:before {
|
||||
border-bottom-color: #39b3d7;
|
||||
}
|
||||
.hexagon-info.hexagon-hover:hover:after {
|
||||
border-top-color: #39b3d7;
|
||||
}
|
||||
/* Warning */
|
||||
.hexagon-warning {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:before {
|
||||
border-bottom-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning:after {
|
||||
border-top-color: #f0ad4e;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover {
|
||||
background-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:before {
|
||||
border-bottom-color: #ed9c28;
|
||||
}
|
||||
.hexagon-warning.hexagon-hover:hover:after {
|
||||
border-top-color: #ed9c28;
|
||||
}
|
||||
/* Danger */
|
||||
.hexagon-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:before {
|
||||
border-bottom-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger:after {
|
||||
border-top-color: #d9534f;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover {
|
||||
background-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:before {
|
||||
border-bottom-color: #d2322d;
|
||||
}
|
||||
.hexagon-danger.hexagon-hover:hover:after {
|
||||
border-top-color: #d2322d;
|
||||
}
|
||||
/***************************************************************/
|
||||
/* Inline */
|
||||
/***************************************************************/
|
||||
.hexagon-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
.link {
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: all;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,3 +0,0 @@
|
||||
/* main colors*/
|
||||
/*bg_freenode*/
|
||||
/*bg_video*/
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 751 KiB After Width: | Height: | Size: 586 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 378 KiB After Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 386 KiB After Width: | Height: | Size: 325 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 766 KiB After Width: | Height: | Size: 618 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 951 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 3.9 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user