@jaisocx/css-clean-start-2 1.2.1 → 1.2.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 (9) hide show
  1. package/MediaAndStyles/CssCleanStart_2_main_resolved.css +1 -1
  2. package/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css +1 -1
  3. package/MediaAndStyles/themes/theme_base/CssCleanStart_2_theme_base_main.css +1 -1
  4. package/README.md +1 -1
  5. package/{index.example.html → index.preview.html} +3 -30
  6. package/package.json +6 -4
  7. package/responsive_sizes.html +137 -87
  8. package/{css_clean_start_2.example.html → with_preloaded_fonts_cdn__preview.html} +4 -5
  9. package/with_preloaded_fonts_node_modules__preview.html +297 -0
package/MediaAndStyles/CssCleanStart_2_main_resolved.css CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
 
34
34
 
35
- --jsx--css-clean-start-2--body-tag--background: #eee;
35
+ --jsx--css-clean-start-2--body-tag--background: #fafff5;
36
36
  --jsx--css-clean-start-2--site--background: #fff;
37
37
 
38
38
 
package/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css CHANGED
@@ -31,7 +31,7 @@
31
31
 
32
32
 
33
33
 
34
- --jsx--css-clean-start-2--body-tag--background: #eee;
34
+ --jsx--css-clean-start-2--body-tag--background: #fafff5;
35
35
  --jsx--css-clean-start-2--site--background: #fff;
36
36
 
37
37
 
package/MediaAndStyles/themes/theme_base/CssCleanStart_2_theme_base_main.css CHANGED
@@ -8,7 +8,7 @@
8
8
  /** -------------------------------
9
9
  background styles of the html elem <body>, and, the direct anchester html elem <main>
10
10
  */
11
- --jsx--css-clean-start-2--body-tag--background: #eee;
11
+ --jsx--css-clean-start-2--body-tag--background: #fafff5;
12
12
  --jsx--css-clean-start-2--site--background: #fff;
13
13
 
14
14
 
package/README.md CHANGED
@@ -52,7 +52,7 @@ several .css files will be loaded with size of very few KB.
52
52
 
53
53
 
54
54
  ## Github
55
- [https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/css_tools/CssCleanStart_2](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/css_tools/CssCleanStart_2)
55
+ [https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/Jaisocx_SitesTools/sites_tools/css_tools/CssCleanStart_2](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/Jaisocx_SitesTools/sites_tools/css_tools/CssCleanStart_2)
56
56
 
57
57
 
58
58
 
package/{index.example.html → index.preview.html} RENAMED
@@ -25,34 +25,7 @@
25
25
  type="image/x-icon"
26
26
  href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
27
27
  href-fallback="favicon/Icon_Sandbox_Brightday.ico"
28
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
29
- />
30
-
31
-
32
-
33
- <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
34
- <link
35
- fetchpriority="high"
36
- rel="preload"
37
- as="font"
38
- type="font/ttf"
39
- href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
40
- />
41
-
42
- <link
43
- fetchpriority="high"
44
- rel="preload"
45
- as="font"
46
- type="font/ttf"
47
- href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
48
- />
49
-
50
- <!--# CSS FOR FONTS -->
51
- <link
52
- rel="stylesheet"
53
- type="text/css"
54
- charset="utf-8"
55
- href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
28
+ onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
56
29
  />
57
30
 
58
31
 
@@ -103,7 +76,7 @@
103
76
 
104
77
 
105
78
 
106
- <head>
79
+ </head>
107
80
 
108
81
  <body>
109
82
 
@@ -111,7 +84,7 @@
111
84
 
112
85
  <h1>Css Clean Start 2</h1>
113
86
  <h2>@jaisocx/css-clean-start-2</h2>
114
- <h3>index.example.html</h3>
87
+ <h3> index.preview.html </h3>
115
88
  <description>
116
89
  Css sites resetting default styles with main.css of few hundereds css code lines,
117
90
  and the very nice infrastructure for responsive sites bugfixing and fine-tuning
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jaisocx/css-clean-start-2",
3
- "version": "1.2.1",
3
+ "version": "1.2.3",
4
4
  "description": "Css sites resetting default styles with main.css of few hundereds css code lines, and the very nice infrastructure for responsive sites bugfixing and fine-tuning",
5
5
  "author": "Jaisocx Company",
