admin/scribe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Center logo above title in header for desktop and mobile
Mirror and run GitLab CI / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
admin
2026-06-14 21:00:04 +00:00
parent e74bc04cb3
commit fd94e2daa0
1 changed files with 54 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
misc/header.html
+54 -58
View File
@@ -9,15 +9,29 @@
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet">
<style> <style>
.header-container {{ .header-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 20px 0;
box-sizing: border-box;
}
.logo-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
padding: 20px 40px; margin-bottom: 10px;
box-sizing: border-box; }
}}
.header-title {{ .logo {
width: 120px;
height: auto;
display: block;
}
.header-title {
font-family: 'Cormorant Garamond', serif; font-family: 'Cormorant Garamond', serif;
font-size: 42px; font-size: 42px;
font-weight: bold; font-weight: bold;
@@ -25,94 +39,76 @@
margin: 0; margin: 0;
position: relative; position: relative;
padding: 0.4em 0; padding: 0.4em 0;
flex: 1; text-align: center;
}} max-width: 90%;
}
.header-title::before, .header-title::after {{ .header-title::before,
.header-title::after {
content: ""; content: "";
position: absolute; position: absolute;
height: 2px; height: 2px;
width: 100%; width: 80%;
background-color: {accent_color}; background-color: {accent_color};
left: 0; left: 10%;
}} }
.header-title::before {{ top: 0.4em; }} .header-title::before {
.header-title::after {{ bottom: 0.4em; }} top: 0.4em;
}
.logo-container {{ .header-title::after {
display: inline-block; bottom: 0.4em;
max-width: 75px; }
max-height: 75px;
margin-left: 20px;
}}
.logo {{ .header-description {
max-width: 100%;
max-height: 100%;
height: auto;
display: block;
}}
.header-description {{
text-align: center; text-align: center;
padding: 10px 40px 20px; padding: 10px 40px 20px;
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
}} }
.header-description p, .header-description p,
.header-description h2 {{ .header-description h2 {
font-size: 15px; font-size: 15px;
margin: 8px 0; margin: 8px 0;
line-height: 1.5; line-height: 1.5;
}} }
.header-description h2 {{ .header-description h2 {
font-weight: bold; font-weight: bold;
color: {accent_color}; color: {accent_color};
}} }
@media (max-width: 768px) {{ @media (max-width: 768px) {
.header-container {{ .header-title {
flex-direction: column;
align-items: center;
padding: 15px;
gap: 10px;
}}
.header-title {{
font-size: 28px; font-size: 28px;
text-align: center; }
}}
.header-title::before, .header-title::after {{ .header-title::before,
.header-title::after {
width: 80%; width: 80%;
left: 10%; left: 10%;
}} }
.logo-container {{ .logo {
margin-left: 0; width: 110px;
}} }
.logo {{ .header-description {
height: 16px;
}}
.header-description {{
padding: 10px 20px 15px; padding: 10px 20px 15px;
}} }
}} }
</style> </style>
</head> </head>
<body> <body>
<div class="header-container"> <div class="header-wrapper">
<h1 class="header-title">{webui_title}</h1>
<div class="logo-container"> <div class="logo-container">
<a href="{header_logo_url}"> <a href="{header_logo_url}">
<img src="{header_logo_src}" alt="{webui_title}" class="logo"> <img src="{header_logo_src}" alt="{webui_title}" class="logo">
</a> </a>
</div> </div>
<h1 class="header-title">{webui_title}</h1>
</div> </div>
<div class="header-description"> <div class="header-description">
<p> <p>