small improvements

css/design.css

@@ -38,6 +38,12 @@ h1{
 	text-shadow: 0 0 3px #6699ff;
 }
 
+h2{
+	margin-left: 5px;
+	font-family: ubuntumono;
+	font-weight: normal;
+}
+
 ul{
 	list-style-type: none;
 	font-size: 1.5em;
@@ -63,10 +69,31 @@ li a:hover{
 	transition: color 0.2s, background-color 0.2s;
 }
 
+article{
+	margin: 15px;
+	padding: 5px 15px;
+	background-color: #f0f0f0;
+	box-shadow: 0 0 5px 2px #f0f0f0;
+}
+
 section{
-	padding-left: 15px;
 }
 
+li .selected{
+	padding-bottom: 2px;
+	border-bottom: 5px solid #cccccc;
+}
+
+article .postInfos{
+	font-size: 0.8em;
+}
+
+address, time{
+	display: inline;
+}
+
+
+
 
 /*
 ====
@@ -106,7 +133,7 @@ Media Queries
 @media all and (max-width: 1020px){
 	li a{
 		margin: 2px;
-		padding: 2px;
+		padding: 5px;
 	}
 }
 
@@ -154,6 +181,10 @@ Media Queries
 	li a:hover{
 		background-color: #e3e3e3;
 	}
+	li .selected{
+		border-top: 1px solid #cccccc;
+		border-bottom: 2px solid #cccccc;
+	}
 }
 
 @media all and (max-width: 370px){
@@ -163,17 +194,18 @@ Media Queries
 
 	li{
 		width: 90%;
-		margin: auto;
+		margin: 3px auto;
 		text-align: center;
 	}
 	ul li a{
 		display: inline-block;
 		width: 90%;
-		padding: 0 5px;
-	}/*
-	li:nth-child(5){
-		margin-top: 8px;
-	}*/
+		padding: 3px 5px;
+	}
+	li .selected{
+		border: none;
+		background-color: #d9d9d9;
+	}
 }
 
 /*

index.php

@@ -33,7 +33,7 @@
 		</header>
 		<nav>
 			<ul>
-				<li><a href="#blog" title="Blog">Blog</a></li>
+				<li><a href="#blog" title="Blog" class="selected">Blog</a></li>
 				<li><a href="#about" title="À propos">À propos</a></li>
 				<li><a href="#projects" title="Projets">Projets</a></li>
 				<li><a href="#contact" title="Contact">Contact</a></li>
@@ -42,53 +42,19 @@
 		</nav>
 	</header>
 
-	<section id="about">
-		<h2>À propos</h2>
+	<h2>Blog</h2>
 
-		<p>
-			Je m'appelle Corentin, et je suis étudiant en Master 1 Informatique à Grenoble.
+	<article>
+		<h3>Premier article</h3>
+		<p class="postInfos">
+			Corentin Bettiol, <time datetime="2018-09-20 14:32:49">Jeudi 20 septembre 2018 à 14h32</time>
 		</p>
-	</section>
-
-
-	<section id="projects">
-		<h2>Projets</h2>
-		
-		<p>
-			Coming soon :)
-		</p>
-
-	</section>
-
-
-	<section id="blog">
-		<h2>Blog</h2>
-		
-		<p>
-			Coming soon :)
-		</p>
-
-	</section>
-
-
-	<section id="contact">
-		<h2>Contact</h2>
-		
-		<p>
-			Coming soon :)
-		</p>
-
-	</section>
-
-
-	<section id="login">
-		<h2>Connexion</h2>
-		
-		<p>
-			Coming soon :)
-		</p>
-		
-	</section>
+		<section>
+			<p>
+				Bonjour à tous et bienvenue sur cette nouvelle version du blog.
+			</p>
+		</section>
+	</article>
 
 </body>
 </html>
\ No newline at end of file