6
6
  "keywords": [
@@ -10,9 +10,10 @@
10
10
  "files": [
11
11
  "favicon",
12
12
 
13
- "index.example.html",
14
- "css_clean_start_2.example.html",
13
+ "index.preview.html",
15
14
  "responsive_sizes.html",
15
+ "with_preloaded_fonts_cdn__preview.html",
16
+ "with_preloaded_fonts_node_modules__preview.html",
16
17
 
17
18
  "MediaAndStyles/*.css",
18
19
  "MediaAndStyles/themes",
@@ -25,7 +26,8 @@
25
26
  "README.md"
26
27
  ],
27
28
  "optionalDependencies": {
28
- "@jaisocx/responsive-sizes": "~1.3.2"
29
+ "@jaisocx/media_tools_fonts_base": "~1.0.5",
30
+ "@jaisocx/responsive-sizes": "~1.3.1"
29
31
  },
30
32
  "private": false,
31
33
  "publishConfig": {
package/responsive_sizes.html CHANGED
@@ -1,13 +1,13 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" class="jsx">
3
- <head>
4
- <title>Responsive Sizes</title>
2
+ <html lang="en" class="jsx example_responsive_sizes">
3
+ <head>
4
+ <title>Responsive Sizes</title>
5
5
 
6
- <meta charset="utf-8">
7
- <meta content="width=device-width, initial-scale=1.0" name="viewport">
6
+ <meta charset="utf-8">
7
+ <meta content="width=device-width, initial-scale=1.0" name="viewport">
8
8
 
9
9
 
10
- <base href="./" >
10
+ <base href="./" >
11
11
 
12
12
 
13
13
 
@@ -20,124 +20,175 @@
20
20
  -->
21
21
  <link rel="stylesheet" href="MediaAndStyles/CssCleanStart_2_main_relative.css">
22
22
 
23
+ <style>
23
24
 
25
+ .jsx.example_responsive_sizes {
24
26
 
25
- <script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizesConstants.js"></script>
26
- <script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizes.js"></script>
27
+ --jsx--css-clean-start-2--body-tag--background: white;
28
+ --jsx--css-clean-start-2--site--background: #eafee5;
27
29
 
30
+ --jsx--css-clean-start-2--h--font-weight: 600;
31
+ --jsx--css-clean-start-2--h--color: #524232;
32
+ --jsx--css-clean-start-2--h--margin: 0 0 0 0;
33
+ --jsx--css-clean-start-2--h--padding: 0 0 0 0;
34
+
35
+ --jsx--css-clean-start-2--h1--font-size: 2.0rem;
36
+ --jsx--css-clean-start-2--h1--line-height: 2.95rem;
37
+
38
+ --jsx--css-clean-start-2--h2--font-size: 1.4rem;
39
+ --jsx--css-clean-start-2--h2--line-height: 2.7rem;
40
+
41
+ }
42
+
43
+ #info {
44
+ display: block;
45
+ height: auto;
46
+
47
+ padding: 2rem;
48
+
49
+ font-size: 1.2rem;
50
+ line-height: 1.9rem;
51
+
52
+ font-family: var(--css-clean-start-2--sans--font-family);
53
+ letter-spacing: 1px;
54
+
55
+ color: #f5f5f5;
56
+
57
+ background: #0F2027; /* fallback for old browsers */
58
+ background: -webkit-linear-gradient(to left, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */
59
+ background: linear-gradient(to left, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
60
+
61
+ overflow-y: visible;
62
+ overflow-x: scroll;
63
+ }
64
+
65
+ </style>
28
66
  </head>
29
67
  <body>
30
68
 
31
69
  <main>
32
70
 
33
-
34
71
  <h1>Responsive Sizes</h1>
35
72
 
36
73
 
37
74
  <h2 id="responsive_sizes">Tests</h2>
38
75
 
39
- <pre id="info" style="display: block; height: auto; overflow-y: visible; overflow-x: scroll; padding: 2rem; background-color: darkturquoise; color: white;"></pre>
76
+ <pre id="info"></pre>
40
77
 
41
78
  </main>
42
79
 
43
- <script>
44
- let responsiveSizesConstants = new Object();
45
- let responsiveSizesInstance = new Object();
80
+ </body>
46
81
 
47
- function addOnSite( html ) {
48
- let info = document.getElementById('info');
49
82
 
50
- let locHtml = html + "\n\n";
51
83
 
52
- info.insertAdjacentHTML( 'beforeEnd', locHtml );
53
- }
84
+ <script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizesConstants.js"></script>
85
+ <script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizes.js"></script>
54
86
 
55
- function setOnSite( html ) {
56
- let info = document.getElementById('info');
87
+ <script src="../responsive-sizes/transpiled/Simple/ResponsiveSizesConstants.js"></script>
88
+ <script src="../responsive-sizes/transpiled/Simple/ResponsiveSizes.js"></script>
57
89
 
58
- info.innerHTML = html;
59
- }
60
90
 
61
- function applySizesInfo( force ) {
62
91
 
63
- let foreceUpdateSizesInfo_false = false;
92
+ <script>
93
+ let responsiveSizesConstants = new Object();
94
+ let responsiveSizesInstance = new Object();
64
95
 
65
- let html_size1 = responsiveSizesInstance.mobile( force ) ? "mobile" : "";
66
- let html_size2 = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false ) ? "tablet" : "";
67
- let html_size3 = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false ) ? "desktop" : "";
96
+ function addOnSite( html ) {
97
+ let info = document.getElementById('info');
68
98
 
69
- let size = responsiveSizesInstance.getCssVariableArray()[4];
99
+ let locHtml = html + "\n\n";
70
100
 
71
- let html_orientation1 = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false ) ? "portrait" : "";
72
- let html_orientation2 = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false ) ? "landscape" : "";
101
+ info.insertAdjacentHTML( 'beforeEnd', locHtml );
102
+ }
73
103
 
