make website basically usable

14 files changed, 944 insertions, 12 deletions

diff --git a/src/hydrilla_website/app.py b/src/hydrilla_website/app.py
index 84303c3..a86c22a 100644
--- a/src/hydrilla_website/app.py
+++ b/src/hydrilla_website/app.py
@@ -91,3 +91,11 @@ website_app = HydrillaWebsite()
 @website_app.route('/', methods=['GET'])
 def main() -> str:
     return flask.render_template('index.html.jinja')
+
+@website_app.route('/favicon.ico', methods=['GET'])
+def favicon() -> str:
+    return flask.send_file('static/haketilo-favicon.ico')
+
+@website_app.route('/downloads', methods=['GET'])
+def downloads() -> str:
+    return flask.render_template('downloads.html.jinja')
diff --git a/src/hydrilla_website/common_jinja_templates b/src/hydrilla_website/common_jinja_templates
-Subproject 0e8ab5c2735b94166552ce80c18e523357a048a
+Subproject ad3e7bfb2dee90dd6b5bdec73251fb0c9e9ad8a
diff --git a/src/hydrilla_website/locales/en_US/LC_MESSAGES/messages.po b/src/hydrilla_website/locales/en_US/LC_MESSAGES/messages.po
index eb9d5e4..d4041b2 100644
--- a/src/hydrilla_website/locales/en_US/LC_MESSAGES/messages.po
+++ b/src/hydrilla_website/locales/en_US/LC_MESSAGES/messages.po
@@ -20,13 +20,15 @@ msgstr ""
 
 #: src/hydrilla_website/templates/index.html.jinja:23
 msgid "index.title"
-msgstr "Main page"
+msgstr "Haketilo"
 
 #: src/hydrilla_website/templates/index.html.jinja:27
-msgid "index.h_big.welcome_to_haketilo"
-msgstr "Welcome to Haketilo"
+msgid "index.h_big.taking_back_the_web"
+msgstr "Taking back the web with Haketilo"
 
 #: src/hydrilla_website/templates/website_base.html.jinja:20
 msgid "base.title.haketilo"
-msgstr "Haketilo&Hydrilla"
+msgstr "Haketilo"
 
