making it look better

andymeneguzzo · andymeneguzzo · commit 8312706f1b19 · 2025-11-10T18:36:41.000+01:00
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,8 +4,88 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ page.title }}</title>
+
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      line-height: 1.6;
+      color: #222;
+      background-color: #fafafa;
+      margin: 0;
+      padding: 0;
+    }
+
+    main {
+      max-width: 850px; /* limit width for readability */
+      margin: 3rem auto; /* center content */
+      padding: 0 1.5rem; /* left/right padding on mobile */
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+
+    h1, h2, h3 {
+      line-height: 1.25;
+      color: #111;
+    }
+
+    img {
+      display: block;
+      margin: 1.5rem auto;
+      max-width: 100%;
+      height: auto;
+    }
+
+    figure {
+      text-align: center;
+      margin: 2rem 0;
+    }
+
+    figcaption {
+      font-size: 0.9rem;
+      color: #555;
+      margin-top: 0.5rem;
+    }
+
+    pre {
+      background: #f6f8fa;
+      padding: 1rem;
+      border-radius: 6px;
+      overflow-x: auto;
+    }
+
+    code {
+      background: #f6f8fa;
+      padding: 0.2em 0.4em;
+      border-radius: 4px;
+    }
+
+    a {
+      color: #0366d6;
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+
+    @media (prefers-color-scheme: dark) {
+    body {
+      background-color: #1e1e1e;
+      color: #ddd;
+    }
+    main {
+      background-color: #2b2b2b;
+      box-shadow: none;
+    }
+    a { color: #58a6ff; }
+    code, pre { background: #333; color: #ddd; }
+    }
+  </style>
 </head>
+
 <body>
-  {{ content }}
+  <main>
+    {{ content }}
+  </main>
 </body>
 </html>
diff --git a/index.md b/index.md
@@ -72,7 +72,10 @@ $$
 
 The plot below shows the displacement $x(t)$ with respect to $t$ (already containing anomalies). 
 
-<img src="plots/Damped_Oscillator_Data.png" width="70%">
+<p align="center">
+  <img src="plots/Damped_Oscillator_Data.png" width="70%">
+</p>
+
 
 
 ## LSTM Autoencoder model
