Convert Basic theme from Boostrap 3 to Boostrap 4 and use sass instead of lessc (also fixes #1770)

docs/admin/install.rst

@@ -216,7 +216,7 @@ Typing "./m" (or "m" on Windows) will display a menu similar to:
     backup *        roll 3 prior backups and create new backup *option, specify file
     dump-html *     create a static HTML image of wiki *options, see docs
 
-    css             run lessc to update basic theme CSS files
+    css             run sass to update basic theme CSS files
     tests *         run tests, log output (-v -k my_test)
     coding-std      correct scripts that taint the repository with trailing spaces..
 

docs/devel/development.rst

@@ -89,10 +89,10 @@ add more tools, exercise tools
 
   * On Ubuntu 14.04 or any distribution based on Ubuntu you need to install "npm" and "nodejs-legacy" (to get the "node" command).
 
-* install lessc ("less" below is not a typo)::
+* install sass::
 
-    sudo npm install less -g  # Windows: npm install less -g
-    lessc --version"  # show version number to prove it works
+    sudo npm install -g sass  # Windows: npm install -g sass
+    sass --version"  # show version number to prove it works
 * regenerate CSS files::
 
     ./m css  # Windows: m css
@@ -388,8 +388,8 @@ values it can use. In addition to this general environment, parameters can
 also be given directly to the render call.
 
 Each theme has a ``static/css`` directory. Stylesheets for the Basic theme in
-MoinMoin are compiled using the source ``theme.less`` file in the Basic theme's
-``static/custom-less`` directory.
+MoinMoin are compiled using the source ``theme.scss`` file in the Basic theme's
+``custom`` directory.
 ::
 
     ./m css  # Windows: m css

docs/man/moin.rst

@@ -42,7 +42,7 @@ the menu::
     dump-html *     create a static HTML image of wiki *options, see docs
     index           delete and rebuild indexes
 
-    css             run lessc to update basic theme CSS files
+    css             run sass to update basic theme CSS files
     tests *         run tests, log output (-v -k my_test)
     coding-std      correct scripts that taint the repository with trailing spaces..
 

quickinstall.py

@@ -112,7 +112,7 @@
 backup *        roll 3 prior backups and create new backup *option, specify file
 dump-html *     create a static HTML image of wiki *options, see docs
 
-css             run lessc to update basic theme CSS files
+css             run sass to update basic theme CSS files
 tests *         run tests, log output (-v -k my_test)
 coding-std      correct scripts that taint the repository with trailing spaces..
 
@@ -453,18 +453,14 @@ def cmd_dump_html(self, *args):
         self.run_time("HTML Dump")
 
     def cmd_css(self, *args):
-        """run lessc to update basic theme CSS files"""
-        bootstrap_loc = get_bootstrap_data_location().strip() + "/less"
+        """run sass to update basic theme CSS files"""
+        bootstrap_loc = get_bootstrap_data_location().strip() + "/scss"
         pygments_loc = get_pygments_data_location().strip() + "/css"
-        basic_loc = "src/moin/themes/basic/static/custom-less"
+        basic_loc = "src/moin/themes/basic"
 
-        print("Running lessc to update Basic theme CSS files...")
-        if WINDOWS_OS:
-            data_loc = f"{bootstrap_loc};{pygments_loc}"
-        else:
-            data_loc = f"{bootstrap_loc}:{pygments_loc}"
-        include = "--include-path=" + data_loc
-        command = f"cd {basic_loc}{SEP}lessc {include} theme.less ../css/theme.css"
+        print("Running sass to update Basic theme CSS files...")
+        includes = f"--load-path={bootstrap_loc} --load-path={pygments_loc}"
+        command = f"cd {basic_loc}{SEP} sass --verbose {includes} scss/theme.scss static/css/theme.css"
         result = subprocess.call(command, shell=True)
         if result == 0:
             print("Success: Basic theme CSS files updated.")

scripts/coding_std.py

@@ -27,7 +27,7 @@
 
 # file types to be processed
 # ignore help .meta and .data files; ckeditor uses tabs, markdown uses 2 trailing blanks for line break
-SELECTED_SUFFIXES = set("py bat cmd html css js styl less rst".split())
+SELECTED_SUFFIXES = set("py bat cmd html css js styl less rst scss".split())
 
 # stuff considered DOS/WIN that must have \r\n line endings
 WIN_SUFFIXES = set("bat cmd".split())

src/moin/static/js/basic.js

@@ -14,6 +14,6 @@ $(document).ready(function () {
     }
     // Support for extra small viewports, sidebar is initially hidden by CSS, made visible when user clicks button
     $('#hideshowsidebar').click(function() {
-        $('#moin-main-wrapper').toggleClass('showsidebar');
+        $('.moin-sidebar').toggleClass('showsidebar');
     });
 });

src/moin/themes/basic/scss/_notice.scss

@@ -0,0 +1,7 @@
+/*          DO NOT EDIT THIS FILE!
+
+    This CSS file is generated using the "sass" tool.
+    To modify it, edit the files in the "./scss" directory and re-generate this file:
+
+        ./m css  # or "m css" for windows
+*/

src/moin/themes/basic/scss/_variables.scss

@@ -0,0 +1,59 @@
+@use "sass:color";
+
+// https://www.canva.com/colors/color-palettes/foil-covered-sneakers/
+$theme-col-1:  #90ADC6; // Blue Gray
+$theme-col-2:  #E9EAEC; // Pewter
+$theme-col-3:  #FAD02C; // Yellow
+$theme-col-4:  #333652; // Dark Blue
+
+$gray-dark:    #333652;
+$gray:         #555555;
+$gray-light:   #555555;
+
+$brand-danger: #d9534f;
+
+$text-color:   $gray-dark;
+
+// Links
+// -------------------------
+$link-nonexistent-color: color.scale($brand-danger, $lightness: 15%);
+$link-nonexistent-hover-color: $brand-danger;
+
+// Moin-Inverted Navbar
+//----------------------
+$moin-navbar-inverse-color:                    $theme-col-2;
+$moin-navbar-inverse-bgcolor:                  $theme-col-2;
+$moin-navbar-inverse-textcolor:                $theme-col-1;
+
+$navbar-inverse-link-hover-color:              $theme-col-1;
+
+// Large screen / wide desktop
+$container-large-desktop:   1300px;
+$container-tablet:          728px;
+
+// Darker-Navbar and List heading background
+$navbar-bg: $theme-col-2;
+
+// Search
+// -------------------------
+$searchstats_color:              #808080;
+$search_option_bar_color:        white;
+$search_option_bar_text_color:   $theme-col-1;
+
+// Bootstrap
+// -------------------------
+$bootstrap_default_blue:         $theme-col-1;
+
+// General colors
+// -------------------------
+$white:                          #ffffff;
+
+// Media queries breakpoints
+// -------------------------
+$screen-xs-min:                  480px;
+$screen-xs-max:                  767px;
+$screen-sm-min:                  768px;
+$screen-sm-max:                  991px;
+$screen-md-min:                  992px;
+$screen-md-max:                 1199px;
+$screen-lg-min:                 1200px;