MatthiesenXYZ
/
astro-gists
mirror of https://github.com/MatthiesenXYZ/astro-gists.git
1
0
Fork 0
Code Issues Activity

Update Code.astro component styling

This commit is contained in:
Adam Matthiesen 2024-03-09 12:21:02 -08:00
parent ef7e261b77
commit 16683a9692
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/curvy-timers-poke.md Normal file
View File

@ -0,0 +1,5 @@
---
"@matthiesenxyz/astro-gists": patch
---
patch for css

15
package/src/ExpressiveCode/components/Code.astro
View File

@ -50,21 +50,28 @@ if (scriptsToPrepend.length) {
htmlContent = `<script type="module">${[...scriptsToPrepend].join('')}</script>${htmlContent}` htmlContent = `<script type="module">${[...scriptsToPrepend].join('')}</script>${htmlContent}`
} }
--- ---
<div class="gist"> <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>
<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> <div class="my-1" />
<div class="gist not-content">
<Fragment set:html={htmlContent} /> <Fragment set:html={htmlContent} />
</div> </div>
<style> <style>
.my-1 {
line-break: loose;
padding-bottom: 1.5rem;
}
.raw { .raw {
float: inline-end; float: right;
height: auto;
border-radius: 1px;
background-color: transparent; background-color: transparent;
background: transparent; background: transparent;
color: black; color: black;
padding-top: 2px;
padding-inline-end: 1rem; padding-inline-end: 1rem;
text-decoration: none; text-decoration: none;
} }
.inline { display: inline-flex; }
.gist { .gist {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;