💄 feat: Work on update box

This commit is contained in:
marleyrae 2023-06-06 16:46:31 -07:00
parent a00cd0d538
commit 96b913bb55
10 changed files with 82 additions and 3 deletions

6
.idea/cssdialects.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="CssDialectMappings">
<file url="PROJECT" dialect="PostCSS" />
</component>
</project>

View file

@ -16,6 +16,7 @@
"custom-property-pattern": null, "custom-property-pattern": null,
"scss/dollar-variable-pattern": null, "scss/dollar-variable-pattern": null,
"scss/percent-placeholder-pattern": null, "scss/percent-placeholder-pattern": null,
"scss/at-mixin-pattern": null,
"rem-over-px/rem-over-px": [ "rem-over-px/rem-over-px": [
true, true,
{ {
@ -56,7 +57,8 @@
"0", "0",
"100vi", "100vi",
"100vb", "100vb",
"100%" "100%",
"auto"
], ],
"expandShorthand": true, "expandShorthand": true,
"recurseLonghand": true, "recurseLonghand": true,

4
dist/index.html vendored
View file

@ -52,6 +52,10 @@
other sites! other sites!
</p> </p>
<div class="UpdateBox">
<h2 class="Title--sizeH4">6 June 2023</h2>
</div>
</main> </main>
<aside class="Site-info"> <aside class="Site-info">

File diff suppressed because one or more lines are too long

View file

@ -6,3 +6,7 @@ layout: layout.liquid
Hello! Welcome to <i>punkfairie.net.</i> This is my little home on the web, and also serves as a directory for my Hello! Welcome to <i>punkfairie.net.</i> This is my little home on the web, and also serves as a directory for my
other sites! other sites!
</p> </p>
<div class="UpdateBox">
<h2 class="Title--sizeH4">6 June 2023</h2>
</div>

View file

@ -1,4 +1,5 @@
@use 'sass:list'; @use 'sass:list';
@use 'sass:math';
@use 'theme'; @use 'theme';
@mixin flow($space: 1em) { @mixin flow($space: 1em) {
@ -27,3 +28,11 @@
text-decoration: wavy underline; text-decoration: wavy underline;
} }
} }
// noinspection CssReplaceWithShorthandSafely
@mixin gradient-border($width) {
border: $width solid;
border-width: math.div($width, 2);
border-image-source: theme.$gradient;
border-image-slice: 1;
}

View file

@ -88,7 +88,7 @@ $fontSize-6: clamp(2.24rem, calc(1.86rem + 1.91vw), 3.34rem);
/** /**
* Fluid spacing scale * Fluid spacing scale
* @link https://utopia.fyi/space/calculator?c=320,12,1.2,1240,14,1.25,6,0,&s=0.75|0.5|0.25|0.15,1.5|2|3|4|6|12,s-l&g=s,l,xl,12 * @link https://utopia.fyi/space/calculator?c=320,12,1.2,1240,14,1.25,6,0,&s=0.75|0.5|0.25|0.15,1.5|2|3|4|6|12|24,s-l&g=s,l,xl,12
*/ */
$spacer-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem); $spacer-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
@ -102,6 +102,7 @@ $spacer-xl: clamp(2.25rem, calc(2.12rem + 0.65vw), 2.63rem);
$spacer-2xl: clamp(3.00rem, calc(2.83rem + 0.87vw), 3.50rem); $spacer-2xl: clamp(3.00rem, calc(2.83rem + 0.87vw), 3.50rem);
$spacer-3xl: clamp(4.50rem, calc(4.24rem + 1.30vw), 5.25rem); $spacer-3xl: clamp(4.50rem, calc(4.24rem + 1.30vw), 5.25rem);
$spacer-4xl: clamp(9.00rem, calc(8.48rem + 2.61vw), 10.50rem); $spacer-4xl: clamp(9.00rem, calc(8.48rem + 2.61vw), 10.50rem);
$spacer-5xl: clamp(18.00rem, calc(16.96rem + 5.22vw), 21.00rem);
/* One-up pairs */ /* One-up pairs */
$spacer-4xs-3xs: clamp(0.13rem, calc(0.08rem + 0.22vw), 0.25rem); $spacer-4xs-3xs: clamp(0.13rem, calc(0.08rem + 0.22vw), 0.25rem);
@ -114,6 +115,7 @@ $spacer-l-xl: clamp(1.50rem, calc(1.11rem + 1.96vw), 2.63rem);
$spacer-xl-2xl: clamp(2.25rem, calc(1.82rem + 2.17vw), 3.50rem); $spacer-xl-2xl: clamp(2.25rem, calc(1.82rem + 2.17vw), 3.50rem);
$spacer-2xl-3xl: clamp(3.00rem, calc(2.22rem + 3.91vw), 5.25rem); $spacer-2xl-3xl: clamp(3.00rem, calc(2.22rem + 3.91vw), 5.25rem);
$spacer-3xl-4xl: clamp(4.50rem, calc(2.41rem + 10.43vw), 10.50rem); $spacer-3xl-4xl: clamp(4.50rem, calc(2.41rem + 10.43vw), 10.50rem);
$spacer-4xl-5xl: clamp(9.00rem, calc(4.83rem + 20.87vw), 21.00rem);
/* Custom pairs */ /* Custom pairs */
$spacer-s-l: clamp(0.75rem, calc(0.40rem + 1.74vw), 1.75rem); $spacer-s-l: clamp(0.75rem, calc(0.40rem + 1.74vw), 1.75rem);

View file

@ -0,0 +1,38 @@
@use '../theme';
@mixin Title() {
font-weight: normal;
text-transform: uppercase;
&::before, &::after {
content: '🌈';
}
&::before {
margin-inline-end: theme.$spacer-2xs;
}
&::after {
display: inline-block;
margin-inline-start: theme.$spacer-2xs;
transform: rotate(90deg);
}
}
.Title--sizeH2 {
@include Title;
font-size: theme.$fontSize-4;
}
.Title--sizeH3 {
@include Title;
font-size: theme.$fontSize-3;
}
.Title--sizeH4 {
@include Title;
font-size: theme.$fontSize-2;
}

View file

@ -0,0 +1,12 @@
@use '../mixins';
@use '../theme';
.UpdateBox {
@include mixins.gradient-border(theme.$spacer-2xs);
padding: theme.$spacer-s;
margin-inline-start: auto;
margin-inline-end: auto;
text-align: center;
inline-size: theme.$spacer-5xl;
}

View file

@ -2,3 +2,5 @@
@forward 'Nav'; @forward 'Nav';
@forward 'Social'; @forward 'Social';
@forward 'Status'; @forward 'Status';
@forward 'UpdateBox';
@forward 'Title';