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

💄 feat: Workin on nav

Browse source
This commit is contained in:
marleyrae 2023-06-04 22:43:48 -07:00
parent 0dacb1eeea
commit 5f84b0dd75
10 changed files with 104 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.idea/codeStyles/codeStyleConfig.xml Normal file
View file

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>

3
dist/index.html vendored
View file

@ -12,7 +12,7 @@
<!-- Bunny Fonts --> <!-- Bunny Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=bungee-shade:400|handlee:400" rel="stylesheet"/> <link href="https://fonts.bunny.net/css?family=bungee-shade:400|imprima:400" rel="stylesheet"/>
</head> </head>
<body class="Site"> <body class="Site">
@ -20,7 +20,6 @@
<nav class="Site-nav Nav"> <nav class="Site-nav Nav">
<a href="/" class="Nav-link">index</a> <a href="/" class="Nav-link">index</a>
<a href="/update-archive/" class="Nav-link">update archive</a>
<button class="Nav-link">collections</button> <button class="Nav-link">collections</button>
<a href="/about/" class="Nav-link">about</a> <a href="/about/" class="Nav-link">about</a>
<a href="/manifesto/" class="Nav-link">manifesto</a> <a href="/manifesto/" class="Nav-link">manifesto</a>

2
dist/style/style.css vendored
View file

