STY: fixed padding and margins of QuestionCard and CodeBlock

LyonSyonII · Dec 15, 2023 · 05034eb · 05034eb
1 parent ca2921b
commit 05034eb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 33 deletions.
diff --git a/frontend/src/components/CodeBlock/CodeBlock.svelte b/frontend/src/components/CodeBlock/CodeBlock.svelte
@@ -106,7 +106,7 @@
   on:clickoutside={() => (focused = false)}
 >
   {#await Promise.all( [import("svelte-codemirror-editor"), $getTheme, import("@codemirror/lang-rust")], )}
-    <pre>{value || placeholder || l.placeholder}</pre>
+    <pre class="not-content">{value || placeholder || l.placeholder}</pre>
   {:then [CodeMirror, theme, lang]}
     <CodeMirror.default
       class="not-content"
@@ -119,20 +119,21 @@
       placeholder={placeholder || l.placeholder}
     />
   {/await}
-
-  <button
-    class="not-content"
-    title="Run (Shift+Enter)"
-    disabled={running}
-    on:click={() => handleRun(true)}
-  >
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path fill="currentColor" d="M21 16a6 6 0 1 1-6 6a6 6 0 0 1 6-6m0-2a8 8 0 1 0 8 8a8 8 0 0 0-8-8"/><path fill="currentColor" d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h4v-2H6V12h22V6a2 2 0 0 0-2-2M6 10V6h20v4Z"/><path fill="currentColor" d="M19 19v6l5-3z"/></svg>
-  </button>
-
-  <button title="Reset code" on:click={() => (value = code)}>
-    <!-- carbon:reset -->
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path fill="currentColor" d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z"/></svg>
-  </button>
+
+  <div class="buttons">
+    <button
+      title="Run (Shift+Enter)"
+      disabled={running}
+      on:click={() => handleRun(true)}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path fill="currentColor" d="M21 16a6 6 0 1 1-6 6a6 6 0 0 1 6-6m0-2a8 8 0 1 0 8 8a8 8 0 0 0-8-8"/><path fill="currentColor" d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h4v-2H6V12h22V6a2 2 0 0 0-2-2M6 10V6h20v4Z"/><path fill="currentColor" d="M19 19v6l5-3z"/></svg>
+    </button>
+
+    <button title="Reset code" on:click={() => (value = code)}>
+      <!-- carbon:reset -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path fill="currentColor" d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z"/></svg>
+    </button>
+  </div>
 
   {#if playgroundResponse}
     <output>
@@ -149,33 +150,36 @@
     --accent: var(--sl-color-accent);
   }
   pre {
-    height: 33.4px;
     color: gray;
+    line-height: 1.4;
   }
   .wrapper {
     display: grid;
     border-radius: 6px;
     margin: 0rem;
 
     font-size: 0.9rem;
-    grid-template-columns: auto 30px 30px;
+    grid-template-columns: auto 60px;
+  }
+  .buttons {
+    display: flex;
+    justify-content: center;
+    gap: 0.25rem;
+    margin-left: var(--card-padding);
   }
   @media only screen and (min-width: 768px) {
     .wrapper {
       font-size: 1rem;
-      grid-template-columns: 90% auto auto;
-    }
-    button {
-      margin-left: 0.5rem;
+      grid-template-columns: 90% auto;
     }
   }
   button {
     background-color: rgba(0, 0, 0, 0);
     color: var(--sl-color-white);
     cursor: pointer;
     border: 0px;
-    margin-left: 0rem;
-    padding-bottom: 0px;
+    margin: 0rem;
+    padding: 0px;
     height: fit-content;
     transition: opacity 0.25s ease;
   }

diff --git a/frontend/src/components/QuestionCard.astro b/frontend/src/components/QuestionCard.astro
@@ -18,15 +18,9 @@ const { question } = Astro.props;
     display: flex;
     border: 1px solid var(--sl-color-gray-5);
     background-color: var(--sl-color-black);
-    padding: 0.5rem;
     flex-direction: column;
-    gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+    padding: var(--card-padding);
+    gap: var(--card-padding);;
     overflow: auto;
   }
-
-  @media only screen and (min-width: 768px) {
-    article {
-      padding: clamp(1rem, calc(0.125rem + 3vw), 1rem);
-    }
-  }
 </style>
diff --git a/frontend/src/styles/custom.css b/frontend/src/styles/custom.css
@@ -11,7 +11,8 @@
   --sl-color-gray-5: #423432;
   --sl-color-gray-6: #302321;
   --sl-color-black: #1d1715;
-  --sl-color-portrait-bg: #423432;
+
+  --card-padding: 0.5rem;
 }
 /* Light mode colors. */
 :root[data-theme="light"] {
@@ -27,5 +28,10 @@
   --sl-color-gray-6: #f3ecea;
   --sl-color-gray-7: #f9f5f5;
   --sl-color-black: #ffffff;
-  --sl-color-portrait-bg: #f3ecea;
 }
+
+@media only screen and (min-width: 768px) {
+  :root {
+    --card-padding: 1rem;
+  }
+}