2 files changed, 166 insertions, 0 deletions
diff --git a/static/styles/base.css b/static/styles/base.css
new file mode 100644
index 0000000..f9b1ae6
--- /dev/null
+++ b/static/styles/base.css
@@ -0,0 +1,62 @@
+/*
+ * This file will contain the styles that are to be applied to the WHOLE site.
+ *
+ * No page-specific settings should go in this file.
+ */
+
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	padding: 0;
+	margin: 0;
+
+	font-family: Helvetica, Arial, sans-serif;
+
+	color: white;
+	background-color: #2a2626;
+}
+
+/* Sticky footer
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
+ */
+body {
+	min-height: 100vh;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+}
+
+.navbar {
+	/* A lot of spacing gives a kind of modern look. */
+	padding: 1.5rem;
+
+	/* Make the navbar slightly darker than the default background color to "lift it up". */
+	background-color: #1c1c1c;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.navbar__links {
+	list-style: none;
+	padding: 0;
+
+	display: flex;
+	flex-direction: row;
+	gap: 1.5em;
+}
+
+.navbar__location {
+	/* remove default link styling */
+	color: inherit;
+	text-decoration: none;
+}
+
+footer {
+	text-align: center;
+	font-size: small;
+	margin: 1rem;
+}
diff --git a/static/styles/index.css b/static/styles/index.css
new file mode 100644
index 0000000..22e6dd0
--- /dev/null
+++ b/static/styles/index.css
@@ -0,0 +1,104 @@
+/*
+ * This file contains styles specific to the "index" view. The corresponding
+ * HTML/template file is `views/index.html`.
+ */
+
+.hero {
+	/* We want the hero at the top to take up a big portion of the screen,
+	 * while still showing that there's more content to be found below. */
+	min-height: 50vh;
+
+	/* Put children smack-dab in the center */
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	/* Place a cool background image with a radial gradient over it, to give vibezzz and readability. */
+	background-image:
+		radial-gradient(circle at center, rgba(0, 0, 0, 20%) 0, rgba(0, 0, 0, 80%) 100%),
+		url(/images/hero.jpeg);
+	background-size: cover;
+
+	/* TODO: Put some cool image here */
+	background-color: purple;
+	color: white;
+}
+
+.hero__title {
+	font-size: 5rem;
+	margin: 1rem;
+
+	/* TODO: Use (subset) font for this very important text. */
+}
+
+.hero__subtitle {
+	font-size: large;
+	font-style: italic;
+}
+
+.achievements {
+	padding: 2rem 1rem;
+
+	/* Use a dark and twisted color to make this band stand out as a separate element. */
+	background-color: #6e1818;
+
+	/* Disperse achievements evenly horisontally */
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.achievements__item {
+	/* Stack the two children vertically */
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.achievements__number {
+	/* Numbers should be big and attention grabbing */
+	font-size: 2rem;
+	font-style: bold;
+}
+
+.achievements__text {
+}
+
+.boxes {
+	/* The columns should be aligned in the center.
+	 * N.B. margin matches padding of achievements. */
+	max-width: 600px;
+	margin: 2rem auto;
+}
+
+.boxes__column {
+	--gap: 1rem;
+	width: calc(50% - var(--gap) / 2);
+}
+
+.boxes__column--right {
+	float: right;
+}
+
+.boxes__column--left {
+	float: left;
+	margin-right: var(--gap);
+}
+
+.boxes__item {
+
+}
+
+.boxes__header {
+
+}
+
+.boxes__body-text {
+	line-height: 1.5;
+}
+
+.boxes__image {
+	max-width: 100%;
+	height: auto;
+}
+\ No newline at end of file