Preparing to test TextFit

customize.dist/pages/index.js

@@ -125,48 +125,6 @@ define([
         var privacyLink = fastLink('privacy');
         var termsLink = fastLink('terms');
 
-/*
-        var blocks = [
-            h('div.row.cp-page-section', [
-                h('div.col-sm-6',
-                    h('img.img-fluid.cp-img-invert', {
-                        src:'/customize/images/shredder.png',
-                        alt:'',
-                        'aria-hidden': 'true'
-                    })
-                ),
-                h('div.col-sm-6', [
-                    h('h2', Msg.home_privacy_title),
-                    h('p', Msg.home_privacy_text)
-                ])
-            ]),
-            h('div.row.cp-page-section',
-                h('div.col-sm-12', [
-                    h('h2', Msg.home_host_title),
-                    h('p', Pages.hostDescription),
-                ])
-            ),
-            h('div.row.cp-page-section', [
-                h('div.col-sm-6', [
-                    h('h2', Msg.home_opensource_title),
-                    opensource, // XXX
-                    h('img.small-logo.cp-img-invert', {
-                        src: '/customize/images/logo_AGPLv3.svg',
-                        alt: 'APGL3 License Logo'
-                    })
-                ]),
-                h('div.col-sm-6', [
-                    h('h2', Msg.home_support_title),
-                    supportText, // XXX
-                    subscribeButton,
-                    Pages.crowdfundingButton(function () {
-                        Feedback.send('HOME_SUPPORT_CRYPTPAD');
-                    }),
-                ])
-            ])
-        ];
-*/
-
         var notice;
 /*  Admins can specify a notice to display in application_config.js via the `homeNotice` attribute.
     If the text is the key for the translation system then then the most appropriate translated text
@@ -178,6 +136,11 @@ define([
             ]));
         }
 
+        // instance title
+        var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name);
+        // XXX DB: How does TextFit work?!
+        // TextFit($(h1).find('.cp-instance-title')[0], {minFontSize: 13, maxFontSize: 18});
+
         // instance location
         var locationBlock;
 
@@ -219,7 +182,7 @@ define([
                                 'aria-hidden': 'true',
                                 alt: ''
                             }),
-                            h('h1.cp-instance-title', Pages.Instance.name),
+                            instanceTitle,
                             UI.setHTML(h('span.tag-line'), Pages.Instance.description),
                             locationBlock,
                             termsLink,

customize.dist/src/less2/pages/page-index.less

@@ -28,6 +28,18 @@
         color: @cryptpad_text_col;
     }
 
+
+    h1.cp-instance-title {
+        text-align: center;
+        font-family: "IBM Plex Mono";
+        font-weight: 500;
+        color: @cryptpad_color_brand;
+        font-size: 2.8rem;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+    }
+
     .cp-home-hero {
         width: 100%;
         align-self: center;
@@ -184,6 +196,7 @@
             font-size: 1.5rem;
             display: block;
             height: min-content;
+            flex-shrink: 0;
             width: fit-content;
             padding: 10px;
             border-radius: @infopages-radius-L;