@jaisocx/css-code-snippet 1.4.1 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/MediaAndStyles/CssCodeSnippet_main_Webpack.css +0 -7
  2. package/MediaAndStyles/CssCodeSnippet_main_resolved.css +9 -1
  3. package/basetheme.preview.html +14 -2
  4. package/{dev_css_code_snippet__preview.html → css_code_snippet.preview.html} +87 -61
  5. package/index.preview.html +165 -138
  6. package/package.json +3 -3
package/MediaAndStyles/CssCodeSnippet_main_Webpack.css CHANGED
@@ -1,10 +1,3 @@
1
-
2
- /* @import url("@CssCodeSnippet_MediaAndStyles/responsive_size_Constants.css"); */
3
- /* @import url("@CssCodeSnippet_MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css"); */
4
- /* @import url("@CssCodeSnippet_MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-300.css"); */
5
-
6
-
7
-
8
1
  @import url("@CssCodeSnippet_MediaAndStyles/themes/color_themes/css_code_snippet__css_clean_start_2__color_theme.css");
9
2
 
10
3
  @import url("@CssCodeSnippet_MediaAndStyles/themes/color_themes/csstool-codesnippet-theme-colour-blue.css");
package/MediaAndStyles/CssCodeSnippet_main_resolved.css CHANGED
@@ -1,8 +1,16 @@
1
1
 
2
+ .jsx .CodeSnippetHolder.css_clean_start_2__color_theme {
3
+ --code-snippet--theme-color: var(--jsx--css-clean-start-2--body-tag--background);
4
+ --code-snippet--background-color: var(--jsx--css-clean-start-2--site--background);
2
5
 
3
6
 
7
+ --code-snippet--text-color: var(--jsx--css-clean-start-2--all-tags--color);
4
8
 
9
+ --code-snippet-tool--border-color: var(--jsx--css-clean-start-2--all-tags--border-color);
5
10
 
11
+ --code_snippet__column_numbers__text-color: var(--jsx--css-clean-start-2--all-tags--border-color);
12
+ --code_snippet__column_numbers__background-color: var(--jsx--css-clean-start-2--body-tag--background);
13
+ }
6
14
 
7
15
 
8
16
 
@@ -245,7 +253,7 @@
245
253
 
246
254
  --lines-numbers--content: var(--lines-numbers--content--99);
247
255
 
248
- --code_snippet__font_family: var(--css-clean-start-2--monospace--font-family) Courier, "Courier New", Menlo, Consolas, 'Liberation Mono';
256
+ --code_snippet__font_family: Courier, "Courier New", Menlo, Consolas, 'Liberation Mono';
249
257
 
250
258
 
251
259
 
package/basetheme.preview.html CHANGED
@@ -10,17 +10,29 @@
10
10
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
11
11
 
12
12
 
13
+ <link
14
+ id="icon_jaisocx"
15
+ rel="icon"
16
+ type="image/x-icon"
17
+ href="node_modules/@jaisocx/css_clean_start_lite/favicon/Icon_Jaisocx.ico"
18
+ href-fallback="../css_clean_start_lite/favicon/Icon_Jaisocx.ico"
19
+ onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
20
+ />
21
+
13
22
 
14
- <!-- CSS CLEAN START LITE SAME CSS VARIABLES NAMES, HOWEVER 10 TIMES SMALLER SINCE WITHOUT FINE-TUNING FOR RESPONSIVE STYLES-->
23
+
24
+ <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
15
25
  <link
16
26
  rel="stylesheet"
17
27
  type="text/css"
18
28
  charset="utf-8"
19
29
  href="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
20
30
  href-fallback="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
21
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
31
+ onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
22
32
  />
23
33
 
34
+
35
+
24
36
  <!-- CSS CODE SNIPPET-->
25
37
  <link
26
38
  fetchpriority="medium"
package/{dev_css_code_snippet__preview.html → css_code_snippet.preview.html} RENAMED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" class="jsx theme_visible_height theme_darkmode salad">
2
+ <html lang="en" id="css_code_snippet_preview" class="jsx theme_visible_height theme_darkmode salad">
3
3
  <head>
