Merge pull request #24 from theShinigami/color-name-change

tailwind custom color name change

Author: mtrythall

src/_includes/date-card.html

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap items-center gap-4">
   <time class="flex flex-col min-w-28">
-    <span class="px-3 py-1 text-xl font-semibold text-center text-white bg-brick-red rounded-t-md">{{ month }}</span>
+    <span class="px-3 py-1 text-xl font-semibold text-center text-white bg-red rounded-t-md">{{ month }}</span>
     <span class="px-3 py-2 text-2xl text-center text-black bg-white border-2 border-t-0 border-gray-300 rounded-b-md">{{ days }}</span>
   </time>
   <h3 class="flex-1 text-xl font-semibold lg:text-2xl">{{ heading }}</h3>

src/_includes/nav.html

@@ -6,7 +6,7 @@
       <a href="/about" data-menu-trigger>About</a>
       <ul
         data-menu-list
-        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-ice-cream-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
+        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
         <li><a href="/about/" role="menuitem">About DjangoCon US</a></li>
         <li><a href="/tickets/" role="menuitem">Tickets</a></li>
         <li><a href="/faq/" role="menuitem">FAQ</a></li>
@@ -23,7 +23,7 @@
       <a href="/speaking/" data-menu-trigger>Speaking</a>
       <ul
         data-menu-list
-        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-ice-cream-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[26ch] lg:p-6 rounded font-medium">
+        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[26ch] lg:p-6 rounded font-medium">
         <li><a href="/speaking/">Speaking at DjangoCon US</a></li>
         <li><a href="/speaking/speaker-resources/">Speaker Resources</a></li>
       </ul>
@@ -32,7 +32,7 @@
       <a href="/sponsors/" data-menu-trigger>Sponsors</a>
       <ul
         data-menu-list
-        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-ice-cream-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
+        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
         <li><a href="/sponsors/">Our Sponsors</a></li>
         <li><a href="/sponsors/information/">Sponsorship Prospectus</a></li>
       </ul>

src/_includes/organizers-grid.html

@@ -60,7 +60,7 @@ <h2 class="mb-2 text-xl font-heading lg:text-2xl">{{ organizer.data.name }}</h2>
                   href="{{ organizer.data.social.website }}"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="hover:text-central-park-green"
+                  class="hover:text-green"
                   aria-label="Website">
                   <svg class="icon">
                     <use xlink:href="#web-icon"></use>

src/_layouts/session-details.html

