Add a dedicated stylesheet (#190)

This PR moves CSS styles to a local stylesheet and loads it in the main notebook. It also adds more CSS classes for app containers.

miscellaneous/styles.css

@@ -0,0 +1,87 @@
+.output_subarea {
+  max-width: none !important;
+}
+
+.home-notification {
+  background-color: antiquewhite;
+  margin: 2px;
+  padding: 8px;
+  border: 1px solid red;
+}
+
+.app-container {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+}
+
+.logo {
+  max-width: 200px;
+  margin: 20px 0;
+}
+
+.features {
+  display: flex;
+  gap: 50px;
+  margin-top: 20px;
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 140px;
+  min-height: 140px;
+  text-align: center;
+  text-decoration: none;
+  color: inherit;
+  padding: 10px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -ms-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.feature:hover {
+  text-decoration: none;
+  color: #b71b27;
+  background-color: #f5f5f5;
+}
+
+.feature:hover .feature-logo {
+  transform: scale(1.2);
+}
+
+.feature-logo {
+  max-width: 100px;
+  margin-bottom: 10px;
+  font-size: 40px;
+  transition: transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  -moz-transition: transform 0.2s;
+  -ms-transition: transform 0.2s;
+  -o-transition: transform 0.2s;
+}
+
+.feature-logo:hover {
+  transform: scale(1.2);
+  text-decoration: none;
+}
+
+.feature-label {
+  font-weight: bold;
+  text-decoration: none;
+}

start.ipynb

@@ -18,26 +18,15 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {
-    "vscode": {
-     "languageId": "html"
-    }
-   },
+   "metadata": {},
    "outputs": [],
    "source": [
-    "%%html\n",
+    "from pathlib import Path\n",
+    "\n",
+    "from IPython.display import HTML\n",
     "\n",
-    "<style>\n",
-    "  .output_subarea {\n",
-    "    max-width: none !important;\n",
-    "  }\n",
-    "  .home-notification {\n",
-    "    background-color: antiquewhite;\n",
-    "    margin: 2px;\n",
-    "    padding: 8px;\n",
-    "    border: 1px solid red;\n",
-    "  }\n",
-    "</style>\n"
+    "styles = Path(\"./miscellaneous/styles.css\").read_text()\n",
+    "HTML(f\"<style>{styles}</style>\")"
    ]
   },
   {