Initial layout, index-page and logo images.

assets/css/app.scss

@@ -1,5 +1,6 @@
 /* This file is for your main application css. */
-@import "./phoenix.css";
+@import './layout.scss';
+@import './pages/index.scss';
 
 /* Alerts and form errors */
 .alert {

assets/css/layout.scss

@@ -0,0 +1,51 @@
+body {
+  background-color: white;
+  font-family: 'Crimson Text', sans-serif;
+  text-shadow: 3px 3px 3px #ababab;
+  color: #2f273e;
+}
+
+header {
+  .nav {
+    display: flex;
+    justify-content: center;
+
+    a {
+      padding: 15px;
+      color: #2f273e;
+      text-decoration: none;
+    }
+
+    a:hover {
+      background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #d5caf2);
+      text-decoration: underline;
+    }
+  }
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    width: 50%;
+    align-items: center;
+
+    .middle img {
+      max-width: 55px;
+    }
+
+    .right {
+      text-align: right;
+    }
+  }
+}

assets/css/pages/index.scss

@@ -0,0 +1,30 @@
+section.logo {
+  width: 80%;
+  max-width: 1000px;
+  background-color: #d5caf2;
+  border-radius: 3px;
+  padding-top: 3px;
+
+  &::after {
+    content: '@Sanna Hukkanen';
+    font-size: 90%;
+    text-align: right;
+    position: relative;
+    left: 88%;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+section.text {
+  width: 80%;
+  max-width: 1000px;
+  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
+  text-align: center;
+
+  p {
+    padding: 0px 20px;
+  }
+}