Load CSS stylesheets in main notebook

qe.ipynb

@@ -24,6 +24,17 @@
     "load_profile(); # noqa: E402"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from aiidalab_widgets_base.utils.loaders import load_css_stylesheet\n",
+    "\n",
+    "load_css_stylesheet(package=\"aiidalab_qe.app.static.styles.css\")"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -50,8 +61,7 @@
     "from jinja2 import Environment\n",
     "\n",
     "from aiidalab_qe.app import App\n",
-    "from aiidalab_qe.app.static import templates, styles\n",
-    "\n",
+    "from aiidalab_qe.app.static import styles, templates\n",
     "from aiidalab_qe.version import __version__"
    ]
   },

src/aiidalab_qe/app/static/styles/README.md

@@ -0,0 +1,23 @@
+# Stylesheets for the Quantum ESPRESSO app
+
+This folder contains two folders:
+
+- `scss` - a folder for SCSS-format stylesheets
+- `css`  - a folder serving as the compilation target for SCSS files
+
+It is recommended to add SCSS stylesheets in the SCSS folder for functionality and flexibility (see https://sass-lang.com/).
+
+Compiling SCSS into CSS (in the CSS folder) can be done using:
+
+- The [compile-hero](https://marketplace.visualstudio.com/items?itemName=Wscats.eno) extension, if using VS Code
+- The `sass` [CLI](https://sass-lang.com/install/)
+
+Stylesheets may be loaded directly from the CSS folder using
+
+```python
+from aiidalab_widgets_base.utils.loaders import load_css_stylesheet
+
+load_css_stylesheet(package="aiidalab_qe.app.static.styles.css", filename="<stylesheet-name>.css")
+```
+
+If `filename` is not provided, all CSS stylesheets will be loaded from the `css` package.

src/aiidalab_qe/app/static/styles/custom.css

@@ -0,0 +1,3 @@
+.output_subarea {
+  max-width: none !important;
+}

src/aiidalab_qe/app/static/styles/scss/custom.scss

@@ -0,0 +1,3 @@
+.output_subarea {
+  max-width: none !important;
+}