filip(fix): add design amends

docs/knowledge-hub/_category_.yaml

@@ -0,0 +1,4 @@
+position: 3
+label: 'Knowledge Hub'
+collapsible: true
+collapsed: true

docs/quality-maturity-model/01-overview.md

@@ -46,7 +46,7 @@ In terms of levels within each dimension, it's important to understand the nuanc
 -   **Level 4**: introduces the power of data, enabling better, data-based decisions based on relevant metrics.
 -   **Level 5**: the project is not just following practices. Rather, it's continuously improving, learning from data and experience to continuously refine the approach. This implies early problem detection and prevention, ensuring potential challenges are addressed even before they surface.
 
-![Reactive vs. proactive](/img/quality-maturity-model/reactive-proactive.png)
+<img className="default-sized-image" src={require("@site/static/img/quality-maturity-model/reactive-proactive.png").default} alt="Reactive vs. proactive" />
 
 This tiered model provides a clear roadmap for **continuous improvement**, enabling projects and organizations to set goals, assess effectiveness, and adapt proactively.
 

docs/quality-maturity-model/03-how-it-works.md

@@ -1,6 +1,6 @@
 # How it works
 
-<img className="small" src={require("@site/static/img/quality-maturity-model/illustration-strategy.png").default} alt="Strategy illustration" />
+<img className="default-sized-image" src={require("@site/static/img/quality-maturity-model/illustration-strategy.png").default} alt="Strategy illustration" />
 
 ## The process
 

docs/quality-strategy/01-getting-started.md

@@ -24,7 +24,7 @@ The **quality strategy** is a holistic plan outlining the project’s approach t
 
 **The Quality Strategy is about envisioning success and paving the way to achieve it.**
 
-<img className="small" src={require("@site/static/img/quality-strategy/illustration-strategy.png").default} alt="Strategy illustration" />
+<img className="default-sized-image" src={require("@site/static/img/quality-strategy/illustration-strategy.png").default} alt="Strategy illustration" />
 
 The quality strategy tool is designed to foster a structured and proactive approach to quality in software development projects. It ensures that every phase of the product's development adheres to high-quality standards, leaving no detail unconsidered, thereby improving both the efficiency and outcomes of all projects.
 

docs/quality-strategy/03-background.md

@@ -26,7 +26,7 @@ Poor software quality drains resources and erodes trust.
 
 The true cost of poor software is not just in dollars, but in **lost trust and opportunities**.
 
-<img className="small" src={require("@site/static/img/quality-strategy/cost-of-poor-software.png").default} alt="Cost of poor software" />
+<img className="default-sized-image" src={require("@site/static/img/quality-strategy/cost-of-poor-software.png").default} alt="Cost of poor software" />
 
 ## The complexity of software engineering
 
@@ -40,7 +40,7 @@ In this field, **success** is about delivering **real value** to users and creat
 
 IO's here to create impactful products that resonate with users' needs, delivering solutions that enhance lives and drive the business forward.
 
-<img className="small" src={require("@site/static/img/quality-strategy/targets.png").default} alt="Targets illustration" />
+<img className="default-sized-image" src={require("@site/static/img/quality-strategy/targets.png").default} alt="Targets illustration" />
 
 ## Strategy & quality
 

docs/quality-strategy/resources/01-faqs.md

@@ -199,7 +199,7 @@ Finally, many aspects of a quality strategy, such as testing and continuous inte
 
 The quality strategy serves as a guiding framework for the team/project, highlighting the essential actions required to build top-notch products. However, it doesn't prescribe specific methods or processes. Instead, it empowers the team with the autonomy and creative freedom to determine the best approach and techniques to achieve the desired quality outcomes. This balance ensures that while quality remains a core focus, innovation and adaptability are not compromised.
 
-<img className="small" src={require("@site/static/img/quality-strategy/rulebooks-frameworks.png").default} alt="Rulebooks and frameworks" />
+<img src={require("@site/static/img/quality-strategy/rulebooks-frameworks.png").default} alt="Rulebooks and frameworks" />
 
 ### A software quality strategy is only necessary for large organizations or complex software projects
 

