initial styling

2 files changed, 108 insertions, 7 deletions

diff --git a/static/main.css b/static/main.css
index a8eea22..b7aae97 100644
--- a/static/main.css
+++ b/static/main.css
@@ -5,6 +5,7 @@ body {
 
 a {
     text-decoration: none;
+		color: #800000;
 }
 
 a:hover {
@@ -17,12 +18,10 @@ a:hover {
     max-height:75px;
 }
 
-.content {
-    padding: 15px;
-}
-
 .title {
-    margin: 0 auto;
+	align-items: center;
+	display: flex;
+	flex-direction: column;
     display: flex;
     max-width: 120ch;
 }
@@ -33,6 +32,108 @@ a:hover {
 }
 
 .title .logo {
-    padding: 15px;
-    flex-shrink: 0;
+  padding-top: 15px;
+}
+
+.title>div>:first-child {
+  margin-top: 0;
+}
+.title>div>:last-child {
+  margin-bottom: 0;
+}
+
+.header .links {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+.header .links>* {
+	margin: .5em 1em;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	/*background: linear-gradient(to bottom, #cc2020, #cc4040);*/ /* red */
+	background: linear-gradient(to bottom, #101070, #101040); /* blue */
+	box-sizing: border-box;
+	min-height: 100vh;
+}
+.header {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 1em;
+}
+.content {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding-top: 1.5em;
+	margin-top: 3px;
+}
+.content>p::before {
+	content: '\1f6c8';
+	display: block;
+	position: absolute;
+	margin-left: -1.3em;
+}
+.content>p {
+	border: 1px solid #ccc;
+	background: white;
+	padding: .5em;
+	padding-left: 2.1em;
+}
+body>* {
+	padding: 0 .8em;
+	box-sizing: border-box;
+	background-color: rgba(255, 255, 255, .8);
+}
+
+.nav {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+.nav .nav-item {
+	margin: 0 .5em;
+}
+
+@media (min-width: 600px) {
+	body {
+		padding: 7vh 0;
+		align-items: center;
+	}
+	body>*:first-child {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	body>*:last-child {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	body>* {
+		/*box-shadow: 0 0 10px #ccc;*/
+		/*border: 1px solid #ccc;*/
+		width: 80%;
+		max-width: 800px;
+	}
+	.title {
+		flex-direction: row;
+	}	
+	.header {
+		flex-direction: row;
+	}
+	.header .links {
+	  justify-content: center;
+		flex-direction: column;
+	}
+	.header .links>* {
+	  margin: .1em 0;
+	}
+	.title .logo {
+		padding-top: 0;
+    padding-right: 15px;
+	}
 }
diff --git a/static/rust.png b/static/rust.png
new file mode 100644
index 0000000..a706d7c
--- /dev/null
+++ b/static/rust.png