From dbce8614aa97be91c7f29be404794db97e11298e Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Wed, 5 Apr 2023 15:31:59 +0200 Subject: [PATCH] chore(tailwind): remove comments --- tailwind.config.cjs | 112 ++++++++++++++++++++++---------------------- 1 file changed, 55 insertions(+), 57 deletions(-) diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 0579bd0..74b9808 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -5,18 +5,18 @@ module.exports = { theme: { extend: { screens: { - xs: '320px', // --phone - md: '768px', // --tablet - xl: '1280px', // --desktop (prev. 1200) - '3xl': '1800px', // --wide + xs: '320px', + md: '768px', + xl: '1280px', + '3xl': '1800px', }, colors: { accent: '#e60510', shibui: { 50: '#f3f3f1', - 100: '#e6e6e3', // bg (light), fg (dark, 0.87 alpha) + 100: '#e6e6e3', 150: '#dad9d5', - 200: '#cdccc7', // bg dark (light) + 200: '#cdccc7', 250: '#c0bfb9', 300: '#b3b2ab', 350: '#a7a59e', @@ -30,14 +30,14 @@ module.exports = { 750: '#413e3a', 800: '#34322e', 850: '#272522', - 900: '#1b1917', // bg (dark) - 950: '#0e0d0c', // fg (light), bg dark (dark) + 900: '#1b1917', + 950: '#0e0d0c', }, }, gridTemplateColumns: { - 10: 'repeat(10, minmax(0, 1fr))', // --grid-narrow - 14: 'repeat(14, minmax(0, 1fr))', // --grid-wide - 18: 'repeat(18, minmax(0, 1fr))', // --grid-fullsize + 10: 'repeat(10, minmax(0, 1fr))', + 14: 'repeat(14, minmax(0, 1fr))', + 18: 'repeat(18, minmax(0, 1fr))', }, gridTemplateRows: ({ theme }) => ({ layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`, @@ -73,69 +73,67 @@ module.exports = { 18: '18', }, borderRadius: { - 1: '2px', // --radius-1 - 2: '5px', // --radius-2 - 4: '8px', // --radius-4 - 25: '25px', // --radius-25 - 50: '50%', // --radius-50 + 1: '2px', + 2: '5px', + 4: '8px', + 25: '25px', + 50: '50%', }, borderWidth: { - 1: '1px', // --border-width-1, (DEFAULT) + 1: '1px', 2: '2px', - 10: '0.1em', // --border-width-10 - 15: '0.15em', // --border-width-15 + 10: '0.1em', + 15: '0.15em', }, spacing: { - 1: '0.335rem', // --space-1 (spacing-1.5) - 2: 'clamp(0.335rem, 0.72vw, 0.402rem)', // --space-2 - 3: 'clamp(0.402rem, 0.86vw, 0.482rem)', // --space-3 - 4: 'clamp(0.482rem, 1.03vw, 0.579rem)', // --space-4 - 5: 'clamp(0.579rem, 1.24vw, 0.694rem)', // --space-5 - 6: 'clamp(0.694rem, 1.49vw, 0.833rem)', // --space-6 - 7: 'clamp(0.833rem, 1.78vw, 1rem)', // --space-7 - 8: 'clamp(1rem, 2.14vw, 1.2rem)', // --space-8 - 9: 'clamp(1.2rem, 2.57vw, 1.44rem)', // --space-9 - 10: 'clamp(1.44rem, 3.7vw, 1.728rem)', // --space-10 - 11: 'clamp(1.728rem, 3.7vw, 2.074rem)', // --space-11 - 12: 'clamp(2.074rem, 4.44vw, 2.488rem)', // --space-12 - 13: 'clamp(2.488rem, 5.32vw, 2.986rem)', // --space-13 - 14: 'clamp(2.986rem, 6.39vw, 3.583rem)', // --space-14 - 15: 'clamp(3.583rem, 7.67vw, 4.3rem)', // --space-15 - 16: 'clamp(4.3rem, 9.2vw, 5.16rem)', // --space-16 - 17: 'clamp(5.16rem, 11.04vw, 6.192rem)', // --space-17 - 18: 'clamp(6.192rem, 13.25vw, 7.43rem)', // --space-18 - 19: 'clamp(7.43rem, 15.9vw, 8.916rem)', // --space-19 - 20: 'clamp(8.916rem, 19.08vw, 10.699rem)', // --space-20 - column: '5.55vw', // --space-55 TODO: new name, e.g. spacing-grid + 1: '0.335rem', + 2: 'clamp(0.335rem, 0.72vw, 0.402rem)', + 3: 'clamp(0.402rem, 0.86vw, 0.482rem)', + 4: 'clamp(0.482rem, 1.03vw, 0.579rem)', + 5: 'clamp(0.579rem, 1.24vw, 0.694rem)', + 6: 'clamp(0.694rem, 1.49vw, 0.833rem)', + 7: 'clamp(0.833rem, 1.78vw, 1rem)', + 8: 'clamp(1rem, 2.14vw, 1.2rem)', + 9: 'clamp(1.2rem, 2.57vw, 1.44rem)', + 10: 'clamp(1.44rem, 3.7vw, 1.728rem)', + 11: 'clamp(1.728rem, 3.7vw, 2.074rem)', + 12: 'clamp(2.074rem, 4.44vw, 2.488rem)', + 13: 'clamp(2.488rem, 5.32vw, 2.986rem)', + 14: 'clamp(2.986rem, 6.39vw, 3.583rem)', + 15: 'clamp(3.583rem, 7.67vw, 4.3rem)', + 16: 'clamp(4.3rem, 9.2vw, 5.16rem)', + 17: 'clamp(5.16rem, 11.04vw, 6.192rem)', + 18: 'clamp(6.192rem, 13.25vw, 7.43rem)', + 19: 'clamp(7.43rem, 15.9vw, 8.916rem)', + 20: 'clamp(8.916rem, 19.08vw, 10.699rem)', + column: '5.55vw', layout: 'clamp(1.5rem, 5.55vw, 4.5rem)', icon: '24px', 'icon-small': '20px', clickarea: '40px', }, fontFamily: { - sans: ['SecuelaVariable', 'Arial', 'sans-serif'], // --font-family-base - mono: ['Fira Code', 'Operator', 'Hasklig', 'Monoid', 'monospace'], // --font-family-mono + sans: ['SecuelaVariable', 'Arial', 'sans-serif'], + mono: ['Fira Code', 'Operator', 'Hasklig', 'Monoid', 'monospace'], }, - // TODO: Switch to Tshirt sizes fontSize: { - 1: ['0.65em', { lineHeight: '' }], // --font-size-1 (0) - 2: ['clamp(0.65rem, 0.8vw, 0.75rem)', { lineHeight: '1.625' }], // --font-size-2 (2) - 3: ['clamp(1rem, 1.1vw, 1.25rem)', { lineHeight: '1.625' }], // --font-size-3 (15) - 4: ['clamp(1.25rem, 1.8vw, 2rem)', { lineHeight: '1' }], // --font-size-4 (5) - 5: ['clamp(1.5rem, 2.9vw, 3.25rem)', { lineHeight: '1' }], // --font-size-5 (1) - 6: ['clamp(2.25rem, 4.7vw, 5.3rem)', { lineHeight: '1' }], // --font-size-6 (1) - 7: ['clamp(3.3rem, 7.3vw, 8.5rem)', { lineHeight: '1' }], // --font-size-7 (1) - 8: ['clamp(4.5rem, 12.2vw, 13.87rem)', { lineHeight: '1' }], // --font-size-8 (0) - 9: ['clamp(5.5rem, 28.7vw, 22.43rem)', { lineHeight: '1' }], // --font-size-9 (1) + 1: ['0.65em', { lineHeight: '' }], + 2: ['clamp(0.65rem, 0.8vw, 0.75rem)', { lineHeight: '1.625' }], + 3: ['clamp(1rem, 1.1vw, 1.25rem)', { lineHeight: '1.625' }], + 4: ['clamp(1.25rem, 1.8vw, 2rem)', { lineHeight: '1' }], + 5: ['clamp(1.5rem, 2.9vw, 3.25rem)', { lineHeight: '1' }], + 6: ['clamp(2.25rem, 4.7vw, 5.3rem)', { lineHeight: '1' }], + 7: ['clamp(3.3rem, 7.3vw, 8.5rem)', { lineHeight: '1' }], + 8: ['clamp(4.5rem, 12.2vw, 13.87rem)', { lineHeight: '1' }], + 9: ['clamp(5.5rem, 28.7vw, 22.43rem)', { lineHeight: '1' }], }, - // TODO: Text Shadow? boxShadow: { - subtle: '0 0 50px rgb(0 0 0 / 0.2)', // --shadow-subtle-shade - beveled: '0 1px 0 rgb(0 0 0 / 0.2), inset 0 0 0 2px #ffffff', // --shadow-beveled-keyboard - darkInset: 'inset 0 0 0 1px rgb(0 0 0 / 0.2)', // --shadow-dark-inset + subtle: '0 0 50px rgb(0 0 0 / 0.2)', + beveled: '0 1px 0 rgb(0 0 0 / 0.2), inset 0 0 0 2px #ffffff', + darkInset: 'inset 0 0 0 1px rgb(0 0 0 / 0.2)', }, dropShadow: { - subtle: 'inset 0 0 5px rgb(0 0 0 / 0.15)', // --shadow-dark-inset + subtle: 'inset 0 0 5px rgb(0 0 0 / 0.15)', }, }, },