4
4
 
5
5
  <title> CssCodeSnippet </title>
@@ -11,41 +11,29 @@
11
11
 
12
12
 
13
13
 
14
- <!--# FAVICON -->
15
- <!-- <link-->
16
- <!-- rel="icon"-->
17
- <!-- type="image/x-icon"-->
18
- <!-- href="https://sandbox.basetasks.site/cdn/www/media/images/favicon/Icon_Jaisocx.ico"-->
19
- <!-- href-fallback="favicon/Icon_Jaisocx.ico"-->
20
- <!-- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"-->
21
- <!-- />-->
14
+ <link
15
+ id="icon_jaisocx"
16
+ rel="icon"
17
+ type="image/x-icon"
18
+ href="node_modules/@jaisocx/css_clean_start_lite/favicon/Icon_Jaisocx.ico"
19
+ href-fallback="../css_clean_start_lite/favicon/Icon_Jaisocx.ico"
20
+ onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
21
+ />
22
22
 
23
23
 
24
24
 
25
25
  <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
26
-
27
- <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
28
- <!-- <link
29
- rel="stylesheet"
30
- type="text/css"
31
- charset="utf-8"
32
- href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
33
- href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
34
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
35
- /> -->
36
-
37
-
38
-
39
26
  <link
40
27
  rel="stylesheet"
41
28
  type="text/css"
42
29
  charset="utf-8"
43
- href="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
44
- href-fallback="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
45
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
30
+ href="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
31
+ href-fallback="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
32
+ onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
46
33
  />
47
34
 
48
35
 
36
+
49
37
  <!--# STYLES CssCodeSnippet and theme_base -->
50
38
  <link
51
39
  fetchpriority="medium"
@@ -60,38 +48,22 @@
60
48
  rel="stylesheet"
61
49
  type="text/css"
62
50
  charset="utf-8"
63
- href="MediaAndStyles/CssCodeSnippet_main_relative.css"
51
+ href="MediaAndStyles/CssCodeSnippet_main_resolved.css"
64
52
  />
65
53
 
66
54
 
67
55
 
68
- <!-- <style>
69
- /* .jsx {
70
-
71
- }
72
-
73
- .jsx .CssCodeSnippet {
74
-
75
- } */
76
-
77
- </style> -->
78
-
79
-
80
-
81
- <style>
56
+ <style name="theme_turn_on">
82
57
 
83
58
  .jsx {
84
- --jsx--css-clean-start-2--site--padding: 2rem 0 0 0;
85
-
86
- --jsx--css-clean-start-2--h1--font-size: 1.05rem;
87
- --jsx--css-clean-start-2--h2--font-size: 0.9rem;
88
- --jsx--css-clean-start-2--h3--font-size: 0.83rem;
89
-
90
- --jsx--css-clean-start-2--h2--font-weight: 500;
91
-
92
59
  --theme-button-width: fit-content;
93
60
  }
94
61
 
62
+ .jsx button {
63
+ background-color: transparent;
64
+ text-align: left;
65
+ }
66
+
95
67
  .jsx themebuttons {
96
68
  width: fit-content;
97
69
  display: grid;
@@ -118,19 +90,13 @@
118
90
  border-bottom-color: var(--clean-start__text-color);
119
91
  }
120
92
 
121
- .jsx button {
122
- background-color: transparent;
123
- text-align: left;
124
- }
93
+ </style>
125
94
 
126
- #tooltip-button {
127
- font-family: fantasy;
128
- }
129
95
 
130
96
 
97
+ <style name="theme_visible_eight">
131
98
 
