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

Update UI component and application styles

Browse source 
Moved SiteTitle.astro to a new Starlight directory and enhanced application styles across multiple CSS classes. Updated lists in .mdx files to use bullet points instead of numbers. The relocation of the SiteTitle component contributes to a more organized project structure. Changes in styles improve the application's visual appeal and readability, while the updated list format enhances content presentation.
This commit is contained in:
Emil Gulamov 2024-03-21 17:24:38 +04:00
parent 59de89cbd8
commit 36695d3340
13 changed files with 151 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
astro.config.mjs
View file

@ -55,7 +55,7 @@ export default defineConfig({
customCss: ["./src/styles/starlight.css"], customCss: ["./src/styles/starlight.css"],
favicon: "/favicon.ico", favicon: "/favicon.ico",
components: { components: {
SiteTitle: "./src/components/ui/SiteTitle.astro", SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
}, },
}), }),
compressor({ compressor({

15
src/components/ui/SiteTitle.astro → src/components/ui/starlight/SiteTitle.astro
View file

@ -1,6 +1,6 @@
--- ---
import logo from "../../images/starlight/screwfast_logo_dark.svg?raw"; import logo from "../../../images/starlight/screwfast_logo_dark.svg?raw";
import docs from "../../images/starlight/docs_logo.svg?raw"; import docs from "../../../images/starlight/docs_logo.svg?raw";
import type { Props } from "@astrojs/starlight/props"; import type { Props } from "@astrojs/starlight/props";
const main = "/"; const main = "/";
@ -15,6 +15,7 @@ const self = "/" + (Astro.props.locale || "en") + "/welcome-to-docs/";
<style> <style>
.site-title { .site-title {
gap: 1rem; gap: 1rem;
margin-right: 1rem;
} }
.site-title a { .site-title a {
display: flex; display: flex;
@ -28,20 +29,16 @@ const self = "/" + (Astro.props.locale || "en") + "/welcome-to-docs/";
outline: 0; outline: 0;
} }
.site-title a:focus-visible > :global(*) { .site-title a:focus-visible > :global(*) {
outline: auto; transform: translateY(calc(.1rem * -1));
outline-offset: 0.33rem; transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
border-radius: 1px;
} }
.site-title :global(svg) { .site-title :global(svg) {
--display-height: 1.75rem;
width: auto; width: auto;
height: auto; height: auto;
transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
} }
.site-title a:hover :global(svg) { .site-title a:hover :global(svg) {
--hover-offset: 0.15rem;
transform: translateY(calc(.1rem * -1)); transform: translateY(calc(.1rem * -1));
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
} }
</style> </style>

12
src/content/docs/de/guides/first-project-checklist.mdx
View file

@ -21,16 +21,16 @@ Den Beginn eines neuen Projekts anzugehen kann gleichermaßen aufregend und hera
<CardGrid> <CardGrid>
<Card title="Umfang und Ziele"> <Card title="Umfang und Ziele">
1. Stellen Sie sicher, dass der Umfang des Projekts, die Liefergegenstände und die angestrebten Ergebnisse klar definiert sind. - Stellen Sie sicher, dass der Umfang des Projekts, die Liefergegenstände und die angestrebten Ergebnisse klar definiert sind.
2. Legen Sie klare Ziele und Erfolgskriterien für den Abschluss des Projekts fest. - Legen Sie klare Ziele und Erfolgskriterien für den Abschluss des Projekts fest.
</Card> </Card>
<Card title="Werkzeuge und Ausrüstung"> <Card title="Werkzeuge und Ausrüstung">
1. Erstellen Sie eine Liste aller benötigten ScrewFast Werkzeuge und Ausrüstungen. - Erstellen Sie eine Liste aller benötigten ScrewFast Werkzeuge und Ausrüstungen.
2. Überprüfen Sie die Verfügbarkeit und den Zustand des Inventars vor Beginn. - Überprüfen Sie die Verfügbarkeit und den Zustand des Inventars vor Beginn.
</Card> </Card>
<Card title="Dienstleistungen arrangieren"> <Card title="Dienstleistungen arrangieren">
1. Wenn zusätzliche Expertise oder Arbeitskräfte benötigt werden, vereinbaren Sie rechtzeitig ScrewFast Bauarbeiten. - Wenn zusätzliche Expertise oder Arbeitskräfte benötigt werden, vereinbaren Sie rechtzeitig ScrewFast Bauarbeiten.
2. Klären Sie Service Level Agreements und Zeitpläne mit Ihrem ScrewFast Vertreter. - Klären Sie Service Level Agreements und Zeitpläne mit Ihrem ScrewFast Vertreter.
</Card> </Card>
</CardGrid> </CardGrid>

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

@ -13,10 +13,10 @@ import {
Challenging projects demand innovative solutions. ScrewFast excels in delivering custom solutions engineered to address the most intricate and demanding construction requirements. Challenging projects demand innovative solutions. ScrewFast excels in delivering custom solutions engineered to address the most intricate and demanding construction requirements.
<Card title="Our custom services provide:" icon="puzzle"> <Card title="Our custom services provide:" icon="puzzle">
1. Expert analysis of unconventional project demands - Expert analysis of unconventional project demands
2. Tailored construction methods for unique structures - Tailored construction methods for unique structures
3. Specialized materials and equipment sourcing - Specialized materials and equipment sourcing
4. Collaboration with specialized subcontractors and consultants - Collaboration with specialized subcontractors and consultants
</Card> </Card>
No matter the complexity, our bespoke services ensure that your specialized project is not just completed, but mastered. No matter the complexity, our bespoke services ensure that your specialized project is not just completed, but mastered.

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

@ -13,9 +13,9 @@ import {
Achieve seamless project execution with ScrewFast's meticulous planning and management approach. We prioritize clear communication and strategic planning to ensure your project milestones are achieved without compromise. Achieve seamless project execution with ScrewFast's meticulous planning and management approach. We prioritize clear communication and strategic planning to ensure your project milestones are achieved without compromise.
<Card title="Our planning and management services include:" icon="seti:notebook"> <Card title="Our planning and management services include:" icon="seti:notebook">
1. Detailed project timelines - Detailed project timelines
2. Resource allocation and optimization - Resource allocation and optimization
3. Regular progress updates and reports - Regular progress updates and reports
4. Risk assessment and management - Risk assessment and management
</Card> </Card>
We believe in proactive management to foresee potential challenges and devise solutions before they impact the project. We believe in proactive management to foresee potential challenges and devise solutions before they impact the project.

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

@ -21,16 +21,16 @@ Embarking on a new project can be exciting and challenging in equal measure. Wit
<CardGrid> <CardGrid>
<Card title="Scope and Objectives"> <Card title="Scope and Objectives">
1. Ensure clarity of the project's scope, deliverables, and desired outcomes - Ensure clarity of the project's scope, deliverables, and desired outcomes
2. Define clear objectives and success criteria for project completion - Define clear objectives and success criteria for project completion
</Card> </Card>
<Card title="Tools and Equipment"> <Card title="Tools and Equipment">
1. Make a list of all required ScrewFast tools and equipment - Make a list of all required ScrewFast tools and equipment
2. Verify inventory availability and condition before starting - Verify inventory availability and condition before starting
</Card> </Card>
<Card title="Arranging Services"> <Card title="Arranging Services">
1. If additional expertise or manpower is needed, arrange for ScrewFast construction services in advance - If additional expertise or manpower is needed, arrange for ScrewFast construction services in advance
2. Clarify service level agreements and timelines with your ScrewFast representative - Clarify service level agreements and timelines with your ScrewFast representative
</Card> </Card>
</CardGrid> </CardGrid>

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

@ -27,13 +27,13 @@ import {
<CardGrid> <CardGrid>
<Card title="Best Practices for Equipment Longevity" icon="star"> <Card title="Best Practices for Equipment Longevity" icon="star">
1. Strategies for extending the life of your tools and equipment through proper use and handling - Strategies for extending the life of your tools and equipment through proper use and handling
2. A preventative maintenance schedule that will help avoid common wear and tear - A preventative maintenance schedule that will help avoid common wear and tear
</Card> </Card>
<Card title="Troubleshooting Common Tool Issues" icon="rocket"> <Card title="Troubleshooting Common Tool Issues" icon="rocket">
1. Solutions for frequently encountered issues with ScrewFast equipment - Solutions for frequently encountered issues with ScrewFast equipment
2. Advice on when to seek professional repair services versus performing DIY fixes - Advice on when to seek professional repair services versus performing DIY fixes
</Card> </Card>
</CardGrid> </CardGrid>

12
src/content/docs/es/guides/first-project-checklist.mdx
View file

@ -21,16 +21,16 @@ Comenzar un nuevo proyecto puede ser emocionante y desafiante en igual medida. C
<CardGrid> <CardGrid>
<Card title="Alcance y Objetivos"> <Card title="Alcance y Objetivos">
1. Asegurar claridad sobre el alcance del proyecto, entregables y resultados deseados. - Asegurar claridad sobre el alcance del proyecto, entregables y resultados deseados.
2. Definir objetivos claros y criterios de éxito para la finalización del proyecto. - Definir objetivos claros y criterios de éxito para la finalización del proyecto.
</Card> </Card>
<Card title="Herramientas y Equipamiento"> <Card title="Herramientas y Equipamiento">
1. Hacer una lista de todas las herramientas y equipos de ScrewFast necesarios. - Hacer una lista de todas las herramientas y equipos de ScrewFast necesarios.
2. Verificar la disponibilidad y condición del inventario antes de comenzar. - Verificar la disponibilidad y condición del inventario antes de comenzar.
</Card> </Card>
<Card title="Organización de Servicios"> <Card title="Organización de Servicios">
1. Si se necesita experiencia adicional o mano de obra, organiza los servicios de construcción de ScrewFast con anticipación. - Si se necesita experiencia adicional o mano de obra, organiza los servicios de construcción de ScrewFast con anticipación.
2. Aclarar los acuerdos de nivel de servicio y los plazos con tu representante de ScrewFast. - Aclarar los acuerdos de nivel de servicio y los plazos con tu representante de ScrewFast.
</Card> </Card>
</CardGrid> </CardGrid>

12
src/content/docs/fa/guides/first-project-checklist.mdx
View file

@ -21,16 +21,16 @@ import {
<CardGrid> <CardGrid>
<Card title="دامنه و اهداف"> <Card title="دامنه و اهداف">
1. اطمینان از وضوح دامنه پروژه، خروجی‌ها و نتایج مورد نظر - اطمینان از وضوح دامنه پروژه، خروجی‌ها و نتایج مورد نظر
2. تعریف اهداف روشن و شاخص‌های موفقیت برای اتمام پروژه - تعریف اهداف روشن و شاخص‌های موفقیت برای اتمام پروژه
</Card> </Card>
<Card title="ابزارها و تجهیزات"> <Card title="ابزارها و تجهیزات">
1. تهیه لیستی از تمامی ابزارها و تجهیزات مورد نیاز ScrewFast - تهیه لیستی از تمامی ابزارها و تجهیزات مورد نیاز ScrewFast
2. بررسی دسترسی و شرایط موجودی قبل از شروع - بررسی دسترسی و شرایط موجودی قبل از شروع
</Card> </Card>
<Card title="مرتب‌سازی خدمات"> <Card title="مرتب‌سازی خدمات">
1. در صورت نیاز به تخصص یا نیروی انسانی اضافی، برنامه‌ریزی خدمات ساخت و ساز ScrewFast را به صورت پیشگامانه انجام دهید - در صورت نیاز به تخصص یا نیروی انسانی اضافی، برنامه‌ریزی خدمات ساخت و ساز ScrewFast را به صورت پیشگامانه انجام دهید
2. ابهامات توافق‌نامه‌های سطح خدمات و زمانبندی را با نماینده ScrewFast خود روشن کنید - ابهامات توافق‌نامه‌های سطح خدمات و زمانبندی را با نماینده ScrewFast خود روشن کنید
</Card> </Card>
</CardGrid> </CardGrid>

12
src/content/docs/fr/guides/first-project-checklist.mdx
View file

@ -21,16 +21,16 @@ Se lancer dans un nouveau projet peut être à la fois excitant et stimulant. Av
<CardGrid> <CardGrid>
<Card title="Portée et objectifs"> <Card title="Portée et objectifs">
1. Assurez-vous de la clarté de la portée du projet, des livrables et des résultats souhaités - Assurez-vous de la clarté de la portée du projet, des livrables et des résultats souhaités
2. Définissez des objectifs clairs et des critères de réussite pour l'achèvement du projet - Définissez des objectifs clairs et des critères de réussite pour l'achèvement du projet
</Card> </Card>
<Card title="Outils et équipement"> <Card title="Outils et équipement">
1. Faites une liste de tous les outils et équipements ScrewFast nécessaires - Faites une liste de tous les outils et équipements ScrewFast nécessaires
2. Vérifiez la disponibilité de l'inventaire et son état avant de commencer - Vérifiez la disponibilité de l'inventaire et son état avant de commencer
</Card> </Card>
<Card title="Organisation des services"> <Card title="Organisation des services">
1. Si une expertise supplémentaire ou une main-d'œuvre est nécessaire, organisez les services de construction ScrewFast à l'avance - Si une expertise supplémentaire ou une main-d'œuvre est nécessaire, organisez les services de construction ScrewFast à l'avance
2. Clarifiez les accords de niveau de service et les délais avec votre représentant ScrewFast - Clarifiez les accords de niveau de service et les délais avec votre représentant ScrewFast
</Card> </Card>
</CardGrid> </CardGrid>

12
src/content/docs/ja/guides/first-project-checklist.mdx
View file

@ -21,16 +21,16 @@ import {
<CardGrid> <CardGrid>
<Card title="スコープと目標"> <Card title="スコープと目標">
1. プロジェクトのスコープ、成果物、および希望される成果の明確さを確保する - プロジェクトのスコープ、成果物、および希望される成果の明確さを確保する
2. プロジェクト完了のための明確な目標と成功基準を定義する - プロジェクト完了のための明確な目標と成功基準を定義する
</Card> </Card>
<Card title="ツールと機器"> <Card title="ツールと機器">
1. 必要なすべてのScrewFastツールと機器のリストを作成する - 必要なすべてのScrewFastツールと機器のリストを作成する
2. 開始前に在庫の可用性と状態を確認する - 開始前に在庫の可用性と状態を確認する
</Card> </Card>
<Card title="サービスの手配"> <Card title="サービスの手配">
1. 追加の専門知識や労働力が必要な場合は、事前にScrewFast建設サービスを手配する - 追加の専門知識や労働力が必要な場合は、事前にScrewFast建設サービスを手配する
2. あなたのScrewFast代表者とのサービスレベル契約とタイムラインを明確にする - あなたのScrewFast代表者とのサービスレベル契約とタイムラインを明確にする
</Card> </Card>
</CardGrid> </CardGrid>

12
src/content/docs/zh-cn/guides/first-project-checklist.mdx
View file

@ -22,16 +22,16 @@ import {
<CardGrid> <CardGrid>
<Card title="范围和目标"> <Card title="范围和目标">
1. 确保项目的范围、交付内容和期望结果清晰明确 - 确保项目的范围、交付内容和期望结果清晰明确
2. 为项目完成明确定义清晰的目标和成功标准 - 为项目完成明确定义清晰的目标和成功标准
</Card> </Card>
<Card title="工具和设备"> <Card title="工具和设备">
1. 列出所有需要的 ScrewFast 工具和设备 - 列出所有需要的 ScrewFast 工具和设备
2. 在开始之前确认库存的可用性和状态 - 在开始之前确认库存的可用性和状态
</Card> </Card>
<Card title="安排服务"> <Card title="安排服务">
1. 如果需要额外的专业知识或人力，请提前安排 ScrewFast 建筑服务 - 如果需要额外的专业知识或人力，请提前安排 ScrewFast 建筑服务
2. 与您的 ScrewFast 代表明确服务级别协议和时间表 - 与您的 ScrewFast 代表明确服务级别协议和时间表
</Card> </Card>
</CardGrid> </CardGrid>

115
src/styles/starlight.css
View file

@ -1,37 +1,98 @@
/* Dark mode colors. */ /* Dark mode colors. */
:root { :root {
--sl-color-accent-low: #3f1505; --sl-color-accent-low: #3f1505;
--sl-color-accent: #b43c00; --sl-color-accent: #b43c00;
--sl-color-accent-high: #f2b9a6; --sl-color-accent-high: #f2b9a6;
--sl-color-white: #ffffff; --sl-color-white: #ffffff;
--sl-color-gray-1: #eeeeee; --sl-color-gray-1: #eeeeee;
--sl-color-gray-2: #c2c2c2; --sl-color-gray-2: #c2c2c2;
--sl-color-gray-3: #8b8b8b; --sl-color-gray-3: #8b8b8b;
--sl-color-gray-4: #585858; --sl-color-gray-4: #585858;
--sl-color-gray-5: #383838; --sl-color-gray-5: #383838;
--sl-color-gray-6: #272727; --sl-color-gray-6: #272727;
--sl-color-black: #181818; --sl-color-black: #181818;
--backdrop-color: #272727cc;
--list-marker-color: #fb923c;
} }
/* Light mode colors. */ /* Light mode colors. */
:root[data-theme='light'] { :root[data-theme="light"] {
--sl-color-accent-low: #f7ccbd; --sl-color-accent-low: #f7ccbd;
--sl-color-accent: #b73d00; --sl-color-accent: #b73d00;
--sl-color-accent-high: #5a1a00; --sl-color-accent-high: #5a1a00;
--sl-color-white: #181818; --sl-color-white: #181818;
--sl-color-gray-1: #272727; --sl-color-gray-1: #272727;
--sl-color-gray-2: #383838; --sl-color-gray-2: #383838;
--sl-color-gray-3: #585858; --sl-color-gray-3: #585858;
--sl-color-gray-4: #8b8b8b; --sl-color-gray-4: #8b8b8b;
--sl-color-gray-5: #c2c2c2; --sl-color-gray-5: #c2c2c2;
--sl-color-gray-6: #eeeeee; --sl-color-gray-6: #eeeeee;
--sl-color-gray-7: #f6f6f6; --sl-color-gray-7: #f6f6f6;
--sl-color-black: #ffffff; --sl-color-black: #ffffff;
--backdrop-color: #f6f6f699;
--list-marker-color: #fb923c;
} }
ol { header {
list-style: circle; backdrop-filter: blur(12px) !important;
background-color: var(--backdrop-color) !important;
} }
select { select {
background-image: none; background-image: none;
}
select:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
.starlight-aside--tip {
border: none;
border-radius: 0.25rem;
color: #66350c;
background: linear-gradient(45deg, #ff512f, #f09819);
}
.starlight-aside--note {
border: none;
border-radius: 0.25rem;
color: #004558;
background: linear-gradient(45deg, #00b4db, #2193b0);
}
.starlight-aside__icon {
transform: scale(0.8);
}
.starlight-aside--tip .starlight-aside__title {
color: #ffe0c2;
}
.starlight-aside--note .starlight-aside__title {
color: #bbf3fef7;
}
.sl-markdown-content ul:not(:where(.not-content *)) {
list-style-type: none;
padding-left: 0;
}
.sl-markdown-content ul:not(:where(.not-content *)) > li {
position: relative;
padding-left: 1.75rem;
}
.sl-markdown-content li:not(:where(.not-content *)) > ul,
.sl-markdown-content li + li:not(:where(.not-content *)) {
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);
} }