diff --git a/layouts/home.html b/layouts/home.html index 23676bf..b40f12f 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -27,8 +27,6 @@ align-items: stretch; /* Ensure full height */ min-height: 100vh; /* Ensure the body takes up the full viewport height */ } - - .main-screen { display: flex; flex-direction: row; @@ -56,6 +54,12 @@ align-items: center; /* Align items vertically in the center */ padding: 10px 20px; /* Optional: Add some padding */ } + .title-wrapper { + display: flex; + flex-direction: row; + gap: 10px; + justify-content: space-between; + } .site-title { flex-grow: 1; margin: 0; /* Remove default margin */ @@ -65,25 +69,14 @@ .navigation { flex-grow: 3; display: flex; - } - .navigation ul { - display: flex; - flex-wrap: wrap; /* Allow items to wrap onto multiple lines */ - list-style: none; - margin: 0; /* Remove default margin */ - padding: 0; /* Remove default padding */ - justify-content: flex-end; /* Align items to the right */ + .presentation, .side-content-column > * { + background-color: var(--entry); + padding: 10px; + border-radius: var(--radius); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } - .navigation ul li { - margin: 0 10px 0 10px; - - } - .navigation ul li a:hover { - text-decoration: underline; /* Add underline on hover */ - - } - .center-content { + .center-content, .side-content-column { display: flex; flex-grow: 1; /* Allow it to grow */ gap: 20px; /* Optional: Add spacing between child elements */ @@ -99,8 +92,22 @@ } .side-content-column { max-width: 100%; /* Ensure it doesn't exceed its container */ + flex-direction: column; } - @media (max-width: 1380px) { + .excerpt { + display: flex; + align-items: center; /* Align items vertically in the center */ + gap: 10px; /* Add spacing between text and image */ + } + .excerpt-text { + flex: 1; /* Allow text to take up remaining space */ + } + .excerpt img { + flex-shrink: 0; /* Prevent the image from shrinking */ + max-width: 150px; /* Ensure the image doesn't exceed its intended size */ + height: auto; /* Maintain aspect ratio */ + } + @media (max-width: 1600px) { .side-screen { display: none; /* Hide side-screens on smaller screens */ } @@ -171,24 +178,8 @@
{{ .Plain | plainify | truncate 100 }}
+{{ .Plain | plainify | truncate 100 }}
+{{ .Plain | plainify | truncate 100 }}
+