update: minor styling changes

Code snippets refactored into a header.

Author: erikmejias

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.DS_Store

_code-blocks/helpers.ts

@@ -37,9 +37,10 @@ export const createCopyButton = (id: string) => {
  * @param title
  * @returns
  */
-export const createTitleElement = (title: string): HTMLDivElement => {
+export const createDivElement = (className: string, title?: string): HTMLDivElement => {
   const titleElement = document.createElement('div');
-  titleElement.classList.add('codeTitle');
-  titleElement.textContent = title;
+  titleElement.classList.add(className);
+  if (title) titleElement.textContent = title;
+
   return titleElement;
 };

_code-blocks/webflow-theme.css

@@ -8,7 +8,7 @@ pre {
   font-weight: 400;
   max-width: 600px;
   font-size: 14px;
-  padding: 74px 16px 16px;
+  padding: 16px 16px 16px;
   border-radius: 6px;
   margin: 0;
 }
@@ -160,13 +160,16 @@ pre {
   font-style: italic;
 }
 
+/* Header */
+.snippetHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
 /* Copy Button */
 .copyCodeBtn {
-  position: absolute;
-  left: auto;
-  top: 16px;
-  right: 16px;
-  bottom: auto;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -193,17 +196,9 @@ pre {
 
 /* Code Title */
 .codeTitle {
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  right: auto;
-  bottom: auto;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   font-family: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
     Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
-  font-size: 25px;
+  font-size: 16px;
   font-weight: normal;
   color: #d9d9d9;
   line-height: 1.25;

_code-blocks/webflow/embed-code.js

@@ -1,4 +1,4 @@
-import { createCopyButton, createTitleElement, populateCodeElement } from '../helpers';
+import { createCopyButton, createDivElement, populateCodeElement } from '../helpers';
 import initCopyClipboard from '@finsweet/webflow-addons/copy-clipboard';
 import highlightJS from '../hljs';
 
@@ -22,6 +22,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     const codeElement = document.createElement('code');
     const codeElementId = `hljs-code-${index}`;
     codeElement.id = codeElementId;
+    const snippetHeader = createDivElement('snippetHeader');
+
+    preElement.appendChild(snippetHeader);
     preElement.appendChild(codeElement);
 
     // Get the title
@@ -32,8 +35,8 @@ document.addEventListener('DOMContentLoaded', async () => {
       const [brackedTitle, title] = titleMatch;
       src = src.replace(brackedTitle, '');
 
-      const titleElement = createTitleElement(title);
-      preElement.appendChild(titleElement);
+      const titleElement = createDivElement('codeTitle', title);
+      snippetHeader.appendChild(titleElement);
     }
 
     // Populate the code element
@@ -43,7 +46,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const copyButton = createCopyButton(codeElementId);
 
     // Append the copy button
-    preElement.appendChild(copyButton);
+    snippetHeader.appendChild(copyButton);
 
     // Highlight the element
     highlightJS.highlightBlock(codeElement);

_code-blocks/webflow/embed-code.ts

@@ -1,4 +1,4 @@
-import { createCopyButton, createTitleElement, populateCodeElement } from '../helpers';
+import { createCopyButton, createDivElement, populateCodeElement } from '../helpers';
 import initCopyClipboard from '@finsweet/webflow-addons/copy-clipboard';
 import highlightJS from '../hljs';
 
@@ -20,6 +20,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     const codeElement = document.createElement('code');
     const codeElementId = `hljs-code-${index}`;
     codeElement.id = codeElementId;
+    const snippetHeader = createDivElement('snippetHeader');
+
+    preElement.appendChild(snippetHeader);
     preElement.appendChild(codeElement);
 
     // Get the title
@@ -30,8 +33,8 @@ document.addEventListener('DOMContentLoaded', async () => {
       const [brackedTitle, title] = titleMatch;
       src = src.replace(brackedTitle, '');
 
-      const titleElement = createTitleElement(title);
-      preElement.appendChild(titleElement);
+      const titleElement = createDivElement(title);
+      snippetHeader.appendChild(titleElement);
     }
 
     // Populate the code element
@@ -41,7 +44,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const copyButton = createCopyButton(codeElementId);
 
     // Append the copy button
-    preElement.appendChild(copyButton);
+    snippetHeader.appendChild(copyButton);
 
     // Highlight the element
     highlightJS.highlightBlock(codeElement);