From 30c82c01628984d9ff3a0db26bc17f2c67e12ff3 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 12 Nov 2019 18:26:46 +0100 Subject: [PATCH] WIP #3053 --- .../assets/styles/components/buttons.styl | 2 +- .../assets/styles/components/mmenu.styl | 2 +- .../assets/styles/widgets/link-carousel.styl | 2 +- .../assets/styles/widgets/timeline.styl | 76 ++++++++++++++++++- .../resources/views/partials/header.blade.php | 2 +- .../views/widgets/timeline.blade.php | 4 +- wp-content/themes/CCV/tailwind.config.js | 3 +- wp-content/themes/CCV/webpack.mix.js | 2 +- 8 files changed, 82 insertions(+), 11 deletions(-) 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 61691f5..416c291 100644 --- 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 aafad1e..8165fb1 100644 --- 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 4ce1019..e236a72 100644 --- 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 0c9e78b..127d267 100644 --- 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 24a88bb..e8fb72f 100644 --- 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) - + {{ $button_2->title }} 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 0fd34e0..fd9df55 100644 --- 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 @@
@foreach ($items as $item)
-
{{ $item['year'] }}
+
+
{{ $item['year'] }}
+
{!! $item['details'] !!}
@endforeach diff --git a/wp-content/themes/CCV/tailwind.config.js b/wp-content/themes/CCV/tailwind.config.js index 3723b02..360f92f 100644 --- 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 a47bcf6..b2de501 100644 --- 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 -- 2.39.5