proto: added a picture and fixed the layout a bit

1 files changed, 54 insertions, 12 deletions

diff --git a/style.css b/style.css
index aeabbea..721617f 100644
--- a/style.css
+++ b/style.css
@@ -1,19 +1,45 @@
 body {
 	background: linear-gradient(74deg, skyblue, pink 60%, salmon);
-	padding: 0 10vh
+	padding: 0 12vw;
+}
+
+header {
+	display: flex;
+	justify-content: space-evenly;
+	align-content: baseline;
 }
 
 h1::before, h1::after {
 	content: " - ";
 }
-/*h2::before, h2::after {
-	content: " ~ ";
-}*/
 
-h2 {
+section h2 {
 	font-style: italic;
 }
 
+a {
+	color: black;
+	text-decoration: none;
+}
+
+nav {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+	position: relative;
+	padding: default 3vw;
+	height: 100%;
+}
+
+nav a, nav test {
+	display: inline-block;
+}
+
+nav test {
+	margin: auto 0;
+}
+
 .text-link::after {
 	content: '<';
 }
@@ -22,21 +48,35 @@ h2 {
 	content: '>';
 }
 
-section p {
-	max-width: 500px;
+section>span>p {
+	padding-left: 30vw;
 }
 
 @media screen and (max-width: 600px) {
-	section p {
-		max-width: 90vw;
+	body {
+		padding: 10px 5vw;
+	}
+
+	section>span>p {
+		padding-left: 10vw;
 	}
 }
 
 section:nth-of-type(odd) {
-	justify-items: end;
 	text-align: end;
 }
 
+section#presentation {
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: end;
+	height: 50vh;
+}
+
+#id-pic {
+	height: auto;	
+}
+
 h1, h2 {
 	transition-property: text-decoration;
 	transition-duration: 0.7s;
@@ -55,10 +95,12 @@ h1:hover,h2:hover {
 #timeline::before {
 	position: absolute;
 	content: '';
-	width: 5px;
+	width: 4px;
 	height: 100%;
-	background: skyblue;
+	background: #add8e6;
 	left: 14px;
+	border: 1px solid grey;
+	box-shadow: 1px 1px 1px #696969;
 	border-radius: 3px;
 }