Nicer styling

2024-07-19 10:53:04 +02:00 · 2024-07-19 10:53:04 +02:00 · 8343f25f0b
commit 8343f25f0b
parent 917e8297b9
2 changed files with 82 additions and 35 deletions
--- a/index.html
+++ b/index.html
@ -6,17 +6,61 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Thi.ng rdom</title>
    <style>
-     html, body { padding: 0; margin: 0; min-height: 100vh; }
+     :root {
+         --background-color: #eee;
+         --primary-color: #225;
+         --secondary-color: #99b;
+     }
+
+     html, body {
+         padding: 0;
+         margin: 0;
+         min-height: 100vh;
+     }
+
     body {
-       background: #eee;
-       color: #222;
+       background: var(--background-color);
+       color: var(--primary-color);
       font-family: sans-serif;
       padding: 40px;
+       font-size: 14px;
     }

     canvas {
-       border: 1px solid #99b;
+       border: 1px solid var(--primary-color);
     }
+
+     h1, h2 {
+         margin: 0.6rem 0;
+     }
+
+     h1:first-child, h2:first-child {
+         margin-top: 0
+     }
+
+     label {
+         display: block;
+         margin: 0.2rem 0;
+     }
+
+     @media screen and (min-width: 1024px) {
+         div.container {
+             display: grid;
+             grid-template: 'canvas settings';
+             grid-template-columns: auto minmax(0, 1fr);
+             grid-gap: 40px;
+         }
+
+         main {
+             grid-area: canvas;
+         }
+
+         aside {
+             grid-area: settings;
+             align-self: center;
+         }
+     }
+
    </style>
  </head>
  <body>