Spaces:
Running
Running
Cursor Pointer
Browse files- src/style.css +12 -10
src/style.css
CHANGED
|
@@ -1,40 +1,42 @@
|
|
| 1 |
/* OUTPUT */
|
| 2 |
-
#html_output,
|
|
|
|
| 3 |
display: flex;
|
| 4 |
align-items: center;
|
| 5 |
justify-content: center;
|
| 6 |
flex-wrap: wrap;
|
| 7 |
}
|
| 8 |
|
| 9 |
-
#html_output
|
| 10 |
align-self: center;
|
| 11 |
-
height:200px;
|
| 12 |
border: 2px solid;
|
| 13 |
border-color: var(--block-border-color);
|
| 14 |
border-radius: var(--block-radius);
|
| 15 |
-
margin:1.5em;
|
| 16 |
}
|
| 17 |
|
| 18 |
/* EXAMPLE */
|
| 19 |
-
#html_examples
|
| 20 |
align-self: center;
|
| 21 |
height: 100px;
|
| 22 |
border: 2px solid;
|
| 23 |
border-color: var(--block-border-color);
|
| 24 |
border-radius: var(--block-radius);
|
| 25 |
-
margin
|
| 26 |
}
|
| 27 |
|
| 28 |
-
#html_examples
|
| 29 |
transition-duration: 0.2s;
|
| 30 |
}
|
| 31 |
|
| 32 |
-
#html_examples
|
| 33 |
transform: scale(1.2);
|
|
|
|
| 34 |
}
|
| 35 |
|
| 36 |
-
#html_examples
|
| 37 |
-
text-align: center;
|
| 38 |
}
|
| 39 |
|
| 40 |
#preset_examples {
|
|
|
|
| 1 |
/* OUTPUT */
|
| 2 |
+
#html_output,
|
| 3 |
+
#html_examples {
|
| 4 |
display: flex;
|
| 5 |
align-items: center;
|
| 6 |
justify-content: center;
|
| 7 |
flex-wrap: wrap;
|
| 8 |
}
|
| 9 |
|
| 10 |
+
#html_output>img {
|
| 11 |
align-self: center;
|
| 12 |
+
height: 200px;
|
| 13 |
border: 2px solid;
|
| 14 |
border-color: var(--block-border-color);
|
| 15 |
border-radius: var(--block-radius);
|
| 16 |
+
margin: 1.5em;
|
| 17 |
}
|
| 18 |
|
| 19 |
/* EXAMPLE */
|
| 20 |
+
#html_examples>figure>img {
|
| 21 |
align-self: center;
|
| 22 |
height: 100px;
|
| 23 |
border: 2px solid;
|
| 24 |
border-color: var(--block-border-color);
|
| 25 |
border-radius: var(--block-radius);
|
| 26 |
+
margin: .7em;
|
| 27 |
}
|
| 28 |
|
| 29 |
+
#html_examples>figure {
|
| 30 |
transition-duration: 0.2s;
|
| 31 |
}
|
| 32 |
|
| 33 |
+
#html_examples>figure:hover {
|
| 34 |
transform: scale(1.2);
|
| 35 |
+
cursor: pointer;
|
| 36 |
}
|
| 37 |
|
| 38 |
+
#html_examples>figure>figcaption {
|
| 39 |
+
text-align: center;
|
| 40 |
}
|
| 41 |
|
| 42 |
#preset_examples {
|