1.0.9

- Iconen in header aangepast qua stijl - home-intro opnieuw opgebouwd ivm Youtube en foto rechts
catapultcc · Oct 3, 2019 · 5a4f730 · 5a4f730
1 parent 075cb68
commit 5a4f730
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+1.0.9 Bugfix
+- Iconen in header aangepast qua stijl
+- home-intro opnieuw opgebouwd ivm Youtube en foto rechts 
+
 1.0.8 Bugfix
 - FontAwesome KIT toegevoegd
 - Linkedin icon toegevoegd

diff --git a/assets/sass/opmaak.scss b/assets/sass/opmaak.scss
@@ -293,15 +293,13 @@ h6 {
 }
 .social-icons-header a {
 	font-size: 0.60rem;
-	display: inline-block;
-	margin-left: 10px;
 }
 .social-icons-header button {
     font-size: 0.6rem;
     background-color: transparent;
     border: none;
     cursor: pointer;
-    margin-left:5px;
+    padding: 0;
 }
 .zoek-header  {
     padding-top:22px;
@@ -433,11 +431,11 @@ nav.navbar {
     opacity: 0.9;
 }
 img.headerlogo {
-	width: 125px;
+	width: 120px;
 	margin-left: 15px;
 }
 .navbar-brand {
-	width: 140px;
+	width: 125px;
 }
 
 
@@ -510,10 +508,10 @@ img.headerlogo {
     background-position: top;
 }
 .topinfo {
-	width: 50%;
+	width: 35%;
     text-align: right;
     height: 0;
-    padding-top: 20px;
+    padding-top: 25px;
 }
 .scrolldown p, .scrolldown i {
 	color: #fff;
@@ -1219,14 +1217,25 @@ input.search-field {
 	#mc_embed_signup form {
 		width: 411px!important;
 	}
+    .topinfo {
+        width: 45%;
+    }
 }
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {
     #home-intro {
-        margin-top:143px;
+        margin-top: 140px;
         background-position: top right;
         background-size:50%; 
     }
+    #home-intro-rechts {
+        background-size: cover; 
+        height: 50vh; 
+        position: relative; 
+        z-index: 9; 
+        width: 50vw; 
+        background-position: center;
+    }
     .intro-buttons {
         display:none;
     }
@@ -1299,7 +1308,7 @@ input.search-field {
 /* Extra large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
 	.home-intro-tekst-inner {
-		min-height: 115px;
+		min-height: 200px;
 	}
 	.extra-p-r {
 		padding-right: 60px;

diff --git a/page-homepage.php b/page-homepage.php
@@ -8,21 +8,35 @@
 
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
-<?php $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( ), 'large' );?>
+<?php if ( get_field('headerafbeelding_rechts') ):
+    $hoofdAfbeelding = get_field('headerafbeelding_rechts');
+    $size = 'full';
+    $afbeeldingID = $hoofdAfbeelding['ID'];
+    $afbeeldingAlt = $hoofdAfbeelding['alt'];
+    $afbeeldingArray = wp_get_attachment_image_src($afbeeldingID, $size);
+    $afbeeldingUrl = $afbeeldingArray[0];
+endif; ?>
 
-
-<section id="home-intro">
+<section id="home-intro" style="overflow: hidden">
 	<div class="container ">
-		<div class="row pt-2 pt-md-5">
-<?php if( get_field('youtube_video') == ''): ?>
-            <div class="col-12 p-0">
-                <img class="d-lg-none" src="<?php echo $image_attributes[0]; ?>" alt="<?php the_title(); ?>" width="100%">
+		<div class="row row-eq-height">
+            <?php if( get_field('youtube_video') == ''): ?>
+            <div class="col-12 d-lg-none p-0">
+                <img class="d-lg-none" src="<?php echo $afbeeldingUrl; ?>" alt="<?php echo $afbeeldingAlt; ?>" width="100%">
             </div>
-            <style>@media (min-width: 992px) { 
-                #home-intro {background-image: url('<?php echo $image_attributes[0]; ?>'); } }
+            <style>
+            @media (min-width: 992px) { 
+                #home-intro-rechts {
+                    background-image: url('<?php echo $afbeeldingUrl; ?>'); 
+                    background-size: cover;
+                } 
+                #home-intro-tekst {
+                    height: 50vh
+                }
+            }
             </style>
-<?php endif; ?>
-			<div id="home-intro-tekst" class="col-12 col-lg-6 d-flex pb-3 align-items-center">
+            <?php endif; ?>
+			<div id="home-intro-tekst" class="col-12 col-lg-6 d-flex pb-3 align-items-center pt-2 pt-md-5">
 				<div class="d-inline-block">
                     <h3 class="mb-2 mt-5 mt-lg-0"><?php echo get_field('subtitel_pagina');?></h3>
                     <h1 class="mb-4"><?php the_title(); ?></h1>
@@ -37,15 +51,18 @@
 					</div>
                 </div>
 			</div>
-            <div class="col-12 col-lg-6 " >
-                <div class="d-inline rem30 tekst-secondair">
-<?php if( get_field('youtube_video') ): ?>
-                    <div class="mt-3 mt-lg-5" style="position:relative;padding-top:56.6%;">
-                        <iframe  src="https://www.youtube.com/embed/<?php echo get_field('youtube_video');?>?controls=0&autoplay=1&fs=0&loop=1&rel=0&showinfo=0&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:99%;height:99%;border:2px solid #fff" ></iframe>
-                    </div>
-<?php endif; ?>
+            <?php if( get_field('youtube_video') ): ?>
+            <div class="col-12 col-lg-6" >
+                <div style="position:relative;padding-top:56.6%; margin-top: 10vh;">
+                    <iframe  src="https://www.youtube.com/embed/<?php echo get_field('youtube_video');?>?controls=0&autoplay=1&fs=0&loop=1&rel=0&showinfo=0&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:99%;height:99%;border:2px solid #fff" ></iframe>
+                </div>
+            </div>
+            <?php else : ?>
+            <div class="col-12 col-lg-6" style="overflow-x: visible;">
+                <div id="home-intro-rechts" class="rem30 tekst-secondair d-none d-md-block">
                 </div>
             </div>
+            <?php endif; ?>
 		</div>
 	</div>
 </section>
@@ -64,11 +81,10 @@
                                 ">
                         <h3 class="<?php if($blokTeller == 1) : echo "tekst-wit"; endif; ?>"><?php the_sub_field('blok_titel'); ?></h3>
                         <?php
-                        //if($blokTeller <= 3) : 
                             echo '<div class="icoon-hoek';
                             if($blokTeller == 1) : echo ' tekst-wit '; endif;
                             echo '">'.get_sub_field('blok_icoon').'</div>'; 
-                        //endif; ?>
+                        ?>
                         <div class="arrow-hoek <?php if($blokTeller == 1) : echo "tekst-wit"; endif; ?>">
                             <i class="fal fa-long-arrow-right"></i>
                         </div>

diff --git a/style.css b/style.css
@@ -3,7 +3,7 @@ Theme Name: Catent Basisschool
 Theme URI: https://www.catapult.nl
 Description: Driven by Catapult - Stichting Catent
 Author: Jurre Hengstman & Hans Nep
-Version: 1.0.8
+Version: 1.0.9
 GitHub Theme URI: https://github.com/catapultcc/catent-basisschool
 */