@ -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;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} *,: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:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}.Site-content,.Site-info,.Site-nav,.Site-social{background-color:hsla(0,0%,98%,.5);margin:clamp(.19rem,.17rem + .11vw,.25rem);padding:clamp(.75rem,.71rem + .22vw,.88rem)}.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.48rem + 2.61vw,10.5rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.24rem,1.86rem + 1.91vw,3.34rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(.75rem,.71rem + .22vw,.88rem)}.Site-nav{grid-area:Site-nav}.Site-content{grid-area:Site-content;padding:clamp(1.13rem,1.06rem + .33vw,1.31rem)}.Site-content>*+*{margin-top:1em}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}.Nav-link{background-color:transparent;border:none;color:inherit;display:block;letter-spacing:inherit;margin:0;padding:0;-webkit-text-decoration:underline;text-decoration:underline}.Nav-link:focus,.Nav-link:hover{text-decoration:underline;-webkit-text-decoration:wavy underline;text-decoration:wavy underline}:nth-child(7n+1 of .Nav-link){color:#dc2626}:nth-child(7n+2 of .Nav-link){color:#ea580c}:nth-child(7n+3 of .Nav-link){color:#ca8a04}:nth-child(7n+4 of .Nav-link){color:#65a30d}:nth-child(7n+5 of .Nav-link){color:#0892a2}:nth-child(7n+6 of .Nav-link){color:#9333ea}:nth-child(7n+7 of .Nav-link){color:#db2777}

3
src/_includes/layout.liquid
View file

@ -12,7 +12,7 @@
<!-- Bunny Fonts --> <!-- Bunny Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=bungee-shade:400|handlee:400" rel="stylesheet"/> <link href="https://fonts.bunny.net/css?family=bungee-shade:400|imprima:400" rel="stylesheet"/>
</head> </head>
<body class="Site"> <body class="Site">
@ -20,7 +20,6 @@
<nav class="Site-nav Nav"> <nav class="Site-nav Nav">
<a href="/" class="Nav-link">index</a> <a href="/" class="Nav-link">index</a>
<a href="/update-archive/" class="Nav-link">update archive</a>
<button class="Nav-link">collections</button> <button class="Nav-link">collections</button>
<a href="/about/" class="Nav-link">about</a> <a href="/about/" class="Nav-link">about</a>
<a href="/manifesto/" class="Nav-link">manifesto</a> <a href="/manifesto/" class="Nav-link">manifesto</a>

1
src/style/_base.scss
View file

@ -14,4 +14,5 @@ html {
body { body {
font-family: theme.$fontFamily--body; font-family: theme.$fontFamily--body;
font-size: theme.$fontSize-0; font-size: theme.$fontSize-0;
letter-spacing: theme.$letterSpacing;
} }

20
src/style/_mixins.scss Normal file
View file

@ -0,0 +1,20 @@
@use 'sass:list';
@use 'theme';
@mixin flow($space: 1em) {
& > * + * {
margin-block-start: $space;
}
}
@mixin rainbowify-text($elem, $props...) {
$colors-length: list.length(theme.$text-colors);
@for $i from 1 through $colors-length {
:nth-child(#{$colors-length}n + #{$i} of #{$elem}) {
@each $prop in $props {
#{$prop}: list.nth(theme.$text-colors, $i);
}
}
}
}

85
src/style/_theme.scss
View file

@ -3,25 +3,32 @@
*/ */
/* reds */ /* reds */
$red-400: rgb(248 113 113 / 100%); $red-400: rgb(248 113 113);
$red-600: rgb(220 38 38);
/* oranges */ /* oranges */
$orange-400: rgb(251 146 60 / 100%); $orange-400: rgb(251 146 60);
$orange-600: rgb(234 88 12);
/* yellows */ /* yellows */
$yellow-400: rgb(250 204 21 / 100%); $yellow-400: rgb(250 204 21);
$yellow-600: rgb(202 138 4);
/* greens */ /* greens */
$green-400: rgb(163 230 53 / 100%); $green-400: rgb(163 230 53);
$green-600: rgb(101 163 13);
/* blues */ /* blues */
$blue-400: rgb(57 208 221 / 100%); $blue-400: rgb(57 208 221);
$blue-600: rgb(8 146 162);
/* purples */ /* purples */
$purple-400: rgb(192 132 252 / 100%); $purple-400: rgb(192 132 252);
$purple-600: rgb(147 51 234);
/* pinks */ /* pinks */
$pink-400: rgb(244 114 182 / 100%); $pink-400: rgb(244 114 182);
$pink-600: rgb(219 39 119);
/* neutrals */ /* neutrals */
$neutral-50: rgb(250 250 250); $neutral-50: rgb(250 250 250);
@ -29,49 +36,53 @@ $neutral-50: rgb(250 250 250);
/* gradient */ /* 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%); $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%);
/* text color iterator */
$text-colors: $red-600, $orange-600, $yellow-600, $green-600, $blue-600, $purple-600, $pink-600;
/* typography */ /* typography */
$fontFamily--display: 'Bungee Shade', display; $fontFamily--display: 'Bungee Shade', display;
$fontFamily--body: 'Handlee', handwriting; $fontFamily--body: 'Imprima', handwriting;
$letterSpacing: .6px;
/** /**
* Fluid type scale * 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 * @link https://utopia.fyi/type/calculator?c=320,12,1.2,1240,14,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-0: clamp(0.75rem, calc(0.71rem + 0.22vw), 0.88rem);
$fontSize-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem); $fontSize-1: clamp(0.90rem, calc(0.83rem + 0.34vw), 1.09rem);
$fontSize-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem); $fontSize-2: clamp(1.08rem, calc(0.98rem + 0.50vw), 1.37rem);
$fontSize-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem); $fontSize-3: clamp(1.30rem, calc(1.15rem + 0.72vw), 1.71rem);
$fontSize-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem); $fontSize-4: clamp(1.56rem, calc(1.35rem + 1.01vw), 2.14rem);
$fontSize-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem); $fontSize-5: clamp(1.87rem, calc(1.59rem + 1.40vw), 2.67rem);
$fontSize-6: clamp(3.36rem, calc(2.87rem + 2.45vw), 4.77rem); $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,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 * @link https://utopia.fyi/space/calculator?c=320,12,1.2,1240,14,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); $spacer-3xs: clamp(0.19rem, calc(0.17rem + 0.11vw), 0.25rem);
$spacer-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem); $spacer-2xs: clamp(0.38rem, calc(0.35rem + 0.11vw), 0.44rem);
$spacer-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem); $spacer-xs: clamp(0.56rem, calc(0.52rem + 0.22vw), 0.69rem);
$spacer-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem); $spacer-s: clamp(0.75rem, calc(0.71rem + 0.22vw), 0.88rem);
$spacer-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem); $spacer-m: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
$spacer-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem); $spacer-l: clamp(1.50rem, calc(1.41rem + 0.43vw), 1.75rem);
$spacer-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem); $spacer-xl: clamp(2.25rem, calc(2.12rem + 0.65vw), 2.63rem);
$spacer-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem); $spacer-2xl: clamp(3.00rem, calc(2.83rem + 0.87vw), 3.50rem);
$spacer-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem); $spacer-3xl: clamp(4.50rem, calc(4.24rem + 1.30vw), 5.25rem);
$spacer-4xl: clamp(9.00rem, calc(8.65rem + 1.74vw), 10.00rem); $spacer-4xl: clamp(9.00rem, calc(8.48rem + 2.61vw), 10.50rem);
/* One-up pairs */ /* One-up pairs */
$spacer-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem); $spacer-3xs-2xs: clamp(0.19rem, calc(0.10rem + 0.43vw), 0.44rem);
$spacer-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem); $spacer-2xs-xs: clamp(0.38rem, calc(0.27rem + 0.54vw), 0.69rem);
$spacer-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem); $spacer-xs-s: clamp(0.56rem, calc(0.45rem + 0.54vw), 0.88rem);
$spacer-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem); $spacer-s-m: clamp(0.75rem, calc(0.55rem + 0.98vw), 1.31rem);
$spacer-m-l: clamp(1.69rem, calc(1.40rem + 1.41vw), 2.50rem); $spacer-m-l: clamp(1.13rem, calc(0.91rem + 1.09vw), 1.75rem);
$spacer-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem); $spacer-l-xl: clamp(1.50rem, calc(1.11rem + 1.96vw), 2.63rem);
$spacer-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem); $spacer-xl-2xl: clamp(2.25rem, calc(1.82rem + 2.17vw), 3.50rem);
$spacer-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem); $spacer-2xl-3xl: clamp(3.00rem, calc(2.22rem + 3.91vw), 5.25rem);
$spacer-3xl-4xl: clamp(6.75rem, calc(5.62rem + 5.65vw), 10.00rem); $spacer-3xl-4xl: clamp(4.50rem, calc(2.41rem + 10.43vw), 10.50rem);
/* Custom pairs */ /* Custom pairs */
$spacer-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem); $spacer-s-l: clamp(0.75rem, calc(0.40rem + 1.74vw), 1.75rem);

