Postcss (vendor prefixes), etc.

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.18",
+	"version": "0.1.19",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -16,7 +16,13 @@
 		"@astrojs/mdx": "^2.0.3",
 		"@astrojs/sitemap": "^3.0.3",
 		"astro": "^4.0.7",
+		"autoprefixer": "^10.4.16",
 		"iconoir": "^7.2.0",
+		"postcss-preset-env": "^9.3.0",
 		"typescript": "^5.3.3"
-	}
+	},
+	"browserslist": [
+		"last 2 versions",
+		">0.5% and not dead"
+	]
 }

postcss.config.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-env": {
+      autoprefixer: { flexbox: "no-2009" },
+      stage: 2,
+      features: {
+        "custom-properties": false,
+        "custom-media-queries": true,
+        "nesting-rules": true
+      }
+    }
+  }
+};

src/components/ceCard.astro

@@ -12,7 +12,7 @@ export interface Props {
 const { mlb, imageFile, name } = Astro.props
 const imagePath = `/src/assets/ce/${imageFile}`
 const images_ces = import.meta.glob<{ default: ImageMetadata }>(
-  '/src/assets/ce/*.{png,webp}'
+  '/src/assets/ce/*.png'
 )
 
 let mlb_image: string = 'mlbalign'

src/components/navbar.astro

@@ -107,7 +107,6 @@ const hamburger_src_url = `url("${hamburger.src}")`;
 
   .hamburger-menu {
     mask: var(--hamburger_src_url) no-repeat center;
-    -webkit-mask: var(--hamburger_src_url) no-repeat center;
     background-color: white;
     width: 2em;
     height: 2em;

src/components/navbarEntry.astro

@@ -73,7 +73,6 @@ const fulllink = `/${slug}`
 
   .icon {
     mask: var(--icon_src_url) no-repeat center;
-    -webkit-mask: var(--icon_src_url) no-repeat center;
     background-color: white;
     width: 1.4em;
     height: 1.4em;