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';