+msgid "index.h_big.haketilo_downloads"
+msgstr "Haketilo downloads"
diff --git a/src/hydrilla_website/static/haketilo-favicon.ico b/src/hydrilla_website/static/haketilo-favicon.ico
new file mode 100644
index 0000000..3b9b58f
--- /dev/null
+++ b/src/hydrilla_website/static/haketilo-favicon.ico
diff --git a/src/hydrilla_website/static/haketilo-favicon.ico.license b/src/hydrilla_website/static/haketilo-favicon.ico.license
new file mode 100644
index 0000000..0a91c71
--- /dev/null
+++ b/src/hydrilla_website/static/haketilo-favicon.ico.license
@@ -0,0 +1,2 @@
+SPDX-License-Identifier: CC0-1.0 OR CC-BY-SA-4.0
+Copyright 2017 David Lyons <https://openclipart.org/artist/davidblyons>
diff --git a/src/hydrilla_website/static/haketilo-web.svg b/src/hydrilla_website/static/haketilo-web.svg
new file mode 100644
index 0000000..47767d3
--- /dev/null
+++ b/src/hydrilla_website/static/haketilo-web.svg
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="182.6888mm"
+   height="150.79976mm"
+   viewBox="0 0 182.6888 150.79976"
+   version="1.1"
+   id="svg5"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient10881">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop10877" />
+      <stop
+         style="stop-color:#59a2c0;stop-opacity:1;"
+         offset="0.62552482"
+         id="stop10885" />
+      <stop
+         style="stop-color:#c1edff;stop-opacity:1;"
+         offset="1"
+         id="stop10879" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient10881"
+       id="linearGradient10883"
+       x1="36.347858"
+       y1="128.72693"
+       x2="176.45209"
+       y2="128.72693"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(22.263859,-220.50922)" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath22338">
+      <path
+         style="fill:#4ac9ff;fill-opacity:0.472754;stroke:#c5dde6;stroke-width:3.55728;stroke-dasharray:none;stroke-opacity:1"
+         d="M 31.518954,7.7820158 C 47.568329,53.912149 51.9724,50.034082 74.468138,77.002196 82.24682,94.539582 65.091863,104.26469 65.091863,104.26469 L 49.841554,183.93161 5.7507036,185.32935 -49.796472,77.900848 17.171553,15.073898 Z"
+         id="path22340" />
+    </clipPath>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-25.201208,-45.675628)">
+    <g
+       id="g22354">
+      <circle
+         style="fill:url(#linearGradient10883);fill-opacity:1;stroke:#c5dde6;stroke-width:3.06953;stroke-dasharray:none;stroke-opacity:1"
+         id="path117"
+         cy="-91.78228"
+         cx="128.66382"
+         r="68.409058"
+         transform="rotate(88.487913)" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.56294;stroke-dasharray:none;stroke-opacity:1"
+         id="path10887"
+         d="m -7.408287,116.30693 a 108.43031,122.87809 0 0 1 -38.732653,94.13008 108.43031,122.87809 0 0 1 -88.52639,26.88122"
+         transform="matrix(0.77923769,-0.62672851,0.88642632,0.46286972,0,0)" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.65595;stroke-dasharray:none;stroke-opacity:1"
+         id="path10887-7"
+         d="M 34.579247,118.6031 A 79.177147,77.045479 0 0 1 6.2961872,177.62337 79.177147,77.045479 0 0 1 -58.346871,194.47809"
+         transform="matrix(0.50624712,-0.86238846,0.67067433,0.74175194,0,0)" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.70238;stroke-dasharray:none;stroke-opacity:1"
+         id="path10887-7-5"
+         d="m -112.73331,-50.498058 a 81.060341,80.259888 0 0 1 -28.95576,61.482642 81.060341,80.259888 0 0 1 -66.18057,17.557917"
+         transform="matrix(-0.53953705,-0.84196186,-0.70246963,0.71171372,0,0)" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.56343;stroke-dasharray:none;stroke-opacity:1"
+         id="path10887-3"
+         d="m -104.34458,-15.019067 a 108.44874,122.90519 0 0 1 -38.73924,94.15084 108.44874,122.90519 0 0 1 -88.54143,26.887147"
+         transform="matrix(-0.77932442,-0.62662065,-0.88648014,0.46276664,0,0)" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.48935;stroke-dasharray:none;stroke-opacity:1"
+         d="M 96.429059,58.599122 95.052829,194.51163"
+         id="path12078" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:3.05417;stroke-dasharray:none;stroke-opacity:1"
+         id="path12806"
+         d="M 162.77877,128.59691 A 67.967606,14.532351 0 0 1 94.97673,142.11553 67.967606,14.532351 0 0 1 27.17469,128.59691" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.98723;stroke-dasharray:none;stroke-opacity:1"
+         id="path12806-3"
+         d="m 160.6468,108.44738 a 65.117699,14.510819 0 0 1 -65.078029,14.0044 65.117699,14.510819 0 0 1 -65.07803,-14.0044" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.60249;stroke-dasharray:none;stroke-opacity:1"
+         id="path12806-3-2"
+         d="M 150.06541,85.528763 A 54.662647,13.120107 0 0 1 122.73409,96.891109 54.662647,13.120107 0 0 1 68.071438,96.891108 54.662647,13.120107 0 0 1 40.740116,85.528763" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:1.67777;stroke-dasharray:none;stroke-opacity:1"
+         id="path12806-3-2-9"
+         d="m 134.19461,69.463148 a 39.078167,7.6275973 0 0 1 -19.33657,6.716513 39.078167,7.6275973 0 0 1 -39.471281,0 39.078167,7.6275973 0 0 1 -19.336576,-6.716513" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.95009;stroke-dasharray:none;stroke-opacity:1"
+         id="path12806-3-5"
+         d="M 157.49509,153.44579 A 63.052242,14.615782 0 0 1 95.056465,166.02745 63.052242,14.615782 0 0 1 32.617843,153.44579" />
+      <path
+         style="fill:none;fill-opacity:0;stroke:#c5dde6;stroke-width:2.42282;stroke-dasharray:none;stroke-opacity:1"
+         id="path12806-3-5-6"
+         d="m 143.61645,174.75455 a 49.290337,12.610472 0 0 1 -48.213221,9.98861 49.290337,12.610472 0 0 1 -48.213224,-9.9886" />
+    </g>
+    <g
+       transform="matrix(0.06373743,0.72641931,0.72641931,-0.06373743,86.299233,50.211608)"
+       id="g4514"
+       clip-path="url(#clipPath22338)">
+      <path
+         style="fill:#d38d5f;stroke-width:0.238244"
+         d="M 7.30405,153.7586 C 20.54927,112.215 15.59359,34.229537 16.31646,33.113187 c 0.87975,-1.35862 11.98736,-0.3859 11.70824,-0.21673 0.17326,45.22237 7.01132,84.510963 -0.71993,131.991763 l -9.29885,-5.88681 z"
+         id="rect7" />
+      <path
+         style="stroke-width:0.273897"
+         d="m 63.328435,18.175599 c 0,0 -18.017818,8.640905 -27.631388,12.644707 -3.823279,1.592294 -7.11998,3.047871 -9.996289,4.376476 -11.35319,0.247708 -19.4479991,0.01005 -19.8799245,1.450041 l 0.01602,16.049149 c 0.1225108,1.704999 8.9933655,2.136989 19.9713905,3.333131 6.538886,4.233937 13.307605,8.532834 17.153475,10.714075 9.058079,5.13742 18.504813,7.823295 18.504813,7.823295 0,0 5.056977,-21.237215 4.911847,-31.707625 C 66.23324,32.388436 63.328435,18.175599 63.328435,18.175599 Z"
+         id="rect9" />
+      <path
+         id="path35"
+         d="m 63.328435,18.175599 c 0,0 2.905055,14.268926 3.050195,24.739336 0.14513,10.47041 -4.912098,31.651538 -4.912098,31.651538 -11.67798,-3.788669 -16.221256,-6.527691 -16.221256,-6.527691 0,0 7.434244,-7.591907 9.174294,-22.366997 1.1592,-16.80443 -4.045711,-21.40711 -4.045711,-21.40711 3.905919,-1.879065 11.01257,-5.216217 12.954576,-6.089076 z"
+         style="opacity:0.455;fill:#ffffff;stroke-width:0.264583" />
+      <path
+         style="opacity:0.455;fill:#ffffff;stroke-width:0.264583"
+         d="m 63.208938,17.51176 c 0,0 3.024552,14.932765 3.169692,25.403175 0.14513,10.47041 -4.912098,31.621519 -4.912098,31.621519 -1.568463,-0.523507 -1.541936,-0.491688 -1.541936,-0.491688 0,0 5.456154,-26.034461 5.211644,-30.225191 -0.0315,-4.2355 -1.218109,-20.314453 -3.453104,-24.783592 0,0 0.723943,-0.407792 1.645299,-0.860384 z"
+         id="path1427" />
+      <path
+         style="fill:#784421;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 7.30405,153.7586 10.40103,5.0627 c 0,0 9.14195,5.35641 9.55606,6.02467 0.41411,0.66827 -4.66818,-0.88342 -7.90926,-2.11367 -3.24108,-1.23026 -8.21159,-4.9245 -10.36004,-6.6929 -2.14844,-1.76841 -1.68779,-2.2808 -1.68779,-2.2808 z"
+         id="path1407" />
+      <path
+         id="path999"
+         d="M 7.30405,153.7586 C 17.372688,112.40594 21.015256,78.343761 17.898744,32.568697 l 3.350934,-0.138515 c 0.131707,45.014525 3.851339,79.911868 -2.025736,127.174438 z"
+         style="opacity:0.3;fill:#2b1100;stroke-width:0.207242" />
+      <path
+         style="opacity:1;fill:#1a1a1a;stroke:none;stroke-width:0.183225"
+         d="m 37.364038,35.560531 9.400174,-5.992052 c 4.831746,9.986754 3.508267,19.973509 -0.303231,29.960263 l -9.096943,-5.992051 z"
+         id="rect4493" />
+      <rect
+         style="opacity:1;fill:#1a1a1a;stroke:none;stroke-width:0.370821"
+         id="rect4504"
+         width="7.4658442"
+         height="15.338916"
+         x="23.754957"
+         y="38.224262" />
+    </g>
+  </g>
+</svg>
diff --git a/src/hydrilla_website/static/haketilo-web.svg.license b/src/hydrilla_website/static/haketilo-web.svg.license
new file mode 100644
index 0000000..eabc885
--- /dev/null
+++ b/src/hydrilla_website/static/haketilo-web.svg.license
@@ -0,0 +1,3 @@
+SPDX-License-Identifier: CC0-1.0 OR CC-BY-SA-4.0
+Copyright 2017 David Lyons <https://openclipart.org/artist/davidblyons>
+Copyright 2022 Wojtek Kosior <koszko@koszko.org>
diff --git a/src/hydrilla_website/static/haketilo.svg b/src/hydrilla_website/static/haketilo.svg
new file mode 100644
index 0000000..7a01461
--- /dev/null
+++ b/src/hydrilla_website/static/haketilo.svg
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="128"
+   height="128"
+   viewBox="0 -0.6 33.866668 33.866666"
+   version="1.1"
+   id="svg8"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <title
+     id="title1418">Hatchet</title>
+  <defs
+     id="defs2">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter994"
+       x="-0.78125864"
+       width="2.5625174"
+       y="-0.25392297"
+       height="1.5078459">
+      <feGaussianBlur
+         stdDeviation="1.7304741"
+         id="feGaussianBlur996" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter1401"
+       x="-0.43681362"
+       width="1.8736273"
+       y="-0.032828163"
+       height="1.0656563">
+      <feGaussianBlur
+         stdDeviation="2.2606587"
+         id="feGaussianBlur1403" />
+    </filter>
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Hatchet</dc:title>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>David Lyons</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title>dlyons</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
+        <dc:date>2017-05</dc:date>
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>hatchet</rdf:li>
+            <rdf:li>ax</rdf:li>
+            <rdf:li>wood</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+        <dc:description>Hatchet</dc:description>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Notice" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Attribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="matrix(0.18053177,-0.14666587,0.14666587,0.18053177,-0.67884005,5.998568)"
+     id="g4514">
+    <path
+       style="fill:#d38d5f;stroke-width:0.23824416"
+       d="M 7.30405,153.7586 C 20.54927,112.215 15.59359,34.229537 16.31646,33.113187 c 0.87975,-1.35862 11.98736,-0.3859 11.70824,-0.21673 0.17326,45.22237 7.01132,84.510963 -0.71993,131.991763 l -9.29885,-5.88681 z"
+       id="rect7" />
+    <path
+       style="stroke-width:0.27389684"
+       d="m 63.328435,18.175599 c 0,0 -18.017818,8.640905 -27.631388,12.644707 -3.823279,1.592294 -7.11998,3.047871 -9.996289,4.376476 -11.35319,0.247708 -19.4479991,0.01005 -19.8799245,1.450041 l 0.01602,16.049149 c 0.1225108,1.704999 8.9933655,2.136989 19.9713905,3.333131 6.538886,4.233937 13.307605,8.532834 17.153475,10.714075 9.058079,5.13742 18.504813,7.823295 18.504813,7.823295 0,0 5.056977,-21.237215 4.911847,-31.707625 C 66.23324,32.388436 63.328435,18.175599 63.328435,18.175599 Z"
+       id="rect9" />
+    <path
+       id="path35"
+       d="m 63.328435,18.175599 c 0,0 2.905055,14.268926 3.050195,24.739336 0.14513,10.47041 -4.912098,31.651538 -4.912098,31.651538 -11.67798,-3.788669 -16.221256,-6.527691 -16.221256,-6.527691 0,0 7.434244,-7.591907 9.174294,-22.366997 1.1592,-16.80443 -4.045711,-21.40711 -4.045711,-21.40711 3.905919,-1.879065 11.01257,-5.216217 12.954576,-6.089076 z"
+       style="opacity:0.45500004;fill:#ffffff;stroke-width:0.26458335" />
+    <path
+       style="opacity:0.45500004;fill:#ffffff;stroke-width:0.26458335"
+       d="m 63.208938,17.51176 c 0,0 3.024552,14.932765 3.169692,25.403175 0.14513,10.47041 -4.912098,31.621519 -4.912098,31.621519 -1.568463,-0.523507 -1.541936,-0.491688 -1.541936,-0.491688 0,0 5.456154,-26.034461 5.211644,-30.225191 -0.0315,-4.2355 -1.218109,-20.314453 -3.453104,-24.783592 0,0 0.723943,-0.407792 1.645299,-0.860384 z"
+       id="path1427" />
+    <path
+       style="fill:#784421;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 7.30405,153.7586 10.40103,5.0627 c 0,0 9.14195,5.35641 9.55606,6.02467 0.41411,0.66827 -4.66818,-0.88342 -7.90926,-2.11367 -3.24108,-1.23026 -8.21159,-4.9245 -10.36004,-6.6929 -2.14844,-1.76841 -1.68779,-2.2808 -1.68779,-2.2808 z"
+       id="path1407" />
+    <path
+       id="path999"
+       d="M 7.30405,153.7586 C 17.372688,112.40594 21.015256,78.343761 17.898744,32.568697 l 3.350934,-0.138515 c 0.131707,45.014525 3.851339,79.911868 -2.025736,127.174438 z"
+       style="opacity:0.3;fill:#2b1100;stroke-width:0.20724197" />
+    <path
+       style="opacity:1;fill:#1a1a1a;stroke:none;stroke-width:0.1832249"
+       d="m 37.364038,35.560531 9.400174,-5.992052 c 4.831746,9.986754 3.508267,19.973509 -0.303231,29.960263 l -9.096943,-5.992051 z"
+       id="rect4493" />
+    <rect
+       style="opacity:1;fill:#1a1a1a;stroke:none;stroke-width:0.37082145"
+       id="rect4504"
+       width="7.4658442"
+       height="15.338916"
+       x="23.754957"
+       y="38.224262" />
+  </g>
+</svg>
diff --git a/src/hydrilla_website/static/haketilo.svg.license b/src/hydrilla_website/static/haketilo.svg.license
new file mode 100644
index 0000000..0a91c71
--- /dev/null
+++ b/src/hydrilla_website/static/haketilo.svg.license
@@ -0,0 +1,2 @@
+SPDX-License-Identifier: CC0-1.0 OR CC-BY-SA-4.0
+Copyright 2017 David Lyons <https://openclipart.org/artist/davidblyons>
diff --git a/src/hydrilla_website/static/three-green-dots.svg b/src/hydrilla_website/static/three-green-dots.svg
new file mode 100644
index 0000000..686f2d3
--- /dev/null
+++ b/src/hydrilla_website/static/three-green-dots.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="43.350304mm"
+   height="203.34975mm"
+   viewBox="0 0 43.350304 203.34975"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1"
+     transform="translate(-86.041698,-21.591259)">
+    <circle
+       style="fill:#4caf50;fill-opacity:1;stroke:none;stroke-width:2.594"
+       id="path111"
+       cx="107.7167"
+       cy="43.266258"
+       r="21.674999" />
+    <circle
+       style="fill:#4caf50;fill-opacity:1;stroke:none;stroke-width:2.594"
+       id="path111-3"
+       cx="107.717"
+       cy="123.266"
+       r="21.674999" />
+    <circle
+       style="fill:#4caf50;fill-opacity:1;stroke:none;stroke-width:2.594"
+       id="path111-3-6"
+       cx="107.717"
+       cy="203.26601"
+       r="21.674999" />
+  </g>
+</svg>
diff --git a/src/hydrilla_website/static/three-green-dots.svg.license b/src/hydrilla_website/static/three-green-dots.svg.license
new file mode 100644
index 0000000..4048835
--- /dev/null
+++ b/src/hydrilla_website/static/three-green-dots.svg.license
@@ -0,0 +1,2 @@
+SPDX-License-Identifier: CC0-1.0
+Copyright 2022 Wojtek Kosior <koszko@koszko.org>
diff --git a/src/hydrilla_website/templates/downloads.html.jinja b/src/hydrilla_website/templates/downloads.html.jinja
new file mode 100644
index 0000000..ce5dde3
--- /dev/null
+++ b/src/hydrilla_website/templates/downloads.html.jinja
@@ -0,0 +1,291 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Website downloads page.
+
+This file is part of Hydrilla&Haketilo website.
+
+Copyright (C) 2022 Wojtek Kosior
+
+Dual licensed under
+* GNU General Public License v3.0 or later and
+* Creative Commons Attribution Share Alike 4.0 International.
+
+You can choose to use either of these licenses or both.
+
+
+I, Wojtek Kosior, thereby promise not to sue for violation of this
+file's licenses. Although I request that you do not make use of this
+code in a proprietary work, I am not going to enforce this in court.
+#}
+{% extends "website_base.html.jinja" %}
+
+{% block title %} {{ _('downloads.title') }} {% endblock %}
+
+{% block style %}
+  {{ super() }}
+
+  .signify-pubkey {
+      word-break: break-all;
+  }
+{% endblock %}
+
+{% set here_url = url_for('downloads') %}
+
+{%
+  set nav_links_data = [
+      (none,           url_for('main') ~ '#',      'Home'),
+      ('',             here_url ~ '#',             'Downloads'),
+      ('proxy',        here_url ~ '#proxy',        'Haketilo proxy'),
+      ('old-hydrilla', here_url ~ '#old-hydrilla', 'Old Hydrilla versions'),
+      ('webextension', here_url ~ '#webextension', 'Haketilo WebExtension')
+  ]
+%}
+
+{% set downloads_base = 'https://hydrilla.koszko.org/downloads/' %}
+
+{%
+  macro list_files(
+      filenames_comments,
+      label_text       = 'Files',
+      filename_suffix  = '',
+      include_comments = true
+  )
+%}
+  {{ label(label_text) }}
+
+  {% call unordered_list() %}
+    {% for base_filename, comment in filenames_comments %}
+      {% set filename = base_filename ~ filename_suffix %}
+      {% set href = downloads_base ~ filename %}
+      {% call list_entry() %}
+        <a href="{{ href }}">{{ filename }}</a>
+        {% if include_comments and comment %}
+          ({{ comment }})
+        {% endif %}
+      {% endcall %}
+    {% endfor %}
+  {% endcall %}
+{% endmacro %}
+
+{% macro files_and_sigs_lists(filenames_comments) %}
+  {{ list_files(filenames_comments) }}
+  {{ list_files(filenames_comments, 'Signify signatures', '.sig', false) }}
+  {{ list_files(filenames_comments, 'PGP signatures', '.asc', false) }}
+{% endmacro %}
+
+{% block body %}
+  {% call subpage('') %}
+    <h3>
+      {{ _('index.h_big.haketilo_downloads') }}
+    </h3>
+
+    <p>
+      This page lists releases of Haketilo proxy, Haketilo browser extension
+      (now in maintenance mode) and Hydrilla repository server. Starting with
+      version 3, Haketilo proxy and Hydrilla are distributed together.
+    </p>
+
+    <p>
+      All files are cryptographically signed by project maintainer, Wojciech
+      Kosior. Public keys for verification of signatures are the ones from
+      <a href="https://koszko.org">koszko.org</a>.
+      You might want to read the
+      <a href="https://hydrillabugs.koszko.org/projects/haketilo/wiki/Verifying_signatures">instructions</a>
+      on signature verification.
+    </p>
+
+    {{ label('PGP key fingerprint') }}
+    <p class="bold">
+      E972 7060 E3C5 637C 8A4F 4B42 4BC5 221C 5A79 FD1A
+    </p>
+
+    {% call label() %}
+      <span>
+        <a href="https://man.openbsd.org/signify">Signify</a> public key
+      </span>
+    {% endcall %}
+    <p class="bold signify-pubkey">
+      RWQSf2wUdpjAtrmt7D3t9iHrHFL/GpqXOF+NxECx8ck7swrx6tNzDkM9
+    </p>
+  {% endcall %}
+
+  {% call subpage('proxy') %}
+    <h3>Haketilo proxy and Hydrilla releases</h3>
+
+    <p>
+      Tool releases from version 3 upwards are listed below. Both Haketilo proxy
+      and Hydrilla are included inside.
+    </p>
+
+    <p>
+      If you're a programmer, you might also want to check the
+      <a href="https://git.koszko.org/pydrilla">git repository of Hydrilla and Haketilo</a>.
+    </p>
+
+    <h4>Version 3.0-beta1 (pre-release version)</h4>
+
+    <p>
+      The binary release was made with
+      <a href="https://guix.gnu.org/">GNU Guix</a> version
+      <span class="bold">1.3.0-26.fd00ac7</span>.
+    </p>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-and-hydrilla-bin-3.0b1-x86_64.tar.gz',
+           'relocatable standalone binary release for x86-64 GNU/Linux computers'),
+          ('hydrilla-3.0b1-py3-none-any.whl',
+           'Python wheel for use with pip'),
+          ('haketilo-and-hydrilla-3.0b1.tar.gz',
+           'source code')
+      ])
+    }}
+  {% endcall %}
+
+  {% call subpage('old-hydrilla') %}
+    <h3>Old Hydrilla releases</h3>
+
+    <p>
+      Hydrilla releases before version 3 are listed below. Those old versions
+      do not yet include the Haketilo proxy. The functionality is split between
+      separate Hydrilla <span class="bold">builder</span> and
+      <span class="bold">server</span> packages. The latter depends on the
+      former.
+    </p>
+
+    <p>
+      If you're a programmer, you might also want to check the git repositories
+      of <a href="https://git.koszko.org/pydrilla">Hydrilla</a> and
+      <a href="https://git.koszko.org/hydrilla-builder">Hydrilla builder</a>.
+    </p>
+
+    <h4>Version 1.1-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.1b1.tar.gz',           ''),
+          ('hydrilla.builder-1.1b1-py3-none-any.whl', ''),
+          ('hydrilla-1.1b1.tar.gz',                   ''),
+          ('hydrilla-1.1b1-py3-none-any.whl',         '')
+      ])
+    }}
+
+    <h4>Version 1.0</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.0.tar.gz',           ''),
+          ('hydrilla.builder-1.0-py3-none-any.whl', ''),
+          ('hydrilla-1.0.tar.gz',                   ''),
+          ('hydrilla-1.0-py3-none-any.whl',         '')
+      ])
+    }}
+
+    <h4>Version - 1.0-beta2 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.0b2.tar.gz',           ''),
+          ('hydrilla.builder-1.0b2-py3-none-any.whl', ''),
+          ('hydrilla-1.0b2.tar.gz',                   ''),
+          ('hydrilla-1.0b2-py3-none-any.whl',         '')
+      ])
+    }}
+
+    <h4>Version - 1.0-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.0b1.tar.gz',           ''),
+          ('hydrilla.builder-1.0b1-py3-none-any.whl', ''),
+          ('hydrilla-1.0b1.tar.gz',                   ''),
+          ('hydrilla-1.0b1-py3-none-any.whl',         '')
+      ])
+    }}
+  {% endcall %}
+
+  {% call subpage('webextension') %}
+    <h3>Haketilo WebExtension</h3>
+
+    <p>
+      Browser extension releases are listed below. The extension is currently in
+      maintenance mode and is not going to receive new functionalities.
+    </p>
+
+    <p>
+      If you're a programmer, you might also want to check the
+      <a href="https://git.koszko.org/browser-extension/">git repository of Haketilo browser extension</a>.
+    </p>
+
+    <h4>Version 2.0.1</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-2.0.1.zip',    'Chromium build'),
+          ('haketilo-2.0.1.xpi',    'Mozilla build'),
+          ('haketilo-2.0.1.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 2.0</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-2.0.zip',    'Chromium build'),
+          ('haketilo-2.0.xpi',    'Mozilla build'),
+          ('haketilo-2.0.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 2.0-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-2.0b1.zip',    'Chromium build'),
+          ('haketilo-2.0b1.xpi',    'Mozilla build'),
+          ('haketilo-2.0b1.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 1.0</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0.zip',                'Chromium build'),
+          ('haketilo-1.0.mozilla-signed.xpi', 'Mozilla build'),
+          ('haketilo-1.0.tar.gz',             'source code')
+      ])
+    }}
+
+    <h4>Version 1.0-beta3 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0b3.zip',    'Chromium build'),
+          ('haketilo-1.0b3.xpi',    'Mozilla build'),
+          ('haketilo-1.0b3.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 1.0-beta2 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0b2.zip',    'Chromium build'),
+          ('haketilo-1.0b2.xpi',    'Mozilla build'),
+          ('haketilo-1.0b2.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 1.0-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0b1.zip',    'Chromium build'),
+          ('haketilo-1.0b1.xpi',    'Mozilla build'),
+          ('haketilo-1.0b1.tar.gz', 'source code')
+      ])
+    }}
+  {% endcall %}
+{% endblock %}
diff --git a/src/hydrilla_website/templates/index.html.jinja b/src/hydrilla_website/templates/index.html.jinja
index 65ae42a..955c06f 100644
--- a/src/hydrilla_website/templates/index.html.jinja
+++ b/src/hydrilla_website/templates/index.html.jinja
@@ -22,8 +22,173 @@ code in a proprietary work, I am not going to enforce this in court.
 
 {% block title %} {{ _('index.title') }} {% endblock %}
 
