Make code header a solid bar instead

This is much easier to layout, and has the benefit of being able to fit
more in.

The transform was still leaving space allocated, which looked odd
This commit is contained in:
Jake Howard 2022-08-31 09:05:32 +01:00
parent 768223ba67
commit ce3690384e
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 15 additions and 13 deletions

View file

@ -58,21 +58,20 @@ div.block-code {
.filename { .filename {
font-family: $family-code; font-family: $family-code;
background-color: $grey-lighter; background-color: $grey-lighter;
font-size: 1rem; font-size: 80%;
position: relative;
text-align: right;
transform: translateY(100%) translateX(-100%);
display: inline-block;
left: 100%;
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
border-radius: 0 0 0 $radius-large; display: flex;
box-shadow: $shadow; justify-content: space-between;
@include dark-mode { @include dark-mode {
background-color: $grey-darker; background-color: $grey-darker;
} }
} }
&:not(:hover) .filename {
visibility: hidden;
}
.highlight { .highlight {
pre, pre,
span, span,

View file

@ -20,4 +20,3 @@ $code-background: none;
$pre-background: none; $pre-background: none;
$code-padding: 0; $code-padding: 0;
$code: inherit; $code: inherit;
$content-pre-padding: 2.75rem 1.25rem 1.25rem 1.25rem;

View file

@ -1,5 +1,9 @@
<span class="filename"> <div class="filename">
{{ value.language }} <span>
<i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i> {{ value.language }}
</span> </span>
<span>
<i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i>
</span>
</div>
{{ value.code }} {{ value.code }}