fred.boniface
/
fredboniface.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial test of PHP templating

This commit is contained in:
Fred Boniface 2022-10-29 20:44:47 +01:00
parent 578e4377a4
commit 034dc7091e
9 changed files with 105 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
new_index.php Normal file
View File

@ -0,0 +1,21 @@
<?php include "./php/age.php"; ?>
<?php $page_title = "home"; ?>
<!DOCTYPE html>
<html lang="en">
<?php include "./page-blocks/head.php"; ?>
<body>
<?php include "./page-blocks/head-img.php"; ?>
<?php include "./page-blocks/menu.php"; ?>
<?php include "./page-blocks/micro-content.php"; ?>
<div class="content hide_micro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut eros leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras tempus, leo sit amet placerat sollicitudin, magna massa vehicula nisi, sed malesuada odio velit iaculis est. Cras egestas nec lectus ac ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse cursus odio et massa finibus consequat non sed dolor. Suspendisse eu leo ut nunc tincidunt lacinia. Sed faucibus eu enim sit amet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo laoreet odio, ac sollicitudin odio.</p>
<p>Sed volutpat, dolor quis dignissim varius, risus urna tincidunt nulla, non bibendum urna ante eget enim. Pellentesque sit amet neque lobortis, auctor nulla sagittis, bibendum nisl. Proin fermentum tristique dolor, in vehicula mi efficitur et. Fusce ac justo nulla. In eget odio felis. Suspendisse et tellus tincidunt, consequat mi eu, gravida neque. In elementum lacus ut convallis ornare. Mauris elementum lorem felis, et tincidunt massa consectetur in. Suspendisse ut augue blandit, efficitur augue nec, pellentesque odio. Nulla aliquet arcu vitae vehicula ultricies.</p>
<h2>Ispum</h2>
<p>Sed eleifend massa sed sagittis malesuada. Phasellus velit urna, congue sit amet felis dictum, congue ornare tortor. Donec consequat lectus sit amet iaculis ornare. Pellentesque luctus, orci a sagittis efficitur, dolor justo convallis dolor, vitae aliquam dolor eros a nunc. Sed suscipit volutpat est ac ultrices. Cras tempus tellus est, eu tristique est gravida eget. Nulla turpis odio, aliquam id vehicula non, dignissim egestas orci. Suspendisse pulvinar enim eu tortor tincidunt, vel luctus purus pellentesque. Curabitur efficitur mollis est, at imperdiet dui auctor a. Ut malesuada lacus ac nulla tempor sollicitudin. Pellentesque enim elit, eleifend eget ligula sit amet, sagittis efficitur elit. Donec blandit tellus ut vestibulum iaculis. Fusce vel ipsum non felis bibendum porttitor a ut dui. Donec ornare augue augue, a elementum justo ornare quis. Praesent ante tellus, blandit in ultricies id, bibendum sit amet mi. Suspendisse tristique ornare erat.</p>
<p>Praesent malesuada sit amet libero eu volutpat. Duis lacinia turpis sit amet malesuada bibendum. Pellentesque ut velit at turpis placerat consequat id sed augue. Cras eleifend augue sem, sed hendrerit nibh feugiat eu. Nam cursus lectus fermentum quam feugiat porttitor. Sed bibendum a enim ut commodo. Maecenas lacinia dolor ante, vel bibendum nulla venenatis aliquam. Aenean ultricies felis eros, quis cursus arcu dictum vitae.</p>
<p>Ut magna urna, pretium tincidunt congue id, sodales sed lacus. Suspendisse potenti. Aenean nec quam ultrices, dignissim velit sit amet, cursus nisl. Duis nec risus a nisl porta fringilla. Phasellus vel fermentum justo, a malesuada ex. Nullam eu metus quis arcu sodales vestibulum. Maecenas efficitur gravida risus vitae pretium. Donec non nulla sodales, consectetur est ut, tristique nisl. Phasellus sed dui sed erat efficitur cursus. Vestibulum eget est purus. Aliquam mi ante, hendrerit ac ornare ac, imperdiet et diam. Nunc fermentum nunc faucibus massa finibus mattis.</p>
</div>
<?php include "./page-blocks/footer.php"; ?>
</body>
</html>

0
new_index.html → page-blocks/MASTER.html
View File

6
page-blocks/footer.php
View File

@ -1 +1,5 @@
<footer><p>© Frederick Boniface 2022</p></footer> <footer>
<p>
&copy; Fred Boniface 2022
</p>
</footer>