-{% block main %}
-  <h3>
-    {{ _('index.h_big.welcome_to_haketilo') }}
-  </h3>
+{% block style %}
+  {{ super() }}
+
+  img#haketilo-web {
+      display: block;
+      margin: 20px;
+      max-height: 300px;
+      max-width: 100%;
+      margin: auto;
+  }
+{% endblock %}
+
+{% set here_url = url_for('main') %}
+{% set site_git_url = 'https://git.koszko.org/hydrilla-website/' %}
+
+{%
+  set nav_links_data = [
+      ('',             here_url ~ '#',             'Home'),
+      ('about',        here_url ~ '#about',        'About'),
+      ('manual',       here_url ~ '#manual',       'Manual'),
+      (none,           url_for('downloads') ~ '#', 'Downloads'),
+      ('get-involved', here_url ~ '#get-involved', 'Get involved'),
+      (none,           site_git_url,               'Website sources')
+  ]
+%}
+
+{% block body %}
+  {% call subpage('') %}
+    <img id="haketilo-web" alt="Haketilo hatchet stabbed into the Web"
+         src="/static/haketilo-web.svg" draggable="false">
+    <h3>
+      {{ _('index.h_big.taking_back_the_web') }}
+    </h3>
+  {% endcall %}
+
+  {% call subpage('about') %}
+    <h3>About</h3>
+
+    <p>
+      Haketilo is a tool that facilitates viewing websites with their original
+      <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a> replaced
+      by user-provided scripts.
+      It combines the functionalities of content
+      blocker and user script manager.
+      It can be used with its script repository, Hydrilla.
+    </p>
+
+    <p>
+      One of Haketilo's aims is to address the issues raised in
+      <a href="https://www.gnu.org/philosophy/javascript-trap.html">"The JavaScript trap"</a>.
+      It is being developed with hope that it will make more user-controlled
+      "Web" browsing possible.
+    </p>
+
+    <p>
+      Haketilo is a
+      <a href="https://en.wikipedia.org/wiki/Free_software">free/libre software</a>,
+      SSl-enabled HTTP proxy. As such, it can be used with multiple web
+      browsers, regardless of their native support for some particular addon
+      format.
+    </p>
+
+    <p>
+      A browser extension variant of Haketilo also exists and is compatible with
+      <a href="https://en.wikipedia.org/wiki/Firefox">Firefox</a>- and
+      <a href="https://en.wikipedia.org/wiki/Chromium_(web_browser)">Chromium</a>-based
+      browsers that support the Manifest V2 WebExtension format. The browser
+      extension is currently in maintenance mode and does not receive new
+      features.
+    </p>
+
+    <h4>Available packages</h4>
+
+    <p>
+      Haketilo can be used both for simple script-blocking and for altering the
+      ways websites are viewed. Its official Hydrilla repository provides a
+      collection of
+      <a href="https://en.wikipedia.org/wiki/Free-software_license">freely-licensed</a>
+      packages that can make several websites viewable again after their
+      original JavaScript is blocked from executing.
+    </p>
+
+    <h4>Credits</h4>
+
+    Those who knowingly or unknowingly helped the project in some way, receive
+    special thanks.
+
+    {% call unordered_list() %}
+      {% call list_entry() %}
+        the <a href="https://nlnet.nl/">NLnet Foundation</a> with the
+        <a href="https://ngi.eu/">NGI0 Programme</a> for funding the
+        development of Haketilo in 2021 and 2022
+      {% endcall %}
+      {% call list_entry() %}
+        <a href="https://tilde.team/~jahoti/">Jahoti</a> for contributions in
+        the early stages of Haketilo browser extension
+      {% endcall %}
+      {% call list_entry() %}
+        <a href="https://nicksphere.ch/">Nicholas Johnson</a> for preparing a
+        <a href="https://media.libreplanet.org/u/libreplanet/m/taking-back-the-web-with-haketilo/">presentation about Haketilo</a>
+        for LibrePlanet 2022
+      {% endcall %}
+      {% call list_entry() %}
+        <a href="https://openclipart.org/artist/davidblyons">David Lyons</a> for
+        his Hatchet graphic that is being used in Haketilo
+      {% endcall %}
+      {% call list_entry() %}
+        the creators of <a href="https://mitmproxy.org/">mitmproxy</a> which
+        serves as a base for Haketilo proxy
+      {% endcall %}
+      {% call list_entry() %}
+        the <a href="https://palletsprojects.com/">the Pallets Projects</a> for
+        creating Flask and other tools that are used extensively in this very
+        website as well as in Haketilo&Hydrilla
+      {% endcall %}
+    {% endcall %}
+  {% endcall %}
+
+  {% call subpage('manual') %}
+    <h3>User manual</h3>
+
+    <p>
+      Information about installation, running and some technical aspects of
+      Haketilo operation can be found on
+      <a href="https://hydrillabugs.koszko.org/projects/haketilo/wiki">project's Redmine-powered wiki</a>.
+      Additional help is provided by Haketilo proxy's builtin documentation
+      which can be viewed from the tool itself.
+    </p>
+
+    <p>
+      The documentation of Hydrilla repository server for use with Haketilo can
+      be found on
+      <a href="https://hydrillabugs.koszko.org/projects/hydrilla/wiki">on project's wiki</a>.
+    </p>
+  {% endcall %}
+
+  {% call subpage('get-involved') %}
+    <h3>Get involved</h3>
+
+    <p>
+      Haketilo development currently occurs on
+      <a href="https://hydrillabugs.koszko.org/">project's Redmine instance</a>.
+      Individuals and groups are more than welcome to
+    </p>
+
+    {% call unordered_list() %}
+      {% call list_entry() %}
+        provide feedback and suggestions,
+      {% endcall %}
+      {% call list_entry() %}
+        make bug reports,
+      {% endcall %}
+      {% call list_entry() %}
+        share custom scripts for websites,
+      {% endcall %}
+      {% call list_entry() %}
+        provide translations and
+      {% endcall %}
+      {% call list_entry() %}
+        contribute code to Haketilo and Hydrilla.
+      {% endcall %}
+    {% endcall %}
+
+    <p>
+      One can also email the maintainer of Haketilo,
+      <a href="https://koszko.org/koszko.html">Wojtek Kosior</a>, directly
+      at <a href="mailto:koszko@koszko.org">koszko@koszko.org</a>.
+    </p>
+  {% endcall %}
 {% endblock %}
