set skills to two columns for some screen sizes

Hatchibombotar · Sep 30, 2024 · 9ecea17 · 9ecea17
1 parent d2d7dfa
commit 9ecea17
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -44,10 +44,10 @@ const postCollectionInOrder = await Promise.all(
   <hr class="my-5" />
 
   <h2 class="text-2xl font-bold my-3">Skills</h2>
-  <div class="grid sm:grid-cols-3">
+  <div class="grid xs:grid-cols-2 sm:grid-cols-3">
     {
       skills.map((skill) => (
-        <div class="flex sm:justify-normal justify-center items-center m-2 text-left sm:grayscale sm:brightness-[0.2] hover:filter-none hover:ease-[cubic-bezier(1,1,0,0)] hover:transition duration-[14s]">
+        <div class="flex xs:justify-normal justify-center items-center m-2 text-left sm:grayscale sm:brightness-[0.2] hover:filter-none hover:ease-[cubic-bezier(1,1,0,0)] hover:transition duration-[14s]">
           {skill.iconType == "image" ? (
             <div class="mx-2 flex items-center">
               <img

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,13 +1,16 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
-    extend: {
-      colors: {
-        "cool-50": "#fcfcfc",
-        "cool-100": "#eeeeee",
-        "cool-200": "#a1a1a1",
-      },
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			screens: {
+				"xs": "340px",
+			},
+			colors: {
+				"cool-50": "#fcfcfc",
+				"cool-100": "#eeeeee",
+				"cool-200": "#a1a1a1",
+			},
 			typography(theme) {
 				return {
 					DEFAULT: {
@@ -29,11 +32,11 @@ module.exports = {
 					}
 				}
 			}
-    },
+		},
 
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
+	},
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 }