New Header, minor changes

malte-j · Dec 10, 2020 · 99d3a65 · 99d3a65
1 parent 6ad0ae9
commit 99d3a65
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 62 deletions.
diff --git a/themes/argo/footer.php b/themes/argo/footer.php
@@ -13,23 +13,30 @@
 
 	<footer id="colophon" class="site-footer">
 		<?php
-							wp_nav_menu(
-								array(
-									'theme_location' => 'menu-2',
-									'menu_id'        => 'footer',
-									'container'			 => false,
-								)
-							);
+			$items_wrap = '<ul id="%1$s" class="%2$s">%3$s';
+			$items_wrap .= "<li>
+				<a>Unsere Daten</a>
+				<ul class=\"sub-menu\">
+					<li>Gerichtstr. 19, DE 13347 Berlin</li>
+					<li>Geschäftsführer: Luis Rieke</li>
+					<li>Berlin-Charlottenburg - HRB 195740 B</li>
+					<li>USt-ID: DE317616086</li>
+				</ul>
+			</li>";
+			$items_wrap .= "</ul>";
+			wp_nav_menu(
+				array(
+					'theme_location' => 'menu-2',
+					'menu_id'        => 'footer',
+					'container'			 => false,
+					'items_wrap' => $items_wrap
+				)
+			);
 			?>
-			<p>
-				&copy 2020 Spacifik (haftungsbeschränkt)<br/>
-				Gerichtstr. 19, DE 13347 Berlin <br/>
-				Geschäftsführender Gesellschafter: Luis Rieke<br/>
-				Amtsgericht Berlin-Charlottenburg - HRB 195740 B<br/>
-				USt-ID: DE317616086.
-			</p>
-	</footer><!-- #colophon -->
-</div><!-- #page -->
+
+			<p>&copy 2020 Spacifik UG (haftungsbeschränkt)</p>
+	</footer>
+</div>
 
 <?php wp_footer(); ?>
 

diff --git a/themes/argo/page-home.php b/themes/argo/page-home.php
@@ -2,12 +2,16 @@
 get_header();
 ?>
 
-<header class="landing-header"> 
-  <div class="info">
-    <h1><?php the_field('intro_text'); ?></h1>
-    <a href="/kontakt" class="button">Durchstarten</a>
-  </div>
-  <div class="illustration" data-lottie data-animation-path="/wp-content/themes/argo/media/digitalstrategy.json"></div>
+<header class="landing-header">
+    <div class="info">
+      <h1 class="desktop_text"><?php the_field('intro_text'); ?></h1>
+      <a href="/kontakt" class="button">Durchstarten</a>
+    </div>
+    <h1 class="mobile_text"><?php the_field('intro_text'); ?></h1>
+    <div class="gap"></div>
+    <div class="img">
+      <?php echo get_header_image_tag() ?>
+    </div>
 </header>
 <main class="landing-body">
 

diff --git a/themes/argo/page-kontakt.php b/themes/argo/page-kontakt.php
@@ -67,7 +67,7 @@
 		<input type="email" name="email" id="email" placeholder="[email protected]">
 
 		<label for="info" class="label">Weitere Details</label>
-		<textarea name="info" id="info" cols="12" rows="5"></textarea>
+		<textarea name="info" id="info" cols="12" rows="5" placeholder="Außerdem..."></textarea>
 
 		<label for="question" class="label">Was sind 5 + 3?</label>
 		<input type="text" name="question" id="question">

diff --git a/themes/argo/scss/components/landing-header.scss b/themes/argo/scss/components/landing-header.scss
@@ -5,69 +5,80 @@ $navbar-height: 80px;
   // sizing
   height: 100%;
 
+  padding-top: 80px;
   display: flex;
+  flex-direction: column;
   position: relative;
   overflow: hidden;
 
   h1 {
-    font-family: inherit;
+    font-family: "Space Mono";
     font-weight: 400;
-    margin: 0;
-    padding: 1rem;
     text-align: center;
-    font-size: 3rem;
-    background: rgb(255, 255, 255); 
   }
 
+  .desktop_text {
+    display: none;
+  }
 
   .button {
-    background: rgb(0, 0, 0);
-    font-size: 1.2rem;
+    font-size: calc(1.5rem);
     color: white;
-    padding: 1.3rem 1.6rem;
     text-decoration: none;
+    background: black;
+    padding: 1.1rem 1.3rem;
+    display: block;
+    font-family: "Space Mono";
+    font-weight: 400;
   }
 
-  .illustration {
-    width: 100%;
-    bottom: 0;
+  .info {
     position: absolute;
+    width: 100%;
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    bottom: 1rem;
+    margin: 0 auto;
   }
 
-  .info {
-    z-index: 1;
-    width: 100%;
-    display: grid;
+  .mobile_text {
+    flex-grow: 1;
+    padding: 0 .5rem;
+  }
 
-    justify-items: center;
+  @media (min-aspect-ratio: 1/1) {
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
 
-    padding-top: 80px;
-  }
+    .info {
+      width: auto;
+      position: relative;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+    }
+
+    .mobile_text {
+      display: none;
+    }
 
+    .desktop_text {
+      display: block;
+      max-width: 16ch;
+    }
+
+    .img img {
+      max-height: 80vh;
+      object-fit: cover;
+      width: auto;
+    }
 
-  @media screen and (max-aspect-ratio: 9/11){
-    // align-items: flex-end;
-
-    // .info {
-    //   position: absolute;
-    //   height: 100%;
-    //   width: 100%;
-    //   top :0;
-    //   left: 0;
-    //   justify-content: space-evenly;
-    //   z-index: 1;
-    //   padding-top: $navbar-height;
-    //   // padding-bottom: 1rem;
-    // }
+    .gap {
+      flex: 0 100 5rem;
+    }
 
-    // .illustration {
-    //   width: 100%;
-    //   padding-bottom: 2rem;
-    // }
   }
 
   // fix full height for ios, except below ios 12