fix: migrate site component from scss to tailwind (#8071)

Katari-8055 · web-flow · commit 3b263f9d9d3f · 2026-03-20T19:00:59.000+03:00
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -9,7 +9,7 @@ const footerLinkClasses =
   "text-[11px] uppercase text-[#777676] hover:text-[#333333]";
 
 const Footer = () => (
-  <footer className="w-full flex-[0_0_auto]">
+  <footer className="w-full flex-[0_0_auto] print:hidden">
     <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
@@ -128,7 +128,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
 
   return (
     <>
-      <header className="bg-blue-800 dark:bg-gray-900">
+      <header className="bg-blue-800 dark:bg-gray-900 print:hidden">
         <div className="flex items-center py-10 px-[16px] justify-between md:px-[24px] md:max-w-[1024px] md:mx-auto md:justify-start">
           <button
             aria-label="Toggle navigation menu"
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
@@ -41,7 +41,6 @@ import Sponsors from "../Sponsors/Sponsors.jsx";
 
 // Load Styling
 import "../../styles/index.scss";
-import "./Site.scss";
 
 // Load Content Tree
 
@@ -217,7 +216,7 @@ function Site(props) {
   }, [location, navigate]);
 
   return (
-    <div className="site">
+    <div className="flex flex-col min-h-screen bg-white dark:bg-gray-900">
       <Helmet>
         <html lang="en" />
         <meta charset="utf-8" />
@@ -271,7 +270,7 @@ function Site(props) {
         <meta name="msapplication-TileImage" content="/icon_150x150.png" />
         <meta name="msapplication-TileColor" content="#465e69" />
       </Helmet>
-      <div className="site__header">
+      <div className="z-[100] fixed w-full">
         <OfflineBanner />
         <Navigation
           pathname={location.pathname}
@@ -315,9 +314,11 @@ function Site(props) {
         <Route index element={<Splash />} />
         <Route
           element={
-            <Container className="site__content">
-              <Outlet />
-            </Container>
+            <div className="flex-[1_1_auto] relative mt-[110px] print:mt-0">
+              <Container className="flex">
+                <Outlet />
+              </Container>
+            </div>
           }
         >
           <Route path="app-shell" element={<Fragment />} />
@@ -368,7 +369,7 @@ function PageElement(props) {
     <Fragment>
       <Sponsors />
       <Sidebar
-        className="site__sidebar"
+        className="flex-[0_0_280px]"
         currentPage={currentPage}
         pages={sidebarPages}
       />
diff --git a/src/components/Site/Site.scss b/src/components/Site/Site.scss
