From b28e2c15ccc79133f712028e4ca0ef8578150043 Mon Sep 17 00:00:00 2001
From: Erkan Altınörs
Date: Sat, 18 May 2024 13:52:20 +0300
Subject: i18n(tr): add css-and-tailwind (#1893)
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
---
docs/src/content/docs/tr/environmental-impact.md | 2 +-
.../content/docs/tr/guides/css-and-tailwind.mdx | 294 +++++++++++++++++++++
2 files changed, 295 insertions(+), 1 deletion(-)
create mode 100644 docs/src/content/docs/tr/guides/css-and-tailwind.mdx
diff --git a/docs/src/content/docs/tr/environmental-impact.md b/docs/src/content/docs/tr/environmental-impact.md
index 1fd7b794..05bc3804 100644
--- a/docs/src/content/docs/tr/environmental-impact.md
+++ b/docs/src/content/docs/tr/environmental-impact.md
@@ -3,7 +3,7 @@ title: Doğa Dostu Dokümanlar
description: Starlight'ın daha çevreci dokümantasyon sitesi oluşturmanda nasıl yardımcı olacağını ve karbon ayakizini nasıl düşüreceğini öğren.
---
-Web endüstrisinin iklime etkisinin [%2][sf] ila [4% arasında küresel karbon emisyonu][bbc]'na sahip olduğu tahmin ediliyor; kabaca havayolları endüstrisindeki emisyon oranında.
+Web endüstrisinin iklime etkisinin [%2][sf] ila [%4 arasında küresel karbon emisyonu][bbc]'na sahip olduğu tahmin ediliyor; kabaca havayolları endüstrisindeki emisyon oranında.
Bir websitesinin ekolojik etkisini hesaplamada çok fazla karmaşık etken var, ancak bu rehber dokümantasyon sitenizin çevresel ayakizini düşürmek için birkaç ipucu içerir.
İyi haber şu ki, Starlight'ı seçmek mükemmel bir başlangıç.
diff --git a/docs/src/content/docs/tr/guides/css-and-tailwind.mdx b/docs/src/content/docs/tr/guides/css-and-tailwind.mdx
new file mode 100644
index 00000000..83ccfb0c
--- /dev/null
+++ b/docs/src/content/docs/tr/guides/css-and-tailwind.mdx
@@ -0,0 +1,294 @@
+---
+title: CSS ve Stillendirme
+description: Starlight sitenizi özel CSS ile ya da Tailwind CSS ile entegre ederer nasıl stillendireceğinizi öğrenin.
+---
+
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
+Starlight sitenizi özel CSS dosyaları ya da Starlight Tailwind eklentisi kullanarak stillendirebilirsiniz.
+
+## Özel CSS Stilleri
+
+Starlight'ın varsayılan stillerini düzenlemek ya da genişletmek için ek CSS dosyaları sağlayarak özelleştirilmiş stiller uygulanır.
+
+
+
+1. `src/` dizininize bir CSS dosyası ekleyin.
+ Örneğin, daha geniş varsayılan sütun genişliği ve sayfa başlıkları için daha büyük yazı boyutu ayarlayabilirsiniz.
+
+ ```css
+ /* src/styles/custom.css */
+ :root {
+ --sl-content-width: 50rem;
+ --sl-text-5xl: 3.5rem;
+ }
+ ```
+
+2. `astro.config.mjs` içerisinde Starlight'ın `customCss` dizisine CSS dosyanızın yolunu ekleyin:
+
+ ```diff lang="js"
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import starlight from '@astrojs/starlight';
+
+ export default defineConfig({
+ integrations: [
+ starlight({
+ title: 'Özel CSS ile Dokümantasyon',
+ customCss: [
+ + // özel CSS dosyanıza ait dosya yolu
+ + './src/styles/custom.css',
+ ],
+ }),
+ ],
+ });
+ ```
+
+
+
+[Github'daki `props.css` dosyası üzerinde ](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css) özelleştirebileceğiniz, Starlight'ın kullandığı isteğe uyarlanmış tüm CSS özelliklerini görebilirsiniz.
+
+## Tailwind CSS
+
+Astro projelerinde Tailwind CSS desteği [Astro Tailwind entegrasyonu](https://docs.astro.build/en/guides/integrations-guide/tailwind/) ile sağlanır.
+Starlight, Starlight'ın stilleri ile uyumlu olması için Tailwind yapılandırmasına yardımcı olacak bir tamamlayıcı Tailwind eklentisi temin eder.
+
+Starlight Tailwind eklentisi aşağıdaki yapılandırmaları uygular:
+
+- Tailwind'in `dark:`varyantını Starlight'ın koyu modu ile çalışabilmesini yapılandırır.
+- Tailwind'in [tema renkler ve yazı karakterlerini](#tailwind-ile-starlightı-stillendirme) Starlight'ın kullanıcı arayüzünde kullanır.
+- Tailwind'in [Preflight](https://tailwindcss.com/docs/preflight) sıfırlama stillerini Tailwind'in kenarlık yardımcı sınıfları için Prefilght'ın zorunlu istediği önemli kısımları titizlikle geri yüklerken etkisizleştirir.
+
+### Tailwind ile proje oluştur
+
+`create astro` kullanarak Tailwind CSS ön-ayarlı yeni bir Starlight projesi oluştur:
+
+
+
+
+```sh
+npm create astro@latest -- --template starlight/tailwind
+```
+
+
+
+
+```sh
+pnpm create astro --template starlight/tailwind
+```
+
+
+
+
+```sh
+yarn create astro --template starlight/tailwind
+```
+
+
+
+
+### Var olan projeye Tailwind Ekle
+
+Halihazırda bir Starlight siteniz varsa ve Tailwind CSS eklemek istiyorsanız, aşağıdaki adımları takip edin.
+
+
+
+1. Astro'nun Tailwind entegrasyonunu ekleyin:
+
+
+
+
+
+ ```sh
+ npx astro add tailwind
+ ```
+
+
+
+
+
+ ```sh
+ pnpm astro add tailwind
+ ```
+
+
+
+
+
+ ```sh
+ yarn astro add tailwind
+ ```
+
+
+
+
+
+2. Starlight Tailwind eklentisini yükleyin:
+
+
+
+
+
+ ```sh
+ npm install @astrojs/starlight-tailwind
+ ```
+
+
+
+
+
+ ```sh
+ pnpm add @astrojs/starlight-tailwind
+ ```
+
+
+
+
+
+ ```sh
+ yarn add @astrojs/starlight-tailwind
+ ```
+
+
+
+
+
+3. Tailwind'in baz stilleri için CSS dosya oluşturun, örneğin `src/tailwind.css`:
+
+ ```css
+ /* src/tailwind.css */
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ ```
+
+4. Tailwind'inizin baz stillerini kullanmak ve varsayılan baz stilleri etkisizleştirmek için Astro yapılandırma dosyasını güncelleyin:
+
+ ```js {11-12,16-17}
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import starlight from '@astrojs/starlight';
+ import tailwind from '@astrojs/tailwind';
+
+ export default defineConfig({
+ integrations: [
+ starlight({
+ title: 'Tailwind ile Dokümantasyon',
+ customCss: [
+ //Tailwind baz stilleriniz için dosya yolu:
+ './src/tailwind.css',
+ ],
+ }),
+ tailwind({
+ //Varsayılan baz stilleri etkisizleştir:
+ applyBaseStyles: false,
+ }),
+ ],
+ });
+ ```
+
+5. Starlight Tailwind eklentisini `tailwind.config.mjs` dosyasına ekleyin:
+
+ ```js ins={2,7}
+ // tailwind.config.mjs
+ import starlightPlugin from '@astrojs/starlight-tailwind';
+
+ /** @type {import('tailwindcss').Config} */
+ export default {
+ content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+ plugins: [starlightPlugin()],
+ };
+ ```
+
+
+
+### Tailwind ile Starlight'ı Stillendirme
+
+Starlight kendi kullanıcı arayüzünde [Tailwind tema yapılandırmanızdaki](https://tailwindcss.com/docs/theme) değerleri kullanacaktır.
+
+Ayarlanmışsa, aşağıdaki seçenekler Starlight'ın varsayılan stillerini ezecektir:
+
+- `colors.accent` — Mevcut nesne vurgulama ve bağlantılar için kullanılır
+- `colors.gray` — Arkaplan rengi ve kenarlıklar için kullanılır
+- `fontFamily.sans` — Kullanıcı arayüzü ve içerik metni için kullanılır
+- `fontFamily.mono` — Kod örnekleri için kullanılır
+
+```js {12,14,18,20}
+// tailwind.config.mjs
+import starlightPlugin from '@astrojs/starlight-tailwind';
+import colors from 'tailwindcss/colors';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+ theme: {
+ extend: {
+ colors: {
+ // Tercih ettiğiniz vurgu rengi. Indigo, Starlight'ın varsayılana en yakın olanıdır.
+ accent: colors.indigo,
+ // Tercig ettiğiniz gri skalası. Zinc, Starlight'ın varsayılana en yakın olanıdır.
+ gray: colors.zinc,
+ },
+ fontFamily: {
+ //Tercih ettiğiniz yazı karakteri. Starlight, sistem yazı karakterlerini varsayılan olarak kullanır.
+ sans: ['"Atkinson Hyperlegible"'],
+ // Tercih ettiğiniz kod yazı karakteri. Starlight sistem tek araklıklı yazı karakterlerini varsayılan olarak kullanır.
+ mono: ['"IBM Plex Mono"'],
+ },
+ },
+ },
+ plugins: [starlightPlugin()],
+};
+```
+
+## Temalandırma
+
+Starlight'ın renk teması, Starlight'ın varsayılan isteğe uyarlı özelliklerinin üzerine yazılmasıyla kontrol edilebilir.
+Bu değişkenler, metin ve arkaplan renkleri için gri gölgeler ve bağlantılar ve gezinti sırasındaki mevcut nesneler vurgulamak için vurgu rengi kullanıcı arayüzünce kullanılır.
+
+### Renk teması editörü
+
+Starlight'ın vurgu ve gri renk paletlerini değiştirmek için aşağıdaki kaydırıcıları kullanın.
+Koyu ve açık önizleme alanları renkleri gösterecek ve ayrıca tüm sayfa değişiklerinizi önizlemek için güncellenecektir.
+
+Değişikliklerinizden memnun olduğunuzda, aşağıdaki CSS ya da Tailwind kodu kopyalayın ve projenizde kullanın.
+
+import ThemeDesigner from '~/components/theme-designer.astro';
+
+
+
+ Bu temayı sitenize uygulamak için, [isteğe uyarlanmış CSS
+ dosyası içine](#özel-css-stilleri) aşağıdaki CSS'i dahil edin ve projenize ekleyin.
+
+
+ Aşağıdaki [Tailwind yapılandırma dosyasına ait](#tailwind-ile-starlightı-stillendirme) örnek, yapılandırma nesnesi içerisinde oluşturulmuş `accent` ve `gray` renk paletlerini `theme.extend.colors` yapılandırma nesnesinde kullanmak için dahil eder.
+
+
--
cgit