gave up and sorted files into a directory structure. made snippets for header, nav and footer. made it easier to add additional css files as themes. prepare a little for addition of a real template engine. added a css reset file to share between themes, if warranted.

19 files changed, 209 insertions, 235 deletions

diff --git a/.htaccess b/.htaccess
index bdabf00..64b0c70 100644
--- a/.htaccess
+++ b/.htaccess
@@ -19,8 +19,8 @@ RewriteEngine On
 RewriteBase /microblog
 
 # friendly URLs
-RewriteRule ^rsd/?$ rsd.xml.php [L]
-RewriteRule ^xmlrpc/?(.*)$ xmlrpc.php?/$1 [L]
+RewriteRule ^rsd/?$ lib/rsd.xml.php [L]
+RewriteRule ^xmlrpc/?(.*)$ lib/xmlrpc.php?/$1 [L]
 RewriteRule ^feed/json/?$ feed/feed.json [L]
 RewriteRule ^feed/atom/?$ feed/feed.xml [L]
 
diff --git a/microblog.css b/css/microblog.css
index 29ceae6..deb68c8 100644
--- a/microblog.css
+++ b/css/microblog.css
@@ -1,29 +1,31 @@
-* {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	box-sizing: border-box;
+@import './reset.css';
+
+:root {
+	--primary-color: #007aff;
+	--secondary-color: #fffceb;
+
+	--background-color: #b5b5af;
+	--text-color: #080f15;
 }
 
 html {
 	font: 100%/1.4 system-ui, Helvetica, sans-serif;
-	background-color: #b5b5af;
-	color: #080f15;
+	background-color: var(--background-color);
+	color: var(--text-color);
 }
 
 .wrap {
 	width: min(95%, 40rem);
 	margin: 2rem auto;
 	padding: 1rem;
-	background-color: #fffceb;
+	background-color: var(--secondary-color);
 	box-shadow: 0 1.25rem 1rem -1rem rgba(0,0,0,0.25);
 }
 
 .button {
 	display: block;
-	background: #007aff;
-	color: #fffceb;
+	background: var(--primary-color);
+	color: var(--secondary-color);
 	text-decoration: none;
 	border-radius: 0.4rem;
 	padding: 0.2rem 0.5rem;
@@ -80,8 +82,8 @@ nav.main li + li a {
 .timeline .pagination { overflow: hidden; }
 .timeline .pagination a {
 	display: block;
-	background: #007aff;
-	color: #fffceb;
+	background: var(--primary-color);
+	color: var(--secondary-color);
 	text-decoration: none;
 	border-radius: 0.4rem;
 	padding: 0.2rem 0.6rem;
@@ -92,7 +94,7 @@ nav.main li + li a {
 
 .wrap .post-timestamp {
 	display: block;
-	color: #007aff;
+	color: var(--primary-color);
 	text-decoration: none;
 	font-size: 0.8rem;
 	text-transform: uppercase;
@@ -137,7 +139,7 @@ nav.main li + li a {
 }
 
 .wrap .post-content a {
-	color: #007aff;
+	color: var(--primary-color);
 	text-decoration: none;
 }
 
@@ -169,7 +171,8 @@ form.edit,
 
 :is(.postform, .edit) textarea {
 	width: 100%;
-	border: 2px solid #b5b5af;
+	border: 2px solid var(--background-color);
+	background: #fff;
 	padding: 0.5rem;
 	font-size: 1.25rem;
 	resize: vertical;
@@ -178,7 +181,7 @@ form.edit,
 }
 
 :is(.postform, .edit) textarea:focus {
-	border-color: #007aff;
+	border-color: var(--primary-color);
 	outline: none;
 }
 
@@ -188,8 +191,8 @@ form.edit,
 	appearance: none;
 	border: 0;
 	display: block;
-	background: #007aff;
-	color: #fffceb;
+	background: var(--primary-color);
+	color: var(--secondary-color);
 	text-decoration: none;
 	border-radius: 0.4rem;
 	padding: 0.3rem 0.8rem 0.4rem;
@@ -201,14 +204,14 @@ form.edit,
 
 :is(.postform, .edit) #count {
 	float: left;
-	color: #b5b5af;
+	color: var(--background-color);
 }
 
 :is(.postform, .edit) .message,
 .login .message {
 	background-color: #87b26c;
 	padding: 0.5rem;
-	color: #fffceb;
+	color: var(--secondary-color);
 	border-radius: 0.4rem;
 	margin-bottom: 0.5rem;
 }
@@ -221,7 +224,7 @@ form.edit,
 .login input[type="text"],
 .login input[type="password"] {
 	width: 100%;
-	border: 2px solid #b5b5af;
+	border: 2px solid var(--background-color);
 	padding: 0.5rem;
 	font-size: 1.25rem;
 	resize: vertical;
@@ -230,7 +233,7 @@ form.edit,
 
 .login input[type="text"]:focus,
 .login input[type="password"]:focus {
-	border-color: #007aff;
+	border-color: var(--primary-color);
 	outline: none;
 }
 
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..43415e4
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,23 @@
+/*
+	The new CSS reset - version 1.7.3 (last updated 7.8.2022)
+	GitHub page: https://github.com/elad2412/the-new-css-reset
+*/
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+	all: unset;
+	display: revert;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+a, button { cursor: revert; }
+ol, ul, menu { list-style: none; }
+img { max-width: 100%; }
+table { border-collapse: collapse; }
+input, textarea { -webkit-user-select: auto; }
+textarea { white-space: revert; }
+::placeholder {	color: unset; }
+:where([hidden]) { display: none; }
diff --git a/index.php b/index.php
index c0259c2..f435366 100644
--- a/index.php
+++ b/index.php
@@ -2,16 +2,18 @@
 	require_once(__DIR__.DIRECTORY_SEPARATOR.'config.php');
 
 	// check user credentials
-	$config['logged_in'] = false;
 	$config['logged_in'] = check_login();
 
 	// subpages
+	$template = 'timeline';
 	if(is_numeric(path(0))) {
 		// show a single blog post
-		require_once(ROOT.DS.'single.inc.php');
+		$template = 'single';
+		require_once(ROOT.DS.'templates'.DS.'single.inc.php');
 
 	} elseif(mb_strtolower(path(0)) === 'login') {
-		require_once(ROOT.DS.'loginform.inc.php');
+		$template = 'login';
+		require_once(ROOT.DS.'templates'.DS.'loginform.inc.php');
 
 	} elseif(mb_strtolower(path(0)) === 'logout') {
 		$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
@@ -22,7 +24,8 @@
 		die();
 
 	} elseif(mb_strtolower(path(0)) === 'new') {
-		require_once(ROOT.DS.'postform.inc.php');
+		$template = 'postform';
+		require_once(ROOT.DS.'templates'.DS.'postform.inc.php');
 
 	} else {
 		// redirect everything else to the homepage
@@ -32,5 +35,5 @@
 		}
 
 		// show the homepage
-		require_once(ROOT.DS.'timeline.inc.php');
+		require_once(ROOT.DS.'templates'.DS.'timeline.inc.php');
 	}
diff --git a/lib_autolink.php b/lib/autolink.php
index da39c03..da39c03 100644
--- a/lib_autolink.php
+++ b/lib/autolink.php
diff --git a/database.php b/lib/database.php
index 0ffdb3a..0ffdb3a 100644
--- a/database.php
+++ b/lib/database.php
diff --git a/functions.php b/lib/functions.php
index 1586bed..268808c 100644
--- a/functions.php
+++ b/lib/functions.php
@@ -239,7 +239,7 @@ function uuidv4($data = null) { // https://stackoverflow.com/a/15875555/3625228
 
 function twitter_post_status($status='') {
 	global $config;
-	require_once(ROOT.DS.'twitter_api.php');
+	require_once(ROOT.DS.'lib'.DS.'twitter_api.php');
 
 	if(empty($status)) return array('errors' => 1);
 	if(empty($config['twitter']['oauth_access_token']) ||
diff --git a/rsd.xml.php b/lib/rsd.xml.php
index 910e6b2..f0f9c12 100644
--- a/rsd.xml.php
+++ b/lib/rsd.xml.php
@@ -1,5 +1,5 @@
 <?php
-  require_once(__DIR__.DIRECTORY_SEPARATOR.'config.php');
+  require_once(__DIR__.DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'config.php');
 
   header('Content-Type: text/xml; charset=utf-8');
 ?><rsd xmlns="http://archipelago.phrasewise.com/rsd" version="1.0">
diff --git a/twitter_api.php b/lib/twitter_api.php
index d6e3a58..d6e3a58 100644
--- a/twitter_api.php
+++ b/lib/twitter_api.php
diff --git a/xmlrpc.php b/lib/xmlrpc.php
index 47948eb..47948eb 100644
--- a/xmlrpc.php
+++ b/lib/xmlrpc.php
diff --git a/loginform.inc.php b/loginform.inc.php
deleted file mode 100644
index c218baa..0000000
--- a/loginform.inc.php
+++ /dev/null
@@ -1,64 +0,0 @@
-<?php
-	if(!defined('ROOT')) die('Don\'t call this directly.');
-
-	// handle login
-	if(isset($_POST['user']) && isset($_POST['pass'])) {
-		if($_POST['user'] === $config['admin_user'] && $_POST['pass'] === $config['admin_pass']) {
-			$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
-			setcookie('microblog_login', sha1($config['url'].$config['admin_pass']), NOW+$config['cookie_life'], '/', $domain, false);
-
-			header('Location: '.$config['url']);
-			die();
-		} else {
-			header('HTTP/1.0 401 Unauthorized');
-			$message = array(
-				'status' => 'error',
-				'message' => 'You entered wrong user credentials. Please try again.'
-			);
-		}
-	}
-
-	header('Content-Type: text/html; charset=utf-8');
-
-?><!DOCTYPE html>
-<html lang="<?= $config['language'] ?>" class="login">
-<head>
-	<meta charset="utf-8" />
-	<title><?= empty($config['microblog_account']) ? "" : $config['microblog_account'] . "'s "; ?>micro.blog</title>
-	<meta name="viewport" content="width=device-width" />
-	<link rel="alternate" type="application/json" title="JSON Feed" href="<?= $config['url'] ?>/feed/json" />
-	<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="<?= $config['url'] ?>/feed/atom" />
-	<?php if($config['xmlrpc']): ?><link rel="EditURI" type="application/rsd+xml" title="RSD" href="<?= $config['url'] ?>/rsd" /><?php endif; ?>
-	<link rel="stylesheet" href="<?= $config['url'] ?>/microblog.css" />
-	<script src="<?= $config['url'] ?>/microblog.js" type="module" defer></script>
-</head>
-<body>
-	<div class="wrap">
-		<nav class="main">
-			<ul>
-				<li><a class="button" href="<?= $config['url'] ?>/">Timeline</a></li>
-				<?php if($config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/new">New Status</a></li><?php endif; ?>
-				<?php if(!$config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/login">Login</a></li><?php endif; ?>
-			</ul>
-		</nav>
-		<p>Please enter your login information.</p>
-		<?php if(isset($message['status']) && isset($message['message'])): ?>
-		<p class="message <?= $message['status'] ?>"><?= $message['message'] ?></p>
-		<?php endif; ?>
-		<form action="" method="post">
-			<input type="text" name="user" placeholder="username" /><br />
-			<input type="password" name="pass" placeholder="password" /><br />
-			<input type="submit" name="" value="Login" />
-		</form>
-	</div>
-	<footer>
-		<nav>
-			<ul>
-				<li><a href="<?= $config['url'] ?>/feed/atom">ATOM Feed</a></li>
-				<li><a href="<?= $config['url'] ?>/feed/json">JSON Feed</a></li>
-				<?php if($config['xmlrpc']): ?><li><a href="<?= $config['url'] ?>/xmlrpc">XML-RPC</a></li><?php endif; ?>
-			</ul>
-		</nav>
-	</footer>
-</body>
-</html>
diff --git a/postform.inc.php b/postform.inc.php
deleted file mode 100644
index 8ac41e4..0000000
--- a/postform.inc.php
+++ /dev/null
@@ -1,79 +0,0 @@
-<?php
-	if(!defined('ROOT')) die('Don\'t call this directly.');
-
-	if(!$config['logged_in']) {
-		// wrong data, kick user to login page
-		header('HTTP/1.0 401 Unauthorized');
-		header('Location: '.$config['url'].'/login');
-		die();
-	}
-
-	$message = array();
-	if(!empty($_POST['content'])) {
-
-		$id = db_insert($_POST['content'], NOW);
-
-		if($id > 0) {
-			$message = array(
-				'status' => 'success',
-				'message' => 'Successfully posted status #'.$id
-			);
-
-			rebuild_feeds();
-			if($config['ping'] == true) ping_microblog();
-			if($config['crosspost_to_twitter'] == true) {
-				$twitter_response = json_decode(twitter_post_status($_POST['content']), true);
-
-				if(!empty($twitter_response['errors'])) {
-					$message['message'] .= ' (But crossposting to twitter failed!)';
-				}
-			}
-
-			header('Location: '.$config['url']);
-			die();
-		}
-	}
-
-	header('Content-Type: text/html; charset=utf-8');
-
-?><!DOCTYPE html>
-<html lang="<?= $config['language'] ?>" class="postform">
-<head>
-	<meta charset="utf-8" />
-	<title>micro.blog</title>
-	<meta name="viewport" content="width=device-width" />
-	<link rel="alternate" type="application/json" title="JSON Feed" href="<?= $config['url'] ?>/feed/json" />
-	<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="<?= $config['url'] ?>/feed/atom" />
-	<?php if($config['xmlrpc']): ?><link rel="EditURI" type="application/rsd+xml" title="RSD" href="<?= $config['url'] ?>/rsd" /><?php endif; ?>
-	<link rel="stylesheet" href="<?= $config['url'] ?>/microblog.css" />
-	<script src="<?= $config['url'] ?>/microblog.js" type="module" defer></script>
-</head>
-<body>
-	<div class="wrap">
-		<nav class="main">
-			<ul>
-				<li><a class="button" href="<?= $config['url'] ?>/">Timeline</a></li>
-				<?php if($config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/new">New Status</a></li><?php endif; ?>
-				<?php if(!$config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/login">Login</a></li><?php endif; ?>
-			</ul>
-		</nav>
-		<?php if(isset($message['status']) && isset($message['message'])): ?>
-		<p class="message <?= $message['status'] ?>"><?= $message['message'] ?></p>
-		<?php endif; ?>
-		<form action="" method="post">
-			<textarea name="content" maxlength="<?= $config['max_characters'] ?>"></textarea>
-			<p id="count"><?= $config['max_characters'] ?></p>
-			<input type="submit" name="" value="Post" />
-		</form>
-	</div>
-	<footer>
-		<nav>
-			<ul>
-				<li><a href="<?= $config['url'] ?>/feed/atom">ATOM Feed</a></li>
-				<li><a href="<?= $config['url'] ?>/feed/json">JSON Feed</a></li>
-				<?php if($config['xmlrpc']): ?><li><a href="<?= $config['url'] ?>/xmlrpc">XML-RPC</a></li><?php endif; ?>
-			</ul>
-		</nav>
-	</footer>
-</body>
-</html>
diff --git a/snippets/footer.snippet.php b/snippets/footer.snippet.php
new file mode 100644
index 0000000..d2238f0
--- /dev/null
+++ b/snippets/footer.snippet.php
@@ -0,0 +1,10 @@
+<footer>
+	<nav>
+		<ul>
+			<li><a href="<?= $config['url'] ?>/feed/atom">ATOM Feed</a></li>
+			<li><a href="<?= $config['url'] ?>/feed/json">JSON Feed</a></li>
+			<?php if($config['xmlrpc']): ?><li><a href="<?= $config['url'] ?>/xmlrpc">XML-RPC</a></li><?php endif; ?>
+			<?php if($config['logged_in']): ?><li><a href="<?= $config['url'] ?>/logout">Logout</a></li><?php endif; ?>
+		</ul>
+	</nav>
+</footer>
diff --git a/snippets/header.snippet.php b/snippets/header.snippet.php
new file mode 100644
index 0000000..d3270d8
--- /dev/null
+++ b/snippets/header.snippet.php
@@ -0,0 +1,27 @@
+<?php
+
+	$title_suffix = isset($title_suffix) ? ' - ' . $title_suffix : '';
+	$css = 'microblog'; // the default
+	if(!empty($config['theme']) && file_exists(ROOT.DS.'css'.DS.$config['theme'].'.css')) {
+		$css = $config['theme'];
+	}
+
+	header('Content-Type: text/html; charset=utf-8');
+
+?><!DOCTYPE html>
+<html lang="<?= $config['language'] ?>" class="<?= $template ?>">
+<head>
+	<meta charset="utf-8" />
+	
+	<title><?= empty($config['microblog_account']) ? "" : $config['microblog_account'] . "'s "; ?>micro.blog<?= $title_suffix ?></title>
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	
+	<link rel="alternate" type="application/json" title="JSON Feed" href="<?= $config['url'] ?>/feed/json" />
+	<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="<?= $config['url'] ?>/feed/atom" />
+	<?php if($config['xmlrpc']): ?><link rel="EditURI" type="application/rsd+xml" title="RSD" href="<?= $config['url'] ?>/rsd" /><?php endif; ?>
+	
+	<link rel="stylesheet" href="<?= $config['url'] ?>/css/<?= $css ?>.css" />
+	
+	<script src="<?= $config['url'] ?>/microblog.js" type="module" defer></script>
+</head>
diff --git a/snippets/nav.snippet.php b/snippets/nav.snippet.php
new file mode 100644
index 0000000..3628451
--- /dev/null
+++ b/snippets/nav.snippet.php
@@ -0,0 +1,7 @@
+<nav class="main">
+	<ul>
+		<li><a class="button" href="<?= $config['url'] ?>/">Timeline</a></li>
+		<?php if($config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/new">New Status</a></li><?php endif; ?>
+		<?php if(!$config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/login">Login</a></li><?php endif; ?>
+	</ul>
+</nav>
diff --git a/templates/loginform.inc.php b/templates/loginform.inc.php
new file mode 100644
index 0000000..b852de7
--- /dev/null
+++ b/templates/loginform.inc.php
@@ -0,0 +1,39 @@
+<?php
+	if(!defined('ROOT')) die('Don\'t call this directly.');
+
+	// handle login
+	if(isset($_POST['user']) && isset($_POST['pass'])) {
+		if($_POST['user'] === $config['admin_user'] && $_POST['pass'] === $config['admin_pass']) {
+			$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
+			setcookie('microblog_login', sha1($config['url'].$config['admin_pass']), NOW+$config['cookie_life'], '/', $domain, false);
+
+			header('Location: '.$config['url']);
+			die();
+		} else {
+			header('HTTP/1.0 401 Unauthorized');
+			$message = array(
+				'status' => 'error',
+				'message' => 'You entered wrong user credentials. Please try again.'
+			);
+		}
+	}
+
+	$title_suffix = 'login';
+	require(ROOT.DS.'snippets'.DS.'header.snippet.php');
+
+?><body>
+	<div class="wrap">
+		<?php require(ROOT.DS.'snippets'.DS.'nav.snippet.php'); ?>
+		<p>Please enter your login information.</p>
+		<?php if(isset($message['status']) && isset($message['message'])): ?>
+		<p class="message <?= $message['status'] ?>"><?= $message['message'] ?></p>
+		<?php endif; ?>
+		<form action="" method="post">
+			<input type="text" name="user" placeholder="username" /><br />
+			<input type="password" name="pass" placeholder="password" /><br />
+			<input type="submit" name="" value="Login" />
+		</form>
+	</div>
+	<?php require(ROOT.DS.'snippets'.DS.'footer.snippet.php'); ?>
+</body>
+</html>
diff --git a/templates/postform.inc.php b/templates/postform.inc.php
new file mode 100644
index 0000000..149028b
--- /dev/null
+++ b/templates/postform.inc.php
@@ -0,0 +1,54 @@
+<?php
+	if(!defined('ROOT')) die('Don\'t call this directly.');
+
+	if(!$config['logged_in']) {
+		// wrong data, kick user to login page
+		header('HTTP/1.0 401 Unauthorized');
+		header('Location: '.$config['url'].'/login');
+		die();
+	}
+
+	$message = array();
+	if(!empty($_POST['content'])) {
+
+		$id = db_insert($_POST['content'], NOW);
+
+		if($id > 0) {
+			$message = array(
+				'status' => 'success',
+				'message' => 'Successfully posted status #'.$id
+			);
+
+			rebuild_feeds();
+			if($config['ping'] == true) ping_microblog();
+			if($config['crosspost_to_twitter'] == true) {
+				$twitter_response = json_decode(twitter_post_status($_POST['content']), true);
+
+				if(!empty($twitter_response['errors'])) {
+					$message['message'] .= ' (But crossposting to twitter failed!)';
+				}
+			}
+
+			header('Location: '.$config['url']);
+			die();
+		}
+	}
+
+	$title_suffix = 'new post';
+	require(ROOT.DS.'snippets'.DS.'header.snippet.php');
+
+?><body>
+	<div class="wrap">
+		<?php require(ROOT.DS.'snippets'.DS.'nav.snippet.php'); ?>
+		<?php if(isset($message['status']) && isset($message['message'])): ?>
+		<p class="message <?= $message['status'] ?>"><?= $message['message'] ?></p>
+		<?php endif; ?>
+		<form action="" method="post">
+			<textarea name="content" maxlength="<?= $config['max_characters'] ?>"></textarea>
+			<p id="count"><?= $config['max_characters'] ?></p>
+			<input type="submit" name="" value="Post" />
+		</form>
+	</div>
+	<?php require(ROOT.DS.'snippets'.DS.'footer.snippet.php'); ?>
+</body>
+</html>
diff --git a/single.inc.php b/templates/single.inc.php
index f10db2f..af486d5 100644
--- a/single.inc.php
+++ b/templates/single.inc.php
@@ -44,27 +44,12 @@
 	// load the actual post
 	$post = db_select_post($id);
 
-?><!DOCTYPE html>
-<html lang="<?= $config['language'] ?>" class="post">
-<head>
-	<meta charset="utf-8" />
-	<title><?= empty($config['microblog_account']) ? "" : $config['microblog_account'] . "'s " ?>micro.blog - entry #<?= $id ?></title>
-	<meta name="viewport" content="width=device-width" />
-	<link rel="alternate" type="application/json" title="JSON Feed" href="<?= $config['url'] ?>/feed/json" />
-	<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="<?= $config['url'] ?>/feed/atom" />
-	<?php if($config['xmlrpc']): ?><link rel="EditURI" type="application/rsd+xml" title="RSD" href="<?= $config['url'] ?>/rsd" /><?php endif; ?>
-	<link rel="stylesheet" href="<?= $config['url'] ?>/microblog.css" />
-	<script src="<?= $config['url'] ?>/microblog.js" type="module" defer></script>
-</head>
-<body>
+	$title_suffix = 'entry #' . $id;
+	require(ROOT.DS.'snippets'.DS.'header.snippet.php');
+
+?><body>
 	<div class="wrap">
-		<nav class="main">
-			<ul>
-				<li><a class="button" href="<?= $config['url'] ?>/">Timeline</a></li>
-				<?php if($config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/new">New Status</a></li><?php endif; ?>
-				<?php if(!$config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/login">Login</a></li><?php endif; ?>
-			</ul>
-		</nav>
+		<?php require(ROOT.DS.'snippets'.DS.'nav.snippet.php'); ?>
 		<ul class="posts">
 		<?php if(!empty($post)): ?>
 			<li class="single-post" data-post-id="<?= $post['id'] ?>">
@@ -110,14 +95,6 @@
 		<?php endif; ?>
 		</ul>
 	</div>
-	<footer>
-		<nav>
-			<ul>
-				<li><a href="<?= $config['url'] ?>/feed/atom">ATOM Feed</a></li>
-				<li><a href="<?= $config['url'] ?>/feed/json">JSON Feed</a></li>
-				<?php if($config['xmlrpc']): ?><li><a href="<?= $config['url'] ?>/xmlrpc">XML-RPC</a></li><?php endif; ?>
-			</ul>
-		</nav>
-	</footer>
+	<?php require(ROOT.DS.'snippets'.DS.'footer.snippet.php'); ?>
 </body>
 </html>
diff --git a/timeline.inc.php b/templates/timeline.inc.php
index 35f7b9d..234ea83 100644
--- a/timeline.inc.php
+++ b/templates/timeline.inc.php
@@ -16,29 +16,12 @@
 	// get posts
 	$posts = db_select_posts(NOW, $config['posts_per_page'], 'desc', $offset);
 
-	header('Content-Type: text/html; charset=utf-8');
+	$title_suffix = '';
+	require(ROOT.DS.'snippets'.DS.'header.snippet.php');
 
-?><!DOCTYPE html>
-<html lang="<?= $config['language'] ?>" class="timeline">
-<head>
-	<meta charset="utf-8" />
-	<title><?= empty($config['microblog_account']) ? "" : $config['microblog_account'] . "'s "; ?>micro.blog</title>
-	<meta name="viewport" content="width=device-width" />
-	<link rel="alternate" type="application/json" title="JSON Feed" href="<?= $config['url'] ?>/feed/json" />
-	<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="<?= $config['url'] ?>/feed/atom" />
-	<?php if($config['xmlrpc']): ?><link rel="EditURI" type="application/rsd+xml" title="RSD" href="<?= $config['url'] ?>/rsd" /><?php endif; ?>
-	<link rel="stylesheet" href="<?= $config['url'] ?>/microblog.css" />
-	<script src="<?= $config['url'] ?>/microblog.js" type="module" defer></script>
-</head>
-<body>
+?><body>
 	<div class="wrap">
-		<nav class="main">
-			<ul>
-				<li><a class="button" href="<?= $config['url'] ?>/">Timeline</a></li>
-				<?php if($config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/new">New Status</a></li><?php endif; ?>
-				<?php if(!$config['logged_in']): ?><li><a class="button" href="<?= $config['url'] ?>/login">Login</a></li><?php endif; ?>
-			</ul>
-		</nav>
+		<?php require(ROOT.DS.'snippets'.DS.'nav.snippet.php'); ?>
 		<ul class="posts">
 		<?php if(!empty($posts)): ?>
 			<?php foreach($posts as $post): ?>
@@ -69,15 +52,6 @@
 			<?php if ($current_page < $total_pages): ?><a href="<?= $config['url'] ?>/page/<?= $current_page + 1 ?>" class="next">older updates</a><?php endif; ?>
 		</div>
 	</div>
-	<footer>
-		<nav>
-			<ul>
-				<li><a href="<?= $config['url'] ?>/feed/atom">ATOM Feed</a></li>
-				<li><a href="<?= $config['url'] ?>/feed/json">JSON Feed</a></li>
-				<?php if($config['xmlrpc']): ?><li><a href="<?= $config['url'] ?>/xmlrpc">XML-RPC</a></li><?php endif; ?>
-				<?php if($config['logged_in']): ?><li><a href="<?= $config['url'] ?>/logout">Logout</a></li><?php endif; ?>
-			</ul>
-		</nav>
-	</footer>
+	<?php require(ROOT.DS.'snippets'.DS.'footer.snippet.php'); ?>
 </body>
 </html>