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

💄 feat: Nav sep

Browse source
This commit is contained in:
marleyrae 2023-06-04 22:53:54 -07:00
parent 23c4b420e9
commit abe2242205
5 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.html vendored
View file

@ -26,7 +26,7 @@
<a href="/diary/" class="Nav-link">diary</a>
<a href="/links/" class="Nav-link">links</a>
<hr class="Nav-seperator">
<hr class="Nav-separator">
<a href="https://epiphany.punkfairie.net" target="_blank" class="Nav-link">epiphany</a>
<a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</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:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}.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}
*,: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}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}.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}.Nav-separator{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border:none;height:clamp(.13rem,.13rem + 0vw,.13rem)}: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}

2
src/_includes/layout.liquid
View file

@ -26,7 +26,7 @@
<a href="/diary/" class="Nav-link">diary</a>
<a href="/links/" class="Nav-link">links</a>
<hr class="Nav-seperator">
<hr class="Nav-separator">
<a href="https://epiphany.punkfairie.net" target="_blank" class="Nav-link">epiphany</a>
<a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>

4
src/style/_theme.scss
View file

@ -59,9 +59,10 @@ $fontSize-6: clamp(2.24rem, calc(1.86rem + 1.91vw), 3.34rem);
/**
* 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,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|0.15,1.5|2|3|4|6|12,s-l&g=s,l,xl,12
*/
$spacer-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
$spacer-3xs: clamp(0.19rem, calc(0.17rem + 0.11vw), 0.25rem);
$spacer-2xs: clamp(0.38rem, calc(0.35rem + 0.11vw), 0.44rem);
$spacer-xs: clamp(0.56rem, calc(0.52rem + 0.22vw), 0.69rem);
@ -74,6 +75,7 @@ $spacer-3xl: clamp(4.50rem, calc(4.24rem + 1.30vw), 5.25rem);
$spacer-4xl: clamp(9.00rem, calc(8.48rem + 2.61vw), 10.50rem);
/* One-up pairs */
$spacer-4xs-3xs: clamp(0.13rem, calc(0.08rem + 0.22vw), 0.25rem);
$spacer-3xs-2xs: clamp(0.19rem, calc(0.10rem + 0.43vw), 0.44rem);
$spacer-2xs-xs: clamp(0.38rem, calc(0.27rem + 0.54vw), 0.69rem);
$spacer-xs-s: clamp(0.56rem, calc(0.45rem + 0.54vw), 0.88rem);

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

@ -16,6 +16,12 @@
text-decoration: wavy underline;
}
}
&-separator {
background-image: theme.$gradient;
border: none;
block-size: theme.$spacer-4xs;
}
}
@include mixins.rainbowify-text('.Nav-link', 'color');