Navbar site name now accommodates longer site names.

README.md

@@ -24,6 +24,7 @@ Trema Theme for Moodle LMS
 - [Language Support](#language-support)
 - [FAQ](#faq)
   - [Answers to Frequently Asked Questions](#answers-to-frequently-asked-questions)
+    - [What can I override in Trema's Raw SCSS settings?](#what-can-i-override-in-tremas-raw-scss-settings)
     - [Are there any security considerations?](#are-there-any-security-considerations)
     - [How can I get answers to other questions?](#how-can-i-get-answers-to-other-questions)
   - [Contributors](#contributors)
@@ -35,6 +36,7 @@ Trema Theme for Moodle LMS
 The Trema theme is a free, responsive Moodle theme that offers a clean and modern design. One unique aspect of the Trema theme is its ability to display course information in a grid format, which can be particularly useful for sites with many courses. Additionally, it includes options for a customizable frontpage, login page, and footer. Overall, the Trema theme for Moodle aims to provide a visually appealing and user-friendly interface for Moodle users. The main goal for this theme is to not need another site for information/advertising/marketing.
 
 All features from Boost (native Moodle theme) plus these Trema features:
+
 - Frontpage
   - Configurable optional image banner or content slider with texts.
   - Banner title spacing.
@@ -157,6 +159,25 @@ This plugin has not been tested for right-to-left (RTL) language support althoug
 
 IMPORTANT: Although we expect everything to work, this release has not been fully tested in every possible situation. If you find a problem, please help by reporting it in the [Bug Tracker](https://github.com/trema-tech/moodle-theme_trema/issues).
 
+### What can I override in Trema's Raw SCSS settings?
+
+<strong>Important:</strong> Be sure to include trailing semi-colons or Moodle will break the theme's CSS. Example:
+
+Bad:
+
+    $banner-text-color: #462323
+
+Good:
+
+    $banner-text-color: #462323;
+
+| Description                         | SCSS variable        | Default                        | Sample value |
+|:------------------------------------|:---------------------|:-------------------------------|:-------------|
+| Text color of the frontpage banner. | $banner-font-color   | $white                         | #462323      |
+| Set scale of site name font size.   | $sitename-font-scale | 1 (site name > 36 chars: 0.75) | 0.8          |
+
+There are many more already available. These will be documented over time.
+
 ### Are there any security considerations?
 
 There are no known security considerations at this time.

lib.php

@@ -255,7 +255,7 @@ function theme_trema_get_pre_scss($theme) {
  * @return string
  */
 function theme_trema_get_main_scss_content($theme) {
-    global $CFG;
+    global $CFG, $SITE;
 
     $scss = '';
 
@@ -279,6 +279,10 @@ function theme_trema_get_main_scss_content($theme) {
         $scss .= "#frontpage-banner {background-image: $darkoverlay url([[pix:theme|frontpage/banner]]);}";
     }
 
+    // Compensate for long site names.
+    $sitenamefontscale = strlen($SITE->shortname) < 36 ? '1' : '0.75';
+    $scss .= '$sitename-font-scale: ' . $sitenamefontscale . ";\n";
+
     return $scss;
 }
 

scss/defaultvariables.scss

@@ -75,6 +75,8 @@ $banner-title-font-family: 'Lato' !default;
 $h1-font-family: 'Lato' !default;
 $hx-font-family: 'Lato' !default;
 
+$sitename-font-scale: 1;
+
 $banner-font-color: $white !default;
 $text-transform: 'none' !default;
 $banner-title-transform: 'none' !default;

scss/trema/header.scss

@@ -232,13 +232,28 @@
     }
 }
 
-#page-wrapper .navbar-light  .navbar-brand {
+#page-wrapper .navbar-light .navbar-brand {
     color: choose-contrast-color($header-bg-color);
     font-weight: 400;
+    text-wrap: wrap;
+    overflow: hidden;
+    font-size: calc(1.25rem * #{$sitename-font-scale});
+    line-height: calc(1.25rem * #{$sitename-font-scale} + 0.05rem);
+    max-width: 260px;
+    width: fit-content;
     &:hover,
     &:focus {
         font-weight: 500;
     }
+    @media (max-width: 600px) {
+        font-size: calc(0.9rem * #{$sitename-font-scale});
+        line-height: calc(0.9rem * #{$sitename-font-scale} + 0.05rem);
+    }
+}
+.drawerheader .sitename {
+    text-wrap: wrap;
+    overflow: hidden;
+    line-height: 1.1rem;
 }
 
 #page .secondary-navigation {
@@ -289,10 +304,8 @@
         }
         .navbar-brand.d-none {
             display: flex !important;
-            margin-left: 10px !important;
-            white-space: nowrap;
+            margin-left: 8px !important;
             overflow: hidden;
-            text-overflow: ellipsis;
         }
         .usermenu {
             padding-right: 0;