21
src/style/components/_Nav.scss Normal file
View file

@ -0,0 +1,21 @@
@use '../theme';
@use '../mixins';
.Nav {
&-link {
display: block;
padding: 0;
margin: 0;
color: inherit;
text-decoration: underline;
letter-spacing: inherit;
background-color: transparent;
border: none;
&:hover, &:focus {
text-decoration: wavy underline;
}
}
}
@include mixins.rainbowify-text('.Nav-link', 'color');

6
src/style/components/_Site.scss
View file

@ -1,9 +1,11 @@
@use 'sass:color'; @use 'sass:color';
@use '../theme'; @use '../theme';
@use '../mixins';
%_SiteContent { %_SiteContent {
$_SiteContent-backgroundColor: color.adjust(theme.$neutral-50, $alpha: -0.5); $_SiteContent-backgroundColor: color.adjust(theme.$neutral-50, $alpha: -0.5);
padding: theme.$spacer-s;
margin: theme.$spacer-3xs; margin: theme.$spacer-3xs;
background-color: $_SiteContent-backgroundColor; background-color: $_SiteContent-backgroundColor;
} }
@ -24,7 +26,7 @@
justify-self: end; justify-self: end;
padding-inline-end: theme.$spacer-s; padding-inline-end: theme.$spacer-s;
font-family: theme.$fontFamily--display; font-family: theme.$fontFamily--display;
font-size: theme.$fontSize-5; font-size: theme.$fontSize-6;
font-weight: normal; font-weight: normal;
} }
@ -36,8 +38,10 @@
&-content { &-content {
@extend %_SiteContent; @extend %_SiteContent;
@include mixins.flow;
grid-area: Site-content; grid-area: Site-content;
padding: theme.$spacer-m;
} }
&-info { &-info {

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

@ -1 +1,2 @@
@forward 'Site'; @forward 'Site';
@forward 'Nav';