No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Finalizando ejercicio de página de artículos

22/42
Recursos

Imagen del reto:
Platzi Games - Reto Less.jpg

Aportes 121

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Listo, utilice las condicionales de less 😛 en un mixin

@modo-oscuro: true;

.DarkMode() when (@modo-oscuro = true) {
  background-color: @color-primario;

  .intro{
    background-color: @color-secundario;
  }

  .articulo--principal {
    color: @color-claro;

    h1, h2, h3 {
      color: @color-secundario;
    }
  }

  .caja__contenido {
    background-color: @color-secundario;
    color: @color-claro;

    a{
      color: @color-claro;
    }
  }
}```

Existe una herramienta en el Navegador que te permite capturar el diseño de tu pagina, sitio etc. lo puedes realizar de la siguiente manera:

<code>

El reto lo hice de la siguiente manera:

  1. Agrege esta variable al archivo globales.less
@dark-mode: true;
  1. Cree un mixins:
.dark() when (@dark-mode = true) {
	background-color: @color-primario;
	color: @color-claro;
  
	.intro {
	  	background-color: @color-secundario;
	}
  
	.caja {
	  span {
		color: fade(@color-claro, 80%);
	  }
	}
  
	.caja__contenido {
	  background-color: @color-secundario;
	  a {
		color: fade(@color-claro, 50%);
	  }
	}
  
	.articulo--principal {
	  h2 {
		color: @color-secundario;
	  }
	}
  }
  1. en la seccion body, agrege el mixin
body {
	margin: 0;
	font-family: @Fuente1;
	color: @color-primario;
	.Fuente(@Fuente-base);
	.dark;  //Mixin agregado 
}

Este es el resultado:

La manera más fácil y rápida de arreglar el line-height es colocar en el body line-height: 1.1em; equivale al tamaño actual de la fuente + 10%, lo mismo pero se adapta a todos los tamaños de fuentes.

Existe un media en css para detectar si el usuario está en darkmode, es por eso que hice el reto así…

@media (prefers-color-scheme: dark) {
  body {
    background-color: @color-primario;
    color: @color-claro;
  }
  .intro {
    background-color: @color-secundario;
  }
  .articulo--principal h2 {
    color: @color-secundario;
  }
  .caja__contenido {
    background-color: @color-secundario;
  }
}

Reto listo, aunque no soy capaz de subirlo:(
P.D: A nadie más le está matando que no sea responsive?

1.- Crear una variable booleana para el modo oscuro.

@dark-mode: true;

2.- Crear un mixin en el que, si modo oscuro = true, se apliquen los siguientes cambios a la página.

.Dark () when (@dark-mode = true) {
	background-color: @color-primario;
	color: @color-claro;
	.intro{
		background-color: @color-secundario;
	}
	.articulo--principal{
		h2{
			color: @color-secundario;
		}
	}
	.caja__contenido{
		background-color: @color-secundario;
		color:fade(@color-claro, 70%);
		span{
			color: fade(@color-claro, 70%);
		}
		a{
			color: fade(@color-claro, 70%);
		}
	}	
}

3.- Utilizar el mixin que se creó en el body.

body {
	margin: 0;
	font-family: @Fuente1;
	color: @color-primario;
	/* line-height: @fuente-base + 10%; */
	.Dark;
}

PD: Si se cambia el valor de la variable a false la página retomará sus parámetros originales.

Imagen del reto:

Me tocó hacer un botón para cambiar a modo oscuro.

label.switch-button
	input.switch-button__checkbox(type="checkbox", id="dark-mode" onclick="changeMode(this)")
	.switch-button__slide Mode```

Creé una nueva variable llamada @darkMode dependiendo si está en true o false cambia la pagina.

// Modo oscuro
@darkMode: false;
@background-dark: #333;

body {
	background-color:if((@darkMode), @background-dark);
}

h2 {
	color: if((@darkMode), @color-secundario);
}

.caja {
	color: if((@darkMode), @color-claro);
	&__contenido {
		background-color: if((@darkMode), @color-secundario, @color-claro);
	}

	span {
		color: if((@darkMode), @color-claro, @color-secundario);
	}

	a {
		color: if((@darkMode), @color-claro);
	}
}

