align typewriter logo pc & mobile

layouts/home.html

@@ -57,19 +57,35 @@
         .title-wrapper {
             display: flex;
             flex-direction: row;
-            gap: 10px;
+            gap: 30px;
-            justify-content: space-between;
+            justify-content: flex-start; /* Change from space-between to flex-start */
+            align-items: center; /* Ensure vertical alignment */
         }
         .site-title {
-            flex-grow: 1;
+            flex-grow: 0; /* Prevent automatic growth */
-            margin: 0; /* Remove default margin */
+            flex-shrink: 1; /* Allow shrinking if needed */
-            font-size: 3rem; /* Adjust font size as 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,10 +223,17 @@
         <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>
+                </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"
@@ -211,12 +258,6 @@
                 {{- end }}
             </div>
             
-
-                <nav class="navigation">
-                    {{ partial "menu.html" }}
-                </nav>
-            </div>
-            
             <div class="center-content">
                 <div class="presentation">
                     {{ .Content }}