diff --git a/src/hydrilla_website/templates/website_base.html.jinja b/src/hydrilla_website/templates/website_base.html.jinja
index f706faa..777a3d3 100644
--- a/src/hydrilla_website/templates/website_base.html.jinja
+++ b/src/hydrilla_website/templates/website_base.html.jinja
@@ -13,14 +13,158 @@ Available under the terms of Creative Commons Zero v1.0 Universal.
 
 {% block head %}
   {{ super() }}
-
+  <link rel="icon" type="image/x-icon" href="static/haketilo-favicon.ico">
   <title>
-    {% block title required %}{% endblock %}
-    -
-    {{ _('base.title.haketilo') }}
+    {% block title %}
+      {{ _('base.title.haketilo') }}
+    {% endblock %}
   </title>
+  <meta http-equiv="Content-Security-Policy"
+        content="script-src 'none'; default-src 'self'">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 {% endblock head %}
 
 {% block style %}
   {{ super() }}
+
+  .nav-container {
+      display: block;
+      padding: 20px 10px;
+  }
+
+  nav {
+      display: inline-flex;
+      flex-direction: column;
+      padding: 0;
+      margin: auto;
+      min-height: calc(100vh - 40px);
+      justify-content: space-evenly;
+  }
+
+  nav > a {
+      margin: 0;
+  }
+
+  .navigation-dots {
+      display: none;
+      padding: 20px 10px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      opacity: 0.75;
+  }
+
+  .navigation-dots img {
+      width: 10px;
+      height: auto;
+  }
+
+  body {
+      width: 100%;
+  }
+
+  .subpage {
+      width: calc(100% - 20px);
+      overflow: hidden;
+      padding: 0 10px;
+  }
+
+  .subpage-layout {
+      display: flex;
+      width: calc(700px + 300px);
+      margin: auto;
+      position: relative;
+      overflow: hidden;
+  }
+
+  @media screen and (max-width: 1020px) {
+      .subpage-layout {
+          width: 100%;
+      }
+  }
+
+  .subpage:nth-child(2n) {
+      background-color: #f6fff9;
+  }
+
+  .subpage-left-part {
+      min-height: calc(100vh - 20px);
+      flex: 1 1 700px;
+      max-width: 700px;
+      padding: 10px 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+  }
+
+  .subpage-main-contents {
+      margin: 10px;
+  }
+
+  @media screen and (max-width: 500px) {
+      .nav-container {
+          position: absolute;
+          right: -340px;
+          /* border will cover the 3 dots */
+          border-right: 30px solid white;
+          border-left: 2px solid #f4f4f4;
+          padding-right: 0;
+          background-color: #ffffffc0;
+          z-index: 1;
+      }
+
+      .subpage:nth-child(2n) .nav-container {
+            background-color: #f6fff9c0;
+            border-right: 30px solid #f6fff9;
+      }
+
+      .nav-container:target {
+          right: -10px;
+      }
+
+      .navigation-dots {
+          display: block;
+      }
+  }
+
+  h3 {
+      text-align: center;
+  }
+
+  li {
+      margin-bottom: 10px;
+  }
 {% endblock style %}
+
+{% macro nav(current_subpage_id) %}
+  <div id="nav-{{ current_subpage_id }}" class="nav-container">
+    <nav>
+      {% for subpage_id, href, text in nav_links_data %}
+        {% set attrs = {'href': href, 'draggable': 'false'} %}
+        {% if current_subpage_id == subpage_id %}
+          {% do attrs.update({'class': 'blue-button'}) %}
+        {% else %}
+          {% do attrs.update({'class': 'green-button'}) %}
+        {% endif %}
+        <a{{ attrs|xmlattr }}>{{ text }}</a>
+      {% endfor %}
+    </nav>
+  </div>
+  <a class="navigation-dots" href="#nav-{{ current_subpage_id }}">
+    <img alt="Three dots, click to view mobile navigation panel"
+         src="static/three-green-dots.svg" draggable="false">
+  </a>
+{% endmacro %}
+
+{% macro subpage(subpage_id) %}
+  <div id="{{ subpage_id }}" class="subpage">
+    <div class="subpage-layout">
+      <div class="subpage-left-part">
+        <div class="subpage-main-contents">
+          {{ caller() }}
+        </div>
+      </div>
+      {{ nav(subpage_id) }}
+    </div>
+  </div>
+{% endmacro %}