Convert hero section styling to tailwind

.gitignore

@@ -18,6 +18,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn
+.yarnrc.yml
 
 # argos
 /screenshots

docusaurus.config.js

@@ -1,5 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
+import tailwindPlugin from "./plugins/tailwind-config.cjs";
 
 const { themes } = require('prism-react-renderer');
 const lightTheme = themes.github;
@@ -81,7 +82,7 @@ const config = {
           routeBasePath: 'blog', // The base path for the blog pages
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: ['./src/css/custom_tailwind.css'],
         },
         gtag: {
           trackingID: 'G-G856J3S8ZG',
@@ -109,6 +110,7 @@ const config = {
         sidebarPath: './sidebarEnhancements.js',
       },
     ],
+    tailwindPlugin,
   ],
 
   themeConfig:

package.json

@@ -31,7 +31,10 @@
     "@docusaurus/module-type-aliases": "^3.1.0",
     "@docusaurus/types": "^3.1.0",
     "@playwright/test": "^1.39.0",
-    "cheerio": "^1.0.0-rc.12"
+    "autoprefixer": "^10.4.17",
+    "cheerio": "^1.0.0-rc.12",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1"
   },
   "browserslist": {
     "production": [

plugins/tailwind-config.cjs

@@ -0,0 +1,15 @@
+function tailwindPlugin(context, options) {
+    return {
+        name: 'tailwind-plugin',
+        configurePostCss(postcssOptions) {
+            postcssOptions.plugins = [
+                require('postcss-import'),
+                require('tailwindcss'),
+                require('autoprefixer'),
+            ];
+            return postcssOptions;
+        },
+    };
+}
+
+module.exports = tailwindPlugin;

src/components/Header/index.jsx

@@ -6,27 +6,24 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 
 export default function Header() {
-    const headerBackClasses = `${styles.header_back} ${styles.section_padding}`;
-    const customButtonClasses = `button button--lg ${styles.customButtonStyle}`;
-
     return (
-        <div className={headerBackClasses}>
-            <div className={styles.header_content}>
-            <ThemedImage
-                alt="Supported By Logo"
-                width="300px"
-                sources={{
-                    light: useBaseUrl('/img/uptaneLogoHero.svg'),
-                    dark: useBaseUrl('/img/uptaneLogoHero.svg'),
-                }}
-            />
-                <h3>A Secure Software Update Framework for Automobiles</h3>
-                <div className={styles.header_content_buttons}>
-                    <Link to="/learn-more/getting-started" className={customButtonClasses}>Learn More</Link>
+        <div className={`bg-gradient-blue flex flex-col lg:flex-row hero-clip p-16 sm:p-12 sm:pr-28 pb-24 sm:pl-28 md:p-16 lg:p-12`}>
+            <div className={`md:ml-16 flex flex-col items-start justify-center flex-1`}>
+                <ThemedImage
+                    alt="Supported By Logo"
+                    width="300px"
+                    sources={{
+                        light: useBaseUrl('/img/uptaneLogoHero.svg'),
+                        dark: useBaseUrl('/img/uptaneLogoHero.svg'),
+                    }}
+                />
+                <p className="text-2xl sm:text-5xl leading-tight font-heading font-semibold mt-6 mb-2 sm:mt-10 sm:mb-6">A Secure Software Update Framework for Automobiles</p>
+                <div className="flex items-start justify-start gap-8 mt-8 sm:mb-20 lg:mb-12">
+                    <Link to="/learn-more/getting-started" className="border-2 border-white bg-transparent text-white font-bold text-lg pt-2 pb-2 pr-8 pl-8 rounded-md">Learn More</Link>
                 </div>
             </div>
-            <div className={styles.header_image}>
-                <UptaneCubes title="uptane Cubes" width="100%" />
+            <div className="hidden lg:flex flex-1 lg:items-center lg:justify-center mb-12">
+                <UptaneCubes title="uptane Cubes" width="65%" />
             </div>
         </div>
     );

src/css/custom.css

@@ -4,6 +4,10 @@
  * work well for content-centric websites.
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* You can override the default Infima variables here. */
 @font-face {
   font-family: 'Nunito';

src/css/custom_tailwind.css

@@ -0,0 +1,173 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can override the default Infima variables here. */
+@font-face {
+  font-family: 'Nunito';
+  src: url('../../static/fonts/Nunito-VariableFont_wght.ttf'); 
+}
+
+@font-face {
+  font-family: 'OpenSans';
+  src: url('../../static/fonts/OpenSans-VariableFont_wdth,wght.ttf');
+}
+
+:root {
+  --ifm-font-heading-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --ifm-font-content-family: 'OpenSans', ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+:root {
+  --ifm-color-primary: #0C64D6;
+  --ifm-color-primary-dark: #0A5ABF;
+  --ifm-color-primary-darker: #0951A9;
+  --ifm-color-primary-darkest: #08468F;
+  --ifm-color-primary-light: #1470E1;
+  --ifm-color-primary-lighter: #1879EC;
+  --ifm-color-primary-lightest: #1D88F3;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-navbar-link-color: #000000;
+  --ifm-navbar-link-hover-color: #0C64D6;
+  --ifm-navbar-background-light: #ffffff;
+  --gradient-blue: linear-gradient(130deg, #0C64D6 0%, rgba(12, 100, 214, 0.87) 0%, rgba(12, 100, 214, 0.78) 47.69%, rgba(12, 100, 214, 0.62) 99.61%, rgba(12, 100, 214, 0.00) 100%);
+  --theme-card: #f7fafc;
+}
+
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #0C64D6;
+  --ifm-color-primary-dark: #0953B7;
+  --ifm-color-primary-darker: #0849A1;
+  --ifm-color-primary-darkest: #063D81;
+  --ifm-color-primary-light: #1582F0;
+  --ifm-color-primary-lighter: #1B8DF5;
+  --ifm-color-primary-lightest: #36A8FF;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-navbar-link-color: #ffffff;
+  --ifm-navbar-background-dark: #31353A;
+  --theme-card: #31353A;
+}
+
+
+/*Algolia Search*/
+
+[data-theme='light'] .DocSearch {
+  /* --docsearch-primary-color: var(--ifm-color-primary); */
+  /* --docsearch-text-color: var(--ifm-font-color-base); */
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  --docsearch-container-background: rgba(94, 100, 112, 0.7);
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-color-secondary-lighter);
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-color-secondary);
+  --docsearch-searchbox-focus-background: var(--ifm-color-white);
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-white);
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-color-white);
+}
+
+[data-theme='dark'] .DocSearch {
+  --docsearch-text-color: var(--ifm-font-color-base);
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  --docsearch-container-background: rgba(47, 55, 69, 0.7);
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-background-color);
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-searchbox-focus-background: var(--ifm-color-black);
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-emphasis-100);
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-background-surface-color);
+  --docsearch-key-gradient: linear-gradient(-26.5deg,
+      var(--ifm-color-emphasis-200) 0%,
+      var(--ifm-color-emphasis-100) 100%);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-heading font-bold;
+}
+
+h1 {
+  @apply text-5xl leading-tight;
+}
+
+h2 {
+  @apply text-4xl leading-tight;
+}
+
+h3 {
+  @apply text-2xl leading-tight;
+}
+
+h4 {
+  @apply text-xl leading-tight;
+}
+
+h5 {
+  @apply text-lg leading-tight;
+}
+
+h3 {
+  @apply text-base leading-tight;
+}
+
+p,
+a {
+  @apply font-content;
+}
+
+@layer utilities {
+  .hero-clip {
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
+  }
+}
+
+.button.button--secondary {
+  color: var(--ifm-color-primary);
+}
+
+/* Navbar Elements */
+.navbar,
+.navbar-sidebar__brand {
+  background: var(--ifm-navbar-background-light);
+}
+
+.navbar-sidebar__close svg g,
+.navbar__toggle svg path {
+  stroke: var(--ifm-navbar-link-color);
+}
+
+
+/* Dark mode */
+[data-theme='dark'] .navbar {
+  background-color: var(--ifm-navbar-background-dark);
+}
+
+.navbar-sidebar__brand {
+  background: var(--ifm-navbar-background-dark);
+}
+
+.navbar__toggle svg path {
+  stroke: var(--ifm-navbar-link-color);
+}

tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{jsx,tsx,html}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        nunito: ['Nunito', 'sans'],
+        openSans: ['OpenSans', 'sans'],
+        heading: ['Nunito', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Noto Sans', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji'],
+        content: ['OpenSans', 'ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'monospace'],
+      },
+      screens: {
+        'max-sm': {'max': '489px'},
+        'max-md': {'max': '649px'},
+      },
+      backgroundImage: {
+        'gradient-blue': 'linear-gradient(130deg, #0C64D6 0%, rgba(12, 100, 214, 0.87) 0%, rgba(12, 100, 214, 0.78) 47.69%, rgba(12, 100, 214, 0.62) 99.61%, rgba(12, 100, 214, 0.00) 100%)',
+      },
+    },
+  },
+  plugins: [],
+}