4
page-blocks/head-img-face.php Normal file
View File

@ -0,0 +1,4 @@
<picture id="header_face">
<source srcset="/images/headers/index/face-150.webp" type="image/webp">
<img src="/images/headers/index/face-100.webp" alt="Face image">
</picture>

7
page-blocks/head-img.php Normal file
View File

@ -0,0 +1,7 @@
<div class="header_image" id="header_index"> <!-- id needs to match $page_title and CSS adjusting -->
<div id="page_title" class="hide_micro">
<!-- IF PAGE TITLE ==Home then include head-img-face.php -->
<h1><?php echo &page_title; ?></h1> <!-- Apply Title Case To This Output -->
</div>
</div>

9
page-blocks/head.php
View File

@ -1,7 +1,8 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/images/favicon.png">
<meta name="author" content="Frederick Boniface"> <meta name="author" content="Frederick Boniface">
<link rel="stylesheet" href="./style/fonts.css"> <link rel="icon" type="image/png" href="/images/favicon.png">
<link rel="stylesheet" href="./style/styles.css"> <link rel="stylesheet" href="/style/new_style.css">
<script src="/js/navbar.js"></script> <title><?php echo $page_title ?></title> <!-- Apply Title Case To This Output -->
</head>

59
page-blocks/menu.php
View File

@ -1,12 +1,57 @@
<div id="sidebar" class="sidebar"> <div id="menubar">
<a href="javascript:void(0)" class="close" onclick="collapseSidebar()">&times;</a> <script src="/js/navbar.js"></script>
<div id="menubar_logo" class="hide_micro">
<a href="/">
<picture>
<source media="(min-width: 290px)" srcset="/images/logo/full-40.jxl" type="image/jxl">
<source media="(min-width: 290px)" srcset="/images/logo/full-40.webp" type="image/webp">
<source media="(min-width: 290px)" srcset="/images/logo/full-40.png" type="image/png">
<source media="(max-width: 289px)" srcset="/images/logo/short-20.jxl" type="image/jxl">
<source media="(max-width: 289px)" srcset="/images/logo/short-20.png" type="image/png">
<img src="/images/logo/full-40.png" alt="Fred Boniface logo">
</picture>
</a>
</div>
<div id="menubar_hamburger" class="hide_micro">
<button class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
<button class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">&times;</button>
</div>
</div>
<div id="sidebar">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/keys.php">Keys</a> <a href="/keys.php">Keys</a>
<a href="/projects.php">Projects</a> <a href="/projects.php">Things I Do</a>
<a href="/contact.php">Contact</a> <a href="/contact.php">Contact</a>
<a href="/new_index.html">WIP Design</a> <a href="/about.php">About</a>
<div id="sidebar_logo">
<picture>
<source srcset="/images/logo/short-40.jxl" type="image/jxl">
<img src="/images/logo/short-40.png" alt="">
</picture>
</div>
<div id="sidebar_social">
<a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
<source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
<source srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
<source srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
<img src="/images/social-icons/500px_seek_58.png" alt="500px Logo">
</picture>
</a>
<a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(min-width: 399px)" srcset="/images/social-icons/fb_blue_144.png" type="image/png">
<source srcset="/images/social-icons/fb_blue_58.png" type="image/png">
<img src="/images/social-icons/fb_blue_58.png" alt="Facebook Logo">
</picture>
</a>
<a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(min-width: 399px)" srcset="/images/social-icons/gh_white_120.png" type="image/png">
<source srcset="/images/social-icons/gh_white_64.png" type="image/png">
<img src="/images/social-icons/gh_white_64.png" alt="Github Logo">
</picture>
</a>
</div> </div>
<div class="inflate" id="inflate">
<button class="open" onclick="inflateSidebar()">&#9776;</button>
</div> </div>

6
page-blocks/micro-content.php Normal file
View File

@ -0,0 +1,6 @@
<div class="content show_micro">
<p>
This website cannot correctly render on a screen this narrow,
Please resize your window or visit on a larger device.
</p>
</div>

21
page-blocks/template.php
View File

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php include "./page-blocks/head.php"; ?>
<title>Page Title</title>
</head>
<body>
<?php include "./page-blocks/menu.php"; ?>
<h1 class="page-title">Page Title</h1>
<div class="page-main-content">
</div>
<?php include "./page-blocks/footer.php"; ?>
</body>
</html>