increase brutalism (#8)

pastagang · Jan 1, 2025 · 8d411b8 · 8d411b8
1 parent 2202544
commit 8d411b8
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -10,59 +10,75 @@
   <body>
     <div class="slots">
       <div class="slot" id="slot-1">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
       <div class="slot" id="slot-2">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
       <div class="slot" id="slot-3">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
       <div class="slot" id="slot-4">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
       <div class="slot" id="slot-5">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
       <div class="slot" id="slot-6">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
       <div class="slot" id="slot-7">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
       <div class="slot" id="slot-8">
-        <select class="target">
-          <option value="strudel">strudel</option>
-          <option value="hydra">hydra</option>
-        </select>
+        <header>
+          <select class="target">
+            <option value="strudel">strudel</option>
+            <option value="hydra">hydra</option>
+          </select>
+        </header>
         <div class="editor"></div>
       </div>
     </div>

diff --git a/src/style.css b/src/style.css
@@ -1,8 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
 html {
   height: 100%;
 }
 body {
-  background-color: #242424;
+  background-color: black;
   color: #ccc;
   margin: 0;
   font-family: monospace;
@@ -14,6 +18,7 @@ body {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   width: 100%;
   height: 100%;
+  gap: 0px 10px;
 }
 
 @media screen and (max-width: 700px) {
@@ -27,6 +32,7 @@ body {
   flex-direction: column;
   flex-grow: 1;
   width: 100%;
+  background-color: #242424;
 }
 
 .slot .title {
@@ -47,11 +53,37 @@ body {
 }
 .cm-gutters {
   background: transparent !important;
+  display: none !important;
+}
+.cm-focused {
+  /* stop the dashed line overlapping our own things */
+  outline: none !important;
+}
+
+.slot header {
+  background-color: black;
+  padding: 3px;
+  padding-top: 6px;
 }
 select {
-  background-color: #222;
+  width: fit-content;
+  background-color: #111;
+  border: none;
   color: white;
-  border: 0;
+  font-size: 18px;
+  outline: 2px solid white;
+  outline-offset: -2px;
   padding: 4px;
-  outline: none;
+  cursor: pointer;
+
+  /* css hack to add padding to right of the chevron */
+  border-right: 5px solid #111;
+}
+select:hover {
+  background-color: #333;
+  border-right: 5px solid #333;
+}
+select:focus {
+  outline: 3px solid rgb(0, 100, 255);
+  border-radius: 4px;
 }