Remove unnecessary wrapper div

diff --git a/index.html b/index.html
index e0fe49c8d604cd1b0687cbb75782ece0f0634058..4ef82b24177fdac307af96ceaf9dfba829ca5e64 100644 (file)
--- a/index.html
+++ b/index.html
@@ -10,66 +10,64 @@
 </head>
 
 <body>
-  <div class="wrapper">
-    <header>
-      <h1>sleepy-operators</h1>
+  <header>
+    <h1>sleepy-operators</h1>
 
-      <a href="https://github.com/ardislu/sleepy-operators">
-        <svg role="img" aria-labelledby="github" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <title id="github">GitHub repository</title>
-          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
-          <path d="M9 18c-4.51 2-5-2-7-2"></path>
-        </svg>
-      </a>
-    </header>
+    <a href="https://github.com/ardislu/sleepy-operators">
+      <svg role="img" aria-labelledby="github" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <title id="github">GitHub repository</title>
+        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
+        <path d="M9 18c-4.51 2-5-2-7-2"></path>
+      </svg>
+    </a>
+  </header>
 
-    <main>
-      <p>Open the <b><abbr title="Developer Tools">DevTools</abbr> console</b> to start the demo.</p>
+  <main>
+    <p>Open the <b><abbr title="Developer Tools">DevTools</abbr> console</b> to start the demo.</p>
 
-      <p class="mobile-instructions"><small>Press <kbd>F12</kbd> and click the "Console" tab.</small></p>
+    <p class="mobile-instructions"><small>Press <kbd>F12</kbd> and click the "Console" tab.</small></p>
 
-      <table>
-        <caption>Keyboard shortcuts to open the DevTools console in various operating systems and web browsers. If none of these shortcuts work, press <kbd>F12</kbd> and click the "Console" tab.</caption>
-        <thead>
-          <tr>
-            <th><abbr title="Operating System">OS</abbr></th>
-            <th>Browser</th>
-            <th>Shortcut</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Windows/Linux</td>
-            <td>Chrome/Edge</td>
-            <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
-          </tr>
-          <tr>
-            <td>Windows/Linux</td>
-            <td>Firefox</td>
-            <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
-          </tr>
-          <tr>
-            <td>macOS</td>
-            <td>Chrome/Edge</td>
-            <td><abbr title="Command"><kbd>⌘</kbd></abbr> + <kbd>Option</kbd> + <kbd>J</kbd></td>
-          </tr>
-          <tr>
-            <td>macOS</td>
-            <td>Firefox</td>
-            <td><abbr title="Command"><kbd>⌘</kbd></abbr> + <kbd>Option</kbd> + <kbd>K</kbd></td>
-          </tr>
-          <tr>
-            <td>macOS</td>
-            <td>Safari</td>
-            <td><abbr title="Command"><kbd>⌘</kbd></abbr> + <kbd>Option</kbd> + <kbd>C</kbd></td>
-          </tr>
-        </tbody>
-      </table>
-    </main>
-  </div>
+    <table>
+      <caption>Keyboard shortcuts to open the DevTools console in various operating systems and web browsers. If none of these shortcuts work, press <kbd>F12</kbd> and click the "Console" tab.</caption>
+      <thead>
+        <tr>
+          <th><abbr title="Operating System">OS</abbr></th>
+          <th>Browser</th>
+          <th>Shortcut</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Windows/Linux</td>
+          <td>Chrome/Edge</td>
+          <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+        </tr>
+        <tr>
+          <td>Windows/Linux</td>
+          <td>Firefox</td>
+          <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+        </tr>
+        <tr>
+          <td>macOS</td>
+          <td>Chrome/Edge</td>
+          <td><abbr title="Command"><kbd>⌘</kbd></abbr> + <kbd>Option</kbd> + <kbd>J</kbd></td>
+        </tr>
+        <tr>
+          <td>macOS</td>
+          <td>Firefox</td>
+          <td><abbr title="Command"><kbd>⌘</kbd></abbr> + <kbd>Option</kbd> + <kbd>K</kbd></td>
+        </tr>
+        <tr>
+          <td>macOS</td>
+          <td>Safari</td>
+          <td><abbr title="Command"><kbd>⌘</kbd></abbr> + <kbd>Option</kbd> + <kbd>C</kbd></td>
+        </tr>
+      </tbody>
+    </table>
+  </main>
 
   <div class="yawn">🥱</div>
-  
+
   <script type="module" src="/script.js"></script>
 </body>
 

diff --git a/style.css b/style.css
index 7846b999c7fffc726813fd9affbaaa0444581a64..5a40219abcecef9f90478076dfc3345f38db322b 100644 (file)
--- a/style.css
+++ b/style.css
@@ -7,14 +7,10 @@ body {
   margin-block: 0;
   margin-inline: 8px auto;
   display: grid;
-  place-items: center;
-}
-
-.wrapper {
-  margin-block: 8px;
 }
 
 header {
+  align-self: end;
   display: flex;
   align-items: center;
 }
@@ -23,6 +19,10 @@ h1 {
   margin: 0;
 }
 
+main {
+  align-self: start;
+}
+
 p {
   font-size: 1.2rem;
 }