Fix styling

Feavy · Feavy · commit b965d326c5ce · 2024-07-12T12:17:05.000+02:00
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
@@ -111,7 +111,7 @@ function Feature({title, image, description, wip}: FeatureItem) {
           <img src={image} className="w-full h-full object-contain" role="img"/>
         </div>
         <div className="text-center">
-          <p className="text-[30px] font-bold text-[#2196f3]">{title}</p>
+          <p className="mb-0 text-[30px] font-bold text-[#2196f3]">{title}</p>
           <p className="font-medium">{description}</p>
         </div>
       </div>
@@ -120,7 +120,7 @@ function Feature({title, image, description, wip}: FeatureItem) {
 
 export default function HomepageFeatures(): JSX.Element {
   return (
-      <section className="px-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 max-w-[1300px] m-auto">
+      <section className="px-8 pb-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 max-w-[1300px] m-auto bg-white">
         {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
         ))}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,11 +7,11 @@ function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
       <header className="text-center py-8">
-        <div className=" flex flex-col gap-2">
-          <h1 className="text-white font-['Baloo_2'] text-[72px] font-black drop-shadow-md">
+        <div className="flex flex-col">
+          <h1 className="text-white font-['Baloo_2'] md:text-[72px] text-[60px] font-black drop-shadow-md">
             {siteConfig.title}
           </h1>
-          <p className="text-white text-2xl">{siteConfig.tagline}</p>
+          <p className="px-2 text-white text-xl md:text-2xl">{siteConfig.tagline}</p>
           <div className="mt-4">
             <Link
                 className="button button--secondary button--lg"
@@ -33,7 +33,7 @@ export default function Home(): JSX.Element {
             description="Description will go into a meta tag in <head />">
           <div style={{background: "linear-gradient(0deg,#3586FF 0%,#68A4FF 100%) 0% 0% / 100% 100% repeat"}}>
             <HomepageHeader/>
-            <main className="overflow-hidden flex flex-col pb-8">
+            <main className="overflow-hidden flex flex-col">
               <div className="w-[3800px] h-24 self-center relative" style={{color: "var(--ifm-background-surface-color)"}}>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 2730 1021" height="1em" width="1em"
                      className="absolute top-[-25px] block min-w-full w-auto object-cover h-[1546px]" role="img">
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,6 +4,9 @@ module.exports = {
   theme: {
     extend: {},
   },
+  corePlugins: {
+    preflight: false,
+  },
   plugins: [],
 }
 

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,9 @@ module.exports = {`
`4`	`4`	`theme: {`
`5`	`5`	`extend: {},`
`6`	`6`	`},`
	`7`	`+ corePlugins: {`
	`8`	`+ preflight: false,`
	`9`	`+ },`
`7`	`10`	`plugins: [],`
`8`	`11`	`}`
`9`	`12`