ship.css
Added a main stylesheet, @/assets/css/ship.css:
/*--------@/assets/css/ship.css-----------------------------------------------*/
/******************************************************************************/
/*
/* Main CSS
/*
/******************************************************************************/
@import "tailwindcss";
@import "@nuxt/ui";
@import "./typography.css";
@import "./palette.css";
/*--------@/assets/css/ship.css-----------------------------------------------*/
Added typography.css and palette.css.
palette.css
/*--------@/app/assets/css/palette.css----------------------------------------->
/******************************************************************************/
/*
/* Palette
/*
/* - Variables
/* - Containers
/* - Typography
/*
/******************************************************************************/
/******************************************************************************/
/* Variables
/******************************************************************************/
:root {
/* Palette */
--ui-primary: var(--ui-color-primary-800);
--ui-secondary: var(--ui-color-secondary-500);
--ui-success: var(--ui-color-success-500);
--ui-info: var(--ui-color-info-500);
--ui-warning: var(--ui-color-warning-500);
--ui-error: var(--ui-color-error-500);
/* Containers */
--ui-bg: var(--color-white);
/* Typography */
/* Least prominent text */
--ui-text-dimmed: var(--ui-color-neutral-400);
/* Slightly muted text */
--ui-text-muted: var(--ui-color-neutral-500);
/* Moderately prominent text */
--ui-text-toned: var(--ui-color-neutral-600);
/* Default text color */
--ui-text: var(--ui-color-neutral-900);
/* Most prominent text */
--ui-text-highlighted: var(--ui-color-neutral-950);
}
.dark {
/* Palette */
--ui-primary: var(--ui-color-primary-600);
--ui-secondary: var(--ui-color-secondary-400);
--ui-success: var(--ui-color-success-400);
--ui-info: var(--ui-color-info-400);
--ui-warning: var(--ui-color-warning-400);
--ui-error: var(--ui-color-error-400);
/* Containers */
--ui-bg: var(--color-black);
/* Typography */
/* Least prominent text */
--ui-text-dimmed: var(--ui-color-neutral-500);
/* Slightly muted text */
--ui-text-muted: var(--ui-color-neutral-400);
/* Moderately prominent text */
--ui-text-toned: var(--ui-color-neutral-300);
/* Default text color */
--ui-text: var(--ui-color-neutral-200);
/* Most prominent text */
--ui-text-highlighted: var(--color-white);
}
/******************************************************************************/
/* Containers
/******************************************************************************/
body {
@apply antialiased text-(--ui-text) bg-(--ui-bg);
}
/*--------@/app/assets/css/palette.css----------------------------------------->
typography.css
/*--------@/app/assets/css/typography.css-------------------------------------->
/******************************************************************************/
/*
/* Typography
/*
/******************************************************************************/
@font-face {
font-family: 'Bebas Neue';
src: url('/fonts/BebasNeue-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@theme {
--font-sans: 'Inter-VariableFont_opsz', sans-serif;
}
/******************************************************************************/
/* Bow
/******************************************************************************/
.stga-mainmenu { @apply text-2xl font-extrabold;
font-family: 'Bebas Neue', sans-serif;
}
/******************************************************************************/
/* Transom
/******************************************************************************/
/*--------@/app/assets/css/typography.css-------------------------------------->