Skip to content

Standardize colors and shades used across the site #91

@builderpepc

Description

@builderpepc

See:

  • #70 Implement FOI Guide Page #80 (comment)
  • const styles = {
    // Container Borders
    containerBorderless: `border-0 md:border-[4px] shadow-none md:shadow-md`,
    containerBorder: `border-[4px] shadow-md`,
    // General Newletter
    generalTitle: `inline-block min-h-[39px] font-bold text-[20px] leading-[100%] tracking-[0%] font-[Poppins]`,
    generalContainer: `bg-white border-nefacblue rounded-[10px] p-4 pt-6 flex justify-between`,
    generalButton: `w-fit bg-nefacblue text-white px-5 py-2 mx-4 my-4 rounded-[10px] hover:bg-[rgba(37,73,127,1)] transition-colors text-center text-m font-semibold text-[14px] no-underline font-inter`,
    // State Newsletter
    statesTitle: `font-bold text-[#2F5C9F] text-[36px] leading-[100%] tracking-[0%] font-[Roboto] md:whitespace-pre-line`,
    statesButton: `bg-nefacblue text-[16px] text-white px-5 py-2 rounded-[10px] hover:bg-[rgba(37,73,127,1)] transition-colors text-center md:text-[24px] font-semibold no-underline self-center w-[220px]] text-nowrap`,
    // Generic Description
    descriptionContainer:
    "font-thin text-[14px] leading-[150%] tracking-[0%] font-[Poppins] mt-2 whitespace-pre-line block",
    };
  • <div className="flex gap-3 mb-6">
    <a
    href="/about"
    className="inline-block px-6 py-3 border-4 border-[#2F5C9F] text-[#2F5C9F] rounded-xl font-roboto font-medium hover:bg-gray-50 transition-colors"
    >
    Learn More
    </a>
    <a
    href="/sustaining-memberships"
    className="inline-block px-6 py-4 bg-[#2F5C9F] text-white rounded-xl font-roboto font-medium hover:bg-[#254a80] transition-colors"
    >
    Donate
    </a>
    </div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions