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

✨ feat: Get menu toggle working!

Browse source
This commit is contained in:
marleyrae 2023-06-05 19:38:29 -07:00
parent 633613157b
commit eec118bccc
11 changed files with 60 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.idea/inspectionProfiles/Project_Default.xml
View file

@ -1,6 +1,7 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="ReturnFromFinallyBlockJS" enabled="false" level="WARNING" enabled_by_default="false" />
<inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
<option name="processCode" value="false" />
<option name="processLiterals" value="true" />

2
.idea/jsLibraryMappings.xml
View file

@ -1,6 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="file://$PROJECT_DIR$" libraries="{punkfairie-site/node_modules}" />
<file url="PROJECT" libraries="{punkfairie-site/node_modules}" />
<includedPredefinedLibrary name="Node.js Core" />
</component>
</project>

13
dist/index.html vendored
View file

@ -18,9 +18,9 @@
<h1 class="Site-title">punkfairie.net</h1>
<nav class="Site-nav Nav">
<nav class="Site-nav Nav" x-data :style="$store['subNav'].open ? '--Site-nav-gridArea: Site-nav;' : ''">
<a href="/" class="Nav-link">index</a>
<button class="Nav-link">collections</button>
<button class="Nav-link" @click="$store['subNav'].toggle('collections')">collections</button>
<a href="/about/" class="Nav-link">about</a>
<a href="/manifesto/" class="Nav-link">manifesto</a>
<a href="/diary/" class="Nav-link">diary</a>
@ -32,7 +32,7 @@
<a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
</nav>
<nav class="Site-subNav Nav">
<nav class="Site-subNav Nav" x-data x-show="$store['subNav'].open">
</nav>
@ -53,10 +53,7 @@
</aside>
<script>
TypeError: callback is not a function
</script>
<!--suppress HtmlUnknownTarget -->
<script src="/js/main.js"></script>
</body>
</html>

5
dist/js/main.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

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{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" 2fr "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{display:none;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-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" 2fr "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-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}

26
package-lock.json generated
View file

@ -12,11 +12,13 @@
"@11ty/eleventy-plugin-vite": "^4.0.0",
"alpinejs": "^3.12.2",
"eleventy-sass": "^2.2.1",
"esbuild": "0.17.19",
"terser": "^5.17.7"
},
"devDependencies": {
"@11ty/eleventy": "^2.0.1",
"@ronilaukkarinen/stylelint-a11y": "^1.2.7",
"@types/alpinejs": "^3.7.1",
"cssnano": "^6.0.1",
"postcss": "^8.4.24",
"postcss-preset-env": "^8.4.2",
@ -1468,6 +1470,30 @@
"node": ">=10.13.0"
}
},
"node_modules/@types/alpinejs": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/@types/alpinejs/-/alpinejs-3.7.1.tgz",
"integrity": "sha512-gzwyuHXH/meGQQhurMGWlZgMQxe18lMOoSPd7X6CvGoDelHte9EsU7SpTIoRu8yYir0tbHDeaSMdX9LeQz/QtA==",
"dev": true,
"dependencies": {
"@vue/reactivity": "^3.2.26"
}
},
"node_modules/@types/alpinejs/node_modules/@vue/reactivity": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
"integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
"dev": true,
"dependencies": {
"@vue/shared": "3.3.4"
}
},
"node_modules/@types/alpinejs/node_modules/@vue/shared": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
"dev": true
},
"node_modules/@types/minimatch": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",

2
package.json
View file

@ -13,6 +13,7 @@
"devDependencies": {
"@11ty/eleventy": "^2.0.1",
"@ronilaukkarinen/stylelint-a11y": "^1.2.7",
"@types/alpinejs": "^3.7.1",
"cssnano": "^6.0.1",
"postcss": "^8.4.24",
"postcss-preset-env": "^8.4.2",
@ -29,6 +30,7 @@
"@11ty/eleventy-plugin-vite": "^4.0.0",
"alpinejs": "^3.12.2",
"eleventy-sass": "^2.2.1",
"esbuild": "0.17.19",
"terser": "^5.17.7"
}
}

15
src/_includes/layout.liquid
View file

@ -18,9 +18,9 @@
<h1 class="Site-title">punkfairie.net</h1>
<nav class="Site-nav Nav">
<nav class="Site-nav Nav" x-data :style="$store['subNav'].open ? '--Site-nav-gridArea: Site-nav;' : ''">
<a href="/" class="Nav-link">index</a>
<button class="Nav-link">collections</button>
<button class="Nav-link" @click="$store['subNav'].toggle('collections')">collections</button>
<a href="/about/" class="Nav-link">about</a>
<a href="/manifesto/" class="Nav-link">manifesto</a>
<a href="/diary/" class="Nav-link">diary</a>
@ -32,7 +32,7 @@
<a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
</nav>
<nav class="Site-subNav Nav">
<nav class="Site-subNav Nav" x-data x-show="$store['subNav'].open">
</nav>
@ -48,12 +48,7 @@
</aside>
{% capture js %}
{% include 'main.js' %}
{% endcapture %}
<script>
{{ js | jsMin }}
</script>
<!--suppress HtmlUnknownTarget -->
<script src="/js/main.js"></script>
</body>
</html>

5
src/_includes/main.js
View file

@ -1,5 +0,0 @@
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

13
src/js/main.js Normal file
View file

@ -0,0 +1,13 @@
import Alpine from 'alpinejs'
Alpine.store('subNav', {
open: false,
current: null,
toggle(menu) {
this.open = !this.open
this.current = this.open ? menu : null
},
})
Alpine.start()

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

@ -42,7 +42,6 @@
&-subNav {
@extend %_SiteContent;
display: none;
grid-area: Site-subNav;
}