It appears you have a well-structured Git repository with various files, including SVG icons and HTML documents. Here's a brief overview:

This commit is contained in:
2025-06-11 09:05:15 +02:00
parent 36c2466e53
commit 6d6aa954dd
15556 changed files with 1076330 additions and 1 deletions

View File

@@ -0,0 +1,2 @@
declare const plugin: { handler: () => void }
export = plugin

View File

@@ -0,0 +1,124 @@
const plugin = require('tailwindcss/plugin')
const baseStyles = {
position: 'relative',
paddingBottom: `calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)`,
}
const childStyles = {
position: 'absolute',
height: '100%',
width: '100%',
top: '0',
right: '0',
bottom: '0',
left: '0',
}
const noneComponent = {
'.aspect-none': {
position: 'static',
paddingBottom: '0',
},
'.aspect-none > *': {
position: 'static',
height: 'auto',
width: 'auto',
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto',
},
}
const aspectRatio = plugin(
function ({ addComponents, matchComponents, theme, variants, e }) {
const values = theme('aspectRatio')
if (matchComponents) {
matchComponents(
{
'aspect-w': (value) => [
{
...baseStyles,
'--tw-aspect-w': value,
},
{
'> *': childStyles,
},
],
'aspect-h': (value) => ({ '--tw-aspect-h': value }),
},
{ values }
)
addComponents(noneComponent)
return
}
const baseSelectors = Object.entries(values)
.map(([key, value]) => {
return `.${e(`aspect-w-${key}`)}`
})
.join(',\n')
const childSelectors = Object.entries(values)
.map(([key, value]) => {
return `.${e(`aspect-w-${key}`)} > *`
})
.join(',\n')
addComponents(
[
{
[baseSelectors]: baseStyles,
[childSelectors]: childStyles,
},
noneComponent,
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`aspect-w-${key}`)}`]: {
'--tw-aspect-w': value,
},
}
}),
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`aspect-h-${key}`)}`]: {
'--tw-aspect-h': value,
},
}
}),
],
variants('aspectRatio')
)
},
{
theme: {
aspectRatio: {
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
15: '15',
16: '16',
},
},
variants: {
aspectRatio: ['responsive'],
},
}
)
module.exports = aspectRatio