diff --git a/package.json b/package.json index ea6ac6b6..9e09a80a 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "react-dom": "^18.2.0", "sass": "1.89.2", "uuid": "^11.1.0", - "vanilla-framework": "4.24.1" + "vanilla-framework": "4.24.1", + "venobox": "2.1.8" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.5", diff --git a/postcss.config.js b/postcss.config.js index ba04d77e..e2bdf994 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -21,6 +21,7 @@ let config = { "static/*.xml", "node_modules/flickity/dist/flickity.pkgd.min.js", "node_modules/leaflet/dist/leaflet.js", + "node_modules/venobox/dist/venobox.min.js", ], defaultExtractor: (content) => content.match(/[\w-/:]+(?s and
  • s + // Because the markup is pulled directly in from Discourse + padding: math.div($sp-large, 2) $sp-large; + + a, + a:visited { + color: $color-dark; + text-decoration: none; + } + + a:hover { + color: $color-link; + text-decoration: underline; + } + + .is-active { + position: relative; + + &::before { + background-color: $color-mid-light; + bottom: -0.25rem; + content: ""; + left: -1rem; + position: absolute; + top: -0.25rem; + width: 0.1875rem; + } + } + + ul { + margin-bottom: 0.625rem; + margin-left: 0; + padding-left: 1rem; + } + + li { + padding-bottom: 0.125rem; + padding-top: 0.125rem; + } + + h3 { + font-size: 1rem; + font-weight: 400; + line-height: 2; + margin: 0; + padding: 0; + } + } + + .p-takeunder { + border-radius: 0.125rem; + margin-right: -1 rem; + padding: $sp-x-large; + + @media only screen and (min-width: $breakpoint-large) { + padding: $sp-x-large $sp-medium $sp-medium $sp-medium; + } + + &.is-dark { + color: $color-x-light; + + a:link, + a:visited { + color: $color-x-light; + } + } + + &.is-light { + color: $color-dark; + + a:link, + a:visited { + color: $color-dark; + } + } + + & + & { + @media only screen and (max-width: $breakpoint-large) { + margin-top: $spv--large; + } + } + } + + .p-tutorial-section { + display: none; + + &:target { + display: block; + } + } + + .p-tutorials-meter { + background-image: url("#{$assets-path}77d5aee3-maas-difficulty-meter.svg"); + background-position-x: -75px; + background-position-y: center; + background-repeat: no-repeat; + display: inline-block; + height: $sp-large; + margin-left: $sp-xx-small; + text-indent: -9999px; + width: 74px; + } + + .p-tutorials-meter--1 { + background-position-x: -60px; + } + + .p-tutorials-meter--2 { + background-position-x: -45px; + } + + .p-tutorials-meter--3 { + background-position-x: -30px; + } + + .p-tutorials-meter--4 { + background-position-x: -15px; + } + + .p-tutorials-meter--5 { + background-position-x: 0; + } + + .p-tutorial-section__footer { + margin-bottom: $sp-medium; + } + + .p-tutorial__bug-link { + position: relative; + top: -1.38rem; + + @media only screen and (min-width: $breakpoint-small) { + top: 0; + } + } + + .p-tutorial__duration { + margin-bottom: $sp-small; + + @media only screen and (min-width: $breakpoint-small) { + display: inline-block; + margin-bottom: 0; + margin-right: $sp-medium; + } + } + + .p-tutorial__pagination { + @media only screen and (min-width: $breakpoint-small) { + display: inline-block; + } + } + + %p-tutorial-pagination-item { + display: inline-block; + margin-right: $sp-small; + max-width: $sp-xxxx-large; + + &:last-child { + margin-right: 0; + } + + @media only screen and (max-width: $breakpoint-small) { + width: auto; + } + } + + .p-tutorial__pagination-item--prev { + @extend %p-tutorial-pagination-item; + + .p-icon--chevron-down { + transform: rotate(90deg); + } + } + + .p-tutorial__pagination-item--next { + @extend %p-tutorial-pagination-item; + + .p-icon--chevron-down { + transform: rotate(-90deg); + } + } + + .p-tutorial__feedback-icon { + cursor: pointer; + } + + .p-tutorial__feedback-options { + .p-inline-list__item { + .has-color { + display: none; + } + + &:hover { + .p-tutorial__feedback-icon { + display: none; + } + + .has-color { + display: inline-block; + } + } + } + } + + .p-sidenav__toggle { + background-size: $sp-medium; + cursor: pointer; + float: right; + padding: $sp-x-large; + } + + .p-blog-card--maas { + @extend %p-card--highlighted; + + border-top: 3px solid rgb(233 84 32); + } +} diff --git a/static/sass/_pattern_strip.scss b/static/sass/_pattern_strip.scss index 516b9d8d..108c9331 100644 --- a/static/sass/_pattern_strip.scss +++ b/static/sass/_pattern_strip.scss @@ -5,6 +5,7 @@ @include canonical-p-strip-suru-background; @include canonical-p-strip-whitesuru; @include canonical-p-strip-suru-blog-header; + @include maas-p-strip--dark; .p-strip--light { &.is-x-shallow { @@ -299,3 +300,67 @@ position: relative; } } + +@mixin maas-p-strip--dark { + $color-suru-grey-1: rgba(216 216 216 / 54%); + $color-suru-grey-2: rgba(228 228 228 / 54%); + $color-suru-grey-3: #333; + $color-suru-grey-4: #262626; + $color-suru-grey-5: #171717; + $color-suru-grey-6: #181818; + $color-suru-grey-7: #2d2d2d; + $color-suru-grey-8: #383838; + $color-suru-grey-9: #2e2e2e; + $color-suru-grey-10: #393939; + + .p-takeover--dark { + background-blend-mode: multiply, multiply, normal, normal; + background-color: $color-dark; + background-image: linear-gradient( + to bottom left, + $color-suru-grey-1 0, + $color-suru-grey-1 49.9%, + transparent 50% + ), + linear-gradient( + to bottom right, + $color-suru-grey-2 0, + $color-suru-grey-2 49.9%, + transparent 50% + ), + linear-gradient( + to top left, + $color-x-light 0%, + $color-x-light 49.3%, + transparent 50%, + transparent 100% + ), + linear-gradient( + 201deg, + $color-suru-grey-3 0%, + $color-suru-grey-4 46%, + $color-dark 90% + ); + background-position: top right, top left, right bottom -1px, left top; + background-repeat: no-repeat; + background-size: 74% 99.83%, 68% 91%, 103.8% 20.26%, 100% 99.8%; + color: $color-x-light; + margin: 0; + padding-bottom: 11rem; + padding-top: 6rem; + } + + .p-takeover--no-overlays { + // copy of ubuntu.com's .p-takeover--compliance found at https://ubuntu.com/takeovers + background-image: linear-gradient( + 44deg, + $color-suru-grey-5 0%, + $color-suru-grey-6 9%, + $color-suru-grey-4 34%, + $color-suru-grey-7 67%, + $color-suru-grey-8 88%, + $color-suru-grey-9 100%, + $color-suru-grey-10 100% + ); + } +} diff --git a/static/sass/_pattern_venobox.scss b/static/sass/_pattern_venobox.scss new file mode 100644 index 00000000..02627d78 --- /dev/null +++ b/static/sass/_pattern_venobox.scss @@ -0,0 +1,238 @@ +@mixin pattern-venobox { + $color-modal-overlay: rgba($color-x-dark, 0.85); + $color-modal-controls: rgba($color-x-dark, 0.2); + + .venobox { + width: auto; + + &--expand { + margin: 0 auto 20px; + overflow: visible; + position: relative; + + > img { + margin: 0 auto; + } + + &::after { + background: { + color: $color-dark; + image: url("#{$assets-path}495995ef-fullscreen-white.svg"); + position: center; + repeat: no-repeat; + size: 50%; + } + + bottom: 15px; + box-shadow: 0 5px 10px 0 $color-modal-controls; + content: ""; + display: block; + height: 20px; + position: absolute; + right: 15px; + width: 20px; + } + } + } + + // venobox.css + .vbox-overlay *, + .vbox-overlay *::before, + .vbox-overlay *::after { + box-sizing: border-box; + } + + // overlay: change here background color and opacity ----- */ + .vbox-overlay { + $color-modal-overlay: rgba($color-x-dark, 0.85); + + align-items: center; + background: $color-modal-overlay; + bottom: 0; + display: flex; + height: auto; + left: 0; + margin-top: 0; + opacity: 0; + overflow-x: hidden; + overflow-y: auto; + position: fixed; + top: 0; + width: 100%; + z-index: 9999; + } + + // preloader - choose between CIRCLE, IOS, DOTS, QUADS + + @keyframes playload { + from { + background-position: 0; + } + + to { + background-position: -576px; + } + } + + // navigation + .vbox-close { + background: url("#{$assets-path}89c10794-remove.svg") no-repeat; + background-position: center; + background-size: 30%; + color: $color-x-light; + cursor: pointer; + display: block; + height: 100px; + overflow: hidden; + padding: 20px; + position: fixed; + right: 0; + text-indent: -100px; + top: 20px; + width: 100px; + + @media screen and (max-width: $breakpoint-large) { + background-position: top 20px right 20px; + } + } + + .vbox-next, + .vbox-prev { + background-color: $color-modal-controls; + border: solid transparent; // Using border instead of padding to keep bg image in place + box-sizing: content-box; + color: $color-x-light; + cursor: pointer; + height: 170px; + margin-top: -85px; + overflow: hidden; + position: fixed; + text-indent: -100px; + top: 50%; + width: 30px; + } + + .vbox-prev { + background-image: url("#{$assets-path}f4e0a44f-icon-arrow-left-white.svg"); + background-position: center left 15px; + background-repeat: no-repeat; + border-width: 0 30px 0 10px; + left: 0; + } + + .vbox-next { + background-image: url("#{$assets-path}9e5e9f6f-icon-arrow-right-white.svg"); + background-position: center right 15px; + background-repeat: no-repeat; + border-width: 0 10px 0 30px; + right: 0; + } + + .vbox-title { + background: $color-dark; + bottom: 0; + color: $color-x-light; + float: left; + font-size: 1rem; + height: auto; + left: 0; + line-height: 28px; + overflow: hidden; + padding: 40px; + position: fixed; + text-align: center; + width: 100%; + + @media screen and (max-width: 1024px) { + bottom: 25px; + } + } + + .vbox-num { + background: $color-dark; + color: $color-x-light; + cursor: pointer; + display: none; + font-size: 12px; + height: 40px; + left: 0; + line-height: 28px; + overflow: hidden; + padding: 6px 10px; + position: fixed; + top: -1px; + } + + // inline window + .vbox-inline { + background: $color-x-light; + height: 315px; + margin: 0 auto; + overflow: auto; + padding: 10px; + text-align: left; + width: 420px; + } + + // Video & iFrames window + .venoframe { + border: 0; + height: 100%; + min-height: 600px; + width: 100%; + } + + @media (max-width: 992px) { + .venoframe { + height: 480px; + min-height: inherit; + width: 640px; + } + } + + @media (max-width: 767px) { + .venoframe { + height: 315px; + min-height: inherit; + width: 420px; + } + } + + @media (max-width: 460px) { + .vbox-inline { + width: 100%; + } + + .venoframe { + height: 260px; + min-height: inherit; + width: 100%; + } + } + + // PLease do NOT edit this! (or do it at your own risk) + .vbox-open { + overflow: hidden; + } + + .vbox-container { + margin: 0 auto; + max-width: 1200px; + padding: 0 15px; + position: relative; + width: 100%; + } + + .vbox-content { + float: left; + overflow: hidden; + position: relative; + text-align: center; + width: 100%; + } + + .vbox-container img { + height: auto; + max-width: 100%; + } +} diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 24f7b384..d5de01ad 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -34,6 +34,8 @@ $p-small-lh-diff: map-get($line-heights, default-text) - @import "pattern_tabs"; @import "pattern_homepage-modal"; @import "pattern_homepage"; +@import "pattern_venobox"; +@import "maas_styles"; @include vanilla; @include vf-p-icon-status-waiting; @@ -62,6 +64,8 @@ $p-small-lh-diff: map-get($line-heights, default-text) - @include canonical-p-navigation-mobile; @include sprint-carousel; @include homepage-styles; +@include pattern-venobox; +@include maas-styles; @media screen and ($breakpoint-large <= width) { .p-section__u-no-padding--top { diff --git a/templates/blog/article.html b/templates/blog/article.html index 80c99ed2..f2aaca27 100644 --- a/templates/blog/article.html +++ b/templates/blog/article.html @@ -93,7 +93,7 @@

    {{ article.title.rendered|safe }}

    - + {% if tags %}
    {% for tag in tags %} @@ -103,7 +103,7 @@ {% endfor %}
    {% endif %} - +