diff options
| author | Hsieh Chin Fan <pham@topo.tw> | 2024-10-06 12:06:27 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-10-06 12:06:27 +0800 |
| commit | 1b37f7d7f1554f4ef4cd185c1181d54d9956b1db (patch) | |
| tree | 54057c5cee90f3a93b240d77828f14f90af8c93f /snippets/css_html_structure | |
| parent | a9386c536189f2aaf38c9e2ba674a096657ca366 (diff) | |
Update
Diffstat (limited to 'snippets/css_html_structure')
| -rw-r--r-- | snippets/css_html_structure | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/snippets/css_html_structure b/snippets/css_html_structure new file mode 100644 index 0000000..e96d9f8 --- /dev/null +++ b/snippets/css_html_structure | |||
| @@ -0,0 +1,85 @@ | |||
| 1 | <style> | ||
| 2 | ._dumby { | ||
| 3 | &::before { | ||
| 4 | content: 'class="Dumby"'; | ||
| 5 | } | ||
| 6 | &, & * { | ||
| 7 | display: flex; | ||
| 8 | position: relative; | ||
| 9 | padding-top:2rem; | ||
| 10 | margin: 0.5rem; | ||
| 11 | &::before { | ||
| 12 | position: absolute; | ||
| 13 | top: 0.3rem; | ||
| 14 | left: 1rem; | ||
| 15 | } | ||
| 16 | } | ||
| 17 | |||
| 18 | border: 5px solid red; | ||
| 19 | width: 100%; | ||
| 20 | background: rgba(255, 0, 0, 20%); | ||
| 21 | } | ||
| 22 | ._SemanticHtml { | ||
| 23 | flex: 80%; | ||
| 24 | display: block; | ||
| 25 | border: 3px solid blue; | ||
| 26 | background: skyblue; | ||
| 27 | &::before { | ||
| 28 | content: 'class="SemanticHtml"'; | ||
| 29 | } | ||
| 30 | } | ||
| 31 | ._dumby-block { | ||
| 32 | border: 3px solid gray; | ||
| 33 | background: lightgray; | ||
| 34 | &::before { | ||
| 35 | content: 'class="dumby-block"'; | ||
| 36 | } | ||
| 37 | } | ||
| 38 | ._target { | ||
| 39 | border: 3px solid chocolate; | ||
| 40 | background: wheat; | ||
| 41 | width: 100%; | ||
| 42 | height: 300px; | ||
| 43 | display: flex; | ||
| 44 | padding-top: 3rem; | ||
| 45 | &::before { | ||
| 46 | content: 'CUSTOM SELECTOR, by default:\Apre:has(.language-map)'; | ||
| 47 | white-space: pre; | ||
| 48 | } | ||
| 49 | } | ||
| 50 | ._map-container { | ||
| 51 | flex: 50%; | ||
| 52 | border: 3px solid steelblue; | ||
| 53 | background: lightCyan; | ||
| 54 | padding: 0.5rem; | ||
| 55 | &::before { | ||
| 56 | transform: rotate(0.13turn) translate(0.7rem, 2.5rem); | ||
| 57 | content: 'class=\A"map-container"'; | ||
| 58 | white-space: pre; | ||
| 59 | } | ||
| 60 | } | ||
| 61 | ._Showcase { | ||
| 62 | flex: 30%; | ||
| 63 | border: 3px solid green; | ||
| 64 | background: lightgreen; | ||
| 65 | &::before { | ||
| 66 | content: 'class="Showcase"'; | ||
| 67 | } | ||
| 68 | } | ||
| 69 | </style> | ||
| 70 | |||
| 71 | <div class="_dumby"> | ||
| 72 | <div class="_SemanticHtml"> | ||
| 73 | <div class="_dumby-block"> | ||
| 74 | <div class="_target"> | ||
| 75 | <div class="_map-container"></div> | ||
| 76 | <div class="_map-container"></div> | ||
| 77 | <div class="_map-container"></div> | ||
| 78 | </div> | ||
| 79 | </div> | ||
| 80 | <div class="_dumby-block"></div> | ||
| 81 | <div class="_dumby-block"></div> | ||
| 82 | </div> | ||
| 83 | <div class="_Showcase"> | ||
| 84 | </div> | ||
| 85 | </div> | ||