source-code/
portofolio-neo-gruv
Public
codeCodeinfoIssues 0call_splitPull Requestsplay_circleActions
portofolio-neo-gruv/tailwind.config.js
javascript115 lines4 KB
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  safelist: [
    'hover:text-theme-red',
    'hover:border-theme-red',
    'hover:text-theme-blue',
    'hover:border-theme-blue',
    'hover:text-theme-green',
    'hover:border-theme-green',
    'hover:text-theme-yellow',
    'hover:border-theme-yellow',
  ],
  theme: {
    extend: {
      colors: {
        "on-secondary-container": "#fffbff",
        "surface-variant": "#e9e1de",
        "on-primary-fixed": "#002021",
        "tertiary": "#5e6000",
        "on-background": "#1e1b19",
        "on-tertiary-fixed": "#1c1d00",
        "on-primary": "#ffffff",
        "inverse-primary": "#92d1d4",
        "outline-variant": "#bfc8c8",
        "surface-bright": "#fff8f5",
        "secondary-fixed": "#ffdad5",
        "on-tertiary": "#ffffff",
        "on-primary-fixed-variant": "#004f52",
        "surface-container-highest": "#e9e1de",
        "primary-fixed-dim": "#92d1d4",
        "outline": "#6f7979",
        "tertiary-container": "#777900",
        "on-primary-container": "#f3ffff",
        "tertiary-fixed": "#e7ea54",
        "background": "#fff8f5",
        "inverse-on-surface": "#f7efec",
        "inverse-surface": "#33302e",
        "surface-dim": "#e0d8d5",
        "primary-container": "#3e7e81",
        "on-surface-variant": "#3f4849",
        "surface-tint": "#24686b",
        "primary-fixed": "#adeef1",
        "on-error": "#ffffff",
        "primary": "#216568",
        "surface-container-low": "#faf2ef",
        "surface-container-lowest": "#ffffff",
        "secondary-fixed-dim": "#ffb4a9",
        "error-container": "#ffdad6",
        "error": "#ba1a1a",
        "on-tertiary-fixed-variant": "#484a00",
        "surface": "#fff8f5",
        "on-secondary-fixed": "#410001",
        "surface-container": "#f4ece9",
        "secondary-container": "#d9362b",
        "secondary": "#b51a16",
        "on-tertiary-container": "#fffbff",
        "on-surface": "#1e1b19",
        "tertiary-fixed-dim": "#cacd39",
        "on-secondary": "#ffffff",
        "on-error-container": "#93000a",
        "surface-container-high": "#efe7e3",
        "on-secondary-fixed-variant": "#930005",
        
        "theme-blue": "#458588",
        "theme-red": "#9d0006",
        "theme-green": "#b8bb26",
        "theme-yellow": "#d79921",
        "theme-grey": "#ebdbb2"
      },
      borderRadius: {
        "DEFAULT": "0.25rem",
        "lg": "0.5rem",
        "xl": "0.75rem",
        "full": "9999px"
      },
      spacing: {
        "margin": "32px",
        "shadow-offset": "6px",
        "border-width": "3px",
        "unit": "8px",
        "gutter": "24px",
        "container-max": "1280px",
        "border-width-heavy": "6px",
        "border-width-std": "4px"
      },
      fontFamily: {
        "body-md": ["Hanken Grotesk"],
        "label-md": ["JetBrains Mono"],
        "headline-md": ["Space Grotesk"],
        "body-lg": ["Hanken Grotesk"],
        "headline-lg-mobile": ["Space Grotesk"],
        "button": ["Space Grotesk"],
        "headline-lg": ["Space Grotesk"],
        "display-2xl": ["Space Grotesk"],
        "label-bold": ["JetBrains Mono"]
      },
      fontSize: {
        "body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
        "label-md": ["14px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "500" }],
        "headline-md": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }],
        "body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
        "headline-lg-mobile": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
        "button": ["16px", { "lineHeight": "1", "fontWeight": "700" }],
        "headline-lg": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
        "display-2xl": ["120px", { "lineHeight": "110px", "letterSpacing": "-0.04em", "fontWeight": "800" }],
        "label-bold": ["14px", { "lineHeight": "16px", "letterSpacing": "0.1em", "fontWeight": "700" }]
      }
    },
  },
  plugins: [],
}

About

Custom portfolio frontend designed using retro Neo-Brutalist styling. Features server-rendered pages, persistent codebase layout, interactive file explorer tree, and Shiki code syntax highlighting.

TypeScriptNext.jsReact 19Tailwind CSSShiki

Contributors

1