From 413fea96853f04290e3efd7e45d4cf60eb9a463a Mon Sep 17 00:00:00 2001 From: Jorge Morales Pou Date: Thu, 15 May 2025 10:13:21 +0000 Subject: [PATCH] Reworked style and changed featuredContent --- src/css/custom.css | 36 ++++++++--------------------- src/data/featuredContent.tsx | 21 +++++++++++------ src/pages/index.tsx | 2 +- src/theme/Layout.js | 45 ------------------------------------ 4 files changed, 25 insertions(+), 79 deletions(-) delete mode 100644 src/theme/Layout.js diff --git a/src/css/custom.css b/src/css/custom.css index c23dff4..2b30d52 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,13 +6,13 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #2e63a3; + --ifm-color-primary-dark: #29569A; + --ifm-color-primary-darker: #274981; + --ifm-color-primary-darkest: #203c66; + --ifm-color-primary-light: #3370b4; + --ifm-color-primary-lighter: #3577c1; + --ifm-color-primary-lightest: #3C8BBC; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --primary: #ff6a3e; @@ -197,7 +197,9 @@ margin: 2rem auto 0 auto; border-radius: 2rem; box-shadow: 0 4px 32px rgba(0,0,0,0.10); - background: #fff; + background: rgba(203, 225, 240, 0.4); /* 60% transparent var(--color-odd) */ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); left: 0; right: 0; position: sticky; @@ -217,24 +219,6 @@ box-shadow: 0 4px 32px rgba(0,0,0,0.30); } -body::before { - content: ""; - display: block; - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 7rem; /* Adjust height to cover navbar + margin */ - background: var(--color-odd); - z-index: 99; - pointer-events: none; - opacity: 1; - transition: opacity 0.3s; -} -body.navbar-bg-transparent::before { - opacity: 0; -} - .menu__link, .dropdown__link, .navbar__item:not(.navbar-login-button) { diff --git a/src/data/featuredContent.tsx b/src/data/featuredContent.tsx index 606fea2..667ebc1 100644 --- a/src/data/featuredContent.tsx +++ b/src/data/featuredContent.tsx @@ -1,6 +1,13 @@ import { FeaturedCardData } from "../components/sections/FeaturedContent"; const featuredCards: FeaturedCardData[] = [ + { + image: '/img/logo.svg', + title: 'Educates is now independent', + description: 'The Educates Training Platform is is now available as an Open Source independent product. Learn more about it here.', + ctaLabel: 'Read blog', + ctaHref: '/blog/educates-independent', + }, { image: '/img/featured-content/working_locally.jpeg', title: 'How to best work locally', @@ -15,12 +22,12 @@ const featuredCards: FeaturedCardData[] = [ ctaLabel: 'Read blog', ctaHref: '/blog/install-educates-cloud-cli', }, - { - image: '/img/featured-content/cloud.jpeg', - title: 'Installing Educates on a cloud provider (Part 2)', - description: 'Verification of the installation of Educates Training Platform on a cloud provider including verification of the platform components and deploy and verify a training portal and workshop', - ctaLabel: 'Read blog', - ctaHref: '/blog/verify-educates-cloud-install', - }, + // { + // image: '/img/featured-content/cloud.jpeg', + // title: 'Installing Educates on a cloud provider (Part 2)', + // description: 'Verification of the installation of Educates Training Platform on a cloud provider including verification of the platform components and deploy and verify a training portal and workshop', + // ctaLabel: 'Read blog', + // ctaHref: '/blog/verify-educates-cloud-install', + // }, ]; export default featuredCards; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a4c150a..fe07605 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,7 +11,7 @@ import FeaturedContent from '../components/sections/FeaturedContent'; import featuredCards from '../data/featuredContent'; export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext(); - var index = 0; + var index = 1; function getSectionType(index: number) { return index % 2 === 0 ? 'odd' : 'even'; diff --git a/src/theme/Layout.js b/src/theme/Layout.js deleted file mode 100644 index 2c82fce..0000000 --- a/src/theme/Layout.js +++ /dev/null @@ -1,45 +0,0 @@ -import React, { useEffect } from 'react'; -import Layout from '@theme-original/Layout'; -import { useLocation } from '@docusaurus/router'; - -export default function LayoutWrapper(props) { - const location = useLocation(); - - useEffect(() => { - // This runs on mount, even before router is ready - if (location.pathname !== '/' && location.pathname !== '/index.html') { - document.body.classList.add('navbar-bg-transparent'); - } else { - document.body.classList.remove('navbar-bg-transparent'); - } - }, []); - - useEffect(() => { - // Wait for DOM to be ready - setTimeout(() => { - if (location.pathname !== '/' && location.pathname !== '/index.html') { - document.body.classList.add('navbar-bg-transparent'); - } else { - document.body.classList.remove('navbar-bg-transparent'); - } - }, 0); - }, [location.pathname]); - - useEffect(() => { - const handleScroll = () => { - // Use a lower threshold on mobile - if (location.pathname === '/' || location.pathname === '/index.html') { - const isMobile = window.innerWidth <= 600; - const threshold = isMobile ? 80 : 200; - if (window.scrollY > threshold) { - document.body.classList.add('navbar-bg-transparent'); - } else { - document.body.classList.remove('navbar-bg-transparent'); - } - } - }; - window.addEventListener('scroll', handleScroll); - return () => window.removeEventListener('scroll', handleScroll); - }, []); - return ; -} \ No newline at end of file