diff --git a/docs/ui/preview-src/ui-model.yml b/docs/ui/preview-src/ui-model.yml index 4c05535eb..71b9644aa 100644 --- a/docs/ui/preview-src/ui-model.yml +++ b/docs/ui/preview-src/ui-model.yml @@ -1,7 +1,7 @@ antoraVersion: '1.0.0' site: url: http://localhost:5252 - title: Brand Docs + title: MrDocs homeUrl: &home_url /xyz/5.2/index.html components: - name: abc diff --git a/docs/ui/src/css/base.css b/docs/ui/src/css/base.css index 4cdb6a746..ec4b6e8af 100644 --- a/docs/ui/src/css/base.css +++ b/docs/ui/src/css/base.css @@ -9,6 +9,16 @@ html { font-size: var(--body-font-size); height: 100%; scroll-behavior: smooth; + background: + radial-gradient(ellipse 100% 100% at var(--x1) var(--y1), rgba(89, 36, 99, 0.8), transparent 50%), + radial-gradient(ellipse 80% 120% at var(--x2) var(--y2), rgba(138, 214, 236, 0.5), transparent 55%), + radial-gradient(ellipse 150% 90% at var(--x3) var(--y3), rgba(40, 98, 114, 0.6), transparent 65%), + radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%), + linear-gradient(135deg, #124b83, #124b83, #124b83); + background-attachment: fixed; + background-blend-mode: screen; + background-size: cover; + background-repeat: no-repeat; } @media screen and (min-width: 1024px) { @@ -18,13 +28,14 @@ html { } body { - background: var(--body-background); + /* Remove the solid background since we're using gradient on html */ + /* background: var(--body-background); */ color: var(--body-font-color); font-family: var(--body-font-family); line-height: var(--body-line-height); margin: 0; tab-size: 4; - word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */ + word-wrap: anywhere; } a { diff --git a/docs/ui/src/css/custom.css b/docs/ui/src/css/custom.css new file mode 100644 index 000000000..ef735009d --- /dev/null +++ b/docs/ui/src/css/custom.css @@ -0,0 +1,89 @@ +/* Inherits styles from landing page */ + +.dotted { + background-image: url("../../../../docs/website/assets/halftone.png"); + background-size: 158%; + background-repeat: repeat-y; + background-position: center center; + width: 190px; + height: 100vh; + position: fixed; + left: 0; + opacity: 0.1; + top: 0; + z-index: -5; + pointer-events: none; +} + +.dotted-right { + background-image: url("../../../../docs/website/assets/halftone.png"); + background-size: 158%; + transform: rotate(180deg); + background-repeat: repeat-y; + background-position: center center; + width: 190px; + height: 100vh; + position: fixed; + right: 0; + opacity: 0.1; + top: 0; + z-index: -5; + pointer-events: none; +} + +@media (max-width: 576px) { + .dotted, + .dotted-right { + opacity: 0.05; + } + + .dotted { + left: -80px; + } + + .dotted-right { + right: -80px; + } +} + +.doc { + color: var(--navbar-font-color); +} + +.doc .content { + backdrop-filter: blur(10px); +} + +.body .article { + backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.1); +} + +.doc h1, +.doc h2, +.doc h3, +.doc h4, +.doc h5, +.doc h6 { + color: var(--navbar-font-color); +} + +.toc.sidebar .toc-menu { + color: var(--navbar-font-color); +} + +.toc.sidebar .toc-menu h3 { + color: var(--navbar-font-color); +} + +.breadcrumbs li { + color: var(--color-white-50); +} + +.toc .toc-menu a.is-active { + color: var(--color-white-50); +} + +.nav-text { + color: var(--color-white-50); +} diff --git a/docs/ui/src/css/header.css b/docs/ui/src/css/header.css index ec0348ae2..d612ac141 100644 --- a/docs/ui/src/css/header.css +++ b/docs/ui/src/css/header.css @@ -9,7 +9,8 @@ body { } .navbar { - background: var(--navbar-background); + background-color: rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); color: var(--navbar-font-color); font-size: calc(16 / var(--rem-base) * 1rem); height: var(--navbar-height); diff --git a/docs/ui/src/css/nav.css b/docs/ui/src/css/nav.css index d932f0b35..159d554fe 100644 --- a/docs/ui/src/css/nav.css +++ b/docs/ui/src/css/nav.css @@ -5,6 +5,8 @@ } .nav-container { + background-color: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); position: fixed; top: var(--navbar-height); left: 0; @@ -35,7 +37,7 @@ } .nav { - background: var(--nav-background); + /* background: var(--nav-background); */ position: relative; top: var(--toolbar-height); height: var(--nav-height); @@ -57,7 +59,7 @@ } .nav a { - color: inherit; + color: var(--color-white); } .nav .panels { diff --git a/docs/ui/src/css/site.css b/docs/ui/src/css/site.css index 36e1767c8..97794a5d7 100644 --- a/docs/ui/src/css/site.css +++ b/docs/ui/src/css/site.css @@ -15,3 +15,4 @@ @import "footer.css"; @import "highlight.css"; @import "print.css"; +@import "custom.css"; diff --git a/docs/ui/src/css/toolbar.css b/docs/ui/src/css/toolbar.css index 7f3848889..f13d71407 100644 --- a/docs/ui/src/css/toolbar.css +++ b/docs/ui/src/css/toolbar.css @@ -1,19 +1,17 @@ .toolbar { color: var(--toolbar-font-color); align-items: center; - background-color: var(--toolbar-background); - box-shadow: 0 1px 0 var(--toolbar-border-color); display: flex; font-size: calc(15 / var(--rem-base) * 1rem); height: var(--toolbar-height); justify-content: flex-start; - position: sticky; + position: static; top: var(--navbar-height); z-index: var(--z-index-toolbar); } .toolbar a { - color: inherit; + color: var(--navbar-font-color); } .nav-toggle { diff --git a/docs/ui/src/css/vars.css b/docs/ui/src/css/vars.css index 37474bfee..197e1b71c 100644 --- a/docs/ui/src/css/vars.css +++ b/docs/ui/src/css/vars.css @@ -1,22 +1,23 @@ :root { /* colors */ - --color-white: #fff; - --color-smoke-10: #fefefe; - --color-smoke-30: #fafafa; - --color-smoke-50: #f5f5f5; - --color-smoke-70: #f0f0f0; - --color-smoke-90: #e1e1e1; - --color-gray-10: #c1c1c1; - --color-gray-30: #9c9c9c; - --color-gray-40: #8e8e8e; - --color-gray-50: #808080; - --color-gray-70: #5d5d5d; - --color-jet-20: #4a4a4a; - --color-jet-30: #424242; - --color-jet-50: #333; - --color-jet-70: #222; - --color-jet-80: #191919; - --color-black: #000; + --color-white: rgba(255, 255, 255, 1); + --color-white-50: rgba(255, 255, 255, 0.5); + --color-smoke-10: rgba(254, 254, 254, 0.95); + --color-smoke-30: rgba(250, 250, 250, 0.9); + --color-smoke-50: rgba(245, 245, 245, 0.85); + --color-smoke-70: rgba(240, 240, 240, 0.8); + --color-smoke-90: rgba(225, 225, 225, 0.75); + --color-gray-10: rgba(193, 193, 193, 0.7); + --color-gray-30: rgba(156, 156, 156, 0.65); + --color-gray-40: rgba(142, 142, 142, 0.6); + --color-gray-50: rgba(128, 128, 128, 0.55); + --color-gray-70: rgba(93, 93, 93, 0.5); + --color-jet-20: rgba(74, 74, 74, 0.45); + --color-jet-30: rgba(66, 66, 66, 0.4); + --color-jet-50: rgba(51, 51, 51, 0.35); + --color-jet-70: rgba(34, 34, 34, 0.3); + --color-jet-80: rgba(25, 25, 25, 0.25); + --color-black: rgba(0, 0, 0, 0.2); /* fonts */ --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */ --body-font-size: 1.0625em; /* 17px */ @@ -148,4 +149,12 @@ --z-index-toolbar: 2; --z-index-page-version-menu: 3; --z-index-navbar: 4; + + /* Background gradient position variables */ + --x1: 20%; + --y1: 20%; + --x2: 75%; + --y2: 25%; + --x3: 50%; + --y3: 50%; } diff --git a/docs/ui/src/partials/main.hbs b/docs/ui/src/partials/main.hbs index d3e2411ec..3d796ef4d 100644 --- a/docs/ui/src/partials/main.hbs +++ b/docs/ui/src/partials/main.hbs @@ -1,4 +1,6 @@
+
+
{{> toolbar}}
{{#if (eq page.layout '404')}} diff --git a/docs/website/assets/cards1.jpg b/docs/website/assets/cards1.jpg new file mode 100644 index 000000000..d4eabcd4d Binary files /dev/null and b/docs/website/assets/cards1.jpg differ diff --git a/docs/website/assets/cry1.jpg b/docs/website/assets/cry1.jpg new file mode 100644 index 000000000..8d70bf7eb Binary files /dev/null and b/docs/website/assets/cry1.jpg differ diff --git a/docs/website/assets/glasses.png b/docs/website/assets/glasses.png new file mode 100644 index 000000000..bbbe8a33d Binary files /dev/null and b/docs/website/assets/glasses.png differ diff --git a/docs/website/assets/halftone.png b/docs/website/assets/halftone.png new file mode 100644 index 000000000..65d952fd7 Binary files /dev/null and b/docs/website/assets/halftone.png differ diff --git a/docs/website/assets/image-box.svg b/docs/website/assets/image-box.svg new file mode 100644 index 000000000..e57f7baa3 --- /dev/null +++ b/docs/website/assets/image-box.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/website/assets/image-box2.svg b/docs/website/assets/image-box2.svg new file mode 100644 index 000000000..b4aa779d0 --- /dev/null +++ b/docs/website/assets/image-box2.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/website/assets/image-box3.svg b/docs/website/assets/image-box3.svg new file mode 100644 index 000000000..dadd31187 --- /dev/null +++ b/docs/website/assets/image-box3.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/website/assets/investigate.png b/docs/website/assets/investigate.png new file mode 100644 index 000000000..7cd5478c6 Binary files /dev/null and b/docs/website/assets/investigate.png differ diff --git a/docs/website/assets/man1.webp b/docs/website/assets/man1.webp new file mode 100644 index 000000000..7d680dad1 Binary files /dev/null and b/docs/website/assets/man1.webp differ diff --git a/docs/website/assets/mrDocs.svg b/docs/website/assets/mrDocs.svg new file mode 100644 index 000000000..6635fc240 --- /dev/null +++ b/docs/website/assets/mrDocs.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/website/assets/mrdocs-logo.svg b/docs/website/assets/mrdocs-logo.svg new file mode 100644 index 000000000..787395c42 --- /dev/null +++ b/docs/website/assets/mrdocs-logo.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/website/assets/mrdocs.png b/docs/website/assets/mrdocs.png new file mode 100644 index 000000000..78727f5cd Binary files /dev/null and b/docs/website/assets/mrdocs.png differ diff --git a/docs/website/assets/pointing.png b/docs/website/assets/pointing.png new file mode 100644 index 000000000..d993705db Binary files /dev/null and b/docs/website/assets/pointing.png differ diff --git a/docs/website/assets/shout.png b/docs/website/assets/shout.png new file mode 100644 index 000000000..aa6639395 Binary files /dev/null and b/docs/website/assets/shout.png differ diff --git a/docs/website/assets/think1.png b/docs/website/assets/think1.png new file mode 100644 index 000000000..b98f12d40 Binary files /dev/null and b/docs/website/assets/think1.png differ diff --git a/docs/website/assets/thinking.png b/docs/website/assets/thinking.png new file mode 100644 index 000000000..5a21c0afb Binary files /dev/null and b/docs/website/assets/thinking.png differ diff --git a/docs/website/assets/writing.png b/docs/website/assets/writing.png new file mode 100644 index 000000000..8cc1f971a Binary files /dev/null and b/docs/website/assets/writing.png differ diff --git a/docs/website/assets/yell1.webp b/docs/website/assets/yell1.webp new file mode 100644 index 000000000..7d680dad1 Binary files /dev/null and b/docs/website/assets/yell1.webp differ diff --git a/docs/website/data.json b/docs/website/data.json index bb48d783b..98acde674 100644 --- a/docs/website/data.json +++ b/docs/website/data.json @@ -12,10 +12,6 @@ } }, "navbar": [ - { - "title": "Examples", - "href": "#examples" - }, { "title": "Features", "href": "#features" @@ -88,19 +84,28 @@ "panels": [ { "description": "MrDocs understands C++ features such as attributes and noexcept functions.", - "source": "terminate.cpp" + "source": "terminate.cpp", + "imageClass": "pointing", + "boxClass": "box3 box-shape3 box270", + "alignClass": "align-center" }, { "description": "Specially formatted comments are rendered to form a reference as part of documentation.", - "source": "distance.cpp" + "source": "distance.cpp", + "imageClass": "shouting", + "boxClass": "box3 box-shape3 box0" }, { "description": "Special directives are used to describe details about the symbols.", - "source": "is_prime.cpp" + "source": "is_prime.cpp", + "imageClass": "glasses", + "boxClass": "box3 box-shape3 box90" }, { "description": "It understands concepts, constraints and SFINAE.", - "source": "sqrt.cpp" + "source": "sqrt.cpp", + "imageClass": "writing", + "boxClass": "box3 box-shape3 box180" } ] } \ No newline at end of file diff --git a/docs/website/halftone.png b/docs/website/halftone.png new file mode 100644 index 000000000..65d952fd7 Binary files /dev/null and b/docs/website/halftone.png differ diff --git a/docs/website/index.html b/docs/website/index.html new file mode 100644 index 000000000..a7751b55e --- /dev/null +++ b/docs/website/index.html @@ -0,0 +1,563 @@ + + + + + + + + + + + + MrDocs + + + + + + + + + + + + + + + + +
+
+
+

MrDocs

+

MrDocs is a C++ documentation generator for your projects.

+
+ Get started + Download +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Simple code, simple documentation

+

MrDocs understands C++ so you can focus on keeping the code simple.

+
+
+
+ +
+
+ +

Single Source of Truth

+

Mr. Docs takes a specially formatted comment, called a Javadoc, which precedes a C++ declaration and renders it to form a reference as part of documentation.

+
+
+ +

It understands C++

+

Mr. Docs understands C++: Overload sets, private APIs, Concepts and constraints, unspecified return types, aliases, constants, SFINAE, hidden base classes, niebloids, and coroutines.

+
+
+ +

Multiple output formats

+

Choose from multiple output formats: Asciidoc, HTML, or XML.

+
+
+ +

Customizable

+

Mr. Docs is highly customizable. You can change the output format, the theme, and even the way the documentation is generated.

+
+
+
+
+
+
+
+

More Code, Fewer Workarounds

+

MrDocs let's you keep the code simple and maintainable.

+
+
+
    +
  • MrDocs understands C++ features such as attributes and noexcept functions.
    • +
+
+
+ 
/** Exit the program.
+
+    The program will end immediately.
+
+    @note This function does not return.
+*/
+[[noreturn]]
+void
+terminate() noexcept;
+
+
+
+
+
+
+
+
+
+

terminate

+
+Exit the program. + +
+
+
+

Synopsis

+
+Declared in <terminate.cpp>
+
+
+[[noreturn]]
+void
+terminate() noexcept;
+
+
+
+
+

Description

+

The program will end immediately.

+
+

NOTE

+

This function does not return.

+
+
+
+ +
+
+
+
+
    +
  • Specially formatted comments are rendered to form a reference as part of documentation.
    • +
+
+
+ 
/** Return the distance between two points
+
+    This function returns the distance between two points
+    according to the Euclidean distance formula.
+
+    @param x0 The x-coordinate of the first point
+    @param y0 The y-coordinate of the first point
+    @param x1 The x-coordinate of the second point
+    @param y1 The y-coordinate of the second point
+    @return The distance between the two points
+*/
+double
+distance(double x0, double y0, double x1, double y1);
+
+
+
+
+
+
+
+
+
+

distance

+
+Return the distance between two points + +
+
+
+

Synopsis

+
+Declared in <distance.cpp>
+
+
+double
+distance(
+    double x0,
+    double y0,
+    double x1,
+    double y1);
+
+
+
+
+

Description

+

This function returns the distance between two points according to the Euclidean distance formula.

+
+
+

Return Value

+The distance between the two points +
+
+

Parameters

+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
x0The x-coordinate of the first point
y0The y-coordinate of the first point
x1The x-coordinate of the second point
y1The y-coordinate of the second point
+
+
+ +
+
+
+
+
    +
  • Special directives are used to describe details about the symbols.
    • +
+
+
+ 
/** Return true if a number is prime.
+
+    @par Complexity
+
+    Linear in n.
+
+    @return Whether or not n is prime.
+    @param n The number to test
+
+*/
+bool
+is_prime(unsigned long long n) noexcept;
+
+
+
+
+
+
+
+
+
+

is_prime

+
+Return true if a number is prime. + +
+
+
+

Synopsis

+
+Declared in <is_prime.cpp>
+
+
+bool
+is_prime(unsigned long long n) noexcept;
+
+
+
+
+

Description

+

Complexity

+

Linear in n.

+
+
+

Return Value

+Whether or not n is prime. +
+
+

Parameters

+ + + + + + + + + + + + + +
NameDescription
nThe number to test
+
+
+ +
+
+
+
+
    +
  • It understands concepts, constraints and SFINAE.
    • +
+
+
+ 
#include <type_traits>
+#include <stdexcept>
+
+/** Computes the square root of an integral value.
+
+    This function calculates the square root of a
+    given integral value using bit manipulation.
+
+    @throws std::invalid_argument if the input value is negative.
+
+    @tparam T The type of the input value. Must be an integral type.
+    @param value The integral value to compute the square root of.
+    @return The square root of the input value.
+ */
+template <typename T>
+std::enable_if_t<std::is_integral_v<T>, T> sqrt(T value) {
+    if (value < 0) {
+        throw std::invalid_argument(
+            "Cannot compute square root of a negative number");
+    }
+    T result = 0;
+    // The second-to-top bit is set
+    T bit = 1 << (sizeof(T) * 8 - 2);
+    while (bit > value) bit >>= 2;
+    while (bit != 0) {
+        if (value >= result + bit) {
+            value -= result + bit;
+            result += bit << 1;
+        }
+        result >>= 1;
+        bit >>= 2;
+    }
+    return result;
+}
+
+
+
+
+
+
+
+
+
+
+

sqrt

+
+Computes the square root of an integral value. + +
+
+
+

Synopsis

+
+Declared in <sqrt.cpp>
+
+
+template<typename T>
+T
+sqrt(T value)
+requires std::is_integral_v<T>;
+
+
+
+
+

Description

+

This function calculates the square root of a given integral value using bit manipulation.

+
+
+

Exceptions

+ + + + + + + + + + + + + +
NameThrown on
std::invalid_argumentif the input value is negative.
+
+
+

Return Value

+The square root of the input value. +
+
+

Template Parameters

+ + + + + + + + + + + + + +
NameDescription
TThe type of the input value. Must be an integral type.
+
+
+

Parameters

+ + + + + + + + + + + + + +
NameDescription
valueThe integral value to compute the square root of.
+
+
+ +
+
+
+
+
+
+
+

Give us a Star on GitHub: + +

+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/website/index.html.hbs b/docs/website/index.html.hbs index 5dc0b9d7a..888fe760a 100644 --- a/docs/website/index.html.hbs +++ b/docs/website/index.html.hbs @@ -1,15 +1,16 @@ -{{! }} -{{! Licensed under the Apache License v2.0 with LLVM Exceptions. }} -{{! See https://llvm.org/LICENSE.txt for license information. }} -{{! SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception }} -{{! }} -{{! Copyright (c) 2024 Alan de Freitas (alandefreitas@gmail.com) }} -{{! }} -{{! Official repository: https://github.com/cppalliance/mrdocs }} -{{! }} -{{! Adapted from: github.com/nathanclevenger/pico-landing-page }} -{{! }} +{{! }} +{{! Licensed under the Apache License v2.0 with LLVM Exceptions. }} +{{! See https://llvm.org/LICENSE.txt for license information. }} +{{! SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception }} +{{! }} +{{! Copyright (c) 2024 Alan de Freitas (alandefreitas@gmail.com) }} +{{! }} +{{! Official repository: https://github.com/cppalliance/mrdocs }} +{{! }} +{{! Adapted from: github.com/nathanclevenger/pico-landing-page }} +{{! }} + @@ -33,82 +34,97 @@ + - -
-
-

{{ title }}

-

{{ description }}

-

- - Get started - - - Download +

-
- -
+
+
+ +
+ +
-
-

{{ banner.header }}

-

{{ banner.subheader }}

-
-
- {{#each features}} +
+

{{ title }}

+

{{ description }}

+
+ Get started + Download +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

{{ banner.header }}

+

{{ banner.subheader }}

+
+
+
+ +
+ {{#each features}}

{{ title }}

{{ description }}

- {{/each}} + {{/each}} +
- -
-
-
-
-

Examples

-

Examples to discover MrDocs in action.

-
-
- {{#each examples}} +
+ {{!--
+
+
+

Examples

+

Examples to discover MrDocs in action.

+
+
+ {{#each examples}} - {{/each}} + {{/each}} +
- -
-
-
-
-

More Code, Fewer Workarounds

-

MrDocs let's you keep the code simple and maintainable.

-
- {{#each panels}} +
--}} +
+
+
+

More Code, Fewer Workarounds

+

MrDocs let's you keep the code simple and maintainable.

+
+ {{#each panels}}
  • {{ description }}
    • @@ -137,32 +153,84 @@ 
    {{{ snippet }}}
    +
    +
    +
    +
    +
    {{{ documentation }}}
- {{/each}} -
-
-
-
-

Give us a Star on GitHub: - -

-
-
-
-
+ + {{/each}} +
  • GitHub
    • + + + + + + \ No newline at end of file diff --git a/docs/website/styles.css b/docs/website/styles.css index 08e49a8ee..7fc0373b7 100644 --- a/docs/website/styles.css +++ b/docs/website/styles.css @@ -3,6 +3,7 @@ --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --line-height: 1.5; --font-weight: 400; + --font-weight-bold: 700; --font-size: 16px; --border-radius: 0.25rem; --border-width: 1px; @@ -20,7 +21,9 @@ --nav-link-spacing-vertical: 0.5rem; --nav-link-spacing-horizontal: 0.5rem; --form-label-font-weight: var(--font-weight); - --transition: 0.2s ease-in-out + --transition: 0.2s ease-in-out; + --function-name-color: #1de9b6; + --function-name-color-hover: #0091ea; } @media (min-width: 576px) { @@ -114,27 +117,27 @@ kbd { :root:not([data-theme=dark]), [data-theme=light] { color-scheme: light; - --background-color: #fff; - --color: hsl(205deg, 20%, 32%); - --h1-color: hsl(205deg, 30%, 15%); - --h2-color: #24333e; - --h3-color: hsl(205deg, 25%, 23%); - --h4-color: #374956; - --h5-color: hsl(205deg, 20%, 32%); - --h6-color: #4d606d; - --muted-color: hsl(205deg, 10%, 50%); - --muted-border-color: hsl(205deg, 20%, 94%); - --primary: hsl(195deg, 85%, 41%); - --primary-hover: hsl(195deg, 90%, 32%); + --background-color: #fef7e1; + --color: rgba(0, 0, 0, 0.8); + --h1-color: rgba(0, 0, 0, 0.95); + --h2-color: rgba(0, 0, 0, 0.9); + --h3-color: rgba(0, 0, 0, 0.85); + --h4-color: rgba(0, 0, 0, 0.8); + --h5-color: rgba(0, 0, 0, 0.75); + --h6-color: rgba(0, 0, 0, 0.7); + --muted-color: rgba(0, 0, 0, 0.5); + --muted-border-color: rgba(0, 0, 0, 0.1); + --primary: rgba(16, 149, 193, 1); + --primary-hover: rgba(6, 125, 166, 1); --primary-focus: rgba(16, 149, 193, 0.125); --primary-inverse: #fff; - --secondary: hsl(205deg, 15%, 41%); - --secondary-hover: hsl(205deg, 20%, 32%); - --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary: rgba(0, 0, 0, 0.4); + --secondary-hover: rgba(0, 0, 0, 0.6); + --secondary-focus: rgba(0, 0, 0, 0.125); --secondary-inverse: #fff; - --contrast: hsl(205deg, 30%, 15%); - --contrast-hover: #000; - --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast: rgba(0, 0, 0, 0.9); + --contrast-hover: rgba(0, 0, 0, 1); + --contrast-focus: rgba(0, 0, 0, 0.125); --contrast-inverse: #fff; --mark-background-color: #fff2ca; --mark-color: #543a26; @@ -213,28 +216,28 @@ kbd { @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme=light]) { color-scheme: dark; - --background-color: #11191f; - --color: hsl(205deg, 16%, 77%); - --h1-color: hsl(205deg, 20%, 94%); - --h2-color: #e1e6eb; - --h3-color: hsl(205deg, 18%, 86%); - --h4-color: #c8d1d8; - --h5-color: hsl(205deg, 16%, 77%); - --h6-color: #afbbc4; - --muted-color: hsl(205deg, 10%, 50%); - --muted-border-color: #1f2d38; - --primary: hsl(195deg, 85%, 41%); - --primary-hover: hsl(195deg, 80%, 50%); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #fff; - --secondary: hsl(205deg, 15%, 41%); - --secondary-hover: hsl(205deg, 10%, 50%); - --secondary-focus: rgba(115, 130, 140, 0.25); - --secondary-inverse: #fff; - --contrast: hsl(205deg, 20%, 94%); - --contrast-hover: #fff; - --contrast-focus: rgba(115, 130, 140, 0.25); - --contrast-inverse: #000; + --background-color: rgba(0, 0, 0, 0.3); + --color: rgba(255, 255, 255, 0.9); + --h1-color: rgba(255, 255, 255, 0.98); + --h2-color: rgba(255, 255, 255, 0.95); + --h3-color: rgba(255, 255, 255, 0.92); + --h4-color: rgba(255, 255, 255, 0.88); + --h5-color: rgba(255, 255, 255, 0.85); + --h6-color: rgba(255, 255, 255, 0.82); + --muted-color: rgba(255, 255, 255, 0.6); + --muted-border-color: rgba(255, 255, 255, 0.1); + --primary: rgba(120, 200, 255, 0.9); + --primary-hover: rgba(140, 210, 255, 0.95); + --primary-focus: rgba(120, 200, 255, 0.2); + --primary-inverse: rgba(0, 0, 0, 0.9); + --secondary: rgba(255, 255, 255, 0.4); + --secondary-hover: rgba(255, 255, 255, 0.6); + --secondary-focus: rgba(255, 255, 255, 0.2); + --secondary-inverse: rgba(0, 0, 0, 0.9); + --contrast: rgba(255, 255, 255, 0.95); + --contrast-hover: rgba(255, 255, 255, 1); + --contrast-focus: rgba(255, 255, 255, 0.2); + --contrast-inverse: rgba(0, 0, 0, 0.9); --mark-background-color: #d1c284; --mark-color: #11191f; --ins-color: #388e3c; @@ -313,28 +316,28 @@ kbd { [data-theme=dark] { color-scheme: dark; - --background-color: #11191f; - --color: hsl(205deg, 16%, 77%); - --h1-color: hsl(205deg, 20%, 94%); - --h2-color: #e1e6eb; - --h3-color: hsl(205deg, 18%, 86%); - --h4-color: #c8d1d8; - --h5-color: hsl(205deg, 16%, 77%); - --h6-color: #afbbc4; - --muted-color: hsl(205deg, 10%, 50%); - --muted-border-color: #1f2d38; - --primary: hsl(195deg, 85%, 41%); - --primary-hover: hsl(195deg, 80%, 50%); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #fff; - --secondary: hsl(205deg, 15%, 41%); - --secondary-hover: hsl(205deg, 10%, 50%); - --secondary-focus: rgba(115, 130, 140, 0.25); - --secondary-inverse: #fff; - --contrast: hsl(205deg, 20%, 94%); - --contrast-hover: #fff; - --contrast-focus: rgba(115, 130, 140, 0.25); - --contrast-inverse: #000; + --background-color: rgba(0, 0, 0, 0.3); + --color: rgba(255, 255, 255, 0.9); + --h1-color: rgba(255, 255, 255, 0.98); + --h2-color: rgba(255, 255, 255, 0.95); + --h3-color: rgba(255, 255, 255, 0.92); + --h4-color: rgba(255, 255, 255, 0.88); + --h5-color: rgba(255, 255, 255, 0.85); + --h6-color: rgba(255, 255, 255, 0.82); + --muted-color: rgba(255, 255, 255, 0.6); + --muted-border-color: rgba(255, 255, 255, 0.1); + --primary: rgba(120, 200, 255, 0.9); + --primary-hover: rgba(140, 210, 255, 0.95); + --primary-focus: rgba(120, 200, 255, 0.2); + --primary-inverse: rgba(0, 0, 0, 0.9); + --secondary: rgba(255, 255, 255, 0.4); + --secondary-hover: rgba(255, 255, 255, 0.6); + --secondary-focus: rgba(255, 255, 255, 0.2); + --secondary-inverse: rgba(0, 0, 0, 0.9); + --contrast: rgba(255, 255, 255, 0.95); + --contrast-hover: rgba(255, 255, 255, 1); + --contrast-focus: rgba(255, 255, 255, 0.2); + --contrast-inverse: rgba(0, 0, 0, 0.9); --mark-background-color: #d1c284; --mark-color: #11191f; --ins-color: #388e3c; @@ -473,6 +476,25 @@ kbd { } } +/** * Grid * Minimal grid system with auto-layout columns */ + +.grid { + grid-column-gap: var(--pico-grid-column-gap); + grid-row-gap: var(--pico-grid-row-gap); + display: grid; + grid-template-columns: 1fr; +} + +@media (min-width: 768px) { + .grid { + grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); + } +} + +.grid>* { + min-width: 0; +} + b, strong { font-weight: bolder } @@ -584,7 +606,7 @@ h6 { margin-top: var(--typography-spacing-vertical) } -.headings, hgroup { +.headings { margin-bottom: var(--typography-spacing-vertical) } @@ -904,6 +926,8 @@ input, select, textarea { box-shadow: var(--box-shadow); color: var(--color); font-weight: var(--font-weight); + font-size: 1rem; + line-height: var(--line-height); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition) } @@ -1436,7 +1460,6 @@ pre { code, kbd, pre { border-radius: var(--border-radius); - background: var(--code-background-color); color: var(--code-color); font-weight: var(--font-weight); line-height: initial @@ -1456,9 +1479,10 @@ pre { pre > code { display: block; padding: var(--spacing); - background: 0 0; + background-color: rgba(0, 0, 0, 0.55); font-size: 14px; - line-height: var(--line-height) + line-height: var(--line-height); + overflow-x: auto; } code b { @@ -1836,7 +1860,15 @@ a[aria-busy=true], button[aria-busy=true], input[type=button][aria-busy=true], i :root { --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") + --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + + /* Background animation variables */ + --x1: 20%; + --y1: 20%; + --x2: 75%; + --y2: 25%; + --x3: 50%; + --y3: 50%; } :root:not([data-theme=dark]), [data-theme=light] { @@ -2018,24 +2050,6 @@ h2 { } } -hgroup { - margin-bottom: var(--block-spacing-vertical) -} - -hgroup:after { - display: block; - max-width: 100px; - margin-top: 1rem; - border-bottom: .125rem solid var(--primary); - content: "" -} - -#principles hgroup, header h1, header p { - max-width: 60ch; - margin-left: auto; - margin-right: auto -} - ul.check { padding: 0 } @@ -2059,7 +2073,12 @@ ul.check li::before { body { width: 100%; - margin: 0 + margin: 0; + transition: padding-top 0.3s ease-in-out; +} + +body.nav-visible { + padding-top: 60px; /* Adjust based on nav height */ } footer, header, main > section { @@ -2093,7 +2112,7 @@ footer, header, main > section { @media (min-width: 1200px) { footer, header, main > section { - --block-spacing-vertical: 7rem; + --block-spacing-vertical: 4rem; --demo-height: calc(10.5rem + 540px) } } @@ -2131,7 +2150,8 @@ body > nav a { body > nav a svg { vertical-align: text-bottom; - height: 1rem + height: 1rem; + color: initial; } body > nav ul:first-of-type { @@ -2142,37 +2162,6 @@ body > nav ul:first-of-type li { padding: 0 } -body > nav ul:first-of-type li:first-of-type a { - display: block; - margin: 0; - padding: 0; - background: var(--h1-color); - color: var(--nav-logo-color) -} - -body > nav ul:first-of-type li:first-of-type a svg { - display: block; - width: 3.5rem; - height: 3.5rem -} - -body > nav ul:first-of-type li:nth-of-type(2) { - display: none; - margin-left: calc(var(--spacing) * 1.5); - color: var(--h1-color); - font-weight: 200 -} - -body > nav ul:first-of-type li:nth-of-type(2) strong { - font-weight: 400 -} - -@media (min-width: 992px) { - body > nav ul:first-of-type li:nth-of-type(2) { - display: inline - } -} - header h1, header p { text-align: center } @@ -2387,54 +2376,32 @@ input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]): transform: scale(1.25) } -#principles .grid { - grid-gap: 2rem; - display: grid; - grid-template-columns:1fr; - margin: 0 -} -@media (min-width: 768px) { - #principles .grid { - grid-template-columns:1fr 1fr - } -} -@media (min-width: 1200px) { - #principles .grid { - grid-template-columns:1fr 1fr 1fr 1fr - } -} -#principles hgroup { + +hgroup { text-align: center } -#principles hgroup h2 { - margin-bottom: var(--spacing) -} -#principles hgroup:after { +hgroup:after { display: none } -#principles h3 { - --font-weight: 400 -} - -#principles svg { +svg { color: var(--primary); width: auto; height: 1.25rem } -#principles h4 { + h4 { --font-size: 1rem; --font-weight: 400; margin-bottom: .5rem } -#principles p { +p { --color: var(--muted-color) } @@ -2701,30 +2668,92 @@ section#demo { .panel-container { display: flex; - justify-content: space-between; + flex-direction: column; + gap: 1rem; +} + +@media (min-width: 768px) { + .panel-container { + flex-direction: row; + } } .snippet-panel { flex: 1; - margin-right: 10px; /* adjust as needed */ } -.documentation-panel { - background-color: #213544; - border-radius: 20px; - flex: 1; - padding: 30px; +@media (min-width: 768px) { + .snippet-panel { + width: 50%; + } } .snippet-documentation-panel { - margin-top: 20px; - margin-bottom: 20px; + margin: var(--block-spacing-vertical) 0; } .snippet-documentation-panel h2 { font-size: 2.0rem; } +.documentation-panel { + background-color: rgba(255, 255, 255, 0.10); + border-radius: var(--border-radius); + flex: 1; + height: 100%; + padding: 1rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.documentation-panel > div:first-child { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.documentation-panel h2 { + margin-bottom: var(--spacing); +} + +.documentation-panel h2, .documentation-panel h2 a { + color: var(--function-name-color); +} + +.documentation-panel h3 { + font-size: 1.25rem; + color: #fff; + margin-top: 0; + margin-bottom: 0; +} + +.documentation-panel p { + font-size: 1rem; + color: #e0e6ed; + margin-bottom: 1em; +} + +.documentation-panel div pre { + margin-bottom: 0; +} + +.documentation-panel .admonition { + background: rgba(126, 224, 255, 0.10); + border: 2px solid rgba(126, 224, 255, 0.10); + border-radius: var(--border-radius); + padding: 0.5rem 0.75rem; + backdrop-filter: blur(10px); + /* margin: 1em 0; */ +} + +.documentation-panel .admonition h4 { + font-size: 0.95rem; + font-weight: 600; + color: #7ee0ff; + margin-bottom: 0.2em; + letter-spacing: 0.01em; +} + .halign-left { text-align: left; } @@ -2741,3 +2770,431 @@ section#demo { .hljs-meta .hljs-string { color: green; } + +html { + margin: 0; + padding: 0; + min-height: 100%; + background: + radial-gradient(ellipse 100% 100% at var(--x1) var(--y1), rgba(89, 36, 99, 0.8), transparent 50%), + radial-gradient(ellipse 80% 120% at var(--x2) var(--y2), rgba(138, 214, 236, 0.5), transparent 55%), + radial-gradient(ellipse 150% 90% at var(--x3) var(--y3), rgba(40, 98, 114, 0.6), transparent 65%), + radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%), + linear-gradient(135deg, #124B83, #124B83, #124B83); + background-blend-mode: normal; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; +} + + +nav { + background-color: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(10px); +} + +.header-cta { + display: flex; + gap: 0.5rem; + justify-content: center; + margin: 1.5rem 0 0 0; +} + +.banner-snippet { + display: flex; + justify-content: center; + border-radius: 0.25rem; + margin: 0.5em 0 0 0; +} + +.banner-snippet code { + color: #fff; + margin-top: 0.5rem; + background-color:rgba(255, 255, 255, 0.10); +} + +.dotted { + background-image: url("./assets/halftone.png"); + background-size: 158%; + background-repeat: repeat-y; + background-position: center center; + width: 190px; + height: 100vh; + position: fixed; + left: 0; + opacity: .1; + top: 0; + z-index: -5; + pointer-events: none; +} + +.dotted-right { + background-image: url("./assets/halftone.png"); + background-size: 158%; + transform: rotate(180deg); + background-repeat: repeat-y; + background-position: center center; + width: 190px; + height: 100vh; + position: fixed; + right: 0; + opacity: .1; + top: 0; + z-index: -5; + pointer-events: none; +} + +@media (max-width: 576px) { + .dotted, .dotted-right { + opacity: 0.05; + } + + .dotted { + left: -80px; + } + .dotted-right { + right: -80px; + } +} + +/* =========================== + Navigation Styles +=========================== */ + +.nav { + background-color: rgba(0, 0, 0, 0.2); + padding: 0.25rem 1rem; + font-size: 1rem; + font-weight: bold; + font-size: 1rem; + display: flex; + align-items: center; + justify-content: space-between; + position: fixed; + z-index: 1000; + top: 0; + left: 0; + right: 0; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.nav .logo { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; +} + +.nav ul { + gap: 1rem; +} + +.nav-section { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + flex-wrap: nowrap; +} + +.nav-section>div { + margin-right: .5rem; +} + +.nav-section:last-child { + + color: #ffffff99; +} + +.nav-section:last-child div:hover { + color: #ffffffff; +} + +.nav-section:last-child div { + margin-right: 1.5rem; +} + +.nav ul li { + list-style: none; +} + +.nav .logo-link { + display: flex; + align-items: center; + gap: 0.5rem; + color: #ffffff; +} + +.nav .nav-section:last-child a[role="menuitem"] { + font-size: 1rem; +} + +/* =========================== + Cutout Styles +=========================== */ + +.boxicon { + width: 50px; + height: 50px; +} + +.boxicon .inner-box { + position: relative; + background-repeat: no-repeat; + background-position: center center; + background-size: 126%; +} + +/***** cutout box sizing *****/ + +.box1 { + width: 300px; + height: 300px; + margin: 0rem 2rem; +} + +.box2 { + width: 150px; + height: 150px; + margin: 0rem 1rem; +} + +.box3 { + width: 450px; + height: 450px; + margin: 0rem 2rem; +} + +/***** cutout box shapes *****/ + +.box-shape1 { + background-image: url("./assets/image-box.svg"); + background-repeat: no-repeat; + background-position: center center; + background-size: stretch; +} + +.box-shape2 { + background-image: url("./assets/image-box2.svg"); + background-repeat: no-repeat; + background-position: center center; + background-size: stretch; +} + +.box-shape3 { + background-image: url("./assets/image-box3.svg"); + background-repeat: no-repeat; + background-position: center center; + background-size: stretch; +} + + +/***** cutout box rotations *****/ +.box0 { + position: relative; + filter: drop-shadow(7px 10px 0px rgba(0, 0, 0, .7)); +} + +.box90 { + transform: rotate(90deg); + filter: drop-shadow(7px -10px 0px rgba(0, 0, 0, .7)); +} + +.box90 .inner-box { + transform: rotate(270deg); + background-size: contain; +} + +.box180 { + transform: rotate(180deg); + filter: drop-shadow(-7px -10px 0px rgba(0, 0, 0, .7)); +} + +.box180 .inner-box { + transform: rotate(-180deg); + background-size: contain; +} + +.box270 { + transform: rotate(270deg); + filter: drop-shadow(-7px 10px 0px rgba(0, 0, 0, .7)); +} + +.box270 .inner-box { + transform: rotate(90deg); + background-size: contain; +} + +/***** cutout box inner content and images *****/ +.inner-box { + height: 58%; + width: 58%; + position: absolute; + top: 21%; + left: 21%; + color: black; + + background-size: contain; + background-repeat: no-repeat; + background-position: center center; +} + + +.investigate { + background-image: url("./assets/investigate.png"); +} + +.shouting { + background-image: url("./assets/shout.png"); +} + +.thinking { + background-image: url("./assets/thinking.png"); +} + +.mrdocs { + background-image: url("./assets/mrdocs.png"); +} + +.logo { + background-image: url("./assets/mrdocs-logo.svg"); +} + +.pointing { + background-image: url("./assets/pointing.png"); +} + +.glasses { + background-image: url("./assets/glasses.png"); +} + +.writing { + background-image: url("./assets/writing.png"); +} + +/* =========================== + Header Styles +=========================== */ + +header .container { + display: flex; + flex-direction: column; +} + +header .header-image { + align-self: center; +} + +@media (min-width: 768px) { + header .container { + align-items: center; + justify-content: center; + flex-direction: row; + } +} + +.header-content { + display: flex; + flex-direction: column; + align-items: center; +} + +.header-cta a[aria-label="Documentation"] { + color: #fff; + background-color: rgba(255, 255, 255, 0.25); +} + +/* =========================== + Principles Styles +=========================== */ + +.principles-banner { + align-items: center; + justify-items: center; +} + +.principles-content { + text-align: center; + order: 1 +} + +.principles-image { + order: 2; +} + +@media (min-width: 768px) { + .principles-image { + justify-self: end; + align-self: center; + order: 1; + } +} + +@media (min-width: 768px) { + .principles .container { + display: flex; + flex-direction: column; + gap: 2.5rem; + } + + .principles-banner { + grid-template-columns: 35% 65%; + align-items: center; + justify-items: center; + } + + .principles-features { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5rem; + row-gap: 1rem; + } +} + +.features hgroup { + margin-bottom: var(--block-spacing-vertical); +} + +/* Alignment helpers for flex/grid children */ +.align-left { justify-self: start !important; align-self: start !important; } +.align-center { justify-self: center !important; align-self: center !important; } +.align-right { justify-self: end !important; align-self: end !important; } + +.align-top { align-self: start !important; } +.align-middle { align-self: center !important; } +.align-bottom { align-self: end !important; } + +/* For flex containers (if needed) */ +.flex-align-left { margin-right: auto !important; } +.flex-align-center { margin-left: auto !important; margin-right: auto !important; } +.flex-align-right { margin-left: auto !important; } + +.snippet-image { + display: flex; + height: 100%; +} + +table { + border-collapse: collapse; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +table > * > tr > * { + border: 1px solid rgba(255, 255, 255, 0.2); + border-width: 1px; + border-style: solid; + padding: 0; +} + +table td, table th { + padding: .5rem; +} + +table th { + text-align: left; +} + +table code { + padding: 0; +} \ No newline at end of file