WIP stuff.
This commit is contained in:
parent
d7c72b0f96
commit
a7c1752047
11 changed files with 267 additions and 18 deletions
|
|
@ -1,12 +0,0 @@
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
outline-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
156
public/assets/makai22.css
Normal file
156
public/assets/makai22.css
Normal file
|
|
@ -0,0 +1,156 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
outline-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--site-max-width: 1200px;
|
||||||
|
--site-border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
scrollbar-color: #4a3650 #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.makai22 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #111;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-float {
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: var(--site-max-width);
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--site-border-radius);
|
||||||
|
box-shadow: 0 1px 5px #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-float-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.head-float-bg img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
filter: blur(20px) brightness(80%);
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .5s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-float-fg {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.head-float-fg-logo {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 30px 30px 20px;
|
||||||
|
}
|
||||||
|
.head-float-fg-nav {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fw-logo {
|
||||||
|
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 3em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
filter: drop-shadow(0 1px 5px #000);
|
||||||
|
}
|
||||||
|
.fw-logo-link {
|
||||||
|
color: transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
.fw-logo-flash {
|
||||||
|
background-image: linear-gradient(180deg, #eee 0%, #ddd 50%, #ccc 50%, #aaa 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
}
|
||||||
|
.fw-logo-wave {
|
||||||
|
background-image: linear-gradient(0deg, #281430 0%, #392540 50%, #4a3650 50%, #6c5871 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav {
|
||||||
|
display: flex;
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
.topnav-item {
|
||||||
|
display: block;
|
||||||
|
margin: 0 2px 10px;
|
||||||
|
padding: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
min-width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: var(--site-border-radius);
|
||||||
|
text-shadow: 0 1px 5px #000;
|
||||||
|
transition: background-color .1s;
|
||||||
|
}
|
||||||
|
.topnav-item:hover,
|
||||||
|
.topnav-item:focus {
|
||||||
|
background-color: #fff1;
|
||||||
|
}
|
||||||
|
.topnav-item:active {
|
||||||
|
background-color: #8881;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
max-width: var(--site-max-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.layout-main {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
.layout-spacer {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
.layout-side {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--site-border-radius);
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 5px 0;
|
||||||
|
box-shadow: 0 1px 5px #222;
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
}
|
||||||
0
public/assets/makai22.js
Normal file
0
public/assets/makai22.js
Normal file
|
|
@ -103,6 +103,16 @@ $router->get('/home', function() use ($ctx) {
|
||||||
return $ctx->getTemplating()->render('home/index');
|
return $ctx->getTemplating()->render('home/index');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$router->get('/2022', function() use ($ctx) {
|
||||||
|
$db = $ctx->getDatabase();
|
||||||
|
|
||||||
|
return $ctx->getTemplating()->render('index22', [
|
||||||
|
'projects' => (new Projects($db))->getFeatured(),
|
||||||
|
'languages' => new Languages($db),
|
||||||
|
'contacts' => (new Contacts($db))->getHomePage(),
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
$router->get('/', function() use ($ctx) {
|
$router->get('/', function() use ($ctx) {
|
||||||
$legacyPage = (string)filter_input(INPUT_GET, 'p');
|
$legacyPage = (string)filter_input(INPUT_GET, 'p');
|
||||||
if(!empty($legacyPage)) {
|
if(!empty($legacyPage)) {
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ class Template {
|
||||||
$self->remVar = fn(string $name) => $this->vars->removeVar($name);
|
$self->remVar = fn(string $name) => $this->vars->removeVar($name);
|
||||||
|
|
||||||
$self->block = fn(string $name, mixed $contents) => $this->context->setBlock($name, new TemplateBlock($self, $contents));
|
$self->block = fn(string $name, mixed $contents) => $this->context->setBlock($name, new TemplateBlock($self, $contents));
|
||||||
|
$self->include = fn(string $name) => $this->context->render($name, [], $self);
|
||||||
|
|
||||||
$self->ctx = $this->context;
|
$self->ctx = $this->context;
|
||||||
$self->extends = fn(string $name) => $self->extends = $name;
|
$self->extends = fn(string $name) => $self->extends = $name;
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,15 @@ class TemplateContext {
|
||||||
private string $pathFormat = '%s' . self::EXT;
|
private string $pathFormat = '%s' . self::EXT;
|
||||||
private TemplateVars $vars;
|
private TemplateVars $vars;
|
||||||
private array $blocks = [];
|
private array $blocks = [];
|
||||||
|
private array $functions = [];
|
||||||
|
|
||||||
public function __construct($path = '') {
|
public function __construct($path = '') {
|
||||||
if(!empty($path))
|
if(!empty($path))
|
||||||
$this->pathFormat = rtrim($path, '\\/') . DIRECTORY_SEPARATOR . '%s' . self::EXT;
|
$this->pathFormat = rtrim($path, '\\/') . DIRECTORY_SEPARATOR . '%s' . self::EXT;
|
||||||
$this->vars = new TemplateVars;
|
$this->vars = new TemplateVars;
|
||||||
|
$this->defineFunction('global', $this->vars->getVar(...));
|
||||||
|
$this->defineFunction('getBlock', $this->getBlock(...));
|
||||||
|
$this->defineFunction('x', fn(string $string) => htmlspecialchars($string, ENT_QUOTES, 'utf-8', true));
|
||||||
}
|
}
|
||||||
|
|
||||||
public function setGlobal(string $name, mixed $value): void {
|
public function setGlobal(string $name, mixed $value): void {
|
||||||
|
|
@ -23,13 +27,11 @@ class TemplateContext {
|
||||||
$this->vars->removeVar($name);
|
$this->vars->removeVar($name);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function defineFunction(string $name, Closure|callable $function): void {
|
||||||
|
$this->functions[$name] = $function;
|
||||||
|
}
|
||||||
public function getFunctions(): array {
|
public function getFunctions(): array {
|
||||||
return [
|
return $this->functions;
|
||||||
'global' => $this->vars->getVar(...),
|
|
||||||
'getBlock' => $this->getBlock(...),
|
|
||||||
'x' => fn(string $string) => htmlspecialchars($string, ENT_QUOTES, 'utf-8', true),
|
|
||||||
'e' => function() { return ''; }, // reserve for the HTML builder
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function create(string $path): Template {
|
public function create(string $path): Template {
|
||||||
|
|
|
||||||
4
tpl/_layout/copy22.php
Normal file
4
tpl/_layout/copy22.php
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div class="copyright">
|
||||||
|
<div class="copyright-text">© flashwave <?=($self->footer_copy_start ?? '2010');?>-<?=($self->footer_copy_end ?? date('Y'));?></div>
|
||||||
|
<div class="copyright-quote"><?=($self->footer_quotes[array_rand($self->footer_quotes)]);?></div>
|
||||||
|
</div>
|
||||||
22
tpl/_layout/header22.php
Normal file
22
tpl/_layout/header22.php
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<header class="head">
|
||||||
|
<div class="head-float">
|
||||||
|
<div class="head-float-bg">
|
||||||
|
<img src="<?=($self->header_bgs[array_rand($self->header_bgs)]);?>" alt=""/>
|
||||||
|
</div>
|
||||||
|
<div class="head-float-fg">
|
||||||
|
<div class="head-float-fg-logo fw-logo">
|
||||||
|
<a class="fw-logo-link" href="/">
|
||||||
|
<div class="fw-logo-flash"><?=($self->header_logo_flash ?? 'flash');?></div>
|
||||||
|
<div class="fw-logo-wave"><?=($self->header_logo_wave ?? 'wave');?></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="head-float-fg-nav">
|
||||||
|
<nav class="topnav">
|
||||||
|
<?php foreach($self->header_nav as $link): ?>
|
||||||
|
<a href="<?=$link['link'];?>" class="topnav-item"><?=$link['title'];?></a>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
0
tpl/_layout/sidebar22.php
Normal file
0
tpl/_layout/sidebar22.php
Normal file
26
tpl/index22.php
Normal file
26
tpl/index22.php
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<?php
|
||||||
|
$self->extends('master22');
|
||||||
|
|
||||||
|
$self->header_title = 'flash.moe';
|
||||||
|
|
||||||
|
$self->block('main', function($self) {
|
||||||
|
?>
|
||||||
|
<div class="container">
|
||||||
|
blah
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
blah
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
});
|
||||||
|
|
||||||
|
$self->block('sidebar', function($self) {
|
||||||
|
?>
|
||||||
|
<div class="container">
|
||||||
|
blah
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
blah
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
});
|
||||||
40
tpl/master22.php
Normal file
40
tpl/master22.php
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title><?=($self->header_title ?? 'flash.moe');?></title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
||||||
|
<link href="/assets/makai22.css" type="text/css" rel="stylesheet"/>
|
||||||
|
<link href="/assets/sprite.css" type="text/css" rel="stylesheet"/>
|
||||||
|
<link href="/assets/fonts/electrolize/style.css" type="text/css" rel="stylesheet"/>
|
||||||
|
</head>
|
||||||
|
<body class="makai22">
|
||||||
|
<?=$self->include('_layout/header22');?>
|
||||||
|
<?php switch($self->container_type ?? ''): case 'linear': ?>
|
||||||
|
<main class="main">
|
||||||
|
<?=$self->getBlock('main');?>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<?=$self->include('_layout/copy22');?>
|
||||||
|
</footer>
|
||||||
|
<?php break; case 'sidebar': default: ?>
|
||||||
|
<div class="layout">
|
||||||
|
<div class="layout-main">
|
||||||
|
<main class="main">
|
||||||
|
<?=$self->getBlock('main');?>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<div class="layout-spacer"></div>
|
||||||
|
<div class="layout-side">
|
||||||
|
<nav class="sidebar">
|
||||||
|
<?=$self->getBlock('sidebar');?>
|
||||||
|
<footer class="sidebar-copy">
|
||||||
|
<?=$self->include('_layout/copy22');?>
|
||||||
|
</footer>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php break; endswitch; ?>
|
||||||
|
<script src="/assets/makai22.js" charset="utf-8" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue