some misc styling things, icons in footer, padding on mobile, and line height change

ninjamuffin99 · ninjamuffin99 · commit a3a7ad2b38ce · 2025-07-07T15:09:19.000-04:00
diff --git a/config.toml b/config.toml
@@ -1,6 +1,6 @@
 # The URL the site will be built for
 
-title = "The funkin.me Blog"
+title = "Friday Night Funkin' - The Funkin' Crew Inc."
 description = "Blog posts about Friday Night Funkin' written by various members of The Funkin' Crew Inc.!"
 
 base_url = "https://funkin.me"
diff --git a/package-lock.json b/package-lock.json
diff --git a/static/styles/style.css b/static/styles/style.css
@@ -1107,6 +1107,32 @@ details summary{
         mask-size: 100% 100%;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27zm0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93z'/%3E%3C/svg%3E");
 }
+.i-mdi-youtube{
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        background-color: currentColor;
+        -webkit-mask-image: var(--svg);
+        mask-image: var(--svg);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-size: 100% 100%;
+        mask-size: 100% 100%;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73'/%3E%3C/svg%3E");
+}
+.i-mdi-twitter{
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        background-color: currentColor;
+        -webkit-mask-image: var(--svg);
+        mask-image: var(--svg);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-size: 100% 100%;
+        mask-size: 100% 100%;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.2 4.2 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.52 8.52 0 0 1-5.33 1.84q-.51 0-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23'/%3E%3C/svg%3E");
+}
 .collapse{
         visibility: collapse;
 }
@@ -1179,12 +1205,18 @@ details summary{
 .items-center{
         align-items: center;
 }
+.justify-center{
+        justify-content: center;
+}
 .gap-2{
         gap: 0.5rem;
 }
 .gap-4{
         gap: 1rem;
 }
+.gap-1{
+        gap: 0.25rem;
+}
 .truncate{
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1209,6 +1241,10 @@ details summary{
 .p-8{
         padding: 2rem;
 }
+.px-2{
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+}
 .px-4{
         padding-left: 1rem;
         padding-right: 1rem;
@@ -1224,6 +1260,9 @@ details summary{
 .italic{
         font-style: italic;
 }
+.leading-6{
+        line-height: 1.5rem;
+}
 .text-gray-100{
         --tw-text-opacity: 1;
         color: rgb(199 202 209 / var(--tw-text-opacity));
@@ -1533,3 +1572,10 @@ small p {
 .hover\:no-underline:hover{
         text-decoration-line: none;
 }
+@media (min-width: 640px){
+
+        .sm\:px-0{
+                padding-left: 0px;
+                padding-right: 0px;
+        }
+}
diff --git a/templates/404.html b/templates/404.html
@@ -1,9 +1,12 @@
-<head>
-  <title>404 LOL</title>
-</head>
+{% extends "base.html" %}
 
-<body>
-  <h1>
-    404 SCREEN
-  </h1>
-</body>
+{% block content %}
+<div class="container-fluid">
+<h1>
+  404 SCREEN
+</h1>
+<p>Unforunately this page doesn't exist! Try again! </p>
+<a href="/">Return Home</a>
+</div>
+  
+{% endblock content %}
diff --git a/templates/base.html b/templates/base.html
@@ -24,7 +24,9 @@
   <meta property="og:type" content="website" />
   <meta property="og:image"
     content="https://user-images.githubusercontent.com/22229331/213636577-8983e46c-fbf0-43e3-86e6-4797ae3ef59e.gif" />
+  {%- if current_url -%}
   <meta property="og:url" content="{{ current_url }}" />
+  {%- endif -%}
   <meta name="theme-color" content="#ff1cb0">
 
 </head>
@@ -69,11 +71,22 @@
     </marquee>
   </div>
 
-  <main class="max-w-5xl w-full mx-auto prose prose-invert">
+  <main class="max-w-5xl w-full mx-auto prose prose-invert px-2 sm:px-0 leading-6">
     {% block content %} {% endblock %}
   </main>
 
   <footer class="my-8">
+    <div class="flex flex-row justify-center gap-1">
+      <a href="https://www.youtube.com/@FNF_Developers">
+        <i class="i-mdi-youtube"></i>
+      </a>
+      <a href="https://x.com/fnf_developers">
+        <i class="i-mdi-twitter"></i>
+      </a>
+      <a href="https://github.com/FunkinCrew">
+        <i class="i-mdi-github"></i>
+      </a>
+    </div>
     <!--div align='center'>
       <a href='https://www.free-website-hit-counter.com'>
         <img src='https://www.free-website-hit-counter.com/c.php?d=9&id=145132&s=36' border='0'