docusaurus.config.ts

@@ -58,8 +58,7 @@ const config: Config = {
 	],
 
 	themeConfig: {
-		// TODO: Replace with your project's social card
-		// image: 'img/docusaurus-social-card.jpg',
+		image: 'img/social-card.png',
 		colorMode: {
 			disableSwitch: true,
 		},
@@ -68,8 +67,6 @@ const config: Config = {
 			logo: {
 				alt: 'IO Quality Engineering',
 				src: 'img/logo.svg',
-				height: 28,
-				width: 45,
 			},
 			items: [
 				{

src/css/custom.css

@@ -71,24 +71,62 @@ article img {
 	background-color: #fff;
 }
 
-@media (min-width: 800px) {
-	article img.small {
-		max-width: 50%;
+.markdown {
+	line-height: 1.65;
+}
+
+.markdown h1 {
+	font-size: 2rem;
+}
+
+.markdown h2 {
+	font-size: 1.8rem;
+}
+
+.markdown h3 {
+	font-size: 1.5rem;
+}
+
+.markdown h4 {
+	font-size: 1rem;
+}
+
+.markdown h5 {
+	font-size: 0.875rem;
+}
+
+.markdown h6 {
+	font-size: 0.75rem;
+}
+
+.menu {
+	padding: 24px !important;
+}
+
+@media (min-width: 768px) {
+	.markdown {
+		padding: 32px 0 16px 0px !important;
 	}
 }
 
+@media (min-width: 1024px) {
+	.markdown {
+		padding: 56px !important;
+		padding-right: 0 !important;
+	}
+}
+
+.hash-link::before {
+	content: '' !important;
+}
+
 article .img-reference {
 	font-size: 0.75rem;
 	text-align: center;
 	font-style: italic;
 	max-width: 90%;
 }
 
-.navbar__toggle {
-	order: 9999;
-	margin-left: auto;
-}
-
 .navbar__title {
 	font-family: 'Lexend', sans-serif;
 	font-weight: 400;
@@ -98,16 +136,16 @@ article .img-reference {
 	display: none;
 }
 
-@media (min-width: 500px) {
-	.navbar__title {
-		display: block;
-	}
-}
-
 div:has(> .dsla-search-wrapper) {
 	padding: 0;
 }
 
+@media (max-width: 996px) {
+	div:has(> .dsla-search-wrapper) {
+		margin-right: 45px;
+	}
+}
+
 .aa-DetachedSearchButton {
 	border: none !important;
 }
@@ -219,3 +257,10 @@ div:has(> .dsla-search-wrapper) {
 	justify-content: space-between;
 	align-items: center;
 }
+
+.default-sized-image {
+	width: 318px !important;
+	height: 318px !important;
+	box-shadow: none;
+	padding: 20px 10px !important;
+}

src/pages/index.module.css

@@ -33,7 +33,7 @@
 .heroTitle {
 	font-size: 2rem;
 	font-weight: 800;
-	font-family: 'Heiti TC', Lexend, sans-serif;
+	font-family: 'Heiti TC', 'Lexend', 'sans-serif' !important;
 	line-height: 1.33;
 	color: var(--color-grey-1);
 	letter-spacing: -1px;
@@ -59,9 +59,9 @@
 	.heroImage {
 		display: block;
 		position: absolute;
-		bottom: -13%;
+		bottom: -10%;
 		right: var(--ifm-spacing-horizontal);
-		width: 50%;
+		width: 41%;
 	}
 }
 
@@ -111,6 +111,7 @@
 }
 .featureHeading h3 {
 	margin: 0;
+	font-size: 24px;
 }
 
 .featureImage {
@@ -141,6 +142,12 @@
 	text-underline-offset: 4px;
 }
 
+.featureCta a:hover {
+	background-color: var(--color-red-1);
+	text-decoration: none;
+	color: var(--color-white-1);
+}
+
 .illustration {
 	height: 263px;
 	overflow: hidden;

src/theme/Logo/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useThemeConfig, type NavbarLogo } from '@docusaurus/theme-common';
+import ThemedImage from '@theme/ThemedImage';
+import type { Props } from '@theme/Logo';
+import useMediaQuery from '@site/src/hooks/useMediaQuery';
+
+function LogoThemedImage({ logo, alt, imageClassName }: { logo: NavbarLogo; alt: string; imageClassName?: string }) {
+	const isDesktopUp = useMediaQuery('(min-width: 997px)');
+	const sources = {
+		light: useBaseUrl(isDesktopUp ? 'img/logo-and-name.svg' : logo.src),
+		dark: useBaseUrl(logo.srcDark || logo.src),
+	};
+	const themedImage = (
+		<ThemedImage
+			className={logo.className}
+			sources={sources}
+			height={logo.height}
+			width={logo.width}
+			alt={alt}
+			style={logo.style}
+		/>
+	);
+
+	// Is this extra div really necessary?
+	// introduced in https://github.com/facebook/docusaurus/pull/5666
+	return imageClassName ? <div className={imageClassName}>{themedImage}</div> : themedImage;
+}
+
+export default function Logo(props: Props): JSX.Element {
+	const {
+		siteConfig: { title },
+	} = useDocusaurusContext();
+	const {
+		navbar: { title: navbarTitle, logo },
+	} = useThemeConfig();
+
+	const { imageClassName, titleClassName, ...propsRest } = props;
+	const logoLink = useBaseUrl(logo?.href || '/');
+
+	// If visible title is shown, fallback alt text should be
+	// an empty string to mark the logo as decorative.
+	const fallbackAlt = navbarTitle ? '' : title;
+
+	// Use logo alt text if provided (including empty string),
+	// and provide a sensible fallback otherwise.
+	const alt = logo?.alt ?? fallbackAlt;
+
+	return (
+		<Link to={logoLink} {...propsRest} {...(logo?.target && { target: logo.target })}>
+			{logo && <LogoThemedImage logo={logo} alt={alt} imageClassName={imageClassName} />}
+			{navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+		</Link>
+	);
+}

src/theme/Navbar/Content/index.tsx

@@ -0,0 +1,84 @@
+import React, { type ReactNode } from 'react';
+import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common';
+import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
+import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+
+import styles from './styles.module.css';
+import { useLocation } from '@docusaurus/router';
+import clsx from 'clsx';
+
+function useNavbarItems() {
+	// TODO temporary casting until ThemeConfig type is improved
+	return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element {
+	return (
+		<>
+			{items.map((item, i) => (
+				<ErrorCauseBoundary
+					key={i}
+					onError={(error) =>
+						new Error(
+							`A theme navbar item failed to render.
+              Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+              ${JSON.stringify(item, null, 2)}`,
+						)
+					}
+				>
+					<NavbarItem {...item} />
+				</ErrorCauseBoundary>
+			))}
+		</>
+	);
+}
+
+function NavbarContentLayout({ left, right }: { left: ReactNode; right: ReactNode }) {
+	const { pathname } = useLocation();
+	return (
+		<div className={clsx('navbar__inner', pathname === '/' && 'container')}>
+			<div className="navbar__items">{left}</div>
+			<div className="navbar__items navbar__items--right">{right}</div>
+		</div>
+	);
+}
+
+export default function NavbarContent(): JSX.Element {
+	const mobileSidebar = useNavbarMobileSidebar();
+
+	const items = useNavbarItems();
+	const [leftItems, rightItems] = splitNavbarItems(items);
+
+	const searchBarItem = items.find((item) => item.type === 'search');
+
+	return (
+		<NavbarContentLayout
+			left={
+				// TODO stop hardcoding items?
+				<>
+					<NavbarLogo />
+					<NavbarItems items={leftItems} />
+				</>
+			}
+			right={
+				// TODO stop hardcoding items?
+				// Ask the user to add the respective navbar items => more flexible
+				<>
+					<NavbarItems items={rightItems} />
+					<NavbarColorModeToggle className={styles.colorModeToggle} />
+					{!searchBarItem && (
+						<NavbarSearch>
+							<SearchBar />
+						</NavbarSearch>
+					)}
+					{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+				</>
+			}
+		/>
+	);
+}

src/theme/Navbar/Content/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}