make responsive and add footer

src/RootView.js

@@ -21,6 +21,18 @@ export class RootView extends TemplateView {
 	render(t, vm) {
 		return t.div({className: "RootView"}, [
 			t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null),
+			t.div({className: "footer"}, [
+				t.p(t.img({src: "images/matrix-logo.svg"})),
+				t.p(["This invite uses ", externalLink(t, "https://matrix.org", "Matrix"), ", an open network for secure, decentralized communication."]),
+				t.ul({className: "links"}, [
+					t.li(externalLink(t, "https://github.com/matrix-org/matrix.to", "GitHub project")),
+					t.li(externalLink(t, "https://github.com/matrix-org/matrix.to/tree/main/src/clients", "Add your app")),
+				])
+			])
 		]);
 	}
+}
+
+function externalLink(t, href, label) {
+	return t.a({href, target: "_blank", rel: "noopener noreferrer"}, label);
 }

src/preview/PreviewView.js

@@ -18,7 +18,7 @@ import {TemplateView} from "../utils/TemplateView.js";
 
 export class PreviewView extends TemplateView {
 	render(t, vm) {
-		return t.div({className: "PreviewView"}, [
+		return t.div({className: "PreviewView card"}, [
 			t.h2({className: {hidden: vm => !vm.loading}}, "Loading preview…"),
 			t.div({className: {preview: true, hidden: vm => vm.loading}}, [
 				t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})),