marijo/movmaker-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tune header typography and logo position

Browse source
This commit is contained in:
hbrain 2026-06-01 14:18:04 +02:00
parent 92ee32ff62
commit 71317f340f
3 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.php
View file

@ -283,14 +283,14 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>MVLog</title> <title>MVL</title>
<meta property="og:title" content="MVL"> <meta property="og:title" content="MVL">
<meta property="og:description" content="journal of an unreliable narrator."> <meta property="og:description" content="journal of an unreliable narrator.">
<meta property="og:image" content="https://bubulescu.org/assets/img/moto_travel.png"> <meta property="og:image" content="https://bubulescu.org/assets/img/moto_travel.png">
<meta property="og:url" content="https://bubulescu.org"> <meta property="og:url" content="https://bubulescu.org">
<link rel="alternate" type="application/rss+xml" title="MVLog RSS" href="feed.php"> <link rel="alternate" type="application/rss+xml" title="MVLog RSS" href="feed.php">
<link rel="icon" type="image/png" href="assets/img/moto_travel.png"> <link rel="icon" type="image/png" href="assets/img/moto_travel.png">
<link rel="stylesheet" href="style.css?v=20260531k"> <link rel="stylesheet" href="style.css?v=20260531u">
<style> <style>
.filter-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;align-items:center;margin:0 0 .4rem} .filter-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;align-items:center;margin:0 0 .4rem}
.filter-input-wrap{position:relative;min-width:0} .filter-input-wrap{position:relative;min-width:0}

2
new.php
View file

