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/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..a799a30e1 --- /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..43dfaee85 --- /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..78848061f --- /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/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..a19ba8fb3 --- /dev/null +++ b/docs/website/assets/mrDocs.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file 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/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/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..983879f88 --- /dev/null +++ b/docs/website/index.html @@ -0,0 +1,563 @@ + + + + + + + + + + + + MrDocs + + + + + + + + + + + + + + + + +
+
+
+

MrDocs

+

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

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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..13ac67c2a 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 }}

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

{{ 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 }}
  • @@ -143,26 +159,91 @@
- {{/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..1438019c0 100644 --- a/docs/website/styles.css +++ b/docs/website/styles.css @@ -115,26 +115,26 @@ 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%); + --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 +213,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 +313,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 +473,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 +603,7 @@ h6 { margin-top: var(--typography-spacing-vertical) } -.headings, hgroup { +.headings { margin-bottom: var(--typography-spacing-vertical) } @@ -1436,7 +1455,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,7 +1474,7 @@ 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) } @@ -2018,24 +2036,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 +2059,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 +2098,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 +2136,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 +2148,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 +2362,39 @@ 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 { +hgroup h2 { margin-bottom: var(--spacing) } -#principles hgroup:after { +hgroup:after { display: none } -#principles h3 { +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,7 +2661,15 @@ section#demo { .panel-container { display: flex; - justify-content: space-between; + flex-direction: column; + gap: 1.5rem; +} + +@media (min-width: 768px) { + .panel-container { + flex-direction: row; + gap: 2.5rem; + } } .snippet-panel { @@ -2710,10 +2678,12 @@ section#demo { } .documentation-panel { - background-color: #213544; + background-color: rgba(255, 255, 255, 0.10); border-radius: 20px; flex: 1; padding: 30px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.15); } .snippet-documentation-panel { @@ -2741,3 +2711,413 @@ section#demo { .hljs-meta .hljs-string { color: green; } + +html{ + margin: 0; + padding: 0; + min-height: 100%; + background: + radial-gradient(circle at var(--x1, 25%) var(--y1, 75%), rgba(130, 0, 255, 0.4), transparent 40%), + radial-gradient(circle at var(--x2, 75%) var(--y2, 25%), rgba(0, 98, 255, 0.5), transparent 45%), + radial-gradient(circle at var(--x3, 50%) var(--y3, 50%), rgba(72, 0, 120, 0.6), transparent 60%), + radial-gradient(circle at var(--x4, 60%) var(--y4, 80%), rgba(200, 0, 255, 0.3), transparent 50%), + linear-gradient(135deg, #3a0ca3, #4361ee, #7209b7); + background-blend-mode: screen; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + transition: background-position 0.2s ease; +} + +html { + min-height: 100%; + background: + radial-gradient(circle at var(--x1, 25%) var(--y1, 75%), rgba(130, 0, 255, 0.4), transparent 40%), + radial-gradient(circle at var(--x2, 75%) var(--y2, 25%), rgba(0, 98, 255, 0.5), transparent 45%), + radial-gradient(circle at var(--x3, 50%) var(--y3, 50%), rgba(72, 0, 120, 0.6), transparent 60%), + radial-gradient(circle at var(--x4, 60%) var(--y4, 80%), rgba(200, 0, 255, 0.3), transparent 50%), + linear-gradient(135deg, #3a0ca3, #4361ee, #7209b7); + background-attachment: fixed; + background-blend-mode: screen; + background-size: cover; +} + +@keyframes gradientGlow { + 0% { + --x1: 30%; + --y1: 70%; + --x2: 70%; + --y2: 30%; + --x3: 50%; + --y3: 50%; + } + + 50% { + --x1: 40%; + --y1: 60%; + --x2: 60%; + --y2: 40%; + --x3: 48%; + --y3: 52%; + } + + 100% { + --x1: 35%; + --y1: 65%; + --x2: 65%; + --y2: 35%; + --x3: 52%; + --y3: 48%; + } +} + +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 { + 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; + transform: translateY(-100%); + transition: transform 0.3s ease-in-out; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.nav.nav-visible { + transform: translateY(0); +} + +.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: cover; + background-repeat: no-repeat; + background-position: center center; +} + +.cards { + background-image: url("./assets/cards1.jpg"); +} + +.shouting { + background-image: url("./assets/man1.webp"); +} + +.thinking { + background-image: url("./assets/think1.png"); +} + +.mrdocs { + background-image: url("./assets/mrdocs.svg"); +} + +/* =========================== + 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; + } +}