From 289e1ae711ca585895b70ec4222143d1a4b451a2 Mon Sep 17 00:00:00 2001
From: edpibu <git@edgarpierre.fr>
Date: Sun, 11 Apr 2021 17:44:10 +0200
Subject: [PATCH] Updated homepage for new looks (no mobile version)

---
 css/index.css | 169 ++++++++++++++++++--------------------------------
 css/main.css  |  14 ++---
 cv/index.html |   2 +-
 index.html    |  29 +++++----
 4 files changed, 84 insertions(+), 130 deletions(-)

diff --git a/css/index.css b/css/index.css
index e95e570..5a18b8e 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,123 +1,74 @@
-.left, .right {
-	position: absolute;
-	left: 0;
-	right: 0;
-}
-
-.left {
-	text-align: center;
-	top: 0;
-	bottom: 60%;
-	box-shadow: 0 0 2em black;
-	z-index: 100;
-}
-.right {
-	top: 40%;
-	bottom: 0;
-	background: url("../images/pic1.webp");
-	background-size: cover;
+body {
+	background: url('/images/pic1.webp');
 	background-position: center;
-	z-index: 1;
+	background-size: cover;
 }
 
-.left h1, .left h2 {
-	position: absolute;
-	font-size: 3rem;
-	height: 1em;
-	line-height: 1em;
-	margin: 0;
-	width: 100%;
-}
-
-.left h2 {
-	top: calc( 50% - 1em );
-}
-.left h1 {
-	bottom: calc( 50% - 1em );
-}
-
-nav {
-	position: absolute;
-	top: 0;
-	width: 100%;
-	background: #ffffffde;
+.title {
+	height: 200px;
+	width: 600px;
+	margin: calc((100vh - 200px) / 2) auto;
 	text-align: center;
-	font-size: 2em;
-	padding: 1em;
-	font-weight: 800;
+	background: #ffffff;
+	box-shadow: 0 0 1rem black;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
+	column-gap: 1em;
 }
-nav > a {
-	padding: 1em;
+
+.title h1, .title h2 {
+	font-size: 3rem;
+	margin: 0;
+	align-self: end;
+}
+.title h1 {
+	text-align: left;
+}
+.title h2 {
+	text-align: right;
+}
+
+.title nav {
+	font-variant: small-caps;
+	font-size: 1.5rem;
+	grid-column: 1 / 3;
+	padding: .5em;
+	align-self: center;
+}
+.title nav a {
+	border: 0px solid #484848de;
+	border-width: .1em 0;
+	padding: 0 .5em;
+	margin: .5em;
+	transition: border-color 250ms, background-color 250ms, color 250ms;
+}
+.title nav a:hover {
+	background-color: #242424de;
+	border-color: #242424de;
+	color: #ffffffde;
+}
+.title nav a:active {
+	border-color: #121212de;
+	background-color: #121212de;
+	color: #dededede;
 }
 
 footer {
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	background: #000000de;
-	color: #ffffffde;
+	background: white;
+	margin: 0;
+	padding: 1em;
 	text-align: center;
 }
-footer ul {
-	list-style: none;
+footer>p>* {
 	padding: 1em;
+	line-height: 3em;
 }
-footer li {
-	height: 24px;
-	line-height: 24px;
-	margin: 12px;
+footer>p {
+	margin: 0;
+	padding: 0;
 }
-footer li span {
-	font-weight: 800;
-	margin-right: 1em;
-}
-footer a {
-	color: #dededede;
-}
-footer a:hover {
-	color: #ffffffde;
-}
-footer a:active {
-	color: #ffffffde;
-}
-
-@media screen and (min-width: 1024px), screen and (orientation: landscape) {
-	.left, .right {
-		top: 0;
-		bottom: 0;
-	}
-
-	.right {
-		right: 0;
-		left: 40%
-	}
-	.left {
-		right: 60%;
-	}
-	
-	.left h1, .left h2 {
-		text-align: right;
-		padding-right: 1em;
-	}
-}
-
-@media screen and (hover: hover) {
-	footer li {
-		height: initial;
-		line-height: initial;
-		margin: initial;
-	}
-}
-
-@media screen and (min-width: 1024px) {
-	.left h1, .left h2 {
-		font-size: 4rem;
-	}
-}
-
-@media screen and (max-width: 700px) and (orientation: landscape) {
-	.left h1, .left h2 {
-		font-size: 2rem;
-		padding-right: .5em;
-	}
+footer>.author {
+	font-family: 'IBM Plex Serif';
+	font-weight: 300;
 }
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 2ed985c..46c7a52 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,11 +1,5 @@
 html {
 	box-sizing: border-box;
-}
-*, *::before, *::after {
-	box-sizing: inherit;
-}
-
-body {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -15,13 +9,19 @@ body {
 	color: #000000de;
 	font-family: Inter, sans-serif;
 }
+*, *::before, *::after {
+	box-sizing: inherit;
+}
+body {
+	margin: 0;
+}
 
 h1, h2 {
 	font-family: 'IBM Plex Serif', serif;
 }
 
 h2 {
-	font-weight: 800;
+	font-weight: 700;
 }
 h1 {
 	font-weight: 300;
diff --git a/cv/index.html b/cv/index.html
index 7e64a29..d1affdd 100644
--- a/cv/index.html
+++ b/cv/index.html
@@ -37,7 +37,7 @@
 		<meta name="theme-color" content="#ffffff">
 	</head>
 	<body>
-		<h1>Edgar P. Burkhart</h1>
+		<h1>Edgar P. Burkhart</h2>
 		<nav>
 			<ul>
 				<li class="homepage"><a href="https://edgarpierre.fr">edgarpierre.fr</a></li>
diff --git a/index.html b/index.html
index c360150..5ae1bcb 100644
--- a/index.html
+++ b/index.html
@@ -38,24 +38,27 @@
 		<meta name="theme-color" content="#ffffff">
 	</head>
 	<body>
-		<div class="left">
+		<div class="title">
 			<h2>Edgar P.</h2>
 			<h1>Burkhart</h1>
-		</div>
-		<div class="right">
 			<nav>
 				<a href="/cv">CV</a>
+				<a href="https://git.edgarpierre.fr">Gitea</a>
+				<a href="https://www.komoot.fr/user/383887346799">Komoot</a>
 			</nav>
-			<footer>
-				<ul>
-					<li><span>email</span><a href="mailto:contact@edgarpierre.fr">contact@edgarpierre.fr</a></li>
-					<li><span>komoot</span><a href="https://www.komoot.fr/user/383887346799">edpibu</a></li>
-					<li><span>last.fm</span><a href="https://www.last.fm/user/edpiburkhart">edpiburkhart</a></li>
-					<li><span>git</span><a href="https://git.edgarpierre.fr/edpibu">git.edgarpierre.fr/edpibu</a></li>
-					<li><span>github</span><a href="https://github.com/edpiburkhart">edpiburkhart</a></li>
-					<li><span>public</span><a href="https://public.edgarpierre.fr">public.edgarpierre.fr</a></li>
-				</ul>
-			</footer>
 		</div>
+		<footer>
+			<p class="links">
+				<a href="mailto:contact@edgarpierre.fr"><strong>contact@edgarpierre.fr</strong></a>
+				<a href="https://www.komoot.fr/user/383887346799">komoot(edpibu)</a>
+				<a href="https://www.last.fm/user/edpiburkhart">last.fm(edpiburkhart)</a>
+				<a href="https://git.edgarpierre.fr/edpibu">git.edgarpierre.fr/edpibu</a>
+				<a href="https://github.com/edpiburkhart">github(edpiburkhart)</a>
+				<a href="https://public.edgarpierre.fr">public.edgarpierre.fr</a>
+			</p>
+			<p class="author">
+				<span>edpibu - 2021</span>
+			</p>
+		</footer>
 	</body>
 </html>
