repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Make code header a solid bar instead

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/src/scss/_blocks.scss
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,

1
static/src/scss/_bulma_overrides.scss
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;

12
website/contrib/code_block/templates/contrib/blocks/code.html
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 }}