gribse/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

align typewriter logo pc & mobile

Browse source
This commit is contained in:
gribse 2025-05-22 20:07:10 +02:00
parent 53b43836dc
commit 057ac83c4a
1 changed files with 61 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

81
layouts/home.html
View file

@ -57,19 +57,35 @@
.title-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: space-between;
gap: 30px;
justify-content: flex-start; /* Change from space-between to flex-start */
align-items: center; /* Ensure vertical alignment */
}
.site-title {
flex-grow: 1;
margin: 0; /* Remove default margin */
font-size: 3rem; /* Adjust font size as needed */
flex-grow: 0; /* Prevent automatic growth */
flex-shrink: 1; /* Allow shrinking if needed */
margin: 0;
font-size: 2.5rem; /* Reduce from 3rem to 2.5rem */
max-width: 75%; /* Limit the width to prevent overflow */
word-break: normal; /* Ensure proper word breaking */
}
.site-logo {
flex-grow: 0; /* Change from 1 to 0 */
flex-shrink: 0;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
line-height: 0;
width: 75px;
height: auto;
}
.site-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
.logo {
width: 50px; /* Adjust logo size */
height: auto; /* Maintain aspect ratio */
}
.navigation {
flex-grow: 3;
display: flex;
@ -130,6 +146,30 @@
flex: none; /* Reset flex property */
width: 100%; /* Make them take full width */
}
.header {
padding: 10px 0; /* Reduce padding on mobile */
}
.title-wrapper {
width: 100%;
justify-content: flex-start; /* Change from space-between to flex-start */
flex-wrap: wrap; /* Allow wrapping if needed */
}
.site-title {
font-size: 2.5rem; /* Reduce title size on mobile */
max-width: 65%; /* Further limit width on mobile */
flex-grow: 0;
flex-shrink: 0;
}
.site-logo {
width: 70px;
height: 70px;
flex-shrink: 1;
flex-grow: 1;
}
}
</style>
@ -183,11 +223,18 @@
<div class="main-content">
<div class="header">
<div class="title-wrapper">
<h1 class="site-title">Achille Toupin</h1>
<h1 class="site-title">Achille<br/>Toupin</h1>
<div class="site-logo">
<img src="favicon.svg" alt="Logo de macghine à écrire" class="logo"></img>
<img src="favicon.svg" alt="Logo de machine à écrire" class="logo"></img>
</div>
{{- if (not site.Params.disableThemeToggle) }}
</div>
<nav class="navigation">
{{ partial "menu.html" }}
</nav>
{{- if (not site.Params.disableThemeToggle) }}
<button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
@ -208,13 +255,7 @@
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
{{- end }}
</div>
<nav class="navigation">
{{ partial "menu.html" }}
</nav>
{{- end }}
</div>
<div class="center-content">