summaryrefslogtreecommitdiffstats
path: root/docs/static/docs.css
diff options
context:
space:
mode:
Diffstat (limited to 'docs/static/docs.css')
-rw-r--r--docs/static/docs.css413
1 files changed, 413 insertions, 0 deletions
diff --git a/docs/static/docs.css b/docs/static/docs.css
new file mode 100644
index 0000000..30c9898
--- /dev/null
+++ b/docs/static/docs.css
@@ -0,0 +1,413 @@
+.bg-cover {
+ position: absolute;
+ z-index: -1;
+ inset: 0;
+}
+
+.Logo {
+ display: flex;
+ height: 2.5rem;
+ align-items: center;
+ color: rgb(24 24 27);
+ opacity: 0.9;
+
+ &:hover {
+ opacity: 1;
+ }
+ & img.light {
+ display: block;
+ }
+ & img.dark {
+ display: none;
+ }
+ &:is(.dark *) img.light {
+ display: none;
+ }
+ &:is(.dark *) img.dark {
+ display: block;
+ }
+}
+
+.NavLinks {
+ & a {
+ padding: 0.25rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ color: rgb(82 82 91);
+ }
+ & a:hover {
+ color: rgb(24 24 27);
+ }
+
+ & a:is(.dark *) {
+ color: rgb(212 212 216);
+ }
+ & a:is(.dark *):hover {
+ color: rgb(255 255 255);
+ }
+}
+
+.homepage {
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-left: var(--cd-padding-left);
+ padding-right: var(--cd-padding-right);
+}
+.homepage section.hero {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ max-width: 56rem;
+ flex-direction: column;
+ padding-top: 2.25rem;
+ padding-bottom: 2.25rem;
+ color: rgb(23 23 23);
+
+ &:is(.dark *) {
+ color: rgb(245 245 245);
+ }
+
+ & h1 {
+ margin: 0 auto;
+ width: 300px;
+ height: 140px;
+ background-image: url("/static/img/jinjax-logo.svg");
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ text-indent: -999px;
+ display: none;
+ }
+
+ & h2 {
+ font-size: 2.2rem;
+ font-weight: 600;
+ line-height: 1.2;
+ letter-spacing: -0.05em;
+ }
+ & h2 .g1 {
+ background-image: linear-gradient(to bottom right, #fbbf24, #fb923c);
+ background-clip: text;
+ color: transparent;
+ }
+
+ & h2 .g2 {
+ background-image: linear-gradient(to bottom right, #34d399, #3b82f6);
+ background-clip: text;
+ color: transparent;
+ }
+
+ @media (min-width: 768px) {
+ & {
+ padding-top: 2.5rem;
+ padding-bottom: 3rem;
+ }
+ & h1 {
+ display: block;
+ width: 300px;
+ height: 100px;
+ }
+ & h2 {
+ font-size: 2.4rem;
+ text-align: center;
+ }
+ & h2 .g2 {
+ white-space: nowrap;
+ }
+ }
+
+ @media (min-width: 1024px) {
+ & h1 {
+ width: 400px;
+ height: 140px;
+ }
+ & h2 {
+ font-size: 3rem;
+ }
+ }
+}
+
+.homepage section.code {
+ margin-left: -1rem;
+ margin-right: -1rem;
+ max-width: 72rem;
+ border-width: 1px;
+ border-color: rgb(212 212 212);
+ background-color: rgb(231 229 228);
+ padding: 1.5rem 0;
+
+ &:is(.dark *) {
+ border-color: rgb(82 82 82);
+ background-color: rgb(41 37 36);
+ }
+
+ & .panel {
+ display: flex;
+ flex-direction: column;
+ }
+ & .panel ~ .panel {
+ margin-top: 1.5rem;
+ }
+ & h2 {
+ margin-bottom: 0.5rem;
+ text-align: center;
+ font-size: 1.5rem;
+ line-height: 1.1;
+ font-weight: 700;
+ }
+ & .highlight {
+ flex-grow: 1;
+ }
+ & pre {
+ height: 100%;
+ }
+
+ @media (min-width: 1024px) {
+ & {
+ border-radius: 1rem;
+ padding: 1.5rem;
+ margin-bottom: 2.5rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ & .stack {
+ display: flex;
+ align-items: stretch;
+ }
+ & .panel {
+ width: 50%;
+ }
+ & .panel ~ .panel {
+ margin-top: 0;
+ margin-left: 0.5rem;
+ }
+ }
+}
+
+.homepage section.features {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 56rem;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+
+ & h2 {
+ margin-bottom: 2rem;
+ text-align: center;
+ font-size: 2.2rem;
+ line-height: 1.2;
+ font-weight: 800;
+ }
+ & h2 code {
+ font-size: 0.9em;
+ }
+ & .cards {
+ margin-top: 2.5rem;
+ display: grid;
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ column-gap: 1rem;
+ row-gap: 1.5rem;
+ font-size: 1rem;
+ line-height: 1.4rem;
+ }
+ & .card {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ flex-direction: column;
+ height: 9rem;
+ max-width: 28rem;
+ border-radius: 1rem;
+ border-width: 2px;
+ border-color: rgb(245 245 244);
+ background-color: rgb(250 250 249);
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ }
+ & .card:is(.dark *) {
+ border-color: rgb(41 37 36);
+ background-color: rgb(41 37 36);
+ }
+ & .card > .header {
+ margin-bottom: 0.5rem;
+ display: flex;
+ align-items: center;
+ flex-direction: row-reverse;
+ }
+ & .card > .header img {
+ float: left;
+ max-height: 32px;
+ width: 2.5rem;
+ padding-right: 0.75rem;
+ }
+ & .card > .header img:is(.dark *) {
+ filter: invert(100%)
+ }
+ & .card > .header h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: rgb(24 24 27);
+ }
+ & .card > .header h3:is(.dark *) {
+ color: rgb(228 228 231);
+ }
+ & .card > .body {
+ flex-grow: 1;
+ margin-top: 0.5rem;
+ font-size: 1rem;
+ line-height: 1.4;
+ color: rgb(82 82 91);
+ }
+ & .card a {
+ font-weight: 600;
+ }
+
+ @media (min-width: 768px) {
+ & .cards {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ & .card {
+ height: 10rem;
+ }
+ }
+
+ @media (min-width: 1280px) {
+ & {
+ max-width: 1280px;
+ }
+ & .cards {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+ & .card {
+ height: 13rem;
+ align-items: flex-start;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ }
+ }
+}
+
+.homepage section.spaghetti {
+ margin-bottom: 1.25rem;
+ padding-left: var(--cd-padding-left);
+ padding-right: var(--cd-padding-right);
+
+ & .wrapper {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 64rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+
+ & h2 {
+ margin-bottom: 2rem;
+ text-align: center;
+ font-size: 2.2rem;
+ line-height: 1.2;
+ font-weight: 800;
+ }
+
+ & .text {
+ position: relative;
+ font-size: 1.4rem;
+ line-height: 1.4;
+ }
+ & .text img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: none;
+ height: 100%;
+ max-height: 24rem;
+ }
+ & .text p {
+ margin-bottom:1.5rem;
+ }
+
+ @media (min-width: 640px) {
+ & .wrapper {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ }
+ }
+
+ @media (min-width: 1024px) {
+ & .wrapper {
+ max-width: 72rem;
+ }
+ & .text {
+ padding-left: 440px;
+ }
+ & .text img {
+ display: block;
+ }
+ }
+}
+
+.homepage section.engage {
+ background-image: linear-gradient(to bottom, #d6d3d1, #e7e5e4, #a8a29e);
+ margin-left: -1rem;
+ margin-right: -1rem;
+
+ &:is(.dark *) {
+ background-image: linear-gradient(to bottom, #000, #1c1917);
+ }
+
+ & .wrapper {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ text-align: center;
+ }
+
+ & h3 {
+ margin-bottom: 2rem;
+ text-align: center;
+ font-size: 1.875rem;
+ line-height: 1.4;
+ font-weight: 800;
+ }
+
+ & a {
+ display: flex-inline;
+ align-items: center;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1.25rem;
+ display: inline-block;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border-radius: 1rem;
+ background-image: linear-gradient(to top right, #a3e635, #65a30d);
+ padding: 1rem 2rem;
+ text-align: center;
+ font-family: var(--cd-font-sans);
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ font-weight: 700;
+ color: rgb(39 39 42);
+ text-decoration-line: none;
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+ & a:hover {
+ background-image: linear-gradient(to top right, #a3e635, #a3e635);
+ color: rgb(0 0 0);
+ }
+ & a i {
+ font-style: normal;
+ font-size: 1.2rem;
+ }
+
+ & .hint {
+ font-size: 0.75rem;
+ line-height: 1rem;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 05:28:46 +0000