From 36695d3340109bdc192bbf47c90b64276a7b530b Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Thu, 21 Mar 2024 17:24:38 +0400 Subject: [PATCH] Update UI component and application styles 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. --- astro.config.mjs | 2 +- .../ui/{ => starlight}/SiteTitle.astro | 17 ++- .../de/guides/first-project-checklist.mdx | 12 +- .../docs/en/construction/custom-solutions.mdx | 8 +- .../docs/en/construction/project-planning.mdx | 8 +- .../en/guides/first-project-checklist.mdx | 12 +- src/content/docs/en/tools/equipment-care.mdx | 8 +- .../es/guides/first-project-checklist.mdx | 12 +- .../fa/guides/first-project-checklist.mdx | 12 +- .../fr/guides/first-project-checklist.mdx | 12 +- .../ja/guides/first-project-checklist.mdx | 12 +- .../zh-cn/guides/first-project-checklist.mdx | 12 +- src/styles/starlight.css | 117 +++++++++++++----- 13 files changed, 151 insertions(+), 93 deletions(-) rename src/components/ui/{ => starlight}/SiteTitle.astro (65%) diff --git a/astro.config.mjs b/astro.config.mjs index f26a9ba..9610104 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -55,7 +55,7 @@ export default defineConfig({ customCss: ["./src/styles/starlight.css"], favicon: "/favicon.ico", components: { - SiteTitle: "./src/components/ui/SiteTitle.astro", + SiteTitle: "./src/components/ui/starlight/SiteTitle.astro", }, }), compressor({ diff --git a/src/components/ui/SiteTitle.astro b/src/components/ui/starlight/SiteTitle.astro similarity index 65% rename from src/components/ui/SiteTitle.astro rename to src/components/ui/starlight/SiteTitle.astro index 6994cb6..6d730a6 100644 --- a/src/components/ui/SiteTitle.astro +++ b/src/components/ui/starlight/SiteTitle.astro @@ -1,6 +1,6 @@ --- -import logo from "../../images/starlight/screwfast_logo_dark.svg?raw"; -import docs from "../../images/starlight/docs_logo.svg?raw"; +import logo from "../../../images/starlight/screwfast_logo_dark.svg?raw"; +import docs from "../../../images/starlight/docs_logo.svg?raw"; import type { Props } from "@astrojs/starlight/props"; const main = "/"; @@ -15,11 +15,12 @@ const self = "/" + (Astro.props.locale || "en") + "/welcome-to-docs/"; diff --git a/src/content/docs/de/guides/first-project-checklist.mdx b/src/content/docs/de/guides/first-project-checklist.mdx index bd8361d..2eb8028 100644 --- a/src/content/docs/de/guides/first-project-checklist.mdx +++ b/src/content/docs/de/guides/first-project-checklist.mdx @@ -21,16 +21,16 @@ Den Beginn eines neuen Projekts anzugehen kann gleichermaßen aufregend und hera - 1. 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. + - Stellen Sie sicher, dass der Umfang des Projekts, die Liefergegenstände und die angestrebten Ergebnisse klar definiert sind. + - Legen Sie klare Ziele und Erfolgskriterien für den Abschluss des Projekts fest. - 1. 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. + - Erstellen Sie eine Liste aller benötigten ScrewFast Werkzeuge und Ausrüstungen. + - Überprüfen Sie die Verfügbarkeit und den Zustand des Inventars vor Beginn. - 1. 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. + - Wenn zusätzliche Expertise oder Arbeitskräfte benötigt werden, vereinbaren Sie rechtzeitig ScrewFast Bauarbeiten. + - Klären Sie Service Level Agreements und Zeitpläne mit Ihrem ScrewFast Vertreter. diff --git a/src/content/docs/en/construction/custom-solutions.mdx b/src/content/docs/en/construction/custom-solutions.mdx index b0ec3ae..13d7941 100644 --- a/src/content/docs/en/construction/custom-solutions.mdx +++ b/src/content/docs/en/construction/custom-solutions.mdx @@ -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. - 1. Expert analysis of unconventional project demands - 2. Tailored construction methods for unique structures - 3. Specialized materials and equipment sourcing - 4. Collaboration with specialized subcontractors and consultants + - Expert analysis of unconventional project demands + - Tailored construction methods for unique structures + - Specialized materials and equipment sourcing + - Collaboration with specialized subcontractors and consultants No matter the complexity, our bespoke services ensure that your specialized project is not just completed, but mastered. \ No newline at end of file diff --git a/src/content/docs/en/construction/project-planning.mdx b/src/content/docs/en/construction/project-planning.mdx index f52c02c..bf2d3cc 100644 --- a/src/content/docs/en/construction/project-planning.mdx +++ b/src/content/docs/en/construction/project-planning.mdx @@ -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. - 1. Detailed project timelines - 2. Resource allocation and optimization - 3. Regular progress updates and reports - 4. Risk assessment and management + - Detailed project timelines + - Resource allocation and optimization + - Regular progress updates and reports + - Risk assessment and management We believe in proactive management to foresee potential challenges and devise solutions before they impact the project. \ No newline at end of file diff --git a/src/content/docs/en/guides/first-project-checklist.mdx b/src/content/docs/en/guides/first-project-checklist.mdx index 192bd20..dcc2325 100644 --- a/src/content/docs/en/guides/first-project-checklist.mdx +++ b/src/content/docs/en/guides/first-project-checklist.mdx @@ -21,16 +21,16 @@ Embarking on a new project can be exciting and challenging in equal measure. Wit - 1. Ensure clarity of the project's scope, deliverables, and desired outcomes - 2. Define clear objectives and success criteria for project completion + - Ensure clarity of the project's scope, deliverables, and desired outcomes + - Define clear objectives and success criteria for project completion - 1. Make a list of all required ScrewFast tools and equipment - 2. Verify inventory availability and condition before starting + - Make a list of all required ScrewFast tools and equipment + - Verify inventory availability and condition before starting - 1. 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 + - If additional expertise or manpower is needed, arrange for ScrewFast construction services in advance + - Clarify service level agreements and timelines with your ScrewFast representative diff --git a/src/content/docs/en/tools/equipment-care.mdx b/src/content/docs/en/tools/equipment-care.mdx index 466fdfe..18e0e9d 100644 --- a/src/content/docs/en/tools/equipment-care.mdx +++ b/src/content/docs/en/tools/equipment-care.mdx @@ -27,13 +27,13 @@ import { - 1. 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 + - Strategies for extending the life of your tools and equipment through proper use and handling + - A preventative maintenance schedule that will help avoid common wear and tear - 1. Solutions for frequently encountered issues with ScrewFast equipment - 2. Advice on when to seek professional repair services versus performing DIY fixes + - Solutions for frequently encountered issues with ScrewFast equipment + - Advice on when to seek professional repair services versus performing DIY fixes diff --git a/src/content/docs/es/guides/first-project-checklist.mdx b/src/content/docs/es/guides/first-project-checklist.mdx index 81a11a0..89f0a34 100644 --- a/src/content/docs/es/guides/first-project-checklist.mdx +++ b/src/content/docs/es/guides/first-project-checklist.mdx @@ -21,16 +21,16 @@ Comenzar un nuevo proyecto puede ser emocionante y desafiante en igual medida. C - 1. 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. + - Asegurar claridad sobre el alcance del proyecto, entregables y resultados deseados. + - Definir objetivos claros y criterios de éxito para la finalización del proyecto. - 1. Hacer una lista de todas las herramientas y equipos de ScrewFast necesarios. - 2. Verificar la disponibilidad y condición del inventario antes de comenzar. + - Hacer una lista de todas las herramientas y equipos de ScrewFast necesarios. + - Verificar la disponibilidad y condición del inventario antes de comenzar. - 1. 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. + - Si se necesita experiencia adicional o mano de obra, organiza los servicios de construcción de ScrewFast con anticipación. + - Aclarar los acuerdos de nivel de servicio y los plazos con tu representante de ScrewFast. diff --git a/src/content/docs/fa/guides/first-project-checklist.mdx b/src/content/docs/fa/guides/first-project-checklist.mdx index ecae4de..a185982 100644 --- a/src/content/docs/fa/guides/first-project-checklist.mdx +++ b/src/content/docs/fa/guides/first-project-checklist.mdx @@ -21,16 +21,16 @@ import { - 1. اطمینان از وضوح دامنه پروژه، خروجی‌ها و نتایج مورد نظر - 2. تعریف اهداف روشن و شاخص‌های موفقیت برای اتمام پروژه + - اطمینان از وضوح دامنه پروژه، خروجی‌ها و نتایج مورد نظر + - تعریف اهداف روشن و شاخص‌های موفقیت برای اتمام پروژه - 1. تهیه لیستی از تمامی ابزارها و تجهیزات مورد نیاز ScrewFast - 2. بررسی دسترسی و شرایط موجودی قبل از شروع + - تهیه لیستی از تمامی ابزارها و تجهیزات مورد نیاز ScrewFast + - بررسی دسترسی و شرایط موجودی قبل از شروع - 1. در صورت نیاز به تخصص یا نیروی انسانی اضافی، برنامه‌ریزی خدمات ساخت و ساز ScrewFast را به صورت پیشگامانه انجام دهید - 2. ابهامات توافق‌نامه‌های سطح خدمات و زمانبندی را با نماینده ScrewFast خود روشن کنید + - در صورت نیاز به تخصص یا نیروی انسانی اضافی، برنامه‌ریزی خدمات ساخت و ساز ScrewFast را به صورت پیشگامانه انجام دهید + - ابهامات توافق‌نامه‌های سطح خدمات و زمانبندی را با نماینده ScrewFast خود روشن کنید diff --git a/src/content/docs/fr/guides/first-project-checklist.mdx b/src/content/docs/fr/guides/first-project-checklist.mdx index 92a1912..db9ff03 100644 --- a/src/content/docs/fr/guides/first-project-checklist.mdx +++ b/src/content/docs/fr/guides/first-project-checklist.mdx @@ -21,16 +21,16 @@ Se lancer dans un nouveau projet peut être à la fois excitant et stimulant. Av - 1. 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 + - Assurez-vous de la clarté de la portée du projet, des livrables et des résultats souhaités + - Définissez des objectifs clairs et des critères de réussite pour l'achèvement du projet - 1. 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 + - Faites une liste de tous les outils et équipements ScrewFast nécessaires + - Vérifiez la disponibilité de l'inventaire et son état avant de commencer - 1. 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 + - Si une expertise supplémentaire ou une main-d'œuvre est nécessaire, organisez les services de construction ScrewFast à l'avance + - Clarifiez les accords de niveau de service et les délais avec votre représentant ScrewFast diff --git a/src/content/docs/ja/guides/first-project-checklist.mdx b/src/content/docs/ja/guides/first-project-checklist.mdx index 68e708d..b993eeb 100644 --- a/src/content/docs/ja/guides/first-project-checklist.mdx +++ b/src/content/docs/ja/guides/first-project-checklist.mdx @@ -21,16 +21,16 @@ import { - 1. プロジェクトのスコープ、成果物、および希望される成果の明確さを確保する - 2. プロジェクト完了のための明確な目標と成功基準を定義する + - プロジェクトのスコープ、成果物、および希望される成果の明確さを確保する + - プロジェクト完了のための明確な目標と成功基準を定義する - 1. 必要なすべてのScrewFastツールと機器のリストを作成する - 2. 開始前に在庫の可用性と状態を確認する + - 必要なすべてのScrewFastツールと機器のリストを作成する + - 開始前に在庫の可用性と状態を確認する - 1. 追加の専門知識や労働力が必要な場合は、事前にScrewFast建設サービスを手配する - 2. あなたのScrewFast代表者とのサービスレベル契約とタイムラインを明確にする + - 追加の専門知識や労働力が必要な場合は、事前にScrewFast建設サービスを手配する + - あなたのScrewFast代表者とのサービスレベル契約とタイムラインを明確にする diff --git a/src/content/docs/zh-cn/guides/first-project-checklist.mdx b/src/content/docs/zh-cn/guides/first-project-checklist.mdx index cff1895..3ed589d 100644 --- a/src/content/docs/zh-cn/guides/first-project-checklist.mdx +++ b/src/content/docs/zh-cn/guides/first-project-checklist.mdx @@ -22,16 +22,16 @@ import { - 1. 确保项目的范围、交付内容和期望结果清晰明确 - 2. 为项目完成明确定义清晰的目标和成功标准 + - 确保项目的范围、交付内容和期望结果清晰明确 + - 为项目完成明确定义清晰的目标和成功标准 - 1. 列出所有需要的 ScrewFast 工具和设备 - 2. 在开始之前确认库存的可用性和状态 + - 列出所有需要的 ScrewFast 工具和设备 + - 在开始之前确认库存的可用性和状态 - 1. 如果需要额外的专业知识或人力，请提前安排 ScrewFast 建筑服务 - 2. 与您的 ScrewFast 代表明确服务级别协议和时间表 + - 如果需要额外的专业知识或人力，请提前安排 ScrewFast 建筑服务 + - 与您的 ScrewFast 代表明确服务级别协议和时间表 diff --git a/src/styles/starlight.css b/src/styles/starlight.css index fe42fa1..f4231e0 100644 --- a/src/styles/starlight.css +++ b/src/styles/starlight.css @@ -1,37 +1,98 @@ /* Dark mode colors. */ :root { - --sl-color-accent-low: #3f1505; - --sl-color-accent: #b43c00; - --sl-color-accent-high: #f2b9a6; - --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; + --sl-color-accent-low: #3f1505; + --sl-color-accent: #b43c00; + --sl-color-accent-high: #f2b9a6; + --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; } /* Light mode colors. */ -:root[data-theme='light'] { - --sl-color-accent-low: #f7ccbd; - --sl-color-accent: #b73d00; - --sl-color-accent-high: #5a1a00; - --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; +:root[data-theme="light"] { + --sl-color-accent-low: #f7ccbd; + --sl-color-accent: #b73d00; + --sl-color-accent-high: #5a1a00; + --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; } -ol { - list-style: circle; +header { + backdrop-filter: blur(12px) !important; + background-color: var(--backdrop-color) !important; } select { - background-image: none; -} \ No newline at end of file + 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); +}