From 7b0fd8786c67d3cb6193aedf6a900114eeb89697 Mon Sep 17 00:00:00 2001 From: Sergey Panteleev Date: Fri, 21 Nov 2025 20:02:53 +0300 Subject: [PATCH 1/9] redesign header & footer --- include/footer.inc | 147 +++- include/header.inc | 256 ++---- include/layout.inc | 3 +- index.php | 4 +- js/common.js | 103 +-- js/search.js | 21 +- releases/8.5/common.php | 1 - releases/8.5/release.inc | 101 +-- styles/base.css | 1141 ++++++++++++++++++++++++ styles/php85.css | 1783 ++------------------------------------ styles/theme-base.css | 34 +- styles/variables.css | 289 ++++++ 12 files changed, 1742 insertions(+), 2141 deletions(-) create mode 100644 styles/base.css create mode 100644 styles/variables.css diff --git a/include/footer.inc b/include/footer.inc index faa7305d68..6ef352653f 100644 --- a/include/footer.inc +++ b/include/footer.inc @@ -59,43 +59,122 @@ - - - -
"; - } - ?> + + +
+
-
-
diff --git a/include/layout.inc b/include/layout.inc index 02b6f733ca..2a69022a6d 100644 --- a/include/layout.inc +++ b/include/layout.inc @@ -441,7 +441,7 @@ EOT; return $retval; } -function site_header(?string $title = NULL, array $config = []): void +function site_header(?string $title = null, array $config = []): void { global $MYSITE, $LANG; @@ -453,6 +453,7 @@ function site_header(?string $title = NULL, array $config = []): void "lang" => $LANG, "current" => "", "meta-navigation" => [], + "theme_switcher" => true, 'classes' => '', 'layout_span' => 9, "cache" => false, diff --git a/index.php b/index.php index 9e24fc8c5f..cb73ffd6b0 100644 --- a/index.php +++ b/index.php @@ -66,12 +66,12 @@ $date_w3c = date_format($date, DATE_W3C); $content .= << -
+

{$entry["title"]}

-
+
{$entry["content"]}
diff --git a/js/common.js b/js/common.js index b1aa4c7c4c..c780631f2a 100644 --- a/js/common.js +++ b/js/common.js @@ -460,87 +460,6 @@ $(document).ready(function () { } }); - /*{{{ 2024 Navbar */ - const offcanvasElement = document.getElementById("navbar__offcanvas"); - const offcanvasSelectables = - offcanvasElement.querySelectorAll("input, button, a"); - const backdropElement = document.getElementById("navbar__backdrop"); - - const documentWidth = document.documentElement.clientWidth; - const scrollbarWidth = Math.abs(window.innerWidth - documentWidth); - - const offcanvasFocusTrapHandler = (event) => { - if (event.key != "Tab") { - return; - } - - const firstElement = offcanvasSelectables[0]; - const lastElement = - offcanvasSelectables[offcanvasSelectables.length - 1]; - - if (event.shiftKey) { - if (document.activeElement === firstElement) { - event.preventDefault(); - lastElement.focus(); - } - } else if (document.activeElement === lastElement) { - event.preventDefault(); - firstElement.focus(); - } - }; - - const openOffcanvasNav = () => { - offcanvasElement.classList.add("show"); - offcanvasElement.setAttribute("aria-modal", "true"); - offcanvasElement.setAttribute("role", "dialog"); - offcanvasElement.style.visibility = "visible"; - backdropElement.classList.add("show"); - document.body.style.overflow = "hidden"; - // Disable scroll on the html element as well to prevent the offcanvas - // nav from being pushed off screen when the page has horizontal scroll, - // like downloads.php has. - document.documentElement.style.overflow = "hidden"; - document.body.style.paddingRight = `${scrollbarWidth}px`; - offcanvasElement.querySelector(".navbar__link").focus(); - document.addEventListener("keydown", offcanvasFocusTrapHandler); - }; - - const closeOffcanvasNav = () => { - offcanvasElement.classList.remove("show"); - offcanvasElement.removeAttribute("aria-modal"); - offcanvasElement.removeAttribute("role"); - backdropElement.classList.remove("show"); - document.removeEventListener("keydown", offcanvasFocusTrapHandler); - offcanvasElement.addEventListener( - "transitionend", - () => { - document.body.style.overflow = "auto"; - document.documentElement.style.overflow = "auto"; - document.body.style.paddingRight = "0px"; - offcanvasElement.style.removeProperty("visibility"); - }, - { once: true }, - ); - }; - - const closeOffCanvasByClickOutside = (event) => { - if (event.target === backdropElement) { - closeOffcanvasNav(); - } - }; - - document.getElementById("navbar__menu-link").setAttribute("hidden", "true"); - - const menuButton = document.getElementById("navbar__menu-button"); - menuButton.removeAttribute("hidden"); - menuButton.addEventListener("click", openOffcanvasNav); - - document - .getElementById("navbar__close-button") - .addEventListener("click", closeOffcanvasNav); - - backdropElement.addEventListener("click", closeOffCanvasByClickOutside); - /*}}}*/ /*{{{ Scroll to top */ @@ -868,3 +787,25 @@ function applyTheme(theme) { } applyTheme(savedTheme) + +const mobileMenuButton = document.getElementById('mobile-menu-button'); +const navMenu = document.getElementById('js-nav-menu'); +const [menuIcon, closeIcon] = ['menu-icon', 'close-icon'].map(id => document.getElementById(id)); + +const toggleMenu = () => { + const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true'; + navMenu.style.display = isExpanded ? 'none' : 'block'; + menuIcon.classList.toggle('hidden'); + closeIcon.classList.toggle('hidden'); + mobileMenuButton.setAttribute('aria-expanded', !isExpanded); +}; + +mobileMenuButton?.addEventListener('click', toggleMenu); +window.addEventListener('resize', () => { + if (window.innerWidth >= 768) { + navMenu.style.display = ''; + menuIcon.classList.remove('hidden'); + closeIcon.classList.add('hidden'); + mobileMenuButton.setAttribute('aria-expanded', 'false'); + } +}); diff --git a/js/search.js b/js/search.js index 6ef5008afe..ae914d0775 100644 --- a/js/search.js +++ b/js/search.js @@ -217,7 +217,7 @@ const initSearchModal = () => { backdropElement.removeAttribute("aria-modal"); backdropElement.removeAttribute("role"); onModalTransitionEnd(() => { - document.body.style.overflow = "auto"; + document.body.style.overflow = "initial"; document.documentElement.style.overflow = "auto"; document.body.style.paddingRight = "0px"; backdropElement.classList.remove("hiding"); @@ -225,28 +225,9 @@ const initSearchModal = () => { }); }; - const searchLink = document.getElementById("navbar__search-link"); - const searchButtonMobile = document.getElementById( - "navbar__search-button-mobile", - ); const searchButton = document.getElementById("navbar__search-button"); let buttons = [searchButton]; - // Enhance mobile search - if (searchLink !== null) { - searchLink.setAttribute("hidden", "true"); - searchButtonMobile.removeAttribute("hidden"); - buttons.push(searchButtonMobile); - } - - // Enhance desktop search - const searchForm = document - .querySelector(".navbar__search-form"); - if (searchForm !== null) { - searchForm.setAttribute("hidden", "true"); - } - searchButton.removeAttribute("hidden"); - // Open when the search button is clicked buttons.forEach((button) => button.addEventListener("click", show), diff --git a/releases/8.5/common.php b/releases/8.5/common.php index 4a94540e14..c5d7153c33 100644 --- a/releases/8.5/common.php +++ b/releases/8.5/common.php @@ -32,7 +32,6 @@ function common_header(string $description): void { 'current' => 'php85', 'css' => ['php85.css'], 'language_switcher' => $languages, - 'theme_switcher' => true, 'meta_tags' => << diff --git a/releases/8.5/release.inc b/releases/8.5/release.inc index 650ad6d05e..94ed48948d 100644 --- a/releases/8.5/release.inc +++ b/releases/8.5/release.inc @@ -768,103 +768,6 @@ PHP - - @@ -901,4 +804,6 @@ PHP false]); +site_footer([ + 'footer_note' => '

Created as part of The PHP Foundation Design Contest.

' +]); diff --git a/styles/base.css b/styles/base.css new file mode 100644 index 0000000000..a9735a6f1c --- /dev/null +++ b/styles/base.css @@ -0,0 +1,1141 @@ +@layer properties { + @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + --tw-border-style: solid; + --tw-outline-style: solid; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-duration: initial; + --tw-ease: initial; + --tw-font-weight: initial; + --tw-leading: initial; + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; + --tw-tracking: initial + } + } +} + +@layer theme { + :root, :host { + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --color-red-200: oklch(88.5% .062 18.334); + --color-red-400: oklch(70.4% .191 22.216); + --color-red-900: oklch(39.6% .141 25.723); + --color-green-200: oklch(92.5% .084 155.995); + --color-green-400: oklch(79.2% .209 151.711); + --color-green-500: oklch(72.3% .219 149.579); + --color-green-900: oklch(39.3% .095 152.535); + --color-teal-300: oklch(85.5% .138 181.071); + --color-teal-400: oklch(77.7% .152 181.912); + --color-gray-100: var(--color-zinc-100); + --color-gray-200: var(--color-zinc-200); + --color-gray-300: var(--color-zinc-300); + --color-gray-400: var(--color-zinc-400); + --color-gray-500: var(--color-zinc-500); + --color-gray-600: var(--color-zinc-600); + --color-gray-700: var(--color-zinc-700); + --color-gray-800: var(--color-zinc-800); + --color-gray-900: var(--color-zinc-900); + --color-gray-950: var(--color-zinc-950); + --color-zinc-50: oklch(98.5% 0 0); + --color-zinc-100: oklch(96.7% .001 286.375); + --color-zinc-200: oklch(92% .004 286.32); + --color-zinc-300: oklch(87.1% .006 286.286); + --color-zinc-400: oklch(70.5% .015 286.067); + --color-zinc-500: oklch(55.2% .016 285.938); + --color-zinc-600: oklch(44.2% .017 285.786); + --color-zinc-700: oklch(37% .013 285.805); + --color-zinc-800: oklch(27.4% .006 286.033); + --color-zinc-900: oklch(21% .006 285.885); + --color-zinc-950: oklch(14.1% .005 285.823); + --color-black: #000; + --color-white: #fff; + --spacing: .25rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-7xl: 80rem; + --text-xs: .75rem; + --text-xs--line-height: calc(1 / .75); + --text-sm: .875rem; + --text-sm--line-height: calc(1.25 / .875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-5xl: 3rem; + --text-5xl--line-height: 1; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --tracking-tight: -.025em; + --leading-relaxed: 1.625; + --leading-loose: 2; + --radius-md: .375rem; + --radius-lg: .5rem; + --radius-xl: .75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + --ease-in-out: cubic-bezier(.4, 0, .2, 1); + --blur-xs: 4px; + --blur-md: 12px; + --default-transition-duration: .15s; + --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono) + } +} + +@layer components; + +@layer utilities { + .visible { + visibility: visible + } + + .sr-only { + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + position: absolute; + overflow: hidden + } + + .static { + position: static + } + + .block { + display: block + } + + .hidden { + display: none + } + + .resize { + resize: both + } + + .opacity-0 { + opacity: 0 + } + + .opacity-25 { + opacity: .25 + } + + .opacity-40 { + opacity: .4 + } + + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) + } +} + +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: relative +} + +header { + top: calc(var(--spacing) * 0); + z-index: 50; + background-color: #fffc; + width: 100%; + position: sticky; + font-family: var(--font-sans); + + padding-block: calc(var(--spacing) * 3); + --tw-shadow: 0 1px var(--tw-shadow-color, #0000000d); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-backdrop-blur: blur(var(--blur-md)); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) +} + +@supports (color:color-mix(in lab, red, red)) { + header { + background-color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +header:where(.dark,.dark *) { + background-color: oklab(24.2643% .00402537 -.0554365/.5) +} + +header a, +header a:link, +header a:visited { + border: 0; + color: var(--color-gray-800); +} + +header a:where(.dark,.dark *), +header a:link:where(.dark,.dark *), +header a:visited:where(.dark,.dark *) { + color: #ffffff; +} + +header nav { + width: auto; + max-width: var(--container-7xl); + padding-inline: calc(var(--spacing) * 6); + margin-inline: auto; + display: flex; + position: relative +} + +@media (min-width: 64rem) { + header nav { + width: 100%; + padding-inline: calc(var(--spacing) * 8) + } +} + +.header-logo { + margin-right: calc(var(--spacing) * 6) +} + +.header-logo svg { + height: calc(var(--spacing) * 10); + color: #6b58ff; + display: inline-block +} + +.header-logo svg:where(.dark,.dark *) { + color: var(--color-white) +} + +.header-menu-container { + margin-top: calc(var(--spacing) * 16); + margin-left: calc(var(--spacing) * -26); + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-color: var(--color-gray-200); + padding-top: calc(var(--spacing) * 5); + flex-direction: column; + flex: 1; + justify-content: space-between; + align-items: center; + display: none +} + +@media (min-width: 64rem) { + .header-menu-container { + margin-top: calc(var(--spacing) * 0); + margin-left: calc(var(--spacing) * 0); + border-style: var(--tw-border-style); + padding-top: calc(var(--spacing) * 0); + border-width: 0; + flex-direction: row; + display: flex + } +} + +.header-menu-container:where(.dark,.dark *) { + border-color: #ffffff1a +} + +@supports (color:color-mix(in lab, red, red)) { + .header-menu-container:where(.dark,.dark *) { + border-color: color-mix(in oklab, var(--color-white) 10%, transparent) + } +} + +.header-menu-container .select { + width: auto; +} + +.header-menu { + margin-bottom: calc(var(--spacing) * 5); + gap: calc(var(--spacing) * 6); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + flex-direction: column; + display: flex +} + +@media (min-width: 64rem) { + .header-menu { + margin-bottom: calc(var(--spacing) * 0); + flex-direction: row; + align-items: center + } +} + +.header-menu a { + text-decoration-line: none +} + +@media (hover: hover) { + .header-menu a:hover { + text-decoration-line: underline + } +} + +.header-actions { + gap: calc(var(--spacing) * 5); + padding-bottom: calc(var(--spacing) * 4); + flex-direction: column; + flex: 1; + display: flex +} + +@media (min-width: 64rem) { + .header-actions { + justify-content: flex-end; + gap: calc(var(--spacing) * 3); + padding-bottom: calc(var(--spacing) * 0); + flex-direction: row + } +} + +.header-button-search { + height: calc(var(--spacing) * 9); + cursor: pointer; + border-radius: var(--radius-xl); + background-color: #fffc; + flex-shrink: 0; + align-items: center; + display: flex +} + +@supports (color:color-mix(in lab, red, red)) { + .header-button-search { + background-color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +.header-button-search { + padding-inline: calc(var(--spacing) * 2.5); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + white-space: nowrap; + color: var(--color-gray-500); + outline-style: var(--tw-outline-style); + outline-offset: calc(1px * -1); + outline-width: 1px; + outline-color: var(--color-gray-300); + border: 0; +} + +.header-button-search:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #09090b0d +} + +@supports (color:color-mix(in lab, red, red)) { + .header-button-search:focus { + --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) + } +} + +@media (min-width: 40rem) { + .header-button-search { + font-size: var(--text-sm); + line-height: calc(var(--spacing) * 6) + } +} + +@media (min-width: 64rem) { + .header-button-search { + width: calc(var(--spacing) * 60) + } + + @media (hover: hover) { + .header-button-search:hover { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #09090b0d + } + + @supports (color:color-mix(in lab, red, red)) { + .header-button-search:hover { + --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) + } + } + } +} + +.header-button-search:where(.dark,.dark *) { + background-color: #ffffff0d +} + +@supports (color:color-mix(in lab, red, red)) { + .header-button-search:where(.dark,.dark *) { + background-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } +} + +.header-button-search:where(.dark,.dark *) { + color: var(--color-white); + outline-color: #ffffff1a +} + +@supports (color:color-mix(in lab, red, red)) { + .header-button-search:where(.dark,.dark *) { + outline-color: color-mix(in oklab, var(--color-white) 10%, transparent) + } +} + +.header-button-search:where(.dark,.dark *):focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #ffffff0d +} + +@supports (color:color-mix(in lab, red, red)) { + .header-button-search:where(.dark,.dark *):focus { + --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } +} + +@media (min-width: 64rem) { + @media (hover: hover) { + .header-button-search:where(.dark,.dark *):hover { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #ffffff0d + } + + @supports (color:color-mix(in lab, red, red)) { + .header-button-search:where(.dark,.dark *):hover { + --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } + } + } +} + +.header-button-search svg { + margin-right: calc(var(--spacing) * 2); + width: calc(var(--spacing) * 4.5); + height: calc(var(--spacing) * 4.5); + flex-shrink: 0 +} + +.header-button-search kbd { + margin-right: calc(var(--spacing) * .5); + font-family: var(--font-sans); + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + color: var(--color-gray-500); + margin-left: auto +} + +.header-button-search kbd:where(.dark,.dark *) { + color: #fff6 +} + +@supports (color:color-mix(in lab, red, red)) { + .header-button-search kbd:where(.dark,.dark *) { + color: color-mix(in oklab, var(--color-white) 40%, transparent) + } +} + +.header-languages { + grid-template-columns:repeat(1, minmax(0, 1fr)); + width: 100%; + display: inline-grid +} + +.header-light-dark-mode-button { + width: calc(var(--spacing) * 9); + height: calc(var(--spacing) * 9); + cursor: pointer; + border-radius: var(--radius-xl); + background-color: #fffc; + align-items: center; + display: flex +} + +@supports (color:color-mix(in lab, red, red)) { + .header-light-dark-mode-button { + background-color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +.header-light-dark-mode-button { + padding-inline: calc(var(--spacing) * 2.5); + color: var(--color-gray-500); + outline-style: var(--tw-outline-style); + outline-offset: calc(1px * -1); + outline-width: 1px; + outline-color: var(--color-gray-300); + border: 0; +} + +.header-light-dark-mode-button:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #09090b0d +} + +@supports (color:color-mix(in lab, red, red)) { + .header-light-dark-mode-button:focus { + --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) + } +} + +@media (min-width: 64rem) { + @media (hover: hover) { + .header-light-dark-mode-button:hover { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #09090b0d + } + + @supports (color:color-mix(in lab, red, red)) { + .header-light-dark-mode-button:hover { + --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) + } + } + } +} + +.header-light-dark-mode-button:where(.dark,.dark *) { + background-color: #ffffff0d +} + +@supports (color:color-mix(in lab, red, red)) { + .header-light-dark-mode-button:where(.dark,.dark *) { + background-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } +} + +.header-light-dark-mode-button:where(.dark,.dark *) { + color: var(--color-white); + outline-color: #ffffff1a +} + +@supports (color:color-mix(in lab, red, red)) { + .header-light-dark-mode-button:where(.dark,.dark *) { + outline-color: color-mix(in oklab, var(--color-white) 10%, transparent) + } +} + +.header-light-dark-mode-button:where(.dark,.dark *):focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #ffffff0d +} + +@supports (color:color-mix(in lab, red, red)) { + .header-light-dark-mode-button:where(.dark,.dark *):focus { + --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } +} + +@media (min-width: 64rem) { + @media (hover: hover) { + .header-light-dark-mode-button:where(.dark,.dark *):hover { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #ffffff0d + } + + @supports (color:color-mix(in lab, red, red)) { + .header-light-dark-mode-button:where(.dark,.dark *):hover { + --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } + } + } +} + +.header-mobile-menu-button-container { + right: calc(var(--spacing) * 6); + flex-shrink: 0; + position: absolute +} + +@media (min-width: 64rem) { + .header-mobile-menu-button-container { + display: none + } +} + +#mobile-menu-button { + width: calc(var(--spacing) * 10); + height: calc(var(--spacing) * 10); + border-radius: var(--radius-xl); + padding: calc(var(--spacing) * 2); + color: var(--color-gray-900); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: var(--color-gray-300); + background-color: #0000; + justify-content: center; + align-items: center; + display: inline-flex; + position: relative; + border: 0; +} + +#mobile-menu-button:focus-visible { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-color: var(--color-white) +} + +#mobile-menu-button:where(.dark,.dark *) { + color: var(--color-white); + --tw-ring-color: #ffffff26 +} + +@supports (color:color-mix(in lab, red, red)) { + #mobile-menu-button:where(.dark,.dark *) { + --tw-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent) + } +} + +#mobile-menu-button svg { + width: calc(var(--spacing) * 6); + height: calc(var(--spacing) * 6) +} + +.select { + grid-template-columns:repeat(1, minmax(0, 1fr)); + display: inline-grid +} + +.select select { + height: calc(var(--spacing) * 9); + appearance: none; + border-radius: var(--radius-xl); + background-color: #fffc; + grid-row-start: 1; + grid-column-start: 1; + width: 100% +} + +@supports (color:color-mix(in lab, red, red)) { + .select select { + background-color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +.select select { + padding-right: calc(var(--spacing) * 6); + padding-left: calc(var(--spacing) * 3); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + color: var(--color-gray-900); + outline-style: var(--tw-outline-style); + outline-offset: calc(1px * -1); + outline-width: 1px; + outline-color: var(--color-gray-300) +} + +.select select:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #09090b0d +} + +@supports (color:color-mix(in lab, red, red)) { + .select select:focus { + --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) + } +} + +@media (min-width: 40rem) { + .select select { + font-size: var(--text-sm); + line-height: calc(var(--spacing) * 6) + } +} + +@media (min-width: 64rem) { + @media (hover: hover) { + .select select:hover { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #09090b0d + } + + @supports (color:color-mix(in lab, red, red)) { + .select select:hover { + --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) + } + } + } +} + +.select select:where(.dark,.dark *) { + background-color: #ffffff0d +} + +@supports (color:color-mix(in lab, red, red)) { + .select select:where(.dark,.dark *) { + background-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } +} + +.select select:where(.dark,.dark *) { + color: var(--color-white); + outline-color: #ffffff1a +} + +@supports (color:color-mix(in lab, red, red)) { + .select select:where(.dark,.dark *) { + outline-color: color-mix(in oklab, var(--color-white) 10%, transparent) + } +} + +:is(.select select:where(.dark,.dark *)>*) { + background-color: var(--color-gray-800) +} + +.select select:where(.dark,.dark *):focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #ffffff0d +} + +@supports (color:color-mix(in lab, red, red)) { + .select select:where(.dark,.dark *):focus { + --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } +} + +@media (min-width: 64rem) { + @media (hover: hover) { + .select select:where(.dark,.dark *):hover { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + --tw-ring-color: #ffffff0d + } + + @supports (color:color-mix(in lab, red, red)) { + .select select:where(.dark,.dark *):hover { + --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) + } + } + } +} + +.select svg { + pointer-events: none; + margin-right: calc(var(--spacing) * 2); + width: calc(var(--spacing) * 5); + height: calc(var(--spacing) * 5); + color: var(--color-gray-500); + grid-row-start: 1; + grid-column-start: 1; + place-self: center flex-end +} + +@media (min-width: 40rem) { + .select svg { + width: calc(var(--spacing) * 4); + height: calc(var(--spacing) * 4) + } +} + +.select svg:where(.dark,.dark *) { + color: var(--color-gray-400) +} + +footer { + isolation: isolate; + z-index: 10; + border-top-style: var(--tw-border-style); + border-color: #0000000d; + border-top-width: 1px; + position: relative; + background-color: var(--color-white); + + font-family: var(--font-sans); + color: var(--color-gray-800); +} + +@supports (color:color-mix(in lab, red, red)) { + footer { + border-color: color-mix(in oklab, var(--color-black) 5%, transparent) + } +} + +footer:where(.dark,.dark *) { + border-color: #ffffff08; + background-color: #21274d; +} + +footer a, +footer a:link, +footer a:visited { + text-underline-offset: 2px; + text-decoration-line: underline; + color: var(--color-gray-600); + border-bottom: 0; +} + +footer a:where(.dark,.dark *), +footer a:link:where(.dark,.dark *), +footer a:visited:where(.dark,.dark *) { + text-underline-offset: 2px; + text-decoration-line: underline; + color: color-mix(in oklab, var(--color-white) 80%, transparent); +} + +@media (hover: hover) { + footer a:hover { + text-decoration-line: none + } +} + +@supports (color:color-mix(in lab, red, red)) { + footer:where(.dark,.dark *) { + border-color: color-mix(in oklab, var(--color-white) 3%, transparent) + } +} + +footer p { + font-size: var(--text-sm); + line-height: calc(var(--spacing) * 6); + text-wrap: balance; + color: var(--color-gray-600) +} + +footer p:where(.dark,.dark *) { + color: #fffc +} + +@supports (color:color-mix(in lab, red, red)) { + footer p:where(.dark,.dark *) { + color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +.social-icons { + column-gap: calc(var(--spacing) * 6); + display: flex +} + +.social-icons a { + color: var(--color-gray-600) +} + +@media (hover: hover) { + .social-icons a:hover { + color: var(--color-gray-800) + } +} + +.social-icons a:where(.dark,.dark *) { + color: #fffc +} + +@supports (color:color-mix(in lab, red, red)) { + .social-icons a:where(.dark,.dark *) { + color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +@media (hover: hover) { + .social-icons a:where(.dark,.dark *):hover { + color: var(--color-white) + } +} + +.social-icons svg { + width: calc(var(--spacing) * 6); + height: calc(var(--spacing) * 6) +} + +.footer-logo { + height: calc(var(--spacing) * 10); + display: inline-block +} + +.footer-logo svg { + height: calc(var(--spacing) * 10); + color: var(--color-gray-800); + display: inline-block +} + +.footer-logo svg:where(.dark,.dark *) { + color: var(--color-white) +} + +.footer-container { + max-width: var(--container-7xl); + padding-inline: calc(var(--spacing) * 4); + padding-top: calc(var(--spacing) * 16); + padding-bottom: calc(var(--spacing) * 8); + margin-inline: auto +} + +@media (min-width: 40rem) { + .footer-container { + padding-top: calc(var(--spacing) * 24) + } +} + +@media (min-width: 64rem) { + .footer-container { + padding-inline: calc(var(--spacing) * 8); + padding-top: calc(var(--spacing) * 28) + } +} + +@media (min-width: 80rem) { + .footer-grid { + gap: calc(var(--spacing) * 8); + grid-template-columns:repeat(3, minmax(0, 1fr)); + display: grid + } +} + +:where(.footer-grid>div>:not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))) +} + +.footer-links-container { + margin-top: calc(var(--spacing) * 16); + gap: calc(var(--spacing) * 8); + grid-template-columns:repeat(2, minmax(0, 1fr)); + display: grid +} + +@media (min-width: 80rem) { + .footer-links-container { + margin-top: calc(var(--spacing) * 0); + grid-column: span 2/span 2 + } +} + +@media (min-width: 48rem) { + .footer-links-grid { + gap: calc(var(--spacing) * 8); + grid-template-columns:repeat(2, minmax(0, 1fr)); + display: grid + } +} + +.footer-links-grid h3 { + font-size: var(--text-sm); + line-height: calc(var(--spacing) * 6); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: var(--color-gray-900) +} + +.footer-links-grid h3:after { + display: none; +} + +.footer-links-grid h3:where(.dark,.dark *) { + color: var(--color-white) +} + +.footer-links-grid ul { + margin: calc(var(--spacing) * 6) 0 0 0; + list-style: none; + padding: 0; +} + +:where(.footer-links-grid ul>:not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))) +} + +.footer-links-grid ul li { + line-height: initial; +} + +.footer-links-grid a { + font-size: var(--text-sm); + line-height: calc(var(--spacing) * 6); + color: var(--color-gray-600) +} + +@media (hover: hover) { + .footer-links-grid a:hover { + color: var(--color-gray-900) + } +} + +.footer-links-grid a:where(.dark,.dark *) { + color: #fffc +} + +@supports (color:color-mix(in lab, red, red)) { + .footer-links-grid a:where(.dark,.dark *) { + color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +@media (hover: hover) { + .footer-links-grid a:where(.dark,.dark *):hover { + color: var(--color-white) + } +} + +.footer-links-grid div:first-of-type { + margin-bottom: calc(var(--spacing) * 10) +} + +@media (min-width: 48rem) { + .footer-links-grid div:first-of-type { + margin-bottom: calc(var(--spacing) * 0) + } +} + +.footer-credits { + margin-top: calc(var(--spacing) * 0); + border-top-style: var(--tw-border-style); + border-color: #18181b1a; + border-top-width: 1px +} + +@supports (color:color-mix(in lab, red, red)) { + .footer-credits { + border-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent) + } +} + +.footer-credits { + padding-top: calc(var(--spacing) * 8) +} + +@media (min-width: 40rem) { + .footer-credits { + margin-top: calc(var(--spacing) * 20) + } +} + +@media (min-width: 64rem) { + .footer-credits { + margin-top: calc(var(--spacing) * 24) + } +} + +.footer-credits:where(.dark,.dark *) { + border-color: #ffffff1a +} + +@supports (color:color-mix(in lab, red, red)) { + .footer-credits:where(.dark,.dark *) { + border-color: color-mix(in oklab, var(--color-white) 10%, transparent) + } +} + +.footer-credits p { + font-size: var(--text-sm); + line-height: calc(var(--spacing) * 6); + color: var(--color-gray-600) +} + +.footer-credits p:where(.dark,.dark *) { + color: #fffc +} + +@supports (color:color-mix(in lab, red, red)) { + .footer-credits p:where(.dark,.dark *) { + color: color-mix(in oklab, var(--color-white) 80%, transparent) + } +} + +footer a.button-primary { + min-height: calc(var(--spacing) * 10); + cursor: pointer; + width: auto; + padding-inline: calc(var(--spacing) * 5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: var(--color-white); + background-color: #6b58ff; + border-radius: calc(infinity * 1px); + justify-content: center; + align-items: center; + text-decoration-line: none; + display: inline-flex; + position: relative; + overflow: hidden +} + +@media (hover: hover) { + footer a.button-primary:hover { + background-color: oklab(57.9656% .0459944 -.232052 / .9); + color: var(--color-white); + } +} + +footer a.button-primary:focus-visible { + outline-style: var(--tw-outline-style); + outline-offset: 2px; + outline-width: 2px; + outline-color: var(--color-gray-800) +} + +footer a.button-primary:disabled { + pointer-events: none; + opacity: .9 +} diff --git a/styles/php85.css b/styles/php85.css index 6dea02089b..c4136a7772 100644 --- a/styles/php85.css +++ b/styles/php85.css @@ -16,15 +16,6 @@ width: auto; } -.php85 h1, -.php85 h2, -.php85 h3, -.php85 h4, -.php85 h5, -.php85 h6 { - color: inherit; -} - .php85 header.title, .php85 h1:after, .php85 h2:after, @@ -79,6 +70,12 @@ code[class*=language-], pre[class*=language-] { position: relative; overflow: visible; display: inline-block; + color: var(--color-gray-600); +} + +.features-title h2:where(.dark,.dark *), +.before-and-after-title-and-description h2:where(.dark,.dark *) { + color: var(--color-white); } .features-title h2 .genanchor, @@ -90,951 +87,36 @@ code[class*=language-], pre[class*=language-] { margin-left: -30px; height: 30px; width: 30px; - background: url("/images/php8/anchor.svg") scroll no-repeat left center / 21px 16px transparent; - text-decoration: none; - border-bottom: none; - font-size: 0; -} - -.dark .features-title h2 .genanchor, -.dark .before-and-after-title-and-description h2 .genanchor { - background: url("/images/php8/anchor-white.svg") scroll no-repeat left center / 21px 16px transparent; -} - -.features-title h2:hover .genanchor, -.before-and-after-title-and-description h2:hover .genanchor { - display: block; -} - -@layer properties { - @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - --tw-border-style: solid; - --tw-outline-style: solid; - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - --tw-duration: initial; - --tw-ease: initial; - --tw-font-weight: initial; - --tw-leading: initial; - --tw-space-y-reverse: 0; - --tw-space-x-reverse: 0; - --tw-tracking: initial - } - } -} - -@layer theme { - :root, :host { - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --color-red-200: oklch(88.5% .062 18.334); - --color-red-400: oklch(70.4% .191 22.216); - --color-red-900: oklch(39.6% .141 25.723); - --color-green-200: oklch(92.5% .084 155.995); - --color-green-400: oklch(79.2% .209 151.711); - --color-green-500: oklch(72.3% .219 149.579); - --color-green-900: oklch(39.3% .095 152.535); - --color-teal-300: oklch(85.5% .138 181.071); - --color-teal-400: oklch(77.7% .152 181.912); - --color-gray-100: var(--color-zinc-100); - --color-gray-200: var(--color-zinc-200); - --color-gray-300: var(--color-zinc-300); - --color-gray-400: var(--color-zinc-400); - --color-gray-500: var(--color-zinc-500); - --color-gray-600: var(--color-zinc-600); - --color-gray-700: var(--color-zinc-700); - --color-gray-800: var(--color-zinc-800); - --color-gray-900: var(--color-zinc-900); - --color-gray-950: var(--color-zinc-950); - --color-zinc-50: oklch(98.5% 0 0); - --color-zinc-100: oklch(96.7% .001 286.375); - --color-zinc-200: oklch(92% .004 286.32); - --color-zinc-300: oklch(87.1% .006 286.286); - --color-zinc-400: oklch(70.5% .015 286.067); - --color-zinc-500: oklch(55.2% .016 285.938); - --color-zinc-600: oklch(44.2% .017 285.786); - --color-zinc-700: oklch(37% .013 285.805); - --color-zinc-800: oklch(27.4% .006 286.033); - --color-zinc-900: oklch(21% .006 285.885); - --color-zinc-950: oklch(14.1% .005 285.823); - --color-black: #000; - --color-white: #fff; - --spacing: .25rem; - --container-2xl: 42rem; - --container-3xl: 48rem; - --container-4xl: 56rem; - --container-7xl: 80rem; - --text-xs: .75rem; - --text-xs--line-height: calc(1 / .75); - --text-sm: .875rem; - --text-sm--line-height: calc(1.25 / .875); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --text-lg: 1.125rem; - --text-lg--line-height: calc(1.75 / 1.125); - --text-xl: 1.25rem; - --text-xl--line-height: calc(1.75 / 1.25); - --text-2xl: 1.5rem; - --text-2xl--line-height: calc(2 / 1.5); - --text-3xl: 1.875rem; - --text-3xl--line-height: calc(2.25 / 1.875); - --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); - --text-5xl: 3rem; - --text-5xl--line-height: 1; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --tracking-tight: -.025em; - --leading-relaxed: 1.625; - --leading-loose: 2; - --radius-md: .375rem; - --radius-lg: .5rem; - --radius-xl: .75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; - --ease-in-out: cubic-bezier(.4, 0, .2, 1); - --blur-xs: 4px; - --blur-md: 12px; - --default-transition-duration: .15s; - --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); - --default-font-family: var(--font-sans); - --default-mono-font-family: var(--font-mono) - } -} - -@layer base { - *, :after, :before, ::backdrop { - box-sizing: border-box; - border: 0 solid; - margin: 0; - padding: 0 - } - - ::file-selector-button { - box-sizing: border-box; - border: 0 solid; - margin: 0; - padding: 0 - } - - html, :host { - -webkit-text-size-adjust: 100%; - tab-size: 4; - line-height: 1.5; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); - -webkit-tap-highlight-color: transparent - } - - hr { - height: 0; - color: inherit; - border-top-width: 1px - } - - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted - } - - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit - } - - a { - color: inherit; - -webkit-text-decoration: inherit; - -webkit-text-decoration: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit - } - - b, strong { - font-weight: bolder - } - - code, kbd, samp, pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); - font-size: 1em - } - - small { - font-size: 80% - } - - sub, sup { - vertical-align: baseline; - font-size: 75%; - line-height: 0; - position: relative - } - - sub { - bottom: -.25em - } - - sup { - top: -.5em - } - - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse - } - - :-moz-focusring { - outline: auto - } - - progress { - vertical-align: baseline - } - - summary { - display: list-item - } - - ol, ul, menu { - list-style: none - } - - img, svg, video, canvas, audio, iframe, embed, object { - vertical-align: middle; - display: block - } - - img, video { - max-width: 100%; - height: auto - } - - button, input, select, optgroup, textarea { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - opacity: 1; - background-color: #0000; - border-radius: 0 - } - - ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - opacity: 1; - background-color: #0000; - border-radius: 0 - } - - :where(select:is([multiple],[size])) optgroup { - font-weight: bolder - } - - :where(select:is([multiple],[size])) optgroup option { - padding-inline-start: 20px - } - - ::file-selector-button { - margin-inline-end: 4px - } - - ::placeholder { - opacity: 1 - } - - @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { - ::placeholder { - color: currentColor - } - - @supports (color:color-mix(in lab, red, red)) { - ::placeholder { - color: color-mix(in oklab, currentcolor 50%, transparent) - } - } - }textarea { - resize: vertical - } - - ::-webkit-search-decoration { - -webkit-appearance: none - } - - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit - } - - ::-webkit-datetime-edit { - display: inline-flex - } - - ::-webkit-datetime-edit-fields-wrapper { - padding: 0 - } - - ::-webkit-datetime-edit { - padding-block: 0 - } - - ::-webkit-datetime-edit-year-field { - padding-block: 0 - } - - ::-webkit-datetime-edit-month-field { - padding-block: 0 - } - - ::-webkit-datetime-edit-day-field { - padding-block: 0 - } - - ::-webkit-datetime-edit-hour-field { - padding-block: 0 - } - - ::-webkit-datetime-edit-minute-field { - padding-block: 0 - } - - ::-webkit-datetime-edit-second-field { - padding-block: 0 - } - - ::-webkit-datetime-edit-millisecond-field { - padding-block: 0 - } - - ::-webkit-datetime-edit-meridiem-field { - padding-block: 0 - } - - ::-webkit-calendar-picker-indicator { - line-height: 1 - } - - :-moz-ui-invalid { - box-shadow: none - } - - button, input:where([type=button],[type=reset],[type=submit]) { - appearance: button - } - - ::file-selector-button { - appearance: button - } - - ::-webkit-inner-spin-button { - height: auto - } - - ::-webkit-outer-spin-button { - height: auto - } - - [hidden]:where(:not([hidden=until-found])) { - display: none !important - } -} - -@layer components; - -@layer utilities { - .visible { - visibility: visible - } - - .sr-only { - clip-path: inset(50%); - white-space: nowrap; - border-width: 0; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - position: absolute; - overflow: hidden - } - - .static { - position: static - } - - .block { - display: block - } - - .hidden { - display: none - } - - .resize { - resize: both - } - - .opacity-0 { - opacity: 0 - } - - .opacity-25 { - opacity: .25 - } - - .opacity-40 { - opacity: .4 - } - - .filter { - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) - } -} - -body { - background-color: var(--color-white); - font-family: var(--font-sans); - color: var(--color-gray-800); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: relative -} - -body:where(.dark,.dark *) { - color: var(--color-white); - background-color: #181d3a -} - -a { - text-underline-offset: 2px; - text-decoration-line: underline -} - -@media (hover: hover) { - a:hover { - text-decoration-line: none - } -} - -header { - top: calc(var(--spacing) * 0); - z-index: 50; - background-color: #fffc; - width: 100%; - position: sticky -} - -@supports (color:color-mix(in lab, red, red)) { - header { - background-color: color-mix(in oklab, var(--color-white) 80%, transparent) - } -} - -header { - padding-block: calc(var(--spacing) * 3); - --tw-shadow: 0 1px var(--tw-shadow-color, #0000000d); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-backdrop-blur: blur(var(--blur-md)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) -} - -header:where(.dark,.dark *) { - background-color: oklab(24.2643% .00402537 -.0554365/.5) -} - -header nav { - width: 100%; - max-width: var(--container-7xl); - padding-inline: calc(var(--spacing) * 6); - margin-inline: auto; - display: flex; - position: relative -} - -@media (min-width: 64rem) { - header nav { - padding-inline: calc(var(--spacing) * 8) - } -} - -.header-logo { - margin-right: calc(var(--spacing) * 6) -} - -.header-logo svg { - height: calc(var(--spacing) * 10); - color: #6b58ff; - display: inline-block -} - -.header-logo svg:where(.dark,.dark *) { - color: var(--color-white) -} - -.header-menu-container { - margin-top: calc(var(--spacing) * 16); - margin-left: calc(var(--spacing) * -26); - border-top-style: var(--tw-border-style); - border-top-width: 1px; - border-color: var(--color-gray-200); - padding-top: calc(var(--spacing) * 5); - flex-direction: column; - flex: 1; - justify-content: space-between; - align-items: center; - display: none -} - -@media (min-width: 64rem) { - .header-menu-container { - margin-top: calc(var(--spacing) * 0); - margin-left: calc(var(--spacing) * 0); - border-style: var(--tw-border-style); - padding-top: calc(var(--spacing) * 0); - border-width: 0; - flex-direction: row; - display: flex - } -} - -.header-menu-container:where(.dark,.dark *) { - border-color: #ffffff1a -} - -@supports (color:color-mix(in lab, red, red)) { - .header-menu-container:where(.dark,.dark *) { - border-color: color-mix(in oklab, var(--color-white) 10%, transparent) - } -} - -.header-menu-container .select { - width: 100% -} - -@media (min-width: 64rem) { - .header-menu-container .select { - width: calc(var(--spacing) * 16) - } -} - -.header-menu { - margin-bottom: calc(var(--spacing) * 5); - gap: calc(var(--spacing) * 6); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - flex-direction: column; - display: flex -} - -@media (min-width: 64rem) { - .header-menu { - margin-bottom: calc(var(--spacing) * 0); - flex-direction: row; - align-items: center - } -} - -.header-menu a { - text-decoration-line: none -} - -@media (hover: hover) { - .header-menu a:hover { - text-decoration-line: underline - } -} - -.header-actions { - gap: calc(var(--spacing) * 5); - padding-bottom: calc(var(--spacing) * 4); - flex-direction: column; - flex: 1; - display: flex -} - -@media (min-width: 64rem) { - .header-actions { - justify-content: flex-end; - gap: calc(var(--spacing) * 3); - padding-bottom: calc(var(--spacing) * 0); - flex-direction: row - } -} - -.header-button-search { - height: calc(var(--spacing) * 9); - cursor: pointer; - border-radius: var(--radius-xl); - background-color: #fffc; - flex-shrink: 0; - align-items: center; - display: flex -} - -@supports (color:color-mix(in lab, red, red)) { - .header-button-search { - background-color: color-mix(in oklab, var(--color-white) 80%, transparent) - } -} - -.header-button-search { - padding-inline: calc(var(--spacing) * 2.5); - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - white-space: nowrap; - color: var(--color-gray-500); - outline-style: var(--tw-outline-style); - outline-offset: calc(1px * -1); - outline-width: 1px; - outline-color: var(--color-gray-300) -} - -.header-button-search:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #09090b0d -} - -@supports (color:color-mix(in lab, red, red)) { - .header-button-search:focus { - --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) - } -} - -@media (min-width: 40rem) { - .header-button-search { - font-size: var(--text-sm); - line-height: calc(var(--spacing) * 6) - } -} - -@media (min-width: 64rem) { - .header-button-search { - width: calc(var(--spacing) * 60) - } - - @media (hover: hover) { - .header-button-search:hover { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #09090b0d - } - - @supports (color:color-mix(in lab, red, red)) { - .header-button-search:hover { - --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) - } - } - } -} - -.header-button-search:where(.dark,.dark *) { - background-color: #ffffff0d -} - -@supports (color:color-mix(in lab, red, red)) { - .header-button-search:where(.dark,.dark *) { - background-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } -} - -.header-button-search:where(.dark,.dark *) { - color: var(--color-white); - outline-color: #ffffff1a -} - -@supports (color:color-mix(in lab, red, red)) { - .header-button-search:where(.dark,.dark *) { - outline-color: color-mix(in oklab, var(--color-white) 10%, transparent) - } -} - -.header-button-search:where(.dark,.dark *):focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #ffffff0d -} - -@supports (color:color-mix(in lab, red, red)) { - .header-button-search:where(.dark,.dark *):focus { - --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } -} - -@media (min-width: 64rem) { - @media (hover: hover) { - .header-button-search:where(.dark,.dark *):hover { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #ffffff0d - } - - @supports (color:color-mix(in lab, red, red)) { - .header-button-search:where(.dark,.dark *):hover { - --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } - } - } -} - -.header-button-search svg { - margin-right: calc(var(--spacing) * 2); - width: calc(var(--spacing) * 4.5); - height: calc(var(--spacing) * 4.5); - flex-shrink: 0 -} - -.header-button-search kbd { - margin-right: calc(var(--spacing) * .5); - font-family: var(--font-sans); - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - color: var(--color-gray-500); - margin-left: auto -} - -.header-button-search kbd:where(.dark,.dark *) { - color: #fff6 -} - -@supports (color:color-mix(in lab, red, red)) { - .header-button-search kbd:where(.dark,.dark *) { - color: color-mix(in oklab, var(--color-white) 40%, transparent) - } -} - -.header-languages { - grid-template-columns:repeat(1, minmax(0, 1fr)); - width: 100%; - display: inline-grid -} - -.header-languages select:first-of-type { - display: none -} - -@media (min-width: 64rem) { - .header-languages select:first-of-type { - display: block - } -} - -.header-languages select:nth-of-type(2) { - display: block -} - -@media (min-width: 64rem) { - .header-languages select:nth-of-type(2) { - display: none - } -} - -.header-light-dark-mode-button { - width: calc(var(--spacing) * 9); - height: calc(var(--spacing) * 9); - cursor: pointer; - border-radius: var(--radius-xl); - background-color: #fffc; - align-items: center; - display: flex -} - -@supports (color:color-mix(in lab, red, red)) { - .header-light-dark-mode-button { - background-color: color-mix(in oklab, var(--color-white) 80%, transparent) - } -} - -.header-light-dark-mode-button { - padding-inline: calc(var(--spacing) * 2.5); - color: var(--color-gray-500); - outline-style: var(--tw-outline-style); - outline-offset: calc(1px * -1); - outline-width: 1px; - outline-color: var(--color-gray-300) -} - -.header-light-dark-mode-button:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #09090b0d -} - -@supports (color:color-mix(in lab, red, red)) { - .header-light-dark-mode-button:focus { - --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) - } -} - -@media (min-width: 64rem) { - @media (hover: hover) { - .header-light-dark-mode-button:hover { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #09090b0d - } - - @supports (color:color-mix(in lab, red, red)) { - .header-light-dark-mode-button:hover { - --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) - } - } - } -} - -.header-light-dark-mode-button:where(.dark,.dark *) { - background-color: #ffffff0d -} - -@supports (color:color-mix(in lab, red, red)) { - .header-light-dark-mode-button:where(.dark,.dark *) { - background-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } -} - -.header-light-dark-mode-button:where(.dark,.dark *) { - color: var(--color-white); - outline-color: #ffffff1a -} - -@supports (color:color-mix(in lab, red, red)) { - .header-light-dark-mode-button:where(.dark,.dark *) { - outline-color: color-mix(in oklab, var(--color-white) 10%, transparent) - } -} - -.header-light-dark-mode-button:where(.dark,.dark *):focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #ffffff0d -} - -@supports (color:color-mix(in lab, red, red)) { - .header-light-dark-mode-button:where(.dark,.dark *):focus { - --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } -} - -@media (min-width: 64rem) { - @media (hover: hover) { - .header-light-dark-mode-button:where(.dark,.dark *):hover { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #ffffff0d - } - - @supports (color:color-mix(in lab, red, red)) { - .header-light-dark-mode-button:where(.dark,.dark *):hover { - --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } - } - } + background: url("/images/php8/anchor.svg") scroll no-repeat left center / 21px 16px transparent; + text-decoration: none; + border-bottom: none; + font-size: 0; } -.header-mobile-menu-button-container { - right: calc(var(--spacing) * 6); - flex-shrink: 0; - position: absolute +.dark .features-title h2 .genanchor, +.dark .before-and-after-title-and-description h2 .genanchor { + background: url("/images/php8/anchor-white.svg") scroll no-repeat left center / 21px 16px transparent; } -@media (min-width: 64rem) { - .header-mobile-menu-button-container { - display: none - } +.features-title h2:hover .genanchor, +.before-and-after-title-and-description h2:hover .genanchor { + display: block; } -#mobile-menu-button { - width: calc(var(--spacing) * 10); - height: calc(var(--spacing) * 10); - border-radius: var(--radius-xl); - padding: calc(var(--spacing) * 2); - color: var(--color-gray-900); - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: var(--color-gray-300); - background-color: #0000; - justify-content: center; - align-items: center; - display: inline-flex; - position: relative +body { + background-color: var(--color-white); + font-family: var(--font-sans); + color: var(--color-gray-800); } -#mobile-menu-button:focus-visible { - outline-style: var(--tw-outline-style); - outline-width: 2px; - outline-color: var(--color-white) +select { + background-color: #0000; + border: 0; } -#mobile-menu-button:where(.dark,.dark *) { +body:where(.dark,.dark *) { color: var(--color-white); - --tw-ring-color: #ffffff26 -} - -@supports (color:color-mix(in lab, red, red)) { - #mobile-menu-button:where(.dark,.dark *) { - --tw-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent) - } -} - -#mobile-menu-button svg { - width: calc(var(--spacing) * 6); - height: calc(var(--spacing) * 6) + background-color: #181d3a } .hero { @@ -1202,7 +284,8 @@ header nav { margin-inline: auto; margin-bottom: calc(var(--spacing) * 6); height: calc(var(--spacing) * 12); - color: var(--color-gray-800) + color: var(--color-gray-800); + display: block; } @media (min-width: 64rem) { @@ -2027,7 +1110,11 @@ header nav { .code-container button { cursor: pointer; border-radius: var(--radius-lg); - padding: calc(var(--spacing) * 2) + padding: calc(var(--spacing) * 2); + color: inherit; + border: 0; + background-color: transparent; + line-height: 0; } @media (hover: hover) { @@ -2987,355 +2074,86 @@ header nav { .docs-content p code, .docs-content blockquote code { padding-inline: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * .5); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)) -} - -:is(.docs-content p code,.docs-content blockquote code):where(.dark,.dark *) { - background-color: #ffffff1a -} - -@supports (color:color-mix(in lab, red, red)) { - :is(.docs-content p code,.docs-content blockquote code):where(.dark,.dark *) { - background-color: color-mix(in oklab, var(--color-white) 10%, transparent) - } -} - -.docs-content table { - border-collapse: collapse; - border: 1px solid #6b58ff; - border-radius: 8px; - width: 100%; - margin-bottom: 1.5rem; - overflow: hidden -} - -.docs-content thead { - background-color: #f7fafc -} - -.docs-content th { - text-align: left; - border-bottom: 2px solid #6b58ff; - padding: 1rem; - font-weight: 600 -} - -.docs-content td { - border-bottom: 1px solid #6b58ff; - padding: 1rem -} - -.docs-content tbody tr:last-child td { - border-bottom: none -} - -.docs-content tbody tr:hover { - background-color: #f7fafc -} - -.docs-content blockquote { - margin-bottom: calc(var(--spacing) * 6); - border-radius: var(--radius-2xl); - border-style: var(--tw-border-style); - background-color: var(--color-white); - padding-inline: calc(var(--spacing) * 4); - padding-block: calc(var(--spacing) * 3); - border-width: 2px; - border-color: #6b58ff -} - -.docs-content blockquote:where(.dark,.dark *) { - background-color: #ffffff1a -} - -@supports (color:color-mix(in lab, red, red)) { - .docs-content blockquote:where(.dark,.dark *) { - background-color: color-mix(in oklab, var(--color-white) 10%, transparent) - } -} - -.docs-content blockquote p { - margin-bottom: calc(var(--spacing) * 2) -} - -.docs-content em { - font-style: italic -} - -.docs-content hr { - border: none; - border-top: 1px solid #6b58ff; - margin: 2rem 0 -} - -footer { - isolation: isolate; - z-index: 10; - border-top-style: var(--tw-border-style); - border-color: #0000000d; - border-top-width: 1px; - position: relative -} - -@supports (color:color-mix(in lab, red, red)) { - footer { - border-color: color-mix(in oklab, var(--color-black) 5%, transparent) - } -} - -footer:where(.dark,.dark *) { - border-color: #ffffff08 -} - -@supports (color:color-mix(in lab, red, red)) { - footer:where(.dark,.dark *) { - border-color: color-mix(in oklab, var(--color-white) 3%, transparent) - } -} - -footer:where(.dark,.dark *) { - background-color: oklab(39.0688% .00431919 -.103547/.3) -} - -footer p { - font-size: var(--text-sm); - line-height: calc(var(--spacing) * 6); - text-wrap: balance; - color: var(--color-gray-600) -} - -footer p:where(.dark,.dark *) { - color: #fffc -} - -@supports (color:color-mix(in lab, red, red)) { - footer p:where(.dark,.dark *) { - color: color-mix(in oklab, var(--color-white) 80%, transparent) - } -} - -.social-icons { - column-gap: calc(var(--spacing) * 6); - display: flex -} - -.social-icons a { - color: var(--color-gray-600) -} - -@media (hover: hover) { - .social-icons a:hover { - color: var(--color-gray-800) - } -} - -.social-icons a:where(.dark,.dark *) { - color: #fffc -} - -@supports (color:color-mix(in lab, red, red)) { - .social-icons a:where(.dark,.dark *) { - color: color-mix(in oklab, var(--color-white) 80%, transparent) - } -} - -@media (hover: hover) { - .social-icons a:where(.dark,.dark *):hover { - color: var(--color-white) - } -} - -.social-icons svg { - width: calc(var(--spacing) * 6); - height: calc(var(--spacing) * 6) -} - -.footer-logo { - height: calc(var(--spacing) * 10); - display: inline-block -} - -.footer-logo svg { - height: calc(var(--spacing) * 10); - color: var(--color-gray-800); - display: inline-block -} - -.footer-logo svg:where(.dark,.dark *) { - color: var(--color-white) -} - -.footer-container { - max-width: var(--container-7xl); - padding-inline: calc(var(--spacing) * 4); - padding-top: calc(var(--spacing) * 16); - padding-bottom: calc(var(--spacing) * 8); - margin-inline: auto -} - -@media (min-width: 40rem) { - .footer-container { - padding-top: calc(var(--spacing) * 24) - } -} - -@media (min-width: 64rem) { - .footer-container { - padding-inline: calc(var(--spacing) * 8); - padding-top: calc(var(--spacing) * 28) - } -} - -@media (min-width: 80rem) { - .footer-grid { - gap: calc(var(--spacing) * 8); - grid-template-columns:repeat(3, minmax(0, 1fr)); - display: grid - } -} - -:where(.footer-grid>div>:not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))) -} - -.footer-links-container { - margin-top: calc(var(--spacing) * 16); - gap: calc(var(--spacing) * 8); - grid-template-columns:repeat(2, minmax(0, 1fr)); - display: grid -} - -@media (min-width: 80rem) { - .footer-links-container { - margin-top: calc(var(--spacing) * 0); - grid-column: span 2/span 2 - } -} - -@media (min-width: 48rem) { - .footer-links-grid { - gap: calc(var(--spacing) * 8); - grid-template-columns:repeat(2, minmax(0, 1fr)); - display: grid - } -} - -.footer-links-grid h3 { - font-size: var(--text-sm); - line-height: calc(var(--spacing) * 6); - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: var(--color-gray-900) -} - -.footer-links-grid h3:where(.dark,.dark *) { - color: var(--color-white) -} - -.footer-links-grid ul { - margin-top: calc(var(--spacing) * 6) -} - -:where(.footer-links-grid ul>:not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))) -} - -.footer-links-grid a { - font-size: var(--text-sm); - line-height: calc(var(--spacing) * 6); - color: var(--color-gray-600) -} - -@media (hover: hover) { - .footer-links-grid a:hover { - color: var(--color-gray-900) - } + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)) } -.footer-links-grid a:where(.dark,.dark *) { - color: #fffc +:is(.docs-content p code,.docs-content blockquote code):where(.dark,.dark *) { + background-color: #ffffff1a } @supports (color:color-mix(in lab, red, red)) { - .footer-links-grid a:where(.dark,.dark *) { - color: color-mix(in oklab, var(--color-white) 80%, transparent) - } -} - -@media (hover: hover) { - .footer-links-grid a:where(.dark,.dark *):hover { - color: var(--color-white) + :is(.docs-content p code,.docs-content blockquote code):where(.dark,.dark *) { + background-color: color-mix(in oklab, var(--color-white) 10%, transparent) } } -.footer-links-grid div:first-of-type { - margin-bottom: calc(var(--spacing) * 10) +.docs-content table { + border-collapse: collapse; + border: 1px solid #6b58ff; + border-radius: 8px; + width: 100%; + margin-bottom: 1.5rem; + overflow: hidden } -@media (min-width: 48rem) { - .footer-links-grid div:first-of-type { - margin-bottom: calc(var(--spacing) * 0) - } +.docs-content thead { + background-color: #f7fafc } -.footer-credits { - margin-top: calc(var(--spacing) * 0); - border-top-style: var(--tw-border-style); - border-color: #18181b1a; - border-top-width: 1px +.docs-content th { + text-align: left; + border-bottom: 2px solid #6b58ff; + padding: 1rem; + font-weight: 600 } -@supports (color:color-mix(in lab, red, red)) { - .footer-credits { - border-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent) - } +.docs-content td { + border-bottom: 1px solid #6b58ff; + padding: 1rem } -.footer-credits { - padding-top: calc(var(--spacing) * 8) +.docs-content tbody tr:last-child td { + border-bottom: none } -@media (min-width: 40rem) { - .footer-credits { - margin-top: calc(var(--spacing) * 20) - } +.docs-content tbody tr:hover { + background-color: #f7fafc } -@media (min-width: 64rem) { - .footer-credits { - margin-top: calc(var(--spacing) * 24) - } +.docs-content blockquote { + margin-bottom: calc(var(--spacing) * 6); + border-radius: var(--radius-2xl); + border-style: var(--tw-border-style); + background-color: var(--color-white); + padding-inline: calc(var(--spacing) * 4); + padding-block: calc(var(--spacing) * 3); + border-width: 2px; + border-color: #6b58ff } -.footer-credits:where(.dark,.dark *) { - border-color: #ffffff1a +.docs-content blockquote:where(.dark,.dark *) { + background-color: #ffffff1a } @supports (color:color-mix(in lab, red, red)) { - .footer-credits:where(.dark,.dark *) { - border-color: color-mix(in oklab, var(--color-white) 10%, transparent) + .docs-content blockquote:where(.dark,.dark *) { + background-color: color-mix(in oklab, var(--color-white) 10%, transparent) } } -.footer-credits p { - font-size: var(--text-sm); - line-height: calc(var(--spacing) * 6); - color: var(--color-gray-600) +.docs-content blockquote p { + margin-bottom: calc(var(--spacing) * 2) } -.footer-credits p:where(.dark,.dark *) { - color: #fffc +.docs-content em { + font-style: italic } -@supports (color:color-mix(in lab, red, red)) { - .footer-credits p:where(.dark,.dark *) { - color: color-mix(in oklab, var(--color-white) 80%, transparent) - } +.docs-content hr { + border: none; + border-top: 1px solid #6b58ff; + margin: 2rem 0 } .noise { @@ -3407,149 +2225,6 @@ footer p:where(.dark,.dark *) { color: var(--color-red-400) } -.select { - grid-template-columns:repeat(1, minmax(0, 1fr)); - display: inline-grid -} - -.select select { - height: calc(var(--spacing) * 9); - appearance: none; - border-radius: var(--radius-xl); - background-color: #fffc; - grid-row-start: 1; - grid-column-start: 1; - width: 100% -} - -@supports (color:color-mix(in lab, red, red)) { - .select select { - background-color: color-mix(in oklab, var(--color-white) 80%, transparent) - } -} - -.select select { - padding-right: calc(var(--spacing) * 6); - padding-left: calc(var(--spacing) * 3); - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - color: var(--color-gray-900); - outline-style: var(--tw-outline-style); - outline-offset: calc(1px * -1); - outline-width: 1px; - outline-color: var(--color-gray-300) -} - -.select select:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #09090b0d -} - -@supports (color:color-mix(in lab, red, red)) { - .select select:focus { - --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) - } -} - -@media (min-width: 40rem) { - .select select { - font-size: var(--text-sm); - line-height: calc(var(--spacing) * 6) - } -} - -@media (min-width: 64rem) { - @media (hover: hover) { - .select select:hover { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #09090b0d - } - - @supports (color:color-mix(in lab, red, red)) { - .select select:hover { - --tw-ring-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent) - } - } - } -} - -.select select:where(.dark,.dark *) { - background-color: #ffffff0d -} - -@supports (color:color-mix(in lab, red, red)) { - .select select:where(.dark,.dark *) { - background-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } -} - -.select select:where(.dark,.dark *) { - color: var(--color-white); - outline-color: #ffffff1a -} - -@supports (color:color-mix(in lab, red, red)) { - .select select:where(.dark,.dark *) { - outline-color: color-mix(in oklab, var(--color-white) 10%, transparent) - } -} - -:is(.select select:where(.dark,.dark *)>*) { - background-color: var(--color-gray-800) -} - -.select select:where(.dark,.dark *):focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #ffffff0d -} - -@supports (color:color-mix(in lab, red, red)) { - .select select:where(.dark,.dark *):focus { - --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } -} - -@media (min-width: 64rem) { - @media (hover: hover) { - .select select:where(.dark,.dark *):hover { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - --tw-ring-color: #ffffff0d - } - - @supports (color:color-mix(in lab, red, red)) { - .select select:where(.dark,.dark *):hover { - --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent) - } - } - } -} - -.select svg { - pointer-events: none; - margin-right: calc(var(--spacing) * 2); - width: calc(var(--spacing) * 5); - height: calc(var(--spacing) * 5); - color: var(--color-gray-500); - grid-row-start: 1; - grid-column-start: 1; - place-self: center flex-end -} - -@media (min-width: 40rem) { - .select svg { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4) - } -} - -.select svg:where(.dark,.dark *) { - color: var(--color-gray-400) -} - .php85 .phpcode { padding: 1em; } @@ -3614,7 +2289,6 @@ footer p:where(.dark,.dark *) { min-height: calc(var(--spacing) * 10); cursor: pointer; width: 100%; - padding-inline: calc(var(--spacing) * 5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-semibold); @@ -3650,7 +2324,8 @@ footer p:where(.dark,.dark *) { @media (min-width: 40rem) { .php85 #layout-content a.button-primary { - width: auto + width: auto; + padding-inline: calc(var(--spacing) * 5); } } @@ -3659,7 +2334,6 @@ footer p:where(.dark,.dark *) { cursor: pointer; background-color: var(--color-white); width: 100%; - padding-inline: calc(var(--spacing) * 5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-semibold); @@ -3704,7 +2378,8 @@ footer p:where(.dark,.dark *) { @media (min-width: 40rem) { .php85 #layout-content a.button-secondary { - width: auto + width: auto; + padding-inline: calc(var(--spacing) * 5); } } @@ -3712,293 +2387,3 @@ footer p:where(.dark,.dark *) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) } - -@property --tw-blur { - syntax: "*"; - inherits: false -} - -@property --tw-brightness { - syntax: "*"; - inherits: false -} - -@property --tw-contrast { - syntax: "*"; - inherits: false -} - -@property --tw-grayscale { - syntax: "*"; - inherits: false -} - -@property --tw-hue-rotate { - syntax: "*"; - inherits: false -} - -@property --tw-invert { - syntax: "*"; - inherits: false -} - -@property --tw-opacity { - syntax: "*"; - inherits: false -} - -@property --tw-saturate { - syntax: "*"; - inherits: false -} - -@property --tw-sepia { - syntax: "*"; - inherits: false -} - -@property --tw-drop-shadow { - syntax: "*"; - inherits: false -} - -@property --tw-drop-shadow-color { - syntax: "*"; - inherits: false -} - -@property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100% -} - -@property --tw-drop-shadow-size { - syntax: "*"; - inherits: false -} - -@property --tw-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000 -} - -@property --tw-shadow-color { - syntax: "*"; - inherits: false -} - -@property --tw-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100% -} - -@property --tw-inset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000 -} - -@property --tw-inset-shadow-color { - syntax: "*"; - inherits: false -} - -@property --tw-inset-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100% -} - -@property --tw-ring-color { - syntax: "*"; - inherits: false -} - -@property --tw-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000 -} - -@property --tw-inset-ring-color { - syntax: "*"; - inherits: false -} - -@property --tw-inset-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000 -} - -@property --tw-ring-inset { - syntax: "*"; - inherits: false -} - -@property --tw-ring-offset-width { - syntax: ""; - inherits: false; - initial-value: 0 -} - -@property --tw-ring-offset-color { - syntax: "*"; - inherits: false; - initial-value: #fff -} - -@property --tw-ring-offset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000 -} - -@property --tw-backdrop-blur { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-brightness { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-contrast { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-grayscale { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-hue-rotate { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-invert { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-opacity { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-saturate { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-sepia { - syntax: "*"; - inherits: false -} - -@property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid -} - -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid -} - -@property --tw-gradient-position { - syntax: "*"; - inherits: false -} - -@property --tw-gradient-from { - syntax: ""; - inherits: false; - initial-value: #0000 -} - -@property --tw-gradient-via { - syntax: ""; - inherits: false; - initial-value: #0000 -} - -@property --tw-gradient-to { - syntax: ""; - inherits: false; - initial-value: #0000 -} - -@property --tw-gradient-stops { - syntax: "*"; - inherits: false -} - -@property --tw-gradient-via-stops { - syntax: "*"; - inherits: false -} - -@property --tw-gradient-from-position { - syntax: ""; - inherits: false; - initial-value: 0% -} - -@property --tw-gradient-via-position { - syntax: ""; - inherits: false; - initial-value: 50% -} - -@property --tw-gradient-to-position { - syntax: ""; - inherits: false; - initial-value: 100% -} - -@property --tw-duration { - syntax: "*"; - inherits: false -} - -@property --tw-ease { - syntax: "*"; - inherits: false -} - -@property --tw-font-weight { - syntax: "*"; - inherits: false -} - -@property --tw-leading { - syntax: "*"; - inherits: false -} - -@property --tw-space-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0 -} - -@property --tw-space-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0 -} - -@property --tw-tracking { - syntax: "*"; - inherits: false -} diff --git a/styles/theme-base.css b/styles/theme-base.css index e35c0e9edc..66fb1374a4 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -546,7 +546,7 @@ pre.info { #layout { - margin: 0 auto 1.5rem; + margin: 0 auto; clear:both; } @@ -610,37 +610,6 @@ pre.info { #results_nav_list li.current { font-weight: bolder; } -/* Footer styling */ - -body > footer { - clear: both; - overflow: auto; - line-height:3rem; -} -body > footer .footer-content { - margin: 1.5rem auto 0 ; - padding:0 1.5rem; - -moz-box-sizing:border-box; - box-sizing:border-box; -} - -body > footer ul { - margin:0; - padding:0; -} - -body > footer .footmenu li { - display: inline-block; - margin:0 0.75rem; -} -body > footer a { - display:inline-block; - border-bottom:0; -} -body > footer a:hover, -body > footer a:focus { - color:var(--light-magenta-color); -} /* {{{ ElePHPants photo stream */ @@ -1427,6 +1396,7 @@ aside.tips div.inner { } .newsentry h2 { font-weight:normal; + border-bottom: 1px dotted #000; } .newsentry h2 .release-state { float: right; diff --git a/styles/variables.css b/styles/variables.css new file mode 100644 index 0000000000..96e4377bca --- /dev/null +++ b/styles/variables.css @@ -0,0 +1,289 @@ +@property --tw-blur { + syntax: "*"; + inherits: false +} + +@property --tw-brightness { + syntax: "*"; + inherits: false +} + +@property --tw-contrast { + syntax: "*"; + inherits: false +} + +@property --tw-grayscale { + syntax: "*"; + inherits: false +} + +@property --tw-hue-rotate { + syntax: "*"; + inherits: false +} + +@property --tw-invert { + syntax: "*"; + inherits: false +} + +@property --tw-opacity { + syntax: "*"; + inherits: false +} + +@property --tw-saturate { + syntax: "*"; + inherits: false +} + +@property --tw-sepia { + syntax: "*"; + inherits: false +} + +@property --tw-drop-shadow { + syntax: "*"; + inherits: false +} + +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false +} + +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100% +} + +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false +} + +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000 +} + +@property --tw-shadow-color { + syntax: "*"; + inherits: false +} + +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100% +} + +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000 +} + +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false +} + +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100% +} + +@property --tw-ring-color { + syntax: "*"; + inherits: false +} + +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000 +} + +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false +} + +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000 +} + +@property --tw-ring-inset { + syntax: "*"; + inherits: false +} + +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0 +} + +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff +} + +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000 +} + +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false +} + +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false +} + +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid +} + +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid +} + +@property --tw-gradient-position { + syntax: "*"; + inherits: false +} + +@property --tw-gradient-from { + syntax: ""; + inherits: false; + initial-value: #0000 +} + +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000 +} + +@property --tw-gradient-to { + syntax: ""; + inherits: false; + initial-value: #0000 +} + +@property --tw-gradient-stops { + syntax: "*"; + inherits: false +} + +@property --tw-gradient-via-stops { + syntax: "*"; + inherits: false +} + +@property --tw-gradient-from-position { + syntax: ""; + inherits: false; + initial-value: 0% +} + +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50% +} + +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100% +} + +@property --tw-duration { + syntax: "*"; + inherits: false +} + +@property --tw-ease { + syntax: "*"; + inherits: false +} + +@property --tw-font-weight { + syntax: "*"; + inherits: false +} + +@property --tw-leading { + syntax: "*"; + inherits: false +} + +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0 +} + +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0 +} + +@property --tw-tracking { + syntax: "*"; + inherits: false +} From a371e83302c673b2b0de6907edf8f19392d9a497 Mon Sep 17 00:00:00 2001 From: Sergey Panteleev Date: Fri, 21 Nov 2025 20:33:13 +0300 Subject: [PATCH 2/9] redesign news & conferences --- conferences/index.php | 18 +++---- include/layout.inc | 30 +++++++---- index.php | 20 ++++--- styles/theme-base.css | 120 ++++++++++++++++++++++++++++-------------- 4 files changed, 115 insertions(+), 73 deletions(-) diff --git a/conferences/index.php b/conferences/index.php index 3718ba5baf..c51c2b8057 100644 --- a/conferences/index.php +++ b/conferences/index.php @@ -19,21 +19,17 @@ $link = preg_replace('~^(http://php.net/|https://www.php.net/)~', '', $entry["id"]); $id = parse_url($entry["id"], PHP_URL_FRAGMENT); $date = date_format(date_create($entry["updated"]), 'Y-m-d'); - $content .= '
'; - $content .= '

' . $entry["title"] . '

'; - $content .= '
'; - - if (isset($entry["newsImage"])) { - $content .= sprintf('', $entry["newsImage"]["link"], $entry["newsImage"]["content"]); - } + $content .= '
'; + $content .= '
'; + $content .= '
' . $date . '
'; + $content .= '
' . $entry["title"] . '
'; + $content .= '
' . $entry["content"] . '
'; $content .= '
'; - $content .= '
'; - $content .= $entry["content"]; + $content .= '
'; + $content .= sprintf('', $entry["newsImage"]["link"], $entry["newsImage"]["content"]); $content .= '
'; $content .= '
'; - - $panels .= sprintf('

%s

', $entry["newsImage"]["link"], $entry["title"]); } $content .= "
"; diff --git a/include/layout.inc b/include/layout.inc index 2a69022a6d..1d7a8549db 100644 --- a/include/layout.inc +++ b/include/layout.inc @@ -423,18 +423,26 @@ function print_news($news, $dog, $max = 5, $return = false) { continue; } - echo << -
- -

{$item["title"]}

-
-
-
{$image}
- {$item["content"]} -
- + $imageBlock = ''; + if ($image) { + $imageBlock = << + {$image} +
+ EOT; + } + echo << +
+
+
+ {$item["title"]} +
+
{$item["content"]}
+
+ {$imageBlock} +
EOT; } diff --git a/index.php b/index.php index cb73ffd6b0..7564271af9 100644 --- a/index.php +++ b/index.php @@ -65,17 +65,15 @@ $date_human = date_format($date, 'd M Y'); $date_w3c = date_format($date, DATE_W3C); $content .= << -
- -

- {$entry["title"]} -

-
-
- {$entry["content"]} -
- +
+
+
+
+ {$entry["title"]} +
+
{$entry["content"]}
+
+
NEWSENTRY; } $content .= '

