docs: add a cool readme

Author: Phosphorus-M

src/components/cards/community_card.rs

@@ -18,7 +18,7 @@ pub fn CommunityCard(
         <a
             href=link
             target="_blank"
-            class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-200 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
+            class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-50 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
         >
             <div>
                 <img

src/components/hero.rs

@@ -25,7 +25,7 @@ pub fn Hero() -> impl IntoView {
                     <span class="font-work-sans text-4xl font-light text-center lg:text-left">
                         "Bienvenidos a"
                     </span>
-                    <span class="font-alfa-slab text-orange-500 text-6xl sm:text-7xl lg:text-8xl text-center lg:text-left">
+                    <span class="font-alfa-slab text-orange-500 dark:text-orange_(pantone)-500 text-6xl sm:text-7xl lg:text-8xl text-center lg:text-left">
                         "Rust Lang"
                     </span>
                     <span class="font-work-sans text-5xl font-semibold text-center lg:text-left">

src/components/other_communities.rs

@@ -5,7 +5,7 @@ use crate::{components::{CommunityCard, NextIcon}, extras::OTHER_COMUNITIES};
 #[component]
 pub fn OtherCommunities(#[prop(default = false)] show_more: bool) -> impl IntoView {
     view! {
-        <section class="bg-orange-200 py-20">
+        <section class="bg-orange-50 py-20">
             <div class="container mx-auto px-4">
                 <h2 class="text-3xl text-left mb-6">
                     <span class="font-work-sans font-light">"Otras "</span>

style/output.css

@@ -865,11 +865,21 @@ video {
   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
 }
 
+.bg-orange-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+}
+
 .bg-orange-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(124 45 18 / var(--tw-bg-opacity));
 }
 
+.bg-serenade-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 243 229 / var(--tw-bg-opacity));
+}
+
 .bg-slate-200\/20 {
   background-color: rgb(226 232 240 / 0.2);
 }
@@ -1734,4 +1744,21 @@ video {
   .\32xl\:grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-black_bean-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(46 20 15 / var(--tw-bg-opacity));
+  }
+
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-orange_\(pantone\)-500 {
+    --tw-text-opacity: 1;
+    color: rgb(249 104 23 / var(--tw-text-opacity));
+  }
 }

tailwind.config.js

@@ -18,6 +18,58 @@ module.exports = {
         "shape-fill-light": "rgb(203 213 225 / 1)",
         "shape-fill-dark": "rgb(39 39 42 / 1)",
       }),
+      colors: {
+        'serenade': {
+          '50': '#fff3e5',
+          '100': '#ffecd5',
+          '200': '#fed6aa',
+          '300': '#fdb874',
+          '400': '#fb8f3c',
+          '500': '#f96f16',
+          '600': '#ea540c',
+          '700': '#c23e0c',
+          '800': '#9a3212',
+          '900': '#7c2b12',
+          '950': '#431307',
+        },
+        'clementine': {
+          '50': 'oklch(98.47% 0.02 92.50)',
+          '100': 'oklch(95.64% 0.06 91.09)',
+          '200': 'oklch(91.38% 0.11 90.83)',
+          '300': 'oklch(86.40% 0.15 85.81)',
+          '400': 'oklch(81.85% 0.17 76.80)',
+          '500': 'oklch(75.16% 0.17 60.36)',
+          '600': 'oklch(65.36% 0.17 49.96)',
+          '700': 'oklch(54.45% 0.16 42.31)',
+          '800': 'oklch(46.51% 0.14 40.45)',
+          '900': 'oklch(40.62% 0.12 40.32)',
+          '950': 'oklch(27.29% 0.08 40.20)',
+        },
+        'black_bean': {
+          DEFAULT: '#2e140f', 
+          100: '#090403',
+          200: '#120806', 
+          300: '#1c0c09', 
+          400: '#25100c', 
+          500: '#2e140f', 
+          600: '#723225', 
+          700: '#b64f3b', 
+          800: '#d38777', 
+          900: '#e9c3bb'
+        }, 
+        'orange_(pantone)': { 
+          DEFAULT: '#f96817', 
+          100: '#351401',
+          200: '#692803',
+          300: '#9e3d04',
+          400: '#d35105',
+          500: '#f96817',
+          600: '#fa8744',
+          700: '#fba573',
+          800: '#fdc3a2',
+          900: '#fee1d0'
+        }
+      }
     },
   },
   plugins: [