thereadme/cerebellum-alcohol-infographic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new css framework and layout

Browse Source
This commit is contained in:
Mahdi Dibaiee 2021-10-19 23:04:41 +01:00
parent 86ced7369c
commit f868e56103
14 changed files with 110 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/milligram.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
css/milligram.min.css.map
View File

File diff suppressed because one or more lines are too long

1
css/spectre.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

44
css/style.css
View File

@ -3,48 +3,18 @@ html {
}
header {
margin-top: 2rem;
margin-bottom: 4rem;
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box;
margin-right: 0;
padding: 1rem 0;
}
header div {
text-align: center;
}
header a {
display: inline-block;
text-align: center;
font-size: 1.5rem;
position: relative;
}
header a::after {
content: '';
display: inline-block;
position: absolute;
left: 25%;
bottom: -0.4rem;
width: 50%;
height: 1px;
background: #9b4dca;
transition: all 0.3s;
}
header a:hover::after {
left: 0%;
width: 100%;
background: #606c76;
main {
padding: 1rem 2rem;
}
.vertical-space {
width: 100%;
height: 1px;
margin-top: 2rem;
margin-bottom: 2rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.text-center {
@ -67,10 +37,6 @@ header a:hover::after {
margin-top: 1rem;
}
.heading h1, .heading h2 {
text-align: center;
}
svg {
max-width: 100%;
}

106
index.html
View File

@ -1,7 +1,6 @@
<html lang="en">
<html lang="en" data-theme="light">
<head>
<link rel='stylesheet' href='css/milligram.min.css' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel='stylesheet' href='css/spectre.min.css' />
<link rel='stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,25 +8,29 @@
<body>
<header class='row'>
<div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div>
<div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div>
<div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div>
<div class='column'><a href='#how-cerebellum-damage-affects-you'>Symptoms</a></div>
<div class='column'><a href='#assessment'>Assessment</a></div>
<div class='column'><a href='#treatment-and-rehab'>Treatment & Rehabilitation</a></div>
<body class='container'>
<header class='navbar'>
<nav class='navbar-section columns'>
<a class='btn btn-link column' href='#alcohol-and-the-brain'>Alcohol and the Brain</a>
<a class='btn btn-link column' href='#what-is-cerebellum'>What is Cerebellum?</a>
<a class='btn btn-link column' href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a>
<a class='btn btn-link column' href='#how-cerebellum-damage-affects-you'>Symptoms</a>
<a class='btn btn-link column' href='#assessment'>Assessment</a>
<a class='btn btn-link column' href='#treatment-and-rehab'>Treatment & Rehabilitation</a>
</nav>
</header>
<div class='container'>
<div class='row heading'>
<div class='column'>
<div class='vertical-space'></div>
<main class='columns'>
<div class='heading text-center column col-12'>
<div>
<h1>How Does Alcohol Affect Your Brain?</h1>
<h2>Cerebellum and its Role in Your Coordination</h2>
</div>
</div>
<div class='row'>
<div class='illustration text-center column col-9 col-md-12 p-centered'>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1562px" viewBox="0 0 1562 1089" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
@ -97,21 +100,17 @@
<div class='vertical-space'></div>
<section class='alcohol-and-the-brain'>
<div class='row'>
<div class='column'>
<section class='alcohol-and-the-brain column col-12'>
<h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
</div>
</div>
<div class='row'>
<div class='column content'>
<div class='columns'>
<div class='column col-6 col-md-12'>
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
</div>
<div class='column chart'>
<div class='column col-6 col-md-12'>
<div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas>
<p class='text-center'>Prevalence of alcohol abuse and direct death caused by alcohol dependance across the world [<a href='#ref-2'>2</a>]</p>
@ -121,83 +120,48 @@
</section>
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='what-is-cerebellum'>What is Cerebellum and what does it 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 id='brain-container'></div>
</div class='column'>
</div>
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='how-cerebellum-damage-affects-you'>How does damage to Cerebellum affect you?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='assessment'>How to assess your Cerebellum function?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='treatment-and-rehab'>Treatment and Rehabilitation</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2>References</h2>
</div>
</div>
<div class='references row'>
<div class='column'>
<ol>
<li id='ref-1'>Alcoholic brain damage. (2013). In Crichton, R., & Ward, R. (2013). Metal-based neurodegeneration: from molecular mechanisms to therapeutic strategies. John Wiley & Sons. <a href="https://doi.org/10.1002/9781118553480.ch12">https://doi.org/10.1002/9781118553480.ch12</a></li>
<li id='ref-2'>Global Burden of Disease Collaborative Network. Global Burden of Disease Study 2019 (GBD 2019) Results. Seattle, United States: Institute for Health Metrics and Evaluation (IHME), 2020. Available from <a href="http://ghdx.healthdata.org/gbd-results-tool">http://ghdx.healthdata.org/gbd-results-tool</a></li>
</ol>
</div>
</div>
</section>
</div>
</main>
</body>
<script src='javascript/deps/anime.min.js'></script>

12
templates/alcohol-and-the-brain.nj
View File

@ -1,18 +1,14 @@
<section class='alcohol-and-the-brain'>
<div class='row'>
<div class='column'>
<section class='alcohol-and-the-brain column col-12'>
<h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
</div>
</div>
<div class='row'>
<div class='column content'>
<div class='columns'>
<div class='column col-6 col-md-12'>
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
</div>
<div class='column chart'>
<div class='column col-6 col-md-12'>
<div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas>
<p class='text-center'>Prevalence of alcohol abuse and direct death caused by alcohol dependance across the world [<a href='#ref-2'>2</a>]</p>

10
templates/alcohol-damage-cerebellum.nj
View File

@ -1,10 +1,4 @@
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>

10
templates/assessment.nj
View File

@ -1,10 +1,4 @@
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='assessment'>How to assess your Cerebellum function?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>

3
templates/head.nj
View File

@ -1,6 +1,5 @@
<head>
<link rel='stylesheet' href='css/milligram.min.css' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel='stylesheet' href='css/spectre.min.css' />
<link rel='stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

32
templates/index.nj
View File

@ -1,25 +1,29 @@
<html lang="en">
<html lang="en" data-theme="light">
{% include './head.nj' %}
<body>
<header class='row'>
<div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div>
<div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div>
<div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div>
<div class='column'><a href='#how-cerebellum-damage-affects-you'>Symptoms</a></div>
<div class='column'><a href='#assessment'>Assessment</a></div>
<div class='column'><a href='#treatment-and-rehab'>Treatment & Rehabilitation</a></div>
<body class='container'>
<header class='navbar'>
<nav class='navbar-section columns'>
<a class='btn btn-link column' href='#alcohol-and-the-brain'>Alcohol and the Brain</a>
<a class='btn btn-link column' href='#what-is-cerebellum'>What is Cerebellum?</a>
<a class='btn btn-link column' href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a>
<a class='btn btn-link column' href='#how-cerebellum-damage-affects-you'>Symptoms</a>
<a class='btn btn-link column' href='#assessment'>Assessment</a>
<a class='btn btn-link column' href='#treatment-and-rehab'>Treatment & Rehabilitation</a>
</nav>
</header>
<div class='container'>
<div class='row heading'>
<div class='column'>
<div class='vertical-space'></div>
<main class='columns'>
<div class='heading text-center column col-12'>
<div>
<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>
</div>
</div>
<div class='row'>
<div class='illustration text-center column col-9 col-md-12 p-centered'>
{% include 'assets/alcohol-cerebellum.svg' %}
</div>
@ -38,7 +42,7 @@
{% include './treatment.nj' %}
{% include './references.nj' %}
</div>
</main>
</body>
{% include './scripts.nj' %}

11
templates/references.nj
View File

@ -1,13 +1,8 @@
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2>References</h2>
</div>
</div>
<div class='references row'>
<div class='column'>
<ol>
<li id='ref-1'>{{ "Alcoholic brain damage. (2013). In Crichton, R., & Ward, R. (2013). Metal-based neurodegeneration: from molecular mechanisms to therapeutic strategies. John Wiley & Sons. https://doi.org/10.1002/9781118553480.ch12" | urlize | safe }}</li>
<li id='ref-2'>{{ "Global Burden of Disease Collaborative Network. Global Burden of Disease Study 2019 (GBD 2019) Results. Seattle, United States: Institute for Health Metrics and Evaluation (IHME), 2020. Available from http://ghdx.healthdata.org/gbd-results-tool." | urlize | safe }}</li>
</ol>
</div>
</div>
</section>

10
templates/symptoms.nj
View File

@ -1,10 +1,4 @@
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='how-cerebellum-damage-affects-you'>How does damage to Cerebellum affect you?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>

10
templates/treatment.nj
View File

@ -1,10 +1,4 @@
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='treatment-and-rehab'>Treatment and Rehabilitation</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p>
</div class='column'>
</div>
</section>

8
templates/what-is-cerebellum.nj
View File

@ -1,12 +1,6 @@
<div class='row'>
<div class='column'>
<section class='column col-12'>
<h2 id='what-is-cerebellum'>What is Cerebellum and what does it 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 id='brain-container'></div>
</div class='column'>
</div>