@ -1040,7 +1040,7 @@ $editDir = null; $editStatus = ''; $editRunning = false; $editData = ['title'=>'
if ($editName !== '' || $editId !== '') { try { $editDir = resolve_input_dir_from_request($config['uploads_dir'], $editId, $editName, $articleIndex); $editStatus = input_dir_status($editDir); $editRunning = input_dir_running($editDir); if (!$editRunning) { $editData = read_data($editDir); $editFiles = media_sort_files($editDir, list_files($editDir)); } } catch (Throwable $e) { $err = $e->getMessage(); } } if ($editName !== '' || $editId !== '') { try { $editDir = resolve_input_dir_from_request($config['uploads_dir'], $editId, $editName, $articleIndex); $editStatus = input_dir_status($editDir); $editRunning = input_dir_running($editDir); if (!$editRunning) { $editData = read_data($editDir); $editFiles = media_sort_files($editDir, list_files($editDir)); } } catch (Throwable $e) { $err = $e->getMessage(); } }
$runningJobs = active_worker_jobs($config); $runningJobs = active_worker_jobs($config);
?> ?>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>MVLog Admin</title><link rel="icon" type="image/png" href="assets/img/moto_travel.png"><link rel="stylesheet" href="style.css?v=20260531k"><style>.admin-search-form{display:flex;flex-wrap:nowrap;align-items:center;gap:.55rem;margin:0 0 .6rem;overflow-x:auto;padding-bottom:2px}.admin-search-wrap{position:relative;min-width:180px;flex:1 1 auto}.admin-search-wrap input{margin:0;padding-right:2.15rem}.admin-search-clear{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#C46A3A;color:#111315;text-decoration:none;font-size:1rem;line-height:1;font-weight:700;box-shadow:0 1px 4px #0007;transition:opacity .15s ease,transform .15s ease}.admin-search-clear:hover{background:#d97b48;color:#111315;transform:translateY(-50%) scale(1.05)}.admin-search-clear.is-empty{opacity:.38;pointer-events:none}.admin-search-submit{display:inline-grid;place-items:center;width:2.35rem;height:2.35rem;padding:0;border-radius:.5rem;background:#C46A3A;color:#111315;flex:0 0 auto}.admin-search-submit .icon{font-size:1.02rem;line-height:1;transform:translateY(.01em)}.admin-search-filters{display:flex;flex-wrap:nowrap;gap:.7rem;align-items:center;flex:0 0 auto;white-space:nowrap}.admin-filter-item{display:inline-flex;align-items:center;gap:.35rem;margin:0;white-space:nowrap;font-size:.92rem}.admin-filter-item input[type=checkbox]{width:.9rem;height:.9rem;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.description-teaser{margin:.2rem 0 .45rem;color:#eadfca}.description-quote{margin:.2rem 0 .45rem;font-style:italic;font-size:.82rem;color:#d4d7dd}</style></head><body> <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>MVL Admin</title><link rel="icon" type="image/png" href="assets/img/moto_travel.png"><link rel="stylesheet" href="style.css?v=20260531u"><style>.admin-search-form{display:flex;flex-wrap:nowrap;align-items:center;gap:.55rem;margin:0 0 .6rem;overflow-x:auto;padding-bottom:2px}.admin-search-wrap{position:relative;min-width:180px;flex:1 1 auto}.admin-search-wrap input{margin:0;padding-right:2.15rem}.admin-search-clear{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#C46A3A;color:#111315;text-decoration:none;font-size:1rem;line-height:1;font-weight:700;box-shadow:0 1px 4px #0007;transition:opacity .15s ease,transform .15s ease}.admin-search-clear:hover{background:#d97b48;color:#111315;transform:translateY(-50%) scale(1.05)}.admin-search-clear.is-empty{opacity:.38;pointer-events:none}.admin-search-submit{display:inline-grid;place-items:center;width:2.35rem;height:2.35rem;padding:0;border-radius:.5rem;background:#C46A3A;color:#111315;flex:0 0 auto}.admin-search-submit .icon{font-size:1.02rem;line-height:1;transform:translateY(.01em)}.admin-search-filters{display:flex;flex-wrap:nowrap;gap:.7rem;align-items:center;flex:0 0 auto;white-space:nowrap}.admin-filter-item{display:inline-flex;align-items:center;gap:.35rem;margin:0;white-space:nowrap;font-size:.92rem}.admin-filter-item input[type=checkbox]{width:.9rem;height:.9rem;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.description-teaser{margin:.2rem 0 .45rem;color:#eadfca}.description-quote{margin:.2rem 0 .45rem;font-style:italic;font-size:.82rem;color:#d4d7dd}</style></head><body>
<header class="site-header admin-header"><div class="brand-wrap"><a class="header-logo" href="index.php" aria-label="MVLog home"><img src="assets/img/moto_travel.png" alt=""></a><a class="brand" href="index.php"><h1 style="font-size:1.15rem">MVLog <span class="admin-word">Admin</span></h1><p>journal of an<br>unreliable narrator.</p></a></div><div class="header-actions"><a class="contact-link" href="contact.php" aria-label="Contact" title="Contact"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg></a></div></header> <header class="site-header admin-header"><div class="brand-wrap"><a class="header-logo" href="index.php" aria-label="MVLog home"><img src="assets/img/moto_travel.png" alt=""></a><a class="brand" href="index.php"><h1 style="font-size:1.15rem">MVLog <span class="admin-word">Admin</span></h1><p>journal of an<br>unreliable narrator.</p></a></div><div class="header-actions"><a class="contact-link" href="contact.php" aria-label="Contact" title="Contact"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg></a></div></header>
<main> <main>
<?php if($err): ?><div class="err"><?=h($err)?></div><?php endif; ?> <?php if($err): ?><div class="err"><?=h($err)?></div><?php endif; ?>

4
style.css
View file

@ -1,4 +1,4 @@
@font-face{font-family:BebasNeue;src:url('assets/fonts/BebasNeue-Regular.ttf')}@font-face{font-family:IBMPlexCaption;src:url('assets/fonts/IBMPlexSans-SemiBold.ttf')}@font-face{font-family:NotoStamp;src:url('assets/fonts/NotoSans-Bold.ttf')}:root{font-family:IBMPlexCaption,system-ui,sans-serif;color:#F3F4F6;background:#111315}html,body{overflow-x:hidden}body{margin:0;background:#111315 url(assets/img/background.jpg) center center/cover fixed no-repeat;min-height:100vh}body::before{content:'';position:fixed;inset:0;background:rgba(17,19,21,.78);z-index:-1}header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(27,30,34,.92);backdrop-filter:blur(6px);color:#F3F4F6;padding:1.15rem max(1rem,calc((100vw - 1100px)/2 + 1rem));box-sizing:border-box;text-align:center;box-shadow:0 2px 16px #0008}header h1{font-family:NotoStamp,system-ui,sans-serif;font-size:.95rem;letter-spacing:.06em;margin:0}.site-header{background:linear-gradient(180deg,rgba(27,30,34,.88),rgba(27,30,34,.62));border-bottom:1px solid rgba(59,167,160,.35)}.brand-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.brand{position:relative;display:inline-block;padding:.1rem 1.5rem .3rem;text-decoration:none;color:#F3F4F6}.brand::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:12.5rem;height:2px;background:#3BA7A0;opacity:.6;z-index:0}.brand h1,.brand p{position:relative;z-index:2}.brand p{font-family:NotoStamp,system-ui,sans-serif;margin:.1rem 0 0;color:#A0A4AB;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase}.header-logo{position:absolute;left:50%;top:calc(100% - .74rem);transform:translate(-50%,-46%) translateX(-7.65rem);display:block;width:6.9rem;height:6.9rem;overflow:visible;z-index:1;opacity:.7}.header-logo img{width:100%;height:100%;object-fit:contain;display:block}.push-toggle{box-sizing:border-box;appearance:none;-webkit-appearance:none;position:absolute;right:calc(max(1rem,calc((100vw - 1100px)/2 + 1rem)) + 2.35rem);top:.8rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;background:#3BA7A0;border:1px solid #3BA7A0;border-radius:.4rem;color:#111315;padding:0}.push-toggle svg{width:1rem;height:1rem;fill:currentColor}.push-toggle:hover{background:#4fb9b2;border-color:#4fb9b2;color:#111315}.push-toggle.active{background:#C46A3A;border-color:#C46A3A;color:#fff;cursor:default;opacity:.9}.push-toggle:disabled{cursor:default}.rss-link{box-sizing:border-box;position:absolute;right:max(1rem,calc((100vw - 1100px)/2 + 1rem));top:.8rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;background:#C46A3A;border:1px solid #C46A3A;border-radius:.4rem;text-decoration:none;color:#fff}.rss-link svg{width:1rem;height:1rem;fill:currentColor}.rss-link:hover{background:#d97b48;border-color:#d97b48;color:#fff}.site-header.admin-header{padding-bottom:1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}.brand .admin-word{font-size:.5em}.site-header.admin-header .brand-wrap{grid-column:2}.site-header.admin-header .brand{grid-column:auto}.admin-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:.7rem}.admin-right{grid-column:3;justify-self:stretch;width:100%;display:flex;align-items:flex-end;justify-content:flex-end;gap:.6rem}.job-status{display:flex;align-items:center;gap:.35rem;max-width:360px;overflow:hidden;white-space:nowrap;color:#A0A4AB;font-size:.72rem;margin-right:auto;padding-bottom:.3rem}.job-status strong{color:#F3F4F6;font-weight:600}.job-dot{width:.45rem;height:.45rem;border-radius:50%;background:#C46A3A;box-shadow:0 0 0 .14rem rgba(196,106,58,.18)}.job-age{color:#A0A4AB;opacity:.85;font-size:.72rem}.logout-link{background:#111315;border:1px solid #3BA7A0;border-radius:.4rem;padding:.35rem .7rem;text-decoration:none;color:#F3F4F6;font-size:.82rem}.logout-link:hover{background:#3BA7A0;color:#111315}a{color:#3BA7A0}.button,button{background:#C46A3A;color:#111315;border:0;border-radius:.5rem;padding:.7rem 1rem;text-decoration:none;cursor:pointer}.button.disabled{background:#3a3d42;color:#A0A4AB;cursor:not-allowed;opacity:.75}button.danger{background:#8B1E1E;color:#F3F4F6}button.danger:hover{background:#B32626}nav a{margin-left:1rem;color:#F3F4F6}/* Header buttons */ @font-face{font-family:BebasNeue;src:url('assets/fonts/BebasNeue-Regular.ttf')}@font-face{font-family:IBMPlexCaption;src:url('assets/fonts/IBMPlexSans-SemiBold.ttf')}@font-face{font-family:NotoStamp;src:url('assets/fonts/NotoSans-Bold.ttf')}:root{font-family:IBMPlexCaption,system-ui,sans-serif;color:#F3F4F6;background:#111315}html,body{overflow-x:hidden}body{margin:0;background:#111315 url(assets/img/background.jpg) center center/cover fixed no-repeat;min-height:100vh}body::before{content:'';position:fixed;inset:0;background:rgba(17,19,21,.78);z-index:-1}header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(27,30,34,.92);backdrop-filter:blur(6px);color:#F3F4F6;padding:1.15rem max(1rem,calc((100vw - 1100px)/2 + 1rem));box-sizing:border-box;text-align:center;box-shadow:0 2px 16px #0008}header h1{font-family:NotoStamp,system-ui,sans-serif;font-size:.95rem;letter-spacing:.06em;margin:0}.site-header{background:linear-gradient(180deg,rgba(27,30,34,.88),rgba(27,30,34,.62));border-bottom:1px solid rgba(59,167,160,.35)}.brand-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.brand{position:relative;display:inline-block;padding:.1rem 1.5rem .3rem;text-decoration:none;color:#F3F4F6}.brand::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:12.5rem;height:2px;background:#3BA7A0;opacity:.6;z-index:0}.brand h1,.brand p{position:relative;z-index:2}.brand h1{margin:0;transform:translateY(.1rem)}.brand p{font-family:NotoStamp,system-ui,sans-serif;margin:.46rem 0 0;color:#A0A4AB;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;transform:translateY(.1rem)}.header-logo{position:absolute;left:50%;top:calc(100% - 1.0rem);transform:translate(-50%,-46%) translateX(-7.65rem);display:block;width:6.9rem;height:6.9rem;overflow:visible;z-index:1;opacity:.7}.header-logo img{width:100%;height:100%;object-fit:contain;display:block}.push-toggle{box-sizing:border-box;appearance:none;-webkit-appearance:none;position:absolute;right:calc(max(1rem,calc((100vw - 1100px)/2 + 1rem)) + 2.35rem);top:.8rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;background:#3BA7A0;border:1px solid #3BA7A0;border-radius:.4rem;color:#111315;padding:0}.push-toggle svg{width:1rem;height:1rem;fill:currentColor}.push-toggle:hover{background:#4fb9b2;border-color:#4fb9b2;color:#111315}.push-toggle.active{background:#C46A3A;border-color:#C46A3A;color:#fff;cursor:default;opacity:.9}.push-toggle:disabled{cursor:default}.rss-link{box-sizing:border-box;position:absolute;right:max(1rem,calc((100vw - 1100px)/2 + 1rem));top:.8rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;background:#C46A3A;border:1px solid #C46A3A;border-radius:.4rem;text-decoration:none;color:#fff}.rss-link svg{width:1rem;height:1rem;fill:currentColor}.rss-link:hover{background:#d97b48;border-color:#d97b48;color:#fff}.site-header.admin-header{padding-bottom:1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}.brand .admin-word{font-size:.5em}.site-header.admin-header .brand-wrap{grid-column:2}.site-header.admin-header .brand{grid-column:auto}.admin-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:.7rem}.admin-right{grid-column:3;justify-self:stretch;width:100%;display:flex;align-items:flex-end;justify-content:flex-end;gap:.6rem}.job-status{display:flex;align-items:center;gap:.35rem;max-width:360px;overflow:hidden;white-space:nowrap;color:#A0A4AB;font-size:.72rem;margin-right:auto;padding-bottom:.3rem}.job-status strong{color:#F3F4F6;font-weight:600}.job-dot{width:.45rem;height:.45rem;border-radius:50%;background:#C46A3A;box-shadow:0 0 0 .14rem rgba(196,106,58,.18)}.job-age{color:#A0A4AB;opacity:.85;font-size:.72rem}.logout-link{background:#111315;border:1px solid #3BA7A0;border-radius:.4rem;padding:.35rem .7rem;text-decoration:none;color:#F3F4F6;font-size:.82rem}.logout-link:hover{background:#3BA7A0;color:#111315}a{color:#3BA7A0}.button,button{background:#C46A3A;color:#111315;border:0;border-radius:.5rem;padding:.7rem 1rem;text-decoration:none;cursor:pointer}.button.disabled{background:#3a3d42;color:#A0A4AB;cursor:not-allowed;opacity:.75}button.danger{background:#8B1E1E;color:#F3F4F6}button.danger:hover{background:#B32626}nav a{margin-left:1rem;color:#F3F4F6}/* Header buttons */
.header-actions { .header-actions {
position: absolute; position: absolute;
right: max(1rem,calc((100vw - 1100px)/2 + 1rem)); right: max(1rem,calc((100vw - 1100px)/2 + 1rem));
@ -113,7 +113,7 @@ main { max-width:1100px; margin:2rem auto; padding:7.5rem 1rem 7rem; }
.caption-row button[type="button"]{width:100%} .caption-row button[type="button"]{width:100%}
} }
@media (max-width: 900px){ @media (max-width: 900px){
.header-logo{top:calc(100% - 1.24rem);transform:translate(-50%,-46%) translateX(-7.65rem)} .header-logo{top:calc(100% - 1.5rem);transform:translate(-50%,-46%) translateX(-7.65rem)}
} }
.describe-button{display:inline-block;margin-right:.6rem} .describe-button{display:inline-block;margin-right:.6rem}