74
- let html_array = [
75
- html_size1,
76
- html_size2,
77
- html_size3,
78
- " ",
79
- size,
80
- " ",
81
- html_orientation1,
82
- html_orientation2,
83
- ];
104
+ function setOnSite( html ) {
105
+ let info = document.getElementById('info');
84
106
 
85
- let html = html_array.join( "" );
107
+ info.innerHTML = html;
108
+ }
86
109
 
87
- let info = document.getElementById('responsive_sizes');
110
+ function applySizesInfo( force ) {
88
111
 
89
- info.innerHTML = html;
90
- }
112
+ let foreceUpdateSizesInfo_false = false;
91
113
 
114
+ let html_size1 = responsiveSizesInstance.mobile( force ) ? "mobile" : "";
115
+ let html_size2 = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false ) ? "tablet" : "";
116
+ let html_size3 = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false ) ? "desktop" : "";
92
117
 
93
- function responsiveSizesTest( force ) {
94
- // responsiveSizesInstance = new ResponsiveSizes();
118
+ let size = responsiveSizesInstance.getCssVariableArray()[4];
95
119
 
96
- let responsiveSizeName = responsiveSizesInstance.getResponsiveSizeName( force );
120
+ let html_orientation1 = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false ) ? "portrait" : "";
121
+ let html_orientation2 = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false ) ? "landscape" : "";
97
122
 
98
- let foreceUpdateSizesInfo_false = false;
99
- let mobile = responsiveSizesInstance.mobile( foreceUpdateSizesInfo_false );
100
- let tablet = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false );
101
- let desktop = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false );
102
- let orientationPortrait = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false );
103
- let orientationLandscape = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false );
123
+ let html_array = [
124
+ html_size1,
125
+ html_size2,
126
+ html_size3,
127
+ " ",
128
+ size,
129
+ " ",
130
+ html_orientation1,
131
+ html_orientation2,
132
+ ];
104
133
 
105
- let lines = {
106
- "responsiveSizeName": responsiveSizeName,
107
- "mobile": mobile,
108
- "tablet": tablet,
109
- "desktop": desktop,
110
- "orientationPortrait": orientationPortrait,
111
- "orientationLandscape": orientationLandscape
112
- };
113
- let locHtml = JSON.stringify(lines, null, 2);
134
+ let html = html_array.join( "" );
114
135
 
115
- addOnSite( responsiveSizeName );
136
+ let info = document.getElementById('responsive_sizes');
116
137
 
117
- addOnSite( locHtml );
118
- }
138
+ info.innerHTML = html;
139
+ }
119
140
 
120
- function responsiveSizeNameTestJson() {
121
- // responsiveSizesInstance = new ResponsiveSizes();
122
- let responsiveSizeJsonText = responsiveSizesInstance.toString();
123
- setOnSite( responsiveSizeJsonText );
124
- }
125
141
 
