Polity-Dance

A-Tetarwal · Aug 11, 2024 · b67f281 · b67f281
1 parent db0fc0d
commit b67f281
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 110 deletions.
diff --git a/views/article.ejs b/views/article.ejs
@@ -7,11 +7,6 @@
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
 
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -110,7 +105,7 @@
 </head>
 <body id="swup" class="dark-mode flex flex-col justify-center items-center transition-fade">
     <div class="navbar sticky flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>
@@ -130,7 +125,7 @@
 
     <a href="/login" target="_blank" class="text-white fixed right-3 bottom-2 px-3 py-2 bg-gradient-to-r from-red-500 to-red-600">Write your article</a>
 
-    <a href="" class="text-zinc-500 hover:text-white">&copy; Fi-Web, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/createarticle.ejs b/views/createarticle.ejs
@@ -6,11 +6,6 @@
     <title>Polity Dance</title>
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -111,7 +106,7 @@
 </head>
 <body class="dark-mode flex flex-col justify-center items-center">
     <div class="navbar flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>        
@@ -149,7 +144,7 @@
         </div>
     </form>
 
-    <a href="" class="text-zinc-500">&copy; Fi-4, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/editprofile.ejs b/views/editprofile.ejs
@@ -6,11 +6,6 @@
     <title>Polity Dance</title>
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -109,7 +104,7 @@
 </head>
 <body class="dark-mode flex flex-col justify-center items-center">
     <div class="navbar flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>
@@ -139,7 +134,7 @@
         </div>
     </form>
 
-    <a href="" class="text-zinc-500 fixed bottom-1">&copy; Fi-4, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/index.ejs b/views/index.ejs
@@ -6,17 +6,17 @@
     <title>Polity Dance</title>
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
     <script defer src="https://unpkg.com/masonry-layout@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         /* Default Styles */
         * {
             font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
         }
