pico css lil update, and fix to sunnis image (used discord cdn!)

Author: ninjamuffin99

.github/workflows/main.yml

@@ -7,6 +7,10 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+      - run: npm install
       - name: build_and_deploy
         uses: shalzz/zola-deploy-action@v0.10.0
         env:

.gitignore

@@ -1 +1,2 @@
-public/
+public/
+node_modules/

README.md

@@ -1,3 +1,6 @@
 # funkBlog
 
 made with zola, lil stuff for FNF website shenanigans
+
+
+requires node/npm to install picocss!

content/blog/2023-09-18.md

@@ -20,7 +20,7 @@ Leading up the event, we were scrambling a bit to make sure a conveniently locat
 
 So, thanks to ingenious use of the coworking space printer, we got to work infusing the space with the proper Funkin’ spirit: fresh fan art and Dave’s Very Nifty and Professional presentation deck went up on the walls to inspire and remind us of why we were there. Our “office” may have been temporary but it felt better once we put in some effort to make it our own.
 
-![img](https://cdn.discordapp.com/attachments/628006277984944177/1153473276304171028/firefox_I2sypXuGhC.png)
+![img](/img/funkCoin.jpg)
 
 Can’t share most of the wall decorations, unfortunately, since it’s full of secret stuff, so instead here’s a photo of whiteboard jokes.
 

package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@picocss/pico": "^2.0.3"
+  }
+}

package.json

@@ -1,34 +1,13 @@
-html,
-body {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    background-color: #000000;
-    color: #EEEEEE;
-    font-size: larger;
-    height: 100vh;
-    width: 100vw;
-}
-
-* {
-    box-sizing: border-box;
-}
+@use "../node_modules/@picocss/pico/scss/pico.scss" with (
+    $theme-color: "fuchsia"
+);
 
-.section {
-    background-color: #3841BB;
-    height: 100%;
-    /* scroll-behavior: smooth; */
-    width: 50%;
-    margin: auto;
-    display: flex;
-    flex-flow: column;
-    /* padding: 50px; */
-    /*justify-content: center; */
+article {
+    margin-top: auto;
+    padding-top: 2em;
 }
 
-h1 {
-    text-align: center;
-    padding: 0px;
+main .container {
+    padding-top: -10px;
+    margin-top: 0;
 }

sass/style.scss

@@ -5,59 +5,12 @@
     <meta charset="utf-8">
     <title>{% block title %}{% endblock title %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+    <link rel="stylesheet" href="/style.css"/>
     <meta property="og:title" content="Funkin.me" />
     <meta property="og:description" content="{% block description %}{% endblock description %}" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://user-images.githubusercontent.com/22229331/213636577-8983e46c-fbf0-43e3-86e6-4797ae3ef59e.gif" />
     <meta property="og:url" content="{{ current_url }}" />
-    <style>
-        article {
-            margin-top: auto;
-            padding-top: 2em;
-        }
-        
-        main .container {
-            padding-top: -10px;
-            margin-top: 0;
-        }
-        
-        [data-theme="light"],
-         :root:not([data-theme="dark"]) {
-            --primary: #d81b60;
-            --primary-hover: #c2185b;
-            --primary-focus: rgba(216, 27, 96, 0.125);
-            --primary-inverse: #FFF;
-        }
-        /* Pink Dark scheme (Auto) */
-        /* Automatically enabled if user has Dark mode enabled */
-        
-        @media only screen and (prefers-color-scheme: dark) {
-             :root:not([data-theme]) {
-                --primary: #d81b60;
-                --primary-hover: #e91e63;
-                --primary-focus: rgba(216, 27, 96, 0.25);
-                --primary-inverse: #FFF;
-            }
-        }
-        /* Pink Dark scheme (Forced) */
-        /* Enabled if forced with data-theme="dark" */
-        
-        [data-theme="dark"] {
-            --primary: #d81b60;
-            --primary-hover: #e91e63;
-            --primary-focus: rgba(216, 27, 96, 0.25);
-            --primary-inverse: #FFF;
-        }
-        /* Pink (Common styles) */
-        
-         :root {
-            --form-element-active-border-color: var(--primary);
-            --form-element-focus-color: var(--primary-focus);
-            --switch-color: var(--primary-inverse);
-            --switch-checked-background-color: var(--primary);
-        }
-    </style>
 
 </head>
 

static/img/construction.gif

@@ -30,33 +30,8 @@ <h2><em>Who</em> the FUNK is Friday Night Funkin'?</h2>
         </p>
         <p>Now <em>The Funkin' Crew Inc.</em> is a slightly larger crew of bozos from all over the damn place</p>
     </section>
-    <section>
-        <hgroup>
-            <h1>RELEASE</h1>
-            <h2><em>When</em> the FUNK is Friday Night Funkin'?</h2>
-        </hgroup>
-        <p>
-            Got a couples years probably.
-        </p>
-    </section>
-    <section>
-        <hgroup>
-            <h1>HUH?</h1>
-            <h2><em>WHY</em> the FUNK is Friday Night Funkin'?</h2>
-        </hgroup>
-        <p>
-            Because we love Newgrounds a whole damn lot.
-        </p>
-    </section>
-    <section>
-        <hgroup>
-            <h1>TECH AND STUFF</h1>
-            <h2><em>HOW</em> the FUNK is Friday Night Funkin'?</h2>
-        </hgroup>
-        <p>
-            We use a variety of tech like Haxe, Adobe Flash, Ableton, etc.
-        </p>
-    </section>
+
+    <img src="/img/construction.gif">
 
 </div>
 {% endblock content %}