diff options
author | Evan Steinkerchner <esteinkerchner@gmail.com> | 2022-04-22 18:56:25 -0400 |
---|---|---|
committer | Evan Steinkerchner <esteinkerchner@gmail.com> | 2022-04-22 18:56:25 -0400 |
commit | b82626bc6d50de8a76929832a0fb7e7ef836122b (patch) | |
tree | 6a2982ea3374e050db2b568b16cf1bda1e28b24a /docs | |
parent | 2b53c1a82acc73a3f1d8b2ea0e55567f80c9120f (diff) | |
download | homer-b82626bc6d50de8a76929832a0fb7e7ef836122b.tar.gz homer-b82626bc6d50de8a76929832a0fb7e7ef836122b.tar.zst homer-b82626bc6d50de8a76929832a0fb7e7ef836122b.zip |
Added open props, changed lots of styles, scrapped home page
Diffstat (limited to 'docs')
-rw-r--r-- | docs/getting_started.md | 16 | ||||
-rw-r--r-- | docs/index.md | 11 | ||||
-rw-r--r-- | docs/overrides/assets/stylesheets/home.css | 81 | ||||
-rw-r--r-- | docs/overrides/home.html | 49 | ||||
-rw-r--r-- | docs/stylesheets/open-props.1.3.16.min.css | 1 | ||||
-rw-r--r-- | docs/stylesheets/styles.css | 71 |
6 files changed, 90 insertions, 139 deletions
diff --git a/docs/getting_started.md b/docs/getting_started.md index 2a123e2..397a16d 100644 --- a/docs/getting_started.md +++ b/docs/getting_started.md | |||
@@ -1,8 +1,10 @@ | |||
1 | Homer is a full static html/js dashboard, generated from the source in `/src` using webpack. It's meant to be served by an HTTP server, **it will not work if you open dist/index.html directly over file:// protocol**. | 1 | ## Using Docker |
2 | 2 | ||
3 | See [documentation](docs/configuration.md) for information about the configuration (`assets/config.yml`) options. | 3 | The fastest and recommended way to get your Homer instance up and running is |
4 | with Docker. The Docker image comes with a web server built-in so that all you | ||
5 | need to worry about is your config file. | ||
4 | 6 | ||
5 | ## Using docker | 7 | ### docker |
6 | 8 | ||
7 | To launch container: | 9 | To launch container: |
8 | 10 | ||
@@ -16,7 +18,7 @@ docker run -d \ | |||
16 | 18 | ||
17 | Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner (`docker run -e "UID=1000" -e "GID=1000" [...]`). | 19 | Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner (`docker run -e "UID=1000" -e "GID=1000" [...]`). |
18 | 20 | ||
19 | ## Using docker-compose | 21 | ### docker-compose |
20 | 22 | ||
21 | The `docker-compose.yml` file must be edited to match your needs. | 23 | The `docker-compose.yml` file must be edited to match your needs. |
22 | Set the port and volume (equivalent to `-p` and `-v` arguments): | 24 | Set the port and volume (equivalent to `-p` and `-v` arguments): |
@@ -43,7 +45,9 @@ environment: | |||
43 | - GID=1000 | 45 | - GID=1000 |
44 | ``` | 46 | ``` |
45 | 47 | ||
46 | ## Using the release tarball (prebuilt, ready to use) | 48 | ## Shipping your own web server |
49 | |||
50 | ### Prebuilt release tarball | ||
47 | 51 | ||
48 | Download and extract the latest release (`homer.zip`) from the [release page](https://github.com/bastienwirtz/homer/releases), rename the `assets/config.yml.dist` file to `assets/config.yml`, and put it behind a web server. | 52 | Download and extract the latest release (`homer.zip`) from the [release page](https://github.com/bastienwirtz/homer/releases), rename the `assets/config.yml.dist` file to `assets/config.yml`, and put it behind a web server. |
49 | 53 | ||
@@ -55,7 +59,7 @@ cp assets/config.yml.dist assets/config.yml | |||
55 | npx serve # or python -m http.server 8010 or apache, nginx ... | 59 | npx serve # or python -m http.server 8010 or apache, nginx ... |
56 | ``` | 60 | ``` |
57 | 61 | ||
58 | ## Build manually | 62 | ### Building from source |
59 | 63 | ||
60 | ```sh | 64 | ```sh |
61 | # Using yarn (recommended) | 65 | # Using yarn (recommended) |
diff --git a/docs/index.md b/docs/index.md index a572d90..460a340 100644 --- a/docs/index.md +++ b/docs/index.md | |||
@@ -1,3 +1,8 @@ | |||
1 | --- | 1 | <img class="hero-image" src="images/screenshot.png" draggable="false" /> |
2 | template: home.html | 2 | |
3 | --- | 3 | Homer is web-based dashboard that simplifies your home page management. It is |
4 | built with [Vue](https://vuejs.org/) and uses `yaml` configuration files to | ||
5 | provide you with a home page that is dead simple to build and run! | ||
6 | |||
7 | Homer gives you the ability to customize content, styles, and even some behavior | ||
8 | through a deep configuration system. | ||
diff --git a/docs/overrides/assets/stylesheets/home.css b/docs/overrides/assets/stylesheets/home.css deleted file mode 100644 index 76f585b..0000000 --- a/docs/overrides/assets/stylesheets/home.css +++ /dev/null | |||
@@ -1,81 +0,0 @@ | |||
1 | .hero { | ||
2 | padding: 32px 2.8rem; | ||
3 | color: var(--md-primary-bg-color); | ||
4 | background: linear-gradient( | ||
5 | to bottom, | ||
6 | var(--md-primary-fg-color), | ||
7 | hsla(160deg, 47%, 55%, 1) 99%, | ||
8 | #fff 99% | ||
9 | ); | ||
10 | } | ||
11 | |||
12 | .hero-container { | ||
13 | display: flex; | ||
14 | flex-direction: row; | ||
15 | align-items: center; | ||
16 | justify-content: space-between; | ||
17 | padding: 1rem 0; | ||
18 | } | ||
19 | |||
20 | .hero-content { | ||
21 | flex: 0 0 40%; | ||
22 | } | ||
23 | |||
24 | .hero-title { | ||
25 | height: 4rem; | ||
26 | display: flex; | ||
27 | flex-direction: row; | ||
28 | align-items: center; | ||
29 | } | ||
30 | |||
31 | .hero-title > img { | ||
32 | max-height: 100%; | ||
33 | width: auto; | ||
34 | } | ||
35 | |||
36 | .hero-title > h1 { | ||
37 | margin: 0 0 0 0.5rem; | ||
38 | font-size: 4rem; | ||
39 | line-height: 1; | ||
40 | color: currentColor; | ||
41 | font-weight: 700; | ||
42 | } | ||
43 | |||
44 | .hero-image { | ||
45 | width: 17rem; | ||
46 | height: auto; | ||
47 | flex: 0 0 50%; | ||
48 | transform: perspective(300px) rotate3D(0, 1, 0, -5deg); | ||
49 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); | ||
50 | } | ||
51 | |||
52 | .hero .md-button { | ||
53 | margin-top: 0.5rem; | ||
54 | margin-right: 0.5rem; | ||
55 | color: var(--md-primary-bg-color); | ||
56 | } | ||
57 | |||
58 | .hero .md-button-primary { | ||
59 | background-color: var(--md-primary-bg-color); | ||
60 | color: hsla(280deg, 37%, 48%, 1); | ||
61 | border-color: var(--md-primary-bg-color); | ||
62 | } | ||
63 | |||
64 | .hero .md-button:focus, | ||
65 | .hero .md-button:hover { | ||
66 | background-color: var(--md-accent-fg-color); | ||
67 | color: var(--md-default-bg-color); | ||
68 | border-color: var(--md-accent-fg-color); | ||
69 | } | ||
70 | |||
71 | .md-header { | ||
72 | position: initial; | ||
73 | } | ||
74 | |||
75 | .md-main__inner { | ||
76 | margin: 0; | ||
77 | } | ||
78 | |||
79 | .md-content { | ||
80 | display: none; | ||
81 | } | ||
diff --git a/docs/overrides/home.html b/docs/overrides/home.html deleted file mode 100644 index 81ef4aa..0000000 --- a/docs/overrides/home.html +++ /dev/null | |||
@@ -1,49 +0,0 @@ | |||
1 | {% extends "base.html" %} | ||
2 | |||
3 | {% block extrahead %} | ||
4 | <link | ||
5 | rel="stylesheet" | ||
6 | href="{{ 'overrides/assets/stylesheets/home.css' | url }}" /> | ||
7 | {% endblock %} | ||
8 | |||
9 | {% block tabs %} | ||
10 | {{ super() }} | ||
11 | |||
12 | <section class="hero"> | ||
13 | <div class="md-grid md-typeset hero-container"> | ||
14 | <div class="hero-content"> | ||
15 | <div class="hero-title"> | ||
16 | <img src="images/logo.png" draggable="false" /> | ||
17 | <h1>Homer</h1> | ||
18 | </div> | ||
19 | <p> | ||
20 | A dead simple static <strong>HOM</strong>epage for your serv<strong>ER</strong> | ||
21 | to keep your services on hand, from a simple <code>yaml</code> configuration file. | ||
22 | </p> | ||
23 | <a | ||
24 | href="{{ page.next_page.url | url }}" | ||
25 | title="{{ page.next_page.title | striptags }}" | ||
26 | class="md-button md-button-primary" | ||
27 | > | ||
28 | Get started | ||
29 | </a> | ||
30 | <a | ||
31 | href="{{ config.repo_url }}" | ||
32 | title="{{ lang.t('source.link.title') }}" | ||
33 | class="md-button" | ||
34 | > | ||
35 | Go to GitHub | ||
36 | </a> | ||
37 | </div> | ||
38 | <img class="hero-image" src="images/screenshot.png" draggable="false" /> | ||
39 | </div> | ||
40 | </section> | ||
41 | |||
42 | <div> | ||
43 | TODO! | ||
44 | </div> | ||
45 | {% endblock %} | ||
46 | |||
47 | {% block site_nav %}{% endblock %} | ||
48 | {% block content %}{% endblock %} | ||
49 | {% block footer %}{% endblock %} | ||
diff --git a/docs/stylesheets/open-props.1.3.16.min.css b/docs/stylesheets/open-props.1.3.16.min.css new file mode 100644 index 0000000..0fd58a9 --- /dev/null +++ b/docs/stylesheets/open-props.1.3.16.min.css | |||
@@ -0,0 +1 @@ | |||
:where(html){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-5:cubic-bezier(.5,1.75,.75,1.25);--ease-squish-1:cubic-bezier(.5,-.1,.1,1.5);--ease-squish-2:cubic-bezier(.5,-.3,.1,1.5);--ease-squish-3:cubic-bezier(.5,-.5,.1,1.5);--ease-squish-4:cubic-bezier(.5,-.7,.1,1.5);--ease-squish-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--grape-0:#f8f0fc;--grape-1:#f3d9fa;--grape-2:#eebefa;--grape-3:#e599f7;--grape-4:#da77f2;--grape-5:#cc5de8;--grape-6:#be4bdb;--grape-7:#ae3ec9;--grape-8:#9c36b5;--grape-9:#862e9c;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75%,at 110%,#f0f,#fffaf0);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50%,at 0%,#111,50%,#222,#111);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40%,at -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25%,at -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50%,at 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-13:radial-gradient(circle at 50% 200%,#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right,lime,cyan);--gradient-15:linear-gradient(to bottom right,#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50%,at -250%,#374151,#111827,#000);--gradient-16:radial-gradient(circle at 50% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50%,at -25%,blue,#8a2be2);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,0.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,0.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,0.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,0.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,0.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,0.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25%,at 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right,#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0%,at 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-24:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125%,at 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-25:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50%,at 105%,#fff,orchid);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,hsl(250 100% 85%/0%)),radial-gradient(circle at bottom left,#86acf9,hsl(220 90% 75%/0%));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,hsl(150 100% 84%/0%));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%}}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}} \ No newline at end of file | |||
diff --git a/docs/stylesheets/styles.css b/docs/stylesheets/styles.css new file mode 100644 index 0000000..78bef27 --- /dev/null +++ b/docs/stylesheets/styles.css | |||
@@ -0,0 +1,71 @@ | |||
1 | /* Set some CSS variables for use throughout the page */ | ||
2 | |||
3 | :root>* { | ||
4 | --md-hue: 208; /* blue-7 hue */ | ||
5 | --md-footer-bg-color: var(--md-code-bg-color); | ||
6 | --md-footer-fg-color: var(--md-code-fg-color); | ||
7 | } | ||
8 | |||
9 | [data-md-color-scheme="default"] { | ||
10 | --md-primary-fg-color: var(--blue-7); | ||
11 | --md-accent-fg-color: var(--violet-6); | ||
12 | --md-code-bg-color: var(--gray-2); | ||
13 | --md-default-fg-color--lightest: var(--gray-4); | ||
14 | } | ||
15 | |||
16 | [data-md-color-scheme="slate"] { | ||
17 | --md-primary-fg-color: var(--blue-5); | ||
18 | --md-accent-fg-color: var(--violet-4); | ||
19 | } | ||
20 | |||
21 | /* Override some default material styles */ | ||
22 | |||
23 | [dir=ltr] .md-header__title, | ||
24 | [dir=rtl] .md-header__title { | ||
25 | margin-inline: 0.3rem; | ||
26 | } | ||
27 | |||
28 | .md-nav__title { | ||
29 | display: none; | ||
30 | } | ||
31 | |||
32 | .md-footer__link { | ||
33 | display: inline-flex; | ||
34 | flex-direction: row; | ||
35 | align-items: center; | ||
36 | padding-top: 0.7rem; | ||
37 | } | ||
38 | |||
39 | .md-footer__link:is(:focus,:hover) { | ||
40 | opacity: unset; | ||
41 | } | ||
42 | |||
43 | .md-footer__title { | ||
44 | line-height: unset; | ||
45 | margin-top: 0.65rem; | ||
46 | padding-inline: 0.6rem; | ||
47 | } | ||
48 | |||
49 | .md-footer__direction { | ||
50 | padding-inline: 0.6rem; | ||
51 | } | ||
52 | |||
53 | .md-footer-meta { | ||
54 | background-color: hsla(var(--md-hue), 15%, 10%, 1); | ||
55 | } | ||
56 | |||
57 | html .md-footer .md-footer-meta a:focus, | ||
58 | html .md-footer .md-footer-meta a:hover, | ||
59 | html .md-footer a:focus, | ||
60 | html .md-footer a:hover { | ||
61 | color: var(--md-accent-fg-color); | ||
62 | } | ||
63 | |||
64 | /* Our custom styles */ | ||
65 | |||
66 | .hero-image { | ||
67 | width: 65%; | ||
68 | margin-inline-start: 17.5%; | ||
69 | border-radius: var(--radius-2); | ||
70 | box-shadow: var(--shadow-3); | ||
71 | } | ||