+
+        a.disabled {
+            pointer-events: none;
+            cursor: default;
+        }
         
         /* Navbar Styles */
         .navbar {
@@ -127,7 +127,7 @@
 </head>
 <body id="swup" class="dark-mode flex flex-col justify-center items-center transition-fade">
     <div class="navbar sticky">
-        <a href="" class="text-3xl font-bold">
+        <a href="/" class="text-3xl font-bold">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="Logo" class="inline w-10 h-10">
             Polity-Dance
         </a>
@@ -150,7 +150,7 @@
 
     <a href="/login" target="_blank" class="text-white fixed right-3 bottom-2 px-3 py-2 bg-gradient-to-r from-red-500 to-red-600">Write your article</a>
 
-    <a href="" class="text-zinc-500 hover:text-white fixed bottom-1">&copy; Fi-Web, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/login.ejs b/views/login.ejs
@@ -6,11 +6,6 @@
     <title>Polity Dance</title>
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -109,7 +104,7 @@
 </head>
 <body class="dark-mode flex flex-col justify-center items-center">
     <div class="navbar flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>
@@ -131,7 +126,7 @@
         </div>
     </form>
 
-    <a href="" class="text-zinc-500 fixed bottom-1">&copy; Fi-4, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/profile.ejs b/views/profile.ejs
@@ -6,11 +6,6 @@
     <title>Polity Dance</title>
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -178,7 +173,7 @@
 </head>
 <body class="dark-mode flex flex-col justify-center items-center">
     <div class="navbar flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>
@@ -212,27 +207,12 @@
     </div>
 
 
-    <div class="articles flex w-1/2 flex-wrap gap-3 pt-10 border-t border-zinc-900">
+    <div class="articles grid-masonry max-w-screen-lg py-6 px-4">
         <% if(user.articles.length != 0){ %>
-            <% user.articles.reverse().forEach(post => { %> 
-                <a href="articles/<%= user.username %>/<%= post.title %>" class="each-post w-72 p-4 bg-zinc-700 flex flex-col justify-between rounded-lg relative overflow-hidden group pt-10">
-                    <!-- Background Image Container -->
-                    <div class="absolute inset-0 w-full h-48 bg-cover bg-center transition-transform duration-300 group-hover:bg-blue-500" style="background-image: url('<%= post.articlePic %>');"></div>
-                    
-                    <!-- Title and Overlay -->
-                    <div class="relative z-10 h-full flex flex-col justify-center items-center text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                        <h2 class="text-white text-lg font-semibold"><%= post.title %></h2>
-                    </div>
-                    
-                    <!-- Content (currently not used) -->
-                    <!--
-                    <p class="text-sm tracking-tight mb-2"><%= post.content %></p>
-                    -->
-                    
-                    <div class="border-b border-zinc-700 my-2"></div>
-                    <div class="text-zinc-500 text-xs mb-2">
-                        <%= user.name %> . <%= post.date.toLocaleDateString() %>
-                    </div>
+            <% user.articles.reverse().forEach(article => { %> 
+                <a href="articles/<%= article.title %>" class="grid-item peacockk border border-zinc-700 p-4">
+                    <img src="<%= article.articlePic %>" alt="<%= article.articlePic %>" class="rounded-lg">
+                    <h3 class="font-bold mt-2"><%= article.title %></h3>
                 </a>
                 
             <% }); %>
@@ -241,7 +221,7 @@
         <% } %>
     </div>
 
-    <a href="" class="text-zinc-500">&copy; Fi-4, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/profileAll.ejs b/views/profileAll.ejs
@@ -6,11 +6,6 @@
     <title>Polity Dance</title>
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -178,7 +173,7 @@
 </head>
 <body class="dark-mode flex flex-col justify-center items-center">
     <div class="navbar flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>
@@ -211,36 +206,16 @@
     </div>
 
 
-    <div class="articles flex w-1/2 flex-wrap gap-3 pt-10 border-t border-zinc-900">
-        <% if(user.articles.length != 0){ %>
-            <% user.articles.reverse().forEach(post => { %> 
-                <a href="articles/<%= user.username %>/<%= post.title %>" class="each-post w-72 p-4 bg-zinc-700 flex flex-col justify-between rounded-lg relative overflow-hidden group pt-10">
-                    <!-- Background Image Container -->
-                    <div class="absolute inset-0 w-full h-48 bg-cover bg-center transition-transform duration-300 group-hover:bg-blue-500" style="background-image: url('<%= post.articlePic %>');"></div>
-                    
-                    <!-- Title and Overlay -->
-                    <div class="relative z-10 h-full flex flex-col justify-center items-center text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                        <h2 class="text-white text-lg font-semibold"><%= post.title %></h2>
-                    </div>
-                    
-                    <!-- Content (currently not used) -->
-                    <!--
-                    <p class="text-sm tracking-tight mb-2"><%= post.content %></p>
-                    -->
-                    
-                    <div class="border-b border-zinc-700 my-2"></div>
-                    <div class="text-zinc-500 text-xs mb-2">
-                        <%= user.name %> . <%= post.date.toLocaleDateString() %>
-                    </div>
-                </a>
-                
-            <% }); %>
-        <% } else { %>
-            <p>No articles yet</p>
-        <% } %>
+    <div class="grid-masonry max-w-screen-lg py-6 px-4">
+        <% articles.forEach(article => { %>
+            <a href="articles/<%= article.title %>" class="grid-item peacockk border border-zinc-700 p-4">
+                <img src="<%= article.articlePic %>" alt="<%= article.articlePic %>">
+                <h3 class="font-bold mt-2"><%= article.title %></h3>
+            </a>
+        <% }); %>
     </div>
 
-    <a href="" class="text-zinc-500">&copy; Fi-4, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/register.ejs b/views/register.ejs
@@ -6,11 +6,6 @@
     <title>Polity Dance</title>
     <link rel="icon" href= "https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -106,7 +101,7 @@
 </head>
 <body class="dark-mode flex flex-col justify-center items-center">
     <div class="navbar flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>
@@ -131,7 +126,7 @@
         </div>
     </form>
 
-    <a href="" class="text-zinc-500 fixed bottom-1">&copy; Fi-4, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');

diff --git a/views/tech.ejs b/views/tech.ejs
@@ -6,12 +6,7 @@
     <title>Polity Dance</title>
     <link rel="icon" href="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png"/>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/swup@4"></script>
     <script defer src="https://unpkg.com/masonry-layout@4"></script>
-    <script defer>
-        const swup = new Swup();
-    </script>
-    <link rel="stylesheet" href="/stylesheets/main.css">
     <style>
         a.disabled {
             pointer-events: none;
@@ -160,7 +155,7 @@
 </head>
 <body class="dark-mode flex flex-col justify-center items-center">
     <div class="navbar flex justify-between items-center w-screen py-2">
-        <a href="" class="text-3xl font-bold ml-4 flex items-center gap-2">
+        <a href="/" class="text-3xl font-bold ml-4 flex items-center gap-2">
             <img src="https://res.cloudinary.com/dy4izbbfp/image/upload/v1723369188/logo_rnueal.png" alt="" class="w-10 h-10">
             Polity-Dance
         </a>
@@ -191,7 +186,7 @@
 
     <a href="/createarticle" target="_blank" class="fixed right-3 bottom-2 px-3 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white">Write your article</a>
 
-    <a href="" class="text-zinc-500">&copy; Fi-4, 2024</a>
+    <a href="" class="text-zinc-500 bottom-2">&copy; Fi-4, 2024</a>
 
     <script>
         const themeToggleBtn = document.getElementById('theme-toggle');