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.
This commit is contained in:
Emil Gulamov 2024-03-21 23:20:01 +04:00
parent 7b5776662c
commit 18d413f767
13 changed files with 107 additions and 92 deletions

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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

View file

@ -1,34 +1,35 @@
/* Dark mode colors. */
:root {
--backdrop-color: #272727cc;
--sl-color-accent: #ff801f;
--sl-color-accent-high: #ffa057;
--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-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-black: #181818;
--backdrop-color: #272727cc;
--sl-color-white: #fff;
--list-marker-color: #fb923c;
}
/* Light mode colors. */
:root[data-theme="light"] {
--sl-color-accent-low: #FFA057;
--backdrop-color: #f6f6f699;
--sl-color-accent: #b73d00;
--sl-color-accent-high: #562800;
--sl-color-white: #181818;
--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: #eeeeee;
--sl-color-gray-6: #eee;
--sl-color-gray-7: #f6f6f6;
--sl-color-black: #ffffff;
--backdrop-color: #f6f6f699;
--sl-color-white: #181818;
--list-marker-color: #fb923c;
}
@ -39,6 +40,7 @@ header {
select {
background-image: none;
box-shadow: none;
}
select:focus-visible {
@ -50,17 +52,17 @@ article.card {
}
.starlight-aside--tip {
background: linear-gradient(45deg, #ff512f, #f09819);
border: none;
border-radius: 0.5rem;
color: #66350c;
background: linear-gradient(45deg, #ff512f, #f09819);
}
.starlight-aside--note {
background: linear-gradient(45deg, #00b4db, #2193b0);
border: none;
border-radius: 0.5rem;
color: #004558;
background: linear-gradient(45deg, #00b4db, #2193b0);
}
.starlight-aside__icon {
@ -81,8 +83,8 @@ article.card {
}
.sl-markdown-content ul:not(:where(.not-content *)) > li {
position: relative;
padding-left: 1.75rem;
position: relative;
}
.sl-markdown-content li:not(:where(.not-content *)) > ul,
@ -91,12 +93,12 @@ article.card {
}
.sl-markdown-content ul:not(:where(.not-content *)) > li:before {
background: var(--list-marker-color);
border-radius: 1px;
content: "";
position: absolute;
height: 2px;
left: 2px;
position: absolute;
top: 13px;
width: 0.875rem;
height: 2px;
border-radius: 1px;
background: var(--list-marker-color);
}

View file

@ -1,38 +1,39 @@
/* Dark mode colors. */
:root {
--primary-button-hover: #ff801f;
--backdrop-color: #272727cc;
--sl-color-accent: #ff801f;
--sl-color-accent-high: #ffa057;
--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-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-black: #181818;
--yellow-hsl: 43.3,96.4%,56.3%;
--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;
--primary-button-hover: #ff801f;
--backdrop-color: #f6f6f699;
--sl-color-accent: #f76b15;
--sl-color-accent-high: #562800;
--primary-button-hover: #FF801F;
--sl-color-white: #181818;
--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: #eeeeee;
--sl-color-gray-6: #eee;
--sl-color-gray-7: #f6f6f6;
--sl-color-black: #ffffff;
--yellow-hsl: 47.9,95.8%,53.1%;
--backdrop-color: #F6F6F699;
--sl-color-white: #181818;
--yellow-hsl: 47.9, 95.8%, 53.1%;
}
.page {
@ -47,6 +48,7 @@ header {
select {
background-image: none;
box-shadow: none;
}
.sl-flex.action.primary:hover {