From 5631d71b31a302c3a8bb61a943edc2f60537ecb0 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Mon, 9 Mar 2020 18:25:44 +0000
Subject: [PATCH] WIP #3413 @7

---
 framework/application/Bootstrap.php           |   2 +-
 .../controllers/NewsController.php            |  15 +-
 .../application/forms/CMS/Sub/News/News.php   |   8 +-
 framework/application/models/News.php         |   2 +-
 .../application/views/helpers/Actualites.php  |  57 ++++---
 framework/application/views/helpers/News.php  |  16 +-
 .../views/scripts/news/index.phtml            |  21 ++-
 js/home-news.js                               |   8 +
 js/news-article.js                            |   4 +-
 js/slick-lightbox.js                          |   3 +
 less/home-news.less                           |  73 +++++++++
 less/news-article.less                        |  65 +++++++-
 less/news.less                                |   8 +-
 less/slick-lightbox.less                      | 155 +++++++++++++++++-
 less/utilities.less                           |  23 +++
 15 files changed, 405 insertions(+), 55 deletions(-)
 create mode 100644 js/home-news.js
 create mode 100644 less/home-news.less

diff --git a/framework/application/Bootstrap.php b/framework/application/Bootstrap.php
index 747932f..bb8f1ea 100644
--- a/framework/application/Bootstrap.php
+++ b/framework/application/Bootstrap.php
@@ -131,7 +131,7 @@ class Bootstrap extends CubeIT_Bootstrap {
 
             $p = new CubeIT_Navigation_Page_Locale();
             $p->setController('News');
-            $p->setId($page->getId() . '/' . $r->id);
+            $p->setId('news/' . $r->id);
             $p->setAutoUri($r, $URL_template);
             $p->setSitemap($online);
             $p->setTitle($pageTitle);
diff --git a/framework/application/controllers/NewsController.php b/framework/application/controllers/NewsController.php
index e3fba61..765ce41 100644
--- a/framework/application/controllers/NewsController.php
+++ b/framework/application/controllers/NewsController.php
@@ -4,15 +4,19 @@ class NewsController extends CubeIT_Controller_PageController {
 
     public function indexAction() {
 
-        $this->view->headScript()->addSlickCarousel();
+        $this->view->headScript()->addSlickCarousel(true);
         $this->view->headScript()->addScriptAndStyle('slick-lightbox');
         $this->view->headScript()->addScriptAndStyle('news-article');
 
-        $parent = $this->view->currentPage->getParent();
-        $parent_data = $this->getBootstrap()->getCMSDatasOfNavigationPage($parent);
-        $this->view->datas = $parent_data;
+        //$parent = $this->view->currentPage->getParent();
+        //$parent_data = $this->getBootstrap()->getCMSDatasOfNavigationPage($parent);
+        //$this->view->datas = $parent_data;
 
-        $model = CCGM_Model_News::factory()->where('id = ?', $this->getRequest()->getParam('news_id'));
+
+        $model = CCGM_Model_News::factory()
+            ->order('date DESC')
+            ->where('id = ?', $this->getRequest()
+            ->getParam('news_id'));
         $article = $model->find();
 
         if (count($article) < 1) {
@@ -24,6 +28,7 @@ class NewsController extends CubeIT_Controller_PageController {
         $article = reset($article);
 
         $this->view->news = $article;
+        $this->view->headTitle($article->getTitle(), 'SET');
     }
 
 }
diff --git a/framework/application/forms/CMS/Sub/News/News.php b/framework/application/forms/CMS/Sub/News/News.php
index c53c5de..8e0592d 100644
--- a/framework/application/forms/CMS/Sub/News/News.php
+++ b/framework/application/forms/CMS/Sub/News/News.php
@@ -33,15 +33,15 @@ class CCGM_Form_CMS_Sub_News_News extends CubeIT_Form_List_Model {
 		$content->setLabel(__('Contents'));
 		$this->addElement($content);
 
+		$link = new CubeIT_Form_Element_Link();
+		$link->setLabel('Lien');
+		$this->addSubForm($link,'link');
+
 		$pdf = new CubeIT_Form_Element_File('pdf');
 		$pdf->setLabel('PDF à télécharger');
 		$pdf->setMaxItems(1);
 		$this->addElement($pdf);
 
-		$link = new CubeIT_Form_Element_Link();
-		$link->setLabel('Lien');
-		$this->addSubForm($link,'link');
-
 		$this->setListTitle(__('Actualités'));
 		$this->setNewTitle(__('Nouvelle actualité'));
 		$this->setEditTitle(__('Edition de l\'actualité « $date »'));
diff --git a/framework/application/models/News.php b/framework/application/models/News.php
index 71c016a..c331513 100644
--- a/framework/application/models/News.php
+++ b/framework/application/models/News.php
@@ -34,7 +34,7 @@ class CCGM_Model_News extends CubeIT_Model_Data_Table {
 	    $video_list = trim($this->videos);
 	    $videos = [];
 
-	    if (empty($video_list)) return false;
+	    if (empty($video_list)) return $videos;
 
         $video_URLs = explode(PHP_EOL, $video_list);
 
diff --git a/framework/application/views/helpers/Actualites.php b/framework/application/views/helpers/Actualites.php
index 5a5ecf5..41d42c4 100644
--- a/framework/application/views/helpers/Actualites.php
+++ b/framework/application/views/helpers/Actualites.php
@@ -3,41 +3,44 @@
 class CCGM_View_Helper_Actualites extends CubeIT_View_Helper_Abstract {
 
 	public function actualites($actus) {
-		$actus = CCGM_Model_News::factory()->order('date DESC')->find();
-
-		$this->view->headScript()->addScriptAndStyle('actualites')
-			->addGSAP();
-		$res = '<div class="updates">';
-		$res .= '<div class="holder">';
-		$res .= '<div class="mask">';
-		$res .= '<div class="slideset">';
+		$actus = CCGM_Model_News::factory()
+            ->order('date DESC')
+            ->limit(5)
+            ->find();
+
+        $this->view->headScript()->addSlickCarousel(true);
+		$this->view->headScript()->addScriptAndStyle('home-news');
+		//$this->view->headScript()->addScriptAndStyle('actualites')->addGSAP();
+		$res = '<div class="home-news">';
+		$res .= '<div class="home-news-inner">';
+		$res .= '<h2 class="font-light text-3xl text-blue mb-6">Actualités</h2>';
+		$res .= '<div class="home-news-slider">';
 		foreach ($actus as $a) {
 			$res .= $this->_actu($a);
 		}
-		$res .= '</div>';
-		$res .= '</div>';
-		$res .= '<div class="btn-area">';
-		$res .= '<a class="btn-prev" title="Actualités plus récente" href="#"></a>';
-		$res .= '<a class="btn-next" title="Actualités plus ancienne" href="#"></a>';
-		$res .= $this->view->link('Voir les actualités', 'internal:news', ['class' => 'news']);
-		$res .= '</div>';
-		$res .= '</div>';
-		$res .= '</div>';
+		$res .= '</div>'; // .home-news-slider
+		$res .= '</div>'; // .home-news-inner
+		$res .= '</div>'; // .home-news
 		return $res;
 	}
 
 	protected function _actu($a) {
-		$nline = 1;
 
-		$attrs = array('data-lines' => $nline);
-
-		$res = '<div class="slide">';
-		$p = '';
-		$p .= $this->view->dateTime($a->getDate(), Zend_Date::DAY . '/' . Zend_Date::MONTH . '/' . Zend_Date::YEAR, array('class' => 'date')) . ' ';
-		$p .= $a->getTitle();
-		$res .= $this->view->htmlElement($p, 'p', $attrs);
-		$res .= '</div>';
-		return $res;
+        $URL = CubeIT_Navigation_Page::generateAutoUri($a, Bootstrap::getNewsArticleURLTemplate());
+	    $img = $this->imageProcess($a->getImage(), '', 410, 266, ['class' => 'home-news-image']);
+
+        if (!$img) {
+            $img = '<div class="home-news-image home-news-image-empty"></div>';
+        }
+
+        $res  = $this->link($img, $URL);
+        $res .= '<div class="home-news-article-content">';
+        $res .= $this->link($this->htmlElement($a->getTitle(), 'h2'), $URL, ['class' => 'home-news-heading-link']);
+        $res .= $this->markupDotclear($a->getExcerpt());
+        $res .= $this->link("Voir toute l'actualité &gt;", 'internal:news', ['class' => 'home-news-read-more']);
+        $res .= '</div>'; // .home-news-article-content
+        $res = $this->htmlElement($res, 'article', ['class' => 'home-news-article']);
+        return $this->htmlElement($res, 'div', ['class' => 'home-news-item']);
 	}
 
 
diff --git a/framework/application/views/helpers/News.php b/framework/application/views/helpers/News.php
index 7f341db..8230677 100644
--- a/framework/application/views/helpers/News.php
+++ b/framework/application/views/helpers/News.php
@@ -19,20 +19,22 @@ class CCGM_View_Helper_News extends CubeIT_View_Helper_Abstract {
 
 	    $URL = CubeIT_Navigation_Page::generateAutoUri($n, Bootstrap::getNewsArticleURLTemplate());
 
-		$img = $this->imageProcess($n->getImage(), '', 247, 247);
-		$res = $img;
+
+		$img = $this->imageProcess($n->getImage(), '', 247, 247, ['class' => 'news-image']);
+
+		if (!$img) {
+		    $img = '<div class="news-image news-image-empty"></div>';
+        }
+
+		$res = $this->link($img, $URL);
 		//$c = $this->dateTime($n->getDate(), CubeIT_Date::DAY . '/' . CubeIT_Date::MONTH . '/' . CubeIT_Date::YEAR);
-		$c  = $this->htmlElement($n->getTitle(), 'h2');
+		$c  = $this->link($this->htmlElement($n->getTitle(), 'h2'), $URL, ['class' => 'news-heading-link']);
 		$c .= '<div class="acc">';
 		$c .= $this->markupDotclear($n->getExcerpt());
-		$c .= $this->linkCMS($n->getLink());
 		$c .= '</div>';
 		$c .= $this->link('Lire la suite', $URL, ['class' => 'read-more']);
 		$res .= $this->htmlElement($c, 'div', ['class' => 'c']);
 		$aargs = [];
-		if (!$img) {
-			$aargs['class'] = 'noimg';
-		}
 		return $this->htmlElement($res, 'article', $aargs);
 	}
 }
diff --git a/framework/application/views/scripts/news/index.phtml b/framework/application/views/scripts/news/index.phtml
index 6613214..b8f7435 100644
--- a/framework/application/views/scripts/news/index.phtml
+++ b/framework/application/views/scripts/news/index.phtml
@@ -5,6 +5,11 @@ $this->showtopimage = false;
 $this->showsidebar = false;
 $news = $this->news;
 
+$images = CubeIT_Util_Cms::unserialize($news->getImage());
+if (!$images) $images = [];
+
+$sharing_URL = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
+
 ?>
 
 <h2 class="font-light text-pink mb-4 text-4xl">Actualités</h2>
@@ -15,7 +20,7 @@ $news = $this->news;
 
     <div class="news-slider">
 
-        <?php foreach(CubeIT_Util_Cms::unserialize($news->getImage()) as $image): ?>
+        <?php foreach($images as $image): ?>
             <?php $image_URL = $this->imageProcess($image, '', 980, null, [], 'C', 'C', 'M', false, 'auto', null, 92, 'files', true); ?>
             <a href="<?= $image_URL ?>" target="_blank">
                 <img class="news-slider-image" src="<?= $image_URL ?>">
@@ -32,6 +37,18 @@ $news = $this->news;
 
     <?= $this->markupDotclear($news->getContent()); ?>
 
-    <?= $this->linkCMS($news->getLink()); ?>
+    <?= $this->linkCMS($news->getLink(), ['class' => 'news-external-link mt-8']); ?>
+
+    <div class="news-actions">
+        <a href="http://www.facebook.com/sharer.php?u=<?= urlencode($sharing_URL) ?>" target="_blank" rel="noopener"><img src="/images/facebook.svg" alt="Facebook"></a>
+        <a href="https://twitter.com/share?url=<?= urlencode($sharing_URL) ?>&text=<?= urlencode($news->getTitle()) ?>" target="_blank" rel="noopener"><img src="/images/twitter.svg" alt="Twitter"></a>
+
+        <?php
+            if (CubeIT_Util_Cms::containFiles($news->getPdf())) {
+                echo $this->linkCMSFile('Télécharger le PDF', CubeIT_View_Helper_ImageCms::getPath($news->getPdf()), ['class' => 'news-pdf-link ml-4']);
+            }
+        ?>
+
+    </div>
 
 </div>
diff --git a/js/home-news.js b/js/home-news.js
new file mode 100644
index 0000000..b135fc0
--- /dev/null
+++ b/js/home-news.js
@@ -0,0 +1,8 @@
+TO_LOAD_ONCE[TO_LOAD_ONCE.length] = 'load_home_news();';
+
+function load_home_news() {
+
+    $('.home-news-slider').slick({
+        slidesToShow: 1
+    });
+}
diff --git a/js/news-article.js b/js/news-article.js
index 8a626ce..632ad57 100644
--- a/js/news-article.js
+++ b/js/news-article.js
@@ -10,8 +10,6 @@ function load_news_article() {
   });
 
   // Slider for lightbox
-  $slider.each(function () {
-    $(this).slickLightbox();
-  });
+  $slider.slickLightbox();
 
 }
diff --git a/js/slick-lightbox.js b/js/slick-lightbox.js
index 499ee17..b49974a 100644
--- a/js/slick-lightbox.js
+++ b/js/slick-lightbox.js
@@ -61,6 +61,9 @@ Documentation generated by [CoffeeDoc](http://github.com/omarkhan/coffeedoc)
           };
         })(this);
         a = this.element.find(this.options.itemSelector);
+
+        console.log("AAAA", a);
+
         if (index === 0 || index === -1) {
           links = $.map(a, createItem);
         } else {
diff --git a/less/home-news.less b/less/home-news.less
new file mode 100644
index 0000000..4a87ac8
--- /dev/null
+++ b/less/home-news.less
@@ -0,0 +1,73 @@
+.home-news {
+  background-color: #f9f8f8;
+  padding: 3em 0 4em;
+
+  &-inner {
+    width: 981px;
+    margin: 0 auto;
+  }
+
+  &-article {
+    display: flex;
+  }
+
+  &-heading-link {
+    &:hover {
+      text-decoration: none;
+    }
+
+    h2 {
+      color: #f5810f;
+      margin: 20px 0;
+      font-size: 30px;
+      font-weight: 300;
+    }
+  }
+
+  &-image {
+    width: 410px;
+    height: 266px;
+    margin-right: 60px;
+    flex: 0 0 auto;
+    background-color: #eee;
+  }
+
+  &-read-more {
+    display: inline-block;
+    background-color: #0ea6db;
+    color: #fff;
+    font-weight: 300;
+    font-style: italic;
+    border-radius: 3px;
+    padding: 0.4em 0.75em;
+    margin-top: 2em;
+  }
+
+  &-slider {
+    // Slider arrows
+    .slick-prev, .slick-next {
+      width: 55px;
+      height: 55px;
+      background-size: contain;
+      z-index: 99;
+
+      &:before {
+        display: none;
+      }
+
+      &.slick-disabled {
+        opacity: .25;
+      }
+    }
+
+    .slick-prev {
+      left: -75px;
+      background: url('/images/home-slider-prev.svg') center no-repeat;
+    }
+    .slick-next {
+      right: -75px;
+      background: url('/images/home-slider-next.svg') center no-repeat;
+    }
+  }
+
+}
diff --git a/less/news-article.less b/less/news-article.less
index ba8274a..169679d 100644
--- a/less/news-article.less
+++ b/less/news-article.less
@@ -3,15 +3,74 @@
   padding-bottom: 0;
 }
 
+.news-body {
+  margin-bottom: 6em;
+  line-height: 1.5;
+
+  p:not(:first-child) {
+    margin-top: 1.5em;
+  }
+}
+
 .news-slider {
+  max-width: 490px;
+  margin: 0 auto 4em;
+
   &-image {
-    max-width: 490px;
-    display: block;
-    margin: 0 auto;
+    max-width: 100%;
   }
 
   .slick-track {
     display: flex;
     align-items: center;
   }
+
+  // Slider arrows
+  .slick-prev, .slick-next {
+    width: 55px;
+    height: 55px;
+    background-size: contain;
+    z-index: 99;
+
+    &:before {
+      display: none;
+    }
+
+    &.slick-disabled {
+      opacity: .25;
+    }
+  }
+
+  .slick-prev {
+    left: -125px;
+    background: url('/images/slider-prev.svg') center no-repeat;
+  }
+  .slick-next {
+    right: -125px;
+    background: url('/images/slider-next.svg') center no-repeat;
+  }
+
+}
+
+.news-external-link, .news-pdf-link {
+  display: inline-block;
+  background-color: #0ea6db;
+  color: #fff;
+  font-weight: 300;
+  font-style: italic;
+  border-radius: 3px;
+  padding: 0.25em 1em;
+  margin: 0 0 0 1px;
+}
+
+.news-actions {
+  margin-top: 3em;
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 44px;
+    height: 44px;
+    margin-right: 1em;
+  }
 }
