Upd: Recolor and padding

Modify the colouring and padding across all components

src/components/download/selection.jsx

@@ -18,7 +18,7 @@ const DownloadSelection = () => {
     }
 
     return contentArray.map((content, index) => (
-        <div key={index} className="p-4 my-4 bg-indigo-950 text-white rounded-lg shadow-md">
+        <div key={index} className="p-4 my-4 bg-site-300 text-white rounded-lg shadow-md">
             <h3 className="text-2xl">{content.title}</h3>
             <p className="mt-2"><strong>Kernel:</strong> {content.details.kernel}</p>
             <p><strong>Download Mirror:</strong> <a href={content.details.downloadMirror} target="_blank" rel="noopener noreferrer" className="text-rhino-purple underline">{content.details.downloadMirror}</a></p>
@@ -42,7 +42,7 @@ const DownloadSelection = () => {
         id="platform"
         value={selectedPlatform}
         onChange={(e) => setSelectedPlatform(e.target.value)}
-        className="block w-full mt-2 p-2 bg-indigo-950 text-white text-xl border-2 border-rhino-purple rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+        className="block w-full mt-2 p-2 bg-site-300 text-white text-xl border-2 border-rhino-purple rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
       >
         <option value="generic">Generic (x86_64/ARM64)</option>
         <option value="pine">Pine64 (ARM64)</option>

src/components/footer.jsx

@@ -26,7 +26,7 @@ function GetYear() {
 
 function Footer() {
     return (
-        <div className="w-full bg-indigo-950 lg:p-8 p-4">
+        <div className="w-full bg-site-300 lg:p-8 p-4">
             <div className="text-center flex flex-wrap justify-center">
                 <p className="text-white text-xl">&copy; {GetYear()} Rhino Linux</p>
             </div>

src/components/home/desktop.jsx

@@ -4,24 +4,24 @@ const data = [
     {
         title: "Title 1",
         description: "Description 1",
-        image: "https://via.placeholder.com/150.png"
+        image: "../img/home/unicorn/tiling.webp"
     },
     {
         title: "Title 2",
         description: "Description 2",
-        image: "https://via.placeholder.com/150.png"
+        image: "../img/home/unicorn/xfdashboard.webp"
     },
     {
         title: "Title 3",
         description: "Description 3",
-        image: "https://via.placeholder.com/150.png"
+        image: "../img/home/unicorn/appgrid.webp"
     }
 
 ]
 
 function Desktop() {
     return (
-      <div className="w-full bg-indigo-950 lg:p-8 p-4">
+      <div className="w-full bg-site-300 lg:p-8 p-4">
         <h1 className="text-white text-5xl text-center">Enjoy an adaptive desktop.</h1>
         <p className="lg:w-[70%] m-auto text-white text-xl pb-4 text-center pt-4">Rhino Linux comes preinstalled with its own in-house desktop experience, Unicorn, a custom built XFCE desktop experience combining the best of the traditional and modern takes on the Desktop.</p>
         <div className="lg:w-[75%] m-auto w-[95%] lg:grid lg:grid-cols-3 gap-8">

src/components/home/latest.jsx

@@ -7,7 +7,7 @@ function Latest() {
     const latestPostContent = latestPost && latestPost.content.length > 0 ? latestPost.content[0] : "No content available";
 
     return (
-        <div className="w-full bg-indigo-950 text-center lg:p-8">
+        <div className="w-full bg-site-300 text-center lg:p-8">
             <div className="lg:w-[80%] w-[95%] mx-auto">
                 <h1 className="text-5xl text-white py-4">
                     Latest news

src/components/navbar.jsx

@@ -16,12 +16,33 @@ function toggleMegaMenu(menuid) {
     }
 }
 
-import baritems from "../items/items"
+const baritems = [
+    {
+        link: "../",
+        goto: "Home"
+    },
+    {
+        link: "/download/",
+        goto: "Download"
+    },
+    {
+        link: "/news/",
+        goto: "News"
+    },
+    {
+        link: "https://docs.rhinolinux.org",
+        goto: "Documentation"
+    },
+    {
+        link: "/community/",
+        goto: "Community"
+    }
+]
 
 function NavBar() {
     return (
         <div>
-            <nav className="bg-indigo-950 w-[100%] flex items-center justify-between p-1">
+            <nav className="bg-site-300 w-[100%] flex items-center justify-between">
                 <div className="px-2">
                     <a href="../">
                         <img src="/img/logo.png" alt="" className="lg:w-[4%] md:w-[10%] w-[20%] rounded-full" />
@@ -31,23 +52,23 @@ function NavBar() {
                     className="p-4 cursor-pointer"
                     onClick={() => toggleMegaMenu('mega-menu')}
                 >
-                    <h1 className="text-3xl px-2 text-white">≡</h1>
+                    <h1 className="text-3xl text-white">≡</h1>
                 </div>
             </nav>
-            <div className="bg-indigo-950 hidden transition-all w-[100%] p-8" id="mega-menu">
+            <div className="bg-site-300 hidden transition-all w-[100%] p-2" id="mega-menu">
                 <hr className="bg-off-white mb-4" />
                 <div className="w-[100%] m-auto">
                     <div className="text-2xl">
                         {baritems.map((item) => (
-                            <li className="list-none p-2 p-4" key={item.link}>
+                            <li className="list-none p-4" key={item.link}>
                                 <Link href={item.link}>
                                     <span className="text-white" onClick={(e) => e.stopPropagation()}>{item.goto}</span>
                                 </Link>
                             </li>
                         ))}
                     </div>
                 </div>
-                <hr className="bg-off-white mb-4" />
+                <hr className="bg-off-white mb-2" />
             </div>
         </div>
     );

src/components/news/posts.jsx

@@ -4,7 +4,7 @@ import posts from '../../items/posts';
 function Posts() {
     return (
         <div className="w-full p-4 m-auto">
-            <div className="p-4 md:w-[65%] m-auto bg-indigo-950 rounded-lg">
+            <div className="p-4 md:w-[65%] m-auto bg-site-300 rounded-lg">
             {posts.map((post, index) => {
                 return (
                     <div key={index} className="p-4" id={post.date}>

src/styles/globals.css

@@ -5,6 +5,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
 body {
-  background-color: #13093c;
+  background-color: #19142d;
   font-family: "Ubuntu", sans-serif !important;
 }

tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
         "rhino-dark": "#13093c",
         "off-white": "#fefefe",
         "rhino-purple": "#8d7be4",
+        "site-300": "#231e37",
       },
       boxShadow: {
         'bxs': "0 0 10px #8d7be4",