punkfairie/punkfairie-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 feat: Finish update box

Browse source
This commit is contained in:
marleyrae 2023-06-06 16:49:12 -07:00
parent 96b913bb55
commit 41fd1452e1
3 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/index.liquid
View file

@ -9,4 +9,5 @@ layout: layout.liquid
<div class="UpdateBox"> <div class="UpdateBox">
<h2 class="Title--sizeH4">6 June 2023</h2> <h2 class="Title--sizeH4">6 June 2023</h2>
<p>This is the update.</p>
</div> </div>

9
src/style/components/_Title.scss
View file

@ -1,10 +1,11 @@
@use '../theme'; @use '../theme';
@mixin Title() { @mixin Title($size) {
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
&::before, &::after { &::before, &::after {
font-size: $size;
content: '🌈'; content: '🌈';
} }
@ -20,19 +21,19 @@
} }
.Title--sizeH2 { .Title--sizeH2 {
@include Title; @include Title(theme.$fontSize-3);
font-size: theme.$fontSize-4; font-size: theme.$fontSize-4;
} }
.Title--sizeH3 { .Title--sizeH3 {
@include Title; @include Title(theme.$fontSize-2);
font-size: theme.$fontSize-3; font-size: theme.$fontSize-3;
} }
.Title--sizeH4 { .Title--sizeH4 {
@include Title; @include Title(theme.$fontSize-1);
font-size: theme.$fontSize-2; font-size: theme.$fontSize-2;
} }

1
src/style/components/_UpdateBox.scss
View file

@ -3,6 +3,7 @@
.UpdateBox { .UpdateBox {
@include mixins.gradient-border(theme.$spacer-2xs); @include mixins.gradient-border(theme.$spacer-2xs);
@include mixins.flow(theme.$spacer-2xs);
padding: theme.$spacer-s; padding: theme.$spacer-s;
margin-inline-start: auto; margin-inline-start: auto;