Latest comments
- @annesophie22@abe-m1
Hi Anne-Sophie, Your solution looks great. For handling media queries, I use the following Mixin below. It lets me pass in a parameter corresponding to the screen size I am targeting, and there are $if statements to determine which media query to apply.
@mixin respond($breakpoint) { @if $breakpoint == big-desktop { @media (min-width: 1800px) { @content; } } @if $breakpoint == desktop { @media (min-width: 1400px) { @content; } } @if $breakpoint == tab-land { @media (min-width: 1200px) { @content; } } @if $breakpoint == tab-port { @media (min-width: 900px) { @content; } } @if $breakpoint == phone { @media (min-width: 600px) { @content; } } }
and to use it:
.class { @include respond(tab-port) { height: 1.5rem; } }
- @Jesus-D-Rodriguez@abe-m1
Hey Jesus, Great job on the solution.
I tried the same approach for the JS file where I toggled classes on and off. But I found it was a lot of code.
So I came across a solution where you...
-
use CSS variables to define the light colors.
-
Then when the toggle is switched on it adds a data-attribute in the HTML.
-
and then in the css there is a class for the newly added data-attribute inside which the previous defined CSS variables are redefined with the dark colors.
It made the code cleaner by having to write less lines of code and use less classes.
this is the article i got it from: (https://raoulkramer.de/css-dark-mode-light-mode-rethought/)
-
- P@gcardenasdev@abe-m1
Hi Gabriela, great job on the JavaScript, I noticed a few things,
- The HTML would look cleaner if there were no empty elements (<small> tags)
In my solution to this challenge, I tried not to have any empty elements in the HTML, so if there is an error I created a new element with the error message and appended it to the DOM.
It is hard to describe it in words, but if you look at my JS solution the code is commented.
- The SCSS looks good.
There are two things that I implemented in my code which I find useful. I used BEM notation, so I could nest selectors in a way that was more readable .
Also I used a Mixin for media queries, which lets me nest the media queries directly inside the CSS declarations instead of having one large media query at the end of the file.
Marked as helpful