diff --git a/content/english/_index.md b/content/english/_index.md index 66eeb0b44d..a4eb33fca0 100644 --- a/content/english/_index.md +++ b/content/english/_index.md @@ -5,8 +5,10 @@ draft: false hidemetadata: true --- -## Workshop Projects +## Workshops + {{< workshop-list style="card" depth="1" showhidden="false" description="true" />}} ## Contributing + Want to help improve our workshops or our website? Click here: **[Workshop Contributor Guidelines](guidelines/)**! diff --git a/content/english/chatbot/_index.md b/content/english/chatbot/_index.md index c2062116e9..a46148adb9 100644 --- a/content/english/chatbot/_index.md +++ b/content/english/chatbot/_index.md @@ -12,25 +12,30 @@ icon: "fas fa-code" In this workshop, you will learn how to create your own chatbot. By the end of the workshop, you will have a chatbot that can have a simple conversation with the user. You will learn how to use AIML, a language for creating chatbots. You will also learn how to use Pandorabots, a platform for hosting chatbots. In order to complete the workshop, you will need an email address to sign up for a Pandorabots account. +

+ ## What is a chatbot? A chatbot is a computer program that simulates human conversation to answer questions. + ## Examples of chatbots Chances are you've already interacted with a chatbot as part of your daily life. You might use a virtual assistant to set a reminder on your phone, or to play a song on your smart speaker. -

Two women talking to each other with speech bubbles in the background

+

Two women talking to each other with speech bubbles in the background

You might have interacted with a chatbot to get help with a product or service. -

new account landing page on github

+

new account landing page on github

More recently, chatbots have become more well-known thanks to technologies like ChatGPT. ## History of chatbots Chatbots have been around for a long time. The first chatbot was created in 1966 and was called ELIZA. In 1995, a new chatbot called ALICE was created. ALICE was written using AIML, which is the same language we will learn in this workshop. + + ## Table of Contents
diff --git a/content/english/chatbot/activity-1.md b/content/english/chatbot/activity-1.md index b82efa0d83..91804ab7a0 100644 --- a/content/english/chatbot/activity-1.md +++ b/content/english/chatbot/activity-1.md @@ -5,6 +5,9 @@ weight: 4 --- ## Meet ALICE + +A teal speech bubble containing a simplified robot face with a rectangular screen showing two orange oval eyes, decorated with a small purple flower, surrounded by a white headset with circular earpieces + Before we start building our own chatbot, let's meet ALICE and ask it some questions. You should continue to have this webpage open and available. Try ALICE diff --git a/content/english/chatbot/activity-2.md b/content/english/chatbot/activity-2.md index 54e1b3762e..d619ebda92 100644 --- a/content/english/chatbot/activity-2.md +++ b/content/english/chatbot/activity-2.md @@ -6,6 +6,7 @@ weight: 5 ## AIML We will be using AIML to create our chatbot. AIML stands for **Artificial Intelligence Markup Language**. If you have ever used HTML to make a website, you will find that AIML looks very similar. Before we can start writing AIML, we need to sign up for an account on PandoraBots. + ## Pandorabots Go to [https://www.pandorabots.com/](https://www.pandorabots.com/) and click on **Sign Up**. Enter an email and password to create an account. Alternatevely, you can sign up using an account from Google, Facebook, Twitter, or Github. If prompted, choose the free trial option. diff --git a/content/english/chatbot/activity-3.md b/content/english/chatbot/activity-3.md index b9ca94c833..d83e7f675b 100644 --- a/content/english/chatbot/activity-3.md +++ b/content/english/chatbot/activity-3.md @@ -12,6 +12,8 @@ Right now, our bot can only respond to "Hello". Let's add some more categories s 2. If the user says "What is your favorite color?" the bot should respond with "My favorite color is blue". 3. If the user says "What is your favorite food?" the bot should respond with "My favorite food is pizza". + \ No newline at end of file diff --git a/content/english/chatbot/activity-5.md b/content/english/chatbot/activity-5.md index d9d9c0c79c..5c07355c17 100644 --- a/content/english/chatbot/activity-5.md +++ b/content/english/chatbot/activity-5.md @@ -6,6 +6,7 @@ weight: 10 ## Echoing Wildcards Let's use the wildcard ```*``` and `````` tag together to allow our bot to include user input in its response. + ``` diff --git a/content/english/chatbot/echoing-wildcards.md b/content/english/chatbot/echoing-wildcards.md index 16a5976e0c..7f8871f388 100644 --- a/content/english/chatbot/echoing-wildcards.md +++ b/content/english/chatbot/echoing-wildcards.md @@ -20,6 +20,8 @@ The `````` tag is a special tag that allows us to use the word or phrase Let's walk through how this category works. The pattern "MY FAVORITE COLOR IS *" will match any input that starts with "MY FAVORITE COLOR IS" followed by any word or phrase. So the pattern will match "MY FAVORITE COLOR IS BLUE" and "MY FAVORITE COLOR IS RED" and "MY FAVORITE COLOR IS GREEN" and so on. The `````` tag will capture the word or phrase that the user entered and use it in the response. So if the user enters "MY FAVORITE COLOR IS BLUE", "blue" is the word represented by the wildcard so when the chatbot responds, `````` will be replaced with "blue". The bot will respond with "Your favorite color is blue". + + Here are some more examples of inputs and outputs from this category: Input | Output diff --git a/content/english/chatbot/img/chat_Alice.png b/content/english/chatbot/img/chat_Alice.png new file mode 100644 index 0000000000..114bc3ae6e Binary files /dev/null and b/content/english/chatbot/img/chat_Alice.png differ diff --git a/content/english/chatbot/img/chat_persons_robot.png b/content/english/chatbot/img/chat_persons_robot.png new file mode 100644 index 0000000000..0e6b4fe8e3 Binary files /dev/null and b/content/english/chatbot/img/chat_persons_robot.png differ diff --git a/content/english/chatbot/img/chatbot1.png b/content/english/chatbot/img/chatbot1.png new file mode 100644 index 0000000000..edb7ef21de Binary files /dev/null and b/content/english/chatbot/img/chatbot1.png differ diff --git a/content/english/chatbot/img/elderly.png b/content/english/chatbot/img/elderly.png new file mode 100644 index 0000000000..e2c923d3e3 Binary files /dev/null and b/content/english/chatbot/img/elderly.png differ diff --git a/content/english/chatbot/img/idea.png b/content/english/chatbot/img/idea.png new file mode 100644 index 0000000000..83a3ab7e32 Binary files /dev/null and b/content/english/chatbot/img/idea.png differ diff --git a/content/english/chatbot/img/ideas.png b/content/english/chatbot/img/ideas.png new file mode 100644 index 0000000000..1b75eb3854 Binary files /dev/null and b/content/english/chatbot/img/ideas.png differ diff --git a/content/english/chatbot/img/introduction.png b/content/english/chatbot/img/introduction.png new file mode 100644 index 0000000000..1fc04d25c2 Binary files /dev/null and b/content/english/chatbot/img/introduction.png differ diff --git a/content/english/chatbot/img/learn.png b/content/english/chatbot/img/learn.png new file mode 100644 index 0000000000..175fe3ebb8 Binary files /dev/null and b/content/english/chatbot/img/learn.png differ diff --git a/content/english/chatbot/img/party.png b/content/english/chatbot/img/party.png new file mode 100644 index 0000000000..2db9786d51 Binary files /dev/null and b/content/english/chatbot/img/party.png differ diff --git a/content/english/chatbot/img/sentence_response.png b/content/english/chatbot/img/sentence_response.png new file mode 100644 index 0000000000..7a3cb2b45b Binary files /dev/null and b/content/english/chatbot/img/sentence_response.png differ diff --git a/content/english/chatbot/img/surprised.png b/content/english/chatbot/img/surprised.png new file mode 100644 index 0000000000..0273c6143b Binary files /dev/null and b/content/english/chatbot/img/surprised.png differ diff --git a/content/english/chatbot/wildcards.md b/content/english/chatbot/wildcards.md index cae216a21e..995127623e 100644 --- a/content/english/chatbot/wildcards.md +++ b/content/english/chatbot/wildcards.md @@ -6,7 +6,7 @@ weight: 8 ## Wildcards You may be noticing now that it takes a lot of work to write a category for every possible way a user might ask a question. For example, currently the bot will respond to "Hello" with "Hello, world". But what if the user says "Hello there" or "Hello chatbot"? We would have to write a new category for each of these cases. Thankfully, there are additional tools we can use to make our bot more flexible. - + One of these tools is the **wildcard**. A wildcard is a special character that matches any word or phrase. Let's see how it works. ``` diff --git a/content/english/csharp-basics/write-to-console.md b/content/english/csharp-basics/write-to-console.md index 6572bb7d53..aa5a5cdc26 100644 --- a/content/english/csharp-basics/write-to-console.md +++ b/content/english/csharp-basics/write-to-console.md @@ -51,6 +51,6 @@ If you type `Console.WriteLine(""");`, you will get an error because the compute Instead, certain characters need to be escaped by adding a `\` in front of it. ```csharp -Console.Writeline("\"");` // this prints out " +Console.Writeline("\""); // this prints out " ``` {{% /notice %}} diff --git a/content/english/security-fundamentals/cyber-security-cause-&-effect.md b/content/english/security-fundamentals/cyber-security-cause-&-effect.md index 5d9f1b4894..b3d62eb3e1 100644 --- a/content/english/security-fundamentals/cyber-security-cause-&-effect.md +++ b/content/english/security-fundamentals/cyber-security-cause-&-effect.md @@ -5,7 +5,7 @@ draft: false weight: 4 --- - +{{< figure src="../img/secret-notes.png" width="700px" >}} Cyber security in practice is more than just not falling for scams online. What exactly are the common risks that users online ignore and that hackers take advantage of? 1. Not enabling two-factor authentication to log into accounts (social media, banking, gaming, etc.) diff --git a/content/english/security-fundamentals/how-can-we-incorporate-security.md b/content/english/security-fundamentals/how-can-we-incorporate-security.md index 834331d45e..e7bc36eec5 100644 --- a/content/english/security-fundamentals/how-can-we-incorporate-security.md +++ b/content/english/security-fundamentals/how-can-we-incorporate-security.md @@ -23,6 +23,7 @@ Cyber security is a big field where everyone needs to do their part to ensure th
+ {{< figure src="../img/question.png" width="300px" >}}
@@ -37,4 +38,4 @@ Cyber security is a big field where everyone needs to do their part to ensure th -{{< /rawhtml >}} \ No newline at end of file +{{< /rawhtml >}} diff --git a/content/english/security-fundamentals/img/hacker.png b/content/english/security-fundamentals/img/hacker.png new file mode 100644 index 0000000000..664aee49fb Binary files /dev/null and b/content/english/security-fundamentals/img/hacker.png differ diff --git a/content/english/security-fundamentals/img/question.png b/content/english/security-fundamentals/img/question.png new file mode 100644 index 0000000000..54966707c5 Binary files /dev/null and b/content/english/security-fundamentals/img/question.png differ diff --git a/content/english/security-fundamentals/img/secret-notes.png b/content/english/security-fundamentals/img/secret-notes.png new file mode 100644 index 0000000000..7123293a77 Binary files /dev/null and b/content/english/security-fundamentals/img/secret-notes.png differ diff --git a/content/english/security-fundamentals/img/security.png b/content/english/security-fundamentals/img/security.png new file mode 100644 index 0000000000..08f411c4f9 Binary files /dev/null and b/content/english/security-fundamentals/img/security.png differ diff --git a/content/english/security-fundamentals/img/teacher.png b/content/english/security-fundamentals/img/teacher.png new file mode 100644 index 0000000000..2e2e142537 Binary files /dev/null and b/content/english/security-fundamentals/img/teacher.png differ diff --git a/content/english/security-fundamentals/security-vs-privacy.md b/content/english/security-fundamentals/security-vs-privacy.md index 07fef386da..4b74bb5b84 100644 --- a/content/english/security-fundamentals/security-vs-privacy.md +++ b/content/english/security-fundamentals/security-vs-privacy.md @@ -6,7 +6,7 @@ weight: 3 --- Security and privacy are often used interchangeably by people, but it is important to understand how these two ideas are different. - +{{< figure src="../img/teacher.png" width="600px" >}} ### Security Security refers to protection against the unauthorized access of data regardless of the content. Any measure taken to make sure that data can't be accessed by an unauthorized person is known as security. Some examples include: * Ensuring that computers are locked while unattended @@ -26,8 +26,8 @@ Privacy refers to the right for consumers to be free from unwanted attention or We put security controls in place to limit who can access information, and we put privacy controls in place to limit the type of information that is accessible in certain places. Security can be put into practice without privacy, but privacy cannot be put into practice without security. - -![Cannot load image](../img/security-vs-privacy.png?classes=border,shadow) + +{{< figure src="../img/security-vs-privacy.png" width="900px" >}} Here’s an example. You might share personal information with your bank when you open an account. What happens after that? Here are three possible outcomes, all related to your personal information (not to the money in the checking account). diff --git a/content/english/security-fundamentals/what-is-security.md b/content/english/security-fundamentals/what-is-security.md index 21b5db8e12..d5071b4d39 100644 --- a/content/english/security-fundamentals/what-is-security.md +++ b/content/english/security-fundamentals/what-is-security.md @@ -7,6 +7,7 @@ weight: 1 ## General Security vs. Cyber Security **Security** on its own is defined as the state of being free from danger or threat. This is the same as the definition of **cyber security** except that cyber security is all about creating a state of being free from danger but in **cyberspace**. +![Cannot load image](../img/security.png?) Someone who works in **cybersecurity** is always working on something to make sure that people who use computers are safe when they use the internet in a variety of ways. Some cybers security engineers ensure that users are safe by always being on alert for new vulnerabilities while others do the same job by trying to break programs before hackers can. @@ -16,4 +17,8 @@ Someone who works in **cybersecurity** is always working on something to make su ## Why do we need security? We need security because there are constantly hackers out there trying to steal your information. Cyberspace should be a place where people can visit *without* having to worry about the threat of having their information stolen or their computer put at risk by viruses and malware. -The role of cyber security engineers and the field of cyber security in general is important because there are very real consequences to cybercrimes. On one hand, people’s data, lives, or businesses can be **ruined** by the actions of cyber criminals or hackers. On the other hand, there is also a big financial risk as well. According to the Center for Strategic and International Studies, cybercrime costs the world about **$600 billion USD** in 2018. Other sources claim that the number is closer to **$1 trillion USD** in 2020 and 2021. \ No newline at end of file +The role of cyber security engineers and the field of cyber security in general is important because there are very real consequences to cybercrimes. On one hand, people’s data, lives, or businesses can be **ruined** by the actions of cyber criminals or hackers. On the other hand, there is also a big financial risk as well. According to the Center for Strategic and International Studies, cybercrime costs the world about **$600 billion USD** in 2018. Other sources claim that the number is closer to **$1 trillion USD** in 2020 and 2021. +
+ +
+ diff --git a/content/espanol/aventura-react/_index.md b/content/espanol/aventura-react/_index.md new file mode 100644 index 0000000000..31790dabaa --- /dev/null +++ b/content/espanol/aventura-react/_index.md @@ -0,0 +1,25 @@ +--- +title: "React: Aventura por Costa Rica" +description: "Aprender React con Javacript" +date: 2019-09-22T23:26:18-05:00 +prereq: "Conocimiento en HTML y CSS" +difficulty: "Normal" +--- + +## Introducción + +

Bienvenidos, te acabas de ganar un tour a Costa Rica.

+

A continuación verás un mapa de Costa Rica con las cosas más importantes de este hermoso país

+ +Mapa de Costa Rica + +

En este nuevo aprendizaje te ayudará Sharky es un tiburón muy raro que apareció en las aguas de Costa Rica descubierto por unos pescadores!

+

Puedes creerlo un tiburón de un color anaranjado!

+ +Sharky + +## Contenido +
+Secciones +{{% children /%}} +
\ No newline at end of file diff --git a/content/espanol/aventura-react/activity-1.md b/content/espanol/aventura-react/activity-1.md new file mode 100644 index 0000000000..458fc3aadf --- /dev/null +++ b/content/espanol/aventura-react/activity-1.md @@ -0,0 +1,116 @@ +--- +title: "Actividad 1 - Rescatando tortugas" +date: 2019-07-25T13:24:17-07:00 +weight: 4 +draft: false +--- + +Abeja imaginando un cuadrado + +

Entra en el link de abajo para construir tú mismo el app de Costa Rica

+ +Crea tu proyecto de React! + +

¡Muy bien! Ahora vamos a construir paso a paso un componente para salvar a tortugas en la isla Tortuguero.

+ +

Imagina que React es una caja enorme llena de piezas LEGO. Cada pieza (componente) tiene un trabajo, por ejemplo:

+ +
    +
  • Una pieza puede ser un botón
    • +
  • Otra pieza puede ser una pantalla
    • +
  • Otra puede ser una lista
    • +
  • Otra puede ser una imagen
    • +
+ +

Cuando juntas todas esas piezas… ¡se forma tu aplicación completa!

+ +Empecemos + + +{{% notice tip %}} + + + +

import { useState } from "react";

+ +

¿Qué significa import { useState } from "react";?

+

En React, algunas herramientas no vienen listas. Hay que pedirlas de la cajita de React. useState es una de esas herramientas especiales que nos deja guardar cosas que cambian.

+

Por ejemplo: cuántas tortugas quedan por salvar.

+ +

export default function Tortugero()

+ +

¿Qué es export default function Tortugero()?

+

Aquí estamos creando un componente. export default significa: “Este es el archivo principal, lo puedes usar en otros lugares”.

+

function Tortugero() es el nombre del componente. Como una caja que dice: "Esto es Tortugero".

+ +{{% /notice %}} + + +{{% notice tip %}} + +

¿Qué es const [tortugas, setTortugas] = useState(0);?

Imagina que tenemos una caja mágica donde guardamos un número. Ese número es la cantidad de tortugas salvadas.

  • tortugas → lo que hay en la caja (un número)
  • setTortugas → la llave mágica que permite cambiar ese número
  • useState(0) → empieza en 0 tortugas salvadas

Así React recuerda cuántas tortugas llevas salvadas.

+ +{{% /notice %}} + +{{% notice tip %}} + +

¿Qué es const total = 10;?

Este número es la meta del juego: ¡hay 10 tortugas atrapadas en Tortuguero! Aquí estamos diciendo: "Debemos salvar 10 tortugas".

Podrías cambiarlo a otro número para hacer el juego más fácil o más difícil.

+ +{{% /notice %}} + +{{% notice tip %}} + +

¿Qué hace salvarTortuga()?

Esta función se activa hacemos clic en el botón "Salvar tortuga".

  • Revisa si aún quedan tortugas por salvar → tortugas < total
  • Si sí, suma una tortuga más → setTortugas(tortugas + 1)

Cada clic rescata una tortuga nueva.

+ +``` jsx +if (tortugas < total) setTortugas(tortugas + 1); +``` + +{{% /notice %}} + +{{% notice tip %}} + +

¿Qué hace reiniciar()?

Cuando terminamos la misión, pueden volver a empezar. Esta función pone el contador de tortugas en 0 de nuevo.

Así pueden jugar otra vez desde el inicio.

+ +``` jsx +const reiniciar = () => setTortugas(0); +``` + +{{% /notice %}} + +**Importante colocar un div con el classname= Tortugero** + +```jsx +

Has salvado {tortugas} de {total} tortugas

+``` + +Aqui se mostraran las tortugas que has salvado y el total. + +``` jsx +{tortugas < total ? ( + + ) : ( + <> +

Todas las tortugas están a salvo!

+ + + )} +``` + +**El button responde a la funcion SALVARTORTUGAS para ir sumando rescates** + +El botton reiniciar limpia la mision, para que puedas rescatar mas tortugas. + +Luego para mostrar lo que acabamos de construir debemos importarlo en el `"App.jsx"` + +``` jsx +import Tortugero from "./components/Tortugero.jsx" +``` + +Con el nombre `"Tortugero"` podemos implementar una nueva "etiqueta" y asi mostramos todo lo que contiene el archivo `"Tortugero.jsx"` + +![alt text height="200px" width="50%"](../media/Components1Tortugero.png "Tortugero") + + + + diff --git a/content/espanol/aventura-react/activity-2.md b/content/espanol/aventura-react/activity-2.md new file mode 100644 index 0000000000..8639e004ae --- /dev/null +++ b/content/espanol/aventura-react/activity-2.md @@ -0,0 +1,104 @@ +--- +title: "Actividad 2 - Limpiando playas" +date: 2019-07-25T13:24:17-07:00 +weight: 5 +draft: false +--- + +Limpieza de playa + +¡Genial! Lograste salvar las tortugas. Ahora para a limpiar playas de Costa Rica aprenderemos a usar constantes pero con arrays, for loops y variables let. + +**Escribe este archivo `"Playas.jsx"`** + +En primer lugar lo que vamos a hacer es crear una array que ahí puedes guardar una cantidad x de elementos, mira este ejemplo! + +Así se ven normalmente las array en react. + +``` jsx +const [Dinero, setDinero] = useState([ + "Colones", + "Dolares", + "Euros", + "Pesos" + ]); +``` + +Crea una constante llamada **desechos y setDesechos** para esta actividad. Dentro de esa const pon elementos que son basura en las playas. + +Tenemos que crear una funcion para poder limpiar la playa de los desechos de la array. + +``` jsx +const depositar = (d) => setDinero(dinero.filter((x) => x !== d)); + +``` + +Este codigo deposita dinero en un banco, puedes usarlo para limpiar la playa!!! + + + +{{% notice tip %}} +### ¿Qué hace esta función? +

