CSS Framework

Utilities

• TailwindCss
• PostCSS

postcssrc.json

The configuration is telling PostCSS to transform CSS using the postcss-import, postcss-nesting (through Tailwind CSS), tailwindcss, and autoprefixer plugins.

Postcss nesting follows the official css nesting spec.

{
  "plugins": {
    "postcss-import": {},
    "tailwindcss/nesting": "postcss-nesting",
    "tailwindcss": {},
    "autoprefixer": {}
  }
}

tailwind.config.js

The tailwind.config.js file is a configuration file for Tailwind CSS, a utility-first CSS framework. This file is where lemone has configured various aspects of Tailwind's default configuration for het CCV.

const defaultTheme = require("tailwindcss/defaultTheme.js");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{liquid,webc,js,html,md,yml,yaml}"],
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      inherit: "inherit",
      white: "#ffffff",
      black: "#000000",
      blue: {
        100: "#e2f2fa",
        300: "#c4e5f4",
        500: "#009fe3",
        800: "#07074c",
      },
      red: {
        100: "#f9e7e7",
        500: "#c60f0f",
        700: "#9a0000",
      },
      grey: {
        100: "#e4e9e9",
        300: "#aab2b5",
        500: "#4a585b",
        900: "#000000",
      },
      validation: {
        error: "#c60f0f",
        "error-bg": "#fbeeee",
        success: "#1bb934",
      },
    },
    fontFamily: {
      sans: "Satoshi-Variable, sans-serif",
    },
    fontSize: {
      xs: "clamp(0.75rem, 0.6853rem + 0.2759vw, 0.875rem)", // 12–14px   | was 14–16px
      sm: "clamp(0.875rem, 0.8427rem + 0.1379vw, 0.9375rem)", // 14–15px   | was 16–18px
      base: "clamp(0.9375rem, 0.8728rem + 0.2759vw, 1.0625rem)", // 15–17px   | was 18–20px
      lg: "clamp(1.0625rem, 0.9655rem + 0.4138vw, 1.25rem)", // 17–20px   | was 20–24px
      xl: "clamp(1.25rem, 1.1207rem + 0.5517vw, 1.5rem)", // 20–24px   | was 24–28px
      "2xl": "clamp(1.5rem, 1.403rem + 0.4138vw, 1.6875rem)", // 24–27px   | was 28–32px
      "3xl": "clamp(1.8125rem, 1.4246rem + 1.6552vw, 2.5625rem)", // 29–41px   | was 34–48px
      "4xl": "clamp(2.4375rem, 1.9526rem + 2.069vw, 3.375rem)", // 39–54px   | was 46–64px
    },
    extend: {
      aspectRatio: {
        "card-highlight": "6 / 4.5",
        "card-article": "10 / 9",
        hero: "8 / 7",
      },
      boxShadow: {
        article: [
          "0 0px 4px rgba(7, 7, 76, 0.061)",
          "0 0px 13.4px rgba(7, 7, 76, 0.089)",
          "0 0px 60px rgba(7, 7, 76, 0.15)",
        ],
        "article-hover": ["0 0px 1.3px rgba(7, 7, 76, 0.075)", "0 0px 10px rgba(7, 7, 76, 0.15)"],
        highlight: [
          "0 2.7px 6.7px rgba(7, 7, 76, 0.04)",
          "0 8.9px 22.3px rgba(7, 7, 76, 0.06)",
          "0 40px 100px rgba(7, 7, 76, 0.1)",
        ],
        "highlight-hover": ["0 0px 1.3px rgba(7, 7, 76, 0.05)", "0 0px 10px rgba(7, 7, 76, 0.1)"],
      },
      gridTemplateColumns: {
        cards: "repeat(auto-fill, minmax(18.75rem, 1fr))", // adaptive between 1 card mobile - 3 cards desktop
      },
    },
  },
  plugins: [],
  safelist: [],
};