diff options
Diffstat (limited to 'src/layout.php')
| -rw-r--r-- | src/layout.php | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/src/layout.php b/src/layout.php new file mode 100644 index 0000000..60ce7f7 --- /dev/null +++ b/src/layout.php @@ -0,0 +1,267 @@ +<?php + +require_once __DIR__ . '/i18n.php'; + +function layout($head = '', $content = '') +{ + $i18n = i18n([ + 'de' => [ + 'pages.projects' => 'Projekte', + + 'de' => 'Deutsch', + 'en' => 'English', + 'jp' => '日本語', + ], + 'en' => [ + 'pages.projects' => 'Projects', + + 'de' => 'Deutsch', + 'en' => 'English', + 'jp' => '日本語', + ], + 'jp' => [ + 'de' => 'Deutsch', + 'en' => 'English', + 'jp' => '日本語', + ], + ]); + $t = $i18n['translate']; + + ?> +<html lang="<?php echo $_GET['lang'] ?? 'de'; ?>"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <title>dweipert.de</title> + <meta name="description" content="Open-Source und Free-Software Advokat aus Bad Neustadt an der Saale"> + <meta name="keywords" content="open-source, free software, Softwareentwicklung, Bad Neustadt"> + + <link rel="icon" type="image/x-icon" href="/assets/favicon.png"> + + <style> + html { + font-family: + Roboto, + 'Helvetica Neue', + Arial, + sans-serif; + font-size: 16px; + box-sizing: border-box; + } + + html, body { + margin: 0; + padding: 0; + } + + *, + *::before, + *::after { + box-sizing: border-box; + } + + nav ul { + list-style-type: none; + margin: 0; padding: 0; + } + + nav a:hover { + text-decoration: underline; + } + + a { + color: inherit; + text-decoration: none; + } + + .wrap { + background-color: #000; + color: #ebebeb; + } + + .site-wrap { + padding: 0 2rem; + + min-height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; + grid-template-columns: 100%; + } + + header { + padding: 1em 0; + + display: flex; + justify-content: space-between; + align-items: center; + } + + header .menu { + display: flex; + align-items: center; + } + + header .menu-button { + font-size: 1.5em; + } + + main { + padding: 2em 0; + } + + main a { + text-decoration: underline; + } + + .menu > * + * { + margin-left: 1em; + } + + + + /* Logo */ + + .logo { + display: block; + width: 30px; + filter: brightness(0) invert(1); + } + + + + /* Menu */ + + .nav-main { + position: fixed; + height: 100vh; + width: 100vw; + top: 0; left: 0; + z-index: 100; + + background: rgba(0, 0, 0, 0.95); + + display: none; + } + + .nav-main.active { + display: block; + } + + .nav-main ul { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + } + + .nav-main ul li { + font-size: 1.5em; + } + + .nav-main ul li + li { + margin-top: 0.5em; + } + + .menu-button { + cursor: pointer; + } + + .close-btn { + position: absolute; + top: 1rem; + right: 2rem; + + font-size: 1.5em; + cursor: pointer; + } + + + .nav-lang { + position: relative; + } + + .nav-lang__active { + cursor: pointer; + } + + .nav-lang__sub { + position: absolute; + flex-direction: column; + display: none; + } + + .nav-lang__sub.active { + display: flex; + } + </style> + + <?php echo $head; ?> + </head> + <body> + <div class="wrap"> + <div class="site-wrap"> + <nav class="nav-main" ref="nav-main"> + <span class="close-btn" ref="nav-main_close">X</span> + <ul> + <li> + <a href="<?php echo $i18n['link_page']('/projects'); ?>"><?php echo $t('pages.projects'); ?></a> + </li> + </ul> + </nav> + + <header> + <a href="<?php echo $i18n['link_page']('/'); ?>"> + <img src="/assets/img/dweipert-x92.png" alt="Logo" class="logo"> + </a> + <div class="menu"> + <nav class="nav-lang"> + <span class="nav-lang__active" ref="nav-lang_active"> + <?php echo $t($_GET['lang'] ?? 'de'); ?> + </span> + <ul class="nav-lang__sub" ref="nav-lang_sub"> + <?php foreach ($i18n['inactive_languages']() as $locale): ?> + <li> + <a href="<?php echo $i18n['link_language']($locale); ?>"> + <?php echo $t($locale); ?> + </a> + </li> + <?php endforeach; ?> + </ul> + </nav> + + <span class="menu-button" ref="nav-main_open">=</span> + </div> + </header> + + <main> + <?php echo $content; ?> + </main> + </div> + </div> + + <script> + const navMain = document.querySelector('[ref="nav-main"]'); + const navMainOpen = document.querySelector('[ref="nav-main_open"]'); + const navMainClose = navMain.querySelector('[ref="nav-main_close"]'); + + navMainOpen.addEventListener('click', function () { + navMain.classList.toggle('active'); + }); + navMainClose.addEventListener('click', function () { + navMain.classList.toggle('active'); + }); + + + const navLangActive = document.querySelector('[ref="nav-lang_active"]'); + const navLangSub = document.querySelector('[ref="nav-lang_sub"]'); + + navLangActive.addEventListener('click', function () { + navLangSub.classList.toggle('active'); + }); + </script> + </body> + </html> + <?php +} |