const depositar = (d) => setDinero(dinero.filter((x) => x !== d));?

+

Cuando le das click elimina lo que tienes en la array

+

El filter, revisa uno por uno, borra el qeu coincida y guarda la lista sin dinero

+

Ejemplo, quito los colones y que quedo con los dolares

+ +{{% /notice %}} + +Luego debemos crear una variable llamada `"let"` a diferencia de la const, let si se puede modificar + +Le ponemos por nombre `"botones = [];"` + +```jsx +let botones = []; + +for (let i = 0; i < desechos.length; i++) { + botones.push( + + ); +} + +``` + +Con esto nos ahorramos el escribir 4 botones a mano. + +{{% notice info %}} +### El ciclo hace esto: +

1. Empieza en el primer desecho.

+

2. Crea un botón para ese desecho.

+

3. Pasa al siguiente.

+

4. Repite hasta terminar.

+ +

El boton tiene el Onclick que sirve para limpiar

+ +**Si la lista cambia, React vuelve a dibujar solo los botones que faltan.** + +{{% /notice %}} + +**Lo que se muestra en pantalla!!!** + +```jsx +return ( +
+

Limpieza de las Playas

+

+ Haz clic en los desechos para recolectarlos y ayudar a proteger a las + especies marinas +

+ +
{botones}
+ + //Aqui muestra el mensaje final + {desechos.length === 0 && ( +

Playa limpia!

+ )} +
+); +``` + +**NO OLVIDES IMPORTARLO EN EL APP.JSX** + +![alt text height="200px" width="50%"](../media/Components2Playa.png "Playa") \ No newline at end of file diff --git a/content/espanol/aventura-react/activity-3.md b/content/espanol/aventura-react/activity-3.md new file mode 100644 index 0000000000..74910e4dd5 --- /dev/null +++ b/content/espanol/aventura-react/activity-3.md @@ -0,0 +1,94 @@ +--- +title: "Actividad 3 - Finca del café" +date: 2019-07-25T13:24:17-07:00 +weight: 6 +draft: false +--- + +¿Sabes que tan importante es el café en Costa Rica? + +El café de Costa Rica es reconocido mundialmente por su alta calidad, gracias a la combinación de suelos volcánicos fértiles, un clima ideal y el cultivo exclusivo de granos de Arábica. El país prohíbe el cultivo de la variedad Robusta para garantizar un producto suave y equilibrado. El café ha sido históricamente vital para la economía y la cultura del país, y se cultiva en diversas regiones, incluyendo Tarrazú, que es una de las más famosas. + +Así que vamos a aprender sobre el proceso del café y porque no aprender más de React con **Sharky** + +**Escribe este archivo `"FincaCafe.jsx"`** + +Cafe + +Para hacer café primero debemos saber que esto lleva un proceso importante que contiene algunas etapas, que veremos a continuación. + +{{% notice info %}} +### Aprenderemos algunas cosas diferentes +

1. Usaremos un número para saber en qué etapa de una historia estamos

+

2. Cambiamos lo que vemos según ese número

+

3. No estamos contando, estamos navegando pasos

+ +{{% /notice %}} + +```jsx +const etapas = [ + "Sembrar café", + "Cosechar granos", + "Secar al sol", + "Tostar", + "Disfrutar" +]; + +const [indice, setIndice] = useState(0); + +``` + +**Aqui creamos una constante que se llama `"ETAPAS"`, pero tambien tenemos otra constante que se llama `"INDICE"`** + +{{% notice info %}} +### Ya que esto quiere decir que: +

El número 0 significa etapa 1

+

El número 1 significa etapa 2

+

El número 2 significa etapa 3

+ +{{% /notice %}} + +Ya con esto podemos crear una const llamada `"siguiente"` para que vayamos pasando entre etapas. + +```jsx +const siguiente = () => { + if (indice < etapas.length - 1) { + setIndice(indice + 1); + } + }; +``` + +**Como se muestra:** + +```jsx +return ( +
+

Finca del Abuelo

+

{etapas[indice]}

+ + //Estoy en un nivel MENOR que el ultimo nivel? + {indice < etapas.length - 1 ? ( + + ) : ( + //LLEGASTE A LA ULTIMA ETAPA +

+ Has completado todo el proceso del café! +

+ )} +
+ ); +``` + +{{% notice tip %}} +### Imagina que estas jugando un juego con 5 niveles +

etapas.length = Cuántos niveles tiene el juego (ejemplo: 5 niveles)

+

indice = En qué nivel estás tú ahora (puede ser nivel 1, 2, 3...)

+

El número 2 significa etapa 3

+ +{{% /notice %}} + +**NO OLVIDES IMPORTARLO EN EL APP.JSX** + +![alt text height="200px" width="50%"](../media/Components3FincaCafe.png "Finca de cafe") diff --git a/content/espanol/aventura-react/activity-4.md b/content/espanol/aventura-react/activity-4.md new file mode 100644 index 0000000000..9283d8d282 --- /dev/null +++ b/content/espanol/aventura-react/activity-4.md @@ -0,0 +1,108 @@ +--- +title: "Actividad 4 - Volcan Arenal" +date: 2019-07-25T13:24:17-07:00 +weight: 7 +draft: false +--- + +¿Sabías que hay alrededor de 200 volcanes en Costa Rica?, de los cuales solo cinco están activos que son: el Poás, Irazú, Turrialba, Rincón de la Vieja y Arenal. El resto se encuentran inactivos o extintos. + +Bueno te vamos a hablar del Volcán Arenal. + +Arenal + +El Volcán Arenal es un estratovolcán inactivo y un ícono de Costa Rica, ubicado en la provincia de Alajuela, dentro del Parque Nacional Volcán Arenal. Es conocido por su forma cónica y está rodeado por selvas tropicales, aguas termales y una rica biodiversidad, que incluye una gran cantidad de especies de aves. Su última gran actividad eruptiva comenzó en 1968 y cesó en 2010. + +**Escribe este archivo `"Volcan.jsx"`** + + +

Crea una constante de animales con un respectivo SetAnimales, escribe los que piensas que hay en Costa Rica!

+ +--- + +#### **Vamonos a salvarlos porque parece que el Volcán Arenal presenta actividad!** + +Volcan-Peligro + +**Creamos constante para evacuarlos del lugar** +```jsx +const evacuar = (nombre) => { + setAnimales(animales.filter((a) => a !== nombre)); + }; +``` + + +{{% notice info %}} +

En Playas solo creábamos botones, pero en Volcán creamos una lista completa:

+

Un "li" puede contener texto + un botón + una función

