From a8787d380e81ef2e54f5a166555f0ca796955225 Mon Sep 17 00:00:00 2001 From: Sven van der Burg Date: Wed, 10 Aug 2022 15:05:58 +0200 Subject: [PATCH 1/3] Add css-styled header --- 01-lesson1/custom.css | 11 +++++++ 01-lesson1/lesson-title.ipynb | 55 +++++++++++++++++++++++++++++++---- 2 files changed, 60 insertions(+), 6 deletions(-) create mode 100644 01-lesson1/custom.css diff --git a/01-lesson1/custom.css b/01-lesson1/custom.css new file mode 100644 index 0000000..944f53d --- /dev/null +++ b/01-lesson1/custom.css @@ -0,0 +1,11 @@ +.header { + width: 105%; + background-color: #0e2b59; + color: #ffffff; + font-size: 14px; + text-align: left; + padding-top: 8px; + padding-right: 8px; + padding-bottom: 8px; + padding-left: 8px; +} diff --git a/01-lesson1/lesson-title.ipynb b/01-lesson1/lesson-title.ipynb index c45c34e..a5746c8 100644 --- a/01-lesson1/lesson-title.ipynb +++ b/01-lesson1/lesson-title.ipynb @@ -1,17 +1,60 @@ { "cells": [ { - "cell_type": "markdown", - "metadata": {}, + "cell_type": "code", + "execution_count": 12, + "metadata": { + "tags": [] + }, + "outputs": [ + { + "data": { + "text/html": [ + "" + ], + "text/plain": [ + "" + ] + }, + "execution_count": 12, + "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 = '' % styles \n", + " return HTML(s)\n", + "\n", + "_set_css_style('custom.css')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ - "
\n", + "
\n", + " \n", + "# [Lesson name]\n", "\n", "Lesson time: XX m \n", "Contributors: \n", @@ -132,7 +175,7 @@ ], "metadata": { "kernelspec": { - "display_name": "Python 3.8.8 ('base')", + "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, @@ -146,7 +189,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.8.8" + "version": "3.9.0" }, "vscode": { "interpreter": { From d54993f27de289a3e6b9b23de302051ac2fe3d82 Mon Sep 17 00:00:00 2001 From: Sven van der Burg Date: Wed, 10 Aug 2022 16:00:55 +0200 Subject: [PATCH 2/3] Make header a bit nicer-looking --- 01-lesson1/custom.css | 33 ++++++++++++----- 01-lesson1/lesson-title.ipynb | 69 +++++++++++++++++++++++++++-------- 2 files changed, 76 insertions(+), 26 deletions(-) diff --git a/01-lesson1/custom.css b/01-lesson1/custom.css index 944f53d..2bd8b48 100644 --- a/01-lesson1/custom.css +++ b/01-lesson1/custom.css @@ -1,11 +1,24 @@ -.header { - width: 105%; - background-color: #0e2b59; - color: #ffffff; - font-size: 14px; - text-align: left; - padding-top: 8px; - padding-right: 8px; - padding-bottom: 8px; - padding-left: 8px; +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; } diff --git a/01-lesson1/lesson-title.ipynb b/01-lesson1/lesson-title.ipynb index a5746c8..80d4471 100644 --- a/01-lesson1/lesson-title.ipynb +++ b/01-lesson1/lesson-title.ipynb @@ -2,7 +2,7 @@ "cells": [ { "cell_type": "code", - "execution_count": 12, + "execution_count": 36, "metadata": { "tags": [] }, @@ -10,24 +10,56 @@ { "data": { "text/html": [ - "" + "\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, 200, 200);\n", + " padding: .3em;\n", + "}\n", + "\n", + ".lesson_info h1 {\n", + " font-family: Ubuntu;\n", + " padding: .3em;\n", + "}\n", + ".content-wrapper {\n", + " width: 80%;\n", + " height: 3000px;\n", + " padding: 1em 10%;\n", + "}\n", + "\n", + ".content-wrapper h1 {\n", + " margin: 0;\n", + " color: rgb(220, 120, 0);\n", + "}\n", + "\n", + ".content-wrapper p {\n", + " font-family: \"Open Sans\";\n", + " text-indent: 1.5em;\n", + "}" ], "text/plain": [ "" ] }, - "execution_count": 12, + "execution_count": 36, "metadata": {}, "output_type": "execute_result" } @@ -52,9 +84,13 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "
\n", - " \n", + "\n", + "
\n", + "\n", "# [Lesson name]\n", + "
\n", + "\n", + "
\n", "\n", "Lesson time: XX m \n", "Contributors: \n", @@ -64,7 +100,8 @@ "- point 1\n", "- point 2 ...\n", "\n", - "
\n" + "
\n", + "\n" ] }, { From 18d64dbec8127140de0c17d4e7b78c21edc34991 Mon Sep 17 00:00:00 2001 From: Sven van der Burg Date: Wed, 10 Aug 2022 16:51:48 +0200 Subject: [PATCH 3/3] Put custom.css in styles folder --- 01-lesson1/custom.css | 24 ------------------------ 01-lesson1/lesson-title.ipynb | 29 +++++------------------------ styles/custom.css | 30 ++++++++++++++++++++++++------ 3 files changed, 29 insertions(+), 54 deletions(-) delete mode 100644 01-lesson1/custom.css diff --git a/01-lesson1/custom.css b/01-lesson1/custom.css deleted file mode 100644 index 2bd8b48..0000000 --- a/01-lesson1/custom.css +++ /dev/null @@ -1,24 +0,0 @@ -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; -} diff --git a/01-lesson1/lesson-title.ipynb b/01-lesson1/lesson-title.ipynb index 80d4471..27302ad 100644 --- a/01-lesson1/lesson-title.ipynb +++ b/01-lesson1/lesson-title.ipynb @@ -2,7 +2,7 @@ "cells": [ { "cell_type": "code", - "execution_count": 36, + "execution_count": 41, "metadata": { "tags": [] }, @@ -31,35 +31,16 @@ "\n", ".lesson_info {\n", " width: 100%;\n", - " background: rgb(200, 200, 200);\n", + " background: rgb(200, 210, 200);\n", " padding: .3em;\n", "}\n", - "\n", - ".lesson_info h1 {\n", - " font-family: Ubuntu;\n", - " padding: .3em;\n", - "}\n", - ".content-wrapper {\n", - " width: 80%;\n", - " height: 3000px;\n", - " padding: 1em 10%;\n", - "}\n", - "\n", - ".content-wrapper h1 {\n", - " margin: 0;\n", - " color: rgb(220, 120, 0);\n", - "}\n", - "\n", - ".content-wrapper p {\n", - " font-family: \"Open Sans\";\n", - " text-indent: 1.5em;\n", - "}" + "" ], "text/plain": [ "" ] }, - "execution_count": 36, + "execution_count": 41, "metadata": {}, "output_type": "execute_result" } @@ -77,7 +58,7 @@ " s = '' % styles \n", " return HTML(s)\n", "\n", - "_set_css_style('custom.css')" + "_set_css_style('../styles/custom.css')" ] }, { diff --git a/styles/custom.css b/styles/custom.css index 1025f22..2bd8b48 100644 --- a/styles/custom.css +++ b/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; -} \ No newline at end of file +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; +}