blog_list + footer

www/data/css/styles.css

@@ -1,14 +1,21 @@
+html, body{ height:100%; margin:0; }
+
 body {
     margin: 0;
     background-color: #EEE;
     
     color: #CCC;
+
+    display:flex;
+    flex-direction:column;
 }
 
 #content {
     padding-top: 64px;
     display: flex;
     justify-content: center;
+
+    line-height: 1.4;
 }
 
 .headerdiv {
@@ -48,6 +55,7 @@ body {
     border-left:  1px solid #000;
     border-right: 1px solid #000;
     font-weight: bold;
+    text-decoration: none;
 
     margin: 0px 0px 0px 20px;
     padding: 2px 5px;
@@ -210,3 +218,104 @@ body {
 .euler_pnl_celltime_fail    { background: #D89D9D; }
 .euler_pnl_cell_notexist    { background: #CCCCCC; }
 
+.content-responsive {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media(max-width:767px) { .content-responsive { width: auto; } }
+@media(min-width:768px) { .content-responsive { width: auto; } }
+@media(min-width:992px) { .content-responsive { width: 724px; } }
+@media(min-width:1200px){ .content-responsive { width: 1170px; } }
+
+#footerdiv {
+    margin-top:auto;
+    padding-bottom: 10px;
+
+    background-color: transparent;
+    text-align: center;
+}
+#footerdiv hr {
+    margin-bottom: 5px;
+    display:block;
+    border:none;
+    color:white;
+    height:1px;
+    background: #CCCCCCFF;
+    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CCCCCCFF), to(#FFFFFF00));
+}
+
+.contentheader {
+    width: 100%;
+    color: #333;
+    font-size: large;
+}
+
+.contentheader h1 {
+    
+    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 48px;
+    font-weight: 900;
+    margin-bottom: 0;
+    
+}
+
+@media(max-width:767px) { .contentheader h1 { font-size: 32px; } }
+
+.contentheader hr {
+    margin: 0 0 25px 0;
+    
+    display:block;
+    border:none;
+    color:white;
+    height:1px;
+    background: #CCCCCCFF;
+    background: -moz-linear-gradient(   left, #CCCCCCFF,   #FFFFFF00);
+    background: -webkit-linear-gradient(left, #CCCCCCFF 0%,#FFFFFF00 100%);
+}
+
+.blockcontent {
+    display: block;
+    width: 100%;
+}
+
+.bloglistelem_container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.bloglistelem {
+    width: 100%;
+    
+    border: solid 1px #444;
+    margin: 10px 5px;
+    color: #333;
+    text-decoration: none;
+}
+
+.bloglistelem:hover {
+    box-shadow: 0 0 4px #000000;
+}
+
+.ble_blog { background-color: #BBB; }
+.ble_log  { background-color: #DDD; }
+
+.ble_blog .ble_date { background-color: #AAA; }
+.ble_log  .ble_date { background-color: #CCC; }
+
+.ble_date {
+    background-color: #AAA;
+    padding: 2px;
+    font-style: italic;
+}
+
+.ble_title {
+    font-weight: bold;
+    font-size: 1.5em;
+    text-align: left;
+    margin: 2px 0 2px 10px;
+}
+
+@media(max-width:767px) { .ble_title { font-size: 1.25em; } }
+

www/fragments/footer.php

@@ -1,3 +1,4 @@
-<div class="footerdiv">
+<div id="footerdiv" class="content-responsive">
-
+    <hr />
+    made with vanilla PHP and MySQL, no frameworks, no bootstrap, no bullshit
 </div>

www/fragments/header.php

@@ -4,13 +4,13 @@
 	</div>
 
 	<div class="tabrow">
-		<div class="tab">Home</div>
+		<a class="tab" href="/">Home</a>
-		<div class="tab">Project Euler</div>
+		<a class="tab">Project Euler</a>
-		<div class="tab">Blog</div>
+		<a class="tab" href="/blog">Blog</a>
-		<div class="tab">Programs</div>
+		<a class="tab" href="/programs">Programs</a>
-		<div class="tab">About</div>
+		<a class="tab" href="/about">About</a>
 		<div class="tab_split" ></div>
-		<div class="tab tab_github">Github</div>
+		<a class="tab tab_github" href="https://github.com/Mikescher/">Github</a>
 	</div>
 
 </div>

www/index.php

@@ -139,5 +139,5 @@ foreach ($URL_RULES as $rule)
 //TODO gzip (?)
 //TODO better gh widget
 //TODO remove db table prefixes
-
+//TODO highlight active header TAB
 

www/internals/blog.php

@@ -28,6 +28,12 @@ class Blog
 			[ 'id' => 9,  'date' => '2016-10-22', 'visible' => true,  'title' => 'A complete sudoku solver in Befunge-93', 'fragment' => 'sudoku_befunge.md',  'type' => 'markdown', 'cat' => 'blog' ],
 		];
 	}
+
+	public static function listAllOrderedDescending() {
+		$data = self::listAll();
+		usort($data, function($a, $b) { return strcasecmp($b['date'], $a['date']); });
+		return $data;
+	}
 }
 
 

www/internals/euler.php

@@ -11,7 +11,8 @@ class Euler
 
 	public static function listAll()
 	{
-		$files = glob(__DIR__ . '/../statics/euler/euler_*.php');
+		$expr = __DIR__ . '/../statics/euler/Euler_Problem-*.php';
+		$files = glob($expr);
 		
 		return array_map('self::readSingle', $files);
 	}

www/pages/blog_list.php

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<?php
+require_once (__DIR__ . '/../internals/base.php');
+require_once (__DIR__ . '/../internals/blog.php');
+
+$allposts = Blog::listAllOrderedDescending();
+
+?>
+<?php require_once (__DIR__ . '/../internals/base.php'); ?>
+<head>
+	<meta charset="utf-8">
+	<title>Mikescher.com - Blog</title>
+	<meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs"/>
+	<link rel="icon" type="image/png" href="/data/images/favicon.png"/>
+	<link rel="stylesheet" href="/data/css/styles.css"/>
+</head>
+<body>
+
+<?php include (__DIR__ . '/../fragments/header.php');  ?>
+
+<div id="content" class="content-responsive">
+
+	<div class="blockcontent">
+
+		<div class="contentheader"><h1>Blogposts and other stuff</h1><hr/></div>
+
+		<div class='bloglistelem_container'>
+			<?php
+
+			foreach ($allposts as $post)
+			{
+				if (!$post['visible']) continue;
+
+				if ($post['cat']=='blog')     echo "<a class='bloglistelem ble_blog' href='/blog/" . $post['id'] . "/" . urlencode($post['title']) . "'>";
+				else if ($post['cat']=='log') echo "<a class='bloglistelem ble_log' href='/log/"  . $post['id'] . "'>";
+				echo "<div class='ble_date'>"  . $post['date'] . "</div>";
+				echo "<div class='ble_title'>"  . $post['title'] . "</div>";
+				echo "</a>";
+			}
+
+			?>
+		</div>
+
+	</div>
+
+</div>
+
+<?php include (__DIR__ . '/../fragments/footer.php');  ?>
+</body>
+</html>

www/pages/main.php

@@ -9,14 +9,16 @@
 	<link rel="stylesheet" href="/data/css/styles.css"/>
 </head>
 <body>
+
 	<?php include (__DIR__ . '/../fragments/header.php');  ?>
 
-	<div id="content">
+	<div id="content" class="content-responsive">
 
 		<?php include (__DIR__ . '/../fragments/eulerpanel.php');  ?>
 
 	</div>
 
 	<?php include (__DIR__ . '/../fragments/footer.php');  ?>
+
 </body>
 </html>