jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update CSS properties and layouts in MDX files

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/content/docs/en/advanced/technical-specifications.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Technical Specifications title: Technical Specifications
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/construction/custom-solutions.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Custom Solutions for Complex Projects title: Custom Solutions for Complex Projects
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/construction/project-planning.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Project Planning and Management title: Project Planning and Management
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/construction/safety.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Safety Protocols and Procedures title: Safety Protocols and Procedures
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/construction/service-overview.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Comprehensive Service Overview title: Comprehensive Service Overview
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/guides/first-project-checklist.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: First Project Checklist title: First Project Checklist
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/guides/getting-started.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Getting Started title: Getting Started
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/guides/intro.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Introduction to ScrewFast Services title: Introduction to ScrewFast Services
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/tools/equipment-care.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Equipment Care & Maintenance title: Equipment Care & Maintenance
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

1
src/content/docs/en/tools/tool-guides.mdx
View file

@ -1,4 +1,5 @@
--- ---
layout: ../../../../layouts/StarlightLayout.astro
title: Tool Guides title: Tool Guides
description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
sidebar: sidebar:

5
src/content/docs/en/welcome-to-docs.mdx
View file

@ -1,8 +1,9 @@
--- ---
title: ScrewFast docs layout: ../../../layouts/StarlightLayout.astro
title: ScrewFast Docs
head: head:
- tag: title - 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. description: Explore ScrewFast's comprehensive documentation for an in-depth look at our premium tools and construction services.
template: splash template: splash
editUrl: false editUrl: false

112
src/styles/starlight.css
View file

