Move styles and images into subfolder

See the updates to the README for a description of the new layout.

Note that the /static/ prefix has also been removed from URLs. It felt
kind of like we were leaking implementation details. The fact that these
files are staic doesn't concern the consumer of the service.

1 files changed, 104 insertions, 0 deletions

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