From 18d413f767a8084e050e5484b1b2fba9a3319bac Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Thu, 21 Mar 2024 23:20:01 +0400 Subject: [PATCH] Update CSS properties and layouts in MDX files The CSS properties in the starlight_main.css, starlight.css files were updated for both dark and light modes to improve color consistency and design elements such as background gradients and list marker color. Layouts of the MDX files (first-project-checklist.mdx, getting-started.mdx, and welcome-to-docs.mdx) were also updated to use the Starlight Layout. --- .../en/advanced/technical-specifications.mdx | 1 + .../docs/en/construction/custom-solutions.mdx | 1 + .../docs/en/construction/project-planning.mdx | 1 + src/content/docs/en/construction/safety.mdx | 1 + .../docs/en/construction/service-overview.mdx | 1 + .../en/guides/first-project-checklist.mdx | 1 + .../docs/en/guides/getting-started.mdx | 1 + src/content/docs/en/guides/intro.mdx | 1 + src/content/docs/en/tools/equipment-care.mdx | 1 + src/content/docs/en/tools/tool-guides.mdx | 1 + src/content/docs/en/welcome-to-docs.mdx | 5 +- src/styles/starlight.css | 112 +++++++++--------- src/styles/starlight_main.css | 72 +++++------ 13 files changed, 107 insertions(+), 92 deletions(-) diff --git a/src/content/docs/en/advanced/technical-specifications.mdx b/src/content/docs/en/advanced/technical-specifications.mdx index 9f81266..3fdc791 100644 --- a/src/content/docs/en/advanced/technical-specifications.mdx +++ b/src/content/docs/en/advanced/technical-specifications.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Technical Specifications description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/construction/custom-solutions.mdx b/src/content/docs/en/construction/custom-solutions.mdx index 13d7941..d68eac9 100644 --- a/src/content/docs/en/construction/custom-solutions.mdx +++ b/src/content/docs/en/construction/custom-solutions.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Custom Solutions for Complex Projects description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/construction/project-planning.mdx b/src/content/docs/en/construction/project-planning.mdx index bf2d3cc..8ea9e71 100644 --- a/src/content/docs/en/construction/project-planning.mdx +++ b/src/content/docs/en/construction/project-planning.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Project Planning and Management description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/construction/safety.mdx b/src/content/docs/en/construction/safety.mdx index 3055d1a..ab2fa0e 100644 --- a/src/content/docs/en/construction/safety.mdx +++ b/src/content/docs/en/construction/safety.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Safety Protocols and Procedures description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/construction/service-overview.mdx b/src/content/docs/en/construction/service-overview.mdx index 88dd963..c3ec729 100644 --- a/src/content/docs/en/construction/service-overview.mdx +++ b/src/content/docs/en/construction/service-overview.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Comprehensive Service Overview description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/guides/first-project-checklist.mdx b/src/content/docs/en/guides/first-project-checklist.mdx index dcc2325..349c9dc 100644 --- a/src/content/docs/en/guides/first-project-checklist.mdx +++ b/src/content/docs/en/guides/first-project-checklist.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: First Project Checklist description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/guides/getting-started.mdx b/src/content/docs/en/guides/getting-started.mdx index cba5798..60cfbdc 100644 --- a/src/content/docs/en/guides/getting-started.mdx +++ b/src/content/docs/en/guides/getting-started.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Getting Started description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/guides/intro.mdx b/src/content/docs/en/guides/intro.mdx index 1b69296..7e2f2ef 100644 --- a/src/content/docs/en/guides/intro.mdx +++ b/src/content/docs/en/guides/intro.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Introduction to ScrewFast Services description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/tools/equipment-care.mdx b/src/content/docs/en/tools/equipment-care.mdx index 18e0e9d..bf6526d 100644 --- a/src/content/docs/en/tools/equipment-care.mdx +++ b/src/content/docs/en/tools/equipment-care.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Equipment Care & Maintenance description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/tools/tool-guides.mdx b/src/content/docs/en/tools/tool-guides.mdx index 5feab80..e8046e4 100644 --- a/src/content/docs/en/tools/tool-guides.mdx +++ b/src/content/docs/en/tools/tool-guides.mdx @@ -1,4 +1,5 @@ --- +layout: ../../../../layouts/StarlightLayout.astro title: Tool Guides description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. sidebar: diff --git a/src/content/docs/en/welcome-to-docs.mdx b/src/content/docs/en/welcome-to-docs.mdx index e4193e1..74c651b 100644 --- a/src/content/docs/en/welcome-to-docs.mdx +++ b/src/content/docs/en/welcome-to-docs.mdx @@ -1,8 +1,9 @@ --- -title: ScrewFast docs +layout: ../../../layouts/StarlightLayout.astro +title: ScrewFast Docs head: - tag: title - content: ScrewFast docs + content: ScrewFast Docs description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. template: splash editUrl: false diff --git a/src/styles/starlight.css b/src/styles/starlight.css index 53cb3b2..17a5e81 100644 --- a/src/styles/starlight.css +++ b/src/styles/starlight.css @@ -1,44 +1,46 @@ /* Dark mode colors. */ :root { - --sl-color-accent-low: #562800; - --sl-color-accent: #FF801F; - --sl-color-accent-high: #FFA057; - --sl-color-white: #ffffff; - --sl-color-gray-1: #eeeeee; - --sl-color-gray-2: #c2c2c2; - --sl-color-gray-3: #8b8b8b; - --sl-color-gray-4: #585858; - --sl-color-gray-5: #383838; - --sl-color-gray-6: #272727; - --sl-color-black: #181818; - --backdrop-color: #272727cc; - --list-marker-color: #fb923c; + --backdrop-color: #272727cc; + --sl-color-accent: #ff801f; + --sl-color-accent-high: #ffa057; + --sl-color-accent-low: #562800; + --sl-color-black: #181818; + --sl-color-gray-1: #eee; + --sl-color-gray-2: #c2c2c2; + --sl-color-gray-3: #8b8b8b; + --sl-color-gray-4: #585858; + --sl-color-gray-5: #383838; + --sl-color-gray-6: #272727; + --sl-color-white: #fff; + --list-marker-color: #fb923c; } + /* Light mode colors. */ :root[data-theme="light"] { - --sl-color-accent-low: #FFA057; - --sl-color-accent: #b73d00; - --sl-color-accent-high: #562800; - --sl-color-white: #181818; - --sl-color-gray-1: #272727; - --sl-color-gray-2: #383838; - --sl-color-gray-3: #585858; - --sl-color-gray-4: #8b8b8b; - --sl-color-gray-5: #c2c2c2; - --sl-color-gray-6: #eeeeee; - --sl-color-gray-7: #f6f6f6; - --sl-color-black: #ffffff; - --backdrop-color: #f6f6f699; - --list-marker-color: #fb923c; + --backdrop-color: #f6f6f699; + --sl-color-accent: #b73d00; + --sl-color-accent-high: #562800; + --sl-color-accent-low: #ffa057; + --sl-color-black: #fff; + --sl-color-gray-1: #272727; + --sl-color-gray-2: #383838; + --sl-color-gray-3: #585858; + --sl-color-gray-4: #8b8b8b; + --sl-color-gray-5: #c2c2c2; + --sl-color-gray-6: #eee; + --sl-color-gray-7: #f6f6f6; + --sl-color-white: #181818; + --list-marker-color: #fb923c; } header { - backdrop-filter: blur(12px) !important; - background-color: var(--backdrop-color) !important; + backdrop-filter: blur(12px) !important; + background-color: var(--backdrop-color) !important; } select { - background-image: none; + background-image: none; + box-shadow: none; } select:focus-visible { @@ -46,57 +48,57 @@ select:focus-visible { } article.card { - border-radius: 0.5rem; + border-radius: 0.5rem; } .starlight-aside--tip { - border: none; - border-radius: 0.5rem; - color: #66350c; - background: linear-gradient(45deg, #ff512f, #f09819); + background: linear-gradient(45deg, #ff512f, #f09819); + border: none; + border-radius: 0.5rem; + color: #66350c; } .starlight-aside--note { - border: none; - border-radius: 0.5rem; - color: #004558; - background: linear-gradient(45deg, #00b4db, #2193b0); + background: linear-gradient(45deg, #00b4db, #2193b0); + border: none; + border-radius: 0.5rem; + color: #004558; } .starlight-aside__icon { - transform: scale(0.8); + transform: scale(0.8); } .starlight-aside--tip .starlight-aside__title { - color: #ffe0c2; + color: #ffe0c2; } .starlight-aside--note .starlight-aside__title { - color: #bbf3fef7; + color: #bbf3fef7; } .sl-markdown-content ul:not(:where(.not-content *)) { - list-style-type: none; - padding-left: 0; + list-style-type: none; + padding-left: 0; } .sl-markdown-content ul:not(:where(.not-content *)) > li { - position: relative; - padding-left: 1.75rem; + padding-left: 1.75rem; + position: relative; } .sl-markdown-content li:not(:where(.not-content *)) > ul, .sl-markdown-content li + li:not(:where(.not-content *)) { - margin-top: 0.625rem; + margin-top: 0.625rem; } .sl-markdown-content ul:not(:where(.not-content *)) > li:before { - content: ""; - position: absolute; - left: 2px; - top: 13px; - width: 0.875rem; - height: 2px; - border-radius: 1px; - background: var(--list-marker-color); + background: var(--list-marker-color); + border-radius: 1px; + content: ""; + height: 2px; + left: 2px; + position: absolute; + top: 13px; + width: 0.875rem; } diff --git a/src/styles/starlight_main.css b/src/styles/starlight_main.css index 8497f16..4967f91 100644 --- a/src/styles/starlight_main.css +++ b/src/styles/starlight_main.css @@ -1,38 +1,39 @@ /* Dark mode colors. */ :root { - --sl-color-accent-low: #562800; - --sl-color-accent: #FF801F; - --sl-color-accent-high: #FFA057; - --primary-button-hover: #FF801F; - --sl-color-white: #ffffff; - --sl-color-gray-1: #eeeeee; - --sl-color-gray-2: #c2c2c2; - --sl-color-gray-3: #8b8b8b; - --sl-color-gray-4: #585858; - --sl-color-gray-5: #383838; - --sl-color-gray-6: #272727; - --sl-color-black: #181818; - --yellow-hsl: 43.3,96.4%,56.3%; + --primary-button-hover: #ff801f; + --backdrop-color: #272727cc; + --sl-color-accent: #ff801f; + --sl-color-accent-high: #ffa057; + --sl-color-accent-low: #562800; + --sl-color-black: #181818; + --sl-color-gray-1: #eee; + --sl-color-gray-2: #c2c2c2; + --sl-color-gray-3: #8b8b8b; + --sl-color-gray-4: #585858; + --sl-color-gray-5: #383838; + --sl-color-gray-6: #272727; + --sl-color-white: #fff; + --yellow-hsl: 43.3, 96.4%, 56.3%; --overlay-yellow: hsla(var(--yellow-hsl), .2); - --backdrop-color: #272727cc; } + /* Light mode colors. */ :root[data-theme='light'] { - --sl-color-accent-low: #FFA057; - --sl-color-accent: #F76B15; - --sl-color-accent-high: #562800; - --primary-button-hover: #FF801F; - --sl-color-white: #181818; - --sl-color-gray-1: #272727; - --sl-color-gray-2: #383838; - --sl-color-gray-3: #585858; - --sl-color-gray-4: #8b8b8b; - --sl-color-gray-5: #c2c2c2; - --sl-color-gray-6: #eeeeee; - --sl-color-gray-7: #f6f6f6; - --sl-color-black: #ffffff; - --yellow-hsl: 47.9,95.8%,53.1%; - --backdrop-color: #F6F6F699; + --primary-button-hover: #ff801f; + --backdrop-color: #f6f6f699; + --sl-color-accent: #f76b15; + --sl-color-accent-high: #562800; + --sl-color-accent-low: #ffa057; + --sl-color-black: #fff; + --sl-color-gray-1: #272727; + --sl-color-gray-2: #383838; + --sl-color-gray-3: #585858; + --sl-color-gray-4: #8b8b8b; + --sl-color-gray-5: #c2c2c2; + --sl-color-gray-6: #eee; + --sl-color-gray-7: #f6f6f6; + --sl-color-white: #181818; + --yellow-hsl: 47.9, 95.8%, 53.1%; } .page { @@ -41,20 +42,21 @@ } header { - backdrop-filter: blur(12px) !important; + backdrop-filter: blur(12px) !important; background-color: var(--backdrop-color) !important; } select { - background-image: none; + background-image: none; + box-shadow: none; } .sl-flex.action.primary:hover { - background-color: var(--primary-button-hover); - transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: var(--primary-button-hover); + transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } .sl-flex.action.primary:hover svg { - transform: translateX(0.25rem); - transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); + transform: translateX(0.25rem); + transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } \ No newline at end of file