diff --git a/less/news.less b/less/news.less
index 0d36e59..ed1778f 100644
--- a/less/news.less
+++ b/less/news.less
@@ -2,6 +2,12 @@
 	margin: 1em 0 2em;
 }
 
+.news-heading-link {
+	&:hover {
+		text-decoration: none;
+	}
+}
+
 #news {
 	font-weight: 300;
 
@@ -15,7 +21,7 @@
 			margin-bottom: 0;
 		}
 
-		img {
+		.news-image {
 			vertical-align: top;
 			display: inline-block;
 			width: 247px;
diff --git a/less/slick-lightbox.less b/less/slick-lightbox.less
index 2893c15..7f22634 100644
--- a/less/slick-lightbox.less
+++ b/less/slick-lightbox.less
@@ -1 +1,154 @@
-.slick-lightbox{position:fixed;top:0;left:0;z-index:9999;width:100%;height:100%;background:#000;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.slick-lightbox.slick-hide{opacity:0}.slick-lightbox.slick-hide-init{position:absolute;top:-9999px;opacity:0}.slick-lightbox.slick-lightbox-ie.slick-hide,.slick-lightbox.slick-lightbox-ie.slick-hide-init{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.slick-lightbox .slick-lightbox-inner{position:fixed;top:0;left:0;width:100%;height:100%}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item{text-align:center;overflow:hidden}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner{display:inline-block;vertical-align:middle;max-width:90%;max-height:90%}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner.iframe{width:70%;height:90%}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-img{margin:0 auto;display:block;max-width:90%;max-height:90%}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap{position:relative;top:50%;transform:translateY(-50%)}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap:before{content:'';display:block;padding-top:56.25%}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap .slick-lightbox-slick-caption{position:relative;top:30px}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap .slick-lightbox-slick-iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-caption{margin-top:10px;color:#fff}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick.slick-caption-bottom .slick-lightbox-slick-item .slick-lightbox-slick-caption{position:absolute;bottom:0;left:0;text-align:center;width:100%;margin-bottom:20px}.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick.slick-caption-dynamic .slick-lightbox-slick-item .slick-lightbox-slick-caption{display:block;text-align:center}.slick-lightbox .slick-lightbox-inner .slick-lightbox-close{position:absolute;top:15px;right:15px;display:block;height:20px;width:20px;line-height:0;font-size:0;cursor:pointer;background:transparent;color:transparent;padding:0;border:none}.slick-lightbox .slick-lightbox-inner .slick-lightbox-close:focus{outline:none}.slick-lightbox .slick-lightbox-inner .slick-lightbox-close:before{font-family:"slick";font-size:20px;line-height:1;color:#fff;opacity:.85;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'×'}.slick-lightbox .slick-loading .slick-list{background-color:transparent}.slick-lightbox .slick-prev{left:15px}.slick-lightbox .slick-next{right:15px}
+.slick-lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  -webkit-transition: opacity .5s ease;
+  transition: opacity .5s ease;
+}
+
+.slick-lightbox.slick-hide {
+  opacity: 0;
+}
+
+.slick-lightbox.slick-hide-init {
+  position: absolute;
+  top: -9999px;
+  opacity: 0;
+}
+
+.slick-lightbox.slick-lightbox-ie.slick-hide,.slick-lightbox.slick-lightbox-ie.slick-hide-init {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+}
+
+.slick-lightbox .slick-lightbox-inner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item {
+  text-align: center;
+  overflow: hidden;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  margin-right: -0.25em;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner.iframe {
+  width: 70%;
+  height: 90%;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-img {
+  margin: 0 auto;
+  display: block;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap:before {
+  content: '';
+  display: block;
+  padding-top: 56.25%;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap .slick-lightbox-slick-caption {
+  position: relative;
+  top: 30px;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-iframe-wrap .slick-lightbox-slick-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick .slick-lightbox-slick-item .slick-lightbox-slick-item-inner .slick-lightbox-slick-caption {
+  margin-top: 10px;
+  color: #fff;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick.slick-caption-bottom .slick-lightbox-slick-item .slick-lightbox-slick-caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-slick.slick-caption-dynamic .slick-lightbox-slick-item .slick-lightbox-slick-caption {
+  display: block;
+  text-align: center;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 0;
+  font-size: 0;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
+  padding: 0;
+  border: none;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-close:focus {
+  outline: none;
+}
+
+.slick-lightbox .slick-lightbox-inner .slick-lightbox-close:before {
+  font-family: "slick";
+  font-size: 20px;
+  line-height: 1;
+  color: #fff;
+  opacity: .85;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: '×';
+}
+
+.slick-lightbox .slick-loading .slick-list {
+  background-color: transparent;
+}
+
+.slick-lightbox .slick-prev {
+  left: 15px;
+}
+
+.slick-lightbox .slick-next {
+  right: 15px;
+}
diff --git a/less/utilities.less b/less/utilities.less
index dfe57d1..9d95b85 100644
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -1,6 +1,7 @@
 // Colours
 .text-orange { color: #f5810f; }
 .text-pink { color: #e30186; }
+.text-blue { color: #0ea6db; }
 
 // Font sizes
 .text-xs { font-size: .75rem; }
@@ -60,6 +61,28 @@
 .mb-10 { margin-bottom: 2.5rem; }
 .mb-12 { margin-bottom: 3rem; }
 
+.mr-0 { margin-right: 0; }
+.mr-1 { margin-right: 0.25rem; }
+.mr-2 { margin-right: 0.5rem; }
+.mr-3 { margin-right: 0.75rem; }
+.mr-4 { margin-right: 1rem; }
+.mr-5 { margin-right: 1.25rem; }
+.mr-6 { margin-right: 1.5rem; }
+.mr-8 { margin-right: 2rem; }
+.mr-10 { margin-right: 2.5rem; }
+.mr-12 { margin-right: 3rem; }
+
+.ml-0 { margin-left: 0; }
+.ml-1 { margin-left: 0.25rem; }
+.ml-2 { margin-left: 0.5rem; }
+.ml-3 { margin-left: 0.75rem; }
+.ml-4 { margin-left: 1rem; }
+.ml-5 { margin-left: 1.25rem; }
+.ml-6 { margin-left: 1.5rem; }
+.ml-8 { margin-left: 2rem; }
+.ml-10 { marginleftm: 2.5rem; }
+.ml-12 { marginleftm: 3rem; }
+
 // Padding
 .p-0 { padding: 0; }
 .p-1 { padding: 0.25rem; }
-- 
2.39.5