+{{% /notice %}} + +```jsx +// Aquí hacemos una lista a mano usando un for + let listaAnimales = []; + + for (let i = 0; i < animales.length; i++) { + listaAnimales.push( +
  • + {animales[i]} está en peligro{" "} + +
    • + ); + } +``` + +{{% notice tip %}} +### Imagina lo siguiente +

    1. Un helicóptero hace rondas para rescatar a los animales:

    + +```jsx +for (let i = 0; i < animales.length; i++) +``` +

    i = 0 → Primera ronda: visita al animal 1

    +

    i = 1 → Segunda ronda: visita al animal 2

    +

    i = 2 → Segunda ronda: visita al animal 3

    +

    i = 3 → Segunda ronda: visita al animal 4

    +

    i = 4 → ¡STOP! Ya no hay más animales (porque animales.length = 4)

    + +```jsx +listaAnimales.push( ... ) +``` + +

    Es como cuando el piloto anota en su lista qué animal encontró y qué botón debe apretar para salvarlo.

    +{{% /notice %}} + +{{% notice info %}} +

    En Playas usábamos:

    + +```jsx +
    {botones}
    + +``` +

    Pero en Volcan.jsx vemos esto:

    + +```jsx +
      {listaAnimales}
    + +``` +{{% /notice %}} + +**Como se muestra** + +```jsx +return ( +
    +

    Volcán Arenal

    + + {animales.length > 0 ? ( +
      {listaAnimales}
    + ) : ( +

    Todos los animales están a salvo!

    + )} +
    + ); +``` + +**NO OLVIDES IMPORTARLO EN EL APP.JSX** + +![alt text height="200px" width="50%"](../media/Components4Volcan.png "Volcan Arenal") + diff --git a/content/espanol/aventura-react/activity-5.md b/content/espanol/aventura-react/activity-5.md new file mode 100644 index 0000000000..b5a9fedacd --- /dev/null +++ b/content/espanol/aventura-react/activity-5.md @@ -0,0 +1,216 @@ +--- +title: "Actividad 5 - Rescatando Perezosos" +date: 2019-07-25T13:24:17-07:00 +weight: 8 +draft: false +--- + +Perezoso, ilustracion descargada de freepik + +¡Ya estamos por terminar nuestro viaje por Costa Rica! Para terminar vamos a conocer un poco sobre los Perezosos. +Los osos perezosos en Costa Rica son un ícono del país y hay dos especies: el de dos dedos (Choleopus hoffmanni) y el de tres dedos (Bradypus variegatus). Son conocidos por su lentitud, su habilidad para camuflarse y por ser símbolos nacionales que representan la conexión de Costa Rica con la naturaleza. Puedes avistarlos en parques nacionales como Manuel Antonio y Corcovado, y en zonas como La Fortuna y Cahuita. + +**Escribe este archivo `"Perezoso.jsx"`** + +{{% notice info %}} +### Un componente dentro de otro componente + +En esta actividad vamos a usar dos componentes: + +- Un componente pequeño: **Perezoso** +- Un componente grande: **Perezosos** + +Esto significa que creamos un componente pequeñito (como un molde de galletas) y luego lo usamos muchas veces dentro del componente grande. +{{% /notice %}} + +```jsx +// Componente pequeño +function Perezoso() { + return

    Soy un perezoso

    ; +} + +// Componente grande +export default function Perezosos() { + return ( + + ); +} +``` + +--- + +{{% notice info %}} +### Props — información que recibe el componente + +Los props son información que enviamos desde el componente grande hacia el componente pequeño. +El componente Perezoso va a recibir: + +- nombre +- onRescatar +- rescatado +{{% /notice %}} + +```jsx +function Perezoso({ nombre, onRescatar, rescatado }) { + return

    {nombre}

    ; +} +``` + +Así se envían: + +```jsx + +``` +--- + +#### Dentro del componente **Perezosos** va este codigo + +```jsx +
    +

    + {rescatado + ? `✅ ${nombre} está a salvo!` + : `🦥 ${nombre} necesita ayuda`} +

    + + {!rescatado && ( + + )} +
    +``` + +--- + +{{% notice info %}} +#### 1. Contenedor principal con clases dinámicas + +```jsx +
    +``` + +- Siempre usa la clase perezoso-card que es del style.css +- Si el perezoso ya fue rescatado (```rescatado === true```), también agrega la clase ```rescatado```. +- Esto sirve para cambiar estilos según su estado. + +Es como darle una pegatina especial cuando ya está salvado. +La clase **"rescatado"** es esa pegatina. + +--- + +#### 2. Texto que cambia según el estado del perezoso + +```jsx +

    + {rescatado + ? `✅ ${nombre} está a salvo!` + : `🦥 ${nombre} necesita ayuda`} +

    + +``` + +- Si rescatado es true, muestra un mensaje de que está a salvo. +- Si es false, muestra que necesita ayuda. +- **El ```? :``` es un “si está rescatado → muestra esto, si no → muestra lo otro”.** + +Es como un semáforo: + +Si está verde → ¡ya está salvo! + +Si está amarillo → todavía necesita ayuda. + +--- + +#### 3. Botón que aparece solo si NO está rescatado + +```jsx +{!rescatado && ( + +)} + +``` + +- !rescatado significa “NO está rescatado”. +- Si esto es cierto, se muestra el botón. +- Si ya está rescatado → el botón desaparece. +- El botón ejecuta ```onRescatar(nombre)``` cuando lo presionás. + +Es como un botón de “¡ayúdalo!”. +Si ya está bien, el botón se esconde porque ya no lo necesitas. + +{{% /notice %}} + + + + + + +--- + + +{{% notice info %}} +### Haz una funcion llamada Perezosos + +

    Una constante llamada rescatados y setRescatados.

    +

    Otra constante llamada perezosos y agregale nombres de perezosos.

    +{{% /notice %}} + +--- + + + +**Constante para rescatar a los perezosos!** +```jsx +const rescatar = (nombre) => { + setRescatados([...rescatados, nombre]); + }; +``` + +--- + +{{% notice info %}} +### Crear lista de componentes con un for + +```jsx +let listaPerezosos = []; + +for (let i = 0; i < perezosos.length; i++) { + listaPerezosos.push( + + ); +} +``` +{{% /notice %}} + +#### Asi se muestra + +```jsx +return ( +
    +

    Rescate de los Perezosos

    +

    + Haz clic en los perezosos para rescatarlos del bosque +

    + +
    {listaPerezosos}
    + + {rescatados.length === perezosos.length && ( +

    + Has rescatado a todos los perezosos! +

    + )} +
    + ); +``` + +**NO OLVIDES IMPORTARLO EN EL APP.JSX** + +![alt text height="200px" width="50%"](../media/Components5Perezoso.png "Perezoso") diff --git a/content/espanol/aventura-react/activity-6.md b/content/espanol/aventura-react/activity-6.md new file mode 100644 index 0000000000..ba16589818 --- /dev/null +++ b/content/espanol/aventura-react/activity-6.md @@ -0,0 +1,50 @@ +--- +title: "Viaje terminado - Ahora disfruta de tu app!" +date: 2019-07-25T13:24:17-07:00 +weight: 9 +draft: false +--- + +## ¡Felicidades por completar el taller de React! 🎉 + +Han llegado hasta el final de este emocionante viaje por Costa Rica… +¡y también hasta el final de su primer taller de **React**! 🚀💻 + +Foto Sharky con react + +Hoy no solo conocieron volcanes, playas, perezosos, tortugas y la finca de café +también aprendieron **a construir una aplicación completa**, paso a paso, con: + +- 🌱 **Componentes** +- 🔄 **useState** +- 🧩 **Props** +- 🧠 **Funciones** +- 🔁 **Ciclos for** +- 🗂️ **Importaciones** +- 🎨 **Clases dinámicas** +- 🧱 ¡Y cómo unir todo para crear una app real! + +Cada línea de código que escribieron formó parte de algo más grande. +**Hoy ya pueden decir con orgullo que saben programar con React.** + +--- + +### ¡Estamos muy orgullosos de ustedes! +Programar no es fácil, pero ustedes lo lograron con esfuerzo, práctica y creatividad. +Recuerden: cada gran programador empezó igual que ustedes… +**con su primer componente.** + + +--- + +### Sigan soñando, sigan creando +Lo que aprendieron hoy es solo el comienzo. +¡Ahora pueden crear sus propios juegos, páginas web y aplicaciones! + +--- + +### ¡Felicitaciones, programadores! ⭐ +**¡Lo lograron! 🚀🦥🌋🐢🌴** + + + diff --git a/content/espanol/aventura-react/answer-key.md b/content/espanol/aventura-react/answer-key.md new file mode 100644 index 0000000000..bd21dfc6fd --- /dev/null +++ b/content/espanol/aventura-react/answer-key.md @@ -0,0 +1,243 @@ +--- +title: "React Costa Rica - Answer Key" +date: 2020-03-27T20:24:33-07:00 +weight: 10 +draft: false +hidden: true +--- + +Respuestas de toda la app en React + +### Actividad 1 Tortugero + +```jsx +import { useState } from "react"; + +export default function Tortugero() { + const [tortugas, setTortugas] = useState(0); + const total = 10; + + const salvarTortuga = () => { + if (tortugas < total) setTortugas(tortugas + 1); + }; + + const reiniciar = () => setTortugas(0); + + return ( +
    +

    Parque Nacional Tortuguero

    +

    Has salvado {tortugas} de {total} tortugas

    + + {tortugas < total ? ( + + ) : ( + <> +

    Todas las tortugas están a salvo!

    + + + )} +
    + ); +} + +``` + +### Actividad 2 Playa + +```jsx +import { useState } from "react"; + +export default function Playas() { + const [desechos, setDesechos] = useState([ + "🧃 Plástico", + "🍾 Vidrio", + "🪙 Metal", + "📄 Papel" + ]); + + const limpiar = (d) => setDesechos(desechos.filter((x) => x !== d)); + + // Crear los botones usando for + let botones = []; + + for (let i = 0; i < desechos.length; i++) { + botones.push( + + ); + } + + return ( +
    +

    Limpieza de las Playas

    +

    + Haz clic en los desechos para recolectarlos y ayudar a proteger a las + especies marinas +

    + +
    {botones}
    + + {desechos.length === 0 && ( +

    Playa limpia!

    + )} +
    + ); +} + +``` + +### Actividad 3 Finca de cafe + +```jsx +import { useState } from "react"; + +export default function FincaCafe() { + const etapas = [ + "🌱 Sembrar café", + "🌾 Cosechar granos", + "🌞 Secar al sol", + "🔥 Tostar", + "☕ Disfrutar del café" + ]; + + const [indice, setIndice] = useState(0); + + const siguiente = () => { + if (indice < etapas.length - 1) { + setIndice(indice + 1); + } + }; + + return ( +
    +

    Finca del Abuelo

    +

    {etapas[indice]}

    + + {indice < etapas.length - 1 ? ( + + ) : ( +

    + Has completado todo el proceso del café! +

    + )} +
    + ); +} + +``` + +### Actividad 4 Volcan Arenal + +```jsx +import { useState } from "react"; + +export default function Volcan() { + const [animales, setAnimales] = useState([ + "mapache", + "mono", + "jaguar", + "tucán", + "Tobi" + ]); + + const evacuar = (nombre) => { + setAnimales(animales.filter((a) => a !== nombre)); + }; + + // Aquí hacemos una lista a mano usando un for + let listaAnimales = []; + + for (let i = 0; i < animales.length; i++) { + listaAnimales.push( +
  • + {animales[i]} está en peligro{" "} + +
    • + ); + } + + return ( +
    +

    Volcán Arenal

    + + {animales.length > 0 ? ( +
      {listaAnimales}
    + ) : ( +

    Todos los animales están a salvo!

    + )} +
    + ); +} + +``` + +### Actividad 5 Perezosos + +```jsx +import { useState } from "react"; + +function Perezoso({ nombre, onRescatar, rescatado }) { + return ( +
    +

    + {rescatado + ? `✅ ${nombre} está a salvo!` + : `🦥 ${nombre} necesita ayuda`} +

    + + {!rescatado && ( + + )} +
    + ); +} + +export default function Perezosos() { + const [rescatados, setRescatados] = useState([]); + + const rescatar = (nombre) => { + setRescatados([...rescatados, nombre]); + }; + + const perezosos = ["Mau", "Rick", "Luna", "Toby"]; + + // Crear la lista de componentes con un for + let listaPerezosos = []; + + for (let i = 0; i < perezosos.length; i++) { + const nombre = perezosos[i]; + + listaPerezosos.push( + + ); + } + + return ( +
    +

    Rescate de los Perezosos

    +

    + Haz clic en los perezosos para rescatarlos del bosque +

    + +
    {listaPerezosos}
    + + {rescatados.length === perezosos.length && ( +

    + Has rescatado a todos los perezosos! +

    + )} +
    + ); +} + +``` + + diff --git a/content/espanol/aventura-react/media/Arenal.jpg b/content/espanol/aventura-react/media/Arenal.jpg new file mode 100644 index 0000000000..ae7e2c6e0c Binary files /dev/null and b/content/espanol/aventura-react/media/Arenal.jpg differ diff --git a/content/espanol/aventura-react/media/Cafe.png b/content/espanol/aventura-react/media/Cafe.png new file mode 100644 index 0000000000..26ca28ab65 Binary files /dev/null and b/content/espanol/aventura-react/media/Cafe.png differ diff --git a/content/espanol/aventura-react/media/Components1Tortugero.png b/content/espanol/aventura-react/media/Components1Tortugero.png new file mode 100644 index 0000000000..a36cdc557f Binary files /dev/null and b/content/espanol/aventura-react/media/Components1Tortugero.png differ diff --git a/content/espanol/aventura-react/media/Components2Playa.png b/content/espanol/aventura-react/media/Components2Playa.png new file mode 100644 index 0000000000..f7f584ae19 Binary files /dev/null and b/content/espanol/aventura-react/media/Components2Playa.png differ diff --git a/content/espanol/aventura-react/media/Components3FincaCafe.png b/content/espanol/aventura-react/media/Components3FincaCafe.png new file mode 100644 index 0000000000..74f65f5fb8 Binary files /dev/null and b/content/espanol/aventura-react/media/Components3FincaCafe.png differ diff --git a/content/espanol/aventura-react/media/Components4Volcan.png b/content/espanol/aventura-react/media/Components4Volcan.png new file mode 100644 index 0000000000..64c76dec73 Binary files /dev/null and b/content/espanol/aventura-react/media/Components4Volcan.png differ diff --git a/content/espanol/aventura-react/media/Components5Perezoso.png b/content/espanol/aventura-react/media/Components5Perezoso.png new file mode 100644 index 0000000000..81e14a880f Binary files /dev/null and b/content/espanol/aventura-react/media/Components5Perezoso.png differ diff --git a/content/espanol/aventura-react/media/Configuracion2.mp4 b/content/espanol/aventura-react/media/Configuracion2.mp4 new file mode 100644 index 0000000000..ae5ccdc206 Binary files /dev/null and b/content/espanol/aventura-react/media/Configuracion2.mp4 differ diff --git a/content/espanol/aventura-react/media/Perezoso.png b/content/espanol/aventura-react/media/Perezoso.png new file mode 100644 index 0000000000..003c3f447b Binary files /dev/null and b/content/espanol/aventura-react/media/Perezoso.png differ diff --git a/content/espanol/aventura-react/media/React.png b/content/espanol/aventura-react/media/React.png new file mode 100644 index 0000000000..d6882a051c Binary files /dev/null and b/content/espanol/aventura-react/media/React.png differ diff --git a/content/espanol/aventura-react/media/Sharky.png b/content/espanol/aventura-react/media/Sharky.png new file mode 100644 index 0000000000..599b5641c4 Binary files /dev/null and b/content/espanol/aventura-react/media/Sharky.png differ diff --git a/content/espanol/aventura-react/media/Tortuga.png b/content/espanol/aventura-react/media/Tortuga.png new file mode 100644 index 0000000000..3b735f0b96 Binary files /dev/null and b/content/espanol/aventura-react/media/Tortuga.png differ diff --git a/content/espanol/aventura-react/media/UsarPlaygroud.png b/content/espanol/aventura-react/media/UsarPlaygroud.png new file mode 100644 index 0000000000..72e673e55f Binary files /dev/null and b/content/espanol/aventura-react/media/UsarPlaygroud.png differ diff --git a/content/espanol/aventura-react/media/Volcan.png b/content/espanol/aventura-react/media/Volcan.png new file mode 100644 index 0000000000..1e2cc30e3b Binary files /dev/null and b/content/espanol/aventura-react/media/Volcan.png differ diff --git a/content/espanol/aventura-react/media/bee_square.png b/content/espanol/aventura-react/media/bee_square.png new file mode 100644 index 0000000000..f1e27f0aae Binary files /dev/null and b/content/espanol/aventura-react/media/bee_square.png differ diff --git a/content/espanol/aventura-react/media/css.png b/content/espanol/aventura-react/media/css.png new file mode 100644 index 0000000000..9e08830834 Binary files /dev/null and b/content/espanol/aventura-react/media/css.png differ diff --git a/content/espanol/aventura-react/media/paso1-carpeta.png b/content/espanol/aventura-react/media/paso1-carpeta.png new file mode 100644 index 0000000000..1c04ca3d33 Binary files /dev/null and b/content/espanol/aventura-react/media/paso1-carpeta.png differ diff --git a/content/espanol/aventura-react/media/paso2-carpeta.png b/content/espanol/aventura-react/media/paso2-carpeta.png new file mode 100644 index 0000000000..1543849cef Binary files /dev/null and b/content/espanol/aventura-react/media/paso2-carpeta.png differ diff --git a/content/espanol/aventura-react/media/paso3-carpeta.png b/content/espanol/aventura-react/media/paso3-carpeta.png new file mode 100644 index 0000000000..9826797051 Binary files /dev/null and b/content/espanol/aventura-react/media/paso3-carpeta.png differ diff --git a/content/espanol/aventura-react/media/paso4-carpeta.png b/content/espanol/aventura-react/media/paso4-carpeta.png new file mode 100644 index 0000000000..0661d837f7 Binary files /dev/null and b/content/espanol/aventura-react/media/paso4-carpeta.png differ diff --git a/content/espanol/aventura-react/media/paso5-carpeta.png b/content/espanol/aventura-react/media/paso5-carpeta.png new file mode 100644 index 0000000000..cc1980aac8 Binary files /dev/null and b/content/espanol/aventura-react/media/paso5-carpeta.png differ diff --git a/content/espanol/aventura-react/media/paso6-carpeta.png b/content/espanol/aventura-react/media/paso6-carpeta.png new file mode 100644 index 0000000000..7867ea06a0 Binary files /dev/null and b/content/espanol/aventura-react/media/paso6-carpeta.png differ diff --git a/content/espanol/aventura-react/media/playas.png b/content/espanol/aventura-react/media/playas.png new file mode 100644 index 0000000000..6643a95315 Binary files /dev/null and b/content/espanol/aventura-react/media/playas.png differ diff --git a/content/espanol/aventura-react/style.md b/content/espanol/aventura-react/style.md new file mode 100644 index 0000000000..5ff858c8ec --- /dev/null +++ b/content/espanol/aventura-react/style.md @@ -0,0 +1,270 @@ +--- +title: "Aplicar Style necesario!" +date: 2019-07-25T13:24:17-07:00 +weight: 3 +draft: false +--- + +**Esto es codigo CSS para la app, copialo y pegado en el archivo** `"style.css"` + + +```css +.App { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 40px; + font-family: "Comic Sans MS", "Poppins", sans-serif; + background-color: white; +} + +.App h1 { + font-size: 2.5rem; + color: #00796b; + margin-bottom: 20px; +} + +.mensaje-final { + margin-top: 30px; + font-size: 1.2rem; + font-weight: bold; + color: #ffffff; + animation: aparecer 1s ease-in-out; +} + + + +/*-----------------------------TORTUGERO---------------------------------------*/ +.Tortugero { + padding: 50px; + background: linear-gradient(135deg, #a2f5a2, #b3e5fc); + border-radius: 20px; + text-align: center; + font-family: "Comic Sans MS", cursive; + color: #084c31; + transition: 0.3s; +} + + +.Tortugero button { + background-color: red; + color: white; + border: none; + border-radius: 20px; + padding: 12px 25px; + cursor: pointer; + font-size: 16px; + margin-top: 10px; + transition: 0.3s; +} + +.Tortugero button:hover { + background-color: #1c86ee; + transform: scale(1.1); +} + +.exito { + font-weight: bold; + color: #3d6088; + margin-top: 10px; +} +/*-----------------------------CIERE TORTUGERO---------------------------------------*/ + +/*-----------------------------VOLCAN---------------------------------------*/ +.volcan { + margin-top: 50px; + text-align: center; + background-color: #ffe5b4; + padding: 30px; + border-radius: 15px; + font-family: "Comic Sans MS", cursive; + color: #3e2f00; +} + +.volcan ul { + list-style: none; + padding: 0; + margin: 0; +} + +.volcan li { + margin: 10px 0; + font-size: 18px; +} + +.volcan button { + margin-left: 10px; + background-color: #ff7043; + color: white; + border: none; + border-radius: 10px; + padding: 6px 12px; + cursor: pointer; + transition: 0.3s; +} + +.volcan button:hover { + background-color: #ff5722; + transform: scale(1.1); +} + +/*-----------------------------PEREZOSOS---------------------------------------*/ +.perezosos-container { + margin-top: 40px; + padding: 40px; + background: rgba(205, 0, 0, 0.623); + border-radius: 12px; + font-family: "Comic Sans MS", cursive; + text-align: center; + color: #fff; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +.instruccion { + margin-bottom: 20px; + font-size: 1rem; +} + +.lista-perezosos { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 15px; +} + +.perezoso-card { + background-color: rgba(255, 255, 255, 0.2); + padding: 15px 25px; + border-radius: 10px; + width: 150px; + transition: transform 0.2s ease, background-color 0.3s; +} + +.perezoso-card:hover { + transform: scale(1.05); + background-color: rgba(255, 255, 255, 0.3); +} + +.perezoso-card button { + background-color: #fefae0; + color: #5c3d2e; + border: none; + border-radius: 8px; + padding: 6px 12px; + cursor: pointer; + margin-top: 10px; + font-weight: bold; +} + +.perezoso-card button:hover { + background-color: #f8de7e; +} + +.rescatado { + background-color: rgba(110, 220, 110, 0.6); + color: #ffffff; + transform: scale(1.05); +} + + +@keyframes aparecer { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + + +/*-----------------------------PLAYAS---------------------------------------*/ +.playas-container { + margin-top: 40px; + padding: 40px; + background: linear-gradient( + 180deg, + rgba(243, 232, 111, 0.7), + rgba(135, 206, 235, 0.5) + ); + color: black; + border-radius: 16px; + text-align: center; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + font-family: "Comic Sans MS", cursive; +} + +.instruccion { + font-size: 1rem; + margin-bottom: 20px; +} + +.botones { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; +} + +.playas-container button { + border-radius: 20px; + padding: 10px 20px; + border: none; + background-color: #00b894; + color: white; + cursor: pointer; + font-size: 1rem; + transition: transform 0.1s ease, background-color 0.2s; +} + +.playas-container button:hover { + background-color: #019874; + transform: scale(1.05); +} + + + +@keyframes aparecer { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} +/*---------------------------------------FIN DE PLAYAS-------------------------*/ + +.finca-container { + text-align: center; + background-color: #e3d5ca; + padding: 20px; + border-radius: 12px; + font-family: "Comic Sans MS", cursive, sans-serif; + max-width: 400px; + margin: 30px auto; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.etapa { + font-size: 1.3rem; + margin: 20px 0; +} + +.btn-siguiente { + padding: 10px 20px; + background-color: #8b5e3c; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.2s; +} + +.btn-siguiente:hover { + background-color: #a47148; +} diff --git a/content/espanol/aventura-react/the-basics.md b/content/espanol/aventura-react/the-basics.md new file mode 100644 index 0000000000..e2fe0eb40c --- /dev/null +++ b/content/espanol/aventura-react/the-basics.md @@ -0,0 +1,118 @@ +--- +title: "Configurar entorno de playcode" +date: 2019-07-25T13:24:17-07:00 +weight: 2 +draft: false +--- + +

    Entra en el link de abajo para construir tú mismo el app de Costa Rica

    + +Crea tu proyecto de React! + +Al darle click al boton entraras en la pagina de playcode + +![alt text height="200px" width="50%"](../media/UsarPlaygroud.png "Playground") + + + +**Le damos en Start Free** + + + +En el archivo `"App.jsx"` **pegamos este codigo!** + +```jsx +import React from 'react'; + +export function App(props) { + return ( + + ); +} +``` + +En el archivo `"indext.jsx"` **pegamos este codigo!** + +```jsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; + +import { App } from './App.jsx' + +ReactDOM.createRoot( + document.querySelector('#root') +).render() + +``` + +En el archivo `"indext.html"` **pegamos este codigo!** + +```jsx + + + + + + + + +
    + + + + + +``` + +**Creamos un archivo llamado** `"style.css"` + +![alt text height="200px" width="50%"](../media/css.png "CSS") + + + +Antes de ver todos los elementos necesarios para crear nuestro proyecto de Costa Rica tenemos que configurar o mas que todo crear una carpeta importante. + +**Le vamos en los 3 puntos a la par de la carpeta main llamada** `"src"` + +![alt text height="600px" width="70%"](../media/paso1-carpeta.png "Paso 1") + +**Luego seguimos los siguientes pasos:** + +`"New", "Directory"` + +![alt text height="600px" width="70%"](../media/paso2-carpeta.png "Paso 2") + +**Ya tenemos la carpeta creada ahora le damos en los 3 puntitos y rename** + +![alt text height="600px" width="70%"](../media/paso3-carpeta.png "Paso 3") + +**Listo tenemos la carpeta de Components creada estamos casi listos!!** + +![alt text height="600px" width="70%"](../media/paso4-carpeta.png "Paso 4") + +**Por ultimo debemos agregar archivos jsx para poder ir construyendo nuestro proyecto** + +Para eso igual le damos en los 3 puntitos pero ahora en la carpeta `"Components"` + +**Importante seleccionar el archivo** `"JSX"` + +![alt text height="600px" width="70%"](../media/paso5-carpeta.png "Paso 5") + +Asi debe de quedar nuestro neuvo archivo llamado: `"Torguero.jsx"` + +```jsx +Tortugero.jsx +``` + +**Isla Tortuguero​​ es una isla que pertenece al país centroamericano de Costa Rica​​ se ubica entre el mar Caribe y laguna homónima, posee una superficie estimada en 2.810 hectáreas.​** + + +![alt text height="600px" width="70%"](../media/paso6-carpeta.png "Paso 6") + + + + + diff --git a/content/espanol/aventura-react/using-playcode.md b/content/espanol/aventura-react/using-playcode.md new file mode 100644 index 0000000000..922fc775a1 --- /dev/null +++ b/content/espanol/aventura-react/using-playcode.md @@ -0,0 +1,24 @@ +--- +title: "Usando Playground " +date: 2019-07-25T13:24:17-07:00 +weight: 1 +draft: false +--- + +Sharky te enseñara a usar react y contruir tu viaje por Costa Rica, Hoy vamos a iniciar una aventura creando una app de Costa Rica con React. +React nos permite crear pantallas usando algo parecido a HTML. + +Foto Sharky con react + +## Usando Playground + +Vamos a utilizar la herramienta playcode para construir nuestro primer proyecto con react, aquí puedes editar código online. + + +Primero debemos saber como funciona playcode o playground puedes crear archivos y carpetas para organizar tu código, es un editor de código que se refrezca automaticamente lo que vayas escribiendo se va a actualizar sin refrezcar, podrás ver tu avance en tiempo real. + + + + + + diff --git a/content/espanol/logic-gates/_index.md b/content/espanol/logic-gates/_index.md new file mode 100644 index 0000000000..c266aea350 --- /dev/null +++ b/content/espanol/logic-gates/_index.md @@ -0,0 +1,37 @@ +--- +title: "Compuertas Lógicas" +description: "Una aventura en un bosque mágico para aprender cómo funciona la lógica digital." +date: 2025-10-20T01:00:18-05:00 +prereq: "Ninguno" +difficulty: "Principiante" +draft: false +--- + +## Introducción + +Bienvenidos al **Bosque Mágico Digital**. +Aquí viven animales muy especiales: la **Rana**, el **Tucán**, el **Perezoso** y el **Monito**. + +Ellos protegen una **esfera mágica** que mantiene el bosque lleno de vida y luz. +Pero algo ha pasado... la esfera se está apagando, y solo podrá encenderse de nuevo si **resolvemos acertijos usando compuertas lógicas**. + +¿Te animás a ayudarlos? + +--- + +Decoracion + + +## ¿Listo para comenzar? + +Haz clic en la primera sección para iniciar la aventura con nuestros amigos del bosque. + +Decoracion + +--- + +## Contenido +
    +Secciones +{{% children /%}} +
    \ No newline at end of file diff --git a/content/espanol/logic-gates/_logic-gates.css b/content/espanol/logic-gates/_logic-gates.css new file mode 100644 index 0000000000..79397072ad --- /dev/null +++ b/content/espanol/logic-gates/_logic-gates.css @@ -0,0 +1,30 @@ +/* Estilos centralizados para Logic Gates */ + +.lg-details { + margin: 20px 0; +} + +.lg-summary { + cursor: pointer; + padding: 12px 20px; + background: #10b981; + color: white; + border-radius: 8px; + font-weight: 600; + display: inline-block; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.2s; +} + +.lg-div { + margin-top: 15px; + padding: 15px; + border-left: 4px solid #10b981; + background-color: #f8f9fa; + border-radius: 4px; +} + +.lg-img { + vertical-align: middle; + margin-left: 10px !important; +} diff --git a/content/espanol/logic-gates/activity-1.md b/content/espanol/logic-gates/activity-1.md new file mode 100644 index 0000000000..061f07083b --- /dev/null +++ b/content/espanol/logic-gates/activity-1.md @@ -0,0 +1,92 @@ +--- +title: "Actividad 1 - La Puerta del Tucán (AND)" +date: 2025-10-20T01:15:00-05:00 +weight: 2 +draft: false +--- + + + +Decoración + +## Introducción + +Al avanzar por el bosque, llegás a una gran puerta de madera. +Un tucán aparece junto a ella y te dice: + +> “Esta puerta solo se abre si se encienden las dos antorchas al mismo tiempo. +> Si solo una está encendida, la puerta no se mueve. +> Aquí usamos lógica AND.” + +Tu misión es probar este comportamiento utilizando el simulador de compuertas lógicas. + +--- + +Decoración + +## ¿Qué es la compuerta AND? + +- Tiene **dos entradas** y **una salida**. +- La salida se enciende (`1`) **solo si ambas entradas están encendidas (`1`)**. +- Si una o las dos entradas están apagadas (`0`), la salida permanece apagada (`0`). + +
    + +Ver tabla de verdad completa + + +
    + +| Entrada A | Entrada B | Salida AND | +|-----------|-----------|------------| +| 0 | 0 | 0 | +| 0 | 1 | 0 | +| 1 | 0 | 0 | +| 1 | 1 | 1 | + +
    +
    + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar los componentes +1. Asegurate de estar en modo **Edit**. +2. Desde la barra lateral izquierda, hacé clic en: + - **Input** ➔ colocá **dos** entradas (A y B). + - **AND Gate** ➔ colocá una compuerta AND. + - **Output** ➔ colocá una salida a la derecha de la compuerta. + +Decoración + +### 2. Conectar los componentes +1. Hacé clic en el círculo de salida de la **entrada A**, luego clic en una de las entradas de la compuerta AND. +2. Repetí lo mismo con la **entrada B**. +3. Desde la salida de la compuerta AND, conectá al círculo de la **salida**. + +### 3. Probar el circuito +- Hacé clic sobre cada entrada para cambiar entre `0` y `1`. +- Probá todas las combinaciones posibles. +- La puerta del Tucán solo se “abre” (salida = 1) cuando: + +--- + +## Simulador + + + +--- + +## ¿Qué aprendiste? + +- AND representa condiciones que deben cumplirse juntas: la salida solo se activa cuando A = 1 y B = 1 al mismo tiempo. +- Si una de las entradas está en 0, la salida también será 0, sin excepciones. + +--- + +## Continuación + +En la siguiente actividad avanzarás por el sendero hasta encontrarte con el Perezoso y descubrir cómo funciona la compuerta OR. diff --git a/content/espanol/logic-gates/activity-2.md b/content/espanol/logic-gates/activity-2.md new file mode 100644 index 0000000000..02acf1780f --- /dev/null +++ b/content/espanol/logic-gates/activity-2.md @@ -0,0 +1,100 @@ +--- +title: "Actividad 2 - La Montaña del Perezoso (OR)" +date: 2025-10-20T01:30:00-05:00 +weight: 3 +draft: false +--- + + + +Decoración + +## Introducción + +Al dejar atrás la puerta del Tucán, el sendero te lleva a una montaña tranquila. +Sobre una rama, un perezoso bosteza y te dice con voz serena: + +> "No hace falta correr... Para llegar a la cima podés usar el sendero **A** o el **B**. +> Si alguno está abierto, llegarás. Y si ambos están abiertos, ¡también! Aquí usamos lógica **OR**." + +Tu misión es comprobar este comportamiento en el simulador y encender el camino hacia la cima. + +--- + +Decoración + +## ¿Qué es la compuerta OR? + +- Tiene **dos entradas** y **una salida**. +- La salida se enciende (`1`) **si al menos una de las entradas está encendida (`1`)**. +- Solo permanece apagada (`0`) cuando **ambas** entradas están apagadas (`0`). + +
    + +Ver tabla de verdad completa + + +
    + +| Entrada A | Entrada B | Salida OR | +|-----------|-----------|-----------| +| 0 | 0 | 0 | +| 0 | 1 | 1 | +| 1 | 0 | 1 | +| 1 | 1 | 1 | + +
    +
    + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar los componentes +1. Asegurate de estar en modo **Edit**. +2. En la barra lateral izquierda, elegí y colocá: + - **Input** ➔ colocá **dos** entradas (A y B). + - **OR Gate** ➔ colocá una compuerta OR entre las entradas y la salida. + - **Output** ➔ colocá una salida a la derecha de la compuerta. + +Decoración + +### 2. Conectar los componentes +1. Conectá la **salida** de la **entrada A** a una de las **entradas** de la compuerta **OR**. +2. Conectá la **salida** de la **entrada B** a la **otra entrada** de la compuerta **OR**. +3. Conectá la **salida** de la compuerta **OR** al **Output**. + +### 3. Probar el circuito +- Hacé clic en cada **Input** para alternar `0` ↔ `1`. +- Probá las cuatro combinaciones (00, 01, 10, 11). +- **Objetivo / Condición de victoria:** la salida debe ser `1` si **A = 1** **o** **B = 1** (o ambos). + +> "¿Ves? Con solo un camino abierto, ya podés llegar arriba". + +--- + +## Consejos rápidos + +- Si la salida se queda en `0` aun con A = 1 o B = 1, revisá que ambas entradas estén conectadas a la compuerta OR. +- Verificá que usaste **OR Gate** y no **AND Gate** por error. + +--- + +## Simulador + + + +--- + +## ¿Qué aprendiste? + +- OR representa **opciones**: basta con **uno** de los caminos para activar la salida. +- La única forma de que la salida esté en `0` es que **A = 0** y **B = 0** al mismo tiempo. + +--- + +## Continuación + +En la próxima actividad conocerás la laguna del reflejo con la **Rana** y descubrirás cómo funciona la compuerta **NOT**. diff --git a/content/espanol/logic-gates/activity-3.md b/content/espanol/logic-gates/activity-3.md new file mode 100644 index 0000000000..ba53d79b91 --- /dev/null +++ b/content/espanol/logic-gates/activity-3.md @@ -0,0 +1,111 @@ +--- +title: "Actividad 3 - El Reto de la Rana (NOT)" +date: 2025-10-20T01:40:00-05:00 +weight: 4 +draft: false +--- + + + +Decoración + +## Introducción + +Siguiendo el sendero, llegás a una laguna brillante. +Una **rana verde** salta sobre una hoja y te saluda: + +> "¡Bienvenidos a la **laguna del reflejo**! +> Aquí todo funciona **al revés**: si algo está encendido, se apaga; +> si está apagado, se enciende. Esto es la lógica **NOT**." + +Tu misión es construir un circuito que **invierta** la señal de entrada. + +--- + +Decoración + +## ¿Qué es la compuerta NOT? + +- Tiene **una entrada** y **una salida**. +- La salida es **siempre lo contrario** de la entrada. + +
    + +Ver tabla de verdad completa + + +
    + +| Entrada A | Salida NOT | +|-----------|------------| +| 0 | 1 | +| 1 | 0 | + +
    +
    + +> A esta compuerta también se le llama **inversor**. + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar los componentes +1. Asegurate de estar en modo **Edit**. +2. En la barra lateral izquierda, elegí y colocá: + - **Input** ➔ una entrada (A). + - **NOT Gate** ➔ una compuerta NOT entre la entrada y la salida. + - **Output** ➔ una salida a la derecha de la compuerta. + +Decoración + +### 2. Conectar los componentes +1. Conectá la **salida** del **Input A** a la **entrada** de la **NOT**. +2. Conectá la **salida** de la **NOT** al **Output**. + +### 3. Probar el circuito +- Hacé clic en el **Input A** para alternar `0` ↔ `1`. +- Observá el **Output**: debe mostrar **lo opuesto** a A. + +**Condición de victoria:** +- Si `A = 0` ➔ **Salida = 1** +- Si `A = 1` ➔ **Salida = 0** + +> La rana aplaude: +> "¡Muy bien! Para avanzar a veces hay que **pensar al revés**." + +--- + +## Consejos rápidos + +- Si la salida **no** cambia al contrario de la entrada, revisá que el cable pase **a través** de la compuerta **NOT**. +- Confirmá que elegiste **NOT Gate** y no otra compuerta. +- Si la salida es **igual** a la entrada, probablemente la NOT no está conectada o falta. + +--- + +## Desafío (opcional) + +- **Doble NOT:** agregá **dos** compuertas NOT en serie. ¿Qué pasa con la salida? + +--- + +## Simulador + + + +--- + +## ¿Qué aprendiste? + +- La compuerta **NOT** invierte el valor lógico: `0 → 1` y `1 → 0`. +- Es útil para crear **comportamientos inversos** (alarma por ausencia de señal, luces automáticas, etc.). +- Dos NOT seguidas se **anulan** entre sí. + +--- + +## Continuación + +¡Excelente! En la siguiente actividad, el **Monito** te mostrará cómo **combinar** AND, OR y NOT para resolver retos más complejos y devolver la energía a la **Esfera del Bosque**. \ No newline at end of file diff --git a/content/espanol/logic-gates/activity-4.md b/content/espanol/logic-gates/activity-4.md new file mode 100644 index 0000000000..09105ee04d --- /dev/null +++ b/content/espanol/logic-gates/activity-4.md @@ -0,0 +1,128 @@ +--- +title: "Actividad 4 - La misión del Monito (Combinación de compuertas)" +date: 2025-10-20T01:55:00-05:00 +weight: 5 +draft: false +--- + + + +Decoración + +## Introducción + +Desde la copa de un árbol, el **Monito** te saluda entusiasmado: + +> "¡Llegaste muy lejos! Ya dominás **AND**, **OR** y **NOT**. +> Ahora toca **combinarlas** para devolverle la energía a la **Esfera del Bosque**." + +En esta actividad construirás un circuito que usa **todas** las compuertas para resolver un reto. + +--- + +Decoración + +## Objetivo + +Construir y comprobar el circuito lógico: + +- La **Esfera** se enciende si: + - **B** está encendido, **o** + - **A** está encendido **y** **C** está apagado. + +Este circuito usa **NOT**, **AND** y **OR**. + +--- + +## Componentes necesarios + +- 3 **Input**: A, B, C +- 1 **NOT Gate** +- 1 **AND Gate** +- 1 **OR Gate** +- 1 **Output** + +Decoración + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar los componentes +1. Asegurate de estar en modo **Edit**. +2. En la barra lateral izquierda, elegí y colocá: + - Colocá **A**, **B**, **C** (Inputs). + - Colocá **NOT**, **AND**, **OR**. + - Colocá un **Output** a la derecha. + +### 2. Conectar los componentes +1. Conectá **C ➔ NOT** (esto crea **NOT C**). +2. Conectá **A** y **NOT C** a la **AND** (esto crea **A AND NOT C**). +3. Conectá **(A AND NOT C)** y **B** a la **OR**. +4. Conectá la **salida de OR ➔ Output**. + +--- + +## Pruebas guiadas + +Probá estas combinaciones y verificá el **Output**: + +1. **A = 1, B = 0, C = 0** ➔ `NOT C = 1` ➔ `A AND NOT C = 1` ➔ `Salida = 1` +2. **A = 1, B = 0, C = 1** ➔ `NOT C = 0` ➔ `A AND NOT C = 0` ➔ `Salida = 0` +3. **A = 0, B = 1, C = 1** ➔ `B = 1` ➔ `Salida = 1` +4. **A = 0, B = 0, C = 0** ➔ ambos caminos dan `0` ➔ `Salida = 0` + +Si estas cuatro se cumplen, ¡la Esfera se enciende correctamente! + +--- + +## Tabla de verdad + +
    + +Ver tabla de verdad completa + + +
    + +| A | B | C | NOT C | A AND NOT C | Salida = (A AND NOT C) OR B | +|---|---|---|-------|-------------|------------------------------| +| 0 | 0 | 0 | 1 | 0 | 0 | +| 0 | 0 | 1 | 0 | 0 | 0 | +| 0 | 1 | 0 | 1 | 0 | 1 | +| 0 | 1 | 1 | 0 | 0 | 1 | +| 1 | 0 | 0 | 1 | 1 | 1 | +| 1 | 0 | 1 | 0 | 0 | 0 | +| 1 | 1 | 0 | 1 | 1 | 1 | +| 1 | 1 | 1 | 0 | 0 | 1 | + +
    +
    + +--- + +## Simulador + + + +--- + +## Errores comunes y cómo resolverlos + +- **La salida siempre es 0:** revisá que la **OR** reciba **dos señales**: `B` **y** `A AND NOT C`. + +--- + +## ¿Qué aprendiste? + +- Las compuertas pueden componerse para crear decisiones más complejas que las de una sola compuerta. +- NOT permite invertir una señal; AND permite combinar condiciones simultáneas; OR permite unir caminos alternativos. +- La salida final depende de cómo se conectan las compuertas y del orden en que se procesan las señales. + +--- + +## Continuación + +En la siguiente misión volverás a encontrarte con los personajes del bosque para resolver retos más grandes utilizando las mismas tres compuertas. diff --git a/content/espanol/logic-gates/activity-5.md b/content/espanol/logic-gates/activity-5.md new file mode 100644 index 0000000000..634b850046 --- /dev/null +++ b/content/espanol/logic-gates/activity-5.md @@ -0,0 +1,86 @@ +--- +title: "Actividad 5 - La Puerta Invertida del Tucán (AND + NOT)" +date: 2025-10-20T02:10:00-05:00 +weight: 6 +draft: false +--- + + + +Decoración + +## Introducción + +Frente a la puerta de piedra, el **Tucán** te guiña un ojo: + +> "¿Recordás mi puerta **AND**? Hoy la vamos a **invertir** con ayuda de **NOT**. +> La puerta se abrirá **a menos** que ambas antorchas estén encendidas." + +--- + +Decoración + +## Objetivo lógico + +Construir una salida que sea verdadera **salvo** cuando A = 1 **y** B = 1: + +
    + +Ver tabla de verdad completa + + +
    + +| A | B | A AND B | Salida = NOT(A AND B) | +|---|---|---------|------------------------| +| 0 | 0 | 0 | 1 | +| 0 | 1 | 0 | 1 | +| 1 | 0 | 0 | 1 | +| 1 | 1 | 1 | 0 | + +
    +
    + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar los componentes +1. Asegurate de estar en modo **Edit**. +- **Inputs**: A, B +- **AND Gate** +- **NOT Gate** +- **Output** + +Decoración + +### 2. Conectar +1. A y B ➔ **AND** +2. Salida de **AND** ➔ **NOT** +3. Salida de **NOT** ➔ **Output** + +### 3. Probar +- Recorre 00, 01, 10, 11. +- La puerta se abre en todos los casos **excepto** 11. + +**Condición de victoria:** la salida solo es 0 cuando A = 1 y B = 1. + +--- + +## Consejos rápidos + +- Si siempre da 0, probablemente conectaste el **Output** a la **AND** en vez de a la **NOT**. + +--- + +## Simulador + + + +--- + +## ¿Qué aprendiste? + +- Cómo **negar** una condición compuesta: primero **AND**, luego **NOT**. \ No newline at end of file diff --git a/content/espanol/logic-gates/activity-6.md b/content/espanol/logic-gates/activity-6.md new file mode 100644 index 0000000000..c19913a93d --- /dev/null +++ b/content/espanol/logic-gates/activity-6.md @@ -0,0 +1,86 @@ +--- +title: "Actividad 6 - La Cima Silenciosa del Perezoso (OR + NOT)" +date: 2025-10-20T02:25:00-05:00 +weight: 7 +draft: false +--- + + + +Decoración + +## Introducción + +El **Perezoso** te espera en la montaña: + +> "Quiero silencio total: la salida solo se enciende cuando **ningún** sendero tiene luz. +> Usemos **OR** para detectar si hay luz, y **NOT** para invertir." + +--- + +Decoración + +## Objetivo lógico + +La salida debe ser 1 solo si **A = 0 y B = 0**: + +
    + +Ver tabla de verdad completa + + +
    + +| A | B | A OR B | Salida = NOT(A OR B) | +|---|---|--------|----------------------| +| 0 | 0 | 0 | 1 | +| 0 | 1 | 1 | 0 | +| 1 | 0 | 1 | 0 | +| 1 | 1 | 1 | 0 | + +
    +
    + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar +- **Inputs**: A, B +- **OR Gate** +- **NOT Gate** +- **Output** + +Decoración + +### 2. Conectar +1. A y B ➔ **OR** +2. Salida de **OR** ➔ **NOT** +3. Salida de **NOT** ➔ **Output** + +### 3. Probar +- Probá 00, 01, 10, 11. +- Solo con 00 la salida debe ser 1. + +**Condición de victoria:** si hay **alguna** luz en A o B, la salida es 0. + +--- + +## Consejos rápidos + +- Si la salida queda siempre en 1, puede faltar el cable de **OR** hacia **NOT**. +- Nombrá el intermedio `OR_AB`. + +--- + +## Simulador + + + +--- + +## ¿Qué aprendiste? + +- Cómo expresar “**ninguna** de las entradas activas” con **OR** seguido de **NOT**. \ No newline at end of file diff --git a/content/espanol/logic-gates/activity-7.md b/content/espanol/logic-gates/activity-7.md new file mode 100644 index 0000000000..d1972e1e28 --- /dev/null +++ b/content/espanol/logic-gates/activity-7.md @@ -0,0 +1,90 @@ +--- +title: "Actividad 7 - El Puente de la Rana (Diferentes con AND/OR/NOT)" +date: 2025-10-20T02:40:00-05:00 +weight: 8 +draft: false +--- + + + +Decoración + +## Introducción + +La **Rana** cuida un puente con una regla precisa: + +> "Solo cruza quien trae **exactamente una** antorcha encendida. +> Si no trae ninguna o trae las dos, el puente se cierra." + +--- + +Decoración + +## Objetivo lógico + +Construí una salida que valga 1 cuando A y B sean **distintos**. +Se arma **solo** con AND, OR y NOT: + +
    + +Ver tabla de verdad completa + + +
    + +| A | B | A OR B | A AND B | NOT(A AND B) | Salida | +|---|---|--------|---------|---------------|--------| +| 0 | 0 | 0 | 0 | 1 | 0 | +| 0 | 1 | 1 | 0 | 1 | 1 | +| 1 | 0 | 1 | 0 | 1 | 1 | +| 1 | 1 | 1 | 1 | 0 | 0 | + +
    +
    + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar +- **Inputs**: A, B +- **OR Gate** +- **AND Gate** (x2) +- **NOT Gate** +- **Output** + +Decoración + +### 2. Conectar +1. A y B ➔ **OR**: `OR_AB` +2. A y B ➔ **AND1**: `AND_AB` +3. `AND_AB` ➔ **NOT**: `NOT_AND_AB` +4. `OR_AB` y `NOT_AND_AB` ➔ **AND2** +5. **AND2** ➔ **Output** + +### 3. Probar +- Verificá 00, 01, 10, 11. +- La salida debe ser 1 solo en 01 y 10. + +**Condición de victoria:** salida = 1 cuando A ≠ B. + +--- + +## Consejos rápidos + +- Si te da 1 en 11, te falta la negación de `AND_AB`. +- Separá visualmente las ramas `OR_AB` y `NOT_AND_AB` para evitar cruces. + +--- + +## Simulador + + + +--- + +## ¿Qué aprendiste? + +- A construir el criterio “**son distintos**” usando **AND/OR/NOT**. \ No newline at end of file diff --git a/content/espanol/logic-gates/activity-8.md b/content/espanol/logic-gates/activity-8.md new file mode 100644 index 0000000000..e7938f0c59 --- /dev/null +++ b/content/espanol/logic-gates/activity-8.md @@ -0,0 +1,91 @@ +--- +title: "Actividad 8 - La Cámara de los Espejos del Monito (Igualdad con AND/OR/NOT)" +date: 2025-10-20T02:55:00-05:00 +weight: 9 +draft: false +--- + + + +Decoración + +## Introducción + +En la sala de reflejos, el **Monito** te explica: + +> "Para activar la cámara, las señales deben **coincidir**. +> Si A y B son iguales, la puerta se abre." + +--- + +Decoración + +## Objetivo lógico + +Armar una salida que valga 1 cuando **A = B**, usando **AND/OR/NOT**: + +
    + +Ver tabla de verdad completa + + +
    + +| A | B | NOT A | NOT B | A AND B | (NOT A AND NOT B) | Salida | +|---|---|-------|-------|---------|--------------------|--------| +| 0 | 0 | 1 | 1 | 0 | 1 | 1 | +| 0 | 1 | 1 | 0 | 0 | 0 | 0 | +| 1 | 0 | 0 | 1 | 0 | 0 | 0 | +| 1 | 1 | 0 | 0 | 1 | 0 | 1 | + +
    +
    + +--- + +Decoración + +## Instrucciones en el simulador + +### 1. Colocar +- **Inputs**: A, B +- **NOT Gate** (x2) +- **AND Gate** (x2) +- **OR Gate** +- **Output** + +Decoración + +### 2. Conectar +1. A ➔ **NOT**: `NOT_A` +2. B ➔ **NOT**: `NOT_B` +3. A y B ➔ **AND1** (rama “ambos 1”) +4. `NOT_A` y `NOT_B` ➔ **AND2** (rama “ambos 0”) +5. **AND1** y **AND2** ➔ **OR** +6. **OR** ➔ **Output** + +### 3. Probar +- Recorre 00, 01, 10, 11. +- La salida debe ser 1 en 00 y 11. + +**Condición de victoria:** salida = 1 si y solo si A y B coinciden. + +--- + +## Consejos rápidos + +- Si la salida es 1 en 01 o 10, revisá los cables de `NOT_A`/`NOT_B` hacia **AND₂**. +- Mantené simétricas las dos ramas para leer el circuito rápido. + +--- + +## Simulador + + + +--- + +## ¿Qué aprendiste? + +- A construir el criterio “**son iguales**” usando solo **AND/OR/NOT**. +- Cómo usar **ramas paralelas** para cubrir casos complementarios. \ No newline at end of file diff --git a/content/espanol/logic-gates/answer-key.md b/content/espanol/logic-gates/answer-key.md new file mode 100644 index 0000000000..b2e5d859d5 --- /dev/null +++ b/content/espanol/logic-gates/answer-key.md @@ -0,0 +1,80 @@ +--- +title: "Taller de Comp. Lógicas: Respuestas del Workshop de Logic Gates" +date: 2025-12-04T10:00:00-06:00 +draft: false +hidden: true +weight: 300 +--- + + + +{{% notice tip %}} +Nota: Para este taller, asegúrate de usar un navegador compatible y tener habilitado JavaScript para el simulador interactivo. + +Las actividades pueden incluir seleccionar opciones o componentes en el simulador. +{{% /notice %}} + +### Actividad 1: Compuerta AND +Respuesta esperada: La salida se activa (1) solo si ambas entradas están activas (1). + +Tip: Prueba todas las combinaciones posibles de las dos entradas. Solo cuando ambas estén en 1, la salida será 1. + +Solución + +### Actividad 2: Compuerta OR +Respuesta esperada: La salida se activa (1) si al menos una de las entradas está activa (1). + +Tip: Si una o ambas entradas están en 1, la salida será 1. Solo será 0 si ambas entradas están en 0. + +Solución + +### Actividad 3: Compuerta NOT +Respuesta esperada: La salida es siempre lo opuesto a la entrada. + +Tip: Si la entrada es 0, la salida será 1. Si la entrada es 1, la salida será 0. + +Solución + +### Actividad 4: Combinación de compuertas (AND, OR, NOT) +Respuesta esperada: La salida se activa si B está en 1, o si A está en 1 y C está en 0 (usa NOT para invertir C). + +Tip: Construye el circuito combinando las compuertas según la condición lógica dada. Prueba los casos sugeridos en la actividad. + +Solución + +### Actividad 5: AND + NOT (Puerta invertida) +Respuesta esperada: La salida es 1 salvo cuando ambas entradas están en 1 (usa AND y luego NOT). + +Tip: La compuerta NOT invierte el resultado de la AND. Solo si ambas entradas son 1, la salida será 0. + +Solución + +### Actividad 6: OR + NOT (Salida silenciosa) +Respuesta esperada: La salida es 1 solo si ambas entradas están en 0 (usa OR y luego NOT). + +Tip: La compuerta NOT invierte el resultado de la OR. Si alguna entrada es 1, la salida será 0. + +Solución + +### Actividad 7: Diferencia exclusiva (XOR con AND/OR/NOT) +Respuesta esperada: La salida es 1 solo si las entradas son diferentes (usa combinación de AND, OR y NOT). + +Tip: Prueba todas las combinaciones. La salida será 1 solo si una entrada es 1 y la otra es 0. + +Solución + +### Actividad 8: Igualdad (XNOR con AND/OR/NOT) +Respuesta esperada: La salida es 1 solo si ambas entradas son iguales (usa combinación de AND, OR y NOT). + +Tip: La salida será 1 si ambas entradas son 0 o ambas son 1. + +Solución + +### Actividad extra: Usando el simulador +Tip: Explora el simulador para crear tus propios circuitos y probar diferentes combinaciones de compuertas lógicas. Observa cómo cambian las salidas según las entradas. + +Solución + +--- + +Si tienes dudas, revisa la tabla de verdad de cada compuerta y experimenta en el simulador. ¡La lógica digital se aprende mejor probando! \ No newline at end of file diff --git a/content/espanol/logic-gates/media/LogicAND.png b/content/espanol/logic-gates/media/LogicAND.png new file mode 100644 index 0000000000..49700d1b15 Binary files /dev/null and b/content/espanol/logic-gates/media/LogicAND.png differ diff --git a/content/espanol/logic-gates/media/LogicClock.png b/content/espanol/logic-gates/media/LogicClock.png new file mode 100644 index 0000000000..945cf91835 Binary files /dev/null and b/content/espanol/logic-gates/media/LogicClock.png differ diff --git a/content/espanol/logic-gates/media/LogicInput.png b/content/espanol/logic-gates/media/LogicInput.png new file mode 100644 index 0000000000..ba56fe24b8 Binary files /dev/null and b/content/espanol/logic-gates/media/LogicInput.png differ diff --git a/content/espanol/logic-gates/media/LogicNOT.png b/content/espanol/logic-gates/media/LogicNOT.png new file mode 100644 index 0000000000..873cef7b69 Binary files /dev/null and b/content/espanol/logic-gates/media/LogicNOT.png differ diff --git a/content/espanol/logic-gates/media/LogicOR.png b/content/espanol/logic-gates/media/LogicOR.png new file mode 100644 index 0000000000..4e92a354f3 Binary files /dev/null and b/content/espanol/logic-gates/media/LogicOR.png differ diff --git a/content/espanol/logic-gates/media/LogicOutput.png b/content/espanol/logic-gates/media/LogicOutput.png new file mode 100644 index 0000000000..e89e66b640 Binary files /dev/null and b/content/espanol/logic-gates/media/LogicOutput.png differ diff --git a/content/espanol/logic-gates/media/Pattern.webp b/content/espanol/logic-gates/media/Pattern.webp new file mode 100644 index 0000000000..7813846de7 Binary files /dev/null and b/content/espanol/logic-gates/media/Pattern.webp differ diff --git a/content/espanol/logic-gates/media/Sphere.webp b/content/espanol/logic-gates/media/Sphere.webp new file mode 100644 index 0000000000..de6fe41ff3 Binary files /dev/null and b/content/espanol/logic-gates/media/Sphere.webp differ diff --git a/content/espanol/logic-gates/media/actividad_1.png b/content/espanol/logic-gates/media/actividad_1.png new file mode 100644 index 0000000000..d80d77de02 Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_1.png differ diff --git a/content/espanol/logic-gates/media/actividad_2.png b/content/espanol/logic-gates/media/actividad_2.png new file mode 100644 index 0000000000..075eff049b Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_2.png differ diff --git a/content/espanol/logic-gates/media/actividad_3.png b/content/espanol/logic-gates/media/actividad_3.png new file mode 100644 index 0000000000..02eea29c60 Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_3.png differ diff --git a/content/espanol/logic-gates/media/actividad_4.png b/content/espanol/logic-gates/media/actividad_4.png new file mode 100644 index 0000000000..1fe8e15d0f Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_4.png differ diff --git a/content/espanol/logic-gates/media/actividad_5.png b/content/espanol/logic-gates/media/actividad_5.png new file mode 100644 index 0000000000..c6084a732b Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_5.png differ diff --git a/content/espanol/logic-gates/media/actividad_6.png b/content/espanol/logic-gates/media/actividad_6.png new file mode 100644 index 0000000000..e06e7b892c Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_6.png differ diff --git a/content/espanol/logic-gates/media/actividad_7.png b/content/espanol/logic-gates/media/actividad_7.png new file mode 100644 index 0000000000..af6002951b Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_7.png differ diff --git a/content/espanol/logic-gates/media/actividad_8.png b/content/espanol/logic-gates/media/actividad_8.png new file mode 100644 index 0000000000..d157d30d76 Binary files /dev/null and b/content/espanol/logic-gates/media/actividad_8.png differ diff --git a/content/espanol/logic-gates/media/answer_1.png b/content/espanol/logic-gates/media/answer_1.png new file mode 100644 index 0000000000..642e1528e2 Binary files /dev/null and b/content/espanol/logic-gates/media/answer_1.png differ diff --git a/content/espanol/logic-gates/media/answer_2.png b/content/espanol/logic-gates/media/answer_2.png new file mode 100644 index 0000000000..9818c09f5d Binary files /dev/null and b/content/espanol/logic-gates/media/answer_2.png differ diff --git a/content/espanol/logic-gates/media/answer_3.png b/content/espanol/logic-gates/media/answer_3.png new file mode 100644 index 0000000000..8eb31de03e Binary files /dev/null and b/content/espanol/logic-gates/media/answer_3.png differ diff --git a/content/espanol/logic-gates/media/answer_4.png b/content/espanol/logic-gates/media/answer_4.png new file mode 100644 index 0000000000..2a4418af48 Binary files /dev/null and b/content/espanol/logic-gates/media/answer_4.png differ diff --git a/content/espanol/logic-gates/media/answer_5.png b/content/espanol/logic-gates/media/answer_5.png new file mode 100644 index 0000000000..b1046e78a3 Binary files /dev/null and b/content/espanol/logic-gates/media/answer_5.png differ diff --git a/content/espanol/logic-gates/media/answer_6.png b/content/espanol/logic-gates/media/answer_6.png new file mode 100644 index 0000000000..e4f9dbf949 Binary files /dev/null and b/content/espanol/logic-gates/media/answer_6.png differ diff --git a/content/espanol/logic-gates/media/answer_7.png b/content/espanol/logic-gates/media/answer_7.png new file mode 100644 index 0000000000..aed61db793 Binary files /dev/null and b/content/espanol/logic-gates/media/answer_7.png differ diff --git a/content/espanol/logic-gates/media/answer_8.png b/content/espanol/logic-gates/media/answer_8.png new file mode 100644 index 0000000000..f8a05b8f98 Binary files /dev/null and b/content/espanol/logic-gates/media/answer_8.png differ diff --git a/content/espanol/logic-gates/media/answer_us.png b/content/espanol/logic-gates/media/answer_us.png new file mode 100644 index 0000000000..830a8362df Binary files /dev/null and b/content/espanol/logic-gates/media/answer_us.png differ diff --git a/content/espanol/logic-gates/media/menu.png b/content/espanol/logic-gates/media/menu.png new file mode 100644 index 0000000000..d36f8a79dd Binary files /dev/null and b/content/espanol/logic-gates/media/menu.png differ diff --git a/content/espanol/logic-gates/media/monito.jpg b/content/espanol/logic-gates/media/monito.jpg new file mode 100644 index 0000000000..31fcb832eb Binary files /dev/null and b/content/espanol/logic-gates/media/monito.jpg differ diff --git a/content/espanol/logic-gates/media/paisaje_bosque.webp b/content/espanol/logic-gates/media/paisaje_bosque.webp new file mode 100644 index 0000000000..5e793d3d8e Binary files /dev/null and b/content/espanol/logic-gates/media/paisaje_bosque.webp differ diff --git a/content/espanol/logic-gates/media/paisaje_camino.webp b/content/espanol/logic-gates/media/paisaje_camino.webp new file mode 100644 index 0000000000..2553dbe913 Binary files /dev/null and b/content/espanol/logic-gates/media/paisaje_camino.webp differ diff --git a/content/espanol/logic-gates/media/paisaje_lago.webp b/content/espanol/logic-gates/media/paisaje_lago.webp new file mode 100644 index 0000000000..3ad9db5ee0 Binary files /dev/null and b/content/espanol/logic-gates/media/paisaje_lago.webp differ diff --git a/content/espanol/logic-gates/media/paisaje_puerta.webp b/content/espanol/logic-gates/media/paisaje_puerta.webp new file mode 100644 index 0000000000..e1471edaee Binary files /dev/null and b/content/espanol/logic-gates/media/paisaje_puerta.webp differ diff --git a/content/espanol/logic-gates/media/perezoso.webp b/content/espanol/logic-gates/media/perezoso.webp new file mode 100644 index 0000000000..cf0105e136 Binary files /dev/null and b/content/espanol/logic-gates/media/perezoso.webp differ diff --git a/content/espanol/logic-gates/media/ranita.jpg b/content/espanol/logic-gates/media/ranita.jpg new file mode 100644 index 0000000000..3d25c9aac4 Binary files /dev/null and b/content/espanol/logic-gates/media/ranita.jpg differ diff --git a/content/espanol/logic-gates/media/tucan.png b/content/espanol/logic-gates/media/tucan.png new file mode 100644 index 0000000000..5ecf8c4b2f Binary files /dev/null and b/content/espanol/logic-gates/media/tucan.png differ diff --git a/content/espanol/logic-gates/media/using-simulator.png b/content/espanol/logic-gates/media/using-simulator.png new file mode 100644 index 0000000000..dcb9383b23 Binary files /dev/null and b/content/espanol/logic-gates/media/using-simulator.png differ diff --git a/content/espanol/logic-gates/using-simulator.md b/content/espanol/logic-gates/using-simulator.md new file mode 100644 index 0000000000..fd02c38aa7 --- /dev/null +++ b/content/espanol/logic-gates/using-simulator.md @@ -0,0 +1,92 @@ +--- +title: "Usando el Simulador" +date: 2025-10-20T01:00:18-05:00 +weight: 1 +draft: false +--- + + + +## Introducción + +Has llegado al Bosque Mágico de Costa Rica. En este lugar vive una esfera que protege a los animales y a la naturaleza, pero su energía está desapareciendo. +Para restaurarla, primero debemos aprender a usar el simulador de circuitos lógicos. + +--- + +Decoracion + +## Uso básico del simulador + +Antes de aprender compuertas lógicas, necesitamos entender cómo colocar componentes y cómo conectarlos correctamente. + +### 1. Interfaz principal + +En la parte izquierda se encuentra una barra con todos los componentes disponibles, como: + +- Entradas (Input) +Foto de una entrada + +- Salidas (Output) +Foto de una salida + +- Reloj (CLK) +Foto de un reloj + +- Compuertas lógicas (AND, OR, NOT, etc.) +
    + Foto de un compuerta lógica AND + Foto de un compuerta lógica OR + Foto de un compuerta lógica NOT +
    + +En la parte superior hay botones importantes: +- **Edit**: modo para colocar componentes. +- **Move**: mover componentes ya colocados. +- **Delete**: eliminar componentes. +- **Save / Load**: guardar o cargar circuitos. +Foto de menu del simulador + + +El área en blanco es donde construirás el circuito. + +--- + +## Primera misión: conectar una entrada con una salida + +### Pasos + +1. Asegúrate de que esté seleccionado el modo **Edit**. +2. En la barra izquierda, haz clic en **Input**. +3. Haz clic en cualquier parte del espacio en blanco para colocarlo. +4. Luego selecciona **Output** y haz clic nuevamente para colocarlo a la derecha o cerca de la entrada. +5. Para conectarlos: + - Haz clic en el pequeño círculo de la entrada. + - Luego haz clic en el círculo de la salida. + - Se dibujará un cable automáticamente. +6. Haz clic sobre el símbolo de la entrada para activar o desactivar su valor: + - `0` = apagado + - `1` = encendido + +Si la entrada está en `1` y la salida muestra `1`, el circuito está funcionando. + +--- + +## ¿Qué aprendiste? + +- Cómo colocar componentes (clic en el componente, luego clic en el espacio en blanco). +- Cómo conectarlos usando los círculos de conexión. +- Cómo activar señales de entrada. +- Este circuito no usa compuertas lógicas aún, solo conexión directa. + +--- + +## Simulador + + + +--- + +## Continuación + +Cuando estés listo, en la próxima actividad conocerás al Tucán y aprenderás a usar la compuerta lógica **AND**. diff --git a/themes/docdock/i18n/de.toml b/themes/docdock/i18n/de.toml index fdbfb7b6b1..f447e57429 100644 --- a/themes/docdock/i18n/de.toml +++ b/themes/docdock/i18n/de.toml @@ -79,3 +79,7 @@ other = "Hilfe" [hint] other = "Hinweis" + +# menu.html +[workshop-dashboard] +other = "Werkstatt-Dashboard" diff --git a/themes/docdock/i18n/en.toml b/themes/docdock/i18n/en.toml index e7a8477597..fc443e573d 100644 --- a/themes/docdock/i18n/en.toml +++ b/themes/docdock/i18n/en.toml @@ -79,3 +79,10 @@ other = "Help" [hint] other = "Hint" + +[type] +other = "Workshop type:" + +# menu.html +[workshop-dashboard] +other = "Workshop Dashboard" diff --git a/themes/docdock/i18n/es.toml b/themes/docdock/i18n/es.toml index 4b62cd2d63..d235a330df 100644 --- a/themes/docdock/i18n/es.toml +++ b/themes/docdock/i18n/es.toml @@ -79,3 +79,7 @@ other = "Ayuda" [hint] other = "Sugerencia" + +# menu.html +[workshop-dashboard] +other = "Panel de taller" diff --git a/themes/docdock/i18n/fr.toml b/themes/docdock/i18n/fr.toml index 64005f4e84..5e0f33ef55 100644 --- a/themes/docdock/i18n/fr.toml +++ b/themes/docdock/i18n/fr.toml @@ -79,3 +79,7 @@ other = "Aide" [hint] other = "Indice" + +# menu.html +[workshop-dashboard] +other = "Tableau de bord de l’atelier" diff --git a/themes/docdock/i18n/kr.toml b/themes/docdock/i18n/kr.toml index 01c0dde0c7..802249da85 100644 --- a/themes/docdock/i18n/kr.toml +++ b/themes/docdock/i18n/kr.toml @@ -79,3 +79,7 @@ other = "도움" [hint] other = "힌트" + +# menu.html +[workshop-dashboard] +other = "워크숍 대시보드" diff --git a/themes/docdock/i18n/ky.toml b/themes/docdock/i18n/ky.toml index 02b1ebe775..80533ae8fe 100644 --- a/themes/docdock/i18n/ky.toml +++ b/themes/docdock/i18n/ky.toml @@ -79,3 +79,7 @@ other = "Жардам" [hint] other = "Көрсөткүч" + +# menu.html +[workshop-dashboard] +other = "Устакана тактасы" diff --git a/themes/docdock/i18n/pt-br.toml b/themes/docdock/i18n/pt-br.toml index ba987af6ed..69046a1448 100644 --- a/themes/docdock/i18n/pt-br.toml +++ b/themes/docdock/i18n/pt-br.toml @@ -79,3 +79,7 @@ other = "Ajuda" [hint] other = "Sugestão" + +# menu.html +[workshop-dashboard] +other = "Painel do minicursos" diff --git a/themes/docdock/i18n/zh-hans.toml b/themes/docdock/i18n/zh-hans.toml index 413b53a8a0..64d1801478 100644 --- a/themes/docdock/i18n/zh-hans.toml +++ b/themes/docdock/i18n/zh-hans.toml @@ -79,3 +79,7 @@ other = "帮助" [hint] other = "暗示" + +# menu.html +[workshop-dashboard] +other = "研讨会仪表板" diff --git a/themes/docdock/i18n/zh-hant.toml b/themes/docdock/i18n/zh-hant.toml index 3419cc50c2..33bd397b02 100644 --- a/themes/docdock/i18n/zh-hant.toml +++ b/themes/docdock/i18n/zh-hant.toml @@ -79,3 +79,7 @@ other = "幫助" [hint] other = "暗示" + +# menu.html +[workshop-dashboard] +other = "研討會儀表板" diff --git a/themes/docdock/layouts/partials/flex/body-beforecontent.html b/themes/docdock/layouts/partials/flex/body-beforecontent.html index 2db29a7fe8..9158d0496d 100644 --- a/themes/docdock/layouts/partials/flex/body-beforecontent.html +++ b/themes/docdock/layouts/partials/flex/body-beforecontent.html @@ -1,7 +1,20 @@
    {{ partial "header.html" . }} + + {{if not .IsHome}} +

    {{.Title}}

    +
    + {{- partial "language-selector.html" . }} +
    + {{end}} + {{if .IsHome}} +
    + {{- partial "language-selector.html" . }} +
    + {{end}}
    +
    -
    - {{- partial "language-selector.html" . }} -
    {{ i18n "navigation" }}  @@ -51,7 +61,6 @@
    {{- end}} --> - {{if not .IsHome}}

    {{.Title}}

    {{end}} {{ if isset .Params "difficulty" }} {{- partial "flex/metadata.html" . }} @@ -59,4 +68,4 @@ {{ end }} - \ No newline at end of file + diff --git a/themes/docdock/layouts/partials/flex/metadata.html b/themes/docdock/layouts/partials/flex/metadata.html index 9922f0fcc4..ea1983e53a 100644 --- a/themes/docdock/layouts/partials/flex/metadata.html +++ b/themes/docdock/layouts/partials/flex/metadata.html @@ -19,5 +19,12 @@ {{ i18n "download" }}
    {{ end }} + {{ with .Param "style" }} +
    + {{ i18n "style" }} + {{ i18n "style" }} +
    + {{ end }} + \ No newline at end of file diff --git a/themes/docdock/layouts/partials/language-selector.html b/themes/docdock/layouts/partials/language-selector.html index db5a6a2b8b..a4a4c55c51 100644 --- a/themes/docdock/layouts/partials/language-selector.html +++ b/themes/docdock/layouts/partials/language-selector.html @@ -1,18 +1,41 @@ -{{- if and hugo.IsMultilingual (not .Site.Params.DisableLanguageSwitchingButton)}} - -{{- end }} \ No newline at end of file +{{if not .IsHome}} + {{- if and hugo.IsMultilingual (not .Site.Params.DisableLanguageSwitchingButton)}} + + {{- end }} +{{end}} + +{{if .IsHome}} + {{- if and hugo.IsMultilingual (not .Site.Params.DisableLanguageSwitchingButton)}} + + {{- end }} +{{end}} \ No newline at end of file diff --git a/themes/docdock/layouts/partials/menu.html b/themes/docdock/layouts/partials/menu.html index 0f9beb8869..ce77fc41a9 100644 --- a/themes/docdock/layouts/partials/menu.html +++ b/themes/docdock/layouts/partials/menu.html @@ -1,86 +1,109 @@ {{- $currentNode := . }} {{- $showvisitedlinks := .Site.Params.showVisitedLinks -}} +{{/* Add back to workshops dashboard navigation if not on home page */}} +{{- if not .IsHome -}} +
  • +
    + + + + {{ i18n "workshop-dashboard" }} +
    +
    +
    • +{{- end -}} + {{- if eq .Site.Params.orderSectionsBy "title"}} {{- range .Site.Home.Sections.ByTitle}} {{- if (or (eq $currentNode .Site.Home) (.IsAncestor $currentNode))}} {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}} {{- end}} {{- end}} -{{- else}} - {{- range .Site.Home.Sections.ByWeight}} - {{- if (or (eq $currentNode .Site.Home) (.IsAncestor $currentNode))}} - {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}} + {{- else}} + {{- range .Site.Home.Sections.ByWeight}} + {{- if (or (eq $currentNode .Site.Home) (.IsAncestor $currentNode))}} + {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}} + {{- end}} {{- end}} {{- end}} -{{- end}} -{{- define "section-tree-nav" }} -{{- $showvisitedlinks := .showvisitedlinks }} -{{- $currentNode := .currentnode }} - {{- with .sect}} - {{- if and .IsSection (or (not .Params.hidden) $.showhidden)}} - {{- $numberOfPages := (add (len .Pages) (len .Sections)) }} - {{- safeHTML .Params.head}} -
  • -
    - {{safeHTML .Params.Pre}}{{.Title}}{{safeHTML .Params.Post}} - - {{- if ne $numberOfPages 0 }} - {{- if or (.IsAncestor $currentNode) (.Params.alwaysopen) }} - - {{- else -}} - - {{- end}} - {{- end}} + {{- if ne $numberOfPages 0 }} haschildren{{end}}"> +
    + {{- with .Params.icon}} + + {{- else }} + + {{- end}} + + {{safeHTML .Params.Pre}}{{.Title}}{{safeHTML .Params.Post}} + - {{- if $showvisitedlinks}}{{end}} -
    - {{- if ne $numberOfPages 0 }} -
      - {{- .Scratch.Set "pages" .Pages }} - {{- if .Sections}} - {{- .Scratch.Set "pages" (.Pages | union .Sections) }} - {{- end}} - {{- $pages := (.Scratch.Get "pages") }} + {{- if ne $numberOfPages 0 }} {{- if or (.IsAncestor $currentNode) (.Params.alwaysopen) }} + + {{- else -}} + + {{- end}} + {{- end}} + {{- if $showvisitedlinks}} + + {{end}} - {{- if eq .Site.Params.orderPagesBy "title"}} - {{- range $pages.ByTitle }} - {{- if and .Params.hidden (not $.showhidden) }} - {{- else}} - {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }} - {{- end}} - {{- end}} +
    +
      + {{- .Scratch.Set "pages" .Pages }} + {{- if .Sections}} + {{- .Scratch.Set "pages" (.Pages | union .Sections) }} + {{- end}} + {{- $pages := (.Scratch.Get "pages") }} + {{- if eq .Site.Params.orderPagesBy "title"}} + {{- range $pages.ByTitle }} + {{- if and .Params.hidden (not $.showhidden) }} {{- else}} - {{- range $pages.ByWeight }} - {{- if and .Params.hidden (not $.showhidden) }} - {{- else}} - {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }} - {{- end}} - {{- end}} + {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }} + {{- end}} + {{- end}} + {{- else}} + {{- range $pages.ByWeight }} + {{- if and .Params.hidden (not $.showhidden) }} + {{- else}} + {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }} {{- end}} -
    {{- end}} -
    • - {{- else}} - {{- if not .Params.Hidden }} -
  • - -
    • - {{- end}} - {{- end}} - {{- end}} + " +> + + +{{- end}} +{{- end}} +{{- end}} {{- end}} diff --git a/themes/docdock/layouts/partials/next-prev-button.html b/themes/docdock/layouts/partials/next-prev-button.html index 9d88899670..4608b15170 100644 --- a/themes/docdock/layouts/partials/next-prev-button.html +++ b/themes/docdock/layouts/partials/next-prev-button.html @@ -9,6 +9,7 @@
    + {{if .isNext}}
    diff --git a/themes/docdock/layouts/shortcodes/layout4.html b/themes/docdock/layouts/shortcodes/layout4.html new file mode 100644 index 0000000000..8a37128bb2 --- /dev/null +++ b/themes/docdock/layouts/shortcodes/layout4.html @@ -0,0 +1,56 @@ + + +
    +
    + +
    +
    +
    +
    +

    + {{.Get "title"}} +

    +
    +
    +

    + {{.Inner | markdownify}} +

    +
    +
    + +
    + +
    \ No newline at end of file diff --git a/themes/docdock/static/css/chunk.css b/themes/docdock/static/css/chunk.css index b054ef211e..74f8a37f34 100644 --- a/themes/docdock/static/css/chunk.css +++ b/themes/docdock/static/css/chunk.css @@ -370,6 +370,7 @@ body { padding: 0; font-family: Lato, sans-serif; font-weight: normal; + background-color: #f1f6f1; } .jgBGVn span { display: block; diff --git a/themes/docdock/static/css/data-style.css b/themes/docdock/static/css/data-style.css index 390e8253e5..55518114d3 100644 --- a/themes/docdock/static/css/data-style.css +++ b/themes/docdock/static/css/data-style.css @@ -31,6 +31,7 @@ font-family: Lato, sans-serif; color: rgb(112, 112, 112); font-size: 16px; + background-color: #ffffff; } .emolVn { float: left; @@ -94,9 +95,7 @@ text-decoration-style: unset; } .iFdsJw { - background-image: /*savepage-url=./static/media/2018_0814_Pattern_Adjusted.57f3c140.svg*/ url( - - ); + background-image: /*savepage-url=./static/media/2018_0814_Pattern_Adjusted.57f3c140.svg*/ url(); font-family: Lato, sans-serif; font-weight: bolder; box-shadow: rgba(245, 107, 107, 0.1) 0px 4px 12px; diff --git a/themes/docdock/static/css/nucleus.css b/themes/docdock/static/css/nucleus.css index ed2c0a38a4..4587f19a9f 100644 --- a/themes/docdock/static/css/nucleus.css +++ b/themes/docdock/static/css/nucleus.css @@ -1,25 +1,35 @@ -*, *::before, *::after { +*, +*::before, +*::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; +} @-webkit-viewport { - width: device-width; } + width: device-width; +} @-moz-viewport { - width: device-width; } + width: device-width; +} @-ms-viewport { - width: device-width; } + width: device-width; +} @-o-viewport { - width: device-width; } + width: device-width; +} @viewport { - width: device-width; } + width: device-width; +} html { font-size: 100%; -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; } + -webkit-text-size-adjust: 100%; +} body { - margin: 0; } + margin: 0; +} article, aside, @@ -33,73 +43,91 @@ main, nav, section, summary { - display: block; } + display: block; +} audio, canvas, progress, video { display: inline-block; - vertical-align: baseline; } + vertical-align: baseline; +} audio:not([controls]) { display: none; - height: 0; } + height: 0; +} [hidden], template { - display: none; } + display: none; +} a { background: transparent; - text-decoration: none; } + text-decoration: none; +} a:active, a:hover { - outline: 0; } + outline: 0; +} abbr[title] { - border-bottom: 1px dotted; } + border-bottom: 1px dotted; +} b, strong { - font-weight: bold; } + font-weight: bold; +} dfn { - font-style: italic; } + font-style: italic; +} mark { - background: #FFFF27; - color: #333; } + background: #ffff27; + color: #333; +} sub, sup { font-size: 0.8rem; line-height: 0; position: relative; - vertical-align: baseline; } + vertical-align: baseline; +} sup { - top: -0.5em; } + top: -0.5em; +} sub { - bottom: -0.25em; } + bottom: -0.25em; +} img { border: 0; - max-width: 100%; } + max-width: 100%; +} svg:not(:root) { - overflow: hidden; } + overflow: hidden; +} figure { - margin: 1em 40px; } + margin: 1em 40px; +} hr { - height: 0; } + height: 0; +} pre { - overflow: auto; } + overflow: auto; +} button, input, @@ -108,90 +136,120 @@ select, textarea { color: inherit; font: inherit; - margin: 0; } + margin: 0; +} button { - overflow: visible; } + overflow: visible; +} button, select { - text-transform: none; } + text-transform: none; +} button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; - cursor: pointer; } + cursor: pointer; +} button[disabled], html input[disabled] { - cursor: default; } + cursor: default; +} button::-moz-focus-inner, input::-moz-focus-inner { border: 0; - padding: 0; } + padding: 0; +} input { - line-height: normal; } + line-height: normal; +} input[type="checkbox"], input[type="radio"] { - padding: 0; } + padding: 0; +} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; } + height: auto; +} input[type="search"] { - -webkit-appearance: textfield; } + -webkit-appearance: textfield; +} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + -webkit-appearance: none; +} legend { border: 0; - padding: 0; } + padding: 0; +} textarea { - overflow: auto; } + overflow: auto; +} optgroup { - font-weight: bold; } + font-weight: bold; +} table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; - width: 100%; } + width: 100%; +} -tr, td, th { - vertical-align: middle; } +tr, +td, +th { + vertical-align: middle; +} -th, td { - padding: 0.425rem 0; } +th, +td { + padding: 0.425rem 0; +} th { - text-align: left; } + text-align: left; +} .container { width: 75em; margin: 0 auto; - padding: 0; } - @media only all and (min-width: 60em) and (max-width: 74.938em) { - .container { - width: 60em; } } - @media only all and (min-width: 48em) and (max-width: 59.938em) { - .container { - width: 48em; } } - @media only all and (min-width: 30.063em) and (max-width: 47.938em) { - .container { - width: 30em; } } - @media only all and (max-width: 30em) { - .container { - width: 100%; } } + padding: 0; +} +@media only all and (min-width: 60em) and (max-width: 74.938em) { + .container { + width: 60em; + } +} +@media only all and (min-width: 48em) and (max-width: 59.938em) { + .container { + width: 48em; + } +} +@media only all and (min-width: 30.063em) and (max-width: 47.938em) { + .container { + width: 30em; + } +} +@media only all and (max-width: 30em) { + .container { + width: 100%; + } +} .grid { display: -webkit-box; @@ -206,12 +264,15 @@ th { flex-flow: row; list-style: none; margin: 0; - padding: 0; } - @media only all and (max-width: 47.938em) { - .grid { - -webkit-flex-flow: row wrap; - -moz-flex-flow: row wrap; - flex-flow: row wrap; } } + padding: 0; +} +@media only all and (max-width: 47.938em) { + .grid { + -webkit-flex-flow: row wrap; + -moz-flex-flow: row wrap; + flex-flow: row wrap; + } +} .block { -webkit-box-flex: 1; @@ -222,20 +283,24 @@ th { -ms-flex: 1; flex: 1; min-width: 0; - min-height: 0; } - @media only all and (max-width: 47.938em) { - .block { - -webkit-box-flex: 0; - -moz-box-flex: 0; - box-flex: 0; - -webkit-flex: 0 100%; - -moz-flex: 0 100%; - -ms-flex: 0 100%; - flex: 0 100%; } } + min-height: 0; +} +@media only all and (max-width: 47.938em) { + .block { + -webkit-box-flex: 0; + -moz-box-flex: 0; + box-flex: 0; + -webkit-flex: 0 100%; + -moz-flex: 0 100%; + -ms-flex: 0 100%; + flex: 0 100%; + } +} .content { margin: 0.625rem; - padding: 0.938rem; } + padding: 0.938rem; +} @media only all and (max-width: 47.938em) { body [class*="size-"] { @@ -245,7 +310,9 @@ th { -webkit-flex: 0 100%; -moz-flex: 0 100%; -ms-flex: 0 100%; - flex: 0 100%; } } + flex: 0 100%; + } +} .size-1-2 { -webkit-box-flex: 0; @@ -254,7 +321,8 @@ th { -webkit-flex: 0 50%; -moz-flex: 0 50%; -ms-flex: 0 50%; - flex: 0 50%; } + flex: 0 50%; +} .size-1-3 { -webkit-box-flex: 0; @@ -263,7 +331,8 @@ th { -webkit-flex: 0 33.33333%; -moz-flex: 0 33.33333%; -ms-flex: 0 33.33333%; - flex: 0 33.33333%; } + flex: 0 33.33333%; +} .size-1-4 { -webkit-box-flex: 0; @@ -272,7 +341,8 @@ th { -webkit-flex: 0 25%; -moz-flex: 0 25%; -ms-flex: 0 25%; - flex: 0 25%; } + flex: 0 25%; +} .size-1-5 { -webkit-box-flex: 0; @@ -281,7 +351,8 @@ th { -webkit-flex: 0 20%; -moz-flex: 0 20%; -ms-flex: 0 20%; - flex: 0 20%; } + flex: 0 20%; +} .size-1-6 { -webkit-box-flex: 0; @@ -290,7 +361,8 @@ th { -webkit-flex: 0 16.66667%; -moz-flex: 0 16.66667%; -ms-flex: 0 16.66667%; - flex: 0 16.66667%; } + flex: 0 16.66667%; +} .size-1-7 { -webkit-box-flex: 0; @@ -299,7 +371,8 @@ th { -webkit-flex: 0 14.28571%; -moz-flex: 0 14.28571%; -ms-flex: 0 14.28571%; - flex: 0 14.28571%; } + flex: 0 14.28571%; +} .size-1-8 { -webkit-box-flex: 0; @@ -308,7 +381,8 @@ th { -webkit-flex: 0 12.5%; -moz-flex: 0 12.5%; -ms-flex: 0 12.5%; - flex: 0 12.5%; } + flex: 0 12.5%; +} .size-1-9 { -webkit-box-flex: 0; @@ -317,7 +391,8 @@ th { -webkit-flex: 0 11.11111%; -moz-flex: 0 11.11111%; -ms-flex: 0 11.11111%; - flex: 0 11.11111%; } + flex: 0 11.11111%; +} .size-1-10 { -webkit-box-flex: 0; @@ -326,7 +401,8 @@ th { -webkit-flex: 0 10%; -moz-flex: 0 10%; -ms-flex: 0 10%; - flex: 0 10%; } + flex: 0 10%; +} .size-1-11 { -webkit-box-flex: 0; @@ -335,7 +411,8 @@ th { -webkit-flex: 0 9.09091%; -moz-flex: 0 9.09091%; -ms-flex: 0 9.09091%; - flex: 0 9.09091%; } + flex: 0 9.09091%; +} .size-1-12 { -webkit-box-flex: 0; @@ -344,7 +421,8 @@ th { -webkit-flex: 0 8.33333%; -moz-flex: 0 8.33333%; -ms-flex: 0 8.33333%; - flex: 0 8.33333%; } + flex: 0 8.33333%; +} @media only all and (min-width: 48em) and (max-width: 59.938em) { .size-tablet-1-2 { @@ -354,7 +432,8 @@ th { -webkit-flex: 0 50%; -moz-flex: 0 50%; -ms-flex: 0 50%; - flex: 0 50%; } + flex: 0 50%; + } .size-tablet-1-3 { -webkit-box-flex: 0; @@ -363,7 +442,8 @@ th { -webkit-flex: 0 33.33333%; -moz-flex: 0 33.33333%; -ms-flex: 0 33.33333%; - flex: 0 33.33333%; } + flex: 0 33.33333%; + } .size-tablet-1-4 { -webkit-box-flex: 0; @@ -372,7 +452,8 @@ th { -webkit-flex: 0 25%; -moz-flex: 0 25%; -ms-flex: 0 25%; - flex: 0 25%; } + flex: 0 25%; + } .size-tablet-1-5 { -webkit-box-flex: 0; @@ -381,7 +462,8 @@ th { -webkit-flex: 0 20%; -moz-flex: 0 20%; -ms-flex: 0 20%; - flex: 0 20%; } + flex: 0 20%; + } .size-tablet-1-6 { -webkit-box-flex: 0; @@ -390,7 +472,8 @@ th { -webkit-flex: 0 16.66667%; -moz-flex: 0 16.66667%; -ms-flex: 0 16.66667%; - flex: 0 16.66667%; } + flex: 0 16.66667%; + } .size-tablet-1-7 { -webkit-box-flex: 0; @@ -399,7 +482,8 @@ th { -webkit-flex: 0 14.28571%; -moz-flex: 0 14.28571%; -ms-flex: 0 14.28571%; - flex: 0 14.28571%; } + flex: 0 14.28571%; + } .size-tablet-1-8 { -webkit-box-flex: 0; @@ -408,7 +492,8 @@ th { -webkit-flex: 0 12.5%; -moz-flex: 0 12.5%; -ms-flex: 0 12.5%; - flex: 0 12.5%; } + flex: 0 12.5%; + } .size-tablet-1-9 { -webkit-box-flex: 0; @@ -417,7 +502,8 @@ th { -webkit-flex: 0 11.11111%; -moz-flex: 0 11.11111%; -ms-flex: 0 11.11111%; - flex: 0 11.11111%; } + flex: 0 11.11111%; + } .size-tablet-1-10 { -webkit-box-flex: 0; @@ -426,7 +512,8 @@ th { -webkit-flex: 0 10%; -moz-flex: 0 10%; -ms-flex: 0 10%; - flex: 0 10%; } + flex: 0 10%; + } .size-tablet-1-11 { -webkit-box-flex: 0; @@ -435,7 +522,8 @@ th { -webkit-flex: 0 9.09091%; -moz-flex: 0 9.09091%; -ms-flex: 0 9.09091%; - flex: 0 9.09091%; } + flex: 0 9.09091%; + } .size-tablet-1-12 { -webkit-box-flex: 0; @@ -444,7 +532,9 @@ th { -webkit-flex: 0 8.33333%; -moz-flex: 0 8.33333%; -ms-flex: 0 8.33333%; - flex: 0 8.33333%; } } + flex: 0 8.33333%; + } +} @media only all and (max-width: 47.938em) { @supports not (flex-wrap: wrap) { .grid { @@ -455,7 +545,8 @@ th { -webkit-flex-wrap: inherit; -moz-flex-wrap: inherit; -ms-flex-wrap: inherit; - flex-wrap: inherit; } + flex-wrap: inherit; + } .block { display: block; @@ -465,146 +556,228 @@ th { -webkit-flex: inherit; -moz-flex: inherit; -ms-flex: inherit; - flex: inherit; } } } + flex: inherit; + } + } +} .first-block { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; - order: -1; } + order: -1; +} .last-block { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; - order: 1; } + order: 1; +} .fixed-blocks { -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; - flex-flow: row wrap; } + flex-flow: row wrap; +} +.fixed-blocks .block { + -webkit-box-flex: inherit; + -moz-box-flex: inherit; + box-flex: inherit; + -webkit-flex: inherit; + -moz-flex: inherit; + -ms-flex: inherit; + flex: inherit; + width: 25%; +} +@media only all and (min-width: 60em) and (max-width: 74.938em) { + .fixed-blocks .block { + width: 33.33333%; + } +} +@media only all and (min-width: 48em) and (max-width: 59.938em) { .fixed-blocks .block { - -webkit-box-flex: inherit; - -moz-box-flex: inherit; - box-flex: inherit; - -webkit-flex: inherit; - -moz-flex: inherit; - -ms-flex: inherit; - flex: inherit; - width: 25%; } - @media only all and (min-width: 60em) and (max-width: 74.938em) { - .fixed-blocks .block { - width: 33.33333%; } } - @media only all and (min-width: 48em) and (max-width: 59.938em) { - .fixed-blocks .block { - width: 50%; } } - @media only all and (max-width: 47.938em) { - .fixed-blocks .block { - width: 100%; } } + width: 50%; + } +} +@media only all and (max-width: 47.938em) { + .fixed-blocks .block { + width: 100%; + } +} body { font-size: 1.05rem; - line-height: 1.7; } - -h1, h2, h3, h4, h5, h6 { + line-height: 1.7; +} + +h1, +h2, +h3, +h4, +h5, +h6 { margin: 0.85rem 0 1.7rem 0; - text-rendering: optimizeLegibility; } + text-rendering: optimizeLegibility; +} h1 { - font-size: 3.25rem; } + font-size: 3.25rem; +} h2 { - font-size: 2.55rem; } + font-size: 2.55rem; +} h3 { - font-size: 2.15rem; } + font-size: 2.15rem; +} h4 { - font-size: 1.8rem; } + font-size: 1.8rem; +} h5 { - font-size: 1.4rem; } + font-size: 1.4rem; +} h6 { - font-size: 0.9rem; } + font-size: 0.9rem; +} p { - margin: 1.7rem 0; } + margin: 1.7rem 0; +} -ul, ol { +ul, +ol { margin-top: 1.7rem; - margin-bottom: 1.7rem; } - ul ul, ul ol, ol ul, ol ol { - margin-top: 0; - margin-bottom: 0; } + margin-bottom: 1.7rem; +} +ul ul, +ul ol, +ol ul, +ol ol { + margin-top: 0; + margin-bottom: 0; +} blockquote { margin: 1.7rem 0; - padding-left: 0.85rem; } + padding-left: 0.85rem; +} cite { display: block; - font-size: 0.925rem; } - cite:before { - content: "\2014 \0020"; } + font-size: 0.925rem; +} +cite:before { + content: "\2014 \0020"; +} pre { margin: 1.7rem 0; - padding: 0.938rem; } + padding: 0.938rem; +} code { - vertical-align: bottom; } + vertical-align: bottom; +} small { - font-size: 0.925rem; } + font-size: 0.925rem; +} hr { border-left: none; border-right: none; border-top: none; - margin: 1.7rem 0; } + margin: 1.7rem 0; +} fieldset { border: 0; padding: 0.938rem; - margin: 0 0 1.7rem 0; } + margin: 0 0 1.7rem 0; +} input, label, select { - display: block; } + display: block; +} label { - margin-bottom: 0.425rem; } - label.required:after { - content: "*"; } - label abbr { - display: none; } - -textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] { + margin-bottom: 0.425rem; +} +label.required:after { + content: "*"; +} +label abbr { + display: none; +} + +textarea, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="search"], +input[type="tel"], +input[type="text"], +input[type="url"], +input[type="color"], +input[type="date"], +input[type="datetime"], +input[type="datetime-local"], +input[type="month"], +input[type="time"], +input[type="week"], +select[multiple="multiple"] { -webkit-transition: border-color; -moz-transition: border-color; transition: border-color; border-radius: 0.1875rem; margin-bottom: 0.85rem; padding: 0.425rem 0.425rem; - width: 100%; } - textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - outline: none; } + width: 100%; +} +textarea:focus, +input[type="email"]:focus, +input[type="number"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="text"]:focus, +input[type="url"]:focus, +input[type="color"]:focus, +input[type="date"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +select[multiple="multiple"]:focus { + outline: none; +} textarea { - resize: vertical; } + resize: vertical; +} -input[type="checkbox"], input[type="radio"] { +input[type="checkbox"], +input[type="radio"] { display: inline; - margin-right: 0.425rem; } + margin-right: 0.425rem; +} input[type="file"] { - width: 100%; } + width: 100%; +} select { width: auto; max-width: 100%; - margin-bottom: 1.7rem; } + margin-bottom: 1.7rem; +} button, input[type="submit"] { @@ -612,6 +785,7 @@ input[type="submit"] { user-select: none; vertical-align: middle; white-space: nowrap; - border: inherit; } + border: inherit; +} /*# sourceMappingURL=nucleus.css.map */ diff --git a/themes/docdock/static/js/docdock.js b/themes/docdock/static/js/docdock.js index f0322628e5..d8cc2bdbe5 100644 --- a/themes/docdock/static/js/docdock.js +++ b/themes/docdock/static/js/docdock.js @@ -1,212 +1,230 @@ // Get Parameters from some url var getUrlParameter = function getUrlParameter(sPageURL) { - var url = sPageURL.split('?'); - var obj = {}; - if (url.length == 2) { - var sURLVariables = url[1].split('&'), - sParameterName, - i; - for (i = 0; i < sURLVariables.length; i++) { - sParameterName = sURLVariables[i].split('='); - obj[sParameterName[0]] = sParameterName[1]; - } - return obj; - } else { - return undefined; + var url = sPageURL.split("?"); + var obj = {}; + if (url.length == 2) { + var sURLVariables = url[1].split("&"), + sParameterName, + i; + for (i = 0; i < sURLVariables.length; i++) { + sParameterName = sURLVariables[i].split("="); + obj[sParameterName[0]] = sParameterName[1]; } + return obj; + } else { + return undefined; + } }; jQuery(document).ready(function () { - - // Execute actions on images generated from Markdown pages - var images = $("article img").not(".inline"); - // Wrap image inside a featherlight (to get a full size view in a popup) - images.wrap(function () { - var image = $(this); - if (!image.parent("a").length) { - return ""; - } - }); - - // Change styles, depending on parameters set to the image - images.each(function (index) { - var image = $(this); - var o = getUrlParameter(image[0].src); - if (typeof o !== "undefined") { - var h = o["height"]; - var w = o["width"]; - var c = o["classes"]; - image.css({ - width: function () { - if (typeof w !== "undefined") { - return w; - } - }, - height: function () { - if (typeof h !== "undefined") { - return h; - } - } - }); - if (typeof c !== "undefined") { - var classes = c.split(','); - $.each(classes, function(i) { - image.addClass(classes[i]); - }); - } - } - }); - - // Add link button for every - var text, clip = new Clipboard('.anchor'); - $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function (index, html) { - var element = $(this); - var url = document.location.origin + document.location.pathname; - var link = url + "#" + element[0].id; - return " " + - "" + - ""; - }); - - $(".anchor").on('mouseleave', function (e) { - $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w'); - }); - - clip.on('success', function (e) { - e.clearSelection(); - $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s'); - }); - + // Execute actions on images generated from Markdown pages + var images = $("article img").not(".inline"); + // Wrap image inside a featherlight (to get a full size view in a popup) + images.wrap(function () { + var image = $(this); + if (!image.parent("a").length) { + return ""; + } + }); + + // Change styles, depending on parameters set to the image + images.each(function (index) { + var image = $(this); + var o = getUrlParameter(image[0].src); + if (typeof o !== "undefined") { + var h = o["height"]; + var w = o["width"]; + var c = o["classes"]; + image.css({ + width: function () { + if (typeof w !== "undefined") { + return w; + } + }, + height: function () { + if (typeof h !== "undefined") { + return h; + } + }, + }); + if (typeof c !== "undefined") { + var classes = c.split(","); + $.each(classes, function (i) { + image.addClass(classes[i]); + }); + } + } + }); + + // Add link button for every + var text, + clip = new Clipboard(".anchor"); + $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function (index, html) { + var element = $(this); + var url = document.location.origin + document.location.pathname; + var link = url + "#" + element[0].id; + return ( + " " + + "" + + "" + ); + }); + + $(".anchor").on("mouseleave", function (e) { + $(this) + .attr("aria-label", null) + .removeClass("tooltipped tooltipped-s tooltipped-w"); + }); + + clip.on("success", function (e) { + e.clearSelection(); + $(e.trigger) + .attr("aria-label", "Link copied to clipboard!") + .addClass("tooltipped tooltipped-s"); + }); }); - - function fallbackMessage(action) { - var actionMsg = ''; - var actionKey = (action === 'cut' ? 'X' : 'C'); + var actionMsg = ""; + var actionKey = action === "cut" ? "X" : "C"; + + if (/iPhone|iPad/i.test(navigator.userAgent)) { + actionMsg = "No support :("; + } else if (/Mac/i.test(navigator.userAgent)) { + actionMsg = "Press ⌘-" + actionKey + " to " + action; + } else { + actionMsg = "Press Ctrl-" + actionKey + " to " + action; + } + + return actionMsg; +} - if (/iPhone|iPad/i.test(navigator.userAgent)) { - actionMsg = 'No support :('; - } - else if (/Mac/i.test(navigator.userAgent)) { - actionMsg = 'Press ⌘-' + actionKey + ' to ' + action; - } - else { - actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action; +jQuery(document).ready(function () { + baseurl = baseurl.endsWith("/") ? baseurl : baseurl + "/"; + + jQuery("#sidebar .category-icon").on("click", function () { + $(this).toggleClass("fa-angle-up fa-angle-down"); + $(this).parent().parent().children("ul").toggle(); + return false; + }); + + jQuery("[data-clear-history-toggle]").on("click", function () { + sessionStorage.clear(); + location.reload(); + return false; + }); + + var ajax; + jQuery("[data-search-input]").on("input", function () { + var input = jQuery(this), + value = input.val(), + items = jQuery("[data-nav-id]"); + items.removeClass("search-match"); + if (!value.length) { + $("ul.topics").removeClass("searched"); + items.css("display", "block"); + sessionStorage.removeItem("search-value"); + $(".highlightable").unhighlight({ element: "mark" }); + return; } - return actionMsg; -} - -jQuery(document).ready(function() { + sessionStorage.setItem("search-value", value); + $(".highlightable") + .unhighlight({ element: "mark" }) + .highlight(value, { element: "mark" }); - baseurl = baseurl.endsWith('/')?baseurl:baseurl+'/'; + if (ajax && ajax.abort) ajax.abort(); - jQuery('#sidebar .category-icon').on('click', function() { - $( this ).toggleClass("fa-angle-down fa-angle-right") ; - $( this ).parent().parent().children('ul').toggle() ; - return false; + jQuery("[data-search-clear]").on("click", function () { + jQuery("[data-search-input]").val("").trigger("input"); + sessionStorage.removeItem("search-input"); + $(".highlightable").unhighlight({ element: "mark" }); }); + }); + $.expr[":"].contains = $.expr.createPseudo(function (arg) { + return function (elem) { + return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; + }; + }); + + if (sessionStorage.getItem("search-value")) { + var searchValue = sessionStorage.getItem("search-value"); + sessionStorage.removeItem("search-value"); + var searchedElem = $("article") + .find(":contains(" + searchValue + ")") + .get(0); + searchedElem && searchedElem.scrollIntoView(); + $(".highlightable").highlight(searchValue, { element: "mark" }); + } + + // clipboard + var clipInit = false; + $("code").each(function () { + var code = $(this), + text = code.text(); + + if (text.length > 5) { + if (!clipInit) { + var text, + clip = new Clipboard(".copy-to-clipboard", { + text: function (trigger) { + text = $(trigger).prev("code").text(); + return text.replace(/^\$\s/gm, ""); + }, + }); + + var inPre; + clip.on("success", function (e) { + e.clearSelection(); + inPre = $(e.trigger).parent().prop("tagName") == "PRE"; + $(e.trigger) + .attr("aria-label", "Copied to clipboard!") + .addClass("tooltipped tooltipped-" + (inPre ? "w" : "s")); + }); - jQuery('[data-clear-history-toggle]').on('click', function() { - sessionStorage.clear(); - location.reload(); - return false; - }); - - var ajax; - jQuery('[data-search-input]').on('input', function() { - var input = jQuery(this), - value = input.val(), - items = jQuery('[data-nav-id]'); - items.removeClass('search-match'); - if (!value.length) { - $('ul.topics').removeClass('searched'); - items.css('display', 'block'); - sessionStorage.removeItem('search-value'); - $(".highlightable").unhighlight({ element: 'mark' }) - return; - } - - sessionStorage.setItem('search-value', value); - $(".highlightable").unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' }); - - if (ajax && ajax.abort) ajax.abort(); - - jQuery('[data-search-clear]').on('click', function() { - jQuery('[data-search-input]').val('').trigger('input'); - sessionStorage.removeItem('search-input'); - $(".highlightable").unhighlight({ element: 'mark' }) + clip.on("error", function (e) { + inPre = $(e.trigger).parent().prop("tagName") == "PRE"; + $(e.trigger) + .attr("aria-label", fallbackMessage(e.action)) + .addClass("tooltipped tooltipped-" + (inPre ? "w" : "s")); + $(document).one("copy", function () { + $(e.trigger) + .attr("aria-label", "Copied to clipboard!") + .addClass("tooltipped tooltipped-" + (inPre ? "w" : "s")); + }); }); - }); - $.expr[":"].contains = $.expr.createPseudo(function(arg) { - return function( elem ) { - return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; - }; - }); + clipInit = true; + } - if (sessionStorage.getItem('search-value')) { - var searchValue = sessionStorage.getItem('search-value') - sessionStorage.removeItem('search-value'); - var searchedElem = $('article').find(':contains(' + searchValue + ')').get(0); - searchedElem && searchedElem.scrollIntoView(); - $(".highlightable").highlight(searchValue, { element: 'mark' }); + code.after( + '' + ); + code.next(".copy-to-clipboard").on("mouseleave", function () { + $(this) + .attr("aria-label", null) + .removeClass("tooltipped tooltipped-s tooltipped-w"); + }); } + }); - // clipboard - var clipInit = false; - $('code').each(function() { - var code = $(this), - text = code.text(); - - if (text.length > 5) { - if (!clipInit) { - var text, clip = new Clipboard('.copy-to-clipboard', { - text: function(trigger) { - text = $(trigger).prev('code').text(); - return text.replace(/^\$\s/gm, ''); - } - }); - - var inPre; - clip.on('success', function(e) { - e.clearSelection(); - inPre = $(e.trigger).parent().prop('tagName') == 'PRE'; - $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's')); - }); - - clip.on('error', function(e) { - inPre = $(e.trigger).parent().prop('tagName') == 'PRE'; - $(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's')); - $(document).one('copy', function(){ - $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's')); - }); - }); - - clipInit = true; - } - - code.after(''); - code.next('.copy-to-clipboard').on('mouseleave', function() { - $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w'); - }); - } + // allow keyboard control for prev/next links + jQuery(function () { + jQuery(".nav-prev").click(function () { + location.href = jQuery(this).attr("href"); }); - - // allow keyboard control for prev/next links - jQuery(function() { - jQuery('.nav-prev').click(function(){ - location.href = jQuery(this).attr('href'); - }); - jQuery('.nav-next').click(function() { - location.href = jQuery(this).attr('href'); - }); + jQuery(".nav-next").click(function () { + location.href = jQuery(this).attr("href"); }); - - // Commented out to prevent the left/right arrow keys from moving to the left/right pages - /*jQuery(document).keydown(function(e) { + }); + + // Commented out to prevent the left/right arrow keys from moving to the left/right pages + /*jQuery(document).keydown(function(e) { // prev links - left arrow key if(e.which == '37') { jQuery('.nav.nav-prev').click(); @@ -218,96 +236,105 @@ jQuery(document).ready(function() { } });*/ - $('#top-bar a:not(:has(img)):not(.btn)').addClass('highlight'); - $('article a:not(:has(img)):not(.btn)').addClass('highlight'); + $("#top-bar a:not(:has(img)):not(.btn)").addClass("highlight"); + $("article a:not(:has(img)):not(.btn)").addClass("highlight"); }); -jQuery(window).on('load', function() { - // store this page in session - sessionStorage.setItem(jQuery('body').data('url'), 1); +jQuery(window).on("load", function () { + // store this page in session + sessionStorage.setItem(jQuery("body").data("url"), 1); - // loop through the sessionStorage and see if something should be marked as visited - for (var url in sessionStorage) { - if (sessionStorage.getItem(url) == 1) jQuery('[data-nav-id="' + url + '"]').addClass('visited'); - } + // loop through the sessionStorage and see if something should be marked as visited + for (var url in sessionStorage) { + if (sessionStorage.getItem(url) == 1) + jQuery('[data-nav-id="' + url + '"]').addClass("visited"); + } }); -$(function() { - $('a[rel="lightbox"]').featherlight({ - root: 'section#body' - }); +$(function () { + $('a[rel="lightbox"]').featherlight({ + root: "section#body", + }); }); jQuery.extend({ - highlight: function(node, re, nodeName, className) { - if (node.nodeType === 3) { - var match = node.data.match(re); - if (match && !(node.parentNode.ownerSVGElement instanceof SVGElement)) { - var highlight = document.createElement(nodeName || 'span'); - highlight.className = className || 'highlight'; - var wordNode = node.splitText(match.index); - wordNode.splitText(match[0].length); - var wordClone = wordNode.cloneNode(true); - highlight.appendChild(wordClone); - wordNode.parentNode.replaceChild(highlight, wordNode); - return 1; //skip added node in parent - } - } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children - !/(script|style)/i.test(node.tagName) && // ignore script and style nodes - !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted - for (var i = 0; i < node.childNodes.length; i++) { - i += jQuery.highlight(node.childNodes[i], re, nodeName, className); - } - } - return 0; + highlight: function (node, re, nodeName, className) { + if (node.nodeType === 3) { + var match = node.data.match(re); + if (match && !(node.parentNode.ownerSVGElement instanceof SVGElement)) { + var highlight = document.createElement(nodeName || "span"); + highlight.className = className || "highlight"; + var wordNode = node.splitText(match.index); + wordNode.splitText(match[0].length); + var wordClone = wordNode.cloneNode(true); + highlight.appendChild(wordClone); + wordNode.parentNode.replaceChild(highlight, wordNode); + return 1; //skip added node in parent + } + } else if ( + node.nodeType === 1 && + node.childNodes && // only element nodes that have children + !/(script|style)/i.test(node.tagName) && // ignore script and style nodes + !(node.tagName === nodeName.toUpperCase() && node.className === className) + ) { + // skip if already highlighted + for (var i = 0; i < node.childNodes.length; i++) { + i += jQuery.highlight(node.childNodes[i], re, nodeName, className); + } } + return 0; + }, }); -jQuery.fn.unhighlight = function(options) { - var settings = { - className: 'highlight', - element: 'span' - }; - jQuery.extend(settings, options); - - return this.find(settings.element + "." + settings.className).each(function() { - var parent = this.parentNode; - parent.replaceChild(this.firstChild, this); - parent.normalize(); - }).end(); +jQuery.fn.unhighlight = function (options) { + var settings = { + className: "highlight", + element: "span", + }; + jQuery.extend(settings, options); + + return this.find(settings.element + "." + settings.className) + .each(function () { + var parent = this.parentNode; + parent.replaceChild(this.firstChild, this); + parent.normalize(); + }) + .end(); }; -jQuery.fn.highlight = function(words, options) { - var settings = { - className: 'highlight', - element: 'span', - caseSensitive: false, - wordsOnly: false - }; - jQuery.extend(settings, options); - - if (!words) { return; } - - if (words.constructor === String) { - words = [words]; - } - words = jQuery.grep(words, function(word, i) { - return word != ''; - }); - words = jQuery.map(words, function(word, i) { - return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); - }); - if (words.length == 0) { return this; } - ; - - var flag = settings.caseSensitive ? "" : "i"; - var pattern = "(" + words.join("|") + ")"; - if (settings.wordsOnly) { - pattern = "\\b" + pattern + "\\b"; - } - var re = new RegExp(pattern, flag); - - return this.each(function() { - jQuery.highlight(this, re, settings.element, settings.className); - }); +jQuery.fn.highlight = function (words, options) { + var settings = { + className: "highlight", + element: "span", + caseSensitive: false, + wordsOnly: false, + }; + jQuery.extend(settings, options); + + if (!words) { + return; + } + + if (words.constructor === String) { + words = [words]; + } + words = jQuery.grep(words, function (word, i) { + return word != ""; + }); + words = jQuery.map(words, function (word, i) { + return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); + }); + if (words.length == 0) { + return this; + } + var flag = settings.caseSensitive ? "" : "i"; + var pattern = "(" + words.join("|") + ")"; + if (settings.wordsOnly) { + pattern = "\\b" + pattern + "\\b"; + } + var re = new RegExp(pattern, flag); + + return this.each(function () { + jQuery.highlight(this, re, settings.element, settings.className); + }); }; diff --git a/themes/docdock/static/scss/flex/article.scss b/themes/docdock/static/scss/flex/article.scss index 43355bfcca..3a22013d61 100644 --- a/themes/docdock/static/scss/flex/article.scss +++ b/themes/docdock/static/scss/flex/article.scss @@ -26,7 +26,7 @@ article section.page { font-family: "Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; text-align: center; text-transform: uppercase; - color: #060606; + color: #570c0c; font-size: 3.25rem; line-height: 2.7rem; } diff --git a/themes/docdock/static/theme-flex/script.js b/themes/docdock/static/theme-flex/script.js index d21472d254..ad30e8bd80 100644 --- a/themes/docdock/static/theme-flex/script.js +++ b/themes/docdock/static/theme-flex/script.js @@ -1,164 +1,191 @@ -jQuery(document).ready(function() { - jQuery('.category-icon').on('click', function() { - $( this ).toggleClass("fa-angle-down fa-angle-right") ; - $( this ).parent().parent().children('ul').toggle() ; - return false; - }); - - - - // Images - // Execute actions on images generated from Markdown pages - var images = $("article img").not(".inline"); - // Wrap image inside a featherlight (to get a full size view in a popup) - images.wrap(function () { - var image = $(this); - if (!image.parent("a").length) { - return ""; - } - }); - // Change styles, depending on parameters set to the image - images.each(function (index) { - var image = $(this); - var o = getUrlParameter(image[0].src); - if (typeof o !== "undefined") { - var h = o["height"]; - var w = o["width"]; - var c = o["classes"]; - image.css({ - width: function () { - if (typeof w !== "undefined") { - return w; - } - }, - height: function () { - if (typeof h !== "undefined") { - return h; - } - } - }); - if (typeof c !== "undefined") { - var classes = c.split(','); - $.each(classes, function(i) { - image.addClass(classes[i]); - }); - } - } - }); - +jQuery(document).ready(function () { + jQuery(".category-icon").on("click", function () { + // Check if this is the back navigation icon + if ($(this).hasClass("back-nav-icon")) { + window.location.href = $(this).parent().attr("href"); + return true; + } + + // Original dropdown behavior for other category icons + $(this).toggleClass("fa-angle-down fa-angle-up"); + $(this).parent().parent().children("ul").toggle(); + return false; + }); + + // Images + // Execute actions on images generated from Markdown pages + var images = $("article img").not(".inline"); + // Wrap image inside a featherlight (to get a full size view in a popup) + images.wrap(function () { + var image = $(this); + if (!image.parent("a").length) { + return ""; + } + }); + // Change styles, depending on parameters set to the image + images.each(function (index) { + var image = $(this); + var o = getUrlParameter(image[0].src); + if (typeof o !== "undefined") { + var h = o["height"]; + var w = o["width"]; + var c = o["classes"]; + image.css({ + width: function () { + if (typeof w !== "undefined") { + return w; + } + }, + height: function () { + if (typeof h !== "undefined") { + return h; + } + }, + }); + if (typeof c !== "undefined") { + var classes = c.split(","); + $.each(classes, function (i) { + image.addClass(classes[i]); + }); + } + } + }); + + // Clipboard + // Add link button for every + var text, + clip = new Clipboard(".anchor"); + $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function (index, html) { + var element = $(this); + var url = document.location.origin + document.location.pathname; + var link = url + "#" + element[0].id; + return ( + " " + + "" + + "" + ); + }); + + $(".anchor").on("mouseleave", function (e) { + $(this) + .attr("aria-label", null) + .removeClass("tooltipped tooltipped-s tooltipped-w"); + }); + + clip.on("success", function (e) { + e.clearSelection(); + $(e.trigger) + .attr("aria-label", "Link copied to clipboard!") + .addClass("tooltipped tooltipped-s"); + }); + + var ajax; + jQuery("[data-search-input]").on("input", function () { + var input = jQuery(this), + value = input.val(), + items = jQuery("[data-nav-id]"); + items.removeClass("search-match"); + if (!value.length) { + $("ul.menu").removeClass("searched"); + items.css("display", "block"); + sessionStorage.removeItem("search-value"); + $("article").unhighlight({ element: "mark" }); + return; + } - // Clipboard - // Add link button for every - var text, clip = new Clipboard('.anchor'); - $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function (index, html) { - var element = $(this); - var url = document.location.origin + document.location.pathname; - var link = url + "#" + element[0].id; - return " " + - "" + - ""; - }); + sessionStorage.setItem("search-value", value); + $("article") + .unhighlight({ element: "mark" }) + .highlight(value, { element: "mark" }); - $(".anchor").on('mouseleave', function (e) { - $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w'); - }); + if (ajax && ajax.abort) ajax.abort(); - clip.on('success', function (e) { - e.clearSelection(); - $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s'); + jQuery("[data-search-clear]").on("click", function () { + jQuery("[data-search-input]").val("").trigger("input"); + sessionStorage.removeItem("search-input"); + $("article").unhighlight({ element: "mark" }); }); + }); + $.expr[":"].contains = $.expr.createPseudo(function (arg) { + return function (elem) { + return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; + }; + }); + + if (sessionStorage.getItem("search-value")) { + var searchValue = sessionStorage.getItem("search-value"); + sessionStorage.removeItem("search-value"); + var searchedElem = $("article") + .find(":contains(" + searchValue + ")") + .get(0); + searchedElem && searchedElem.scrollIntoView(); + $("article").highlight(searchValue, { element: "mark" }); + } + + // clipboard + var clipInit = false; + $("pre code").each(function () { + var code = $(this), + text = code.text(); + + if (text.length > 5) { + if (!clipInit) { + var text, + clip = new Clipboard(".copy-to-clipboard", { + text: function (trigger) { + text = $(trigger).next("code").text(); + return text.replace(/^\$\s/gm, ""); + }, + }); + + var inPre; + clip.on("success", function (e) { + e.clearSelection(); + inPre = $(e.trigger).parent().prop("tagName") == "PRE"; + $(e.trigger) + .attr("aria-label", "Copied to clipboard!") + .addClass("tooltipped tooltipped-" + (inPre ? "w" : "s")); + }); - var ajax; - jQuery('[data-search-input]').on('input', function() { - var input = jQuery(this), - value = input.val(), - items = jQuery('[data-nav-id]'); - items.removeClass('search-match'); - if (!value.length) { - $('ul.menu').removeClass('searched'); - items.css('display', 'block'); - sessionStorage.removeItem('search-value'); - $("article").unhighlight({ element: 'mark' }) - return; - } - - sessionStorage.setItem('search-value', value); - $("article").unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' }); - - if (ajax && ajax.abort) ajax.abort(); - - jQuery('[data-search-clear]').on('click', function() { - jQuery('[data-search-input]').val('').trigger('input'); - sessionStorage.removeItem('search-input'); - $("article").unhighlight({ element: 'mark' }) + clip.on("error", function (e) { + inPre = $(e.trigger).parent().prop("tagName") == "PRE"; + $(e.trigger) + .attr("aria-label", fallbackMessage(e.action)) + .addClass("tooltipped tooltipped-" + (inPre ? "w" : "s")); + $(document).one("copy", function () { + $(e.trigger) + .attr("aria-label", "Copied to clipboard!") + .addClass("tooltipped tooltipped-" + (inPre ? "w" : "s")); + }); }); - }); - $.expr[":"].contains = $.expr.createPseudo(function(arg) { - return function( elem ) { - return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; - }; - }); + clipInit = true; + } - if (sessionStorage.getItem('search-value')) { - var searchValue = sessionStorage.getItem('search-value') - sessionStorage.removeItem('search-value'); - var searchedElem = $('article').find(':contains(' + searchValue + ')').get(0); - searchedElem && searchedElem.scrollIntoView(); - $("article").highlight(searchValue, { element: 'mark' }); + code.before( + '' + ); + $(".copy-to-clipboard").on("mouseleave", function () { + $(this) + .attr("aria-label", null) + .removeClass("tooltipped tooltipped-s tooltipped-w"); + }); } + }); - // clipboard - var clipInit = false; - $('pre code').each(function() { - var code = $(this), - text = code.text(); - - if (text.length > 5) { - if (!clipInit) { - var text, clip = new Clipboard('.copy-to-clipboard', { - text: function(trigger) { - text = $(trigger).next('code').text(); - return text.replace(/^\$\s/gm, ''); - } - }); - - var inPre; - clip.on('success', function(e) { - e.clearSelection(); - inPre = $(e.trigger).parent().prop('tagName') == 'PRE'; - $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's')); - }); - - clip.on('error', function(e) { - inPre = $(e.trigger).parent().prop('tagName') == 'PRE'; - $(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's')); - $(document).one('copy', function(){ - $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's')); - }); - }); - - clipInit = true; - } - - code.before(''); - $('.copy-to-clipboard').on('mouseleave', function() { - $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w'); - }); - } + // allow keyboard control for prev/next links + jQuery(function () { + jQuery(".nav-prev").click(function () { + location.href = jQuery(this).attr("href"); }); - - // allow keyboard control for prev/next links - jQuery(function() { - jQuery('.nav-prev').click(function(){ - location.href = jQuery(this).attr('href'); - }); - jQuery('.nav-next').click(function() { - location.href = jQuery(this).attr('href'); - }); + jQuery(".nav-next").click(function () { + location.href = jQuery(this).attr("href"); }); - /*jQuery(document).keydown(function(e) { + }); + /*jQuery(document).keydown(function(e) { // prev links - left arrow key if(e.which == '37') { jQuery('.nav.nav-prev').click(); @@ -169,109 +196,116 @@ jQuery(document).ready(function() { } }); */ - $('article a:not(:has(img)):not(.btn)').addClass('highlight'); + $("article a:not(:has(img)):not(.btn)").addClass("highlight"); }); -$(function() { - $('a[rel="lightbox"]').featherlight({ - root: 'article' - }); +$(function () { + $('a[rel="lightbox"]').featherlight({ + root: "article", + }); }); jQuery.extend({ - highlight: function(node, re, nodeName, className) { - if (node.nodeType === 3) { - var match = node.data.match(re); - if (match && !$(node.parentNode).hasClass("mermaid")) { - var highlight = document.createElement(nodeName || 'span'); - highlight.className = className || 'highlight'; - var wordNode = node.splitText(match.index); - wordNode.splitText(match[0].length); - var wordClone = wordNode.cloneNode(true); - highlight.appendChild(wordClone); - wordNode.parentNode.replaceChild(highlight, wordNode); - return 1; //skip added node in parent - } - } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children - !/(script|style)/i.test(node.tagName) && // ignore script and style nodes - !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted - for (var i = 0; i < node.childNodes.length; i++) { - i += jQuery.highlight(node.childNodes[i], re, nodeName, className); - } - } - return 0; + highlight: function (node, re, nodeName, className) { + if (node.nodeType === 3) { + var match = node.data.match(re); + if (match && !$(node.parentNode).hasClass("mermaid")) { + var highlight = document.createElement(nodeName || "span"); + highlight.className = className || "highlight"; + var wordNode = node.splitText(match.index); + wordNode.splitText(match[0].length); + var wordClone = wordNode.cloneNode(true); + highlight.appendChild(wordClone); + wordNode.parentNode.replaceChild(highlight, wordNode); + return 1; //skip added node in parent + } + } else if ( + node.nodeType === 1 && + node.childNodes && // only element nodes that have children + !/(script|style)/i.test(node.tagName) && // ignore script and style nodes + !(node.tagName === nodeName.toUpperCase() && node.className === className) + ) { + // skip if already highlighted + for (var i = 0; i < node.childNodes.length; i++) { + i += jQuery.highlight(node.childNodes[i], re, nodeName, className); + } } + return 0; + }, }); -jQuery.fn.unhighlight = function(options) { - var settings = { - className: 'highlight', - element: 'span' - }; - jQuery.extend(settings, options); - - return this.find(settings.element + "." + settings.className).each(function() { - var parent = this.parentNode; - parent.replaceChild(this.firstChild, this); - parent.normalize(); - }).end(); +jQuery.fn.unhighlight = function (options) { + var settings = { + className: "highlight", + element: "span", + }; + jQuery.extend(settings, options); + + return this.find(settings.element + "." + settings.className) + .each(function () { + var parent = this.parentNode; + parent.replaceChild(this.firstChild, this); + parent.normalize(); + }) + .end(); }; -jQuery.fn.highlight = function(words, options) { - var settings = { - className: 'highlight', - element: 'span', - caseSensitive: false, - wordsOnly: false - }; - jQuery.extend(settings, options); - - if (!words) { return; } - - if (words.constructor === String) { - words = [words]; - } - words = jQuery.grep(words, function(word, i) { - return word != ''; - }); - words = jQuery.map(words, function(word, i) { - return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); - }); - if (words.length == 0) { return this; } - ; - - var flag = settings.caseSensitive ? "" : "i"; - var pattern = "(" + words.join("|") + ")"; - if (settings.wordsOnly) { - pattern = "\\b" + pattern + "\\b"; - } - var re = new RegExp(pattern, flag); - - return this.each(function() { - jQuery.highlight(this, re, settings.element, settings.className); - }); +jQuery.fn.highlight = function (words, options) { + var settings = { + className: "highlight", + element: "span", + caseSensitive: false, + wordsOnly: false, + }; + jQuery.extend(settings, options); + + if (!words) { + return; + } + + if (words.constructor === String) { + words = [words]; + } + words = jQuery.grep(words, function (word, i) { + return word != ""; + }); + words = jQuery.map(words, function (word, i) { + return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); + }); + if (words.length == 0) { + return this; + } + var flag = settings.caseSensitive ? "" : "i"; + var pattern = "(" + words.join("|") + ")"; + if (settings.wordsOnly) { + pattern = "\\b" + pattern + "\\b"; + } + var re = new RegExp(pattern, flag); + + return this.each(function () { + jQuery.highlight(this, re, settings.element, settings.className); + }); }; - // Get Parameters from some url var getUrlParameter = function getUrlParameter(sPageURL) { - var url = sPageURL.split('?'); - var obj = {}; - if (url.length == 2) { - var sURLVariables = url[1].split('&'), - sParameterName, - i; - for (i = 0; i < sURLVariables.length; i++) { - sParameterName = sURLVariables[i].split('='); - obj[sParameterName[0]] = sParameterName[1]; - } - return obj; - } else { - return undefined; + var url = sPageURL.split("?"); + var obj = {}; + if (url.length == 2) { + var sURLVariables = url[1].split("&"), + sParameterName, + i; + for (i = 0; i < sURLVariables.length; i++) { + sParameterName = sURLVariables[i].split("="); + obj[sParameterName[0]] = sParameterName[1]; } + return obj; + } else { + return undefined; + } }; // Burger icon click toggle header menu on small devices -$('.burger').on('click', function(e){ - $('#shortcuts').toggleClass("responsive") ; - e.preventDefault(); +$(".burger").on("click", function (e) { + $("#shortcuts").toggleClass("responsive"); + e.preventDefault(); }); diff --git a/themes/docdock/static/theme-flex/style.css b/themes/docdock/static/theme-flex/style.css index e53dc99376..a904e0a7ed 100644 --- a/themes/docdock/static/theme-flex/style.css +++ b/themes/docdock/static/theme-flex/style.css @@ -53,7 +53,8 @@ @font-face { font-family: "Lato"; font-weight: 600; - src: local("Lato Semibold"), url("../fonts/Lato-Semibold.ttf") format("truetype"); + src: local("Lato Semibold"), + url("../fonts/Lato-Semibold.ttf") format("truetype"); } @font-face { font-family: "Lato"; @@ -69,6 +70,10 @@ url("../fonts/Lato-Black.ttf") format("truetype"); } +.workshop-projects-header { + font-family: "Space Mono"; +} + article > aside { /* background-color: #f9f9f9; */ bottom: 0; @@ -81,17 +86,20 @@ article > aside { -ms-flex-direction: column; flex-direction: column; padding: 2rem 0rem 1rem 0rem; - width: 20rem; - max-height:100vh; + width: 25rem; + max-height: 100vh; overflow-y: auto; /* align-self: flex-start is needed so that position: sticky works */ align-self: flex-start; position: sticky; top: 0px; + background-color: #f1f6f1; } article > aside .menu { - line-height: 2rem; + line-height: 3rem; list-style-type: none; + font-family: Lato; + font-weight: bold; } article > aside .menu > label { display: block; @@ -143,18 +151,19 @@ article > aside .menu .dd-item div i.read-icon { } article > aside .menu .dd-item div i.category-icon { display: flex; - align-items: center; + align-items: start; justify-content: center; - order: 1; + order: 3; width: 20px; cursor: pointer; } article > aside .menu .dd-item div a { display: flex; flex: 1; - order: 2; + order: 1; padding: 0 0rem; text-decoration: none; + color: black; } article > aside .menu .dd-item div a:hover, article > aside .menu .dd-item div a:focus, @@ -173,10 +182,89 @@ article > aside .menu .dd-item div i.category-icon:hover { article > aside .menu .dd-item li { border-left: 1px solid #eee; } + +/* Back to workshops dashboard navigation styles */ +article > aside .menu .dd-item.back-to-dashboard { + margin: 0.5rem 0px 0.5rem 20px; + padding-left: 1rem; + list-style: none; + font-size: 14px; +} + +article > aside .menu .dd-item.back-to-dashboard .menu-item { + margin-left: -20px; +} + +article > aside .menu .dd-item.back-to-dashboard div { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: flex-start !important; +} + +article > aside .menu .dd-item.back-to-dashboard div * { + line-height: inherit; +} + +article > aside .menu .dd-item.back-to-dashboard div a { + display: flex !important; + align-items: start !important; + justify-content: center !important; + order: 1 !important; + width: 20px !important; + cursor: pointer; + text-decoration: none; + color: black; + padding: 0 !important; + flex-shrink: 0 !important; + flex-grow: 0 !important; + flex-basis: 20px !important; +} + +article > aside .menu .dd-item.back-to-dashboard div a i.category-icon { + display: flex; + align-items: start; + justify-content: center; + order: 1 !important; +} + +article > aside .menu .dd-item.back-to-dashboard div a { + display: flex !important; + padding: 0 0rem 0 0.5rem !important; + color: black; + font-size: 16px; + font-weight: bold; + flex-shrink: 1 !important; + flex-grow: 0 !important; + flex-basis: auto !important; + min-width: 0 !important; + width: auto !important; + max-width: none !important; +} + +article > aside .menu .dd-item.back-to-dashboard div a:hover, +article > aside .menu .dd-item.back-to-dashboard div a:focus, +article > aside .menu .dd-item.back-to-dashboard div a:active { + background-color: #eee; + border-radius: 0.2rem; + padding: 0 0rem; +} + +article > aside .menu .dd-item.back-to-dashboard .back-nav-separator { + border: none; + border-top: 1px solid #ddd; + margin: 0.25rem 5px 0.75rem 5px; + width: auto; +} + article > aside section { margin: 2rem 0rem; } +.menu-item { + font-size: 16px; +} + /*! * facette-docs - Facette project documentation * Website: http://docs.facette.io/ @@ -184,6 +272,7 @@ article > aside section { * { margin: 0; padding: 0; + } html, @@ -198,7 +287,10 @@ html { body { background-color: #fff; - color: #222; + color: #000000 !important; + font-family: "Lato" !important; + font-weight: 400 !important; + font-size: 20px !important; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -206,7 +298,7 @@ body { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - line-height: 1.5rem; + line-height: 30px !important; } :disabled { @@ -241,8 +333,8 @@ section strong { .nav-select { /* background: #e5e5e5; */ display: none; + } - .searchbox { margin: 0rem 0rem 0rem 0rem; padding: 0rem 0rem; @@ -297,6 +389,7 @@ section strong { #navigation a i { font-size: 4em; margin: auto; + color: #000000; } #navigation a label { margin: auto; @@ -306,14 +399,16 @@ section strong { #navigation a.nav-next { text-align: right; } -#navigation a.nav-prev, #navigation a.nav-next { +#navigation a.nav-prev, +#navigation a.nav-next { width: 340px; } @media (max-width: 985px) { .nextprevbutton-desktop-only { - display: none; + display: none; } - #navigation a.nav-prev, #navigation a.nav-next { + #navigation a.nav-prev, + #navigation a.nav-next { width: 100%; } #navigation a.nav-prev { @@ -329,9 +424,9 @@ section strong { #navigation .nextprevbutton-border { width: 100%; - background: #FFFFFF; + background: #ffffff; border: 4px solid #000000; - border-radius: 4px; + border-radius: 4px; } #navigation .nextprevbutton-next-text { margin: 21px auto auto 20px; @@ -345,7 +440,7 @@ section strong { } #navigation .nextprevbutton-subsection-name { margin: 13px 21px auto 21px; - + color: #000000; text-align: left; font-family: Lato, monospace; font-weight: 900; @@ -392,10 +487,10 @@ article { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - margin-top: 3.5rem; margin-right: auto; margin-left: auto; - width:100%; + width: 100%; + background-color: #f1f6f1; /* Re-enable max-width after #259 is fixed (https://github.com/NuevoFoundation/workshops/issues/259) */ /* max-width: 1210px; */ /* background-color: #F1F6F1; */ @@ -403,7 +498,7 @@ article { /* Special homepage styling */ body#home article section.page { - background-color: #F1F6F1; + background-color: #f1f6f1; border-radius: 5px; } @@ -416,21 +511,158 @@ article section.page { overflow-y: auto; padding: 2rem 4rem; } -article section.page h1:first-of-type { - margin: 3rem 0rem; - font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", - sans-serif; - text-align: center; - color: #060606; - font-size: 3.25rem; - line-height: 2.7rem; +header h1:first-of-type { + display: flex; + flex-wrap: wrap; + font-family: "Space Mono", "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + text-align: left; + color: #000000; + font-size: 48px; + line-height: 71.09px; + background-color:#Fcc600 !important; + font-weight: 700; + height: 100px; + top: 104px; + padding-left: 20px; + padding-top: 30px; + margin: 0 !important; } +button, input, optgroup, select, textarea { + color:#000000!important; +} +#select-language-workshop { + background-color: #Fcc600; + border-width: 3px; + border-radius: 5px; + border-color:#000000; + font-family: "Lato", "Arial"; + font-size: 18px; + font-weight: 600; + width: 200px; + height: 35px; + display: flex; + justify-content: right; + flex: wrap; + padding-left: 15px; +} +#select-language-home { + background-color: #ffffff; + border-width: 3px; + border-radius: 5px; + border-color:#000000; + font-family: "Lato", "Arial"; + font-size: 18px; + font-weight: 600; + width: 200px; + height: 35px; + display: flex; + justify-content: right; + flex: wrap; +} +.language-bar-workshops { + background-color: #Fcc600 !important; + padding-bottom: 25px; + padding-right: 35px; +} +.panel.panel-primary { + border: 4px solid black; +} + +/* Right-align panel-primary on workshop first pages */ +article section.page .panel.panel-primary { + position: relative; + float: right; + clear: right; + max-width: 350px; + width: 350px; + margin: 8rem 10rem 1.5rem 3rem; /* top right bottom left - adds 6rem space from right edge */ + transform: translateX(-2rem); /* Moves it 2rem more towards center */ +} + +/* Ensure text flows around the right-floated panels */ +article section.page .panel.panel-primary + * { + clear: none; /* Allow text to wrap around panels */ +} + +/* For mobile devices - stack panels below content */ +@media (max-width: 768px) { + article section.page .panel.panel-primary { + position: static; + float: none; + clear: both; + width: 100%; + max-width: none; + margin: 1rem 0; + transform: none; + } +} +.panel-primary > .panel-heading { + background-color: #000000 !important; + border-radius: 0px; +} + +/* Thick black bar before table of contents header */ +article section.page h2#table-of-contents::before { + content: ""; + position: absolute; + transform: translateY(-3rem); /* Move bar above the h2 */ + width: 33.33%; /* Takes roughly a third of horizontal space */ + height: 8px; /* Thick black bar */ + background-color: #000000; + margin-bottom: 2rem; /* Space below the bar */ +} + +/* Ensure the h2 has relative positioning for the absolute bar */ +article section.page h2#table-of-contents { + position: relative; + margin-top: 5rem; /* Extra space to accommodate the bar above */ +} + +/* Hide the bar on mobile for better spacing */ +@media (max-width: 768px) { + article section.page h2#table-of-contents::before { + width: 50%; /* Slightly wider on mobile */ + transform: translateY(-2rem); /* Less space on mobile */ + } + + article section.page h2#table-of-contents { + margin-top: 4rem; /* Less margin on mobile */ + } +} + article section.page h1 { margin-top: 4rem; } article section.page h2 { margin-top: 3rem; + display: flex; + flex-wrap: wrap; + height: 77; + left: 24; + color:#000000; + font-family: "Space Mono", "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-weight: 700; + line-height: 59.24px; +} +article section.page h3 { + margin-top: 3rem; + display: flex; + flex-wrap: wrap; + color:#000000; + font-family: "Space Mono", "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-weight: 700; + line-height: 59.24px; +} +article section.page h4 { + margin-top: 3rem; + display: flex; + flex-wrap: wrap; + color:#000000; + font-family: "Space Mono", "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-weight: 700; + line-height: 59.24px; } + article section.page table { width: 100%; margin-bottom: 2em; @@ -469,9 +701,10 @@ article section.page img { margin: 3rem auto; display: block; text-align: center; + border: 4px solid black !important; } article section.page img.border { - border: 2px solid #e6e6e6 !important; + border: 2px solid #ffffff; padding: 2px; } article section.page img.shadow { @@ -764,42 +997,53 @@ div.notices p:first-child:after { position: absolute; top: -27px; color: #fff; + font-size: 25px; left: 2rem; - content: attr(header-value) + content: attr(header-value); +} + +#header-value { + color: #000000; } div.notices.note { - border-top: 30px solid #6bb1e0; + border: 4px solid black; + border-top: 50px solid #000000; background: #e6f3fb; color: rgba(47, 103, 141, 0.995) !important; } div.notices.info { - border-top: 30px solid #f1b37e; + border: 4px solid black; + border-top: 30px solid #000000; background: #fefaf5; color: rgba(150, 90, 38, 0.995) !important; } div.notices.tip { - border-top: 30px solid #84c578; + border: 4px solid black; + border-top: 30px solid #000000; background: #e8f7e6; color: rgba(72, 125, 63, 0.995) !important; } div.notices.hint { - border-top: 30px solid #84c578; + border: 4px solid black; + border-top: 30px solid #000000; background: #e8f7e6; color: rgba(72, 125, 63, 0.995) !important; } div.notices.warning { - border-top: 30px solid #d58181; + border: 4px solid black; + border-top: 30px solid #000000; background: #fbeded; color: rgba(132, 56, 56, 0.995) !important; } div.notices.help { - border-top: 30px solid #d58181; + border: 4px solid black; + border-top: 30px solid #000000; background: #fbeded; color: rgba(132, 56, 56, 0.995) !important; } @@ -814,7 +1058,7 @@ ul.children.children-card { justify-content: space-between; } ul.children.children-card > .workshop-button { - position:relative; + position: relative; background-color: #fff; cursor: pointer; text-align: left; @@ -832,7 +1076,7 @@ ul.children.children-card > .workshop-button { border-radius: 5px; } -@media(hover: hover) and (pointer: fine) { +@media (hover: hover) and (pointer: fine) { /* This media query only triggers on desktop. Only add these on desktop so that mobile users don't need to press the button twice */