Skip to content

Commit 1ae85bd

Browse files
sergio-jr-devsergio-jr-dev
committed
Mejora de estilos
1 parent f14e0ed commit 1ae85bd

File tree

11 files changed

+138
-142
lines changed

11 files changed

+138
-142
lines changed

‎src/App.css‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717
body {
1818
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
1919
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
20-
display: grid;
21-
justify-items: center;
2220
min-height: 100dvh;
2321
color: var(--text-color);
2422
background: radial-gradient(
@@ -28,14 +26,10 @@ body {
2826
);
2927
}
3028

31-
main {
32-
width: 700px;
29+
.container {
30+
width: min(700px, 100%);
3331
margin-inline: auto;
3432
padding-inline: 1rem;
35-
36-
@media (width <= 700px) {
37-
width: 100%;
38-
}
3933
}
4034

4135
h1 {

‎src/components/finalView/dots/dots.css‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
1-
@scope (.dots) {
2-
:scope {
3-
display: flex;
4-
flex-wrap: wrap;
5-
justify-content: center;
6-
gap: 0.6rem;
1+
.dots {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: center;
5+
gap: 0.6rem;
76

8-
.dot {
9-
display: grid;
10-
place-items: center;
11-
width: 1.5rem;
12-
aspect-ratio: 1;
13-
border-radius: 50%;
14-
font-size: 0.8rem;
7+
.dot {
8+
display: grid;
9+
place-items: center;
10+
width: 1.5rem;
11+
aspect-ratio: 1;
12+
border-radius: 50%;
13+
font-size: 0.8rem;
1514

16-
&.correct {
17-
background-color: var(--correct-color);
18-
}
15+
&.correct {
16+
background-color: var(--correct-color);
17+
}
1918

20-
&.incorrect {
21-
background-color: var(--incorrect-color);
22-
}
19+
&.incorrect {
20+
background-color: var(--incorrect-color);
2321
}
2422
}
2523
}

‎src/components/footer/Footer.jsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,27 @@ import './footer.css';
33
export const Footer = () => {
44
return (
55
<footer>
6-
<p>
7-
Creado por
8-
<a
9-
href="https://www.linkedin.com/in/sergio-jim%C3%A9nez-rubio/"
10-
rel="noopener noreferrer"
11-
target="_blank"
12-
>
13-
Sergio Jiménez Rubio
14-
</a>
15-
en
16-
<a
17-
href="https://socratech.es"
18-
rel="noopener noreferrer"
19-
target="_blank"
20-
>
21-
SocraTech
22-
<img src="./images/Logo-SocraTech.webp" alt="Logo de SocraTech" />
23-
</a>
24-
</p>
6+
<div className="container">
7+
<p>
8+
Creado por
9+
<a
10+
href="https://www.linkedin.com/in/sergio-jim%C3%A9nez-rubio/"
11+
rel="noopener noreferrer"
12+
target="_blank"
13+
>
14+
Sergio Jiménez Rubio
15+
</a>
16+
en
17+
<a
18+
href="https://socratech.es"
19+
rel="noopener noreferrer"
20+
target="_blank"
21+
>
22+
SocraTech
23+
<img src="./images/Logo-SocraTech.webp" alt="Logo de SocraTech" />
24+
</a>
25+
</p>
26+
</div>
2527
</footer>
2628
);
2729
};

‎src/components/header/Header.jsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
export const Header = () => {
22
return (
33
<header>
4-
<h1>
5-
<div className="img">
6-
<img src="./images/favicon.png" alt="Logo de HTML-CSS-QUIZ" />
7-
</div>
8-
HTML & CSS QUIZ
9-
</h1>
4+
<div className="container">
5+
<h1>
6+
<div className="img">
7+
<img src="./images/favicon.png" alt="Logo de HTML-CSS-QUIZ" />
8+
</div>
9+
HTML & CSS QUIZ
10+
</h1>
11+
</div>
1012
</header>
1113
);
1214
};

‎src/components/quiz/answer/answer.css‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
1-
@scope (.answer) {
2-
:scope {
3-
background-color: var(--option-color);
4-
border-radius: 16px;
5-
padding: 1rem;
6-
display: flex;
7-
align-items: center;
8-
column-gap: 1rem;
9-
font-size: 1.1rem;
10-
11-
&.correct {
12-
background-color: var(--correct-color);
13-
}
14-
15-
&.incorrect {
16-
background-color: var(--incorrect-color);
17-
animation: vibrate 0.3s ease-in-out;
18-
}
19-
20-
input {
21-
accent-color: var(--secondary-color);
22-
}
1+
.answer {
2+
background-color: var(--option-color);
3+
border-radius: 16px;
4+
padding: 1rem;
5+
display: flex;
6+
align-items: center;
7+
column-gap: 1rem;
8+
font-size: 1.1rem;
9+
10+
&.correct {
11+
background-color: var(--correct-color);
12+
}
13+
14+
&.incorrect {
15+
background-color: var(--incorrect-color);
16+
animation: vibrate 0.3s ease-in-out;
17+
}
18+
19+
input {
20+
accent-color: var(--secondary-color);
2321
}
2422
}
2523

‎src/components/quiz/answers/answers.css‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
@scope (.answers) {
2-
:scope {
3-
display: flex;
4-
flex-direction: column;
5-
row-gap: 1rem;
6-
}
1+
.answers {
2+
display: flex;
3+
flex-direction: column;
4+
row-gap: 1rem;
75
}

‎src/components/quiz/buttons/buttons.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@scope (.buttons) {
2-
:scope {
3-
display: flex;
4-
column-gap: 1rem;
5-
}
1+
.buttons {
2+
display: flex;
3+
column-gap: 1rem;
64
}

‎src/components/quiz/game/Game.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,9 @@ import { Quiz } from '../Quiz';
66
export const Game = () => {
77
const { completed } = useContext(QuizContext);
88

9-
return <main>{completed ? <FinalView /> : <Quiz />}</main>;
9+
return (
10+
<main>
11+
<div className="container">{completed ? <FinalView /> : <Quiz />}</div>
12+
</main>
13+
);
1014
};

‎src/components/quiz/info/info.css‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,43 @@
1-
@scope (.info) {
2-
:scope {
3-
display: flex;
4-
flex-direction: column;
5-
row-gap: 0.5rem;
6-
background-color: var(--info-color);
7-
padding: 1rem;
8-
border-radius: 16px;
9-
opacity: 1;
10-
interpolate-size: allow-keywords;
11-
height: max-content;
12-
overflow: clip;
13-
transition: opacity 0.3s, height 0.3s;
1+
.info {
2+
display: flex;
3+
flex-direction: column;
4+
row-gap: 0.5rem;
5+
background-color: var(--info-color);
6+
padding: 1rem;
7+
border-radius: 16px;
8+
opacity: 1;
9+
interpolate-size: allow-keywords;
10+
height: max-content;
11+
overflow: clip;
12+
transition: opacity 0.3s, height 0.3s;
1413

15-
@starting-style {
16-
opacity: 0;
17-
height: 0;
18-
}
14+
@starting-style {
15+
opacity: 0;
16+
height: 0;
17+
}
1918

20-
h3 {
21-
display: flex;
22-
align-items: center;
23-
column-gap: 0.5rem;
24-
}
19+
h3 {
20+
display: flex;
21+
align-items: center;
22+
column-gap: 0.5rem;
23+
}
2524

26-
p {
27-
width: 100%;
28-
}
25+
p {
26+
width: 100%;
27+
}
2928

30-
code,
31-
pre {
32-
background-color: var(--option-color);
33-
border-radius: 4px;
34-
}
29+
code,
30+
pre {
31+
background-color: var(--option-color);
32+
border-radius: 4px;
33+
}
3534

36-
code {
37-
padding: 0.125rem 0.25rem;
38-
}
35+
code {
36+
padding: 0.125rem 0.25rem;
37+
}
3938

40-
pre {
41-
padding: 10px;
42-
overflow-x: auto;
43-
}
39+
pre {
40+
padding: 10px;
41+
overflow-x: auto;
4442
}
4543
}

‎src/components/quiz/quiz.css‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1-
@scope (.quiz) {
2-
:scope {
3-
background-color: var(--primary-color);
4-
border-radius: 16px;
5-
padding: 3rem 1.5rem;
6-
box-shadow: 2px 2px 3px var(--secondary-color);
7-
display: flex;
8-
flex-direction: column;
9-
row-gap: 1rem;
10-
position: relative;
1+
.quiz {
2+
background-color: var(--primary-color);
3+
border-radius: 16px;
4+
padding: 3rem 1.5rem;
5+
box-shadow: 2px 2px 3px var(--secondary-color);
6+
display: flex;
7+
flex-direction: column;
8+
row-gap: 1rem;
9+
position: relative;
1110

12-
.badge {
13-
position: absolute;
14-
top: 0.75rem;
15-
right: 1.5rem;
16-
background-color: var(--secondary-color);
17-
padding: 0.3rem 0.6rem;
18-
border-radius: 16px;
19-
}
11+
.badge {
12+
position: absolute;
13+
top: 0.75rem;
14+
right: 1.5rem;
15+
background-color: var(--secondary-color);
16+
padding: 0.3rem 0.6rem;
17+
border-radius: 16px;
2018
}
2119
}

0 commit comments

Comments
 (0)