.articulo--principal {
	color: if((@darkMode), @color-claro);
}

Reto terminado:

Para el reto del modo dark:

  1. cree el archivo modedark.less
@import "global.less";
@import "intros.less";
@import "articulos.less";
@import "cajas.less";
@import "modedark.less";

  1. código del archivo modedark.less
    el modo dark se activa siguiendo la preferencia del sistema
@media (prefers-color-scheme: dark) {
  body {
    background: @color-primario;
    color: @color-claro;
  }
  h2 {
    color: @color-secundario;
  }

  .intro {
    background: @color-secundario;
  }

  .caja {
    background: @color-secundario;
  }

  .caja span {
    color: @color-claro;
  }
}


RESULTADO:

Hice el reto, aunque aun me parece avanzado entender lo del botón de modo oscuro aquí esta mi aporte, cree una nueva variable para las sombras de las cajas y un mixin para el Dark-mode.

<@color-primrario: #333333;
@color-masoscuro: #1a1818;
@color-claro: #FFFFFF;
@color-secundario:#8841da;
@color-variacion:#012179;
@fuente1:'lato', sans-serif;
@fuente2:'Oswald', sans-serif;
@fuente-base: 18px;

.sombra-caja {
    box-shadow: 0px 5px 15px 0px fade(@color-masoscuro, 75%);
}
.Oswald {
    font-family: @fuente2;
    text-transform: uppercase;
    font-weight: 700;
}

.fuente(@font-size) {
    font-size: @font-size;
    line-height: @font-size + 10%;
}

.Dark-mode {
    background-color: @color-primrario;
}

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: @fuente1;
    color: @color-claro;
    .fuente(@fuente-base);
    .Dark-mode();
}

h1, h2, h3 {
    margin: 0;
    .Oswald
}> 

En el min 4:26 el profe agrega el mixin .fuente() a el h2 de articulos.less pero no elimina el font-size: 50px… los repite 2 veces en font-size(linea 9) y en el mixin .fuente(50px), se podría eliminar la linea 9 y no habría redundancia.

Reto completado!

Agregue un boton para que elijas el modo, de oscuro a normal

