diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index fc74c3916..264ff560d 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -133,7 +133,20 @@ define([ } // instance title - var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name); + + var instanceTitleText = Pages.Instance.name; + var instanceTitle; + var words = instanceTitleText.split(/(\.|:|\/|-| )/); // Split on ., :, /, -, or space + var elements = words.map(function (word) { + if (word === '.' || word === ':' || word === '/' || word === '-') { + return h('span.separator', word); // Apply a class to separators for styling + } else if (word.trim() !== '') { + return h('span', word); + } + return ' '; // Preserve spaces as-is + }); + instanceTitle = h('h1.cp-instance-title', elements); + // instance location var locationBlock; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 49364f409..06b1b00d4 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -38,9 +38,14 @@ font-weight: 500; color: @cryptpad_color_brand; font-size: 2.8rem; - overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; + white-space: pre-line; + + span{ + display: inline-block; + white-space: nowrap; + } } .cp-home-hero { @@ -85,7 +90,9 @@ .cp-instance-links { padding: 1.3rem; a { - margin: 1.3rem; + display: inline-block; + margin: 0.5em; + white-space: nowrap; } } } @@ -118,7 +125,7 @@ .cp-app-grid-apps { display: flex; flex-wrap: wrap; - justify-content: space-between; + justify-content: center; padding: 0 0.8rem; } a {