give me some advice

petracoding · Oct 1, 2024 · 3a47ea3 · 3a47ea3
1 parent 38bed55
commit 3a47ea3
Show file tree

Hide file tree

Showing 82 changed files with 82,743 additions and 1,331 deletions.
diff --git a/content/_data/changelog.json b/content/_data/changelog.json
@@ -1,5 +1,6 @@
 [
   { "date": "2024-09-XX", "text": "TEMPLATE", "link": "" },
+  { "date": "2024-09-30", "text": "Halloween Theme!", "link": "" },
   { "date": "2024-09-15", "text": "New guide: Code quality (for beginners)", "link": "/coding/code-quality" },
   { "date": "2024-09-11", "text": "New tutorial: How to position elements with CSS (+ Flexbox, Grid!) and create layouts!", "link": "/coding/positioning-tutorial" },
   { "date": "2024-09-10", "text": "New page: Coding Cheatsheet!", "link": "/coding/cheatsheet" },

diff --git a/content/_includes/about-me.njk b/content/_includes/about-me.njk
@@ -1,3 +1,6 @@
+---
+noCache: "20241001"
+---
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -8,8 +11,8 @@
       content="{{ description or 'Welcome to petrapixel! Here you can find many resources for Neocities, coding help, media recommendations and more in a cute Old Web aesthetic!' }}"
     />
     {% endif %}
-    <script src="{{ nesting }}assets/js/main.js?nocache=20240913"></script>
-    <link rel="stylesheet" href="{{ nesting }}assets/main.css?nocache=20240915" />
+    <script src="{{ nesting }}assets/js/main.js?nocache={{ noCache }}"></script>
+    <link rel="stylesheet" href="{{ nesting }}assets/main.css?nocache={{ noCache }}" />
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
     <meta content="utf-8" http-equiv="encoding" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/content/_includes/petrapixel.njk b/content/_includes/petrapixel.njk
@@ -1,6 +1,6 @@
 ---
 testingOnLocalhost: false
-noCache: "20240915"
+noCache: "20241001"
 ---
 
 <!DOCTYPE html>
@@ -135,7 +135,7 @@ noCache: "20240915"
               <li>
                 <details id="menu-codinghelp">
                   <summary>
-                    coding help <small>(12)</small><small class="aside-nav__new"><img src="{{ nesting }}assets/img/layout/new.gif" alt="" aria-hidden="true" /></small>
+                    coding help <small>(16)</small><small class="aside-nav__new"><img src="{{ nesting }}assets/img/layout/new.gif" alt="" aria-hidden="true" /></small>
                   </summary>
                   <br />
                   <ul>
@@ -174,9 +174,7 @@ noCache: "20240915"
                     <li>
                       <a href="/coding/git-tutorial">git tutorial</a>
                       <a href="/coding/npm-tutorial">node/npm tutorial</a>
-                      <a href="/coding/webpack-tutorial"
-                        >webpack tutorial<small class="aside-nav__new"><img src="{{ nesting }}assets/img/layout/new.gif" alt="" aria-hidden="true" /></small
-                      ></a>
+                      <a href="/coding/webpack-tutorial">webpack tutorial</a>
                       <a href="/coding/eleventy-tutorial">eleventy (11ty) tutorial</a>
                     </li>
                   </ul>
@@ -238,31 +236,29 @@ noCache: "20240915"
             <div class="aside-stuff aside-poll" aria-hidden="true">
               <div class="aside-stuff__heading" aria-hidden="true">Poll<img src="{{ nesting }}assets/img/layout/icon-stats.png" alt="" aria-hidden="true" /></div>
 
-              <form method="post" action="https://poll.pollcode.com/83362553">
+              <form method="post" action="https://poll.pollcode.com/44915721">
                 <div style="background-color: #eeeeee; padding: 2px; width: 175px; font-family: Arial; font-size: small; color: #000000">
-                  <div style="padding: 2px 0px 4px 2px"><strong>coders, which of these topics do you have the most problems with?</strong></div>
-                  <input type="radio" name="answer" value="1" id="answer833625531" style="float: left" /><label for="answer833625531" style="float: left; width: 150px"
-                    >code quality / organization</label
+                  <div style="padding: 2px 0px 4px 2px"><strong>do you watch/like horror movies?</strong></div>
+                  <input type="radio" name="answer" value="1" id="answer449157211" style="float: left" /><label for="answer449157211" style="float: left; width: 150px"
+                    >nope, i'm way too scared!</label
                   >
                   <div style="clear: both; height: 2px"></div>
-                  <input type="radio" name="answer" value="2" id="answer833625532" style="float: left" /><label for="answer833625532" style="float: left; width: 150px">custom fonts</label>
-                  <div style="clear: both; height: 2px"></div>
-                  <input type="radio" name="answer" value="3" id="answer833625533" style="float: left" /><label for="answer833625533" style="float: left; width: 150px"
-                    >css effects (transitions and animations)</label
+                  <input type="radio" name="answer" value="2" id="answer449157212" style="float: left" /><label for="answer449157212" style="float: left; width: 150px"
+                    >i'm a scaredy-cat, but i try</label
                   >
                   <div style="clear: both; height: 2px"></div>
-                  <input type="radio" name="answer" value="4" id="answer833625534" style="float: left" /><label for="answer833625534" style="float: left; width: 150px"
-                    >manipulating page content with javascript</label
+                  <input type="radio" name="answer" value="3" id="answer449157213" style="float: left" /><label for="answer449157213" style="float: left; width: 150px"
+                    >i'm not scared but i just don't enjoy them</label
                   >
                   <div style="clear: both; height: 2px"></div>
-                  <input type="radio" name="answer" value="5" id="answer833625535" style="float: left" /><label for="answer833625535" style="float: left; width: 150px"
-                    >using plugins / scripts / libraries</label
-                  >
+                  <input type="radio" name="answer" value="4" id="answer449157214" style="float: left" /><label for="answer449157214" style="float: left; width: 150px">occasionally</label>
                   <div style="clear: both; height: 2px"></div>
-                  <input type="radio" name="answer" value="6" id="answer833625536" style="float: left" /><label for="answer833625536" style="float: left; width: 150px">none of these</label>
+                  <input type="radio" name="answer" value="5" id="answer449157215" style="float: left" /><label for="answer449157215" style="float: left; width: 150px"
+                    >i watch quite a few horror movies!</label
+                  >
                   <div style="clear: both; height: 2px"></div>
-                  <input type="radio" name="answer" value="7" id="answer833625537" style="float: left" /><label for="answer833625537" style="float: left; width: 150px"
-                    >i'm not a coder but like polls</label
+                  <input type="radio" name="answer" value="6" id="answer449157216" style="float: left" /><label for="answer449157216" style="float: left; width: 150px"
+                    >horror is my favorite movie genre!</label
                   >
                   <div style="clear: both; height: 2px"></div>
                   <div align="center" style="padding: 3px"><input type="submit" value=" Vote " />&nbsp;<input type="submit" name="view" value=" View " /></div>
@@ -278,8 +274,8 @@ noCache: "20240915"
             <!-- ----------------- IMAGE OF THE MOMENT ----------------- -->
             <div class="aside-stuff aside-poll">
               <div class="aside-stuff__heading" aria-hidden="true">Image of the Moment<img src="{{ nesting }}assets/img/layout/icon-hearts.png" alt="" aria-hidden="true" /></div>
-              <a href="https://pinterest.com/pin/3729612238111070/" target="_blank" class="image-of-the-moment">
-                <img src="https://i.pinimg.com/736x/44/58/3f/44583f8db5b6a9aef3f9784a6e718633.jpg" alt="Hugh Jackman and Ryan Reynolds" title="Nightcrawler (X-Men '97')" />
+              <a href="https://at.pinterest.com/pin/96334879525449893/" target="_blank" class="image-of-the-moment">
+                <img src="https://i.pinimg.com/736x/bd/58/62/bd5862d9ff4167c5e70fddedd25a04b9.jpg" alt="Nightcrawler (X-Men Comics)" title="Nightcrawler (X-Men Comics)" />
               </a>
             </div>
 
@@ -386,12 +382,12 @@ noCache: "20240915"
             </li>
             <li aria-label="watching:">
               <img src="{{ nesting }}assets/img/layout/icon-tv.png" alt="" title="watching:" aria-hidden="true" />
-              <a href="https://app.tvtime.com/user/33116783" target="_blank">X-Men: The Animated Series (1992), Hazbin Hotel</a>
+              <a href="https://app.tvtime.com/user/33116783" target="_blank">X-Men: The Animated Series (1992); Hazbin Hotel</a>
             </li>
             <li aria-label="reading:">
               <img src="{{ nesting }}assets/img/layout/icon-book.png" alt="" title="reading:" aria-hidden="true" />
               <a href="https://www.goodreads.com/user/show/62158941-petra" target="_blank"
-                >The Code Book
+                >X-Men Comics; The Haunting of Hill House
                 <!--<span style="font-family:sans-serif;font-size:0.9em">↺</span>--></a
               >
             </li>
@@ -402,7 +398,7 @@ noCache: "20240915"
             <li aria-label="obsessed with:">
               <img src="{{ nesting }}assets/img/layout/icon-heart.png" alt="" title="obsessed with:" aria-hidden="true" />
               <span
-                >Deadpool & Wolverine, X-Men
+                >X-Men
                 <!--<span style="font-family:sans-serif;font-size:0.9em">♡</span>--></span
               >
             </li>

diff --git a/content/about/credits.html b/content/about/credits.html
@@ -7,6 +7,11 @@
 <section>
   <h1>Credits</h1>
   <p>This website was designed and coded by myself.</p>
+  <h3>Halloween Theme:</h3>
+  <ul>
+    <li>Tiled backgrounds from <a href="https://goblin-heart.net/sadgrl/webmastery/downloads/tiledbgs" target="_blank">sadgrl</a></li>
+    <li>Pumpkin cursors from <a href="https://www.cursors-4u.com/halloween/" target="_blank">cursors-4u</a></li>
+  </ul>
   <hr />
   <h3>Font:</h3>
   <ul>

diff --git a/content/coding/layout-generator.html b/content/coding/layout-generator.html
@@ -3,7 +3,7 @@
 title: "layout generator"
 description: "petrapixel's layout builder for Neocities and coding beginners."
 nesting: "../"
-codeHighlight: false
+codeHighlight: true
 mainClass: coding-page
 lightbox: true
 ---
@@ -108,6 +108,7 @@ <h3>HTML:</h3>
 
   <h3>CSS:</h3>
   <p>This goes into <code>style.css</code>.</p>
+  <p>I <b>highly</b> recommend using <a href="https://autoprefixer.github.io/" target="_blank">Autoprefixer</a> on this code for better browser compatibility.</p>
   <p>If you need help understanding the <i>grid</i> rules which make up the layout, read the <a href="/coding/positioning-tutorial.html#grid">grid section of my positioning/layout tutorial</a>!</p>
 
   <h3>JavaScript:</h3>

diff --git a/content/creations/playlists.html b/content/creations/playlists.html
@@ -1,7 +1,7 @@
 ---
 layout: petrapixel.njk
 title: "my playlists"
-description: "ere's my neocities page for my own Spotify playlists, fandom and otherwise!"
+description: "Here's my neocities page for my own Spotify playlists, fandom and otherwise!"
 nesting: "../"
 ---
 
@@ -17,7 +17,7 @@ <h1>My Playlists</h1>
     <div class="spotify-iframe-container__content">
       <button class="spotify-iframe-container__close" aria-label="Close">✕</button>
       <iframe
-        title="Spotify Playlist"
+        aria-label="Spotify Playlist"
         id="spotifyIFrame"
         style="border-radius: 12px"
         src=""
@@ -1432,6 +1432,19 @@ <h2 class="playlists-heading">Fandoms: TV Shows</h2>
   <!-- ----------------------------------------------------------------------------------------------------- -->
   <h2 class="playlists-heading">Fandoms: Movies</h2>
   <div class="playlists">
+    <!-- ----- -->
+    <div class="playlist">
+      <div class="playlist__content">
+        <div class="image image--pink">
+          <img alt="" src="../assets/img/spotify/cherik.jpg" />
+        </div>
+        <div class="playlist__infos">
+          <a href="https://open.spotify.com/playlist/3RCcEbGhM6RkQpKfiK6lNc?si=bdb9d56422b34a97" target="_blank" class="playlist__title">cherik</a>
+          <div class="playlist__fandom">charles & erik (x-men)</div>
+          <div class="playlist__info">70 songs</div>
+        </div>
+      </div>
+    </div>
     <!-- ----- -->
     <div class="playlist">
       <div class="playlist__content">
@@ -1441,7 +1454,7 @@ <h2 class="playlists-heading">Fandoms: Movies</h2>
         <div class="playlist__infos">
           <a href="https://open.spotify.com/playlist/3W3LC01BAboiIAmFGl6I9C?si=f206b63c82c4415e" target="_blank" class="playlist__title">poolverine</a>
           <div class="playlist__fandom">deadpool & wolverine</div>
-          <div class="playlist__info">49 songs</div>
+          <div class="playlist__info">63 songs</div>
         </div>
       </div>
     </div>
@@ -1492,7 +1505,7 @@ <h2 class="playlists-heading">Fandoms: Movies</h2>
         </div>
         <div class="playlist__infos">
           <a href="https://open.spotify.com/playlist/2FwDHp1yDOZ0wJDPXVhEe8?si=7411a48a1690409b" target="_blank" class="playlist__title">bella swan</a>
-          <div class="playlist__fandom">twilight</div>
+          <div class="playlist__fandom">twilight saga</div>
           <div class="playlist__info">38 songs</div>
         </div>
       </div>

diff --git a/content/layout-generator/index.html b/content/layout-generator/index.html
@@ -3,7 +3,8 @@
   <head>
     <title>petrapixel's layout generator</title>
     <meta name="description" content="A layout builder for Neocities and coding beginners." />
-    <script src="../assets/js/layoutGenerator.js?nocache=index3"></script>
+    <script src="../assets/js/layoutGenerator.js?nocache=index4"></script>
+    <!--    <script src="../assets/js/autoprefixer.js"></script> -->
     <link rel="stylesheet" href="../assets/layoutGenerator.css" />
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
     <meta content="utf-8" http-equiv="encoding" />
@@ -230,6 +231,7 @@ <h2>Scroll down for Preview!</h2>
       <strong>CSS: <small>(style.css)</small></strong>
       <pre><code id="output-css"  class="language-css"></code></pre>
       <button id="copy-css">Copy CSS</button>
+      <span>I <b>highly</b> recommend using <a href="https://autoprefixer.github.io/" target="_blank">Autoprefixer</a> on this code for better browser compatibility.</span>
       <div class="layout-generator-codes__js">
         <strong>JavaScript: <small>(layout.js)</small></strong>
         <pre><code id="output-js"  class="language-javascript"></code></pre>

diff --git a/content/lists/_template.html b/content/lists/_template.html
@@ -0,0 +1,10 @@
+---
+layout: petrapixel.njk
+title: "TITLE"
+nesting: "../"
+---
+
+<section>
+  <h1>TITLE</h1>
+  ADD HERE
+</section>