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 { header {
margin-top: 2rem; padding: 1rem 0;
margin-bottom: 4rem;
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box;
margin-right: 0;
} }
header div { main {
text-align: center; padding: 1rem 2rem;
}
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;
} }
.vertical-space { .vertical-space {
width: 100%; width: 100%;
height: 1px; height: 1px;
margin-top: 2rem; margin-top: 1rem;
margin-bottom: 2rem; margin-bottom: 1rem;
} }
.text-center { .text-center {
@ -67,10 +37,6 @@ header a:hover::after {
margin-top: 1rem; margin-top: 1rem;
} }
.heading h1, .heading h2 {
text-align: center;
}
svg { svg {
max-width: 100%; max-width: 100%;
} }

106
index.html
View File

@ -1,7 +1,6 @@
<html lang="en"> <html lang="en" data-theme="light">
<head> <head>
<link rel='stylesheet' href='css/milligram.min.css' /> <link rel='stylesheet' href='css/spectre.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/style.css' /> <link rel='stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,25 +8,29 @@
<body> <body class='container'>
<header class='row'> <header class='navbar'>
<div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div> <nav class='navbar-section columns'>
<div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div> <a class='btn btn-link column' href='#alcohol-and-the-brain'>Alcohol and the Brain</a>
<div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div> <a class='btn btn-link column' href='#what-is-cerebellum'>What is Cerebellum?</a>
<div class='column'><a href='#how-cerebellum-damage-affects-you'>Symptoms</a></div> <a class='btn btn-link column' href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a>
<div class='column'><a href='#assessment'>Assessment</a></div> <a class='btn btn-link column' href='#how-cerebellum-damage-affects-you'>Symptoms</a>
<div class='column'><a href='#treatment-and-rehab'>Treatment & Rehabilitation</a></div> <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> </header>
<div class='container'> <div class='vertical-space'></div>
<div class='row heading'>
<div class='column'> <main class='columns'>
<div class='heading text-center column col-12'>
<div>
<h1>How Does Alcohol Affect Your Brain?</h1> <h1>How Does Alcohol Affect Your Brain?</h1>
<h2>Cerebellum and its Role in Your Coordination</h2> <h2>Cerebellum and its Role in Your Coordination</h2>
</div> </div>
</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"?> <?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"> <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 --> <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
@ -97,21 +100,17 @@
<div class='vertical-space'></div> <div class='vertical-space'></div>
<section class='alcohol-and-the-brain'> <section class='alcohol-and-the-brain column col-12'>
<div class='row'>
<div class='column'>
<h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2> <h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
</div> <div class='columns'>
</div> <div class='column col-6 col-md-12'>
<div class='row'>
<div class='column content'>
<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>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>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>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> <p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
</div> </div>
<div class='column chart'> <div class='column col-6 col-md-12'>
<div class='alcohol-abuse-chart-box'> <div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas> <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> <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> </section>
<div class='row'> <section class='column col-12'>
<div class='column'>
<h2 id='what-is-cerebellum'>What is Cerebellum and what does it do?</h2> <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> <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 id='brain-container'></div>
</div class='column'>
</div> </div>
<div class='row'> <section class='column col-12'>
<div class='column'>
<h2 id='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2> <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> <p>Loss of balance, dizziness, ...</p>
</div class='column'> </section>
</div>
<div class='row'> <section class='column col-12'>
<div class='column'>
<h2 id='how-cerebellum-damage-affects-you'>How does damage to Cerebellum affect you?</h2> <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> <p>Loss of balance, dizziness, ...</p>
</div class='column'> </section>
</div>
<div class='row'> <section class='column col-12'>
<div class='column'>
<h2 id='assessment'>How to assess your Cerebellum function?</h2> <h2 id='assessment'>How to assess your Cerebellum function?</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p> <p>Loss of balance, dizziness, ...</p>
</div class='column'> </section>
</div>
<div class='row'> <section class='column col-12'>
<div class='column'>
<h2 id='treatment-and-rehab'>Treatment and Rehabilitation</h2> <h2 id='treatment-and-rehab'>Treatment and Rehabilitation</h2>
</div>
</div>
<div class='row'>
<div class='column'>
<p>Loss of balance, dizziness, ...</p> <p>Loss of balance, dizziness, ...</p>
</div class='column'> </section>
</div>
<div class='row'> <section class='column col-12'>
<div class='column'>
<h2>References</h2> <h2>References</h2>
</div>
</div>
<div class='references row'>
<div class='column'>
<ol> <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-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> <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> </ol>
</div> </section>
</div>
</div> </main>
</body> </body>
<script src='javascript/deps/anime.min.js'></script> <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'> <section class='alcohol-and-the-brain column col-12'>
<div class='row'>
<div class='column'>
<h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2> <h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
</div> <div class='columns'>
</div> <div class='column col-6 col-md-12'>
<div class='row'>
<div class='column content'>
<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>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>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>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> <p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
</div> </div>
<div class='column chart'> <div class='column col-6 col-md-12'>
<div class='alcohol-abuse-chart-box'> <div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas> <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> <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'> <section class='column col-12'>
<div class='column'>
<h2 id='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2> <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> <p>Loss of balance, dizziness, ...</p>
</div class='column'> </section>
</div>

10
templates/assessment.nj
View File

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

3
templates/head.nj
View File

@ -1,6 +1,5 @@
<head> <head>
<link rel='stylesheet' href='css/milligram.min.css' /> <link rel='stylesheet' href='css/spectre.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/style.css' /> <link rel='stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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' %} {% include './head.nj' %}
<body> <body class='container'>
<header class='row'> <header class='navbar'>
<div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div> <nav class='navbar-section columns'>
<div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div> <a class='btn btn-link column' href='#alcohol-and-the-brain'>Alcohol and the Brain</a>
<div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div> <a class='btn btn-link column' href='#what-is-cerebellum'>What is Cerebellum?</a>
<div class='column'><a href='#how-cerebellum-damage-affects-you'>Symptoms</a></div> <a class='btn btn-link column' href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a>
<div class='column'><a href='#assessment'>Assessment</a></div> <a class='btn btn-link column' href='#how-cerebellum-damage-affects-you'>Symptoms</a>
<div class='column'><a href='#treatment-and-rehab'>Treatment & Rehabilitation</a></div> <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> </header>
<div class='container'> <div class='vertical-space'></div>
<div class='row heading'>
<div class='column'> <main class='columns'>
<div class='heading text-center column col-12'>
<div>
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2> <h2>{{ subtitle }}</h2>
</div> </div>
</div> </div>
<div class='row'> <div class='illustration text-center column col-9 col-md-12 p-centered'>
{% include 'assets/alcohol-cerebellum.svg' %} {% include 'assets/alcohol-cerebellum.svg' %}
</div> </div>
@ -38,7 +42,7 @@
{% include './treatment.nj' %} {% include './treatment.nj' %}
{% include './references.nj' %} {% include './references.nj' %}
</div> </main>
</body> </body>
{% include './scripts.nj' %} {% include './scripts.nj' %}

11
templates/references.nj
View File

@ -1,13 +1,8 @@
<div class='row'> <section class='column col-12'>
<div class='column'>
<h2>References</h2> <h2>References</h2>
</div>
</div>
<div class='references row'>
<div class='column'>
<ol> <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-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> <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> </ol>
</div> </section>
</div>

10
templates/symptoms.nj
View File

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

10
templates/treatment.nj
View File

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

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

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