Reto finalizado
![](

Reto:
![](

Reto: ✓

<a href="https://volta2016.github.io/landing-game-fx/html/"></a>

agregue los breakpoint y algunas animaciones vamos por más retos.

les comparto mi solución con estas variables, lógicamente deben re nombrarlas en su código para que funcione y agregar:
background-color: @color-fondo;

@dark: true; 
@color-claro: if((@dark), #8841da, #FFFFFF);
@color-texto: #FFFFFF;
@color-texto-secundario: if((@dark), #8841da, #333333);
@color-primario: if((@dark), #FFFFFF, #333333);
@color-secundario: #8841da;
@color-variacion: if((@dark), #FFFFFF, #012179);
@color-fondo: if((@dark), #333333, #FFF);
@color-sombra: #333333;

Ejercicio llevado acabo con mixins, booleans y condicionales en LESS

Reto cumplido

Tuvo sus detalles! pero lo más importante fue aprender a corregirlos y investigar.

reto completado

Reto completado, aunque reconozco que mi enfoque inicial no fue el mismo que el de otros compañeros y no utilice condicionales, tendré que seguir aprendiendo sobre less.!


.modo_oscuro () when (@dark_mode = true) {
    p {
        color: @color-claro;
    }
    body {
        background-color: @color_primario_dark;
    }
    .intro__imagen {
        background-color: @color-secundario;
        .sombra_caja--darkMode ();
    }
    .articulo--principal {
        h2 {
            color: @color-secundario;
        }
    }
    .caja{
        .sombra_caja--darkMode ();
        &__contenido{
            background-color: @color_secundario_dark;
            h3 {
                color: @color-claro;
            }
        }
    }
}

.modo_oscuro();

Uff con less los cambios demoraron menos de 2 minutos 😄

![](url

[](x-special/nautilus-clipboard
copy
file:///home/caprun/Desktop/izipizi.png
)

Reto cumplido

Hola a todos este mi codigo, unicamente cambie el valor de las variables de color, y asigne el mixin en el contenedor que iba a cambiar osea en las tarjetas en el artiuculo y en el body, yo modifique el codigo un poco entonces le tuve que colocar un borde al contenedro de la imagen para que se viera el borde morado

.dark when(@modoOscuro = true){
	@light-color : @color-secundary;
	@color-primary: #ffffff;
} 

.borde when(@modoOscuro = true){
	border: 10px solid @color-secundary;
}

listo.
gracias a los aportes de mis compañeros pude hacer el mio.
vi muchos que tenían condicionales, pero el mío no lo hice así.

este es el mixin:

.dark {
    background-color: @color-primario;
    color: @color-claro;
    .intro {
        background-color: @color-secundario;
    }
    .articulo--principal h2 {
        color: @color-secundario;
    }
    .caja__contenido {
        background-color: @color-secundario;
        color: @color-claro;
        span {
            color: @color-claro;
        }
        a {
            color: @color-claro;
        }
    }
}

ya después agregue el mixin a al body:

body {
    font-family: @fuente1;
    color: @color-primario;
    .fuente(@fuente-base);
    .dark;    
}

hoy aprendí a no adelantarme en hacer modificaciones que aparentemente están mal 😃 me toco borrar todos el line-height que fui colocando

Reto cumplido 😃

.Dark() when (@dark-mode = true) {
background-color: @color-primario;
color: @color-claro;
.intro {
background-color: @color-secundario;
}
.articulo–prinxipal{
h2 {
color: @color-secundario;
}
}
.caja{
&__contenido{
background-color: @color-secundario;
}
span{
color: @color-claro;
}
a {
color: @color-claro;
}
}
}

Reto cumplido:

Reto completado 😄

global.less

@dark-mode: true;
...

darkmode.less

.dark-mode() when (@dark-mode = true) {
  body {
    background-color: @color-primario;
    color: @color-claro;
  }
  h2 {
    color: @color-secundario;
  }
  .intro__imagen {
    border: 7px solid @color-secundario;
  }
  .caja {
    .sombra-caja(@color-secundario);
    background-color: @color-secundario;
    &__contenido {
      background-color: inherit;
      a {
        color: @color-claro;
      }
    }
  }
}

.dark-mode();

platzigames.less

...
@import 'darkmode.less';

Qué bonito curso. Cómo se valora cuando el profesor demuestra todo escribiendo código y no solo se dedica a leer diapositivas 😄

mi solución al reto:

body.active {
    background-color: @color__primario;
    p {
        color: @color__claro;
    }
    .caja__contenido {
        background-color: @color__secundario;
        color: @color__claro;
        a {
            color: @color__claro;
        }
    }
}

Reto completado 😄

El contenedor de los artículos lo hice con display grid para que sea responsive

use los ejemplos de @Alejandro Lujan y de @Tomas Salina para hacer un modo oscuro que se adapte al color de enfasis del sistema y usando mixins.
Al principio de globales.less

.dark {
    background-color: @color-primario;
    color: @color-claro;
    .intro{
        background-color: @color-secundario;
    }
    .caja {
        span{
            color: fade(@color-claro, 80%)
        }
        &__contenido {
            background-color: @color-secundario;
            a {
                color: fade(@color-claro, 50%);
            }
        }
        
    }
    .articulo--principal{
        h2{
            color: @color-secundario;
        }
    }
    
}```
**_Al final de globales.less_**


@media (prefers-color-scheme: dark) {
body {
.dark
}
}```

Reto cumplido.

Siempre que pienso en el modo oscuro, pienso en un botón para poder colocarlo yo mismo, y así lo hice. 😄

Condicionales en less

En el curso faltaron las conficionales y como se utilizan. Estas son muy sencillas y muy faciles de leer. Un buen uso es cuando estamos utilizando mixins. Veamos unos cuantos ejemplo:

// Con mixins
.myMixin(@black-theme) when (@theme = black){...}

// Con clases
.myClass when (@width >= 50px){...}

Termine el reto!!
La solución a la que llegue me parece muy práctica, como solo cambian los colores elegí colocar la condición al momento de declarar las variables. Solo con este cambio (y agregando un par de variables mas) se termine el rato.

@modo: Oscuro;

.modo(Claro) {
	@color-fondo: #FFFFFF;
	@color-title: #FFFFFF;
	@color-primario: #333333;
	@color-claro: #FFFFFF;
	@color-secundario: #8841DA;
	@color-variacion: #012179;
}
.modo(Oscuro) {
	@color-fondo: #333333;
	@color-title: #FFFFFF;
	@color-primario: #FFFFFF;
	@color-claro: #8841DA;
	@color-secundario: #8841DA;
	@color-variacion: #FFFFFF;
}

.modo(@modo);
@Fuente1: 'Lato', sans-serif;
@Fuente2: 'Oswald', sans-serif;
@fuente-base: 18px;

Este curso debería ser actualizado, hay muchas cosas que han cambiado, a veces genera desmotivación ver contenido contradictorio

Aquí esta el reto realizado.
Lo que hice fue algo sencillo, usé una condicional de que si el modo oscuro estaba activo cambiara los estilos correspondientes.

reto cumplido utilice una variable booleana para cambiar entre modo oscuro y blanco y este es el resultado

Creo que al poner +10% en el tamaño de la fuente, el sistema en lugar de eso, ocupa 10px. Porque en el fuente base (18px) se convierte en 28px… y en el del titulo (50px) pasa a 60px…

Listo, reto cumplido

La terminé aunque creo que el screenshoot es muy pesado para subir me sale fallo en el protocolo http o algo así xd

Porque dice siempre 10% si en realidad aumenta 10px , el 10% de 50px es 5px … Nadie comento eso nunca !!!

Reto finalizado

Código

Adjunto el reto finalizado.

Reto cumplido.

Mi solución al reto 😄

No pude subir mi imagen 😦

Buen trabajo con esos retos 👏👏 ¡Felicidades!

Aqui el reto 😄

Reto cumplido

Me encantó el ejercicio.

Reto finalizado 😲

Listo !!!, cambia mucho el modo de trabajo, una vez dominado uno optimiza mucho tiempo!

Comparto mi solucion con un ligero cambio por que no se ven los titulos de las cajas (xbox, fortnite y cuphead)

body {
    background-color: @color-primario;
    color: @color-claro;
}
.intro {
    background-color: @color-secundario;
}
.articulo--principal {
    h2 {
        color: @color-secundario;
    }
}
.caja {
    &__contenido {
        color: @color-claro;
        background-color: @color-secundario;
    }
    span, a{
        color: @color-claro;
    }
}

Reto listo 😃

reto completado 😄

Tratando con colores distintos:

Genial, trabajo en otro pc por eso no subo el resultado del reto, se vuelve un poco tedioso, Pero gran clase, Va muy bien el curso

Asi me quedo!

Reto cumplido
PlatziGames

Reto cumplido.
Repositorio.

Aquí está mi reto:

Como reto personal también hice la pagina parcialmente responsive para practicar lo aprendido en otros cursos. Les dejo el link para que la vean https://sxbino.github.io/less-lessons-platziCourse/html/articulo.html


Bastante interesante la reutilización de codigo es efectiva y veloz.

Reto cumplido!

Reto cumplido:
Repositorio

Reto cumplido…

estupendooo 😄

Es interesante, he tendio problemas por que lo confundo con SASS. Pero para eso estamos, para aprender.

Asi me quedo el reto

❤️ me gusto y lo logre :3

Reto cumplido:

0:45 xd

Reto cumplido:

Reto completado

.dark() when (@dark-mode = true) {
  background-color: @color-primario;
  color: @color-claro;

  .intro {
    background-color: @color-secundario;
  }

  .caja {
    span {
      color: fade(@color-claro, 80%);
    }
  }

  .caja__contenido {
    background-color: @color-secundario;
    a {
      color: fade(@color-claro, 50%);
    }
  }

  .articulo--principal {
    h2 {
      color: @color-secundario;
    }
  }
}

Excelente! 😄