WIP #3053

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl
index 61691f5a494cc6ba46e3388b6c6090c7438309db..416c29180652630e56a836b743b1703e974e8129 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl
@@ -10,7 +10,7 @@
   transition: background-color 0.25s
 
   &:hover
-    @apply bg-teal
+    @apply bg-teal-light
 
   &.elementor-size-sm
     @apply text-sm

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
index aafad1ef4b87f91597d8648d3b29a568f132cd46..8165fb1a2e1b192a20f53a751157f0d277b45950 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
@@ -62,7 +62,7 @@
     &:nth-of-type(odd)
       @apply bg-pink
     &:nth-of-type(even)
-      @apply bg-purple
+      @apply bg-teal
 
     &:before, &:after
       display: none

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
index 4ce101976b911bbd733b59dce426bca9e6fc3989..e236a72830b73c85d22ac3b5f49c6b1546330be8 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
@@ -28,7 +28,7 @@
       transition: background-color 0.2s ease-out
 
       .link-carousel-item:hover &
-        @apply bg-teal
+        @apply bg-teal-light
 
 
   &-prev, &-next

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
index 0c9e78b1b04d4c36fe8196fe69e0f9fa407ca06e..127d267dbea03b7bb7463e295e53fad9fe65ff10 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
@@ -1,20 +1,88 @@
+$breakpoint-timeline = 600px // When timeline collapses into 1 column
+$dot-size = 14px // width or height of a single background dot, including its gutter
+
 .timeline
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='14'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23707070'/%3E%3C/svg%3E")
+  background-repeat: repeat-y
+  background-position: 3.3em 0
+
+  +below($breakpoint-timeline)
+    background-position: 50% 0
+
   &-item
     @apply flex items-center
 
     &:not(:last-child)
-      @apply mb-6
+      margin-bottom: $dot-size * 5
+
+    +below($breakpoint-timeline)
+      flex-direction: column
+      align-items: center
+      background-color: #fff
+      padding-bottom: $dot-size
+
+    &-date-wrapper
+      align-self: stretch
+      display: flex
+      flex-direction: column
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='3'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23707070'/%3E%3C/svg%3E")
+      background-position: 7px 50%
+      background-repeat: repeat-x
+      margin-right: 1.2em // Spacing between text and dots on the right
+
+      // Before and after pseudo elements used to centre year when text is taller than the year
+      // Doing it this way allows the backgrounds to be a solid colour, masking the dots in the
+      // background when necessary (for the first and last items only)
+      &:before, &:after
+        content: ''
+        flex: 1 1 auto
+
+      // For the first timeline item, mask any space ABOVE the date
+      // with white so background dots don't show above...
+      &:before
+        .timeline-item:first-child &
+          background-color: #fff
+
+      // For the last timeline item, mask any space BELOW the date
+      // with white so background dots don't show above...
+      &:after
+        .timeline-item:last-child &
+          background-color: #fff
+
+      +below($breakpoint-timeline)
+        background: none
+        margin-right: 0
+        align-self: center
+
+        &:before, &:after
+          display: none
+
 
     &-date
       @apply bg-teal text-white text-lg rounded-full
-      @apply flex flex-shrink-0 items-center justify-center mb-4 mr-16
+      @apply flex items-center justify-center
+      flex: 0 0 auto
       width: 5em
       height: @width
       overflow: hidden
       box-shadow: inset 0 0 0 0.45em rgba(#fff, 0.6)
+      box-sizing: content-box // So border takes space outside circle instead of making it smaller
+      border: $dot-size solid #fff // White border works as mask so background dots don't get too close to date circles
+      margin-left: - $dot-size // Offset the invisible white border on the left
+      margin-right: $dot-size * 9 // Number of dots to show
+
+      +below(1200px)
+        margin-right: $dot-size * 6
+      +below(768px)
+        margin-right: $dot-size * 4
+      +below($breakpoint-timeline)
+        margin: - $dot-size 0 0 0
+
 
       &.is-highlight
         @apply bg-pink
 
-
-  // Todo: implement dotted lines like we did for cubedesigners.com/news
+    &-content
+      +below($breakpoint-timeline)
+        max-width: 280px
+        text-align: center

diff --git a/wp-content/themes/CCV/resources/views/partials/header.blade.php b/wp-content/themes/CCV/resources/views/partials/header.blade.php
index 24a88bb53b0246c48543632413486677fbc51bdd..e8fb72f4da9e8145aec84e1e271b20c0321cc92e 100644 (file)
--- a/wp-content/themes/CCV/resources/views/partials/header.blade.php
+++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php
@@ -35,7 +35,7 @@
       @endif
 
       @if ($button_2)
-        <a href="{{ $button_2->url }}" class="header-cta btn btn-no-hover flex items-center bg-purple">
+        <a href="{{ $button_2->url }}" class="header-cta btn btn-no-hover flex items-center bg-teal">
           <img src="@asset('images/rendezvous.svg')" class="mr-2">
           {{ $button_2->title }}
         </a>

diff --git a/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php b/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
index 0fd34e0992458fef77c18f797f44537f0bff3b46..fd9df557f630cd1db29ffbbb6838582f3e4b4271 100644 (file)
--- a/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
+++ b/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
@@ -2,7 +2,9 @@
 <div class="timeline">
   @foreach ($items as $item)
     <div class="timeline-item">
-      <div class="timeline-item-date @if($item['highlight'] == 'yes')is-highlight @endif">{{ $item['year'] }}</div>
+      <div class="timeline-item-date-wrapper">
+        <div class="timeline-item-date @if($item['highlight'] == 'yes')is-highlight @endif">{{ $item['year'] }}</div>
+      </div>
       <div class="timeline-item-content">{!! $item['details'] !!}</div>
     </div>
   @endforeach

diff --git a/wp-content/themes/CCV/tailwind.config.js b/wp-content/themes/CCV/tailwind.config.js
index 3723b02065be034e90fc36441d941ea23fd89ab9..360f92fd952969b84b74eb394a1302499d241403 100644 (file)
--- a/wp-content/themes/CCV/tailwind.config.js
+++ b/wp-content/themes/CCV/tailwind.config.js
@@ -22,8 +22,9 @@ module.exports = {
         'purple': '#5A5488',
         'purple-dark': '#2E2C40', // Footer and other dark sections
         'pink': '#FF078B', // Accent colour
-        'pink-light': '#FF7EC3',
+        'pink-light': '#FF7EC3', // Hover colour
         'teal': '#2CC4CF', // Accent colour
+        'teal-light': '#71D3DF', // Hover colour
       },
       fontFamily: {
         'display': ['Dosis', 'sans-serif'], // Headings, labels, menus etc

diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js
index a47bcf6d9276f4561f436083fe90981a71bd9aab..b2de501575746dc69bf9c70fc4ad290bfeb4f2a8 100644 (file)
--- a/wp-content/themes/CCV/webpack.mix.js
+++ b/wp-content/themes/CCV/webpack.mix.js
@@ -70,7 +70,7 @@ mix.purgeCss({
     './resources/views/**/*.php',
     './resources/assets/**/*.js',
   ],
-  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
+  extractorPattern: /[A-Za-z0-9-_:!/]+/g, // Tailwind patterns to include classes with special characters like !/:
 
   globs: [
     path.join(__dirname, '../../mu-plugins/cube/**/*.php'), // Some classes (eg. for widgets) might be present only here