From 0dfebdc6bcd44b20575902c4b52aa9ee56111335 Mon Sep 17 00:00:00 2001 From: marleyrae Date: Sun, 4 Jun 2023 20:07:31 -0700 Subject: [PATCH] :lipstick: oops --- .idea/punkfairie-site.iml | 4 +- dist/index.html | 6 ++ dist/style/style.css | 2 +- src/_includes/layout.liquid | 6 ++ src/style/_base.scss | 12 ++- src/style/_reset.scss | 116 +++++++++++++-------------- src/style/_theme.scss | 69 +++++++++++++++- src/style/components/_SiteTitle.scss | 6 ++ src/style/components/_index.scss | 1 + src/style/style.scss | 2 + 10 files changed, 158 insertions(+), 66 deletions(-) create mode 100644 src/style/components/_SiteTitle.scss create mode 100644 src/style/components/_index.scss diff --git a/.idea/punkfairie-site.iml b/.idea/punkfairie-site.iml index c956989..626a448 100644 --- a/.idea/punkfairie-site.iml +++ b/.idea/punkfairie-site.iml @@ -1,7 +1,9 @@ - + + + diff --git a/dist/index.html b/dist/index.html index 6eec91b..c372f45 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,9 +7,15 @@ punkfairie.net + + + + + +

punkfairie.net

diff --git a/dist/style/style.css b/dist/style/style.css index 2c94886..782a743 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}body:not(#\#){background-color:#fff888} \ 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}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 diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid index d3a0d7f..5292935 100644 --- a/src/_includes/layout.liquid +++ b/src/_includes/layout.liquid @@ -7,9 +7,15 @@ {% unless title %}punkfairie.net{% endunless %} + + + + + +

punkfairie.net

{{ content }} diff --git a/src/style/_base.scss b/src/style/_base.scss index 14d04be..53facf6 100644 --- a/src/style/_base.scss +++ b/src/style/_base.scss @@ -5,8 +5,12 @@ @use 'theme'; html { - background-color: #fff; - background-image: theme.$c-gradient; - min-height: 100vh; - min-width: 100vw; + background-image: theme.$gradient; + min-block-size: 100vb; + min-inline-size: 100vi; +} + +body { + font-size: theme.$fontSize-0; + font-family: theme.$fontFamily--body; } diff --git a/src/style/_reset.scss b/src/style/_reset.scss index acdd547..2481cc7 100644 --- a/src/style/_reset.scss +++ b/src/style/_reset.scss @@ -1,60 +1,58 @@ -@layer reset { - /* Box sizing rules */ - *, - *::before, - *::after { - box-sizing: border-box; - } - - /* Remove default margin */ - body, - h1, - h2, - h3, - h4, - p, - figure, - blockquote, - dl, - dd { - margin: 0; - } - - /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ - ul[role="list"], - ol[role="list"] { - list-style: none; - } - - /* Set core root defaults */ - html:focus-within { - scroll-behavior: smooth; - } - - /* Set core body defaults */ - body { - min-block-size: 100vb; - text-rendering: optimizeSpeed; - line-height: 1.5; - } - - /* A elements that don't have a class get default styles */ - a:not([class]) { - text-decoration-skip-ink: auto; - } - - /* Make images easier to work with */ - img, - picture { - max-inline-size: 100%; - display: block; - } - - /* Inherit fonts for inputs and buttons */ - input, - button, - textarea, - select { - font: inherit; - } +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role="list"], +ol[role="list"] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-block-size: 100vb; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-inline-size: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; } diff --git a/src/style/_theme.scss b/src/style/_theme.scss index c1ecc9b..5ca898f 100644 --- a/src/style/_theme.scss +++ b/src/style/_theme.scss @@ -2,4 +2,71 @@ * Global variables. */ -$c-gradient: linear-gradient(90deg, rgba(248,113,113,1) 0%, rgba(251,146,60,1) 17%, rgba(250,204,21,1) 33%, rgba(163,230,53,1) 50%, rgba(57,208,221,1) 67%, rgba(192,132,252,1) 83%, rgba(244,114,182,1) 100%); +/* reds */ +$red-400: rgb(248 113 113 / 100%); + +/* oranges */ +$orange-400: rgb(251 146 60 / 100%); + +/* yellows */ +$yellow-400: rgb(250 204 21 / 100%); + +/* greens */ +$green-400: rgb(163 230 53 / 100%); + +/* blues */ +$blue-400: rgb(57 208 221 / 100%); + +/* purples */ +$purple-400: rgb(192 132 252 / 100%); + +/* pinks */ +$pink-400: rgb(244 114 182 / 100%); + +/* 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%); + +/* typography */ +$fontFamily--display: 'Bungee Shade', display; +$fontFamily--body: 'Handlee', handwriting; + +/** + * Fluid type scale + * @link https://utopia.fyi/type/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 + */ + +$fontSize-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem); +$fontSize-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem); +$fontSize-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem); +$fontSize-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem); +$fontSize-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem); +$fontSize-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem); +$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 + */ + +$spacer-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem); +$spacer-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem); +$spacer-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem); +$spacer-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem); +$spacer-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem); +$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); + +/* One-up pairs */ +$spacer-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem); +$spacer-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem); +$spacer-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem); +$spacer-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem); +$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); + +/* Custom pairs */ +$spacer-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem); diff --git a/src/style/components/_SiteTitle.scss b/src/style/components/_SiteTitle.scss new file mode 100644 index 0000000..26ff880 --- /dev/null +++ b/src/style/components/_SiteTitle.scss @@ -0,0 +1,6 @@ +@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 new file mode 100644 index 0000000..d4c1046 --- /dev/null +++ b/src/style/components/_index.scss @@ -0,0 +1 @@ +@forward 'SiteTitle'; diff --git a/src/style/style.scss b/src/style/style.scss index ee04d5b..0ea94d3 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -1 +1,3 @@ @use 'reset'; +@use 'base'; +@use 'components';