mirror of https://github.com/xwiki-labs/cryptpad
Reduce instance title size on small screens
This commit is contained in:
parent
3a9505465f
commit
c3479b327b
|
@ -134,19 +134,7 @@ define([
|
|||
|
||||
// instance title
|
||||
|
||||
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);
|
||||
|
||||
var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name);
|
||||
|
||||
// instance location
|
||||
var locationBlock;
|
||||
|
|
|
@ -144,7 +144,7 @@
|
|||
display: flex;
|
||||
|
||||
> * {
|
||||
overflow:auto;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-width: 260px;
|
||||
max-width: 500px;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/browser.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
&.cp-page-index {
|
||||
|
@ -31,20 +32,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;
|
||||
font-size: 2.8rem; // Not used
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: pre-line;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media screen and (max-width: @browser_media-medium-screen) {
|
||||
&.html h1.cp-instance-title {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue