From e2fa0ec7ec9947291f47f5e859e1346f6b2e29f1 Mon Sep 17 00:00:00 2001 From: Gregor G Date: Wed, 4 Mar 2015 13:07:17 +0100 Subject: [PATCH 01/29] added purecss.io to frameworks --- templates/frameworks.html | 1 + templates/images/logo_pure.png | Bin 0 -> 1438 bytes 2 files changed, 1 insertion(+) create mode 100644 templates/images/logo_pure.png diff --git a/templates/frameworks.html b/templates/frameworks.html index 2520d9f..357561e 100644 --- a/templates/frameworks.html +++ b/templates/frameworks.html @@ -46,6 +46,7 @@ kube groundwork semantic ui + Purecss

diff --git a/templates/images/logo_pure.png b/templates/images/logo_pure.png new file mode 100644 index 0000000000000000000000000000000000000000..c2112103531184aadbba5dfba7f0370b53189286 GIT binary patch literal 1438 zcmV;P1!4M$P)FMcT zqSVL6$Jf`_xVX5Jl9F?Aa`Ex;`}_N#$mU5$N35%?GA}S%SXqm^;DdpJz}oNP?)R~< zvDD`C_V)MB&(FWVzkGUo-re5gQWs;R0V9UdQz*8l(i`V(k%00001VoOIv z0Eh)0NB{r;32;bRa{vGf6951U69E94oEQKA00(qQO+^Ra0|X2K6LY~}CIA2g#7RU! zRCwC$n~RpBFbswf7(ryzWdUKu>HELsa_=o^OGiDkZn8Tbh7_frZJPXL0!D^gKnREq z(IGlShv*O;qC<3u4jIwePUmZjEm!UDs8vMAK<9qXiH^}iqGPg8q658MJL9<$9oQy3 zLi)aZ5nQM5(McY4i`^~zyt)0 z9S47m72eHsdE`b1;IoC!_$gU$1<+tP|1lpY!f~3*?<^+enGsFYiKhE&(XHQ7Ah}DN z&Tg>NW$=ER&T#MtX|P}Dtj7zBrPWy}P;Tf4ww-FSKT+MWGCtwU0XpEZXWZFDXQd!z z-I8IGZ?t*#CF2C@5^Z3$(=VZpPrSUD+^LPuFJC&f7af&>T=0Jy@MygqBM6T#B}hYd zCy?7jXXi`j?n7r5hg!K_3)BiFfZ-^jNh)<;pJ_#ZrpDdLeCo&0QOgfN38~@HbL5jo zLB{x8vA9*{%{0?YbS|EBa;~5{(>V$!Rw*QdW~}Ga(`OW!>50lIFD!5Kr( z+Ju1#&gu?9xT!fC{JlNj>GVa}g^v1m*!pzU&ZBhLIyBAps^wu};Und!|(ufV+AyokTO3f+rm}>8S5l$=vWD1m=8l zh|TE(>9}Y!-=JeKXkB)~gAuBD?OwhSoyd{SIzAxzLMYr7_kTkNB_P#StEKNir`bYB zCKQ7?lB|C{M|FQ9=?Lkc{`mJeg8P`OqkDh%$E>3n$7L8!7y)pu|@ z)$C}oQjF8Vl-I&Yhn)`P7u#J<(~Ackc#7PubjBt}e78gRx=g*pbz>(wp^47Gd7;5G(V6byFi5C}Nk{dg0|b@CMhCo* z?{qdpLh!&!@*C5YWtn;r`b+Gx_o-kF5)F-d# zkQ|XQH#+Ns^MH1t-cV|JJ}1;3(2@3eO5I(t*U(|1-a#iibGpQhSB?7iTiKbltxE2E z0#@a!zWSoSUc1iyD>h%bY_8_9y=~NolVgZi-cjAJ^99-<2>Tg&tOYmyZJ%)`j1UkV sqC<3u4$&bxM2F}Q9WtUrbRKGd0c=pQ+zY%zXaE2J07*qoM6N<$g4RdGX#fBK literal 0 HcmV?d00001 From 29c1588e29cddbd6a83a38df2c028fed56718f42 Mon Sep 17 00:00:00 2001 From: "adam j. sontag" Date: Tue, 17 Mar 2015 14:43:34 -0400 Subject: [PATCH 02/29] Update Bocoup ad zone id --- templates/_layouts/default.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/_layouts/default.html b/templates/_layouts/default.html index 30d6cb4..fefa9e2 100644 --- a/templates/_layouts/default.html +++ b/templates/_layouts/default.html @@ -109,7 +109,7 @@

{% localize page.title %}

var m3_r = Math.floor(Math.random()*99999999999); if (!document.MAX_used) document.MAX_used = ','; document.write (" Date: Tue, 17 Mar 2015 15:29:12 -0400 Subject: [PATCH 04/29] add grunt-ftp-deploy to dependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4620fea..a765171 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,8 @@ "name": "learn-css-layout", "version": "1.1.0", "devDependencies": { - "ftp-deploy": "^1.0.0", "grunt": "~0.4.2", + "grunt-ftp-deploy": "^0.1.10", "grunt-jekyll": "~0.4.2" } } From dfde76234c352b5909f12a9544ebee42c3ea78b9 Mon Sep 17 00:00:00 2001 From: Rodrigo Prado Date: Thu, 9 Jul 2015 15:41:43 -0300 Subject: [PATCH 05/29] Translated word 'Errors' --- translations/pt-br.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/pt-br.yaml b/translations/pt-br.yaml index f8dba6b..acdc9f0 100644 --- a/translations/pt-br.yaml +++ b/translations/pt-br.yaml @@ -6,7 +6,7 @@ global.home: "Início" global.toc: "Sumário" global.next: "Próximo" global.previous: "Anterior" -global.feedback: "Errors / Sugestões" +global.feedback: "Erros / Sugestões" util.extra_credit: "bônus" util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit." From 9ad87ffc8058946739c5b1d075329a4dd6d4aee7 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Thu, 20 Aug 2015 11:56:28 -0400 Subject: [PATCH 06/29] fixes #122 --- translations/en.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/en.yaml b/translations/en.yaml index 8508719..04efc9d 100644 --- a/translations/en.yaml +++ b/translations/en.yaml @@ -164,7 +164,7 @@ flexbox.centering.title: "Centering using Flexbox" flexbox.centering.1: "Finally, it's easy to vertically center something in CSS!" frameworks.title: "css frameworks" -frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works." +frameworks.1: "Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only a good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works." frameworks.2: "That's it! If you have any feedback on this site, please let me know on Twitter!" about.title: "about this site" From 1ff1f34484e1495340b4547092d1e2f7e4f2af67 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Mon, 23 Nov 2015 11:18:45 -0500 Subject: [PATCH 07/29] Being kinder to math --- translations/en.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/en.yaml b/translations/en.yaml index 04efc9d..a8f0150 100644 --- a/translations/en.yaml +++ b/translations/en.yaml @@ -56,7 +56,7 @@ box_model.fancy: "And I'm bigger!" box_model.outro: "For generations, the solution to this problem has been math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..." box_sizing.title: "box-sizing" -box_sizing.1: "Over the generations, people realized that math is not fun, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:" +box_sizing.1: "Over the generations, people realized that this unintuitive, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:" box_sizing.simple: "We're the same size now!" box_sizing.fancy: "Hooray!" box_sizing.2: "Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:" From 7832e0f237b80647301977cec643e7cd507d87ef Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Mon, 23 Nov 2015 11:20:50 -0500 Subject: [PATCH 08/29] Being kinder to math --- translations/en.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/translations/en.yaml b/translations/en.yaml index a8f0150..a088fb0 100644 --- a/translations/en.yaml +++ b/translations/en.yaml @@ -53,10 +53,10 @@ box_model.title: "the box model" box_model.intro: "While we're talking about width, we should talk about width's big caveat: the box model. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result." box_model.simple: "I'm smaller..." box_model.fancy: "And I'm bigger!" -box_model.outro: "For generations, the solution to this problem has been math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..." +box_model.outro: "For generations, the solution to this problem has been extra math. CSS authors have always just written a smaller width value than what they wanted, subtracting out the padding and border. Thankfully, you don't have to do that anymore..." box_sizing.title: "box-sizing" -box_sizing.1: "Over the generations, people realized that this unintuitive, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:" +box_sizing.1: "The original box model behavior was eventually considered unintuitive, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with box-sizing: border-box; on both elements:" box_sizing.simple: "We're the same size now!" box_sizing.fancy: "Hooray!" box_sizing.2: "Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:" From 6baeffad20ec32147be0a2e4304bb36a704c7d3e Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Tue, 24 Nov 2015 10:22:40 -0500 Subject: [PATCH 09/29] Update to work with latest jekyll + pygments --- README.textile | 8 +++++++- templates/css/style.css | 6 +++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/README.textile b/README.textile index a7c8777..0e88959 100644 --- a/README.textile +++ b/README.textile @@ -3,10 +3,16 @@ This is the source for "learnlayout.com":http://learnlayout.com in case you're c h2. How to Build * If needed, install "NPM":https://npmjs.org/ + * Last tested version was 0.12.7 * If needed, install "grunt":http://gruntjs.com @npm install -g grunt-cli@ + * Last tested grunt-cli version was 0.1.10 + * Last tested grunt version was 0.4.5 * If needed, do a @npm install@ * If needed, install jekyll @sudo gem install jekyll@ -* If needed, install "pygments":http://pygments.org/download/ (I have used `sudo easy_install pygments` on Mac) + * Last tested version was 3.0.1 +* If needed, install "pygments":http://pygments.org/download/ + * I have used `sudo easy_install pygments` on Mac + * Last tested version was 2.0.2 * Build + run test server with @grunt serve@ * or build only with @grunt@ diff --git a/templates/css/style.css b/templates/css/style.css index 9e93aae..62f380b 100644 --- a/templates/css/style.css +++ b/templates/css/style.css @@ -165,7 +165,7 @@ h1.content { direction: ltr; } -.css, .html { +.language-css, .language-html { display: block; text-shadow: 1px 1px 0 black; background-color: #333333; @@ -183,7 +183,7 @@ h1.content { white-space: pre; } -.html:before { +.language-html:before { content: "html"; float: right; color: black; @@ -191,7 +191,7 @@ h1.content { font-size: 1.5em; } -.css:before { +.language-css:before { content: "css"; float: right; color: black; From 7ae71698120f2385a13baa7db8fa9a5f097f7afc Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Tue, 24 Nov 2015 10:23:47 -0500 Subject: [PATCH 10/29] fix textile sub-bullets --- README.textile | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.textile b/README.textile index 0e88959..55f1eb8 100644 --- a/README.textile +++ b/README.textile @@ -3,16 +3,16 @@ This is the source for "learnlayout.com":http://learnlayout.com in case you're c h2. How to Build * If needed, install "NPM":https://npmjs.org/ - * Last tested version was 0.12.7 +** Last tested version was 0.12.7 * If needed, install "grunt":http://gruntjs.com @npm install -g grunt-cli@ - * Last tested grunt-cli version was 0.1.10 - * Last tested grunt version was 0.4.5 +** Last tested grunt-cli version was 0.1.10 +** Last tested grunt version was 0.4.5 * If needed, do a @npm install@ * If needed, install jekyll @sudo gem install jekyll@ - * Last tested version was 3.0.1 +** Last tested version was 3.0.1 * If needed, install "pygments":http://pygments.org/download/ - * I have used `sudo easy_install pygments` on Mac - * Last tested version was 2.0.2 +** I have used `sudo easy_install pygments` on Mac +** Last tested version was 2.0.2 * Build + run test server with @grunt serve@ * or build only with @grunt@ From 1518f015b4784c154ce3fb991a72d37ddcf9579a Mon Sep 17 00:00:00 2001 From: Ryo Narita Date: Wed, 13 Apr 2016 21:42:08 +0900 Subject: [PATCH 11/29] Fixed typo --- translations/ja.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/translations/ja.yaml b/translations/ja.yaml index ae02875..d009467 100644 --- a/translations/ja.yaml +++ b/translations/ja.yaml @@ -74,7 +74,7 @@ position.fixed.title: "fixed" position.fixed.1: "fiexdな要素は、viewportに対する相対位置で配置される。つまり、ページがスクロールされても、いつでも同じ場所に配置されるという事だ。relativeと同様に、top、right、bottomやleftプロパティが使われる。" position.fixed.2: "このページの右下の角にfixedな要素がある。既に君は気づいて、気づかないふりをしていたに違いない。だが、ここではそれに気づく許可をあげよう。これが適用しているCSSだ:" position.fixed.3: "fixedな要素は、relativeな要素と異なり、元々の表示位置からの調整により生じた隙間にも自動的に他のコンテンツが配置され得る。" -position.fixed.4: "ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートをしかしていない。もっと詳しい状況を知りたければここを参照しよう。" +position.fixed.4: "ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートしかしていない。もっと詳しい状況を知りたければここを参照しよう。" position.fixed.example: "Hello! まだ私のことは気にしないでね。" position.absolute.title: "absolute" position.absolute.1: "absoluteは最も扱いにくい。absoluteはfixedとほぼ同等である。だが、viewportからの相対位置の代わりに、位置指定有効かつ最も近い世代の祖先要素からの相対位置に配置されるという点が異なる。位置指定有効な要素の祖先を持たなければ、absoluteな要素はdocumentのbodyからの相対位置に配置されるし、ページスクロールで動きもする。 \"位置指定有効な\"要素はstatic以外のいずれかの値が指定された場合であったことを思い出してほしい。" @@ -168,4 +168,4 @@ frameworks.1: "CSSレイアウトはとても扱いづらい。だから、い frameworks.2: "以上だ! 何かフィードバックがあれば、Twitterで知らせてくれ!" about.title: "このサイトについて" -about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup." \ No newline at end of file +about.credits: "Written and built by Greg Smith. Design by Isaac Durazo. We work at Bocoup." From 185ee71cd37bab22698171351df7e072838287a4 Mon Sep 17 00:00:00 2001 From: Luis Carlos Martinez Date: Mon, 18 Apr 2016 19:21:59 -0500 Subject: [PATCH 12/29] Fix spanish traslations --- translations/es.yaml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/translations/es.yaml b/translations/es.yaml index 4adc7a3..78b3d86 100644 --- a/translations/es.yaml +++ b/translations/es.yaml @@ -11,14 +11,14 @@ global.feedback: "Problemas / Recomendaciones" util.extra_credit: "crédito extra" util.ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit." util.nav.1: "Inicio" -util.nav.2: "Taco Menu" +util.nav.2: "Taco Menú" util.nav.3: "Lista de Pendientes" util.nav.4: "Horas" util.nav.5: "Direcciones" util.nav.6: "Contacto" index.1: "Este sitio enseña los fundamentos de CSS usados para estructurar cualquier sitio web." -index.2: "Supongo que ya sabes lo que son los selectores, propiedades y valores. Y probablemente sabes algo de cómo estructurar un sitio web, sin embargo puede que aun sea motivo de ira y frustración para ti. Si quieres aprender HTML y CSS desde el principio, deberías checar este tutorial. Si no, veamos si podemos salvarte de algunos enojos en tu próximo proyecto." +index.2: "Supongo que ya sabes lo que son los selectores, propiedades y valores. Y probablemente sabes algo de cómo estructurar un sitio web, sin embargo puede que aun sea motivo de ira y frustración para ti. Si quieres aprender HTML y CSS desde el principio, deberías ver este tutorial. Si no, veamos si podemos salvarte de algunos enojos en tu próximo proyecto." index.translator: "Traducido por Isaac Durazo" index.get_started: "Comenzar" @@ -27,7 +27,7 @@ no_layout.1: "No tener estructura en tu sitio está bien si lo que quieres es te no_layout.2: "Antes de arreglar este problema, cerciorémonos de que entendemos la importancia de la propiedad display." display.title: "la propiedad \"display\"" -display.intro: "display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de que tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea). Un elemento que es block es comunmente llamado elemento block-level. Un elemento inline siempre es llamado elemento inline." +display.intro: "display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de qué tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea). Un elemento que es block es comunmente llamado elemento block-level. Un elemento inline siempre es llamado elemento inline." display.block.title: "block" display.block: "El div es el elemento block-level estándar. Un elemento block-level comienza en una nueva línea y se estira hasta la derecha e izquierda tan lejos como pueda. Otros elementos block-level muy comunes son p y form, y algunos nuevos en HTML5 son header, footer y section." display.inline.title: "inline" @@ -35,7 +35,7 @@ display.inline.1: "El span es el elemento inline estándar. Un elem display.inline.2: "como esto" display.inline.3: "sin interrumpir el flujo del párrafo. El elemento a es el elemento inline más común, ya que se usa para links." display.none.title: "none" -display.none.1: "Otro valor común de display es none. Algunos elementos especializados como script usan este por defecto. Es comunmente usado en JavaScript para ocultar o mostrar elementos sin eliminarlos ni recrearlos." +display.none.1: "Otro valor común de display es none. Algunos elementos especializados como script usan este por defecto. Es comúnmente usado en JavaScript para ocultar o mostrar elementos sin eliminarlos ni recrearlos." display.none.2: "Esto es diferente de visibility. Usar display: none no dejará espacio donde el elemento se encontraba, pero visibility: hidden; dejará un espacio vacío." display.other.title: "otros valores de display" display.other: "Hay bastantes valores exóticos de display, como list-item y table. Aquí hay una lista exhaustiva. Discutiremos inline-block y flex después." @@ -47,7 +47,7 @@ margin_auto.2: "El único problema ocurre cuando el ancho del navegador es menor max_width.title: "max-width" max_width.1: "Usar max-width (ancho máximo) en lugar de width en esta situación, mejorará la situación cuando la ventana del navegador sea pequeña. Esto es importante cuando estamos haciendo un sitio para dispositivos móviles. ¡Has la ventana del navegador mas pequeña para que te des cuenta!" -max_width.2: "Por cierto, max-width es compatible en la mayoría de los navegadores incluyendo IE7+, asi que no tengas miedo de usarlo." +max_width.2: "Por cierto, max-width es compatible en la mayoría de los navegadores incluyendo IE7+, así que no tengas miedo de usarlo." box_model.title: "box model" box_model.intro: "Ya que estamos hablando de la propiedad width, deberíamos hablar del box model (modelo de caja). Cuando ajustas la propiedad width de un elemento, este puede parecer mas grande de lo que es: La propiedad border (borde) del elemento y padding (relleno) estirarán el elemento más allá del ancho especificado. Mira el siguiente ejemplo, donde dos elementos con el mismo valor width terminan teniendo diferentes tamaño al final." @@ -56,7 +56,7 @@ box_model.fancy: "¡Y yo soy más grande!" box_model.outro: "Por generaciones, la solución a este problema han sido las matemáticas. Autores de CSS han tenido que escribir valores más pequeños para width de lo que en realidad querían, restando el padding y border. Afortunadamente ya no tienes que hacer eso..." box_sizing.title: "box-sizing" -box_sizing.1: "Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, asi que una nueva propiedad CSS llamada box-sizing fué creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aqui está el mismo ejemplo de la página anterior, pero usando box-sizing: border-box; en los dos elementos:" +box_sizing.1: "Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, así que una nueva propiedad CSS llamada box-sizing fué creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aquí está el mismo ejemplo de la página anterior, pero usando box-sizing: border-box; en los dos elementos:" box_sizing.simple: "¡Ahora somos del mismo tamaño!" box_sizing.fancy: "¡Hurra!" box_sizing.2: "Ya que esto es mucho mejor, algunos autores quieren que todos los elementos de sus páginas trabajen de la misma manera. Estos autores ponen lo siguiente en sus páginas:" @@ -75,7 +75,7 @@ position.fixed.1: "Un elemento fixed (fijo) se posiciona a la ventana del navega position.fixed.2: "Estoy seguro que ya notaste el elemento fijo en la parte de abajo a la derecha de la página. Te doy permiso de que lo veas ahora. Aqui está el CSS que lo posiciona donde está:" position.fixed.3: "Un elemento con valor fixed no deja espacio en el lugar de la página donde estaba ubicado normalmente." position.fixed.4: "Los buscadores móviles, sorprendentemente no tienen muy buen soporte para el valor fixed. Aprende más al respecto aqui." -position.fixed.example: "Hello! Don't pay attention to me yet." +position.fixed.example: "Hola! No me prestes atención todavía" position.absolute.title: "absolute" position.absolute.1: "absolute (absoluto) es el valor más mañoso. absolute se comporta como fixed pero es relativo a su ancestro posicionado más cercano en lugar de ser relativo a la ventana del navegador. Si un elemento con position: absolute; no tiene ancestros posicionados, usará el elemento body del documento, y se seguirá moviendo al hacer scroll en la página. Recuerda, un elemento \"posicionado\" es aquel cuyo valor es cualquiera excepto static." position.absolute.2: "Aqui hay un ejemplo sencillo:" @@ -91,16 +91,16 @@ position_example.2: "Este ejemplo funciona porque el contenedor es más alto que position_example.footer: "Si usas un header o footer con valor fixed, asegurate de que haya espacio para él. Yo puse un margin-bottom en el body." float.title: "float" -float.1: "Otra propiedad CSS para estructurar es float (flotar). Float se usa para envolver imágenes con texto, como aqui:" +float.1: "Otra propiedad CSS para estructurar es float (flotar). Float se usa para envolver imágenes con texto, como aquí:" clear.title: "clear" clear.floating: "¡Siento que estoy flotando!" clear.1: "La propiedad clear (despejar) es importante para controlar el comportamiento de los floats. Compara estos dos ejemplos:" -clear.2: "En este caso, el elemento section está después del div. Sin embargo, ya que el div está siendo flotado a la izquierda, esto es lo que pasa: el texto en el elemento section flota alrededor del div y el elemento section rodea todo. ¿Qué pasaría si quisiéramos que section apareciera despues del elemento que está flotando?" +clear.2: "En este caso, el elemento section está después del div. Sin embargo, ya que el div está flotado a la izquierda, esto es lo que pasa: el texto en el elemento section flota alrededor del div y el elemento section rodea todo. ¿Qué pasaría si quisiéramos que section apareciera despues del elemento que está flotando?" clear.3: "Usando clear hemos movido esta sección hacia abajo del div que está flotando. Para despejar elementos que están flotando a la izquierda debes usar el valor left. También puedes despejar hacia la derecha usando right y hacia ambos lados usando both." clearfix.title: "clearfix hack" -clearfix.1: "Aqui hay una situación extraña que puede pasar cuando usas float:" +clearfix.1: "Aquí hay una situación extraña que puede pasar cuando usas float:" clearfix.2: "Uh oh... esta imagen es mas alta que el elemento que la contiene, y está flotando, ¡y se sale de su contenedor!" clearfix.3: "Hay una manera de arreglar esto, pero es un poco fea. Se llama clearfix hack." clearfix.4: "Intentemos añadir esto a nuestro CSS:" @@ -111,7 +111,7 @@ clearfix.8: "Hay navegadores exóticos que requieren atención extra. float. Aqui está la misma estructura que usamos con position hace rato, pero usando float." -float_layout.2: "Este exemplo funciona igual que el otro. Fíjate que pusimos un clearfix en el contenedor. No se necesita en este ejemplo, pero se necesitaría si nav fuera mas largo que el contenido no flotado." +float_layout.2: "Este ejemplo funciona igual que el otro. Fíjate que pusimos un clearfix en el contenedor. No se necesita en este ejemplo, pero se necesitaría si nav fuera mas largo que el contenido no flotado." percent.title: "width y porcentaje" percent.1: "Porcentaje es una unidad de medida relativa al bloque contenedor. Es muy útil para imágenes: aqui tenemos una imagen que ocupa el 50% de su contenedor en todo momento. ¡Haz la página mas pequeña para que veas lo que pasa!" @@ -124,7 +124,7 @@ media_queries.title: "media queries" media_queries.1: "\"Responsive Design\" (Diseño Responsivo) es la estrategia para hacer que un sitio \"responda\" al navegador y dispositivo en el que se muestra... haciendo que se vea increible pase lo que pase." media_queries.2: "Los media queries son la herramienta más poderosa para hacer esto. Tomemos la estructura donde usamos porcentajes y transformémosla en una columna cuando la ventana del navegador es muy pequeña para mantener el menú en la barra lateral:" media_queries.3: "¡Ahora, cuando modificas el tamaño de tu navegador tu estructura se ve mejor que nunca!" -media_queries.4: "Ahora, nuestra estructura se ve increible en dispositivos móviles. Aqui están algunos sitios populares que usan media quieries del mismo modo. Hay muchas otras cosas además de min-width y max-width que puedes detectar: mira la documentación de Mozilla para aprender más." +media_queries.4: "Ahora, nuestra estructura se ve increíble en dispositivos móviles. Aquí están algunos sitios populares que usan media quieries del mismo modo. Hay muchas otras cosas además de min-width y max-width que puedes detectar: mira la documentación de Mozilla para aprender más." media_queries.5: "Puedes hacer que tu estructura se vea aun mejor en dispositivos móviles usando meta viewport." inline_block.title: "inline-block" @@ -150,7 +150,7 @@ column.1: "Hay un nuevo set de propiedades CSS que te permiten tener múltiples column.2: "Esta propiedad CSS es muy nuevas, asi que tendrás que usar prefijos, y no funcionará en IE9 o en Opera Mini. Para ver mas propiedades relacionadas con columnas, haz click aqui. Ahora, sigamos con el siguiente tema." flexbox.title: "flexbox" -flexbox.1: "La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y si implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, asi podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar." +flexbox.1: "La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y su implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, asi podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar." flexbox.2: "Hay un montón de recursos viejos para usar flexbox. Si quieres aprender más acerca de flexbox, comienza aqui para saber como identificar si un recurso está actualzado o no. Echa un vistazo al artículo que escribí al respecto con lo último en sintáxis." flexbox.3: "Hay mucho más que puedes hacer con flexbox; estos son solo unos ejemplos para que te des una idea:" flexbox.simple.title: "Estructura Simple usando Flexbox" From d0ee22ddb31c87f7d486e3c25816a56c66f4dbbf Mon Sep 17 00:00:00 2001 From: benniks Date: Wed, 11 May 2016 16:41:03 +0800 Subject: [PATCH 13/29] // fix a chinese translation problem --- translations/zh.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/zh.yaml b/translations/zh.yaml index 013ad77..008cb15 100644 --- a/translations/zh.yaml +++ b/translations/zh.yaml @@ -150,7 +150,7 @@ inline_block_layout.tada: "Tada!" column.title: "column" column.1: "这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：" -column.2: "CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 cloumn 相关的属性，点击这里了解更多。否则让我们讨论下一个主题。" +column.2: "CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性，点击这里了解更多。否则让我们讨论下一个主题。" flexbox.title: "flexbox" flexbox.1: "新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。" From 6f926b86d27ee57e7befea143949cb055e6825f5 Mon Sep 17 00:00:00 2001 From: isdh Date: Tue, 28 Jun 2016 16:18:32 +0900 Subject: [PATCH 14/29] fix typo fix typo --- translations/ja.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/translations/ja.yaml b/translations/ja.yaml index d009467..69c9daa 100644 --- a/translations/ja.yaml +++ b/translations/ja.yaml @@ -61,12 +61,12 @@ box_sizing.simple: "さあ、私たちは同じサイズになった！" box_sizing.fancy: "やったー!" box_sizing.2: "これはかなりいい。だから、自分のページ内の全要素に対して、この設定を適用したいと考える人が現れてもおかしくはない。そんな人は、以下のようなCSSを書くと良い:" box_sizing.3: "これでページ内の全要素に対して、いつでも直感的にサイズ指定できるようになった。" -box_sizing.4: "box-sizingはとても新しいプロパティだ。だから、今のところ、例に示したような-webkit-や-moz-といったプレフィックスを使った方が良い。プレフィックスを使う事で、ブラウザ独自の実験的フィーチャーを利用することができる。また、IE8+の存在についても忘れるてはならない。" +box_sizing.4: "box-sizingはとても新しいプロパティだ。だから、今のところ、例に示したような-webkit-や-moz-といったプレフィックスを使った方が良い。プレフィックスを使う事で、ブラウザ独自の実験的フィーチャーを利用することができる。また、IE8+の存在についても忘れてはならない。" position.title: "position" position.intro: "さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。" position.static.title: "static" -position.static.1: "static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる" +position.static.1: "static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。" position.relative.title: "relative" position.relative.1: "余分なプロパティを設定しなければ、relativeはstaticと同等だ。" position.relative.2: "top、right、bottom、leftプロパティを、relativeな要素に対して設定する。すると、元々の表示される予定だった位置からの相対位置に配置するように調整される。この調整により生じた左の隙間に、他のコンテンツが自動的に配置されることはない。" From d3c8bb8ed40f1672526e186951953a956c3d71d1 Mon Sep 17 00:00:00 2001 From: Andrea D Date: Wed, 14 Sep 2016 19:01:22 +0200 Subject: [PATCH 15/29] Fix italian typo --- translations/it.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/it.yaml b/translations/it.yaml index 0771c18..16363c7 100644 --- a/translations/it.yaml +++ b/translations/it.yaml @@ -97,7 +97,7 @@ float.1: "Un'altra proprietà css utilizzata per impaginare è floatclear è importate per controllare il comportamento dei float." +clear.1: "La proprietà clear è importante per controllare il comportamento dei float." clear.2: "In questo caso, section in realtà si trova dopo il div. Tuttavia, dato che div sta flottando a sinistra, ecco cosa accade: il testo in section si disponde attorno a div e section circonda il tutto. E se volessimo far comparire section dopo l'elemento flottante?" clear.3: "Usando clear abbiamo spostato adesso questa sezione al di sotto del div flottante. Usa il valore left per sgomberare gli elementi flottanti a sinistra. Puoi anche usare right e both" From d9c797e488032a063549eb59c37d95d6fc59c0a5 Mon Sep 17 00:00:00 2001 From: Santhosh Kumar Srinivasan Date: Sat, 1 Oct 2016 20:46:01 -0400 Subject: [PATCH 16/29] Fix typo Fixes Issue #125 --- translations/nl.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/translations/nl.yaml b/translations/nl.yaml index 49c504d..9a64546 100644 --- a/translations/nl.yaml +++ b/translations/nl.yaml @@ -164,8 +164,8 @@ flexbox.centering.title: "Centreren met Flexbox" flexbox.centering.1: "Eindelijk is het makkelijk om iets verticaal te centreren in CSS!" frameworks.title: "css frameworks" -frameworks.1: "Omdat CSS layout zo listig is, zijn er CSS frameworks beschikbaar om het eenvoudiger te maken. Hier zijn er een aantal als je ze wilt proberen. Het gebruik van een framework is alleen een goed idee als het doet wat je site moet gaan doen. Ze zijn niet een vervanger om te weten hoe CSS werkt." +frameworks.1: "Omdat CSS layout zo lastig is, zijn er CSS frameworks beschikbaar om het eenvoudiger te maken. Hier zijn er een aantal als je ze wilt proberen. Het gebruik van een framework is alleen een goed idee als het doet wat je site moet gaan doen. Ze zijn niet een vervanger om te weten hoe CSS werkt." frameworks.2: "Dit was het! Elke vorm van terugkoppeling over deze site kan je me laten weten via Twitter!" about.title: "over deze website" -about.credits: "Gedocumenteerd en ontwikkeld door Greg Smith. Design door Isaac Durazo. Wij werken bij Bocoup." \ No newline at end of file +about.credits: "Gedocumenteerd en ontwikkeld door Greg Smith. Design door Isaac Durazo. Wij werken bij Bocoup." From 91ec42a4ec08d8178fef86545d97d408f41799b6 Mon Sep 17 00:00:00 2001 From: Hamza Suwae Date: Sun, 20 Nov 2016 01:56:42 +0100 Subject: [PATCH 17/29] Local changes Worded a sentence better. Also added some padding to the #share section. --- templates/css/style.css | 8 ++++++-- translations/nl.yaml | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/templates/css/style.css b/templates/css/style.css index 62f380b..504e37a 100644 --- a/templates/css/style.css +++ b/templates/css/style.css @@ -338,8 +338,12 @@ footer { float: left; } +#share > li:not(first-child){ + margin-left: 10px; +} + #share #license { - + } #advertisements { @@ -415,7 +419,7 @@ footer { } -@media screen and (max-width:404px) { +@media screen and (max-width:404px) { a.nav { width: 40%; diff --git a/translations/nl.yaml b/translations/nl.yaml index 9a64546..f0d4572 100644 --- a/translations/nl.yaml +++ b/translations/nl.yaml @@ -27,7 +27,7 @@ no_layout.1: "Helemaal geen layout hebben is nagenoeg voldoende als het doel is no_layout.2: "Voordat we dit probleem gaan oplossen, laten we eerst eens aandachtig naar de belangrijke display property kijken." display.title: "de \"display\" property" -display.intro: "display is CSS's meest belangrijke property om controle op layout te hebben. Elk element heeft een standaard display waarde afhankelijk van welk type element het is. De standaard voor de meeste elementen is block of inline. Een block element is doorgaans aangemerkt als een block-level element. Een inline element daarentegen wordt altijd aangemerkt als inline element." +display.intro: "display is CSS's meest belangrijke property om controle over de layout te krijgen. Elk element heeft een standaard display waarde afhankelijk van welk type element het is. De standaard voor de meeste elementen is block of inline. Een block element is doorgaans aangemerkt als een block-level element. Een inline element daarentegen wordt altijd aangemerkt als inline element." display.block.title: "block" display.block: "div is het standaard block-level element. Een block-level element begint op een nieuwe regel en rekt uit zover het kan van links naar rechts. Andere bekende block-level elementen zijn p en form. Sinds HTML5 zijn daar bijvoorbeeld ook header, footer, section aan toegevoegd en zo zijn er nog meer." display.inline.title: "inline" From ec4ad361dab854ab0c456a0dcdd8ca562344cde2 Mon Sep 17 00:00:00 2001 From: edwardwang0302 Date: Mon, 28 Nov 2016 22:19:13 +0800 Subject: [PATCH 18/29] modified some CHS translation --- translations/zh.yaml | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/translations/zh.yaml b/translations/zh.yaml index c8adce7..fcd6479 100644 --- a/translations/zh.yaml +++ b/translations/zh.yaml @@ -18,12 +18,12 @@ util.nav.5: "Directions" util.nav.6: "Contact" index.1: "本站教授的是现在广泛使用于网站布局领域的CSS基础。" -index.2: "我们假设你已经掌握了CSS的选择器、属性和值。并且你可能已经对布局有一知半解，虽然亲自去写的话还是会很恼火。如果你想要从头开始学习HTML和CSS，那么你可以看下这篇教程。否则，让我们看看我们是否可以让你在下一个项目少动些怒。" +index.2: "我们假设你已经掌握了CSS的选择器、属性和值。并且你可能已经对布局有一定了解，即使亲自去写的话还是会很苦恼。如果你想要从头开始学习HTML和CSS，那么你可以看下这篇教程。不然的话，让我们看看我们是否可以让你在下一个项目少一些烦恼。" index.translator: "由敏明君和sunnylost翻译" index.get_started: "开始" no_layout.title: "没有布局" -no_layout.1: "如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。调整下浏览器窗口大小你就明白我的意思了！" +no_layout.1: "如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。试着调整下浏览器窗口大小你就明白我的意思了！" no_layout.2: "在解决这个问题之前，我们需要了解一个很重要的属性： display " display.title: "\"display\"属性" @@ -36,13 +36,13 @@ display.inline.2: "像这样" display.inline.3: "包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。" display.none.title: "none" display.none.1: "另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。" -display.none.2: "它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。" +display.none.2: "它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。" display.other.title: "其他 display 值" -display.other: "还有很多的更有意思的 display 值，例如 list-item 和 table 。这里有一份详细的列表。之后我们会讨论下 inline-block 和 flex 。" -display.extra: "就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人工制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。" +display.other: "还有很多的更有意思的 display 值，例如 list-item 和 table 。这里有一份详细的列表。之后我们会讨论到 inline-block 和 flex 。" +display.extra: "就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。" margin_auto.title: "margin: auto;" -margin_auto.1: "设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。" +margin_auto.1: "设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。" margin_auto.2: "唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案..." max_width.title: "max-width" @@ -50,18 +50,18 @@ max_width.1: "在这种情况下使用 max-width 替代 width max_width.2: "顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。" box_model.title: "盒模型" -box_model.intro: "在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。" +box_model.intro: "在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。" box_model.simple: "我小一些..." box_model.fancy: "我比它大！" -box_model.outro: "以前有一个代代相传的解决方案是数学。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了..." +box_model.outro: "以前有一个代代相传的解决方案是通过数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了..." box_sizing.title: "box-sizing" -box_sizing.1: "经过了一代又一代人们意识到数学不好玩，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：" +box_sizing.1: "人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：" box_sizing.simple: "我们现在一样大小了！" box_sizing.fancy: "万岁！" box_sizing.2: "既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：" box_sizing.3: "这样可以确保所有的元素都会用这种更直观的方式排版。" -box_sizing.4: "既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。" +box_sizing.4: "不过 box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。" position.title: "position" position.intro: "为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。" @@ -69,15 +69,15 @@ position.static.title: "static" position.static.1: " static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。" position.relative.title: "relative" position.relative.1: " relative 表现的和 static 一样，除非你添加了一些额外的属性。" -position.relative.2: "在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。" +position.relative.2: "在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。" position.fixed.title: "fixed" position.fixed.1: "一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。" position.fixed.2: "我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：" -position.fixed.3: "一个固定定位元素不会保留它原本在页面应有的空隙。" +position.fixed.3: "一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。" position.fixed.4: "令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案." position.fixed.example: "Hello！暂时不要太关注我哦。" position.absolute.title: "absolute" -position.absolute.1: " absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。" +position.absolute.1: " absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。" position.absolute.2: "这里有一个简单的例子：" position.absolute.relative: "这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。" position.absolute.absolute: "这个元素是绝对定位的。它相对于它的父元素定位。" @@ -85,8 +85,8 @@ position.absolute.3: "这部分比较难理解，但它是创造优秀布局所 position_example.title: "position例子" position_example.1: "通过具体的例子可以帮助我们更好地理解“position”。下面是一个真正的页面布局。" -position_example.section.1: " section s的 margin-left 样式确保了有足够的空间容纳 nav 元素。" -position_example.section.2: "注意当你调整浏览器窗口时发生了什么。效果很赞！" +position_example.section.1: " section 的 margin-left 样式确保了有足够的空间容纳 nav 元素。" +position_example.section.2: "注意观察当你调整浏览器窗口时发生了什么。效果很赞！" position_example.2: "这个例子在容器比nav元素高的时候可以正常工作。如果容器比nav元素低，那么nav会溢出到容器的外面。之后我们会讨论下其他布局技术，它们都各有优劣。" position_example.footer: "如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！我在 body 上面加了 margin-bottom 。" @@ -107,7 +107,7 @@ clearfix.4: "让我们加入一些新的CSS样式：" clearfix.5: "现在再看看发生了什么：" clearfix.6: "好多了！" clearfix.7: "这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：" -clearfix.8: "有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。" +clearfix.8: "有些独特的浏览器需要“额外的关照”。清除浮动这潭 水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。" float_layout.title: "浮动布局例子" float_layout.1: "完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。" @@ -121,7 +121,7 @@ percent.layout.1: "你可以用百分比做布局，但是这需要更多的工 percent.layout.2: "当布局很窄时， nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。" media_queries.title: "媒体查询" -media_queries.1: "“响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！" +media_queries.1: "“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！" media_queries.2: "媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：" media_queries.3: "当你调整浏览器窗口大小时，布局比以前更酷了！" media_queries.4: "现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在MDN文档中你还可以学到更多有关媒体查询的知识。" @@ -164,8 +164,8 @@ flexbox.centering.title: "使用 Flexbox 的居中布局" flexbox.centering.1: "CSS里总算是有了一种简单的垂直居中布局的方法了！" frameworks.title: "css框架" -frameworks.1: "因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。如果你想看看那么这里有一些。只有在框架的功能契合你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。" +frameworks.1: "因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。如果你想看看那么这里有一些。只有在框架的功能满足你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。" frameworks.2: "到此为止！如果你对本站有任何反馈，请在Twitter上联系我！" about.title: "关于本站" -about.credits: "由Greg Smith撰写和构建，由Isaac Durazo设计。我们在Bocoup工作。" +about.credits: "由Greg Smith撰写和构建，由Isaac Durazo设计。我们为Bocoup工作。" From 4ae548a86cdb79e23530d5d9b354d3f32e81af84 Mon Sep 17 00:00:00 2001 From: Pablo Castellano Date: Tue, 6 Dec 2016 19:45:16 +0100 Subject: [PATCH 19/29] Fixed some typos in Spanish translation --- translations/es.yaml | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/translations/es.yaml b/translations/es.yaml index 78b3d86..95ca5b3 100644 --- a/translations/es.yaml +++ b/translations/es.yaml @@ -46,17 +46,17 @@ margin_auto.1: "Ajustar la propiedad width de un elemento block-lev margin_auto.2: "El único problema ocurre cuando el ancho del navegador es menor que el de tu elemento. El navegador resuelve esto creando una barra de desplazamiento (scrollbar) horizontal en la página. Arreglemos esa situación..." max_width.title: "max-width" -max_width.1: "Usar max-width (ancho máximo) en lugar de width en esta situación, mejorará la situación cuando la ventana del navegador sea pequeña. Esto es importante cuando estamos haciendo un sitio para dispositivos móviles. ¡Has la ventana del navegador mas pequeña para que te des cuenta!" +max_width.1: "Usar max-width (ancho máximo) en lugar de width en esta situación, mejorará la situación cuando la ventana del navegador sea pequeña. Esto es importante cuando estamos haciendo un sitio para dispositivos móviles. ¡Haz la ventana del navegador mas pequeña para que te des cuenta!" max_width.2: "Por cierto, max-width es compatible en la mayoría de los navegadores incluyendo IE7+, así que no tengas miedo de usarlo." box_model.title: "box model" -box_model.intro: "Ya que estamos hablando de la propiedad width, deberíamos hablar del box model (modelo de caja). Cuando ajustas la propiedad width de un elemento, este puede parecer mas grande de lo que es: La propiedad border (borde) del elemento y padding (relleno) estirarán el elemento más allá del ancho especificado. Mira el siguiente ejemplo, donde dos elementos con el mismo valor width terminan teniendo diferentes tamaño al final." +box_model.intro: "Ya que estamos hablando de la propiedad width, deberíamos hablar del box model (modelo de caja). Cuando ajustas la propiedad width de un elemento, este puede parecer mas grande de lo que es: la propiedad border (borde) del elemento y padding (relleno) estirarán el elemento más allá del ancho especificado. Mira el siguiente ejemplo, donde dos elementos con el mismo valor width terminan teniendo diferente tamaño al final." box_model.simple: "Soy más chico..." box_model.fancy: "¡Y yo soy más grande!" box_model.outro: "Por generaciones, la solución a este problema han sido las matemáticas. Autores de CSS han tenido que escribir valores más pequeños para width de lo que en realidad querían, restando el padding y border. Afortunadamente ya no tienes que hacer eso..." box_sizing.title: "box-sizing" -box_sizing.1: "Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, así que una nueva propiedad CSS llamada box-sizing fué creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aquí está el mismo ejemplo de la página anterior, pero usando box-sizing: border-box; en los dos elementos:" +box_sizing.1: "Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, así que una nueva propiedad CSS llamada box-sizing fue creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aquí está el mismo ejemplo de la página anterior, pero usando box-sizing: border-box; en los dos elementos:" box_sizing.simple: "¡Ahora somos del mismo tamaño!" box_sizing.fancy: "¡Hurra!" box_sizing.2: "Ya que esto es mucho mejor, algunos autores quieren que todos los elementos de sus páginas trabajen de la misma manera. Estos autores ponen lo siguiente en sus páginas:" @@ -72,19 +72,19 @@ position.relative.1: "relative (relativo) se comporta de la misma m position.relative.2: "Establecer las propiedades top, right, bottom, y left de un elemento con position: relative; causará que su posición normal se reajuste. Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento." position.fixed.title: "fixed" position.fixed.1: "Un elemento fixed (fijo) se posiciona a la ventana del navegador de manera relativa, lo que significa que se mantendrá en el mismo lugar incluso después de hacer scroll en la página. Al igual que con relative, las propiedades top, right, bottom, y left también son usadas." -position.fixed.2: "Estoy seguro que ya notaste el elemento fijo en la parte de abajo a la derecha de la página. Te doy permiso de que lo veas ahora. Aqui está el CSS que lo posiciona donde está:" +position.fixed.2: "Estoy seguro que ya notaste el elemento fijo en la parte de abajo a la derecha de la página. Te doy permiso de que lo veas ahora. Aquí está el CSS que lo posiciona donde está:" position.fixed.3: "Un elemento con valor fixed no deja espacio en el lugar de la página donde estaba ubicado normalmente." -position.fixed.4: "Los buscadores móviles, sorprendentemente no tienen muy buen soporte para el valor fixed. Aprende más al respecto aqui." +position.fixed.4: "Los buscadores móviles, sorprendentemente, no tienen muy buen soporte para el valor fixed. Aprende más al respecto aquí." position.fixed.example: "Hola! No me prestes atención todavía" position.absolute.title: "absolute" position.absolute.1: "absolute (absoluto) es el valor más mañoso. absolute se comporta como fixed pero es relativo a su ancestro posicionado más cercano en lugar de ser relativo a la ventana del navegador. Si un elemento con position: absolute; no tiene ancestros posicionados, usará el elemento body del documento, y se seguirá moviendo al hacer scroll en la página. Recuerda, un elemento \"posicionado\" es aquel cuyo valor es cualquiera excepto static." -position.absolute.2: "Aqui hay un ejemplo sencillo:" +position.absolute.2: "Aquí hay un ejemplo sencillo:" position.absolute.relative: "Este elemento está usando position: relative;. Si estuviera usando position: static; su sucesor con position: asbsolute; escaparía y se posicionaría relativamente al body del documento." position.absolute.absolute: "Este elemento tiene position: asbsolute;. Se posiciona de manera relativa a su ancestro." position.absolute.3: "Sé que esto es complicado, pero es esencial para crear estructuras con CSS de manera correcta. En la siguiente página usaremos position en un ejemplo más práctico." position_example.title: "ejemplo de position" -position_example.1: "Todo esto de position talvez tenga un poco más de sentido con un ejemplo práctico. Abajo, esta la estructura real de una página." +position_example.1: "Todo esto de position tal vez tenga un poco más de sentido con un ejemplo práctico. Abajo está la estructura real de una página." position_example.section.1: "El estilo margin-left para section, es para que haya espacio para nav." position_example.section.2: "Mira lo que pasa si haces la ventana de tu navegador mas pequeña. ¡Funciona!" position_example.2: "Este ejemplo funciona porque el contenedor es más alto que el nav. Si no lo fuera, el nav se saldría de su contenedor. En las páginas que vienen a continuación discutiremos otras técnicas para estructurar y hablaremos de sus pros y sus contras." @@ -110,14 +110,14 @@ clearfix.7: "Esto funciona con navegadores modernos. Si quieres soportar IE6 nec clearfix.8: "Hay navegadores exóticos que requieren atención extra. El mundo del clearfixing es bastante espantoso, pero esta simple solución funcionará para la mayoría de los navegadores de hoy en día." float_layout.title: "estructuras con float" -float_layout.1: "Es muy común hacer estructuras completas usando float. Aqui está la misma estructura que usamos con position hace rato, pero usando float." +float_layout.1: "Es muy común hacer estructuras completas usando float. Aquí está la misma estructura que usamos con position hace rato, pero usando float." float_layout.2: "Este ejemplo funciona igual que el otro. Fíjate que pusimos un clearfix en el contenedor. No se necesita en este ejemplo, pero se necesitaría si nav fuera mas largo que el contenido no flotado." percent.title: "width y porcentaje" -percent.1: "Porcentaje es una unidad de medida relativa al bloque contenedor. Es muy útil para imágenes: aqui tenemos una imagen que ocupa el 50% de su contenedor en todo momento. ¡Haz la página mas pequeña para que veas lo que pasa!" +percent.1: "Porcentaje es una unidad de medida relativa al bloque contenedor. Es muy útil para imágenes: aquí tenemos una imagen que ocupa el 50% de su contenedor en todo momento. ¡Haz la página mas pequeña para que veas lo que pasa!" percent.2: "¡Puedes incluso usar min-width y max-width para limitar que tan grande o pequeña puede ser la imagen!" percent.layout.title: "estructuras con porcentaje de ancho" -percent.layout.1: "Puedes usar porcentaje para estructuras, pero esto puede requerir más trabajo. En este ejemplo, el contendido de nav empieza a desenvolverse de una forma desagradable cuando la ventana es muy angosta. Asi que todo se reduce a lo que funcione mejor en tu sitio." +percent.layout.1: "Puedes usar porcentaje para estructuras, pero esto puede requerir más trabajo. En este ejemplo, el contendido de nav empieza a desenvolverse de una forma desagradable cuando la ventana es muy angosta. Así que todo se reduce a lo que funcione mejor en tu sitio." percent.layout.2: "Cuando esta estructura es muy angosta, el nav es apretado. Lo peor es que no puedes usar min-width en el nav para arreglarlo, porque la columna de la derecha no lo respetaría." media_queries.title: "media queries" @@ -133,7 +133,7 @@ inline_block.hard_way.title: "El método difícil (usando float)" inline_block.hard_way.box: "¡Estoy flotando!" inline_block.hard_way.after: "Estoy usando clear para no flotar arriba de las cajas." inline_block.easy_way.title: "El método fácil (usando inline-block)" -inline_block.easy_way.info: "Puedes logar el mismo efecto usando display: inline-block;" +inline_block.easy_way.info: "Puedes lograr el mismo efecto usando display: inline-block;" inline_block.easy_way.box: "¡Soy inline block!" inline_block.easy_way.after: "En este caso no tengo que usar clear. ¡Bien!" inline_block.2: "Para soportar inline-block en IE6 y IE7 tendrás que trabajar extra. Algunas personas hablan de que inline-block desencadena algo llamado hasLayout, sin embargo, necesitarás saber eso solo si soportas viejos navegadores. Da click en el link anterior acerca de IE6 y IE7 si estás interesado en saber más. De lo contrario, continuemos con el siguiente tema." @@ -147,11 +147,11 @@ inline_block_layout.tada: "¡Tarán!" column.title: "columna" column.1: "Hay un nuevo set de propiedades CSS que te permiten tener múltiples columnas de texto. Echa un vistazo:" -column.2: "Esta propiedad CSS es muy nuevas, asi que tendrás que usar prefijos, y no funcionará en IE9 o en Opera Mini. Para ver mas propiedades relacionadas con columnas, haz click aqui. Ahora, sigamos con el siguiente tema." +column.2: "Esta propiedad CSS es muy nuevas, así que tendrás que usar prefijos, y no funcionará en IE9 o en Opera Mini. Para ver mas propiedades relacionadas con columnas, haz click aquí. Ahora, sigamos con el siguiente tema." flexbox.title: "flexbox" -flexbox.1: "La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y su implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, asi podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar." -flexbox.2: "Hay un montón de recursos viejos para usar flexbox. Si quieres aprender más acerca de flexbox, comienza aqui para saber como identificar si un recurso está actualzado o no. Echa un vistazo al artículo que escribí al respecto con lo último en sintáxis." +flexbox.1: "La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y su implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, así podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar." +flexbox.2: "Hay un montón de recursos viejos para usar flexbox. Si quieres aprender más acerca de flexbox, comienza aquí para saber como identificar si un recurso está actualzado o no. Echa un vistazo al artículo que escribí al respecto con lo último en sintáxis." flexbox.3: "Hay mucho más que puedes hacer con flexbox; estos son solo unos ejemplos para que te des una idea:" flexbox.simple.title: "Estructura Simple usando Flexbox" flexbox.simple.1: "¡Flexbox es muy fácil!" @@ -164,7 +164,7 @@ flexbox.centering.title: "Centrando con Flexbox" flexbox.centering.1: "¡Finalmente es fácil centrar verticalmente con CSS!" frameworks.title: "frameworks para css" -frameworks.1: "Debido a que las estructuras con CSS son complicadas, Hay frameworks que te ayudan a hacerlo fácil. Aqui hay unos cuantos por si gustas echarles un vistazo. Usar un framework es solo una buena idea si hace lo que quieres que tu sitio haga. No son un sustituto para saber como funciona el CSS." +frameworks.1: "Debido a que las estructuras con CSS son complicadas, hay frameworks que te ayudan a hacerlo fácil. Aquí hay unos cuantos por si gustas echarles un vistazo. Usar un framework es solo una buena idea si hace lo que quieres que tu sitio haga. No son un sustituto para saber como funciona el CSS." frameworks.2: "¡Y eso es todo! ¡Si tienes comentarios acerca de este sitio, házmelo saber en Twitter!" about.title: "Acerca de este sitio" From 8b87261e7c475c8d2660e4f66d9e7d56e2f4a20f Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Thu, 23 Mar 2017 20:23:49 -0400 Subject: [PATCH 20/29] arabic --- deploy-all.sh | 3 +- templates/index.html | 1 + translations/ar.yaml | 171 +++++++++++++++++++++++++++++++++++++ translations/defaults.yaml | 1 + 4 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 translations/ar.yaml diff --git a/deploy-all.sh b/deploy-all.sh index 82cea95..c27b9fe 100755 --- a/deploy-all.sh +++ b/deploy-all.sh @@ -12,4 +12,5 @@ grunt deploy --lang=pt-br grunt deploy --lang=pt-pt grunt deploy --lang=ru grunt deploy --lang=zh -grunt deploy --lang=zh-tw \ No newline at end of file +grunt deploy --lang=zh-tw +grunt deploy --lang=ar \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 66533d4..d1388ca 100644 --- a/templates/index.html +++ b/templates/index.html @@ -39,6 +39,7 @@ {% localize index.pt-pt %} {% localize index.russian %} {% localize index.persian %} + {% localize index.arabic %} {% localize index.chinese %} {% localize index.tradchinese %} {% localize index.korean %} diff --git a/translations/ar.yaml b/translations/ar.yaml new file mode 100644 index 0000000..de05ac4 --- /dev/null +++ b/translations/ar.yaml @@ -0,0 +1,171 @@ +# العربية + +global.title: "تعلم التصميم باستخدام CSS" +global.short_title: "CSS" +global.home: "الرئيسية" +global.toc: "جدول المحتويات" +global.next: "التالي" +global.previous: "السابق" +global.feedback: "مشاكل / تغذية راجعة" + +util.extra_credit: "ملاحظة إضافية" +util.ipsum: "لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق \"ليتراسيت\" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل \"ألدوس بايج مايكر\" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم." +util.nav.1: "الرئيسية" +util.nav.2: "قائمة التاكو" +util.nav.3: "قائمة الأرشيف" +util.nav.4: "الساعة" +util.nav.5: "الاتجاهات" +util.nav.6: "اتصل بنا" + +index.1: "هذا الموقع يقوم بتعليمك أساسيات الCSS، والتي تستخدم في تصميم الكثير من المواقع الإلكترونية" +index.2: "يُفترض أنك ملم ببعض الأشياء العامة في css، مثل المحددات، والخصائص. أيضًا، يُفضل أن تكون مهتمًا بأمور تصميم المواقع. إذا كنت تود تعلم ال HTML، و CSS من البداية؛ يمكنك زيارة الموقع الإلكتروني التالي: this tutorial. عدا ذلك؛ فلنبدأ!." +index.translator: "" +index.get_started: "البداية" + +no_layout.title: "لا تصميم!" +no_layout.1: "عدم وجود تصميم في الصفحة يشبه إلى حد كبير، وضع جميع المحتويات في عمود واحد. ومع ذلك؛ فإن جعل نافذة المتصفح عريضة جدًا، هو أمر متعب جدًا للقراءة؛ لأن المستخدم يضطر بعد الانتهاء من قراءة السطر، إلى الانتقال من أقصى يسار الصفحة، إلى أقصي يمين الصفحة. جرب تكبير، وتصغير المتصفح؛ لمعرفة المقصود!." +no_layout.2: "قبل إصلاح هذه المشكلة؛ ينبغي أن نتأكد من معرفتنا التعامل مع الخاصية المهمة display." + +display.title: "\"display\" خاصية" +display.intro: "خاصية display، هي أكثر خاصية مهمة في CSS، وخاصة في أمور التحكم في تصميم المواقع. كل عنصر في الموقع، يحتوي على خاصية display افتراضية، وتعتمد قيمة الخاصية على العنصر نفسه. القيمة الافتراضية لمعظم العناصر هي block، أو inline." +display.block.title: "block" +display.block: "div هو العنصر الأساسي في تصميم الموقع، وقيمة ال display الخاصة به تساوي: block. أي عنصر يحمل القيمة الأخيرة يُسمى block-level-element، ومن خصائص هذه العناصر أنها تبدأ في سطر جديد، وتمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة الأخرى على هذه العناصر في HTML5: p، وform، وsection، وfooter، وheader." +display.inline.title: "inline" +display.inline.1: "عنصر ال span هو العنصر الأساسي الذي تكون قيمة display الخاصة به تساوي inline. أي عنصر يحمل القيمة الأخيرة يُسمى inline element. ومن خصائص هذه العناصر أنها تمكن من تضمين النصوص داخل الفقرات." +display.inline.2: "مثل هذا" +display.inline.3: "من دون قطع سياق الفقرة. عنصر a هو أكثر العناصر التي تُستخدم لهذا الغرض، والتي نستخدمها بكثرة في الوصلات. " +display.none.title: "none" +display.none.1: "أحد القيم المهمة الأخرى هي none. بعض العناصر تستخدم هذه القيمة، وأشهر الأمثلة على ذلك عنصر script؛ والذي يستخدم لتضمين كود جافا سكريبت. يمكن استخدام هذه القيمة في جافا سكريبت لإخفاء، أو إظهار عناصر معينة." +display.none.2: "يختلف ذلك عن خاصية visibility؛ حيث أننا عندما نُعيّن قيمة none لخاصية display؛ فإننا نقوم بتحميل محتوى الصفحة كما لو أن العنصر غير موجود. أما visibility: hidden;؛ فتقوم بإخفاء العنصر فقط، ويظل أثر العنصر موجودًا في الصفحة." +display.other.title: "قيم أخرى" +display.other: "هناك قيم أخرى لخاصية display. مثل قيمة list-item، و قيمة table، وقيمة table. هذه قائمة بكل قيم خاصية display. سنقوم بشرح القيمتين: inline-block، وflex لاحقًا." +display.extra: "كما ذكرنا أعلاه؛ كل عنصر له قيمة code>display افتراضية. وعلى كل حال، يمكن دائمًا تغيير القيمة القديمة، بقيمة أخرى." + +margin_auto.title: "margin: auto;" +margin_auto.1: "ضبط العرض الخاص بعنصر block-level element، وذلك باستخدام خاصية width؛ سيمنع العنصر من أن يمتد من أقصى اليمين، إلى أقصى اليسار. أيضًا، يمكن ضبط الهوامش؛ لجعل العنصر متوسط الصفحة، باستخدام خاصية margin، وذلك بجعل القيمة تساوي auto. " +margin_auto.2: "المشكلة الوحيدة التي ستحدث، هي إذا حاولت عرض الصفحة على متصفح العرض الخاص به أضيق من عرض العنصر ذاته. سيقوم المتصفح بحل ذلك من خلال إضافة شريط scrollbar أفقي. لنقم بتطوير الأمر قليلًا." + +max_width.title: "max-width" +max_width.1: "استخدام خاصية max-width بدلًا من خاصية width في هذا الموقف؛ سيجعل المتصفح يتحكم بفعالية أكثر مع الشاشات الصغيرة. يعتبر هذا الموضوع مهمًا، إذا كنت تود جعل الموقع مستخدمًا بسهولة على الجوال. قم بتكبير، وتصغير المتصفح لرؤية الفرق. " +max_width.2: "بالمناسبة، خاصية max-width مدعومة في جميع المتصفحات، ومن ضمنها إنترنت إكسبلورر +7؛ لذا لا داعي للقلق من هذا الأمر." + +box_model.title: "box model" +box_model.intro: "بينما تحدثنا عن خاصية width، كان يتوجب التنويه إلى أهم مشكلة لهذه الخاصية، وهي the box model. عندما تقوم بضبط العرض الخاص بعنصر ما، سيظهر العنصر أكبر من الحجم الذي قمت بضبطه. وتفسير الأمر، هو أن وجود حواشي العنصر (padding)، وحدود العنصر (border) ستقوم بتمديد عرض العنصر إلى ما بعد الحد الذي قمت بضبطه. انظر إلى المثال التالي؛ حيث يوجد عنصران، وبنفس قيمة العرض، ولكن مع اختلاف حقيقي بين عرض العنصرين." +box_model.simple: "أنا العنصر الصغير!" +box_model.fancy: "وأنا الكبير!" +box_model.outro: "حل هذه المشكلة هو حل رياضي. حيث يقوم مطورو صفحات الويب باستخدام CSS، بتحديد قيمة أصغر من التي يريدونها فعليًا، والتي تساوي القيمة الأولية، مطروحًا منها قيمة الحواشي، والحدود. من حسن الحظ، لن نحتاج لهذا بعد الآن!." + +box_sizing.title: "box-sizing خاصية" +box_sizing.1: "يمكن اعتبار العناصر الموجودة ضمن كود html عبارة عن صناديق. ونستخدم مصطلح box-model للتعبير عن تصميم كل عنصر في الصفحة. لهذا السبب وُجدت خاصية box-sizing. يتكون box-model من أربع أشياء: هامش خارجي، وإطار، وهامش داخلي، ومحتوى العنصر نفسه. المثال التالي يوضح كيفية استخدام خاصية box-sizing: border-box;" +box_sizing.simple: "نحن بنفس الحجم الآن." +box_sizing.fancy: "رائع!" +box_sizing.2: "الأمر الآن أفضل، أليس كذلك؟. غالبًا ما يريد مطورو الويب جعل جميع العناصر تبدو بهذه الطريقة. ولتحقيق ذلك، يقوم المطورون بكتابة الكود التالي:" +box_sizing.3: "هذا الكود يضمن أن جميع العناصر الموجودة في الصفحة، مُحجّمة بشكل ذكي." +box_sizing.4: "ولأن box-sizing هي خاصية جديدة نسبيًا؛ فينبغي عليك استخدام -webkit- و -moz-> كما هو واضح في هذه الأمثلة. هذه الميزة، توفر خواص لا تزال تحت التجربة، أيضًا، ينبغي أن تأخذ بالحسبان أن هذه الخاصية تعمل على IE8+." + +position.title: "position" +position.intro: " لغرض إنشاء تصميم صفحات معقدة؛, ينبغي أن نناقش خاصيةposition. هذه الخاصية لها العديد من القيم، وهذه القيم من الصعب تذكرها. لنقم بالمرور عليها واحدة، تلو الأخرى. ويفضل أن تضع هذه الصفحة بالتحديد في مفضلتك؛ لتتمكن من الرجوع إليها بسهولة مستقبلًا." +position.static.title: "static" +position.static.1: "static هي القيمة الافتراضية. العنصر الثابت يمكن اعتباره بدون موضع +والعنصر الذي يملك أي قيمة أخرى يمكن اعتباره عنصرًا محددًا بموضع." +position.relative.title: "relative" +position.relative.1: "relative تملك نفس صفات static تقريبًا. إلا إذا قمتَ بإضافة بعض الخصائص الأخرى." +position.relative.2: "يمكن إضافة بعض الصفات الأخرى لهذه القيمة، مثل top، right، bottom، و left. هذه الصفات ستجعل العنصر مُعدّلًا عن الوضع الأصلي. أي محتوى آخر لا يمكن تعديله ليملئ أي فراغ يتركه العنصر الأخير." +position.fixed.title: "fixed" +position.fixed.1: "نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن حقيق ذلك باستخدام الخصائص التالية: relative، وtop، وright، وbottom، وleft." +position.fixed.2: " متأكد من أنك قد لاحظت أن العنصر الثابت في الزاوية اليمنى السفلى اليسرى من الصفحة. حسنًا، لم لا تلق نظرة عليه الآن؟. كود الcss التالي هو الذي جعل العنصر السابق في هذا المكان." +position.fixed.3: "العنصر الثابت لا يترك فراغًا في المكان الذي يتواجد به في الصفحة." +position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم هش لموضوع العناصر الثابتة. ألق نظرة على المشكلة هنا." +position.fixed.example: "مرحبًا!. لا تلتفت إليّ الآن." +position.absolute.title: "absolute" +position.absolute.1: "قيمة absolute هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة fixed باستثناء أمر واحد وهو .أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عمصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body). تذكر أن، العنصر الذي لديه خاصية \"positioned\" فإنه يمكن تحديد موضعه ، باستثناء كونه ثابتًا static." +position.absolute.2: "هذا مثال بسيط" +position.absolute.relative: "هذا العنصر تم تحديده بواسطة أقرب عنصر له. لو كان هذا العنصر يملك خاصية position: static; فإنه سيتم تحديد موضعه حتما بالنسبة إلى جسم الصفحة." +position.absolute.absolute: "هذا العنصر يملك خاصية absolute. هذا يعني أنه تم تحديد موقعه نسبة إلى أقرب عنصر له." +position.absolute.3: "هذه الأمور صعبة بعض الشيء، ولكنها ضرورية جدًا لتصميم صفحات الويب. في الصفحات القادمة سنستخدم خاصية position في أمثلة واقعية أكثر." + +position_example.title: "مثال على خاصية position" +position_example.1: "هذا المثال واقعي جدًا. ويبدو قريبًا لتصميم صفحة ويب واقعية." +position_example.section.1: "استخدام خاصية margin-left لكل قسم section يضمن أن هناك هامشًا مناسبًا لكل عنصر. عدا ذلك؛ سنجد العناصر متداخلة مع بعضها البعض." +position_example.section.2: "لاحظ الفرق عندما تقوم بتضغير |أو تكبير متصفحك. إنه يعمل بشكل راشع الآن!" +position_example.2: "هذا المثال يعمل بشكل جيد لسبب منطقي، وهو أن المحتوى (container) أطول من الشريط العمودي في يسار الشاشة (nav). لو لم يكن كذلك؛ فهذا يعني أن الشريط سيتجاوز حدوده ليدخل في مساحة المحتوى. في الصفحات القادمة سنتعلم بعض تقنيات التصميم، والتي لكل منها إيجابيات، وسلبيات." +position_example.footer: "إذا كنت تستخدم رأس، أو ذيل صفحة ثابت، تأكد أن هناك مساحة كافية له!. تم وضع خاصية margin-bottom في جسم الصفحة body." + +float.title: "float" +float.1: "هذه خاصية أخرى شائعة الاستخدام، وتستخدم بشكل واسع في تصميم صفحات الويب. خاصية Float تهدف أساسًا لجعل النص ملتفًا حول الصور هكذا:" + +clear.title: "clear" +clear.floating: "أشعر أنني أطير!" +clear.1: "خاصية clear مهمة جدًا للتحكم في طبيعة خاصية float. لاحظ الفرق بين المثالين التاليين" +clear.2: "في هذه الحالة، عنصر section هو في الحقيقة بعد العنصر div. ومع ذلك، فإن العنصر div موجود في يسار الشاشة. إليك تفسير ما حصل: النص الموجود في عنصر section ملتف حول العنصر div، وأما العنصر section فإنه ملتف على كامل الصفحة. ماذا لو أردنا أن يظهر العنصر section بعد العنصر الآخر؟" +clear.3: "باستخدام هذه الخاصية clear قمنا بتحريك القسم أسفل العنصر div. استخدم القيمة left لجعل العناصر في اليسار. كما يمكنك استخدام القيم: right، وboth." + +clearfix.title: "خدعة clearfix" +clearfix.1: "هذا أمر سيء يمكن أن يحصل عند استخدام خاصية float:" +clearfix.2: "أوه لا ... هذه الصورة أطول من العنصر الذي يحتوي عليها. ومع أنها تحتوي على خاصية float؛ إلا أنها تجاوزت حدود العنصر الذي يحتوي عليها!." +clearfix.3: "حسنًا. هناك طريقة بالطبع لحل ذلك. لكنه حل بشع!. يُسمى هذا الحل ب clearfix خدعة." +clearfix.4: "لنجرب إضافة هذا الكود:" +clearfix.5: "لنر الآن ماذا سيحدث:" +clearfix.6: "أفضل بكثير!" +clearfix.7: "هذا الحل يعمل فقط في المتصفحات الحديثة. إذا كنت تريد أن تدعم المتصفحات القديمة مثل إنترنت إكسبلورر 6 لهذا الحل؛ قم بالآتي:" +clearfix.8: "هناك متصفحات قليلة لا تدعم الطريقة بشكل جيد، وتتطلب منك الانتباه. عالم هذه الخدعة مخيف حقًا، لكن هذا الحل البسيط فعّال مع غالبية المتصفحات الشهيرة." + +float_layout.title: "مثال تصميم باستخدام float" +float_layout.1: "من الشائع جدًا تصميم مواقع ويب كاملة باستخدام خاصية float. هذا نفس التصميم الذي قمنا به باستخدام خاصية position، ولكن باستخدام خاصية float بدلًا منها." +float_layout.2: "هذا المثال يعمل تمامًا كالمثال السابق. لاحظ أننا قمنا بكتابة clearfix في المحتوى (container). قد لا نحتاج لذلك في هذا المثال، لكنه سيكون مجديًا في حال كان الشريط nav أطول من المحتوى الآخر." + +percent.title: "العرض المئوي" +percent.1: "النسبة المئوية هي وحدة قياس تستخدم في تحديد أبعاد العنصر. يكون استخدام النسب المئوية رائعًا عند إدراج الصور. هنا مثال على صورة تأخذ 50% من حجم العنصر الذ يحتوي عليها. ما يعني أنه مهما تغير حجم العنصر، فإن الصورة ستأخذ نصف العرض." +percent.2: "بإمكانك أيضًا استخدام min-width و max-width لتحديد أقل عرض، أو أكبر عرض يمكن للصورة أن تأخذه!." +percent.layout.title: "تصميم الصفحات باستخدام العرض المئوي" +percent.layout.1: "يمكنك استخدام النسب المئوية في تصميم صفحات الويب، لكن ذلك سيتطلب منك وقتًا أكثر. في المثال التالي، يكون محتوى العنصر nav ملتفًا بطريقة جيدة عندما تكون نافذة المتصفح ضيقة." +percent.layout.2: "عندما يكون التصميم ضيقًا جدًا، يصبح العنصر nav غير ظاهر تقريبًا. والأمر الأسوأ، هو أنك لا تستطيع استخدام خاصية min-width في العنصر nav؛ لأن العمود الأيمن لن يقبل هذه الخاصية." + +media_queries.title: "استخدام استعلامات media" +media_queries.1: "\"التصميم المرن، أو المطاط\" هو استراتيجية لجعل الموقع \"يستجيب\" للمتصفح، والجهاز الذي يتم عرض الموقع منه. وذلك من خلال جعل الموقع يظهر بشكل رائع، مهما كان المتصفح، أو الجهاز الذي تقوم بالاستعراض منه." +media_queries.2: "استعلامات media هي أقوى أداة لتحقيق هذا الأمر. لنأخذ المثال الذي قمنا بتصميم صفحة باستخدام العرض المئوي، ولنضعها في عمود واحد، ثم نشاهد كيف ستبدو عندما يكون المتصفح صغيرًا جدًا." +media_queries.3: "الآن عندما تقوم بتكبير أو تصغير المتصفح، سيصبح شكل الصفحة رائعًا أكثر!." +media_queries.4: "أوه! الأن تبدو الصفحة رائعة عند التصفح من الجوال. هنا ستجد بعض المواقع الشهيرة التي تستخدم استعلامات media بهذه الطريقة. هناك الكثير الكثير يمكنك اكتشافه. الق نظرة على شرح شبكة موزيلا للمطورين لمعرفة المزيد." +media_queries.5: "يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والآيباد، وذلك باستخدام وسمmeta viewport." + +inline_block.title: "inline-block" +inline_block.1: "يمكنك إنشاء شبكة من المربعات التي تملأ عرض المتصفح وتلتف حول بعضها بشكل جيد. كان ذلك ممكن في السابق باستخدام خاصية float، لكن الآن سنستخدم خاصية inline-block، وستكتسف أنها أسهل بكثير. العناصر التي تملك خاصية inline-block هي بالضبط كالعناصر التي تحمل خاصية inline، مع فرق أن العناصر الأولى يمكن أن تأخذ طولًا، وعرضًا محددين. لنلق نظرة على مثالين يشرحان كل طريقة على حدة." +inline_block.hard_way.title: "الطريقة الصعبة (استخدام float)" +inline_block.hard_way.box: "أنا أطير الآن!" +inline_block.hard_way.after: "أنا أستخدم خاصية clear." +inline_block.easy_way.title: "الطريقة السهلة (استخدامinline-block)" +inline_block.easy_way.info: "بإمكانك تحقيق نفس الهدف باستخدام القيمة inline-block مع الخاصية display." +inline_block.easy_way.box: "أنا عنصر مُضمن!" +inline_block.easy_way.after: "لا أحتاج لاستخدام clear في هذه الحالة. جميل!" +inline_block.2: "ينبغي عليك الاطلاع على بعض الأمور الإضافية في أمور دعم إنترنت إكسبلورر 6، و7 لخاصية inline-block. انظر الروابط السابقة لمعرفة كيفية دعم المتصفحات القديمة مثل IE6 و IE7. عدا ذلك؛ دعنا نكمل!." + +inline_block_layout.title: "inline-block التصميم باستخدام" +inline_block_layout.1: "بإمكانك أيضًا استخدام خاصية inline-block لتصميم الصفحات. هناك بضعة أمور ينبغي أن تأخذها بعين الاعتبار:" +inline_block_layout.caveat.1: "العناصر التي لها خاصية inline-block تتأثر بالخاصية vertical-align، وينبغي عليك تحديدها غالبًا ب top." +inline_block_layout.caveat.2: "يجب عليك تحديد عرض كل عمود في ال" +inline_block_layout.caveat.3: "سيكون هناك فراغ بين الأعمدة، إذا كانت توجد مسافات فاصلة في كود الhtml" +inline_block_layout.tada: "رائع!" +column.title: "العمود" +column.1: "هناك العديد من الخصائص التي يمكنك استخدامها، والتي تجعل النص مُنسقًا في شكل أعمدة. ألق نظرة:" +column.2: "استخدام الأعمدة في css حديث نسبيًا، فربما لا يعمل مع إنترنت إكسبلورر9، وأوبرا ميني. هناك بعض الخصائص المتعلقة باستخدام الأعمدة، انظر هنا لمعرفة المزيد. عدا ذلك؛ دعنا نكمل." + +flexbox.title: "flexbox تصميم" +flexbox.1: "يمكننا تصميم صفحات الويب باستخدام وحدة تُسمى flexbox، وهي وحدة عصرية ساهمت في إعادة صياغة تصميم صفحات الويب. مع مع الأسف، تغيرت بعض الأمور مع كثرة المتصفحات، والخصائص التي توفرها. ولكن مع ذلك، سنقوم بمشاركة بعض الأمثلة لتوضيح المفهوم. هذه الأمثلة تعمل حاليًا فقط على بعض المتصفحات التي تستخدم آخر إصدار من flexbox.." +flexbox.2: "هناك الكثير من إصدارات flexbox غير المدعومة. إذا كنت تود تعلم المزيد حول هذه الوحدة,،ابدأ من هنا لمعرفة إذا ما كان الأمر مدعومًا أم لا. قمنا بكتابة مقالة مفصلة لشرح كيفية التعامل مع هذه الوحدة.." +flexbox.3: "هناك امور كثيرة يمكنك فعلها مع وحدة flexbox. هذه بعض الأمثلة لتوضيح الفكرة:" +flexbox.simple.title: "تصميم بسيط باستخدام flexbox" +flexbox.simple.1: "استخدام flexbox سهل جدًا" +flexbox.fancy.title: "تصميم رائع باستخدام flexbox" +flexbox.fancy.1: "سيكون حجم هذا العنصر 200 بيكس إذا كان هناك فراغ مناسب، وسيتقلص إلى 100 بيكسل في حال عدم وجود فراغ. ولن يكون أصغر من 100 بيكسل." +flexbox.fancy.2: "سيكون هذا العنصر دائمًا بحجم 200 بيكسل، مهما حدث." +flexbox.fancy.3: "سيملأ هذا العنصر ثلث المساحة المتبقية" +flexbox.fancy.4: "سيملأ هذا العنصر ثُلثا المساحة المتبقية" +flexbox.centering.title: "التوسيط باستخدام flexbox" +flexbox.centering.1: "أخيرًا، من السهل جدًا توسيط عنصر ما باستخدام css." + +frameworks.title: "css أُطر عمل" +frameworks.1: "لأن تصميم الصفحات باستخدام css مُجهد نوعًا ما؛ يوجد هناك أُطر عمل تجعل من أمر التصميم سهلًا. نعني بأُطر العمل أي الأكواد التي قام مطورون بكتابتها سابقًا، وبدلًا من إعادة كتابة الأكواد من جديد؛ فإننا نستخدم أُطر العمل في توفير الوقت والجهد. هنا ستجد بعضًا من أُطر العمل الشهيرة. يُرجى اختيار إطار العمل المناسب، والذي يمكنه تسهيل مهمتك في تصميم الصفحات، والذي يؤدي الغرض الخاص. بالطبع لا غنى عن معرفتك بأساسيات css حتى تتمكن من استخام هذه الأُطر." +frameworks.2: "هذا كان كل شيء! إذا كانت لديك أي استفسارات، أو مشاكل بخصوص هذا الموقع، تفضل بإعلامنا بذلك.!" + +about.title: "عن هذا الموقع" +about.credits: "تم كتابته، وبناءه بواسطة: غريغ سميث. تصميم: إسحاق دورازو. نحن نعمل في شركة Bocoup." \ No newline at end of file diff --git a/translations/defaults.yaml b/translations/defaults.yaml index 83ee4ca..eea10eb 100644 --- a/translations/defaults.yaml +++ b/translations/defaults.yaml @@ -9,6 +9,7 @@ index.german: "deutsch" index.dutch: "dutch" index.pt-br: "português (brasil)" index.pt-pt: "português (português)" +index.arabic: "عربى" index.italian: "italiano" index.japanese: "日本語" index.russian: "русский" \ No newline at end of file From 3bc90ef2e07286d2ec1e96167014c0d24288636c Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Mon, 27 Mar 2017 21:22:56 -0400 Subject: [PATCH 21/29] work on ar --- _plugins/localize.rb | 4 +++- translations/ar.yaml | 50 +++++++++++++++++++++++--------------------- translations/fa.yaml | 2 ++ 3 files changed, 31 insertions(+), 25 deletions(-) diff --git a/_plugins/localize.rb b/_plugins/localize.rb index 408c5d8..f738599 100644 --- a/_plugins/localize.rb +++ b/_plugins/localize.rb @@ -37,7 +37,9 @@ def render(context) class RtlTag < Liquid::Tag def render(context) - rtl = context.registers[:site].config['rtl'] + @lang = context.registers[:site].config['lang'] + @translations = YAML::load(File.open("translations/#{@lang}.yaml")) + rtl = @translations['rtl'] if rtl == true "rtl" else diff --git a/translations/ar.yaml b/translations/ar.yaml index de05ac4..a0810e1 100644 --- a/translations/ar.yaml +++ b/translations/ar.yaml @@ -1,5 +1,7 @@ # العربية +rtl: true + global.title: "تعلم التصميم باستخدام CSS" global.short_title: "CSS" global.home: "الرئيسية" @@ -11,14 +13,14 @@ global.feedback: "مشاكل / تغذية راجعة" util.extra_credit: "ملاحظة إضافية" util.ipsum: "لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق \"ليتراسيت\" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل \"ألدوس بايج مايكر\" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم." util.nav.1: "الرئيسية" -util.nav.2: "قائمة التاكو" +util.nav.2: "قائمة الوجبات" util.nav.3: "قائمة الأرشيف" util.nav.4: "الساعة" util.nav.5: "الاتجاهات" util.nav.6: "اتصل بنا" -index.1: "هذا الموقع يقوم بتعليمك أساسيات الCSS، والتي تستخدم في تصميم الكثير من المواقع الإلكترونية" -index.2: "يُفترض أنك ملم ببعض الأشياء العامة في css، مثل المحددات، والخصائص. أيضًا، يُفضل أن تكون مهتمًا بأمور تصميم المواقع. إذا كنت تود تعلم ال HTML، و CSS من البداية؛ يمكنك زيارة الموقع الإلكتروني التالي: this tutorial. عدا ذلك؛ فلنبدأ!." +index.1: "هذا الموقع يقوم بتعليمك أساسيات لغة CSS، أو ما تعرف بلغة التنسيق، والتي تستخدم في تصميم الكثير من المواقع الإلكترونية" +index.2: "يُفترض أنك ملم ببعض الأشياء العامة في css، مثل المحددات، والخصائص. أيضًا، يُفضل أن تكون مهتمًا بأمور تصميم المواقع. إذا كنت تود تعلم ال HTML، و CSS من البداية؛ يمكنك زيارة : الموقع الإلكتروني التالي. أما لو كانت لديك خبرة فيهما؛ فيُمكنك البدء في هذه الدروس!." index.translator: "" index.get_started: "البداية" @@ -26,10 +28,10 @@ no_layout.title: "لا تصميم!" no_layout.1: "عدم وجود تصميم في الصفحة يشبه إلى حد كبير، وضع جميع المحتويات في عمود واحد. ومع ذلك؛ فإن جعل نافذة المتصفح عريضة جدًا، هو أمر متعب جدًا للقراءة؛ لأن المستخدم يضطر بعد الانتهاء من قراءة السطر، إلى الانتقال من أقصى يسار الصفحة، إلى أقصي يمين الصفحة. جرب تكبير، وتصغير المتصفح؛ لمعرفة المقصود!." no_layout.2: "قبل إصلاح هذه المشكلة؛ ينبغي أن نتأكد من معرفتنا التعامل مع الخاصية المهمة display." -display.title: "\"display\" خاصية" +display.title: "خاصية \"display\"" display.intro: "خاصية display، هي أكثر خاصية مهمة في CSS، وخاصة في أمور التحكم في تصميم المواقع. كل عنصر في الموقع، يحتوي على خاصية display افتراضية، وتعتمد قيمة الخاصية على العنصر نفسه. القيمة الافتراضية لمعظم العناصر هي block، أو inline." display.block.title: "block" -display.block: "div هو العنصر الأساسي في تصميم الموقع، وقيمة ال display الخاصة به تساوي: block. أي عنصر يحمل القيمة الأخيرة يُسمى block-level-element، ومن خصائص هذه العناصر أنها تبدأ في سطر جديد، وتمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة الأخرى على هذه العناصر في HTML5: p، وform، وsection، وfooter، وheader." +display.block: "div هو العنصر الأساسي في تصميم الموقع، وقيمة الخاصية display الخاصة به تساوي: block. ومن أهم مميزات العناصر التي تمتلك هذه الخاصية أنها تبدأ في سطر جديد، وتمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة الأخرى على هذه العناصر في لغة HTML5: p، وform، وsection، وfooter، وheader." display.inline.title: "inline" display.inline.1: "عنصر ال span هو العنصر الأساسي الذي تكون قيمة display الخاصة به تساوي inline. أي عنصر يحمل القيمة الأخيرة يُسمى inline element. ومن خصائص هذه العناصر أنها تمكن من تضمين النصوص داخل الفقرات." display.inline.2: "مثل هذا" @@ -39,32 +41,32 @@ display.none.1: "أحد القيم المهمة الأخرى هي nonevisibility؛ حيث أننا عندما نُعيّن قيمة none لخاصية display؛ فإننا نقوم بتحميل محتوى الصفحة كما لو أن العنصر غير موجود. أما visibility: hidden;؛ فتقوم بإخفاء العنصر فقط، ويظل أثر العنصر موجودًا في الصفحة." display.other.title: "قيم أخرى" display.other: "هناك قيم أخرى لخاصية display. مثل قيمة list-item، و قيمة table، وقيمة table. هذه قائمة بكل قيم خاصية display. سنقوم بشرح القيمتين: inline-block، وflex لاحقًا." -display.extra: "كما ذكرنا أعلاه؛ كل عنصر له قيمة code>display افتراضية. وعلى كل حال، يمكن دائمًا تغيير القيمة القديمة، بقيمة أخرى." +display.extra: "كما ذكرنا أعلاه؛ كل عنصر له قيمة display افتراضية. وعلى كل حال، يمكن دائمًا تغيير القيمة القديمة، بقيمة أخرى." -margin_auto.title: "margin: auto;" -margin_auto.1: "ضبط العرض الخاص بعنصر block-level element، وذلك باستخدام خاصية width؛ سيمنع العنصر من أن يمتد من أقصى اليمين، إلى أقصى اليسار. أيضًا، يمكن ضبط الهوامش؛ لجعل العنصر متوسط الصفحة، باستخدام خاصية margin، وذلك بجعل القيمة تساوي auto. " +margin_auto.title: "توسيط العناصر" +margin_auto.1: "يُمكنك ضبط العرض الخاص بأي عنصر وذلك باستخدام خاصية width؛ وسيمنع العنصر من أن يمتد من أقصى اليمين، إلى أقصى اليسار. أيضًا، يمكن ضبط الهوامش؛ لجعل العنصر متوسط الصفحة، باستخدام خاصية margin، وذلك بجعل القيمة تساوي auto. " margin_auto.2: "المشكلة الوحيدة التي ستحدث، هي إذا حاولت عرض الصفحة على متصفح العرض الخاص به أضيق من عرض العنصر ذاته. سيقوم المتصفح بحل ذلك من خلال إضافة شريط scrollbar أفقي. لنقم بتطوير الأمر قليلًا." max_width.title: "max-width" max_width.1: "استخدام خاصية max-width بدلًا من خاصية width في هذا الموقف؛ سيجعل المتصفح يتحكم بفعالية أكثر مع الشاشات الصغيرة. يعتبر هذا الموضوع مهمًا، إذا كنت تود جعل الموقع مستخدمًا بسهولة على الجوال. قم بتكبير، وتصغير المتصفح لرؤية الفرق. " -max_width.2: "بالمناسبة، خاصية max-width مدعومة في جميع المتصفحات، ومن ضمنها إنترنت إكسبلورر +7؛ لذا لا داعي للقلق من هذا الأمر." +max_width.2: "بالمناسبة، خاصية max-width مدعومة في جميع المتصفحات، ومن ضمنها إنترنت إكسبلورر 7+؛ لذا لا داعي للقلق من هذا الأمر." box_model.title: "box model" -box_model.intro: "بينما تحدثنا عن خاصية width، كان يتوجب التنويه إلى أهم مشكلة لهذه الخاصية، وهي the box model. عندما تقوم بضبط العرض الخاص بعنصر ما، سيظهر العنصر أكبر من الحجم الذي قمت بضبطه. وتفسير الأمر، هو أن وجود حواشي العنصر (padding)، وحدود العنصر (border) ستقوم بتمديد عرض العنصر إلى ما بعد الحد الذي قمت بضبطه. انظر إلى المثال التالي؛ حيث يوجد عنصران، وبنفس قيمة العرض، ولكن مع اختلاف حقيقي بين عرض العنصرين." +box_model.intro: "بينما تحدثنا عن خاصية width، كان يتوجب التنويه إلى أهم مشكلة لهذه الخاصية، وهي عندما تقوم بضبط العرض الخاص بعنصر ما، سيظهر العنصر أكبر من الحجم الذي قمت بضبطه. وتفسير الأمر، هو أن وجود حواشي العنصر (padding)، وحدود العنصر (border) ستقوم بتمديد عرض العنصر إلى ما بعد الحد الذي قمت بضبطه. انظر إلى المثال التالي؛ حيث يوجد عنصران، وبنفس قيمة العرض، ولكن مع اختلاف حقيقي بين عرض العنصرين." box_model.simple: "أنا العنصر الصغير!" box_model.fancy: "وأنا الكبير!" box_model.outro: "حل هذه المشكلة هو حل رياضي. حيث يقوم مطورو صفحات الويب باستخدام CSS، بتحديد قيمة أصغر من التي يريدونها فعليًا، والتي تساوي القيمة الأولية، مطروحًا منها قيمة الحواشي، والحدود. من حسن الحظ، لن نحتاج لهذا بعد الآن!." -box_sizing.title: "box-sizing خاصية" +box_sizing.title: "خاصية box-sizing" box_sizing.1: "يمكن اعتبار العناصر الموجودة ضمن كود html عبارة عن صناديق. ونستخدم مصطلح box-model للتعبير عن تصميم كل عنصر في الصفحة. لهذا السبب وُجدت خاصية box-sizing. يتكون box-model من أربع أشياء: هامش خارجي، وإطار، وهامش داخلي، ومحتوى العنصر نفسه. المثال التالي يوضح كيفية استخدام خاصية box-sizing: border-box;" box_sizing.simple: "نحن بنفس الحجم الآن." box_sizing.fancy: "رائع!" box_sizing.2: "الأمر الآن أفضل، أليس كذلك؟. غالبًا ما يريد مطورو الويب جعل جميع العناصر تبدو بهذه الطريقة. ولتحقيق ذلك، يقوم المطورون بكتابة الكود التالي:" box_sizing.3: "هذا الكود يضمن أن جميع العناصر الموجودة في الصفحة، مُحجّمة بشكل ذكي." -box_sizing.4: "ولأن box-sizing هي خاصية جديدة نسبيًا؛ فينبغي عليك استخدام -webkit- و -moz-> كما هو واضح في هذه الأمثلة. هذه الميزة، توفر خواص لا تزال تحت التجربة، أيضًا، ينبغي أن تأخذ بالحسبان أن هذه الخاصية تعمل على IE8+." +box_sizing.4: "ولأن box-sizing هي خاصية جديدة نسبيًا؛ فينبغي عليك استخدام -webkit- و -moz- كما هو واضح في هذه الأمثلة. هذه الميزة، توفر خواص لا تزال تحت التجربة، أيضًا، ينبغي أن تأخذ بالحسبان أن هذه الخاصية تعمل على إنترنت إكسبلورر +8." -position.title: "position" -position.intro: " لغرض إنشاء تصميم صفحات معقدة؛, ينبغي أن نناقش خاصيةposition. هذه الخاصية لها العديد من القيم، وهذه القيم من الصعب تذكرها. لنقم بالمرور عليها واحدة، تلو الأخرى. ويفضل أن تضع هذه الصفحة بالتحديد في مفضلتك؛ لتتمكن من الرجوع إليها بسهولة مستقبلًا." +position.title: "التموضع" +position.intro: " لغرض إنشاء تصميم صفحات معقدة؛, ينبغي أن نناقش خاصية position. هذه الخاصية لها العديد من القيم، وهذه القيم من الصعب تذكرها. لنقم بالمرور عليها واحدة، تلو الأخرى. ويفضل أن تضع هذه الصفحة بالتحديد في مفضلتك؛ لتتمكن من الرجوع إليها بسهولة مستقبلًا." position.static.title: "static" position.static.1: "static هي القيمة الافتراضية. العنصر الثابت يمكن اعتباره بدون موضع والعنصر الذي يملك أي قيمة أخرى يمكن اعتباره عنصرًا محددًا بموضع." @@ -72,13 +74,13 @@ position.relative.title: "relative" position.relative.1: "relative تملك نفس صفات static تقريبًا. إلا إذا قمتَ بإضافة بعض الخصائص الأخرى." position.relative.2: "يمكن إضافة بعض الصفات الأخرى لهذه القيمة، مثل top، right، bottom، و left. هذه الصفات ستجعل العنصر مُعدّلًا عن الوضع الأصلي. أي محتوى آخر لا يمكن تعديله ليملئ أي فراغ يتركه العنصر الأخير." position.fixed.title: "fixed" -position.fixed.1: "نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن حقيق ذلك باستخدام الخصائص التالية: relative، وtop، وright، وbottom، وleft." +position.fixed.1: "نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن تحقيق ذلك باستخدام الخصائص التالية: relative، وtop، وright، وbottom، وleft." position.fixed.2: " متأكد من أنك قد لاحظت أن العنصر الثابت في الزاوية اليمنى السفلى اليسرى من الصفحة. حسنًا، لم لا تلق نظرة عليه الآن؟. كود الcss التالي هو الذي جعل العنصر السابق في هذا المكان." position.fixed.3: "العنصر الثابت لا يترك فراغًا في المكان الذي يتواجد به في الصفحة." position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم هش لموضوع العناصر الثابتة. ألق نظرة على المشكلة هنا." position.fixed.example: "مرحبًا!. لا تلتفت إليّ الآن." position.absolute.title: "absolute" -position.absolute.1: "قيمة absolute هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة fixed باستثناء أمر واحد وهو .أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عمصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body). تذكر أن، العنصر الذي لديه خاصية \"positioned\" فإنه يمكن تحديد موضعه ، باستثناء كونه ثابتًا static." +position.absolute.1: "قيمة absolute هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة fixed باستثناء أمر واحد وهو .أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عنصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body)." position.absolute.2: "هذا مثال بسيط" position.absolute.relative: "هذا العنصر تم تحديده بواسطة أقرب عنصر له. لو كان هذا العنصر يملك خاصية position: static; فإنه سيتم تحديد موضعه حتما بالنسبة إلى جسم الصفحة." position.absolute.absolute: "هذا العنصر يملك خاصية absolute. هذا يعني أنه تم تحديد موقعه نسبة إلى أقرب عنصر له." @@ -87,7 +89,7 @@ position.absolute.3: "هذه الأمور صعبة بعض الشيء، ولكن position_example.title: "مثال على خاصية position" position_example.1: "هذا المثال واقعي جدًا. ويبدو قريبًا لتصميم صفحة ويب واقعية." position_example.section.1: "استخدام خاصية margin-left لكل قسم section يضمن أن هناك هامشًا مناسبًا لكل عنصر. عدا ذلك؛ سنجد العناصر متداخلة مع بعضها البعض." -position_example.section.2: "لاحظ الفرق عندما تقوم بتضغير |أو تكبير متصفحك. إنه يعمل بشكل راشع الآن!" +position_example.section.2: "لاحظ الفرق عندما تقوم بتضغير أو تكبير متصفحك. إنه يعمل بشكل رائع الآن!" position_example.2: "هذا المثال يعمل بشكل جيد لسبب منطقي، وهو أن المحتوى (container) أطول من الشريط العمودي في يسار الشاشة (nav). لو لم يكن كذلك؛ فهذا يعني أن الشريط سيتجاوز حدوده ليدخل في مساحة المحتوى. في الصفحات القادمة سنتعلم بعض تقنيات التصميم، والتي لكل منها إيجابيات، وسلبيات." position_example.footer: "إذا كنت تستخدم رأس، أو ذيل صفحة ثابت، تأكد أن هناك مساحة كافية له!. تم وضع خاصية margin-bottom في جسم الصفحة body." @@ -115,7 +117,7 @@ float_layout.1: "من الشائع جدًا تصميم مواقع ويب كام float_layout.2: "هذا المثال يعمل تمامًا كالمثال السابق. لاحظ أننا قمنا بكتابة clearfix في المحتوى (container). قد لا نحتاج لذلك في هذا المثال، لكنه سيكون مجديًا في حال كان الشريط nav أطول من المحتوى الآخر." percent.title: "العرض المئوي" -percent.1: "النسبة المئوية هي وحدة قياس تستخدم في تحديد أبعاد العنصر. يكون استخدام النسب المئوية رائعًا عند إدراج الصور. هنا مثال على صورة تأخذ 50% من حجم العنصر الذ يحتوي عليها. ما يعني أنه مهما تغير حجم العنصر، فإن الصورة ستأخذ نصف العرض." +percent.1: "النسبة المئوية هي وحدة قياس تستخدم في تحديد أبعاد العنصر. يكون استخدام النسب المئوية رائعًا عند إدراج الصور. هنا مثال على صورة تأخذ 50% من حجم العنصر الذي يحتوي عليها. ما يعني أنه مهما تغير حجم العنصر، فإن الصورة ستأخذ نصف العرض." percent.2: "بإمكانك أيضًا استخدام min-width و max-width لتحديد أقل عرض، أو أكبر عرض يمكن للصورة أن تأخذه!." percent.layout.title: "تصميم الصفحات باستخدام العرض المئوي" percent.layout.1: "يمكنك استخدام النسب المئوية في تصميم صفحات الويب، لكن ذلك سيتطلب منك وقتًا أكثر. في المثال التالي، يكون محتوى العنصر nav ملتفًا بطريقة جيدة عندما تكون نافذة المتصفح ضيقة." @@ -126,7 +128,7 @@ media_queries.1: "\"التصميم المرن، أو المطاط\" هو است media_queries.2: "استعلامات media هي أقوى أداة لتحقيق هذا الأمر. لنأخذ المثال الذي قمنا بتصميم صفحة باستخدام العرض المئوي، ولنضعها في عمود واحد، ثم نشاهد كيف ستبدو عندما يكون المتصفح صغيرًا جدًا." media_queries.3: "الآن عندما تقوم بتكبير أو تصغير المتصفح، سيصبح شكل الصفحة رائعًا أكثر!." media_queries.4: "أوه! الأن تبدو الصفحة رائعة عند التصفح من الجوال. هنا ستجد بعض المواقع الشهيرة التي تستخدم استعلامات media بهذه الطريقة. هناك الكثير الكثير يمكنك اكتشافه. الق نظرة على شرح شبكة موزيلا للمطورين لمعرفة المزيد." -media_queries.5: "يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والآيباد، وذلك باستخدام وسمmeta viewport." +media_queries.5: "يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والآيباد، وذلك باستخدام وسم meta viewport." inline_block.title: "inline-block" inline_block.1: "يمكنك إنشاء شبكة من المربعات التي تملأ عرض المتصفح وتلتف حول بعضها بشكل جيد. كان ذلك ممكن في السابق باستخدام خاصية float، لكن الآن سنستخدم خاصية inline-block، وستكتسف أنها أسهل بكثير. العناصر التي تملك خاصية inline-block هي بالضبط كالعناصر التي تحمل خاصية inline، مع فرق أن العناصر الأولى يمكن أن تأخذ طولًا، وعرضًا محددين. لنلق نظرة على مثالين يشرحان كل طريقة على حدة." @@ -139,7 +141,7 @@ inline_block.easy_way.box: "أنا عنصر مُضمن!" inline_block.easy_way.after: "لا أحتاج لاستخدام clear في هذه الحالة. جميل!" inline_block.2: "ينبغي عليك الاطلاع على بعض الأمور الإضافية في أمور دعم إنترنت إكسبلورر 6، و7 لخاصية inline-block. انظر الروابط السابقة لمعرفة كيفية دعم المتصفحات القديمة مثل IE6 و IE7. عدا ذلك؛ دعنا نكمل!." -inline_block_layout.title: "inline-block التصميم باستخدام" +inline_block_layout.title: "التصميم باستخدام inline-block" inline_block_layout.1: "بإمكانك أيضًا استخدام خاصية inline-block لتصميم الصفحات. هناك بضعة أمور ينبغي أن تأخذها بعين الاعتبار:" inline_block_layout.caveat.1: "العناصر التي لها خاصية inline-block تتأثر بالخاصية vertical-align، وينبغي عليك تحديدها غالبًا ب top." inline_block_layout.caveat.2: "يجب عليك تحديد عرض كل عمود في ال" @@ -149,9 +151,9 @@ column.title: "العمود" column.1: "هناك العديد من الخصائص التي يمكنك استخدامها، والتي تجعل النص مُنسقًا في شكل أعمدة. ألق نظرة:" column.2: "استخدام الأعمدة في css حديث نسبيًا، فربما لا يعمل مع إنترنت إكسبلورر9، وأوبرا ميني. هناك بعض الخصائص المتعلقة باستخدام الأعمدة، انظر هنا لمعرفة المزيد. عدا ذلك؛ دعنا نكمل." -flexbox.title: "flexbox تصميم" -flexbox.1: "يمكننا تصميم صفحات الويب باستخدام وحدة تُسمى flexbox، وهي وحدة عصرية ساهمت في إعادة صياغة تصميم صفحات الويب. مع مع الأسف، تغيرت بعض الأمور مع كثرة المتصفحات، والخصائص التي توفرها. ولكن مع ذلك، سنقوم بمشاركة بعض الأمثلة لتوضيح المفهوم. هذه الأمثلة تعمل حاليًا فقط على بعض المتصفحات التي تستخدم آخر إصدار من flexbox.." -flexbox.2: "هناك الكثير من إصدارات flexbox غير المدعومة. إذا كنت تود تعلم المزيد حول هذه الوحدة,،ابدأ من هنا لمعرفة إذا ما كان الأمر مدعومًا أم لا. قمنا بكتابة مقالة مفصلة لشرح كيفية التعامل مع هذه الوحدة.." +flexbox.title: "تصميم flexbox" +flexbox.1: "يمكننا تصميم صفحات الويب باستخدام وحدة تُسمى flexbox ،وهي وحدة عصرية ساهمت في إعادة صياغة تصميم صفحات الويب. مع الأسف، تغيرت بعض الأمور مع كثرة المتصفحات، والخصائص التي توفرها. ولكن مع ذلك، سنقوم بمشاركة بعض الأمثلة لتوضيح المفهوم. هذه الأمثلة تعمل حاليًا فقط على بعض المتصفحات التي تستخدم آخر إصدار من flexbox." +flexbox.2: "هناك الكثير من إصدارات flexbox غير المدعومة. إذا كنت تود تعلم المزيد حول هذه الوحدة,،ابدأ من هنا لمعرفة إذا ما كان الأمر مدعومًا أم لا. قمنا بكتابة مقالة مفصلة لشرح كيفية التعامل مع هذه الوحدة." flexbox.3: "هناك امور كثيرة يمكنك فعلها مع وحدة flexbox. هذه بعض الأمثلة لتوضيح الفكرة:" flexbox.simple.title: "تصميم بسيط باستخدام flexbox" flexbox.simple.1: "استخدام flexbox سهل جدًا" @@ -163,7 +165,7 @@ flexbox.fancy.4: "سيملأ هذا العنصر ثُلثا المساحة ال flexbox.centering.title: "التوسيط باستخدام flexbox" flexbox.centering.1: "أخيرًا، من السهل جدًا توسيط عنصر ما باستخدام css." -frameworks.title: "css أُطر عمل" +frameworks.title: "أُطر عمل css" frameworks.1: "لأن تصميم الصفحات باستخدام css مُجهد نوعًا ما؛ يوجد هناك أُطر عمل تجعل من أمر التصميم سهلًا. نعني بأُطر العمل أي الأكواد التي قام مطورون بكتابتها سابقًا، وبدلًا من إعادة كتابة الأكواد من جديد؛ فإننا نستخدم أُطر العمل في توفير الوقت والجهد. هنا ستجد بعضًا من أُطر العمل الشهيرة. يُرجى اختيار إطار العمل المناسب، والذي يمكنه تسهيل مهمتك في تصميم الصفحات، والذي يؤدي الغرض الخاص. بالطبع لا غنى عن معرفتك بأساسيات css حتى تتمكن من استخام هذه الأُطر." frameworks.2: "هذا كان كل شيء! إذا كانت لديك أي استفسارات، أو مشاكل بخصوص هذا الموقع، تفضل بإعلامنا بذلك.!" diff --git a/translations/fa.yaml b/translations/fa.yaml index 103b546..35d141e 100644 --- a/translations/fa.yaml +++ b/translations/fa.yaml @@ -1,5 +1,7 @@ # Farsi/Persian +rtl: true + global.title: "یادگیری پیکربندی با CSS" global.short_title: "CSS" global.home: "خانه" From 6461575361ad697af0ef7798699a8cdc0d49d6c3 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Sun, 2 Apr 2017 14:01:30 -0400 Subject: [PATCH 22/29] ar3 --- translations/ar.yaml | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/translations/ar.yaml b/translations/ar.yaml index a0810e1..850db9c 100644 --- a/translations/ar.yaml +++ b/translations/ar.yaml @@ -5,7 +5,7 @@ rtl: true global.title: "تعلم التصميم باستخدام CSS" global.short_title: "CSS" global.home: "الرئيسية" -global.toc: "جدول المحتويات" +global.toc: "الفهرس" global.next: "التالي" global.previous: "السابق" global.feedback: "مشاكل / تغذية راجعة" @@ -14,30 +14,30 @@ util.extra_credit: "ملاحظة إضافية" util.ipsum: "لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق \"ليتراسيت\" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل \"ألدوس بايج مايكر\" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم." util.nav.1: "الرئيسية" util.nav.2: "قائمة الوجبات" -util.nav.3: "قائمة الأرشيف" -util.nav.4: "الساعة" +util.nav.3: "الأرشيف" +util.nav.4: "التوقيت" util.nav.5: "الاتجاهات" util.nav.6: "اتصل بنا" index.1: "هذا الموقع يقوم بتعليمك أساسيات لغة CSS، أو ما تعرف بلغة التنسيق، والتي تستخدم في تصميم الكثير من المواقع الإلكترونية" index.2: "يُفترض أنك ملم ببعض الأشياء العامة في css، مثل المحددات، والخصائص. أيضًا، يُفضل أن تكون مهتمًا بأمور تصميم المواقع. إذا كنت تود تعلم ال HTML، و CSS من البداية؛ يمكنك زيارة : الموقع الإلكتروني التالي. أما لو كانت لديك خبرة فيهما؛ فيُمكنك البدء في هذه الدروس!." -index.translator: "" +index.translator: "ترجمة: Ahmed Sammour" index.get_started: "البداية" no_layout.title: "لا تصميم!" no_layout.1: "عدم وجود تصميم في الصفحة يشبه إلى حد كبير، وضع جميع المحتويات في عمود واحد. ومع ذلك؛ فإن جعل نافذة المتصفح عريضة جدًا، هو أمر متعب جدًا للقراءة؛ لأن المستخدم يضطر بعد الانتهاء من قراءة السطر، إلى الانتقال من أقصى يسار الصفحة، إلى أقصي يمين الصفحة. جرب تكبير، وتصغير المتصفح؛ لمعرفة المقصود!." -no_layout.2: "قبل إصلاح هذه المشكلة؛ ينبغي أن نتأكد من معرفتنا التعامل مع الخاصية المهمة display." +no_layout.2: "قبل إصلاح هذه المشكلة؛ ينبغي أن تتأكد من معرفتك التعامل مع الخاصية المهمة display. الخواص في CSS هي الوحدة الأساسية، وهي التي تُمكنك من تنسيق، وتصميم العناصر في صفحات الويب." display.title: "خاصية \"display\"" display.intro: "خاصية display، هي أكثر خاصية مهمة في CSS، وخاصة في أمور التحكم في تصميم المواقع. كل عنصر في الموقع، يحتوي على خاصية display افتراضية، وتعتمد قيمة الخاصية على العنصر نفسه. القيمة الافتراضية لمعظم العناصر هي block، أو inline." display.block.title: "block" -display.block: "div هو العنصر الأساسي في تصميم الموقع، وقيمة الخاصية display الخاصة به تساوي: block. ومن أهم مميزات العناصر التي تمتلك هذه الخاصية أنها تبدأ في سطر جديد، وتمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة الأخرى على هذه العناصر في لغة HTML5: p، وform، وsection، وfooter، وheader." +display.block: "div هو العنصر الأساسي في تصميم المواقع، وقيمة الخاصية display الخاصة به تساوي: block. ومن أهم مميزات العناصر التي تمتلك هذه الخاصية أنها تبدأ في سطر جديد، وتمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة الأخرى على هذه العناصر في لغة HTML5: p، وform، وsection، وfooter، وheader." display.inline.title: "inline" -display.inline.1: "عنصر ال span هو العنصر الأساسي الذي تكون قيمة display الخاصة به تساوي inline. أي عنصر يحمل القيمة الأخيرة يُسمى inline element. ومن خصائص هذه العناصر أنها تمكن من تضمين النصوص داخل الفقرات." +display.inline.1: "عنصر span هو العنصر الأساسي الذي تكون قيمة display الخاصة به تساوي inline. أي عنصر يحمل القيمة الأخيرة يُسمى inline element. ومن خصائص هذه العناصر أنها تمكن من تضمين النصوص داخل الفقرات." display.inline.2: "مثل هذا" display.inline.3: "من دون قطع سياق الفقرة. عنصر a هو أكثر العناصر التي تُستخدم لهذا الغرض، والتي نستخدمها بكثرة في الوصلات. " display.none.title: "none" -display.none.1: "أحد القيم المهمة الأخرى هي none. بعض العناصر تستخدم هذه القيمة، وأشهر الأمثلة على ذلك عنصر script؛ والذي يستخدم لتضمين كود جافا سكريبت. يمكن استخدام هذه القيمة في جافا سكريبت لإخفاء، أو إظهار عناصر معينة." +display.none.1: "أحد القيم المهمة الأخرى هي none. بعض العناصر تستخدم هذه القيمة، وأشهر الأمثلة على ذلك عنصر script؛ والذي يستخدم لتضمين كود جافا سكريبت داخل الصفحات. يمكن استخدام هذه القيمة في جافا سكريبت لإخفاء، أو إظهار عناصر معينة." display.none.2: "يختلف ذلك عن خاصية visibility؛ حيث أننا عندما نُعيّن قيمة none لخاصية display؛ فإننا نقوم بتحميل محتوى الصفحة كما لو أن العنصر غير موجود. أما visibility: hidden;؛ فتقوم بإخفاء العنصر فقط، ويظل أثر العنصر موجودًا في الصفحة." display.other.title: "قيم أخرى" display.other: "هناك قيم أخرى لخاصية display. مثل قيمة list-item، و قيمة table، وقيمة table. هذه قائمة بكل قيم خاصية display. سنقوم بشرح القيمتين: inline-block، وflex لاحقًا." @@ -45,7 +45,7 @@ display.extra: "كما ذكرنا أعلاه؛ كل عنصر له قيمة width؛ وسيمنع العنصر من أن يمتد من أقصى اليمين، إلى أقصى اليسار. أيضًا، يمكن ضبط الهوامش؛ لجعل العنصر متوسط الصفحة، باستخدام خاصية margin، وذلك بجعل القيمة تساوي auto. " -margin_auto.2: "المشكلة الوحيدة التي ستحدث، هي إذا حاولت عرض الصفحة على متصفح العرض الخاص به أضيق من عرض العنصر ذاته. سيقوم المتصفح بحل ذلك من خلال إضافة شريط scrollbar أفقي. لنقم بتطوير الأمر قليلًا." +margin_auto.2: "المشكلة الوحيدة التي ستحدث، هي إذا حاولت عرض الصفحة على متصفح ما، وكان عرض المتصفح أضيق من عرض العنصر ذاته. سيقوم المتصفح بحل ذلك من خلال إضافة شريط scrollbar أفقي. لنقم بتطوير الأمر قليلًا." max_width.title: "max-width" max_width.1: "استخدام خاصية max-width بدلًا من خاصية width في هذا الموقف؛ سيجعل المتصفح يتحكم بفعالية أكثر مع الشاشات الصغيرة. يعتبر هذا الموضوع مهمًا، إذا كنت تود جعل الموقع مستخدمًا بسهولة على الجوال. قم بتكبير، وتصغير المتصفح لرؤية الفرق. " @@ -77,8 +77,8 @@ position.fixed.title: "fixed" position.fixed.1: "نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن تحقيق ذلك باستخدام الخصائص التالية: relative، وtop، وright، وbottom، وleft." position.fixed.2: " متأكد من أنك قد لاحظت أن العنصر الثابت في الزاوية اليمنى السفلى اليسرى من الصفحة. حسنًا، لم لا تلق نظرة عليه الآن؟. كود الcss التالي هو الذي جعل العنصر السابق في هذا المكان." position.fixed.3: "العنصر الثابت لا يترك فراغًا في المكان الذي يتواجد به في الصفحة." -position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم هش لموضوع العناصر الثابتة. ألق نظرة على المشكلة هنا." -position.fixed.example: "مرحبًا!. لا تلتفت إليّ الآن." +position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم ضعيف لموضوع العناصر الثابتة. ألق نظرة على المشكلة هنا." +position.fixed.example: "مرحبًا!. أنا عنصر ثابت لا أتحرك." position.absolute.title: "absolute" position.absolute.1: "قيمة absolute هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة fixed باستثناء أمر واحد وهو .أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عنصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body)." position.absolute.2: "هذا مثال بسيط" @@ -97,7 +97,7 @@ float.title: "float" float.1: "هذه خاصية أخرى شائعة الاستخدام، وتستخدم بشكل واسع في تصميم صفحات الويب. خاصية Float تهدف أساسًا لجعل النص ملتفًا حول الصور هكذا:" clear.title: "clear" -clear.floating: "أشعر أنني أطير!" +clear.floating: "أشعر أنني أطير فوق العناصر الأخرى!." clear.1: "خاصية clear مهمة جدًا للتحكم في طبيعة خاصية float. لاحظ الفرق بين المثالين التاليين" clear.2: "في هذه الحالة، عنصر section هو في الحقيقة بعد العنصر div. ومع ذلك، فإن العنصر div موجود في يسار الشاشة. إليك تفسير ما حصل: النص الموجود في عنصر section ملتف حول العنصر div، وأما العنصر section فإنه ملتف على كامل الصفحة. ماذا لو أردنا أن يظهر العنصر section بعد العنصر الآخر؟" clear.3: "باستخدام هذه الخاصية clear قمنا بتحريك القسم أسفل العنصر div. استخدم القيمة left لجعل العناصر في اليسار. كما يمكنك استخدام القيم: right، وboth." @@ -128,7 +128,7 @@ media_queries.1: "\"التصميم المرن، أو المطاط\" هو است media_queries.2: "استعلامات media هي أقوى أداة لتحقيق هذا الأمر. لنأخذ المثال الذي قمنا بتصميم صفحة باستخدام العرض المئوي، ولنضعها في عمود واحد، ثم نشاهد كيف ستبدو عندما يكون المتصفح صغيرًا جدًا." media_queries.3: "الآن عندما تقوم بتكبير أو تصغير المتصفح، سيصبح شكل الصفحة رائعًا أكثر!." media_queries.4: "أوه! الأن تبدو الصفحة رائعة عند التصفح من الجوال. هنا ستجد بعض المواقع الشهيرة التي تستخدم استعلامات media بهذه الطريقة. هناك الكثير الكثير يمكنك اكتشافه. الق نظرة على شرح شبكة موزيلا للمطورين لمعرفة المزيد." -media_queries.5: "يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والآيباد، وذلك باستخدام وسم meta viewport." +media_queries.5: "يمكنك جعل موقعك يبدو أكثر جمالًا عند استخدام أجهزة الجوال، والأجهزة اللوحية وذلك باستخدام وسم meta viewport." inline_block.title: "inline-block" inline_block.1: "يمكنك إنشاء شبكة من المربعات التي تملأ عرض المتصفح وتلتف حول بعضها بشكل جيد. كان ذلك ممكن في السابق باستخدام خاصية float، لكن الآن سنستخدم خاصية inline-block، وستكتسف أنها أسهل بكثير. العناصر التي تملك خاصية inline-block هي بالضبط كالعناصر التي تحمل خاصية inline، مع فرق أن العناصر الأولى يمكن أن تأخذ طولًا، وعرضًا محددين. لنلق نظرة على مثالين يشرحان كل طريقة على حدة." @@ -161,7 +161,7 @@ flexbox.fancy.title: "تصميم رائع باستخدام flexbox" flexbox.fancy.1: "سيكون حجم هذا العنصر 200 بيكس إذا كان هناك فراغ مناسب، وسيتقلص إلى 100 بيكسل في حال عدم وجود فراغ. ولن يكون أصغر من 100 بيكسل." flexbox.fancy.2: "سيكون هذا العنصر دائمًا بحجم 200 بيكسل، مهما حدث." flexbox.fancy.3: "سيملأ هذا العنصر ثلث المساحة المتبقية" -flexbox.fancy.4: "سيملأ هذا العنصر ثُلثا المساحة المتبقية" +flexbox.fancy.4: "سيملأ هذا العنصر ثُلثي المساحة المتبقية" flexbox.centering.title: "التوسيط باستخدام flexbox" flexbox.centering.1: "أخيرًا، من السهل جدًا توسيط عنصر ما باستخدام css." From 6f946f367e6f07915d354ade9293ce515f8c5563 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Wed, 5 Apr 2017 22:59:18 -0400 Subject: [PATCH 23/29] ar-translator --- translations/ar.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/ar.yaml b/translations/ar.yaml index 850db9c..a55ec89 100644 --- a/translations/ar.yaml +++ b/translations/ar.yaml @@ -21,7 +21,7 @@ util.nav.6: "اتصل بنا" index.1: "هذا الموقع يقوم بتعليمك أساسيات لغة CSS، أو ما تعرف بلغة التنسيق، والتي تستخدم في تصميم الكثير من المواقع الإلكترونية" index.2: "يُفترض أنك ملم ببعض الأشياء العامة في css، مثل المحددات، والخصائص. أيضًا، يُفضل أن تكون مهتمًا بأمور تصميم المواقع. إذا كنت تود تعلم ال HTML، و CSS من البداية؛ يمكنك زيارة : الموقع الإلكتروني التالي. أما لو كانت لديك خبرة فيهما؛ فيُمكنك البدء في هذه الدروس!." -index.translator: "ترجمة: Ahmed Sammour" +index.translator: "ترجمة: Ahmed Sammour" index.get_started: "البداية" no_layout.title: "لا تصميم!" From 4d1bf5859dec8218f34d8af45744b73d88902c53 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Mon, 19 Jun 2017 18:12:40 -0400 Subject: [PATCH 24/29] remove dead frameworks --- templates/frameworks.html | 2 -- templates/images/elasticss.jpg | Bin 4869 -> 0 bytes templates/images/gumby.jpg | Bin 9635 -> 0 bytes 3 files changed, 2 deletions(-) delete mode 100644 templates/images/elasticss.jpg delete mode 100644 templates/images/gumby.jpg diff --git a/templates/frameworks.html b/templates/frameworks.html index 357561e..aa66c08 100644 --- a/templates/frameworks.html +++ b/templates/frameworks.html @@ -38,9 +38,7 @@ blueprint unsemantic bluetrip - elasticss bootstrap - gumby susy foundation kube diff --git a/templates/images/elasticss.jpg b/templates/images/elasticss.jpg deleted file mode 100644 index 7d41cf4e7205ecfd71509911fd27d6377d70ed5a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4869 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 ZDcX129gwyuym%-)xg&Ee+)?nh{(s*eMp^&> From b57d0ae21827da815f30ad282ca54727f8acfdb7 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Wed, 7 Mar 2018 10:23:33 -0500 Subject: [PATCH 25/29] Update README.textile --- README.textile | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.textile b/README.textile index 55f1eb8..578847e 100644 --- a/README.textile +++ b/README.textile @@ -25,3 +25,7 @@ If you're not familiar with YAML, it's a very simple human-readable data format. To contribute to a translation, start with "en.yaml":https://github.com/incompl/csslayoutsite/blob/master/translations/en.yaml and either "email me":mailto:gsmith@incompl.com translated YAML files or make pull requests against this repository if you know how. To test a translation, change the @lang@ property in "_config.yml":https://github.com/incompl/csslayoutsite/blob/master/templates/_config.yml before you build. If you choose an RTL language you need to add the line @rtl: true@ to the config. + +h2. License + +[Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)](https://creativecommons.org/licenses/by-nc/4.0/) From d1dc6cc1cc773dc32269d90b1a39483606900b24 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Wed, 7 Mar 2018 10:23:55 -0500 Subject: [PATCH 26/29] Update README.textile --- README.textile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.textile b/README.textile index 578847e..5df8838 100644 --- a/README.textile +++ b/README.textile @@ -28,4 +28,4 @@ To test a translation, change the @lang@ property in "_config.yml":https://githu h2. License -[Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)](https://creativecommons.org/licenses/by-nc/4.0/) +"Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)":https://creativecommons.org/licenses/by-nc/4.0/ From 49fa843840220c76a8aea6db01b25a7538b1fef7 Mon Sep 17 00:00:00 2001 From: Jonathan Berger Date: Thu, 27 Jun 2019 15:15:34 -0700 Subject: [PATCH 27/29] Remove "screen and" from media query examples Per email discussion, sending as a pull request. --- templates/media-queries.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/templates/media-queries.html b/templates/media-queries.html index 6df8967..a987070 100644 --- a/templates/media-queries.html +++ b/templates/media-queries.html @@ -15,7 +15,7 @@

{% highlight css %} -@media screen and (min-width:600px) { +@media (min-width:600px) { nav { float: left; width: 25%; @@ -41,7 +41,7 @@ margin-left: 25%; } } -@media screen and (max-width:599px) { +@media (max-width:599px) { nav li { display: inline; } @@ -103,4 +103,4 @@

{% localize util.extra_credit %}

{% localize media_queries.5 %}

- \ No newline at end of file + From e34dcb620b040aa82ef4c599ab1131f863d63364 Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Sun, 8 Nov 2020 09:13:18 -0800 Subject: [PATCH 28/29] Update while moving to netlify --- .gitignore | 2 ++ README.textile | 8 ++++---- templates/_layouts/default.html | 21 --------------------- templates/css/style.css | 23 ----------------------- 4 files changed, 6 insertions(+), 48 deletions(-) diff --git a/.gitignore b/.gitignore index d07a3fa..8565a30 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ _site node_modules .ftppass +package-lock.json +.jekyll-cache diff --git a/README.textile b/README.textile index 5df8838..6ee11dd 100644 --- a/README.textile +++ b/README.textile @@ -3,16 +3,16 @@ This is the source for "learnlayout.com":http://learnlayout.com in case you're c h2. How to Build * If needed, install "NPM":https://npmjs.org/ -** Last tested version was 0.12.7 +** Last tested version was 6.14.4 * If needed, install "grunt":http://gruntjs.com @npm install -g grunt-cli@ -** Last tested grunt-cli version was 0.1.10 +** Last tested grunt-cli version was 1.3.2 ** Last tested grunt version was 0.4.5 * If needed, do a @npm install@ * If needed, install jekyll @sudo gem install jekyll@ -** Last tested version was 3.0.1 +** Last tested version was 4.1.1 * If needed, install "pygments":http://pygments.org/download/ ** I have used `sudo easy_install pygments` on Mac -** Last tested version was 2.0.2 +** Last tested version was 2.7.2 * Build + run test server with @grunt serve@ * or build only with @grunt@ diff --git a/templates/_layouts/default.html b/templates/_layouts/default.html index fefa9e2..b955801 100644 --- a/templates/_layouts/default.html +++ b/templates/_layouts/default.html @@ -100,27 +100,6 @@

{% localize page.title %}

-
- Ads by Bocoup -
- - -
-
diff --git a/templates/css/style.css b/templates/css/style.css index 504e37a..c4e944e 100644 --- a/templates/css/style.css +++ b/templates/css/style.css @@ -342,29 +342,6 @@ footer { margin-left: 10px; } -#share #license { - -} - -#advertisements { - clear: both; - margin: 0 auto; - width: 370px; - text-align: center; -} - -#advertisements span { - font-size: 10px; - font-style: italic; - margin: 0; -} - -#advertisements div { - font-size: 13px; - text-align: left; -} - - @media screen and (min-width:601px) { #menu { From 75508454f13092b678f06184bba7adddf2641dcd Mon Sep 17 00:00:00 2001 From: Greg Smith Date: Mon, 7 Nov 2022 10:55:16 -0800 Subject: [PATCH 29/29] Fix page titles --- README.textile | 4 ++-- templates/_layouts/default.html | 10 +--------- templates/about.html | 5 ++++- templates/box-model.html | 5 ++++- templates/box-sizing.html | 5 ++++- templates/clear.html | 5 ++++- templates/clearfix.html | 5 ++++- templates/column.html | 5 ++++- templates/display.html | 5 ++++- templates/flexbox.html | 5 ++++- templates/float-layout.html | 5 ++++- templates/float.html | 5 ++++- templates/frameworks.html | 5 ++++- templates/inline-block-layout.html | 5 ++++- templates/inline-block.html | 5 ++++- templates/margin-auto.html | 5 ++++- templates/max-width.html | 5 ++++- templates/media-queries.html | 5 ++++- templates/no-layout.html | 4 ++++ templates/percent.html | 5 ++++- templates/position-example.html | 5 ++++- templates/position.html | 5 ++++- 22 files changed, 83 insertions(+), 30 deletions(-) diff --git a/README.textile b/README.textile index 6ee11dd..3ce6267 100644 --- a/README.textile +++ b/README.textile @@ -11,7 +11,7 @@ h2. How to Build * If needed, install jekyll @sudo gem install jekyll@ ** Last tested version was 4.1.1 * If needed, install "pygments":http://pygments.org/download/ -** I have used `sudo easy_install pygments` on Mac +** I most recently used `brew install pygments` on Mac ** Last tested version was 2.7.2 * Build + run test server with @grunt serve@ * or build only with @grunt@ @@ -24,7 +24,7 @@ If you're not familiar with YAML, it's a very simple human-readable data format. To contribute to a translation, start with "en.yaml":https://github.com/incompl/csslayoutsite/blob/master/translations/en.yaml and either "email me":mailto:gsmith@incompl.com translated YAML files or make pull requests against this repository if you know how. -To test a translation, change the @lang@ property in "_config.yml":https://github.com/incompl/csslayoutsite/blob/master/templates/_config.yml before you build. If you choose an RTL language you need to add the line @rtl: true@ to the config. +To test a translation, add a @lang@ parameter when using the @grunt@ commands described above. For example, @grunt serve --lang=es@ h2. License diff --git a/templates/_layouts/default.html b/templates/_layouts/default.html index b955801..2078593 100644 --- a/templates/_layouts/default.html +++ b/templates/_layouts/default.html @@ -2,11 +2,7 @@ - {% if page.title != nil %} - {% localize global.short_title %} - {% localize page.title %} - {% else %} - {% localize global.title %} - {% endif %} + {% localize global.title %} @@ -43,10 +39,6 @@
- {% if page.title %} -

{% localize page.title %}

- {% endif %} - {{ content }} {% if page.prev or page.next %} diff --git a/templates/about.html b/templates/about.html index a97ad53..ff94589 100644 --- a/templates/about.html +++ b/templates/about.html @@ -1,6 +1,5 @@ --- layout: default -title: about.title noFooter: true --- @@ -22,6 +21,10 @@ } +

+ {% localize about.title %} +

+
Greg Smith diff --git a/templates/box-model.html b/templates/box-model.html index 10ba194..a8d692c 100644 --- a/templates/box-model.html +++ b/templates/box-model.html @@ -1,6 +1,5 @@ --- layout: default -title: box_model.title next: box-sizing prev: max-width num: 5 @@ -26,6 +25,10 @@ } +

+ {% localize box_model.title %} +

+

{% localize box_model.intro %}

diff --git a/templates/box-sizing.html b/templates/box-sizing.html index 0e28f5c..3528397 100644 --- a/templates/box-sizing.html +++ b/templates/box-sizing.html @@ -1,6 +1,5 @@ --- layout: default -title: box_sizing.title next: position prev: box-model num: 6 @@ -26,6 +25,10 @@ } +

+ {% localize box_sizing.title %} +

+

{% localize box_sizing.1 %}

diff --git a/templates/clear.html b/templates/clear.html index 2b952d4..919fea3 100644 --- a/templates/clear.html +++ b/templates/clear.html @@ -1,11 +1,14 @@ --- layout: default -title: clear.title next: clearfix prev: float num: 10 --- +

+ {% localize clear.title %} +

+

{% localize clear.1 %}

diff --git a/templates/clearfix.html b/templates/clearfix.html index 99eeb0e..345861b 100644 --- a/templates/clearfix.html +++ b/templates/clearfix.html @@ -1,11 +1,14 @@ --- layout: default -title: clearfix.title next: float-layout prev: clear num: 11 --- +

+ {% localize clearfix.title %} +

+

{% localize clearfix.1 %}

diff --git a/templates/column.html b/templates/column.html index f2d61a0..40457a2 100644 --- a/templates/column.html +++ b/templates/column.html @@ -1,11 +1,14 @@ --- layout: default -title: column.title next: flexbox prev: inline-block-layout num: 17 --- +

+ {% localize column.title %} +

+

{% localize column.1 %}

diff --git a/templates/display.html b/templates/display.html index 9957481..16db8d0 100644 --- a/templates/display.html +++ b/templates/display.html @@ -1,11 +1,14 @@ --- layout: default -title: display.title next: margin-auto prev: no-layout num: 2 --- +

+ {% localize display.title %} +

+

{% localize display.intro %}

diff --git a/templates/flexbox.html b/templates/flexbox.html index 093b609..7f570c4 100644 --- a/templates/flexbox.html +++ b/templates/flexbox.html @@ -1,11 +1,14 @@ --- layout: default -title: flexbox.title next: frameworks prev: column num: 18 --- +

+ {% localize flexbox.title %} +

+

{% localize flexbox.1 %}

diff --git a/templates/float-layout.html b/templates/float-layout.html index 8a79843..d7dcf8b 100644 --- a/templates/float-layout.html +++ b/templates/float-layout.html @@ -1,11 +1,14 @@ --- layout: default -title: float_layout.title next: percent prev: clearfix num: 12 --- +

+ {% localize float_layout.title %} +

+

{% localize float_layout.1 %}

diff --git a/templates/float.html b/templates/float.html index 7e092d3..ec7b642 100644 --- a/templates/float.html +++ b/templates/float.html @@ -1,11 +1,14 @@ --- layout: default -title: float.title next: clear prev: position-example num: 9 --- +

+ {% localize float.title %} +

+

{% localize float.1 %}

diff --git a/templates/frameworks.html b/templates/frameworks.html index aa66c08..2fee606 100644 --- a/templates/frameworks.html +++ b/templates/frameworks.html @@ -1,11 +1,14 @@ --- layout: default -title: frameworks.title next: about prev: flexbox num: 19 --- +

+ {% localize frameworks.title %} +

+

{% localize frameworks.1 %}

diff --git a/templates/inline-block-layout.html b/templates/inline-block-layout.html index 9ce4717..2f17ffe 100644 --- a/templates/inline-block-layout.html +++ b/templates/inline-block-layout.html @@ -1,11 +1,14 @@ --- layout: default -title: inline_block_layout.title next: column prev: inline-block num: 16 --- +

+ {% localize inline_block_layout.title %} +

+

diff --git a/templates/inline-block.html b/templates/inline-block.html index a3676f6..d4a7bbc 100644 --- a/templates/inline-block.html +++ b/templates/inline-block.html @@ -1,11 +1,14 @@ --- layout: default -title: inline_block.title next: inline-block-layout prev: media-queries num: 15 --- +

+ {% localize inline_block.title %} +

+

{% localize inline_block.1 %}

diff --git a/templates/margin-auto.html b/templates/margin-auto.html index 07946ae..99b8f86 100644 --- a/templates/margin-auto.html +++ b/templates/margin-auto.html @@ -1,6 +1,5 @@ --- layout: default -title: margin_auto.title next: max-width prev: display num: 3 @@ -13,6 +12,10 @@ } +

+ {% localize margin_auto.title %} +

+ {% highlight css %} #main { width: 600px; diff --git a/templates/max-width.html b/templates/max-width.html index 0113c0d..35f61d8 100644 --- a/templates/max-width.html +++ b/templates/max-width.html @@ -1,6 +1,5 @@ --- layout: default -title: max_width.title next: box-model prev: margin-auto num: 4 @@ -13,6 +12,10 @@ } +

+ {% localize max_width.title %} +

+ {% highlight css %} #main { max-width: 600px; diff --git a/templates/media-queries.html b/templates/media-queries.html index a987070..fc4c4d0 100644 --- a/templates/media-queries.html +++ b/templates/media-queries.html @@ -1,11 +1,14 @@ --- layout: default -title: media_queries.title next: inline-block prev: percent num: 14 --- +

+ {% localize media_queries.title %} +

+

{% localize media_queries.1 %}

diff --git a/templates/no-layout.html b/templates/no-layout.html index 8f1bbb4..4409b46 100644 --- a/templates/no-layout.html +++ b/templates/no-layout.html @@ -6,6 +6,10 @@ num: 1 --- +

+ {% localize no_layout.title %} +

+

{% localize no_layout.1 %}

diff --git a/templates/percent.html b/templates/percent.html index e7c43e8..33bc64d 100644 --- a/templates/percent.html +++ b/templates/percent.html @@ -1,11 +1,14 @@ --- layout: default -title: percent.title next: media-queries prev: float-layout num: 13 --- +

+ {% localize percent.title %} +

+

{% localize percent.1 %}

diff --git a/templates/position-example.html b/templates/position-example.html index 6f5c6c5..0e5d5d3 100644 --- a/templates/position-example.html +++ b/templates/position-example.html @@ -1,11 +1,14 @@ --- layout: default -title: position_example.title next: float prev: position num: 8 --- +

+ {% localize position_example.title %} +

+

{% localize position_example.1 %}

diff --git a/templates/position.html b/templates/position.html index 3576efb..50d38f1 100644 --- a/templates/position.html +++ b/templates/position.html @@ -1,11 +1,14 @@ --- layout: default -title: position.title next: position-example prev: box-sizing num: 7 --- +

+ {% localize position.title %} +

+

{% localize position.intro %}