✨ feat: Oops
|
@ -10,6 +10,9 @@ module.exports = function (eleventyConfig) {
|
||||||
]),
|
]),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Copy CSS assets
|
||||||
|
eleventyConfig.addPassthroughCopy('src/style/assets')
|
||||||
|
|
||||||
// Process JS
|
// Process JS
|
||||||
eleventyConfig.addTemplateFormats('js')
|
eleventyConfig.addTemplateFormats('js')
|
||||||
eleventyConfig.addExtension('js', {
|
eleventyConfig.addExtension('js', {
|
||||||
|
|
BIN
dist/style/assets/ha01-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/ha02-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/ha03-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/ha05-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/ha06-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/ha08-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/ha10-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/hb01-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/hb02-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/hb03-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/hb05-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/hb06-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/hb08-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
BIN
dist/style/assets/hb10-icon-arrow.gif
vendored
Normal file
After Width: | Height: | Size: 70 B |
2
dist/style/style.css
vendored
|
@ -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{color:#18181b;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,.Site-subNav{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" 2fr "Site-social Site-content Site-subNav" 3fr "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{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.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-caption{margin-bottom:clamp(.56rem,.52rem + .22vw,.69rem)}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;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}
|
*,: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{color:#18181b;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,.Site-subNav{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" 2fr "Site-social Site-content Site-subNav" 3fr "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{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.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{text-align:right}.Nav-caption{margin-bottom:clamp(.56rem,.52rem + .22vw,.69rem)}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;display:block;letter-spacing:inherit;margin:0;padding:0;text-align:inherit;-webkit-text-decoration:underline;text-decoration:underline;width:100%}.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}
|
|
@ -38,7 +38,35 @@ $neutral-900: rgb(24 24 27);
|
||||||
$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 color iterator */
|
||||||
$text-colors: $red-600, $orange-600, $yellow-600, $green-600, $blue-600, $purple-600, $pink-600;
|
$text-colors: [
|
||||||
|
$red-600,
|
||||||
|
$orange-600,
|
||||||
|
$yellow-600,
|
||||||
|
$green-600,
|
||||||
|
$blue-600,
|
||||||
|
$purple-600,
|
||||||
|
$pink-600
|
||||||
|
];
|
||||||
|
|
||||||
|
/* bullet image iterator */
|
||||||
|
$bullet-images-point-left: [
|
||||||
|
url('/style/assets/ha01-icon-arrow.gif'),
|
||||||
|
url('/style/assets/ha02-icon-arrow.gif'),
|
||||||
|
url('/style/assets/ha03-icon-arrow.gif'),
|
||||||
|
url('/style/assets/ha05-icon-arrow.gif'),
|
||||||
|
url('/style/assets/ha06-icon-arrow.gif'),
|
||||||
|
url('/style/assets/ha08-icon-arrow.gif'),
|
||||||
|
url('/style/assets/ha10-icon-arrow.gif')
|
||||||
|
];
|
||||||
|
$bullet-images-point-right: [
|
||||||
|
url('style/assets/hb01-icon-arrow.gif'),
|
||||||
|
url('style/assets/hb02-icon-arrow.gif'),
|
||||||
|
url('style/assets/hb03-icon-arrow.gif'),
|
||||||
|
url('style/assets/hb05-icon-arrow.gif'),
|
||||||
|
url('style/assets/hb06-icon-arrow.gif'),
|
||||||
|
url('style/assets/hb08-icon-arrow.gif'),
|
||||||
|
url('style/assets/hb10-icon-arrow.gif')
|
||||||
|
];
|
||||||
|
|
||||||
/* typography */
|
/* typography */
|
||||||
$fontFamily--display: 'Bungee Shade', display;
|
$fontFamily--display: 'Bungee Shade', display;
|
||||||
|
|
BIN
src/style/assets/ha01-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/ha02-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/ha03-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/ha05-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/ha06-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/ha08-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/ha10-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/hb01-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/hb02-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/hb03-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/hb05-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/hb06-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/hb08-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
BIN
src/style/assets/hb10-icon-arrow.gif
Normal file
After Width: | Height: | Size: 70 B |
|
@ -2,6 +2,8 @@
|
||||||
@use '../mixins';
|
@use '../mixins';
|
||||||
|
|
||||||
.Nav {
|
.Nav {
|
||||||
|
text-align: end;
|
||||||
|
|
||||||
&-caption {
|
&-caption {
|
||||||
margin-block-end: theme.$spacer-xs;
|
margin-block-end: theme.$spacer-xs;
|
||||||
}
|
}
|
||||||
|
@ -11,11 +13,13 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
text-align: inherit;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
letter-spacing: inherit;
|
letter-spacing: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
|
inline-size: 100%;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
text-decoration: wavy underline;
|
text-decoration: wavy underline;
|
||||||
|
@ -29,4 +33,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mixins.rainbowify-text('.Nav-link', 'color');
|
@include mixins.rainbowify-text('.Nav-link', color);
|
||||||
|
|