126
- function addResizeEventHandler() {
127
- window.addEventListener('resize', () => {
128
- applySizesInfo( true );
129
- responsiveSizeNameTestJson( false );
130
- });
131
- }
142
+ function responsiveSizesTest( force ) {
143
+ // responsiveSizesInstance = new ResponsiveSizes();
132
144
 
133
- function assignEventsHandlers() {
134
- addResizeEventHandler();
135
- }
145
+ let responsiveSizeName = responsiveSizesInstance.getResponsiveSizeName( force );
146
+
147
+ let foreceUpdateSizesInfo_false = false;
148
+ let mobile = responsiveSizesInstance.mobile( foreceUpdateSizesInfo_false );
149
+ let tablet = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false );
150
+ let desktop = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false );
151
+ let orientationPortrait = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false );
152
+ let orientationLandscape = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false );
153
+
154
+ let lines = {
155
+ "responsiveSizeName": responsiveSizeName,
156
+ "mobile": mobile,
157
+ "tablet": tablet,
158
+ "desktop": desktop,
159
+ "orientationPortrait": orientationPortrait,
160
+ "orientationLandscape": orientationLandscape
161
+ };
162
+ let locHtml = JSON.stringify(lines, null, 2);
163
+
164
+ addOnSite( responsiveSizeName );
165
+
166
+ addOnSite( locHtml );
167
+ }
136
168
 
137
- // Call the function to load remote data when the DOM is fully loaded
138
- // This ensures that the function is called after the HTML content is loaded
139
- // and the DOM is ready for manipulation
140
- document.addEventListener('DOMContentLoaded', () => {
169
+ function responsiveSizeNameTestJson() {
170
+ // responsiveSizesInstance = new ResponsiveSizes();
171
+ let responsiveSizeJsonText = responsiveSizesInstance.toString();
172
+ setOnSite( responsiveSizeJsonText );
173
+ }
174
+
175
+ function addResizeEventHandler() {
176
+ window.addEventListener('resize', () => {
177
+ applySizesInfo( true );
178
+ responsiveSizeNameTestJson( false );
179
+ });
180
+ }
181
+
182
+ function assignEventsHandlers() {
183
+ addResizeEventHandler();
184
+ }
185
+
186
+ // Call the function to load remote data when the DOM is fully loaded
187
+ // This ensures that the function is called after the HTML content is loaded
188
+ // and the DOM is ready for manipulation
189
+ document.addEventListener (
190
+ "DOMContentLoaded",
191
+ () => {
141
192
  responsiveSizesConstants = new ResponsiveSizesConstants();
142
193
  responsiveSizesInstance = new ResponsiveSizes();
143
194
  responsiveSizesInstance
@@ -149,10 +200,9 @@
149
200
  applySizesInfo( true );
150
201
  responsiveSizeNameTestJson( false );
151
202
  // responsiveSizesTest( false );
152
- });
153
- </script>
154
-
155
- </body>
203
+ }
204
+ );
205
+ </script>
156
206
  </html>
157
207
 
158
208
 
package/{css_clean_start_2.example.html → with_preloaded_fonts_cdn__preview.html} RENAMED
@@ -17,7 +17,7 @@
17
17
  type="image/x-icon"
18
18
  href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
19
19
  href-fallback="favicon/Icon_Jaisocx.ico"
20
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
20
+ onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
21
21
  /> -->
22
22
 
23
23
  <link
@@ -25,7 +25,7 @@
25
25
  type="image/x-icon"
26
26
  href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
27
27
  href-fallback="favicon/Icon_Sandbox_Brightday.ico"
28
- onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
28
+ onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
29
29
  />
30
30
 
31
31
 
@@ -103,15 +103,14 @@
103
103
 
104
104
 
105
105
 
106
- <head>
107
-
106
+ </head>
108
107
  <body>
109
108
 
110
109
  <main>
111
110
 
112
111
  <h1>Css Clean Start 2</h1>
113
112
  <h2>@jaisocx/css-clean-start-2</h2>
114
- <h3>css_clean_start_2.example</h3>
113
+ <h3> with_preloaded_fonts_cdn__preview.html </h3>
115
114
  <description>
116
115
  Css sites resetting default styles with main.css of few hundereds css code lines,
117
116
  and the very nice infrastructure for responsive sites bugfixing and fine-tuning
