Add css-styled header

01-lesson1/lesson-title.ipynb

@@ -1,17 +1,77 @@
 {
  "cells": [
   {
-   "cell_type": "markdown",
-   "metadata": {},
+   "cell_type": "code",
+   "execution_count": 41,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<style>body {\n",
+       "  margin: 0;\n",
+       "  padding: 0;\n",
+       "  background: black;\n",
+       "  color: white;\n",
+       "}\n",
+       "\n",
+       ".title {\n",
+       "  width: 100%;\n",
+       "  background: rgb(50, 50, 50);\n",
+       "}\n",
+       "\n",
+       ".title h1 {\n",
+       "  text-align: center;\n",
+       "  color: rgb(220, 120, 0);\n",
+       "  font-family: Ubuntu;\n",
+       "  padding: .3em;\n",
+       "}\n",
+       "\n",
+       ".lesson_info {\n",
+       "  width: 100%;\n",
+       "  background: rgb(200, 210, 200);\n",
+       "  padding: .3em;\n",
+       "}\n",
+       "</style>"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "execution_count": 41,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
    "source": [
-    "# [lesson name]"
+    "from IPython.core.display import HTML\n",
+    "\n",
+    "def _set_css_style(css_file_path):\n",
+    "   \"\"\"\n",
+    "   Read the custom CSS file and load it into Jupyter.\n",
+    "   Pass the file path to the CSS file.\n",
+    "   \"\"\"\n",
+    "\n",
+    "   styles = open(css_file_path, \"r\").read()\n",
+    "   s = '<style>%s</style>' % styles     \n",
+    "   return HTML(s)\n",
+    "\n",
+    "_set_css_style('../styles/custom.css')"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "<div class=\"warning\" style='padding:0.5em;background-color:#f1f1f1;border:1px solid black;width:95%'>\n",
+    "\n",
+    "<div class=\"title\">\n",
+    "\n",
+    "# [Lesson name]\n",
+    "</div>\n",
+    "\n",
+    "<div class=\"lesson_info\">\n",
     "\n",
     "Lesson time: XX m   \n",
     "Contributors: \n",
@@ -21,7 +81,8 @@
     "- point 1\n",
     "- point 2 ...\n",
     "\n",
-    "</div>\n"
+    "</div>\n",
+    "\n"
    ]
   },
   {
@@ -132,7 +193,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3.8.8 ('base')",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -146,7 +207,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.8"
+   "version": "3.9.0"
   },
   "vscode": {
    "interpreter": {

styles/custom.css

@@ -1,6 +1,24 @@
-prova {
-    border: 1.5px solid #333;
-    padding: 8px 12px;
-    background-image: linear-gradient(180deg, #fff, rgb(160, 147, 147));
-    position: static;
-}
+body {
+  margin: 0;
+  padding: 0;
+  background: black;
+  color: white;
+}
+
+.title {
+  width: 100%;
+  background: rgb(50, 50, 50);
+}
+
+.title h1 {
+  text-align: center;
+  color: rgb(220, 120, 0);
+  font-family: Ubuntu;
+  padding: .3em;
+}
+
+.lesson_info {
+  width: 100%;
+  background: rgb(200, 210, 200);
+  padding: .3em;
+}