From 16683a9692269a4d91ebbcce0b51da351cfad875 Mon Sep 17 00:00:00 2001
From: Adam Matthiesen <amatthiesen@outlook.com>
Date: Sat, 9 Mar 2024 12:21:02 -0800
Subject: [PATCH] Update Code.astro component styling

---
 .changeset/curvy-timers-poke.md                  |  5 +++++
 package/src/ExpressiveCode/components/Code.astro | 15 +++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/curvy-timers-poke.md

diff --git a/.changeset/curvy-timers-poke.md b/.changeset/curvy-timers-poke.md
new file mode 100644
index 0000000..e84d126
--- /dev/null
+++ b/.changeset/curvy-timers-poke.md
@@ -0,0 +1,5 @@
+---
+"@matthiesenxyz/astro-gists": patch
+---
+
+patch for css
diff --git a/package/src/ExpressiveCode/components/Code.astro b/package/src/ExpressiveCode/components/Code.astro
index 9faac0f..5bd6754 100644
--- a/package/src/ExpressiveCode/components/Code.astro
+++ b/package/src/ExpressiveCode/components/Code.astro
@@ -50,21 +50,28 @@ if (scriptsToPrepend.length) {
   htmlContent = `<script type="module">${[...scriptsToPrepend].join('')}</script>${htmlContent}`
 }
 ---
-<div class="gist">
-<a class="raw" title="GitHub Gist RAW" href={raw_url}>View <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-filetype-raw" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.597 11.85H0v3.999h.782v-1.491h.71l.7 1.491h1.651l.313-1.028h1.336l.314 1.028h.84L5.31 11.85h-.925l-1.329 3.96-.783-1.572A1.18 1.18 0 0 0 3 13.116q0-.384-.167-.668a1.1 1.1 0 0 0-.478-.44 1.7 1.7 0 0 0-.758-.158m-.815 1.913v-1.292h.7a.74.74 0 0 1 .507.17q.194.17.194.49 0 .315-.194.474-.19.158-.518.158zm4.063-1.148.489 1.617H4.32l.49-1.617zm4.006.445-.74 2.789h-.73L6.326 11.85h.855l.601 2.903h.038l.706-2.903h.683l.706 2.903h.04l.596-2.903h.858l-1.055 3.999h-.73l-.74-2.789H8.85Z"/> </svg></a>
+<a class="raw inline not-content" title="GitHub Gist RAW" href={raw_url}><button class="inline not-content">View Gist<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="not-content inline bi bi-filetype-raw" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.597 11.85H0v3.999h.782v-1.491h.71l.7 1.491h1.651l.313-1.028h1.336l.314 1.028h.84L5.31 11.85h-.925l-1.329 3.96-.783-1.572A1.18 1.18 0 0 0 3 13.116q0-.384-.167-.668a1.1 1.1 0 0 0-.478-.44 1.7 1.7 0 0 0-.758-.158m-.815 1.913v-1.292h.7a.74.74 0 0 1 .507.17q.194.17.194.49 0 .315-.194.474-.19.158-.518.158zm4.063-1.148.489 1.617H4.32l.49-1.617zm4.006.445-.74 2.789h-.73L6.326 11.85h.855l.601 2.903h.038l.706-2.903h.683l.706 2.903h.04l.596-2.903h.858l-1.055 3.999h-.73l-.74-2.789H8.85Z"/> </svg></button></a>
+<div class="my-1" />
+<div class="gist not-content">
 <Fragment set:html={htmlContent} />
 </div>
 
 <style>
+    .my-1 { 
+      line-break: loose;
+      padding-bottom: 1.5rem;
+    }
     .raw {
-        float: inline-end;
+        float: right;
+        height: auto;
+        border-radius: 1px;
         background-color: transparent;
         background: transparent;
         color: black;
-        padding-top: 2px;
         padding-inline-end: 1rem;
         text-decoration: none;
     }
+    .inline { display: inline-flex; }
     .gist {
         padding-top: 1rem;
         padding-bottom: 1rem;