package/with_preloaded_fonts_node_modules__preview.html ADDED
@@ -0,0 +1,297 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="jsx example">
3
+ <head>
4
+
5
+ <title>CssCleanStart 2</title>
6
+
7
+ <base href="./">
8
+
9
+ <meta charset="utf-8" />
10
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
11
+
12
+
13
+
14
+ <!--# FAVICON -->
15
+ <!-- <link
16
+ rel="icon"
17
+ type="image/x-icon"
18
+ href="https://sandbox.brightday.email/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
+ <link
24
+ rel="icon"
25
+ type="image/x-icon"
26
+ href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
27
+ href-fallback="favicon/Icon_Sandbox_Brightday.ico"
28
+ onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
29
+ />
30
+
31
+
32
+
33
+ <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
34
+ <!-- The fonts are loaded just one time -->
35
+ <link
36
+ fetchpriority="high"
37
+ rel="preload"
38
+ as="font"
39
+ type="font/ttf"
40
+ crossorigin=""
41
+ href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-Regular.ttf"
42
+ href-fallback="../media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-Regular.ttf"
43
+ onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
44
+ />
45
+
46
+ <link
47
+ fetchpriority="high"
48
+ rel="preload"
49
+ as="font"
50
+ type="font/ttf"
51
+ crossorigin=""
52
+ href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-SemiBold.ttf"
53
+ href-fallback="../media_tools_fonts_base/MediaAndStyles/fonts/Libre_Franklin/static/LibreFranklin-SemiBold.ttf"
54
+ onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
55
+ />
56
+
57
+ <!-- .css LOADING FONTS-->
58
+ <link
59
+ rel="stylesheet"
60
+ type="text/css"
61
+ href="node_modules/@jaisocx/media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
62
+ href-fallback="../media_tools_fonts_base/MediaAndStyles/JscFonts_main_resolved.css"
63
+ onerror="javascript: ( () => { console.log( this ); this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
64
+ />
65
+
66
+
67
+
68
+ <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
69
+
70
+ <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
71
+ <link
72
+ rel="stylesheet"
73
+ type="text/css"
74
+ charset="utf-8"
75
+ href="MediaAndStyles/CssCleanStart_2_main_relative.css"
76
+ />
77
+
78
+ <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL -->
79
+ <!-- <link-->
80
+ <!-- rel="stylesheet"-->
81
+ <!-- type="text/css"-->
82
+ <!-- charset="utf-8"-->
83
+ <!-- href="MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"-->
84
+ <!-- />-->
85
+
86
+
87
+
88
+ <style>
89
+
90
+ .jsx.example {
91
+ --jsx--css-clean-start-2--site--margin: 0 auto 0 auto;
92
+ --jsx--css-clean-start-2--site--padding: 2rem;
93
+
94
+ --jsx--css-clean-start-2--h--margin: 1.4rem 0 0.2rem 0;
95
+
96
+ --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin;
97
+
98
+ --jsx--css-clean-start-2--h1--color: #6c6c6c;
99
+ --jsx--css-clean-start-2--h2--color: #5c7c5c;
100
+ --jsx--css-clean-start-2--h3--color: #5e9e5e;
101
+
102
+ --jsx--css-clean-start-2--h1--font-size: 1.75rem;
103
+ --jsx--css-clean-start-2--h1--line-height: 1.99rem;
104
+
105
+ --jsx--css-clean-start-2--h2--font-size: 1.3rem;
106
+ --jsx--css-clean-start-2--h2--line-height: 1.49rem;
107
+
108
+ --jsx--css-clean-start-2--h3--font-size: 1rem;
109
+ --jsx--css-clean-start-2--h3--line-height: 1.4rem;
110
+ }
111
+
112
+
113
+
114
+ @supports selector(::-webkit-scrollbar) {
115
+
116
+ .jsx.example::-webkit-scrollbar {
117
+ width: 0.4rem;
118
+ height: 0.4rem;
119
+ }
120
+
121
+ .jsx.example::-webkit-scrollbar-thumb {
122
+ background-color: #5e9e5e;
123
+ }
124
+
125
+ .jsx.example::-webkit-scrollbar-track {
126
+ background-color: #fafffa;
127
+ }
128
+
129
+ }
130
+
131
+ @supports (scrollbar-color: auto) {
132
+ .jsx.example {
133
+ scrollbar-color: #5e9e5e #fafffa;
134
+ scrollbar-width: thin;
135
+ }
136
+ }
137
+
138
+ </style>
139
+
140
+ </head>
141
+ <body>
142
+
143
+ <main>
144
+
145
+ <h1>Css Clean Start 2</h1>
146
+ <h2>@jaisocx/css-clean-start-2</h2>
147
+ <h3> with_preloaded_fonts_node_modules__preview.html </h3>
148
+ <description>
149
+ Css sites resetting default styles with main.css of few hundereds css code lines,
150
+ and the very nice infrastructure for responsive sites bugfixing and fine-tuning
151
+ </description>
152
+
153
+
154
+
155
+ <h2>1. in a custom html tag, 2 span tags</h2>
156
+
157
+ <h3>1.1. raw html preview</h3>
158
+ <pre>
159
+ &lt;text&gt;
160
+ &lt;span&gt;Hello&lt;/span&gt;
161
+ &lt;span&gt;How are You&lt;/span&gt;
162
+ &lt;/text&gt;</pre>
163
+
164
+ <h3>1.2. rendered html view</h3>
165
+ <text>
166
+ <span>Hello</span>
167
+ <span>How are You</span>
168
+ </text>
169
+
170
+
171
+
172
+ <h2>2. &lt;p&gt; text blocks</h2>
173
+ <text>
174
+ <p>sentence line 1. sentence line 1. sentence line 1. sentence line 1. sentence line 1.</p>
175
+ <p>sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2.</p>
176
+ <p>sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3.</p>
177
+ </text>
178
+
179
+
180
+
181
+ <h2>3. &lt;ul&gt;</h2>
182
+
183
+ <h3>3.1. &lt;ul&gt;</h3>
184
+ <ul>
185
+ <li>
186
+ <a href="javascript: void(0);">link example 1</a>
187
+ </li>
188
+ <li>
189
+ <a href="javascript: void(0);">link example 2</a>
190
+ </li>
191
+ <li>
192
+ <a href="javascript: void(0);">link example 3</a>
193
+ </li>
194
+ </ul>
195
+
196
+
197
+
198
+ <h3>3.2. &lt;ul class="ul-reset"&gt;</h3>
199
+
200
+ <nav class="ul-reset">
201
+ <ul>
202
+ <li>
203
+ <a href="javascript: void(0);">link example 1</a>
204
+ </li>
205
+ <li>
206
+ <a href="javascript: void(0);">link example 2</a>
207
+ </li>
208
+ <li>
209
+ <a href="javascript: void(0);">link example 3</a>
210
+ </li>
211
+ </ul>
212
+ </nav>
213
+
214
+
215
+ <h2>4. &lt;table&gt;</h2>
216
+ <table>
217
+ <!-- Table Caption -->
218
+ <caption>Table Caption</caption>
219
+
220
+ <!-- Define column styles -->
221
+ <colgroup>
222
+ <col style="width: 8rem;">
223
+ <col style="width: 8rem;">
224
+ <col style="width: 8rem;">
225
+ <col style="width: 8rem;">
226
+ </colgroup>
227
+
228
+ <!-- Table Header -->
229
+ <thead>
230
+ <tr>
231
+ <th>Product</th>
232
+ <th>Price</th>
233
+ <th>Quantity</th>
234
+ <th>Total</th>
235
+ </tr>
236
+ </thead>
237
+
238
+ <!-- Table Body -->
239
+ <tbody>
240
+ <tr>
241
+ <td>Apple</td>
242
+ <td>$1.00</td>
243
+ <td>5</td>
244
+ <td>$5.00</td>
245
+ </tr>
246
+ <tr>
247
+ <td>Banana</td>
248
+ <td>$0.50</td>
249
+ <td>10</td>
250
+ <td>$5.00</td>
251
+ </tr>
252
+ <tr>
253
+ <td>Orange</td>
254
+ <td>$0.80</td>
255
+ <td>7</td>
256
+ <td>$5.60</td>
257
+ </tr>
258
+ </tbody>
259
+
260
+ <!-- Table Footer -->
261
+ <tfoot>
262
+ <tr>
263
+ <td colspan="3">Sum</td>
264
+ <td>$15.60</td>
265
+ </tr>
266
+ </tfoot>
267
+ </table>
268
+
269
+
270
+
271
+
272
+ <h2>5. &lt;pre&gt;</h2>
273
+ <pre>
274
+ Shopping List:
275
+ - Apples
276
+ - Bananas
277
+ - Milk
278
+ - Bread
279
+ </pre>
280
+
281
+
282
+ </main>
283
+
284
+
285
+
286
+ <script>
287
+ // document.addEventListener('DOMContentLoaded', () => {
288
+ // //
289
+ // });
290
+ </script>
291
+ </body>
292
+
293
+ </html>
294
+
295
+
296
+
297
+