WIP Always use mobile navigation on touch devices

2022-08-13 10:33:19 +02:00
parent 8fbb115a52
commit 0df7fa730b
4 changed files with 23 additions and 10 deletions
@@ -1,3 +1,4 @@
+const postcss = require('postcss')
 const plugin = require('tailwindcss/plugin')
 const tinycolor = require('tinycolor2')

@@ -168,20 +169,32 @@ module.exports = {
            variants: ['sbw', 'snz', 'uch', 'ser'],
        }),
        plugin(function ({addVariant, e}) {
+            addVariant('hover-hover', ({ container, separator }) => {
+                const hoverHover = postcss.atRule({ name: 'media', params: '(hover: hover)' })
+                hoverHover.append(container.nodes)
+                container.append(hoverHover)
+                hoverHover.walkRules(rule => {
+                    rule.selector = `.${e(`hover-hover${separator}${rule.selector.slice(1)}`)}`
+                })
+            })
+            addVariant('hover-none', ({ container, separator }) => {
+                const hoverNone = postcss.atRule({ name: 'media', params: '(hover: none)' })
+                hoverNone.append(container.nodes)
+                container.append(hoverNone)
+                hoverNone.walkRules(rule => {
+                    rule.selector = `.${e(`hover-none${separator}${rule.selector.slice(1)}`)}`
+                })
+            })
            addVariant('first-type', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.${e(`first-type${separator}${className}`)}:first-of-type`
                })
            })
-        }),
-        plugin(function ({addVariant, e}) {
            addVariant('last-type', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.${e(`last-type${separator}${className}`)}:last-of-type`
                })
            })
-        }),
-        plugin(function ({addVariant, e}) {
            addVariant('reduced', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.reduced .${e(`reduced${separator}${className}`)}`