132
- .jsx.theme_visible_height body > main > content {
133
- padding: 0 1rem 0 1rem;
99
+ .jsx.theme_visible_height main > content {
134
100
 
135
101
  overflow-y: hidden;
136
102
 
@@ -147,7 +113,7 @@
147
113
  align-items: stretch;
148
114
  }
149
115
 
150
- .jsx.theme_visible_height > body > main > content > * {
116
+ .jsx.theme_visible_height main > content > * {
151
117
  flex-grow: 0;
152
118
  flex-shrink: 1;
153
119
  }
@@ -164,7 +130,7 @@
164
130
  flex-shrink: 1;
165
131
  }
166
132
 
167
- .jsx.theme_visible_height > body > main > page_signed {
133
+ .jsx.theme_visible_height main > page_signed {
168
134
  flex-shrink: 1;
169
135
 
170
136
  display: flex;
@@ -172,7 +138,7 @@
172
138
  justify-content: flex-start;
173
139
  align-items: center;
174
140
 
175
- padding: 2rem 0 0 0;
141
+ margin: 0 0 0 0;
176
142
 
177
143
  height: 6rem;
178
144
  min-height: 6rem;
@@ -180,7 +146,7 @@
180
146
  width: 100%;
181
147
  }
182
148
 
183
- .jsx.theme_visible_height > body > main > page_signed text {
149
+ .jsx.theme_visible_height main > page_signed text {
184
150
  display: flex;
185
151
  flex-direction: row;
186
152
  justify-content: flex-start;
@@ -202,6 +168,51 @@
202
168
 
203
169
 
204
170
 
171
+ <style name="css clean start overrides for this site">
172
+
173
+ .jsx#css_code_snippet_preview {
174
+ --jsx--css-clean-start-2--h1--font-size: 0.9rem;
175
+ }
176
+
177
+ </style>
178
+
179
+
180
+
181
+ <style name="css clean start lite mobile portrait">
182
+
183
+ @media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
184
+ only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
185
+
186
+ .jsx.theme_visible_height {
187
+
188
+ --responsive_size: responsive_size_til_h03_tablet_s_portrait;
189
+
190
+ --jsx--css-clean-start-2--site--min-width: 100%;
191
+ --jsx--css-clean-start-2--site--max-width: 100%;
192
+ --jsx--css-clean-start-2--site--width: 100%;
193
+
194
+ --jsx--css-clean-start-2--h1--font-size: 1rem;
195
+
196
+ }
197
+
198
+ .jsx.theme_visible_height h2,
199
+ .jsx.theme_visible_height h3,
200
+ .jsx.theme_visible_height description {
201
+ display: none;
202
+ }
203
+
204
+ .jsx.theme_visible_height main > page_signed {
205
+ height: 3rem;
206
+ min-height: 3rem;
207
+ max-height: 3rem;
208
+ }
209
+
210
+ }
211
+
212
+ </style>
213
+
214
+
215
+
205
216
  <style>
206
217
 
207
218
  .jsx .CodeSnippetHolder#code-snippet-example,
@@ -223,6 +234,21 @@
223
234
  --code-snippet-tool--overflow-y: auto;
224
235
  }
225
236
 
237
+
238
+
239
+ @media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
240
+ @media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
241
+
242
+ .jsx .CodeSnippetHolder#code-snippet-example,
243
+ .jsx .CodeSnippetHolder#code-snippet-example-thin {
244
+
245
+ --code-snippet-tool--overflow-x: hidden;
246
+ --code-snippet-tool--width: 100%;
247
+
248
+ }
249
+
250
+ }
251
+
226
252
  </style>
227
253
 
228
254
  </head>
package/index.preview.html CHANGED
@@ -10,39 +10,25 @@
10
10
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
11
11
 
12
12
 
13
-
14
- <!--# FAVICON -->
15
- <!-- <link-->
16
- <!-- rel="icon"-->
17
- <!-- type="image/x-icon"-->
18
- <!-- href="https://sandbox.basetasks.site/cdn/www/media/images/favicon/Icon_Jaisocx.ico"-->
19
- <!-- href-fallback="favicon/Icon_Jaisocx.ico"-->
20
- <!-- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"-->
21
- <!-- />-->
22
-
23
-
24
-
25
- <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
26
-
27
- <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
28
- <!-- <link
29
- rel="stylesheet"
30
- type="text/css"
31
- charset="utf-8"
32
- href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
33
- href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
34
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
35
- /> -->
13
+ <link
14
+ id="icon_jaisocx"
15
+ rel="icon"
16
+ type="image/x-icon"
17
+ href="node_modules/@jaisocx/css_clean_start_lite/favicon/Icon_Jaisocx.ico"
18
+ href-fallback="../css_clean_start_lite/favicon/Icon_Jaisocx.ico"
19
+ onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
20
+ />
36
21
 
