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.
This commit is contained in:
Emil Gulamov
parent
59de89cbd8
commit
36695d3340
13 changed files with 151 additions and 93 deletions
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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,6 +15,7 @@ const self = "/" + (Astro.props.locale || "en") + "/welcome-to-docs/";
|
|||
<style>
|
||||
.site-title {
|
||||
gap: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.site-title a {
|
||||
display: flex;
|
||||
|
|
@ -28,20 +29,16 @@ const self = "/" + (Astro.props.locale || "en") + "/welcome-to-docs/";
|
|||
outline: 0;
|
||||
}
|
||||
.site-title a:focus-visible > :global(*) {
|
||||
outline: auto;
|
||||
outline-offset: 0.33rem;
|
||||
border-radius: 1px;
|
||||
transform: translateY(calc(.1rem * -1));
|
||||
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
|
||||
}
|
||||
|
||||
.site-title :global(svg) {
|
||||
--display-height: 1.75rem;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.site-title a:hover :global(svg) {
|
||||
--hover-offset: 0.15rem;
|
||||
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>
|
||||
|
|
@ -21,16 +21,16 @@ Den Beginn eines neuen Projekts anzugehen kann gleichermaßen aufregend und hera
|
|||
|
||||
<CardGrid>
|
||||
<Card title="Umfang und Ziele">
|
||||
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.
|
||||
</Card>
|
||||
<Card title="Werkzeuge und Ausrüstung">
|
||||
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.
|
||||
</Card>
|
||||
<Card title="Dienstleistungen arrangieren">
|
||||
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.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<Card title="Our custom services provide:" icon="puzzle">
|
||||
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
|
||||
</Card>
|
||||
|
||||
No matter the complexity, our bespoke services ensure that your specialized project is not just completed, but mastered.
|
||||
|
|
@ -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.
|
||||
|
||||
<Card title="Our planning and management services include:" icon="seti:notebook">
|
||||
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
|
||||
</Card>
|
||||
We believe in proactive management to foresee potential challenges and devise solutions before they impact the project.
|
||||
|
|
@ -21,16 +21,16 @@ Embarking on a new project can be exciting and challenging in equal measure. Wit
|
|||
|
||||
<CardGrid>
|
||||
<Card title="Scope and Objectives">
|
||||
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
|
||||
</Card>
|
||||
<Card title="Tools and Equipment">
|
||||
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
|
||||
</Card>
|
||||
<Card title="Arranging Services">
|
||||
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
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,13 +27,13 @@ import {
|
|||
<CardGrid>
|
||||
<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
|
||||
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
|
||||
</Card>
|
||||
<Card title="Troubleshooting Common Tool Issues" icon="rocket">
|
||||
|
||||
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
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,16 +21,16 @@ Comenzar un nuevo proyecto puede ser emocionante y desafiante en igual medida. C
|
|||
|
||||
<CardGrid>
|
||||
<Card title="Alcance y Objetivos">
|
||||
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.
|
||||
</Card>
|
||||
<Card title="Herramientas y Equipamiento">
|
||||
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.
|
||||
</Card>
|
||||
<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.
|
||||
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.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,16 +21,16 @@ import {
|
|||
|
||||
<CardGrid>
|
||||
<Card title="دامنه و اهداف">
|
||||
1. اطمینان از وضوح دامنه پروژه، خروجیها و نتایج مورد نظر
|
||||
2. تعریف اهداف روشن و شاخصهای موفقیت برای اتمام پروژه
|
||||
- اطمینان از وضوح دامنه پروژه، خروجیها و نتایج مورد نظر
|
||||
- تعریف اهداف روشن و شاخصهای موفقیت برای اتمام پروژه
|
||||
</Card>
|
||||
<Card title="ابزارها و تجهیزات">
|
||||
1. تهیه لیستی از تمامی ابزارها و تجهیزات مورد نیاز ScrewFast
|
||||
2. بررسی دسترسی و شرایط موجودی قبل از شروع
|
||||
- تهیه لیستی از تمامی ابزارها و تجهیزات مورد نیاز ScrewFast
|
||||
- بررسی دسترسی و شرایط موجودی قبل از شروع
|
||||
</Card>
|
||||
<Card title="مرتبسازی خدمات">
|
||||
1. در صورت نیاز به تخصص یا نیروی انسانی اضافی، برنامهریزی خدمات ساخت و ساز ScrewFast را به صورت پیشگامانه انجام دهید
|
||||
2. ابهامات توافقنامههای سطح خدمات و زمانبندی را با نماینده ScrewFast خود روشن کنید
|
||||
- در صورت نیاز به تخصص یا نیروی انسانی اضافی، برنامهریزی خدمات ساخت و ساز ScrewFast را به صورت پیشگامانه انجام دهید
|
||||
- ابهامات توافقنامههای سطح خدمات و زمانبندی را با نماینده ScrewFast خود روشن کنید
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,16 +21,16 @@ Se lancer dans un nouveau projet peut être à la fois excitant et stimulant. Av
|
|||
|
||||
<CardGrid>
|
||||
<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
|
||||
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
|
||||
</Card>
|
||||
<Card title="Outils et équipement">
|
||||
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
|
||||
</Card>
|
||||
<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
|
||||
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
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,16 +21,16 @@ import {
|
|||
|
||||
<CardGrid>
|
||||
<Card title="スコープと目標">
|
||||
1. プロジェクトのスコープ、成果物、および希望される成果の明確さを確保する
|
||||
2. プロジェクト完了のための明確な目標と成功基準を定義する
|
||||
- プロジェクトのスコープ、成果物、および希望される成果の明確さを確保する
|
||||
- プロジェクト完了のための明確な目標と成功基準を定義する
|
||||
</Card>
|
||||
<Card title="ツールと機器">
|
||||
1. 必要なすべてのScrewFastツールと機器のリストを作成する
|
||||
2. 開始前に在庫の可用性と状態を確認する
|
||||
- 必要なすべてのScrewFastツールと機器のリストを作成する
|
||||
- 開始前に在庫の可用性と状態を確認する
|
||||
</Card>
|
||||
<Card title="サービスの手配">
|
||||
1. 追加の専門知識や労働力が必要な場合は、事前にScrewFast建設サービスを手配する
|
||||
2. あなたのScrewFast代表者とのサービスレベル契約とタイムラインを明確にする
|
||||
- 追加の専門知識や労働力が必要な場合は、事前にScrewFast建設サービスを手配する
|
||||
- あなたのScrewFast代表者とのサービスレベル契約とタイムラインを明確にする
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,16 +22,16 @@ import {
|
|||
|
||||
<CardGrid>
|
||||
<Card title="范围和目标">
|
||||
1. 确保项目的范围、交付内容和期望结果清晰明确
|
||||
2. 为项目完成明确定义清晰的目标和成功标准
|
||||
- 确保项目的范围、交付内容和期望结果清晰明确
|
||||
- 为项目完成明确定义清晰的目标和成功标准
|
||||
</Card>
|
||||
<Card title="工具和设备">
|
||||
1. 列出所有需要的 ScrewFast 工具和设备
|
||||
2. 在开始之前确认库存的可用性和状态
|
||||
- 列出所有需要的 ScrewFast 工具和设备
|
||||
- 在开始之前确认库存的可用性和状态
|
||||
</Card>
|
||||
<Card title="安排服务">
|
||||
1. 如果需要额外的专业知识或人力，请提前安排 ScrewFast 建筑服务
|
||||
2. 与您的 ScrewFast 代表明确服务级别协议和时间表
|
||||
- 如果需要额外的专业知识或人力，请提前安排 ScrewFast 建筑服务
|
||||
- 与您的 ScrewFast 代表明确服务级别协议和时间表
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue