diff --git a/.idea/webResources.xml b/.idea/webResources.xml
new file mode 100644
index 0000000..6c884c9
--- /dev/null
+++ b/.idea/webResources.xml
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 38f0ee7..9c57fe4 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -14,6 +14,7 @@
"selector-class-pattern": null,
"value-keyword-case": null,
"scss/dollar-variable-pattern": null,
+ "scss/percent-placeholder-pattern": null,
"rem-over-px/rem-over-px": [
true,
{
diff --git a/dist/index.html b/dist/index.html
index c372f45..ec21cfd 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -14,8 +14,25 @@
-
-punkfairie.net
+
+
+punkfairie.net
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/style/components/SiteContent.css b/dist/style/components/SiteContent.css
new file mode 100644
index 0000000..e69de29
diff --git a/dist/style/style.css b/dist/style/style.css
index 782a743..db1b227 100644
--- a/dist/style/style.css
+++ b/dist/style/style.css
@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);min-height:100vh;min-height:100vb;min-width:100vw;min-width:100vi}body{font-family:Handlee,handwriting;font-size:clamp(1.13rem,1.08rem + .22vw,1.25rem)}.SiteTitle{font-family:Bungee Shade,display;font-weight:400}
\ No newline at end of file
+*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);min-height:100vh;min-height:100vb;min-width:100vw;min-width:100vi;overflow:hidden}body{font-family:Handlee,handwriting;font-size:clamp(1.13rem,1.08rem + .22vw,1.25rem)}.Site-content,.Site-info,.Site-nav,.Site-social{background-color:hsla(0,0%,98%,.5);margin:clamp(.31rem,.31rem + 0vw,.31rem)}.Site{display:grid;grid-template:"Site-info Site-content Site-nav" 2fr "Site-social Site-content Site-nav" 4fr "Site-title Site-title Site-title" 2fr/1fr 3fr 1fr;height:100%;padding:clamp(9rem,8.65rem + 1.74vw,10rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.8rem,2.45rem + 1.77vw,3.82rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(1.13rem,1.08rem + .22vw,1.25rem)}.Site-nav{grid-area:Site-nav}.Site-content{grid-area:Site-content}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}
\ No newline at end of file
diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid
index 5292935..8ec80f4 100644
--- a/src/_includes/layout.liquid
+++ b/src/_includes/layout.liquid
@@ -14,8 +14,25 @@
-
-punkfairie.net
-{{ content }}
+
+
+punkfairie.net
+
+
+
+
+ {{ content }}
+
+
+
+
+
+
diff --git a/src/style/_base.scss b/src/style/_base.scss
index 53facf6..e95076d 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -5,12 +5,13 @@
@use 'theme';
html {
+ overflow: hidden;
background-image: theme.$gradient;
min-block-size: 100vb;
min-inline-size: 100vi;
}
body {
- font-size: theme.$fontSize-0;
font-family: theme.$fontFamily--body;
+ font-size: theme.$fontSize-0;
}
diff --git a/src/style/_theme.scss b/src/style/_theme.scss
index 5ca898f..4052208 100644
--- a/src/style/_theme.scss
+++ b/src/style/_theme.scss
@@ -23,6 +23,9 @@ $purple-400: rgb(192 132 252 / 100%);
/* pinks */
$pink-400: rgb(244 114 182 / 100%);
+/* neutrals */
+$neutral-50: rgb(250 250 250);
+
/* gradient */
$gradient: linear-gradient(90deg, $red-400 0%, $orange-400 17%, $yellow-400 33%, $green-400 50%, $blue-400 67%, $purple-400 83%, $pink-400 100%);
@@ -45,7 +48,7 @@ $fontSize-6: clamp(3.36rem, calc(2.87rem + 2.45vw), 4.77rem);
/**
* Fluid spacing scale
- * @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,6,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+ * @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,6,0,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l&g=s,l,xl,12
*/
$spacer-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
@@ -57,6 +60,7 @@ $spacer-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem);
$spacer-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
$spacer-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem);
$spacer-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem);
+$spacer-4xl: clamp(9.00rem, calc(8.65rem + 1.74vw), 10.00rem);
/* One-up pairs */
$spacer-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
@@ -67,6 +71,7 @@ $spacer-m-l: clamp(1.69rem, calc(1.40rem + 1.41vw), 2.50rem);
$spacer-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
$spacer-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem);
$spacer-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem);
+$spacer-3xl-4xl: clamp(6.75rem, calc(5.62rem + 5.65vw), 10.00rem);
/* Custom pairs */
$spacer-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);
diff --git a/src/style/components/_Site.scss b/src/style/components/_Site.scss
new file mode 100644
index 0000000..1a2dcb7
--- /dev/null
+++ b/src/style/components/_Site.scss
@@ -0,0 +1,54 @@
+@use 'sass:color';
+@use '../theme';
+
+%_SiteContent {
+ $_SiteContent-backgroundColor: color.adjust(theme.$neutral-50, $alpha: -0.5);
+
+ margin: theme.$spacer-3xs;
+ background-color: $_SiteContent-backgroundColor;
+}
+
+.Site {
+ display: grid;
+ grid-template:
+ 'Site-info Site-content Site-nav' 2fr
+ 'Site-social Site-content Site-nav' 4fr
+ 'Site-title Site-title Site-title' 2fr
+ / 1fr 3fr 1fr;
+ inline-size: 100%;
+ block-size: 100%;
+ padding: theme.$spacer-4xl;
+
+ &-title {
+ grid-area: Site-title;
+ justify-self: end;
+ padding-inline-end: theme.$spacer-s;
+ font-family: theme.$fontFamily--display;
+ font-size: theme.$fontSize-5;
+ font-weight: normal;
+ }
+
+ &-nav {
+ @extend %_SiteContent;
+
+ grid-area: Site-nav;
+ }
+
+ &-content {
+ @extend %_SiteContent;
+
+ grid-area: Site-content;
+ }
+
+ &-info {
+ @extend %_SiteContent;
+
+ grid-area: Site-info;
+ }
+
+ &-social {
+ @extend %_SiteContent;
+
+ grid-area: Site-social;
+ }
+}
diff --git a/src/style/components/_SiteTitle.scss b/src/style/components/_SiteTitle.scss
deleted file mode 100644
index 26ff880..0000000
--- a/src/style/components/_SiteTitle.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use '../theme';
-
-.SiteTitle {
- font-family: theme.$fontFamily--display;
- font-weight: normal;
-}
diff --git a/src/style/components/_index.scss b/src/style/components/_index.scss
index d4c1046..f331787 100644
--- a/src/style/components/_index.scss
+++ b/src/style/components/_index.scss
@@ -1 +1 @@
-@forward 'SiteTitle';
+@forward 'Site';