37
22
 
38
23
 
24
+ <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
39
25
  <link
40
26
  rel="stylesheet"
41
27
  type="text/css"
42
28
  charset="utf-8"
43
- href="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
44
- href-fallback="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
45
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
29
+ href="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
30
+ href-fallback="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
31
+ onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
46
32
  />
47
33
 
48
34
 
@@ -65,167 +51,208 @@
65
51
 
66
52
 
67
53
 
68
- <!-- <style>
69
- /* .jsx {
54
+ <style name="theme_turn_on">
70
55
 
71
- }
56
+ .jsx {
57
+ --theme-button-width: fit-content;
58
+ }
72
59
 
73
- .jsx .CssCodeSnippet {
60
+ .jsx button {
61
+ background-color: transparent;
62
+ text-align: left;
63
+ }
74
64
 
75
- } */
65
+ .jsx themebuttons {
66
+ width: fit-content;
67
+ display: grid;
68
+ grid-auto-flow: column;
69
+ column-gap: 3rem;
70
+ margin: 0.9rem 0px 1.6rem 0px;
71
+ }
76
72
 
77
- </style> -->
73
+ .jsx themebuttons button {
74
+ width: var(--theme-button-width);
75
+ }
78
76
 
77
+ .current::after {
78
+ content: "";
79
+ position: absolute;
80
+ bottom: -0.3rem;
81
+ left: 0;
82
+ width: 100%;
83
+ height: 0;
84
+ max-height: 0;
85
+ overflow-y: hidden;
86
+ border-bottom-width: 0.14rem;
87
+ border-bottom-style: solid;
88
+ border-bottom-color: var(--clean-start__text-color);
89
+ }
79
90
 
91
+ </style>
80
92
 
81
- <style>
82
93
 
83
- .jsx {
84
- --jsx--css-clean-start-2--site--padding: 2rem 0 0 0;
85
94
 
86
- --jsx--css-clean-start-2--h1--font-size: 1.05rem;
87
- --jsx--css-clean-start-2--h2--font-size: 0.9rem;
88
- --jsx--css-clean-start-2--h3--font-size: 0.83rem;
95
+ <style name="theme_visible_eight">
89
96
 
90
- --jsx--css-clean-start-2--h2--font-weight: 500;
97
+ .jsx.theme_visible_height main > content {
91
98
 
92
- --theme-button-width: fit-content;
93
- }
99
+ overflow-y: hidden;
94
100
 
95
- .jsx themebuttons {
96
- width: fit-content;
97
- display: grid;
98
- grid-auto-flow: column;
99
- column-gap: 3rem;
100
- margin: 0.9rem 0px 1.6rem 0px;
101
- }
101
+ min-height: unset;
102
+ height: unset;
102
103
 
103
- .jsx themebuttons button {
104
- width: var(--theme-button-width);
105
- }
104
+ flex-grow: 1;
105
+ flex-shrink: 1;
106
106
 
107
- .current::after {
108
- content: "";
109
- position: absolute;
110
- bottom: -0.3rem;
111
- left: 0;
112
- width: 100%;
113
- height: 0;
114
- max-height: 0;
115
- overflow-y: hidden;
116
- border-bottom-width: 0.14rem;
117
- border-bottom-style: solid;
118
- border-bottom-color: var(--clean-start__text-color);
119
- }
107
+ display: flex;
108
+ flex-direction: column;
109
+ flex-basis: auto;
110
+ justify-content: stretch;
111
+ align-items: stretch;
112
+ }
120
113
 
121
- .jsx button {
122
- background-color: transparent;
123
- text-align: left;
124
- }
114
+ .jsx.theme_visible_height main > content > * {
115
+ flex-grow: 0;
116
+ flex-shrink: 1;
117
+ }
125
118
 
126
- #tooltip-button {
127
- font-family: fantasy;
128
- }
119
+ .jsx.theme_visible_height .CodeSnippetHolder {
120
+ --code-snippet-tool--overflow-y: auto;
121
+ --code-snippet-tool--height: unset;
129
122
 
123
+ min-height: 0;
124
+ max-height: unset;
125
+ height: unset;
130
126
 
127
+ flex-grow: 1;
128
+ flex-shrink: 1;
129
+ }
131
130
 
132
- .jsx.theme_visible_height body > main > content {
133
- padding: 0 1rem 0 1rem;
131
+ .jsx.theme_visible_height main > page_signed {
132
+ flex-shrink: 1;
134
133
 
135
- overflow-y: hidden;
134
+ display: flex;
135
+ flex-direction: row;
136
+ justify-content: flex-start;
137
+ align-items: center;
136
138
 
137
- min-height: unset;
138
- height: unset;
139
+ margin: 0 0 0 0;
139
140
 
140
- flex-grow: 1;
141
- flex-shrink: 1;
141
+ height: 6rem;
142
+ min-height: 6rem;
143
+ max-height: 6rem;
144
+ width: 100%;
145
+ }
142
146
 
143
- display: flex;
144
- flex-direction: column;
145
- flex-basis: auto;
146
- justify-content: stretch;
147
- align-items: stretch;
148
- }
147
+ .jsx.theme_visible_height main > page_signed text {
148
+ display: flex;
149
+ flex-direction: row;
150
+ justify-content: flex-start;
151
+ align-items: center;
149
152
 
150
- .jsx.theme_visible_height > body > main > content > * {
151
- flex-grow: 0;
152
- flex-shrink: 1;
153
- }
153
+ height: 100%;
154
+ min-height: 100%;
155
+ max-height: 100%;
154
156
 
155
- .jsx.theme_visible_height .CodeSnippetHolder {
156
- --code-snippet-tool--overflow-y: auto;
157
- --code-snippet-tool--height: unset;
157
+ width: 100%;
158
158
 
159
- min-height: 0;
160
- max-height: unset;
161
- height: unset;
159
+ padding: 0 1rem 0 1rem;
162
160
 
163
- flex-grow: 1;
164
- flex-shrink: 1;
165
- }
161
+ color: var(--code-snippet--text-color);
162
+ background-color: var(--code-snippet-tool--border-color);
163
+ }
166
164
 
167
- .jsx.theme_visible_height > body > main > page_signed {
168
- flex-shrink: 1;
165
+ </style>
169
166
 
170
- display: flex;
171
- flex-direction: row;
172
- justify-content: flex-start;
173
- align-items: center;
174
167
 
175
- padding: 2rem 0 0 0;
176
168
 
177
- height: 6rem;
178
- min-height: 6rem;
179
- max-height: 6rem;
180
- width: 100%;
181
- }
169
+ <style name="css clean start overrides for this site">
182
170
 
183
- .jsx.theme_visible_height > body > main > page_signed text {
184
- display: flex;
185
- flex-direction: row;
186
- justify-content: flex-start;
187
- align-items: center;
171
+ .jsx#css_code_snippet_preview {
172
+ --jsx--css-clean-start-2--h1--font-size: 0.9rem;
173
+ }
188
174
 
189
- height: 100%;
190
- min-height: 100%;
191
- max-height: 100%;
175
+ </style>
192
176
 
193
- width: 100%;
194
177
 
195
- padding: 0 1rem 0 1rem;
196
178
 
197
- color: var(--code-snippet--text-color);
198
- background-color: var(--code-snippet-tool--border-color);
199
- }
179
+ <style name="css clean start lite mobile portrait">
200
180
 
201
- </style>
181
+ @media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
182
+ only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
202
183
 
