Add education landing page (#178)

_data/edu.yml

@@ -0,0 +1,85 @@
+why:
+- title: Free of Charge
+  para:  Minetest is <a href="/get-involved/">developed</a> by an
+         international network of <a href="/credits/">volunteer developers</a>.
+         You don't have to pay a license fee.
+
+- title: Easy Scripting
+  para: Minetest is not a game itself, but instead provides a Lua API which is used to create games and mods.
+        This makes creation and customisation super easy.
+
+- title: Customisable without Limits
+  para: You are not restricted by any EULA, and have full access to the source code.
+        Minetest is available under the LGPLv2.1+ license.
+
+- title: Runs well on old hardware
+  para: Minetest is written in a computer language that makes more efficient use of hardware,
+        allowing more schools to be able to experience interactive virtual learning.
+
+- title: Independent
+  para: Minetest is not associated with any company or commercial entity, which can make it
+        more suitable for adoption in organisations where this is a problem.
+
+- title: Friendly Community
+  para: You can find help with any problems on our <a href="/get-involved/">forums or IRC channels.</a>
+
+
+featured:
+- title: Craft the Web
+  author: CERN
+  tag: Unreleased
+  img: ctw.png
+  para: Learn what makes the Web function, and about the ideas and major inventions that paved its creation.
+  url: https://forum.minetest.net/viewtopic.php?t=22871
+
+- title: Framinetest
+  author: Framasoft
+  lang: fr
+  img: framinetest.png
+  para: An educational server, with geology, biology, and historical reconstruction to imagine your world!
+  url: https://framinetest.org
+
+- title: QiskitBlocks
+  author: James Weaver
+  img: qiskitblocks.png
+  para: Teaching Quantum Computing using Qiskit in a block world.
+  url: http://qiskitblocks.org
+
+# - title: Environmental Survival
+#   author: IMVEC
+#   img: imvec.png
+#   para: Teaches about polluting events, and gives the opportunity to imagine and build solutions.
+#   url: https://imvec.tech/kids/
+
+
+resources:
+- title: Edu Wiki
+  classes: is-primary
+  author: Various
+  para: There's a section of our wiki dedicated for education-related help.
+  url: https://wiki.minetest.net/MinetestEDU
+
+- title: List of Mods for Education
+  author: Various
+  para: We have a large collection of educational mods, all of which are free and open source.
+  url: https://wiki.minetest.net/Mods:Learning
+
+- title: Minetest Modding Book
+  author: rubenwardy
+  para: Learn how to use Minetest's Lua API to create mods and games.
+  url: https://rubenwardy.com/minetest_modding_book/
+
+- title: Google CTF Mesecons Challenge
+  author: Google
+  para: I've stumbled upon this weird Minetest map, can you make sense out of it?
+  url: https://capturetheflag.withgoogle.com/#challenges/hardware-minetest
+
+- title: Mining for Education
+  author: Paul Brown, OS Mag
+  para: An article explaining why you should use Minetest for education, and a guide in doing so.
+  url: http://www.ocsmag.com/2016/04/04/mining-for-education/
+
+- title: Learning with Minetest
+  author: Teacher Squeaks
+  para: A 3-part post-mortem based on the author's experience of using Minetest in a pre-school.
+  url: http://teachersqueaks.blogspot.co.za/2016/08/minewhat-rolling-out-minetest-in-pre.html

_includes/footer.html

@@ -6,10 +6,10 @@
         <h5 class="footer-title">Minetest</h5>
         <ul class="list-unstyled">
           <li><a href="{{ '/#features' | relative_url }}">Features</a></li>
-          <li><a href="{{ '/#gallery' | relative_url }}">Gallery</a></li>
           <li><a href="{{ '/downloads/' | relative_url }}">Downloads</a></li>
           <li><a href="https://forum.minetest.net/viewforum.php?f=18">News</a></li>
           <li><a href="{{ '/credits/' | relative_url }}">Credits</a></li>
+          <li><a href="{{ '/education/' | relative_url }}">For Education</a></li>
         </ul>
       </div>
 

_includes/header.html

@@ -27,6 +27,7 @@
         <a class="navbar-item" href="{{ '/customize/' | relative_url }}">Customize</a>
         <a class="navbar-item" href="https://forum.minetest.net/viewforum.php?f=18">News</a>
         <a class="navbar-item" href="{{ '/get-involved/' | relative_url }}">Get Involved</a>
+        <a class="navbar-item" href="{{ '/education/' | relative_url }}">Education</a>
       </div>
     </div>
   </div>

_sass/_base.scss

@@ -20,7 +20,7 @@
   }
 }
 
