WIP stuff.

This commit is contained in:
flash 2023-03-08 00:43:58 +00:00
parent d7c72b0f96
commit a7c1752047
11 changed files with 267 additions and 18 deletions

View file

@ -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
View 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
View file

View 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)) {

View file

@ -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;

View file

@ -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
View file

@ -0,0 +1,4 @@
<div class="copyright">
<div class="copyright-text">&copy; 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
View 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>

View file

26
tpl/index22.php Normal file
View 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
View 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>