@@ -110,7 +110,7 @@ <h3 class="text-xl font-semibold leading-4 lg:text-3xl">{{ presenter.data.name }
                           href="{{ presenter.data.social.website }}"
                           target="_blank"
                           rel="noopener noreferrer"
-                          class="hover:text-central-park-green"
+                          class="hover:text-green"
                           aria-label="Website">
                           <svg class="icon">
                             <use xlink:href="#web-icon"></use>

src/about/conduct.html

@@ -36,7 +36,7 @@ <h1 class="mb-8 pageheading">{{ title }}</h1>
         <p>Thank you for helping make this a welcoming, friendly event for all.</p>
       </section>
 
-      <section class="self-start p-8 prose bg-white border-4 rounded border-central-park-green lg:prose-lg">
+      <section class="self-start p-8 prose bg-white border-4 rounded border-green lg:prose-lg">
         <h2 class="mb-8 text-lg font-bold font-heading lg:text-2xl">Need help?</h2>
         <div class="space-y-6 lead">
           <p>If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact the conference Code of Conduct committee at <a href="mailto:{{ site.conduct_email }}" class="link">{{ site.conduct_email }}</a>{% comment %} or <a href="tel:201-899-4189" class="link">201-899-4189</a>{% endcomment %}.</p>

src/about/public-health.html

@@ -46,7 +46,7 @@ <h2 id="public-health-policy">Public Health Policy</h2>
         <p>DjangoCon US reserves the right to increase the requirements of this policy based on COVID-19 infection, hospitalization or positive test rates as reported by the CDC. We may also be required to alter our policy to conform with local, state, or federal mandates.</p>
       </div>
 
-      <section class="self-start p-8 prose bg-white border-4 rounded border-central-park-green lg:prose-lg">
+      <section class="self-start p-8 prose bg-white border-4 rounded border-green lg:prose-lg">
         <h2 id="public-health-policy-tldr">TLDR: A short-version of the policy is as follows:</h2>
         <ul>
           <li>Negative test required to enter conference</li>

src/about/tickets.html

@@ -48,7 +48,7 @@ <h2 class="mb-8 text-xl font-medium font-heading lg:text-3xl">Which ticket shoul
           target="_blank">Buy Tickets Now</a>
       </section>
 
-      <section class="self-start p-8 prose bg-white border-4 rounded border-central-park-green lg:prose-lg">
+      <section class="self-start p-8 prose bg-white border-4 rounded border-green lg:prose-lg">
         <h3 class="mb-8 text-lg font-bold font-heading lg:text-2xl">Don't Forget!</h3>
         <ul class="px-4 space-y-4 list-disc lg:text-xl">
           <li>Early bird tickets are on sale through May 31st or until they're gone.</li>
@@ -163,7 +163,7 @@ <h2 class="mb-8 text-2xl font-bold font-heading lg:text-4xl">What is the refund
       </section>
 
       <div>
-        <section class="p-8 prose bg-white border-4 rounded border-central-park-green lg:prose-lg">
+        <section class="p-8 prose bg-white border-4 rounded border-green lg:prose-lg">
           <p>PLEASE do not come in person if you feel at all sick of any kind. Even if the conference has already begun, we can help get you connected virtually.</p>
 
           <p>In-person tickets can be converted to online tickets at ANY TIME. For that refund amount, we will take the cost of your ticket, subtract the value of the online equivalent, and then apply the same discount percentage above.</p>

src/assets/css/components/_buttons.css

@@ -9,7 +9,7 @@
   @apply border-b-4 border-r-4;
 
 
-  background: linear-gradient(to bottom, transparent 50%, theme('colors.carolina-yellow') 50%);
+  background: linear-gradient(to bottom, transparent 50%, theme('colors.yellow') 50%);
   background-size: 100% 200%;
   background-position: top;
   transition: all .125s ease-out;

src/assets/css/main.css

@@ -108,7 +108,7 @@
     content: '';
 
     opacity: 0.4;
-    background: linear-gradient(126deg, theme('colors.mosaic-blue') 11.2%, theme('colors.lucky-orange') 69.95%, theme('colors.brick-red') 90.34%);
+    background: linear-gradient(126deg, theme('colors.mosaic-blue') 11.2%, theme('colors.orange') 69.95%, theme('colors.red') 90.34%);
   }
 
   .photo-effect img {
@@ -190,7 +190,7 @@
 
   [data-menu-trigger]::after {
     @apply block w-5 h-5;
-    @apply bg-ice-cream-purple;
+    @apply bg-purple;
 
     mask: url('/assets/img/theme/icons/Triangle.svg');
     mask-size: cover;

src/schedule.html

@@ -36,7 +36,7 @@ <h2 class="mb-1 font-bold uppercase sr-only">Jump to day</h2>
         <li>
           <a href="#Day-{{ forloop.index }}" class="group">
             <time class="flex flex-col">
-              <span class="px-3 min-w-[8ch] text-lg font-semibold text-center text-white bg-brick-red rounded-t-md border-2 border-brick-red group-hover:border-black group-hover:border-b-brick-red">{{ day[0] | utcDate | date: "%a" }}</span>
+              <span class="px-3 min-w-[8ch] text-lg font-semibold text-center text-white bg-red rounded-t-md border-2 border-red group-hover:border-black group-hover:border-b-red">{{ day[0] | utcDate | date: "%a" }}</span>
               <span class="px-3 py-1 text-center text-black bg-white border-2 border-t-0 border-gray-300 rounded-b-md group-hover:border-black">{{ day[0] | utcDate | date: "%b %-d" }}</span>
             </time>
           </a>
@@ -75,9 +75,9 @@ <h3 class="w-full font-medium text-gray-500 lg:text-lg lg:py-6 lg:sticky lg:top-
                   {% for session in slot.sessions %}
                     {% assign color_class = "border-t-mosaic-blue" %}
                     {% if forloop.index == 1 %}
-                      {% assign color_class = "border-t-central-park-green" %}
+                      {% assign color_class = "border-t-green" %}
                     {% elsif forloop.index == 2 %}
-                      {% assign color_class = "border-t-ice-cream-purple" %}
+                      {% assign color_class = "border-t-purple" %}
                     {% endif %}
                     {% include "session-card.html" with color=color_class %}
                   {% endfor %}

src/sponsors/information.html

@@ -42,7 +42,7 @@ <h2 id="our-goal-is-to-keep-ticket-costs-low-while-providing">Our goal is to kee
 
         <p>Because the conference is organized by <a href="https://www.defna.org/">DEFNA</a>, a non-profit 501(c)(3) organization, your sponsorship is tax-deductible!</p>
       </div>
-      <aside class="flex flex-wrap items-center self-start gap-8 p-8 bg-white border-4 rounded border-central-park-green">
+      <aside class="flex flex-wrap items-center self-start gap-8 p-8 bg-white border-4 rounded border-green">
         <h2 class="flex-1 text-lg font-bold font-heading lg:text-2xl">Want to know more about sponsorship?</h2>
         <p><a href="mailto:sponsors@djangocon.us" class="button">Contact Us Today</a></p>
       </aside>

src/visa-invitation.html

@@ -63,10 +63,10 @@ <h1 class="mb-6 text-center pageheading">{{ title }}</h1>
 
     <div>
       <div id="loader" hidden></div>
-      <p id="inProgressMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-central-park-green">
+      <p id="inProgressMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-green">
         Thank you for your interest in DjangoCon US 2024! We're generating your invitation letter.
       </p>
-      <p id="readyMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-central-park-green">Your invitation letter has been sent to the DjangoCon US organizers for review. Once they approve it, they will email it to you. Thanks for your interest!</p>
+      <p id="readyMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-green">Your invitation letter has been sent to the DjangoCon US organizers for review. Once they approve it, they will email it to you. Thanks for your interest!</p>
     </div>
   </div>
 </div>

tailwind.config.js

@@ -10,13 +10,13 @@ module.exports = {
         sans: ['Poppins', 'sans-serif'],
       },
       colors: {
-        'brick-red': '#DB433B',
-        'lucky-orange': '#F39745',
+        'red': '#DB433B',
+        'orange': '#F39745',
         'bull-blue': '#3D9CFB',
         'mosaic-blue': '#5FBFFA',
-        'ice-cream-purple': '#B989C9',
-        'central-park-green': '#64A03D',
-        'carolina-yellow': '#E7BB43',
+        'purple': '#B989C9',
+        'green': '#64A03D',
+        'yellow': '#E7BB43',
 
         'social-facebook': '#0866ff',
         'social-linkedin': '#2d64bc',