contained height depending on view width

.gitignore

@@ -1,2 +1 @@
-20200323-hangar-theme.tar.gz
+*.tar.gz
-20200323-hangarweb-themes.tar.gz

hangar/css/styleHangar.css

@@ -263,3 +263,81 @@ table.cf7-db-table tbody td > div {
 	 padding-bottom:15px;
  }
 }
+
+/* mods 2022 01 31st */
+/* WIDGET HOME HERO
+------------------------------------------*/
+
+@media screen {
+  aside.hero {
+    display: flex;
+    width: auto;
+  }
+  aside.hero .widget-container {
+    position: relative;
+    min-width: 100%;
+    height: 40vw;
+    margin-bottom: 2rem;
+    overflow: hidden;
+  }
+  aside.hero .widget-container .widget-title {
+    position: absolute;
+    z-index: 100;
+    width: 75%;
+    margin: 3rem 1rem;
+    padding: 1rem;
+    font-size: 3rem;
+    font-weight: bold;
+		line-height: 1.5rem;
+    color: blue;
+  }
+  aside.hero .widget-container img {
+    position: absolute;
+    z-index: 99;
+    top: -20%;
+    width: 100%;
+    height: auto;
+  }
+  aside.hero .widget-container p {
+    position: absolute;
+    z-index: 101;
+    bottom: 0;
+		width: 70%;
+    margin: 2rem 1rem;
+    padding: 1rem;
+    color: rgb(90,90,90);
+    background: rgba(250,250,250,0.8);
+  }
+  
+}
+
+@media screen and (max-width: 768px) {
+  aside.hero .widget-container {
+		width: 90vw;
+		height: 60vw;
+	  margin-top: 2rem;
+  }
+	aside.hero .widget-container .widget-title {
+		font-size: 1.5rem;
+		line-height: 1.3rem;
+		margin: 1rem;
+	}
+	aside.hero .widget-container img {
+    top: 0;
+	}
+	aside.hero .widget-container p {
+		width: auto;
+		margin: 1rem;
+	}
+}
+@media screen and (min-width: 1920px) {
+  aside.hero .widget-container {
+    max-height: 50vh;
+  }
+}
+@media screen and (min-width: 3840px) {
+  aside.hero .widget-container {
+    max-height: 25vh;
+  }
+}
+

hangar/home.php

@@ -10,6 +10,15 @@
 ?>
 
 <?php get_header(); ?>
+
+	<?php if( is_home( )) : ?>
+	<?php // show big widget area if homepage and if active ?>
+    <aside class="hero">
+      <?php if ( ! dynamic_sidebar( 'secondary-widget-area' ) ) : ?>
+      <?php endif; // end secondary widget area ?>
+    </aside>
+  <?php endif; //end if is_home ?>
+
 	<div id="main" class="maingran">
 		<div id="content" class="narrowcolumn indexall"> <!-- esborrar class narrowcolumn -->
 

hangar/index.php

@@ -10,6 +10,12 @@
 
 <div id="main">
 
+	<?php if( is_home( )) : ?>
+		<aside class="hero">
+			<?php if ( ! dynamic_sidebar( 'secondary-widget-area' ) ) : ?>
+			<?php endif; // end secondary widget area ?>
+		</aside>
+	<?php endif; //end if is_home ?>
 	<div id="content">
 		<?php get_template_part( 'loop', 'index' );	?>
 	</div>

hangar/library/widgetized-sidebars.php

@@ -7,7 +7,7 @@ function ari_widgets_init() {
 	register_sidebar( array(
 		'name' => __( 'Primary Widget Area', 'hangar' ),
 		'id' => 'primary-widget-area',
-		'description' => __( 'Here you can put one or two of your main widgets (like an intro text, your page navigation or some social site links) in your left sidebar. The sidebar is fixed, so the widgets content will always be visible, even when scrolling down the page.', 'ari' ),
+		'description' => __( 'Here you can put all the widget elements to be shown in the left side menu.', 'ari' ),
 		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
 		'after_widget' => '</li>',
 		'before_title' => '<h3 class="widget-title">',
@@ -18,15 +18,15 @@ function ari_widgets_init() {
 	register_sidebar( array(
 		'name' => __( 'Secondary Widget Area', 'hangar' ),
 		'id' => 'secondary-widget-area',
-		'description' => __( 'Here you can put all the additional widgets for your right sidebar.', 'hangar' ),
+		'description' => __( 'Here you can put all the additional widgets elements to be shown in the HomePage big announcement.', 'hangar' ),
-		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
+		'before_widget' => '<span id="%1$s" class="widget-container %2$s">',
-		'after_widget' => '</li>',
+		'after_widget' => '</span>',
-		'before_title' => '<h3 class="widget-title">',
+		'before_title' => '<span class="widget-title">',
-		'after_title' => '</h3>',
+		'after_title' => '</span>',
 	) );
 
 }
 /* Register sidebars by running ari_widgets_init() on the widgets_init hook. */
 add_action( 'widgets_init', 'ari_widgets_init' );
 
-?>
+?>

hangar/loop.php

@@ -1,3 +1,6 @@
+<aside class="hero">
+<?php if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
+</aside>
 <?php /* Start the Loop. */ ?>
 <?php while ( have_posts() ) : the_post(); ?>
 
@@ -42,4 +45,4 @@
 <?php if (  $wp_query->max_num_pages > 1 ) : ?>
 				<p class="previous"><?php next_posts_link( __( '&larr; Older posts', 'hangar' ) ); ?></p>
 				<p class="next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'hangar' ) ); ?></p>
-<?php endif; ?>
+<?php endif; ?>