🧪 Teste 2 divs no header

brenorb · May 30, 2024 · 61ee001 · 61ee001
1 parent 4d9d330
commit 61ee001
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -25,20 +25,23 @@
 	</head>
 
 	<body>
-		<header style="background-image: url('{% include relative-src.html src=page.background_image_path %}');" {% if page.large_header %}class="main-hero"{% endif %}>
-			<div class="container">
-				<h1><a href="{{ site.baseurl }}/">{{ site.data.company.title }}</a></h1>
-				<nav>
-					<ul>
-						{% assign nav_pages = site.html_pages | where: 'show_in_navigation', true | sort: 'navigation_order' %}
-						{% for nav_page in nav_pages %}
+		<header>
+			<div class="header-image" style="background-image: url('{% include relative-src.html src=page.background_image_path %}');" {% if page.large_header %}class="main-hero"{% endif %}></div>
+			<div class="header-content">
+				<div class="container">
+					<h1><a href="{{ site.baseurl }}/">{{ site.data.company.title }}</a></h1>
+					<nav>
+						<ul>
+							{% assign nav_pages = site.html_pages | where: 'show_in_navigation', true | sort: 'navigation_order' %}
+							{% for nav_page in nav_pages %}
 							{% if previous_page.path != nav_page.path %}
-								{% assign previous_page = nav_page %}
-								<li><a {% if nav_page.url == page.url %}class="active"{% endif %} href="{{ site.baseurl }}{{ nav_page.url }}">{{ nav_page.title }}</a></li>
+							{% assign previous_page = nav_page %}
+							<li><a {% if nav_page.url == page.url %}class="active"{% endif %} href="{{ site.baseurl }}{{ nav_page.url }}">{{ nav_page.title }}</a></li>
 							{% endif %}
-						{% endfor %}
-					</ul>
-				</nav>
+							{% endfor %}
+						</ul>
+					</nav>
+				</div>
 			</div>
 		</header>
 

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -17,11 +17,32 @@ body {
 }
 
 header {
-	background-size: cover;
+	display: flex;
+    flex-direction: column; /* Stack on top for mobile */
+    height: auto;
+
+	.header-image {
+        background-image: url('/uploads/building.jpg');
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        height: 200px; /* Adjust as needed for mobile */
+        width: 100%;
+    }
+
+	/* background-size: cover;
 	background-repeat: no-repeat;
 	background-position: calc(50% - 40px) 175px;
 	height: 420px;
-	box-sizing: border-box;
+	box-sizing: border-box; */
+
+	.header-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 30px 20px;
 
 	.container {
 		text-align: center;