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');
|
||||
});
|
||||
|
||||
$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) {
|
||||
$legacyPage = (string)filter_input(INPUT_GET, 'p');
|
||||
if(!empty($legacyPage)) {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ class Template {
|
|||
$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->include = fn(string $name) => $this->context->render($name, [], $self);
|
||||
|
||||
$self->ctx = $this->context;
|
||||
$self->extends = fn(string $name) => $self->extends = $name;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,15 @@ class TemplateContext {
|
|||
private string $pathFormat = '%s' . self::EXT;
|
||||
private TemplateVars $vars;
|
||||
private array $blocks = [];
|
||||
private array $functions = [];
|
||||
|
||||
public function __construct($path = '') {
|
||||
if(!empty($path))
|
||||
$this->pathFormat = rtrim($path, '\\/') . DIRECTORY_SEPARATOR . '%s' . self::EXT;
|
||||
$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 {
|
||||
|
|
@ -23,13 +27,11 @@ class TemplateContext {
|
|||
$this->vars->removeVar($name);
|
||||
}
|
||||
|
||||
public function defineFunction(string $name, Closure|callable $function): void {
|
||||
$this->functions[$name] = $function;
|
||||
}
|
||||
public function getFunctions(): array {
|
||||
return [
|
||||
'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
|
||||
];
|
||||
return $this->functions;
|
||||
}
|
||||
|
||||
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