Inclusion of data hazards image creation app

site/Makefile

@@ -8,13 +8,17 @@ SPHINXBUILD   ?= sphinx-build
 SOURCEDIR     = .
 BUILDDIR      = _build
 
+all: html
 # Put it first so that "make" without argument is like "make help".
 help:
 	@$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
 
-.PHONY: help Makefile
-
-# Catch-all target: route all unknown targets to Sphinx using the new
-# "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
-%: Makefile
+html:
 	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+
+clean:
+	rm -rf _build/html
+
+fresh:
+	make clean
+	make html

site/_static/custom.css

@@ -1,30 +1,47 @@
-
 /* Timeline CSS adapted from Chris Holdgraf's blog: https://github.com/choldgraf/choldgraf.github.io/ */
 div.timeline div.card {
-    border: 0px;
+  border: 0px;
 }
 
 div.timeline div.left {
-    border-right: 1px solid black;
+  border-right: 1px solid black;
 }
 
 div.timeline div.entry::after {
-    width: 1em;
-    height: 1em;
-    background: white;
-    border-radius: 50%;
-    content: "";
-    top: 1em;
-    display: block;
-    position: absolute;
-    border: 1px black solid;
-    z-index: 999;
+  width: 1em;
+  height: 1em;
+  background: white;
+  border-radius: 50%;
+  content: "";
+  top: 1em;
+  display: block;
+  position: absolute;
+  border: 1px black solid;
+  z-index: 999;
 }
 
 div.timeline div.entry.left::after {
-    right: -.5em;
+  right: -0.5em;
 }
 
 div.timeline div.entry.right::after {
-    left: -.5em;
+  left: -0.5em;
+}
+
+.app-container {
+  display: flex;
+  height: 900px;
+  width: 150%;
+  justify-content: left;
+  align-items: flex-start;
+  overflow: hidden !important;
+}
+
+.col-xl-7 {
+  max-width: 60% !important;
+  max-height: 100% !important;
+}
+
+.col-xl-2 {
+  max-width: max-content !important;
 }

site/contents/hazards-app.md

@@ -0,0 +1,9 @@
+# Hazards App
+
+Some text for hazards app
+
+```{raw} html
+<div class="app-container">
+   <object type="text/html" data="https://gareth-j.github.io/data-hazards-app/" width="100%" height="100%"></object>
+</div>
+```

site/index.md

@@ -153,4 +153,5 @@ contents/upcoming-events
 contents/materials
 contents/sign-up
 contents/contact
+contents/hazards-app
 ```