aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src')
-rw-r--r--demo/src/js/demo.js246
-rw-r--r--demo/src/js/sources.js78
-rw-r--r--demo/src/js/tab-focus.js31
-rw-r--r--demo/src/js/toggle-class.js5
-rw-r--r--demo/src/sass/components/buttons.scss16
-rw-r--r--demo/src/sass/components/header.scss11
-rw-r--r--demo/src/sass/components/icons.scss2
-rw-r--r--demo/src/sass/components/links.scss1
-rw-r--r--demo/src/sass/components/players.scss18
-rw-r--r--demo/src/sass/layout/core.scss3
-rw-r--r--demo/src/sass/lib/animation.scss14
-rw-r--r--demo/src/sass/lib/mixins.scss2
-rw-r--r--demo/src/sass/settings/colors.scss42
-rw-r--r--demo/src/sass/settings/cosmetic.scss2
-rw-r--r--demo/src/sass/settings/plyr.scss3
-rw-r--r--demo/src/sass/settings/spacing.scss2
-rw-r--r--demo/src/sass/type/base.scss3
-rw-r--r--demo/src/sass/type/headings.scss3
18 files changed, 246 insertions, 236 deletions
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index b1097601..1723fcbc 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -4,9 +4,16 @@
// Please see readme.md in the root or github.com/sampotts/plyr
// ==========================================================================
+import './tab-focus';
+import 'custom-event-polyfill';
+import 'url-polyfill';
+
import Raven from 'raven-js';
+import Shr from 'shr-buttons';
import Plyr from '../../../src/js/plyr';
+import sources from './sources';
+import toggleClass from './toggle-class';
(() => {
const { host } = window.location;
@@ -18,45 +25,15 @@ import Plyr from '../../../src/js/plyr';
document.addEventListener('DOMContentLoaded', () => {
Raven.context(() => {
const selector = '#player';
- const container = document.getElementById('container');
-
- if (window.Shr) {
- window.Shr.setup('.js-shr-button', {
- count: {
- classname: 'button__count',
- },
- });
- }
-
- // Setup tab focus
- const tabClassName = 'tab-focus';
-
- // Remove class on blur
- document.addEventListener('focusout', event => {
- if (!event.target.classList || container.contains(event.target)) {
- return;
- }
-
- event.target.classList.remove(tabClassName);
- });
-
- // Add classname to tabbed elements
- document.addEventListener('keydown', event => {
- if (event.keyCode !== 9) {
- return;
- }
-
- // Delay the adding of classname until the focus has changed
- // This event fires before the focusin event
- setTimeout(() => {
- const focused = document.activeElement;
- if (!focused || !focused.classList || container.contains(focused)) {
- return;
- }
-
- focused.classList.add(tabClassName);
- }, 10);
+ // Setup share buttons
+ Shr.setup('.js-shr', {
+ count: {
+ className: 'button__count',
+ },
+ wrapper: {
+ className: 'button--with-count',
+ },
});
// Setup the player
@@ -73,9 +50,6 @@ import Plyr from '../../../src/js/plyr';
captions: {
active: true,
},
- keys: {
- google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
- },
ads: {
enabled: env.prod || env.dev,
publisherId: '918848828995742',
@@ -87,6 +61,10 @@ import Plyr from '../../../src/js/plyr';
'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
],
},
+ vimeo: {
+ // Prevent Vimeo blocking plyr.io demo site
+ referrerPolicy: 'no-referrer',
+ },
});
// Expose for tinkering in the console
@@ -94,142 +72,45 @@ import Plyr from '../../../src/js/plyr';
// Setup type toggle
const buttons = document.querySelectorAll('[data-source]');
- const types = {
- video: 'video',
- audio: 'audio',
- youtube: 'youtube',
- vimeo: 'vimeo',
- };
- let currentType = window.location.hash.replace('#', '');
- const historySupport = window.history && window.history.pushState;
+ const types = Object.keys(sources);
+ const historySupport = Boolean(window.history && window.history.pushState);
+ let currentType = window.location.hash.substring(1);
+ const hasCurrentType = !currentType.length;
- // Toggle class on an element
- function toggleClass(element, className, state) {
- if (element) {
- element.classList[state ? 'add' : 'remove'](className);
- }
+ function render(type) {
+ // Remove active classes
+ Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+
+ // Set active on parent
+ toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+
+ // Show cite
+ Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+ // eslint-disable-next-line no-param-reassign
+ cite.hidden = true;
+ });
+
+ document.querySelector(`.plyr__cite--${type}`).hidden = false;
}
// Set a new source
- function newSource(type, init) {
+ function setSource(type, init) {
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
if (
- !(type in types) ||
+ !types.includes(type) ||
(!init && type === currentType) ||
- (!currentType.length && type === types.video)
+ (!currentType.length && type === 'video')
) {
return;
}
- switch (type) {
- case types.video:
- player.source = {
- type: 'video',
- title: 'View From A Blue Moon',
- sources: [
- {
- src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
- type: 'video/mp4',
- size: 576,
- },
- {
- src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
- type: 'video/mp4',
- size: 720,
- },
- {
- src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
- type: 'video/mp4',
- size: 1080,
- },
- {
- src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
- type: 'video/mp4',
- size: 1440,
- },
- ],
- poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
- tracks: [
- {
- kind: 'captions',
- label: 'English',
- srclang: 'en',
- src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
- default: true,
- },
- {
- kind: 'captions',
- label: 'French',
- srclang: 'fr',
- src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
- },
- ],
- };
-
- break;
-
- case types.audio:
- player.source = {
- type: 'audio',
- title: 'Kishi Bashi – “It All Began With A Burst”',
- sources: [
- {
- src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
- type: 'audio/mp3',
- },
- {
- src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
- type: 'audio/ogg',
- },
- ],
- };
-
- break;
-
- case types.youtube:
- player.source = {
- type: 'video',
- sources: [
- {
- src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
- provider: 'youtube',
- },
- ],
- };
-
- break;
-
- case types.vimeo:
- player.source = {
- type: 'video',
- sources: [
- {
- src: 'https://vimeo.com/76979871',
- provider: 'vimeo',
- },
- ],
- };
-
- break;
-
- default:
- break;
- }
+ // Set the new source
+ player.source = sources[type];
// Set the current type for next time
currentType = type;
- // Remove active classes
- Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
-
- // Set active on parent
- toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
-
- // Show cite
- Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
- cite.setAttribute('hidden', '');
- });
- document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
+ render(type);
}
// Bind to each button
@@ -237,7 +118,7 @@ import Plyr from '../../../src/js/plyr';
button.addEventListener('click', () => {
const type = button.getAttribute('data-source');
- newSource(type);
+ setSource(type);
if (historySupport) {
window.history.pushState({ type }, '', `#${type}`);
@@ -247,36 +128,27 @@ import Plyr from '../../../src/js/plyr';
// List for backwards/forwards
window.addEventListener('popstate', event => {
- if (event.state && 'type' in event.state) {
- newSource(event.state.type);
+ if (event.state && Object.keys(event.state).includes('type')) {
+ setSource(event.state.type);
}
});
- // On load
- if (historySupport) {
- const video = !currentType.length;
-
- // If there's no current type set, assume video
- if (video) {
- currentType = types.video;
- }
+ // If there's no current type set, assume video
+ if (hasCurrentType) {
+ currentType = 'video';
+ }
- // Replace current history state
- if (currentType in types) {
- window.history.replaceState(
- {
- type: currentType,
- },
- '',
- video ? '' : `#${currentType}`,
- );
- }
+ // Replace current history state
+ if (historySupport && types.includes(currentType)) {
+ window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${currentType}`);
+ }
- // If it's not video, load the source
- if (currentType !== types.video) {
- newSource(currentType, true);
- }
+ // If it's not video, load the source
+ if (currentType !== 'video') {
+ setSource(currentType, true);
}
+
+ render(currentType);
});
});
diff --git a/demo/src/js/sources.js b/demo/src/js/sources.js
new file mode 100644
index 00000000..f0ec3515
--- /dev/null
+++ b/demo/src/js/sources.js
@@ -0,0 +1,78 @@
+const sources = {
+ video: {
+ type: 'video',
+ title: 'View From A Blue Moon',
+ sources: [
+ {
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+ type: 'video/mp4',
+ size: 576,
+ },
+ {
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+ type: 'video/mp4',
+ size: 720,
+ },
+ {
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+ type: 'video/mp4',
+ size: 1080,
+ },
+ {
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+ type: 'video/mp4',
+ size: 1440,
+ },
+ ],
+ poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+ tracks: [
+ {
+ kind: 'captions',
+ label: 'English',
+ srclang: 'en',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+ default: true,
+ },
+ {
+ kind: 'captions',
+ label: 'French',
+ srclang: 'fr',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+ },
+ ],
+ },
+ audio: {
+ type: 'audio',
+ title: 'Kishi Bashi – “It All Began With A Burst”',
+ sources: [
+ {
+ src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+ type: 'audio/mp3',
+ },
+ {
+ src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+ type: 'audio/ogg',
+ },
+ ],
+ },
+ youtube: {
+ type: 'video',
+ sources: [
+ {
+ src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+ provider: 'youtube',
+ },
+ ],
+ },
+ vimeo: {
+ type: 'video',
+ sources: [
+ {
+ src: 'https://vimeo.com/40648169',
+ provider: 'vimeo',
+ },
+ ],
+ },
+};
+
+export default sources;
diff --git a/demo/src/js/tab-focus.js b/demo/src/js/tab-focus.js
new file mode 100644
index 00000000..c1602cf0
--- /dev/null
+++ b/demo/src/js/tab-focus.js
@@ -0,0 +1,31 @@
+// Setup tab focus
+const container = document.getElementById('container');
+const tabClassName = 'tab-focus';
+
+// Remove class on blur
+document.addEventListener('focusout', event => {
+ if (!event.target.classList || container.contains(event.target)) {
+ return;
+ }
+
+ event.target.classList.remove(tabClassName);
+});
+
+// Add classname to tabbed elements
+document.addEventListener('keydown', event => {
+ if (event.keyCode !== 9) {
+ return;
+ }
+
+ // Delay the adding of classname until the focus has changed
+ // This event fires before the focusin event
+ setTimeout(() => {
+ const focused = document.activeElement;
+
+ if (!focused || !focused.classList || container.contains(focused)) {
+ return;
+ }
+
+ focused.classList.add(tabClassName);
+ }, 10);
+});
diff --git a/demo/src/js/toggle-class.js b/demo/src/js/toggle-class.js
new file mode 100644
index 00000000..1661433b
--- /dev/null
+++ b/demo/src/js/toggle-class.js
@@ -0,0 +1,5 @@
+// Toggle class on an element
+const toggleClass = (element, className = '', toggle = false) =>
+ element && element.classList[toggle ? 'add' : 'remove'](className);
+
+export default toggleClass;
diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 5ff6fc12..279007fb 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -6,11 +6,9 @@
.button,
.button__count {
align-items: center;
- background: $color-button-background;
border: 0;
border-radius: $border-radius-base;
box-shadow: 0 1px 1px rgba(#000, 0.1);
- color: $color-button-text;
display: inline-flex;
padding: ($spacing-base * 0.75);
position: relative;
@@ -21,14 +19,16 @@
// Buttons
.button {
+ background: $color-button-background;
+ color: $color-button-text;
font-weight: $font-weight-bold;
- padding-left: $spacing-base;
- padding-right: $spacing-base;
+ padding-left: ($spacing-base * 1.25);
+ padding-right: ($spacing-base * 1.25);
transition: all 0.2s ease;
&:hover,
&:focus {
- color: $gray-dark;
+ background: $color-button-background-hover;
// Remove the underline/border
&::after {
@@ -65,12 +65,14 @@
// Count bubble
.button__count {
animation: fadein 0.2s ease;
- margin-left: ($spacing-base / 2);
+ background: $color-button-count-background;
+ color: $color-button-count-text;
+ margin-left: ($spacing-base * 0.75);
&::before {
border: $arrow-size solid transparent;
border-left-width: 0;
- border-right-color: $color-button-background;
+ border-right-color: $color-button-count-background;
content: '';
height: 0;
position: absolute;
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index eab2214e..fd014ead 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -6,6 +6,13 @@ header {
padding-bottom: $spacing-base;
text-align: center;
+ h1 span {
+ animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+ display: inline-block;
+ font-weight: $font-weight-light;
+ opacity: 0.5;
+ }
+
.call-to-action {
margin-top: ($spacing-base * 1.5);
}
@@ -15,5 +22,9 @@ header {
max-width: 360px;
padding-bottom: ($spacing-base * 2);
text-align: left;
+
+ p:first-of-type {
+ @include font-size($font-size-base + 1);
+ }
}
}
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
index b2b353a6..ec9f8c5c 100644
--- a/demo/src/sass/components/icons.scss
+++ b/demo/src/sass/components/icons.scss
@@ -19,5 +19,5 @@ label svg {
a .icon,
.btn .icon {
- margin-right: floor($spacing-base / 3);
+ margin-right: ($spacing-base / 2);
}
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index b2930862..1d49be3a 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -12,7 +12,6 @@ button.faux-link {
a {
border-bottom: 1px dotted currentColor;
color: $color-link;
- font-weight: $font-weight-bold;
position: relative;
text-decoration: none;
transition: all 0.2s ease;
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index d088a91d..d05e9849 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -2,16 +2,10 @@
// Examples
// ==========================================================================
-// For non supported browsers
-video {
- max-width: 100%;
- vertical-align: middle;
-}
-
// Example players
.plyr {
border-radius: $border-radius-base;
- box-shadow: 0 2px 5px rgba(#000, 0.2);
+ box-shadow: 0 2px 15px rgba(#000, 0.1);
margin: $spacing-base auto;
&.plyr--audio {
@@ -34,17 +28,9 @@ video {
// Style full supported player
.plyr__cite {
- display: none;
- margin-top: $spacing-base;
+ color: $color-gray-500;
.icon {
margin-right: ceil($spacing-base / 6);
}
}
-
-.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
-.plyr--audio ~ ul .plyr__cite--audio,
-.plyr--youtube ~ ul .plyr__cite--youtube,
-.plyr--vimeo ~ ul .plyr__cite--vimeo {
- display: block;
-}
diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
index 0501c1df..b9b2d4d5 100644
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@@ -35,11 +35,10 @@ main {
aside {
align-items: center;
background: #fff;
- color: $gray;
display: flex;
flex-shrink: 0;
justify-content: center;
- padding: ($spacing-base * 0.75);
+ padding: $spacing-base;
position: relative;
text-align: center;
text-shadow: none;
diff --git a/demo/src/sass/lib/animation.scss b/demo/src/sass/lib/animation.scss
index 3c14b0a7..64eb5595 100644
--- a/demo/src/sass/lib/animation.scss
+++ b/demo/src/sass/lib/animation.scss
@@ -11,3 +11,17 @@
opacity: 1;
}
}
+
+@keyframes shrinkHide {
+ 0% {
+ opacity: 0.5;
+ width: 38px;
+ }
+ 20% {
+ width: 45px;
+ }
+ 100% {
+ opacity: 0;
+ width: 0;
+ }
+}
diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss
index cdfcb87d..268157ae 100644
--- a/demo/src/sass/lib/mixins.scss
+++ b/demo/src/sass/lib/mixins.scss
@@ -36,7 +36,7 @@
@return #{$rem}rem;
}
-@mixin font-size($size: 16) {
+@mixin font-size($size: $font-size-base) {
font-size: $size * 1px; // Fallback in px
font-size: calculate-rem($size);
}
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index 65d3f7b7..ecd55ad1 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -2,31 +2,41 @@
// Colors
// ==========================================================================
-// Greyscale
-$gray-dark: #343f4a;
-$gray: #55646b;
-$gray-light: #cbd0d3;
-$gray-lighter: #dbe3e8;
-$off-white: #f2f5f7;
+// Grayscale
+$color-gray-900: hsl(210, 15%, 16%);
+$color-gray-800: lighten($color-gray-900, 9%);
+$color-gray-700: lighten($color-gray-800, 9%);
+$color-gray-600: lighten($color-gray-700, 9%);
+$color-gray-500: lighten($color-gray-600, 9%);
+$color-gray-400: lighten($color-gray-500, 9%);
+$color-gray-300: lighten($color-gray-400, 9%);
+$color-gray-200: lighten($color-gray-300, 9%);
+$color-gray-100: lighten($color-gray-200, 9%);
+$color-gray-50: lighten($color-gray-100, 9%);
-// Text
-$color-text: #fff;
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
-// Plyr
-$color-brand-primary: #1aafff;
+// Text
+$color-text: $color-gray-700;
+$color-headings: $color-brand-primary;
// Brands
$color-twitter: #4baaf4;
-$color-youtube: #cc181e;
-$color-vimeo: #19b7ed;
// Elements
-$color-link: #fff;
-$color-background: $color-brand-primary;
+$color-link: $color-brand-primary;
+
+// Background
+$color-background-from: hsl(198, 100%, 94%);
+$color-background-to: hsl(198, 100%, 98%);
// Buttons
-$color-button-background: #fff;
-$color-button-text: $gray;
+$color-button-background: $color-brand-primary;
+$color-button-text: #fff;
+$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-count-background: #fff;
+$color-button-count-text: $color-gray-600;
// Focus
$tab-focus-default-color: #fff;
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
index d750efe2..84ff819f 100644
--- a/demo/src/sass/settings/cosmetic.scss
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -9,4 +9,4 @@ $arrow-size: 5px;
$border-radius-base: 4px;
// Background
-$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
+$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index ae6be636..edd917c4 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px;
// Other
$plyr-font-smoothing: true;
+// Colors
+$plyr-color-main: $color-brand-primary;
+
// Captions
$plyr-font-size-captions-base: $plyr-font-size-base;
$plyr-font-size-captions-small: $plyr-font-size-small;
diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss
index a19b0a95..085838fd 100644
--- a/demo/src/sass/settings/spacing.scss
+++ b/demo/src/sass/settings/spacing.scss
@@ -2,4 +2,4 @@
// Colors
// ==========================================================================
-$spacing-base: 20px;
+$spacing-base: 16px;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
index 452298bd..736d8e89 100644
--- a/demo/src/sass/type/base.scss
+++ b/demo/src/sass/type/base.scss
@@ -14,7 +14,6 @@ body {
font-family: $font-sans-serif;
font-weight: $font-weight-medium;
line-height: $line-height-base;
- text-shadow: 0 1px 1px rgba(#000, 0.15);
}
button,
@@ -26,7 +25,7 @@ textarea {
p,
small {
- margin: 0 0 $spacing-base;
+ margin: 0 0 ($spacing-base * 1.5);
}
small {
diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss
index 7039dd37..670619e8 100644
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@@ -4,8 +4,9 @@
h1 {
@include font-size($font-size-h1);
+ color: $color-headings;
font-weight: $font-weight-bold;
letter-spacing: $letter-spacing-headings;
line-height: 1.2;
- margin: 0 0 $spacing-base;
+ margin: 0 0 ($spacing-base * 1.5);
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 16:38:44 +0000