-a:not(.navbar-item, .no-underline) {
+a:not(.navbar-item, .no-underline ,.card) {
   border-bottom: 1px solid transparentize($primary, 0.75);
 
   &:hover {
@@ -37,7 +37,7 @@ a:not(.navbar-item, .no-underline) {
   cursor: pointer;
 
   &:hover {
-    transform: scale(1.1, 1.1);
+    transform: scale(1.05, 1.05);
     z-index: 2;
   }
 }
@@ -46,7 +46,7 @@ a:not(.navbar-item, .no-underline) {
   font-weight: $weight-semibold;
 }
 
-.section-title,
+.section-title, .main-title,
 .section-title:not(:last-child) {
   color: desaturate($primary, 17%);
   font-size: $size-2 * 1.05;
@@ -54,6 +54,10 @@ a:not(.navbar-item, .no-underline) {
   margin-bottom: 3rem;
 }
 
+.main-title {
+  margin-top: 3rem;
+}
+
 .iconlist {
   .image {
     width: 100px;

education.html

@@ -0,0 +1,88 @@
+---
+title: Minetest for Education
+layout: default
+---
+
+<h1 class="title main-title">Minetest for Education</h1>
+
+<section class="section">
+	<div class="container">
+		<h1 id="why" class="title">Why Minetest?</h1>
+		<h6 class="subtitle is-6">We asked some educators why, and here's what they said.</h6>
+
+		<div class="columns is-multiline">
+			{% for point in site.data.edu.why %}
+				<div class="column is-one-third">
+					<h2 class="title is-4">{{ point.title }}</h2>
+					<p>
+						{{ point.para }}
+					</p>
+				</div>
+			{% endfor %}
+		</div>
+	</div>
+</section>
+
+
+<section class="section" style="background-color: #f0f0f0;">
+	<div class="container">
+		<h1 id="featured" class="title">Featured Projects</h1>
+		<h6 class="subtitle is-6">Existing educational projects that use Minetest.</h6>
+
+		<div class="columns is-multiline">
+			{% for point in site.data.edu.featured %}
+				<a class="column is-one-third hover-enlarge" href="{{ point.url }}" rel="nofollow">
+					<div class="card">
+						<div class="card-image">
+							<figure class="image is-16by9">
+								<img src="/media/edu/{{ point.img }}" style="object-fit: cover;" alt="screenshot">
+							</figure>
+						</div>
+						<div class="card-content">
+							<h2 class="title is-4">{{ point.title }}
+								{% if point.tag %}
+									<span class="tag is-rounded is-warning">{{ point.tag }}</span>
+								{% endif %}
+								{% for lang in point.lang %}
+									<img class="is-pulled-right" src="/assets/icons/lang-{{ lang }}.png" alt="{{ lang }}">
+								{% endfor %}
+							</h2>
+							<h6 class="subtitle is-6">{{ point.author }}</h6>
+							<p>
+								{{ point.para }}
+							</p>
+						</div>
+					</div>
+				</a>
+			{% endfor %}
+		</div>
+	</div>
+</section>
+
+<section class="section">
+	<div class="container">
+		<h1 id="resources" class="title">Resources</h1>
+		<h6 class="subtitle is-6">Leverage the community.</h6>
+
+		<div class="columns is-multiline">
+			{% for point in site.data.edu.resources %}
+				<a class="column is-one-third hover-enlarge" href="{{ point.url }}" rel="nofollow">
+					<div class="card {{ point.classes }}">
+						<div class="card-content">
+							<h2 class="title is-4">{{ point.title }}</h2>
+							<h6 class="subtitle is-6">{{ point.author }}</h6>
+							<p>
+								{{ point.para }}
+							</p>
+						</div>
+					</div>
+				</a>
+			{% endfor %}
+		</div>
+
+		<div class="notification">
+			<b>Your project here!</b>
+			Contribute back to the community by making your learning resources publicly available.
+		</div>
+	</div>
+</section>