Skip to content

Commit

Permalink
chore: set-up generator, styles, indexes
Browse files Browse the repository at this point in the history
Co-authored-by: Robin Berjon <[email protected]>
  • Loading branch information
hacdias and darobin committed Mar 17, 2023
1 parent b4e1652 commit b228af5
Show file tree
Hide file tree
Showing 14 changed files with 636 additions and 2 deletions.
6 changes: 6 additions & 0 deletions .config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"input": "src",
"output": "out",
"template": "template.html",
"baseURL": "https://specs.ipfs.tech"
}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
out/
13 changes: 12 additions & 1 deletion Makefile
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
all: superlinter
SPEC_GENERATOR_VER=v1.1.2

all: website

clean:
rm -rf ./out

website: clean
npx spec-generator@$(SPEC_GENERATOR_VER) -c .config.json

watch: clean
npx spec-generator@$(SPEC_GENERATOR_VER) -c .config.json -w

superlinter:
docker run --rm -e VALIDATE_ALL_CODEBASE=false -e RUN_LOCAL=true -e VALIDATE_MARKDOWN=true -e MARKDOWN_CONFIG_FILE=".markdownlint.json" -e LINTER_RULES_PATH="." -v $(shell pwd):/tmp/lint github/super-linter:v4
16 changes: 16 additions & 0 deletions src/_includes/footer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
</body>
<footer>
<div>
<p>
<a href="https://ipfs.tech/"><img src="/img/ipfs.svg" width="20" height="20" alt="IPFS logo"> IPFS</a>
<a href="https://ipld.io/"><img src="/img/ipld.svg" width="20" height="20" alt="IPLD logo"> IPLD</a>
<a href="https://libp2p.io/"><img src="/img/libp2p.png" width="20" height="20" alt="libp2p logo"> libp2p</a>
<a href="https://multiformats.io/"><img src="/img/multiformats.svg" width="20" height="20" alt="Multiformats logo"> Multiformats</a>
</p>
</div>
</footer>
</body>
</html>
11 changes: 11 additions & 0 deletions src/_includes/head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>{% if title != 'Home' %}{{ title }} | {% endif %}IPFS Standards</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/ipseity.min.css">
<link rel="icon" href="/img/ipfs-standards.svg">
</head>
<body>
15 changes: 15 additions & 0 deletions src/_includes/header.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{% include 'head.html' %}

<nav>
<div>
<img src="/img/ipfs-standards.svg" alt="Interplanetary Standards Logo" width="25" height="25" class="logo">
<a href="/">IPFS Standards</a>
</div>
</nav>

<header>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</header>
166 changes: 166 additions & 0 deletions src/css/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@

body {
margin: 0;
padding: 0;
font-size: 1rem;
line-height: 1.5;
font-family: var(--body-family);
font-weight: 300;
}

nav {
background: var(--ipfs-gradient-0-background-image);
}
nav > div {
max-width: var(--max-page-width);
margin: 0 auto;
padding: 1rem 1rem;
}
nav img,
nav a {
vertical-align: middle;
}
nav a {
color: var(--ipfs-off-white);
text-decoration: none;
/* font-size: var(--size-h5); */
font-weight: var(--weight-semi-bold);
}

header {
background: var(--ipfs-brand-gradient);
}
header > div {
max-width: var(--max-page-width);
margin: 0 auto;
padding: 3rem 1rem;
}
header h1 {
font-size: var(--size-h2);
font-weight: var(--weight-semi-bold);
margin-top: 0;
line-height: 1;
color: var(--ipfs-off-white);
}
header img.logo {
margin-bottom: 2rem;
}
header p {
color: var(--ipfs-off-white);
max-width: var(--max-readable-width);
}

main {
max-width: var(--max-page-width);
margin: 4rem auto 0;
padding: 0 1rem;
}

.basic-grid {
display: grid;
column-gap: 4rem;
row-gap: 4rem;
grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 640px) {
.basic-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}