Older News Entries

'; diff --git a/styles/theme-base.css b/styles/theme-base.css index 66fb1374a4..b42c99e758 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -1385,46 +1385,6 @@ aside.tips div.inner { } /* }}} */ -/* {{{ News */ -.newsentry header h2, -.newsItem header h2 { - margin:0; -} -.newsentry { - margin: 0 0 3rem; - position: relative; -} -.newsentry h2 { - font-weight:normal; - border-bottom: 1px dotted #000; -} -.newsentry h2 .release-state { - float: right; - opacity: 0.8; -} -.newsentry header time, -.newsItem header time { - float:right; - line-height:3rem; -} - -.newsentry p { - line-height: 1.7rem; -} - -.newsentry .newsimage a, -.newsItem .newsImage a { - float: right; - border: 0; - padding: 10px; -} - -.newsentry .newsimage img, -.newsItem .newsImage img { - max-width: 350px; -} -/* }}} */ - /* {{{ Logo Downloads */ .logo-list ul{ @@ -1451,6 +1411,72 @@ td { word-wrap: break-word; } +.news { + flex-direction: row; +} + +.news__item { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: calc(var(--spacing) * 10); + padding-bottom: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); + margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); + border-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent); + border-width: 0 0 1px 0; + border-style: solid; +} + +.news__item:last-child { + border-width: 0; +} + +.news__content { +} + +.news__date { + color: var(--color-gray-500); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); +} + +.news__title { + margin-top: calc(var(--spacing) * 3); +} + +#layout-content .news__title a, +#layout-content .news__title a:link, +#layout-content .news__title a:visited { + color: var(--color-gray-900); + font-weight: var(--font-weight-medium); + font-size: var(--text-2xl); + line-height: calc(var(--spacing) * 6); + text-decoration: none; + border: 0; +} + +.news__text { + color: var(--color-gray-600); + font-size: var(--text-base); + line-height: calc(var(--spacing) * 6); + margin-top: calc(var(--spacing) * 5); +} + +.news__image { + width: calc(var(--spacing) * 64); + flex-shrink: 0; +} + +.news__image a { + border: 0; +} + +.news__image img { + max-width: 100%; + background-color: var(--color-gray-100); +} + @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Make table elements block for stacking */ table, thead, tbody, th, td, tr { @@ -1487,4 +1513,18 @@ td { unicode-bidi: isolate; content: attr(data-label); } + + .news__item { + flex-direction: column; + gap: calc(var(--spacing) * 5); + } + + .news__image { + order: 1; + width: 100%; + } + + .news__content { + order: 2; + } } From 740c8368e0614d82681df6aa29ad4f12933e0a3e Mon Sep 17 00:00:00 2001 From: Sergey Panteleev Date: Fri, 21 Nov 2025 23:59:06 +0300 Subject: [PATCH 3/9] nits --- styles/php85.css | 3 ++- styles/theme-base.css | 12 ++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/styles/php85.css b/styles/php85.css index c4136a7772..15e55f38d6 100644 --- a/styles/php85.css +++ b/styles/php85.css @@ -773,7 +773,8 @@ body:where(.dark,.dark *) { margin-bottom: calc(var(--spacing) * 4); width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); - color: #6b58ff + color: #6b58ff; + display: block; } .features-col svg:where(.dark,.dark *) { diff --git a/styles/theme-base.css b/styles/theme-base.css index b42c99e758..1c874cd9cb 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -1416,6 +1416,7 @@ td { } .news__item { + font-family: var(--font-sans); display: flex; flex-direction: row; justify-content: space-between; @@ -1433,6 +1434,9 @@ td { } .news__content { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + color: var(--color-gray-600); } .news__date { @@ -1448,12 +1452,12 @@ td { #layout-content .news__title a, #layout-content .news__title a:link, #layout-content .news__title a:visited { - color: var(--color-gray-900); - font-weight: var(--font-weight-medium); - font-size: var(--text-2xl); - line-height: calc(var(--spacing) * 6); + color: var(--color-gray-800); + font-weight: var(--font-weight-bold); text-decoration: none; border: 0; + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); } .news__text { From d82608d8e74dd2595352e38993f1be374cd6ab8c Mon Sep 17 00:00:00 2001 From: Sergey Panteleev Date: Thu, 27 Nov 2025 08:22:15 +0300 Subject: [PATCH 4/9] nits --- conferences/index.php | 11 ++++++----- include/footer.inc | 2 +- include/header.inc | 2 +- include/layout.inc | 9 +++++---- index.php | 8 ++++---- js/common.js | 1 + releases/8.5/release.inc | 28 ++++++++++++++-------------- styles/theme-base.css | 8 +++++++- 8 files changed, 39 insertions(+), 30 deletions(-) diff --git a/conferences/index.php b/conferences/index.php index c51c2b8057..5e2df2132e 100644 --- a/conferences/index.php +++ b/conferences/index.php @@ -19,15 +19,16 @@ $link = preg_replace('~^(http://php.net/|https://www.php.net/)~', '', $entry["id"]); $id = parse_url($entry["id"], PHP_URL_FRAGMENT); $date = date_format(date_create($entry["updated"]), 'Y-m-d'); + $date_w3c = date_format(date_create($entry["updated"]), DATE_W3C); - $content .= '
'; + $content .= '
'; $content .= '
'; - $content .= '
' . $date . '
'; - $content .= '
' . $entry["title"] . '
'; - $content .= '
' . $entry["content"] . '
'; + $content .= '
' . $date . '
'; + $content .= '
' . $entry["title"] . '
'; + $content .= '
' . $entry["content"] . '
'; $content .= '
'; $content .= '
'; - $content .= sprintf('', $entry["newsImage"]["link"], $entry["newsImage"]["content"]); + $content .= sprintf('%s', $entry["newsImage"]["link"], $entry["newsImage"]["content"], $entry["title"]); $content .= '
'; $content .= '
'; } diff --git a/include/footer.inc b/include/footer.inc index 6ef352653f..9d4ea4f994 100644 --- a/include/footer.inc +++ b/include/footer.inc @@ -71,7 +71,7 @@ if (isset($config['elephpants']) && $config['elephpants']) {
-
{$item["title"]} + {$item["title"]}
-
{$item["content"]}
+
{$item["content"]}
{$imageBlock}
diff --git a/index.php b/index.php index 7564271af9..957e26e26a 100644 --- a/index.php +++ b/index.php @@ -65,13 +65,13 @@ $date_human = date_format($date, 'd M Y'); $date_w3c = date_format($date, DATE_W3C); $content .= << +
-
+
$date_human
- {$entry["title"]} + {$entry["title"]}
-
{$entry["content"]}
+
{$entry["content"]}
NEWSENTRY; diff --git a/js/common.js b/js/common.js index c780631f2a..f66c772224 100644 --- a/js/common.js +++ b/js/common.js @@ -423,6 +423,7 @@ $(document).ready(function () { for (photo in data) { photo = data[photo]; link = $(''); + link.attr('aria-label', "See elephpant photo"); link.attr('href', photo.url); link.attr('title', photo.title); image = $(''); diff --git a/releases/8.5/release.inc b/releases/8.5/release.inc index 94ed48948d..051bca754f 100644 --- a/releases/8.5/release.inc +++ b/releases/8.5/release.inc @@ -206,7 +206,7 @@ common_header(message('common_header', $lang));
-
-
-
-
-
-