@ -1,44 +1,46 @@
/* Dark mode colors. */ /* Dark mode colors. */
:root { :root {
--sl-color-accent-low: #562800; --backdrop-color: #272727cc;
--sl-color-accent: #FF801F; --sl-color-accent: #ff801f;
--sl-color-accent-high: #FFA057; --sl-color-accent-high: #ffa057;
--sl-color-white: #ffffff; --sl-color-accent-low: #562800;
--sl-color-gray-1: #eeeeee; --sl-color-black: #181818;
--sl-color-gray-2: #c2c2c2; --sl-color-gray-1: #eee;
--sl-color-gray-3: #8b8b8b; --sl-color-gray-2: #c2c2c2;
--sl-color-gray-4: #585858; --sl-color-gray-3: #8b8b8b;
--sl-color-gray-5: #383838; --sl-color-gray-4: #585858;
--sl-color-gray-6: #272727; --sl-color-gray-5: #383838;
--sl-color-black: #181818; --sl-color-gray-6: #272727;
--backdrop-color: #272727cc; --sl-color-white: #fff;
--list-marker-color: #fb923c; --list-marker-color: #fb923c;
} }
/* Light mode colors. */ /* Light mode colors. */
:root[data-theme="light"] { :root[data-theme="light"] {
--sl-color-accent-low: #FFA057; --backdrop-color: #f6f6f699;
--sl-color-accent: #b73d00; --sl-color-accent: #b73d00;
--sl-color-accent-high: #562800; --sl-color-accent-high: #562800;
--sl-color-white: #181818; --sl-color-accent-low: #ffa057;
--sl-color-gray-1: #272727; --sl-color-black: #fff;
--sl-color-gray-2: #383838; --sl-color-gray-1: #272727;
--sl-color-gray-3: #585858; --sl-color-gray-2: #383838;
--sl-color-gray-4: #8b8b8b; --sl-color-gray-3: #585858;
--sl-color-gray-5: #c2c2c2; --sl-color-gray-4: #8b8b8b;
--sl-color-gray-6: #eeeeee; --sl-color-gray-5: #c2c2c2;
--sl-color-gray-7: #f6f6f6; --sl-color-gray-6: #eee;
--sl-color-black: #ffffff; --sl-color-gray-7: #f6f6f6;
--backdrop-color: #f6f6f699; --sl-color-white: #181818;
--list-marker-color: #fb923c; --list-marker-color: #fb923c;
} }
header { header {
backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
background-color: var(--backdrop-color) !important; background-color: var(--backdrop-color) !important;
} }
select { select {
background-image: none; background-image: none;
box-shadow: none;
} }
select:focus-visible { select:focus-visible {
@ -46,57 +48,57 @@ select:focus-visible {
} }
article.card { article.card {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.starlight-aside--tip { .starlight-aside--tip {
border: none; background: linear-gradient(45deg, #ff512f, #f09819);
border-radius: 0.5rem; border: none;
color: #66350c; border-radius: 0.5rem;
background: linear-gradient(45deg, #ff512f, #f09819); color: #66350c;
} }
.starlight-aside--note { .starlight-aside--note {
border: none; background: linear-gradient(45deg, #00b4db, #2193b0);
border-radius: 0.5rem; border: none;
color: #004558; border-radius: 0.5rem;
background: linear-gradient(45deg, #00b4db, #2193b0); color: #004558;
} }
.starlight-aside__icon { .starlight-aside__icon {
transform: scale(0.8); transform: scale(0.8);
} }
.starlight-aside--tip .starlight-aside__title { .starlight-aside--tip .starlight-aside__title {
color: #ffe0c2; color: #ffe0c2;
} }
.starlight-aside--note .starlight-aside__title { .starlight-aside--note .starlight-aside__title {
color: #bbf3fef7; color: #bbf3fef7;
} }
.sl-markdown-content ul:not(:where(.not-content *)) { .sl-markdown-content ul:not(:where(.not-content *)) {
list-style-type: none; list-style-type: none;
padding-left: 0; padding-left: 0;
} }
.sl-markdown-content ul:not(:where(.not-content *)) > li { .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:not(:where(.not-content *)) > ul,
.sl-markdown-content li + li:not(:where(.not-content *)) { .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 { .sl-markdown-content ul:not(:where(.not-content *)) > li:before {
content: ""; background: var(--list-marker-color);
position: absolute; border-radius: 1px;
left: 2px; content: "";
top: 13px; height: 2px;
width: 0.875rem; left: 2px;
height: 2px; position: absolute;
border-radius: 1px; top: 13px;
background: var(--list-marker-color); width: 0.875rem;
} }

72
src/styles/starlight_main.css
View file

@ -1,38 +1,39 @@
/* Dark mode colors. */ /* Dark mode colors. */
:root { :root {
--sl-color-accent-low: #562800; --primary-button-hover: #ff801f;
--sl-color-accent: #FF801F; --backdrop-color: #272727cc;
--sl-color-accent-high: #FFA057; --sl-color-accent: #ff801f;
--primary-button-hover: #FF801F; --sl-color-accent-high: #ffa057;
--sl-color-white: #ffffff; --sl-color-accent-low: #562800;
--sl-color-gray-1: #eeeeee; --sl-color-black: #181818;
--sl-color-gray-2: #c2c2c2; --sl-color-gray-1: #eee;
--sl-color-gray-3: #8b8b8b; --sl-color-gray-2: #c2c2c2;
--sl-color-gray-4: #585858; --sl-color-gray-3: #8b8b8b;
--sl-color-gray-5: #383838; --sl-color-gray-4: #585858;
--sl-color-gray-6: #272727; --sl-color-gray-5: #383838;
--sl-color-black: #181818; --sl-color-gray-6: #272727;
--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); --overlay-yellow: hsla(var(--yellow-hsl), .2);
--backdrop-color: #272727cc;
} }
/* Light mode colors. */ /* Light mode colors. */
:root[data-theme='light'] { :root[data-theme='light'] {
--sl-color-accent-low: #FFA057; --primary-button-hover: #ff801f;
--sl-color-accent: #F76B15; --backdrop-color: #f6f6f699;
--sl-color-accent-high: #562800; --sl-color-accent: #f76b15;
--primary-button-hover: #FF801F; --sl-color-accent-high: #562800;
--sl-color-white: #181818; --sl-color-accent-low: #ffa057;
--sl-color-gray-1: #272727; --sl-color-black: #fff;
--sl-color-gray-2: #383838; --sl-color-gray-1: #272727;
--sl-color-gray-3: #585858; --sl-color-gray-2: #383838;
--sl-color-gray-4: #8b8b8b; --sl-color-gray-3: #585858;
--sl-color-gray-5: #c2c2c2; --sl-color-gray-4: #8b8b8b;
--sl-color-gray-6: #eeeeee; --sl-color-gray-5: #c2c2c2;
--sl-color-gray-7: #f6f6f6; --sl-color-gray-6: #eee;
--sl-color-black: #ffffff; --sl-color-gray-7: #f6f6f6;
--yellow-hsl: 47.9,95.8%,53.1%; --sl-color-white: #181818;
--backdrop-color: #F6F6F699; --yellow-hsl: 47.9, 95.8%, 53.1%;
} }
.page { .page {
@ -41,20 +42,21 @@
} }
header { header {
backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
background-color: var(--backdrop-color) !important; background-color: var(--backdrop-color) !important;
} }
select { select {
background-image: none; background-image: none;
box-shadow: none;
} }
.sl-flex.action.primary:hover { .sl-flex.action.primary:hover {
background-color: var(--primary-button-hover); background-color: var(--primary-button-hover);
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
} }
.sl-flex.action.primary:hover svg { .sl-flex.action.primary:hover svg {
transform: translateX(0.25rem); transform: translateX(0.25rem);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
} }