Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndresLopezCorrales/Countries-WebPage/llms.txt

Use this file to discover all available pages before exploring further.

Country-Click uses Tailwind CSS 3.x with a custom color palette that gives the app its warm, earth-tone aesthetic. All colors are defined in tailwind.config.js and referenced throughout the PHP templates. Changing the theme requires updating the config, optionally adjusting any renamed tokens in src/input.css and the PHP files, and then rebuilding the compiled CSS.

​
Current color palette

TokenHexUsage
brown-super-hard#A45C40Dark brown: info icon fill, dark navbar background
brown-hard#C38370Medium brown: SVG country fill, field labels in info panel
brown-medium#E4B7A0Light brown: SVG hover fill, border colors
brown-low#F6EEE0Cream: page background, navbar background, input background
These tokens are registered in the extend.colors section of tailwind.config.js:
tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,php}"],
  theme: {
    extend: {
      colors: {
        'brown-super-hard': '#A45C40',
        'brown-hard': '#C38370',
        'brown-medium': '#E4B7A0',
        'brown-low': '#F6EEE0',
      },
    },
  },
  plugins: [],
}

​
Changing colors

1

Update hex values in tailwind.config.js

Open tailwind.config.js and update the hex values in the colors object. You can keep the existing token names and simply swap the hex codes, or rename tokens entirely and add new ones to the extend.colors block.
2

Update src/input.css if you renamed tokens

The .country class in src/input.css uses fill-brown-hard and hover:fill-brown-medium to style every clickable SVG country shape. If you renamed those color tokens, update the class names here to match:
src/input.css
.country {
    @apply fill-brown-hard hover:fill-brown-medium hover:scale-[1.003] transition-transform duration-300
}
3

Rebuild the compiled CSS

Run the Tailwind CLI build command from the project root to regenerate src/output.css with your new palette:
npx tailwindcss -i ./src/input.css -o ./src/output.css
4

Refresh the browser

Reload the page in your browser — the new colors apply immediately because index.php loads output.css directly. No server restart is required.

​
Where colors are used in templates

If you rename a color token, you will also need to update every class reference in src/index.php and src/controller/ApiConsumer.php. The table below maps each token to the elements it controls:
ClassFileRole
bg-brown-lowindex.phpPage body background, navbar background, search input background
bg-brown-super-hardindex.phpDark navbar (dark mode), popover background
border-brown-mediumindex.phpNavbar border, search button border on mobile
text-brown-lowindex.phpNavbar brand text (dark mode), search button text
text-brown-super-hardApiConsumer.phpInfo panel text, error messages
text-brown-hardApiConsumer.phpInfo panel field labels (Capital, Population, Languages, Timezone)
fill-brown-hardsrc/input.cssDefault SVG country fill (applied via .country class)
hover:fill-brown-mediumsrc/input.cssSVG country hover fill (applied via .country class)
Because Tailwind scans ./src/**/*.{html,js,php} at build time (as configured in the content array), any class you add or rename in those files will automatically be included in the next build — no manual purge configuration is needed.

​
Example: switching to a blue ocean theme

To replace the brown palette with a cool blue palette, update the colors block in tailwind.config.js:
tailwind.config.js
colors: {
  'brown-super-hard': '#1E3A5F',  // deep navy
  'brown-hard':       '#2E6DA4',  // ocean blue
  'brown-medium':     '#7BAFD4',  // light blue
  'brown-low':        '#EAF4FB',  // pale blue background
},
Because the token names are unchanged, src/input.css and the PHP templates require no edits — only a CSS rebuild is needed.
Use --watch mode during development so the CSS rebuilds automatically whenever you edit PHP templates or the config:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Build docs developers (and LLMs) love

Get started for freeTalk to us