start on styling

Signed-off-by: hazel <hazel@hazelthats.me>

3 files changed, 64 insertions, 0 deletions

diff --git a/public/fru-banner.png b/public/fru-banner.png
new file mode 100644
index 0000000..aa97c53
--- /dev/null
+++ b/public/fru-banner.png
diff --git a/public/fru-cheatsheet.png b/public/fru-cheatsheet.png
new file mode 100644
index 0000000..c755dec
--- /dev/null
+++ b/public/fru-cheatsheet.png
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..0c5ce91
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,64 @@
+body {
+	margin: 0;
+	font-family: sans;
+}
+
+header {
+	background: #171717;
+	color: #fff;
+	overflow: hidden;
+	padding: 0 1em;
+	display: flex;
+	align-items: center;
+	gap: 2em;
+	height: 4rem;
+}
+
+header h1 {
+	margin: 1rem 0;
+	line-height: 1;
+}
+
+header nav {
+	display: flex;
+	height: 4rem;
+	align-items: stretch;
+}
+
+header nav a {
+	display: block;
+	height: 100%;
+	padding: 0 1rem;
+	line-height: 4rem;
+	color: #fff;
+	text-decoration: none;
+}
+
+header nav a:hover {
+	background: #272727;
+}
+
+.banner {
+	text-align: center;
+	position: relative;
+	background-color: #333;
+	color: #fff;
+	overflow: hidden;
+	padding: 3em 0;
+}
+
+.banner .banner-background {
+	display: block;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	inset: 0;
+	filter: blur(20px) brightness(50%);
+	object-fit: cover;
+}
+
+.banner .banner-title {
+	font-size: 3em;
+	position: relative;
+	z-index: 100;
+}