h2.pitch-title {
color: var(--fg);
text-align: center;
margin-top: 9rem;
font-weight: var(--weight-regular);
font-size: var(--size-h2);
margin-bottom: 1rem;
line-height: 1;
}
.pitch-subtitle {
text-align: center;
font-size: var(--size-h5);
font-weight: var(--weight-light);
margin-bottom: 4rem;
line-height: 1.2;
}
.pitch {
background: var(--stark-bg);
color: var(--stark-fg);
padding: 0 1rem;
}
.pitch h3 {
text-align: center;
margin-bottom: 1rem;
}
.pitch h3::after {
width: 3rem;
height: 0.5rem;
background: var(--ipfs-teal);
display: block;
content: " ";
margin: 0.5rem auto;
}

main > section {
margin-top: 9rem;
}
h2 {
font-size: var(--size-h2);
font-weight: var(--weight-semi-bold);
margin-bottom: 1rem;
}
main > section section {
background: var(--stark-bg);
color: var(--stark-fg);
padding: 0 1rem;
}
h3 {
font-size: var(--size-h3);
font-weight: var(--weight-semi-bold);
margin-bottom: 1rem;
}
h3 a {
color: inherit;
}

a {
color: var(--highlight-colour);
transition: color 0.2s;
}
a:hover {
color: var(--ipfs-yellow);
}
dt {
font-style: normal;
font-weight: bold;
}
dt a {
text-decoration-color: var(--ipfs-stone-grey);
display: block;
}
dd {
font-style: normal;
margin-left: 1rem;
margin-bottom: .6rem;
}


footer {
margin-top: 4rem;
text-align: center;
color: var(--ipfs-ash-grey);
background: var(--stark-bg);
border-top: 1px solid var(--ipfs-jade);
}
footer > div {
max-width: var(--max-page-width);
margin: 0 auto;
padding: 1rem 1rem 3rem 1rem;
}
footer a {
text-decoration: none;
}
footer img {
vertical-align: text-bottom;
}
131 changes: 131 additions & 0 deletions src/css/specs.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@


:root {
--size-mono: 0.9em;
}

body {
max-width: var(--max-readable-width);
margin: 0 auto;
padding: 0 0 0 0;
line-height: 1.5;
}

#ipseity-back-to-root {
margin-bottom: 2rem;
background: var(--standard-gradient);
padding-left: 1rem;
font-weight: 600;
font-size: 0.9rem;
}

#ipseity-back-to-root a {
color: var(--ipfs-off-white);
text-decoration: none;
transition: color 0.2s;
}

#ipseity-back-to-root a:hover {
color: var(--ipfs-yellow);
}

header {
background-image: url(/img/ipfs-standards.svg);
background-repeat: no-repeat;
background-size: 100px;
background-position-x: right;
margin-bottom: 3rem;
border-bottom: 0.25rem solid var(--ipfs-turquoise);
padding-bottom: 2rem;
}

header dt {
font-weight: var(--weight-regular);
text-decoration: underline;
}

header dd img {
opacity: 0.5;
transition: opacity .5s;
background: var(--contrast-bg);
border-radius: 2px;
vertical-align: sub;
}

header dd img:hover {
opacity: 1;
}

header dd a {
text-decoration: none;
}

h1 {
max-width: calc(100% - (100px + 1rem));
font-weight: var(--weight-semi-bold);
line-height: 1;
margin: 0.15rem 0 0 0;
}

h2, h3, h4, h5, h6 {
margin: 3rem 0 0 0;
font-weight: var(--weight-semi-bold);
}

:is(h2, h3, h4, h5, h6) bdi.secno {
color: var(--ipfs-ash-grey);
}

p#last-modified {
color: var(--ipfs-ash-grey);
margin-top: 0rem;
font-size: 1.6rem;
}

p {
margin: 1rem 0;
}

.header-wrapper {
display: flex;
align-items: baseline;
}

.header-wrapper + section > .header-wrapper > :is(h3, h4, h5, h6) {
margin-top: 1rem;
}

.self-link::after {
color: var(--ipfs-ash-grey);
}

.self-link:hover::after {
color: var(--ipfs-yellow);
}

@media only screen and (max-width: 816px) {
body {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1rem;
}

#ipseity-back-to-root {
margin: 0 -1rem 2rem -1rem;
}

header {
background-size: 50px;
}

p#last-modified {
margin-top: -0.8rem;
font-size: 1.2rem;
}
}

@media print {
body {
font-size: 1rem;
}
}
Loading

0 comments on commit b228af5

Please sign in to comment.