184
+ .jsx.theme_visible_height {
203
185
 
186
+ --responsive_size: responsive_size_til_h03_tablet_s_portrait;
204
187
 
205
- <style>
188
+ --jsx--css-clean-start-2--site--min-width: 100%;
189
+ --jsx--css-clean-start-2--site--max-width: 100%;
190
+ --jsx--css-clean-start-2--site--width: 100%;
206
191
 
207
- .jsx .CodeSnippetHolder#code-snippet-example,
208
- .jsx .CodeSnippetHolder#code-snippet-example-thin {
209
- /* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
210
- on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
211
- --lines-numbers--content: var(--lines-numbers--content--99);
212
- --lines-number: 29;
192
+ --jsx--css-clean-start-2--h1--font-size: 1rem;
193
+
194
+ }
195
+
196
+ .jsx.theme_visible_height h2,
197
+ .jsx.theme_visible_height h3,
198
+ .jsx.theme_visible_height description {
199
+ display: none;
213
200
  }
214
201
 
215
- .jsx .CodeSnippetHolder#code-snippet-example {
216
- --code-snippet-tool--width: fit-content;
217
- --code-snippet-tool--overflow-y: auto;
202
+ .jsx.theme_visible_height main > page_signed {
203
+ height: 3rem;
204
+ min-height: 3rem;
205
+ max-height: 3rem;
218
206
  }
219
207
 
208
+
209
+ }
210
+
211
+ </style>
212
+
213
+
214
+
215
+ <style>
216
+
217
+ .jsx .CodeSnippetHolder#code-snippet-example,
218
+ .jsx .CodeSnippetHolder#code-snippet-example-thin {
219
+ /* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
220
+ on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
221
+ --lines-numbers--content: var(--lines-numbers--content--99);
222
+ --lines-number: 29;
223
+ }
224
+
225
+ .jsx .CodeSnippetHolder#code-snippet-example {
226
+ --code-snippet-tool--width: fit-content;
227
+ --code-snippet-tool--overflow-y: auto;
228
+ }
229
+
230
+ .jsx .CodeSnippetHolder#code-snippet-example-thin {
231
+ --code-snippet-tool--width: 28rem;
232
+ --code-snippet-tool--height: 22rem;
233
+ --code-snippet-tool--overflow-y: auto;
234
+ }
235
+
236
+
237
+
238
+ @media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
239
+ @media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
240
+
241
+ .jsx .CodeSnippetHolder#code-snippet-example,
220
242
  .jsx .CodeSnippetHolder#code-snippet-example-thin {
221
- --code-snippet-tool--width: 28rem;
222
- --code-snippet-tool--height: 22rem;
223
- --code-snippet-tool--overflow-y: auto;
243
+
244
+ --code-snippet-tool--overflow-x: hidden;
245
+ --code-snippet-tool--width: 100%;
246
+
224
247
  }
225
248
 
226
- </style>
249
+ }
250
+
251
+ </style>
252
+
253
+
227
254
 
228
- </head>
255
+ </head>
229
256
 
230
257
  <body>
231
258
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "author": "ILLIA POLIANSKYI, Jaisocx Company",
3
3
  "name": "@jaisocx/css-code-snippet",
4
- "version": "1.4.1",
4
+ "version": "1.4.3",
5
5
  "description": "Css sites tool rendering code blocks with numbered code rows",
6
6
  "keywords": [
7
7
  "css",
@@ -14,7 +14,7 @@
14
14
 
15
15
  "index.preview.html",
16
16
  "basetheme.preview.html",
17
- "dev_css_code_snippet__preview.html",
17
+ "css_code_snippet.preview.html",
18
18
 
19
19
  "MediaAndStyles/*.css",
20
20
  "MediaAndStyles/lines-numbers-variables",
@@ -27,7 +27,7 @@
27
27
  "transpiled/Simple"
28
28
  ],
29
29
  "optionalDependencies": {
30
- "@jaisocx/css_clean_start_lite": "~1.0.2"
30
+ "@jaisocx/css_clean_start_lite": "~1.0.3"
31
31
  },
32
32
  "type": "module",
33
33
  "main": "./transpiled/CommonJS/index.js",