Blog post import

Still a bug with pictures...

.gitignore

@@ -0,0 +1,2 @@
+
+blog/

assets/css/custom.css

@@ -30,4 +30,65 @@ hr {
 	vertical-align: middle;
 	left: -2em;
 	font-size: 0.5em !important;
+}
+
+@keyframes loading {
+    0%   {
+    	opacity: 0;
+    }
+    50%  {
+    	opacity: 1;
+    }
+    100% {
+    	opacity: 0;
+    }
+}
+
+.loading {
+    animation-name: loading;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+}
+
+.hide {
+    display: none;
+}
+
+#last-blog-post {
+	max-width: 100%;
+	overflow: auto;
+	max-height: 400px;
+	text-align: left;
+	border-radius: 0.5em;
+	background-color: #f3f3f3;
+	box-shadow: 0 3px 0.2em 0 rgba(0, 0, 0, 0.3) inset;
+	padding: 2em;
+}
+
+.post > .entry > h2 {
+	font-size: 1.6em;
+}
+
+.post > .entry > p {
+	font-size: 0.8em;
+	line-height: 1.7em;
+}
+
+.post > .posted > p {
+	font-size: 0.6em;
+	line-height: 1.5em;
+	display: inline;
+}
+
+.post > .posted > p {
+	float: left;
+}
+
+.post > .posted > .comments {
+	float: right;
+}
+
+a:hover {
+    color: #fece35;
+    border-bottom-color: rgba(255, 255, 255, 0);
 }

assets/js/custom.js

@@ -0,0 +1,27 @@
+(function($){
+  $(function(){
+
+    function findAndFillLastBlogPost() {
+        $("#loading-post-icon").addClass("loading");
+
+        $.get( "blog/index.html", function( data ) {
+            var postBeginning = "<div class=\"post\" id=\"";
+            var postEnd = String.raw`				 </div>
+			</div>`; // be carefull, there must be tabs in this ! Not spaces !! (see blog/index.html)
+            idxStart = data.indexOf(postBeginning);
+            idxEnd = data.indexOf(postEnd, idxStart + postBeginning.length) + postEnd.length;
+            console.log(idxStart);
+            console.log(idxEnd);
+            console.log(idxEnd - idxStart);
+            postTxt = data.substring(idxStart,idxEnd);
+
+            $( "#last-blog-post" ).removeClass("hide");
+            $( "#last-blog-post" ).html( postTxt );
+            $("#loading-post-icon").addClass("hide");
+        });
+    }
+
+    findAndFillLastBlogPost();
+
+  }); // end of document ready
+})(jQuery); // end of jQuery name space

index.html

@@ -114,14 +114,10 @@ <h2>Présentation</h2>
 								<h2>Dernier billet de blog</h2>
 							</header>
 
-							<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
-
-							<p>Tincidunt eu elit diam magnis pretium accumsan etiam id urna. Ridiculus
-							ultricies curae quis et rhoncus velit. Lobortis elementum aliquet nec vitae
-							laoreet eget cubilia quam non etiam odio tincidunt montes. Elementum sem
-							parturient nulla quam placerat viverra mauris non cum elit tempus ullamcorper
-							dolor. Libero rutrum ut lacinia donec curae mus vel quisque sociis nec
-							ornare iaculis.</p>
+							<div>
+								<h3 class="icon fa-circle-o" id="loading-post-icon"></h3>
+								<div class="hide" id="last-blog-post"></div>
+							</div>
 
 						</div>
 					</section>
@@ -274,6 +270,7 @@ <h2>Contact</h2>
 			<script src="assets/js/util.js"></script>
 			<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
 			<script src="assets/js/main.js"></script>
+			<script src="assets/js/custom.js"></script>
 
 	</body>
 </html>