initial version

This commit is contained in:
Mahdi Dibaiee 2021-10-11 18:14:52 +01:00
commit cd3431b169
8 changed files with 146 additions and 0 deletions

17
content.json Normal file
View File

@ -0,0 +1,17 @@
{
"title": "How Does Alcohol Disrupt Your Coordination?",
"sections": [
{
"title": "Alcohol and the Brain",
"content": "Alcohol can affect various areas of the brain including cerebellum ..."
},
{
"title": "What does Cerebellum do?",
"content": "Cerebellum is one of the major controlling areas in terms of motor function: that means moving our bodies and keeping our balance ..."
},
{
"title": "Symptoms of Cerebellum damage",
"content": "Loss of balance, dizziness, ..."
}
]
}

3
css/milligram.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

15
css/style.css Normal file
View File

@ -0,0 +1,15 @@
header {
margin-top: 2rem;
margin-bottom: 4rem;
}
.vertical-space {
width: 100%;
height: 1px;
margin-top: 2rem;
margin-bottom: 2rem;
}
h1 {
text-align: center;
}

62
index.html Normal file
View File

@ -0,0 +1,62 @@
<head>
<link rel='stylesheet' href='css/milligram.min.css' />
<link rel='stylesheet' href='css/style.css' />
</head>
<body class='container'>
<header class='row'>
<a class='column' href='#Alcohol-and-the-Brain'>Alcohol and the Brain</a>
<a class='column' href='#What-does-Cerebellum-do?'>What does Cerebellum do?</a>
<a class='column' href='#Symptoms-of-Cerebellum-damage'>Symptoms of Cerebellum damage</a>
</header>
<div class='row'>
<div class='column'>
<h1>How Does Alcohol Disrupt Your Coordination?</h1>
</div>
</div>
<div class='vertical-space'></div>
<div class='row'>
<div class='column'>
<h2 id='Alcohol-and-the-Brain'>Alcohol and the Brain</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Alcohol can affect various areas of the brain including cerebellum ...</p>
</div class='column'>
</div>
<div class='row'>
<div class='column'>
<h2 id='What-does-Cerebellum-do?'>What does Cerebellum do?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Cerebellum is one of the major controlling areas in terms of motor function: that means moving our bodies and keeping our balance ...</p>
</div class='column'>
</div>
<div class='row'>
<div class='column'>
<h2 id='Symptoms-of-Cerebellum-damage'>Symptoms of Cerebellum damage</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</body>

12
package.json Normal file
View File

@ -0,0 +1,12 @@
{
"name": "cerebellum-alcohol-infographic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "nj templates/index.nj content.json > index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Mahdi Dibaiee <mdibaiee@pm.me>",
"license": "MIT"
}

5
templates/head.nj Normal file
View File

@ -0,0 +1,5 @@
<head>
<link rel='stylesheet' href='css/milligram.min.css' />
<link rel='stylesheet' href='css/style.css' />
</head>

31
templates/index.nj Normal file
View File

@ -0,0 +1,31 @@
{% include './head.nj' %}
<body class='container'>
<header class='row'>
{% for section in sections %}
<a class='column' href='#{{ section.title | anchor }}'>{{ section.title }}</a>
{% endfor %}
</header>
<div class='row'>
<div class='column'>
<h1>{{ title }}</h1>
</div>
</div>
<div class='vertical-space'></div>
{% for section in sections %}
<div class='row'>
<div class='column'>
<h2 id='{{ section.title | anchor }}'>{{ section.title }}</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>{{ section.content }}</p>
</div class='column'>
</div>
{% endfor %}
</body>