From b85bd327b6964be83e7e4831c047525e3ffb9372 Mon Sep 17 00:00:00 2001
From: Marvin Scham <dev@marvinscham.de>
Date: Tue, 23 Aug 2022 04:46:49 +0200
Subject: [PATCH] Added descriptive title, visual equalizing

---
 basic-example/javascript.html | 14 +++-----------
 basic-example/pyscript.html   |  4 +++-
 basic-example/style.css       | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 basic-example/style.css
diff --git a/basic-example/javascript.html b/basic-example/javascript.html
index 0206796..0317dee 100644
--- a/basic-example/javascript.html
+++ b/basic-example/javascript.html
@@ -5,22 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="../assets/favicon.png" />
-    <style>
-      * {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-          Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-          sans-serif;
-      }
-      body {
-        margin: 0;
-      }
-    </style>
 
+    <link rel="stylesheet" href="style.css" />
     <title>D3 mit JavaScript</title>
   </head>
   <body>
     <div>
-      <div style="text-align: center; height: 24px">JavaScript</div>
+      <h1>Duolingo XP nach Sprache</h1>
+      <h2>JavaScript</h2>
       <div id="js" style="width: 400px; height: 400px; margin: auto">
         <div class="loading"></div>
       </div>
diff --git a/basic-example/pyscript.html b/basic-example/pyscript.html
index 33ba2ec..f5fa375 100644
--- a/basic-example/pyscript.html
+++ b/basic-example/pyscript.html
@@ -9,11 +9,13 @@
     <link rel="stylesheet" href="../assets/pyscript.css" />
     <script defer src="../assets/pyscript.js"></script>
 
+    <link rel="stylesheet" href="style.css" />
     <title>D3 mit PyScript</title>
   </head>
   <body>
     <div>
-      <div style="text-align: center">PyScript</div>
+      <h1>Duolingo XP nach Sprache</h1>
+      <h2>PyScript</h2>
       <div id="py" style="width: 400px; height: 400px; margin: auto">
         <div class="loading"></div>
       </div>
diff --git a/basic-example/style.css b/basic-example/style.css
new file mode 100644
index 0000000..e6c02bf
--- /dev/null
+++ b/basic-example/style.css
@@ -0,0 +1,19 @@
+* {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  text-align: center;
+  color: #333;
+  font-weight: 400;
+  line-height: 1.5em;
+}
+body {
+  margin: 0;
+}
+h1 {
+  font-size: 2em;
+  margin: 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0;
+}
