Seadistamine
Rahvusarhiivi disainisüsteemi on soovitatav kasutada stiiliraamistiku "Tailwind CSS" abil
1. Paigalda stiiliraamistik
Loe dokumentatsioonist, kuidas paigaldada stiiliraamistik "Tailwind CSS".
2. Kopeeri rahvusarhiivi stiilierisused
Kopeeri alljärgnev kood oma projekti failina rahvusarhiiv.presets.js:
/**
* Rahvusarhiiv custom presets
* @version 1.1.1
*
* Beginning with version 1.1.0, we now support an extended 'xxl' max-width of 90rem.
* Additionally, the green color values for codes 50, 200, 300, and 400 have been
* updated to match the specifications in Figma.
*/
module.exports = {
theme: {
screens: {
xs: "320px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
colors: {
inherit: "inherit",
current: "currentColor",
transparent: "transparent",
black: "#000",
white: "#fff",
gray: {
50: "#F0F3F6",
100: "#E8EBF0",
200: "#D3D8DF",
300: "#979FAB",
400: "#798492",
500: "#6C7683",
600: "#5F6874",
700: "#4E5863",
800: "#3E4651",
900: "#242A30",
},
red: {
50: "#FEECEB",
100: "#FDD9D7",
200: "#FBB4AF",
300: "#F88E86",
400: "#F6695E",
500: "#F44336",
600: "#C3362B",
700: "#922820",
800: "#621B16",
900: "#310D0B",
},
yellow: {
50: "#FDF6EA",
100: "#FCEDD5",
200: "#F8DBAB",
300: "#F5C882",
400: "#F1B658",
500: "#EEA42E",
600: "#BE8325",
700: "#8F621C",
800: "#5F4212",
900: "#302109",
},
green: {
50: "#E9F7EE",
100: "#C4ECD1",
200: "#A5D7B6",
300: "#83C79A",
400: "#61B77E",
500: "#3FA864",
600: "#30834D",
700: "#205D36",
800: "#0F391F",
900: "#001505",
},
blue: {
50: "#E6F1FB",
100: "#CCE3F7",
200: "#9AC8EF",
300: "#67ACE8",
400: "#3591E0",
500: "#0275D8",
600: "#025EAD",
700: "#014682",
800: "#012F56",
900: "#00172B",
},
},
spacing: {
px: "1px",
0: "0px",
0.5: "0.125rem",
1: "0.25rem",
1.5: "0.375rem",
2: "0.5rem",
2.5: "0.625rem",
3: "0.75rem",
3.5: "0.875rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
9: "2.25rem",
10: "2.5rem",
11: "2.75rem",
12: "3rem",
14: "3.5rem",
16: "4rem",
20: "5rem",
24: "6rem",
28: "7rem",
32: "8rem",
36: "9rem",
40: "10rem",
44: "11rem",
48: "12rem",
52: "13rem",
56: "14rem",
60: "15rem",
64: "16rem",
72: "18rem",
80: "20rem",
96: "24rem",
},
borderRadius: {
none: "0px",
sm: "0.25rem",
DEFAULT: "0.5rem",
full: "9999px",
},
boxShadow: {
sm: "0px 10px 80px rgba(0, 0, 0, 0.02275), 0px 5.0625px 34.875px rgba(0, 0, 0, 0.035), 0px 2px 13px rgba(0, 0, 0, 0.04725), 0px 0.4375px 4.625px rgba(0, 0, 0, 0.07)",
md: "0px 33px 80px rgba(0, 0, 0, 0.02275), 0px 16.7062px 34.875px rgba(0, 0, 0, 0.035), 0px 6.6px 13px rgba(0, 0, 0, 0.04725), 0px 1.44375px 4.625px rgba(0, 0, 0, 0.07)",
DEFAULT:
"0px 43px 80px rgba(0, 0, 0, 0.02275), 0px 21.7687px 34.875px rgba(0, 0, 0, 0.035), 0px 8.6px 13px rgba(0, 0, 0, 0.04725), 0px 1.88125px 4.625px rgba(0, 0, 0, 0.07)",
lg: "0px 65px 80px rgba(0, 0, 0, 0.02275), 0px 32.9062px 34.875px rgba(0, 0, 0, 0.035), 0px 13px 13px rgba(0, 0, 0, 0.04725), 0px 2.84375px 4.625px rgba(0, 0, 0, 0.07)",
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
},
fontFamily: {
heading: [
"Raleway",
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
body: [
"Roboto",
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
mono: [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
"monospace",
],
},
fontSize: {
xs: ["0.6875rem", { lineHeight: "120%" }],
sm: ["0.8125rem", { lineHeight: "120%" }],
base: ["1rem", { lineHeight: "120%" }],
lg: ["1.1875rem", { lineHeight: "120%" }],
xl: ["1.4375rem", { lineHeight: "120%" }],
"2xl": ["1.75rem", { lineHeight: "120%" }],
"3xl": ["2.0625rem", { lineHeight: "120%" }],
"4xl": ["2.5rem", { lineHeight: "120%" }],
"5xl": ["3rem", { lineHeight: "120%" }],
},
extend: {
maxWidth: {
'xxl': '90rem !important'
},
backgroundImage: {
"theme-ais": "linear-gradient(96.04deg, rgba(247, 227, 204, 0.65) -17.14%, #ECDDF4 94.45%)",
"theme-vau": "linear-gradient(95.19deg, #CCEAD6 0.8%, #ECDDF4 158.87%)"
},
typography: ({ theme }) => ({
DEFAULT: {
css: {
h1: {
fontFamily: "Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
},
h2: {
fontFamily:"Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
},
h3: {
fontFamily: "Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
},
h4: {
fontFamily: "Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
},
h5: {
fontFamily: "Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
},
h6: {
fontFamily: "Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
},
},
},
gray: {
css: {
"--tw-prose-body": theme("colors.gray.900"),
"--tw-prose-headings": theme("colors.gray.900"),
"--tw-prose-lead": theme("colors.gray.900"),
"--tw-prose-links": theme("colors.info.DEFAULT"),
"--tw-prose-bold": theme("colors.gray.900"),
"--tw-prose-counters": theme("colors.gray.900"),
"--tw-prose-bullets": theme("colors.gray.500"),
"--tw-prose-hr": theme("colors.gray.200"),
"--tw-prose-quotes": theme("colors.gray.900"),
"--tw-prose-quote-borders": theme("colors.gray.200"),
"--tw-prose-captions": theme("colors.gray.900"),
"--tw-prose-code": theme("colors.gray.900"),
"--tw-prose-pre-code": theme("colors.gray.900"),
"--tw-prose-pre-bg": theme("colors.white"),
"--tw-prose-th-borders": theme("colors.gray.200"),
"--tw-prose-td-borders": theme("colors.gray.200"),
"--tw-prose-invert-body": theme("colors.white"),
"--tw-prose-invert-headings": theme("colors.white"),
"--tw-prose-invert-lead": theme("colors.white"),
"--tw-prose-invert-links": theme("colors.white"),
"--tw-prose-invert-bold": theme("colors.white"),
"--tw-prose-invert-counters": theme("colors.white"),
"--tw-prose-invert-bullets": theme("colors.white"),
"--tw-prose-invert-hr": theme("colors.white"),
"--tw-prose-invert-quotes": theme("colors.white"),
"--tw-prose-invert-quote-borders": theme("colors.white"),
"--tw-prose-invert-captions": theme("colors.white"),
"--tw-prose-invert-code": theme("colors.black"),
"--tw-prose-invert-pre-code": theme("colors.white"),
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": theme("colors.white"),
"--tw-prose-invert-td-borders": theme("colors.white"),
},
},
}),
},
},
};
3. Seadista rahvusarhiivi stiilierisused
Lisa faili tailwind.config.js viide failile rahvusarhiiv.presets.js:
module.exports = {
presets: [
require('./rahvusarhiiv.presets.js')
],
...
}
Rahvusarhiivi stiilierisused muudavad ainult väikest osa üldisest stiiliraamistikust. Suurem osa raamistikust toimib ka pärast erisuste paigaldamist edasi nii, nagu on kirjeldatud dokumentatsioonis.
4. Seadista rahvusarhiivi baas-stiil ja kirjatüübid
Laadi alla kirjatüüpide failid ja kopeeri need oma projekti fonts kausta. Lisa rakenduse CSS faili järgmised read:
@tailwind base;
body {
color: theme("colors.gray.900");
font-family: theme("fontFamily.body");
}
@layer base {
@font-face {
font-family: 'Raleway';
font-weight: 400;
font-display: swap;
font-style: normal;
src: url('./fonts/Raleway-VariableFont_wght.ttf') format('truetype');
}
@font-face {
font-family: 'Raleway';
font-weight: 400;
font-display: swap;
font-style: italic;
src: url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-weight: 400;
font-display: swap;
font-style: normal;
src: url('./fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-weight: 500;
font-display: swap;
font-style: normal;
src: url('./fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-weight: 700;
font-display: swap;
font-style: normal;
src: url('./fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-weight: 400;
font-display: swap;
font-style: italic;
src: url('./fonts/Roboto-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-weight: 700;
font-display: swap;
font-style: italic;
src: url('./fonts/Roboto-BoldItalic.ttf') format('truetype');
}
}
@tailwind components;
@tailwind utilities;
Prototüübis võib kirjatüübid Google API kaudu linkida:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap" rel="stylesheet">5. Seadista pistikud
Käivita konsoolis:
npm install @tailwindcss/typography
npm install @tailwindcss/formsLisa faili tailwind.config.js:
module.exports = {
plugins: [
require('@tailwindcss/typography'),
require("@tailwindcss/forms"),
],
...
}