chore: move frontend from picocss to tailwind (#33)

- add further vsc config
- move from picocss to tailwind
- generate custom color palette from logo
- properly format kickstarter support page
- css code splitting
- do css generation using postcss to support nesting & tw at once
- cleanup some frontend html, proper hierarchical shenanigans
- build scripts
- update docs to reflect changes
- move icons to tailwind plugin

.github/workflows/main.yml

@@ -5,14 +5,14 @@ jobs:
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/master'
     steps:
-      - name: checkout
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 'latest'
-      - run: npm install
-      - name: build_and_deploy
-        uses: shalzz/[email protected]
+      - run: |
+          npm ci
+          npm run build
+      - uses: shalzz/[email protected]
         env:
           PAGES_BRANCH: gh-pages
           TOKEN: ${{ secrets.GITHUB_TOKEN}}

.vscode/settings.json

@@ -1,7 +1,11 @@
 {
   "files.associations": {
     "**/templates/**/*.html": "handlebars",
-    "**/templates/**/*.xml": "handlebars"
+    "**/templates/**/*.xml": "handlebars",
+    "**/styles/**/*.css": "postcss"
+  },
+  "emmet.includeLanguages": {
+    "postcss": "css"
   },
   "[handlebars]": {
     "editor.tabSize": 2
@@ -13,7 +17,7 @@
     "editor.tabSize": 2
   },
   "[markdown]": {
-    "editor.formatOnSave": false,
     "editor.tabSize": 2
-  }
+  },
+  "editor.formatOnSave": false
 }

README.md

@@ -4,7 +4,7 @@ This is the source code repository for the FUNKIN CREW WEBSITE,
 [`funkin.me`](https://funkin.me)
 
 It is a static site generated website, using [Zola](https://www.getzola.org/)
-for generation, and [Pico CSS](https://picocss.com/) for styling.
+for generation, [Tailwind CSS](https://tailwindcss.com/) for styling, and [Iconify Design](https://iconify.design/) for icons.
 
 # Setup
 
@@ -18,10 +18,5 @@ for generation, and [Pico CSS](https://picocss.com/) for styling.
 
 # Running the site
 
-From the
-[Zola CLI usage docs](https://www.getzola.org/documentation/getting-started/cli-usage/)
-
-> [Zola only has 4 commands: `init`, `build`, `serve` and `check`.](https://www.getzola.org/documentation/getting-started/cli-usage/)
-
-So you just need to run `zola serve` to compile and run the site on a local web
-server.
+- locally using `npm run dev`
+- in production using `npm run build` and then `zola build`

content/blog/2024-03-12.md

@@ -43,7 +43,7 @@ Earlier this year, I’ve built the API for that — which is the actual brains.
 
 {% callout(
   title="Nerd stuff: Scalability"
-  icon="alert-decagram"
+  icon="i-mdi-alert-decagram"
   icon_color="amber"
   heading_color="amber"
 ) %}
@@ -54,7 +54,7 @@ Earlier this year, I’ve built the API for that — which is the actual brains.
 
 {% callout(
   title="Nerd stuff: A little functional programming, as a treat"
-  icon="alert-decagram"
+  icon="i-mdi-alert-decagram"
   icon_color="amber"
   heading_color="amber"
 ) %}
@@ -149,7 +149,7 @@ Below the three interactive elements is a progress bar for the download.](/img/2
 
 {% callout(
   title="Nerd stuff: When to make sacrifices"
-  icon="alert-decagram"
+  icon="i-mdi-alert-decagram"
   icon_color="amber"
   heading_color="amber"
 ) %}
@@ -165,7 +165,7 @@ It avoids having a bunch of passwords and accounts to access different tools and
 
 {% callout(
   title="Nerd stuff: Picking the right tool"
-  icon="alert-decagram"
+  icon="i-mdi-alert-decagram"
   icon_color="amber"
   heading_color="amber"
 ) %}

content/kickstarter-support/_index.md

@@ -3,6 +3,8 @@ title = "Kickstarter Support"
 template = "page.html"
 +++
 
+<section>
+
 You can email `[email protected]` with any inquires relating to backer support such as:
 
 - shipping information assistance
@@ -24,6 +26,10 @@ As of writing, it's just one of the devs here helping with emails, so replies mi
 Very soon we will have a dedicated email support person, hopefully aiming to have quicker response times, 
 thank you for your patience!
 
+</section>
+
+<section>
+
 # Backer Portal
 
 We have a site dedicated for our Kickstarter backers at [kickstarter.funkin.me](https://kickstarter.funkin.me)
@@ -34,3 +40,5 @@ where backers edit and modify their information such as:
 - email address / backer portal account information changes
 
 Again, if you need any assistance with any of that, do reach out at to our support email `[email protected]`
+
+</section>