@jaisocx/css-clean-start-2 1.0.0 → 1.0.1

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 (47) hide show
  1. package/MediaAndStyles/CssCleanStart_2_main_Webpack_min.css +1 -1
  2. package/MediaAndStyles/CssCleanStart_2_main_resolved.css +2082 -318
  3. package/MediaAndStyles/CssCleanStart_2_main_resolved_min.css +4067 -185
  4. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_landscape__CssCleanStart_2__theme_base.css +235 -0
  5. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_portrait__CssCleanStart_2__theme_base.css +235 -0
  6. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base.css +14 -10
  7. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_portrait__CssCleanStart_2__theme_base.css +12 -8
  8. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_landscape__CssCleanStart_2__theme_base.css +14 -10
  9. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_portrait__CssCleanStart_2__theme_base.css +13 -9
  10. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_landscape__CssCleanStart_2__theme_base.css +14 -10
  11. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_portrait__CssCleanStart_2__theme_base.css +13 -9
  12. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_landscape__CssCleanStart_2__theme_base.css +14 -10
  13. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_portrait__CssCleanStart_2__theme_base.css +11 -7
  14. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_h03_tablet_sm_landscape__CssCleanStart_2__theme_base.css → responsive_size_h03_tablet_s_landscape__CssCleanStart_2__theme_base.css} +14 -10
  15. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_h03_tablet_sm_portrait__CssCleanStart_2__theme_base.css → responsive_size_h03_tablet_s_portrait__CssCleanStart_2__theme_base.css} +14 -10
  16. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_h05_tablet_md_portrait__CssCleanStart_2__theme_base.css → responsive_size_h05_tablet_sm_landscape__CssCleanStart_2__theme_base.css} +11 -7
  17. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_portrait__CssCleanStart_2__theme_base.css +235 -0
  18. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_l03_laptop_sm_portrait__CssCleanStart_2__theme_base.css → responsive_size_h07_tablet_md_landscape__CssCleanStart_2__theme_base.css} +12 -8
  19. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h07_tablet_md_portrait__CssCleanStart_2__theme_base.css +235 -0
  20. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_l05_laptop_md_landscape__CssCleanStart_2__theme_base.css → responsive_size_h09_tablet_lg_landscape__CssCleanStart_2__theme_base.css} +14 -10
  21. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h09_tablet_lg_portrait__CssCleanStart_2__theme_base.css +235 -0
  22. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_l03_laptop_sm_landscape__CssCleanStart_2__theme_base.css → responsive_size_l02_laptop_sm_landscape__CssCleanStart_2__theme_base.css} +14 -10
  23. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l02_laptop_sm_portrait__CssCleanStart_2__theme_base.css +235 -0
  24. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_l05_laptop_md_portrait__CssCleanStart_2__theme_base.css → responsive_size_l03_laptop_md_landscape__CssCleanStart_2__theme_base.css} +14 -10
  25. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_md_portrait__CssCleanStart_2__theme_base.css +235 -0
  26. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_landscape__CssCleanStart_2__theme_base.css +10 -6
  27. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_portrait__CssCleanStart_2__theme_base.css +14 -10
  28. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_landscape__CssCleanStart_2__theme_base.css +8 -4
  29. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_portrait__CssCleanStart_2__theme_base.css +12 -8
  30. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_landscape__CssCleanStart_2__theme_base.css +8 -4
  31. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_portrait__CssCleanStart_2__theme_base.css +12 -8
  32. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_landscape__CssCleanStart_2__theme_base.css +8 -4
  33. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_portrait__CssCleanStart_2__theme_base.css +12 -8
  34. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_landscape__CssCleanStart_2__theme_base.css +8 -4
  35. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_portrait__CssCleanStart_2__theme_base.css +12 -8
  36. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_landscape__CssCleanStart_2__theme_base.css +8 -4
  37. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_portrait__CssCleanStart_2__theme_base.css +12 -8
  38. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_landscape__CssCleanStart_2__theme_base.css +8 -4
  39. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_portrait__CssCleanStart_2__theme_base.css +12 -8
  40. package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_h05_tablet_md_landscape__CssCleanStart_2__theme_base.css → responsive_size_t99_tv_xxxl_landscape__CssCleanStart_2__theme_base.css} +14 -10
  41. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_portrait__CssCleanStart_2__theme_base.css +235 -0
  42. package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Relative.css +25 -33
  43. package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Webpack.css +25 -33
  44. package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Webpack_min.css +38 -46
  45. package/README.md +2 -2
  46. package/index.html +1 -1
  47. package/package.json +1 -1
package/MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_landscape__CssCleanStart_2__theme_base.css ADDED
@@ -0,0 +1,235 @@
1
+ /*
2
+
3
+ Responsive rules
4
+
5
+ These styles for a display size in this primary template for a site from scratch,
6
+ I guess, need first the adjustments for sizes,
7
+ when tested on several displays for higher quality of a site shown in a browser on a display.
8
+
9
+ That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
10
+
11
+ */
12
+ @media only screen and (min-width: 2px) and (max-width: 99999px) and (min-height: 2px) and (max-height: 239px) and (orientation: landscape) {
13
+
14
+ .jsx {
15
+ --theme_name: CssCleanStart_2__theme_base;
16
+ --theme_name__CssCleanStart_2: theme_base;
17
+
18
+ --responsive_size: responsive_size_d05_very_small_xxs_landscape;
19
+
20
+ --responsive_size__min-width: 2px;
21
+ --responsive_size__max-width: 99999px;
22
+
23
+ --responsive_size__min-height: 2px;
24
+ --responsive_size__max-height: 239px;
25
+
26
+
27
+
28
+ --responsive_size__CssCleanStart_2__theme_base: responsive_size_d05_very_small_xxs_landscape__CssCleanStart_2__theme_base;
29
+
30
+ --responsive_size__CssCleanStart_2__theme_base__min-width: 2px;
31
+ --responsive_size__CssCleanStart_2__theme_base__max-width: 99999px;
32
+
33
+ --responsive_size__CssCleanStart_2__theme_base__min-height: 2px;
34
+ --responsive_size__CssCleanStart_2__theme_base__max-height: 239px;
35
+
36
+
37
+
38
+
39
+
40
+ /** Clean Start Css Constants */
41
+ /** -------------------------------
42
+ this style sets rem size for the html page. 1rem = 16px
43
+ */
44
+ /* --jsx--css-clean-start-2--rem: 16px; */
45
+
46
+
47
+ /** -------------------------------
48
+ background styles of the html elem <body>, and, the direct anchester html elem <main>
49
+ */
50
+ /* --jsx--css-clean-start-2--body-tag--background: #eee; */
51
+ /* --jsx--css-clean-start-2--site--background: #fff; */
52
+
53
+
54
+
55
+ /** -------------------------------
56
+ width and height of the body elem
57
+ */
58
+ /* --jsx--css-clean-start-2--body-tag--width: 100%; */
59
+ /* --jsx--css-clean-start-2--body-tag--max-width: 100%; */
60
+ /* --jsx--css-clean-start-2--body-tag--min-width: 100%; */
61
+
62
+ /* --jsx--css-clean-start-2--body-tag--height: auto; */
63
+ /* --jsx--css-clean-start-2--body-tag--max-height: unset; */
64
+ /* --jsx--css-clean-start-2--body-tag--min-height: 100vh; */
65
+
66
+ /* --jsx--css-clean-start-2--body-tag--overflow-x: auto; */
67
+ /* --jsx--css-clean-start-2--body-tag--overflow-y: auto; */
68
+
69
+
70
+
71
+ /** -------------------------------
72
+ width and height of the site, normally positioned in the center of the browser's tab
73
+ */
74
+ /* --jsx--css-clean-start-2--site--height: fit-content; */
75
+ /* --jsx--css-clean-start-2--site--max-height: fit-content; */
76
+ /* --jsx--css-clean-start-2--site--min-height: 100vh; */
77
+
78
+ /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
79
+ /* --jsx--css-clean-start-2--site--overflow-y: visible; */
80
+
81
+ --jsx--css-clean-start-2--site--width: 100%;
82
+ /* --jsx--css-clean-start-2--site--max-width: 100%; */
83
+ --jsx--css-clean-start-2--site--min-width: 100%;
84
+
85
+
86
+
87
+ /** -------------------------------
88
+ padding and margin of the site
89
+ */
90
+ /* --jsx--css-clean-start-2--site--margin: 0 auto 0 auto; */
91
+
92
+ /* --jsx--css-clean-start-2--site--padding-top: 1rem; */
93
+ /* --jsx--css-clean-start-2--site--padding-left: 1rem; */
94
+ /* --jsx--css-clean-start-2--site--padding-right: 1rem; */
95
+ /* --jsx--css-clean-start-2--site--padding-bottom: 1rem; */
96
+ /* --jsx--css-clean-start-2--site--padding: var(--jsx--css-clean-start-2--site--padding-top) var(--jsx--css-clean-start-2--site--padding-left) var(--jsx--css-clean-start-2--site--padding-bottom) var(--jsx--css-clean-start-2--site--padding-right); */
97
+
98
+
99
+ /** -------------------------------
100
+ overflow styles
101
+ */
102
+ /* --jsx--css-clean-start-2--body-tag--overflow-x: hidden; */
103
+ /* --jsx--css-clean-start-2--site--overflow-y: visible; */
104
+
105
+
106
+
107
+ /** -------------------------------
108
+ html elems styles
109
+ */
110
+ /* --jsx--css-clean-start-2--all-tags--position: relative; */
111
+ /* --jsx--css-clean-start-2--all-tags--box-sizing: border-box; */
112
+
113
+ /* --jsx--css-clean-start-2--inline-tags--display: inline-block; */
114
+ /* --jsx--css-clean-start-2--block-tags--display: block; */
115
+ /* --jsx--css-clean-start-2--custom-tags--display: var(--jsx--css-clean-start-2--block-tags--display); */
116
+
117
+ /* --jsx--css-clean-start-2--all-tags--padding: 0 0 0 0; */
118
+ /* --jsx--css-clean-start-2--h--padding: 0 0 0 0; */
119
+
120
+ /* --jsx--css-clean-start-2--all-tags--margin: 0 0 0 0; */
121
+ /* --jsx--css-clean-start-2--h--margin: 0 0 0 0; */
122
+ /* --jsx--css-clean-start-2--p--margin: 0.9rem 0 0.9rem 0; */
123
+
124
+ /* --jsx--css-clean-start-2--all-tags--color: black; */
125
+
126
+ /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
127
+ /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
128
+
129
+ --jsx--css-clean-start-2--all-tags--font-size: 1rem;
130
+ --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
131
+
132
+ /* --jsx--css-clean-start-2--all-tags--border-color: green; */
133
+ /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */
134
+ /* --jsx--css-clean-start-2--all-tags--border-width: 0; */
135
+
136
+
137
+
138
+ /** -------------------------------
139
+ h1 til h6 styles
140
+ */
141
+ /* --jsx--css-clean-start-2--h--font-weight: 600; */
142
+ /* --jsx--css-clean-start-2--h--color: #626262; */
143
+ /* --jsx--css-clean-start-2--h--margin: 0 0 0 0; */
144
+ /* --jsx--css-clean-start-2--h--padding: 0 0 0 0; */
145
+
146
+
147
+
148
+ /* --jsx--css-clean-start-2--h1--font-size: 2.3rem; */
149
+ /* --jsx--css-clean-start-2--h1--line-height: 2.45rem; */
150
+
151
+ /* --jsx--css-clean-start-2--h2--font-size: 2.1rem; */
152
+ /* --jsx--css-clean-start-2--h2--line-height: 2.34rem; */
153
+
154
+ /* --jsx--css-clean-start-2--h3--font-size: 1.8rem; */
155
+ /* --jsx--css-clean-start-2--h3--line-height: 2.2rem; */
156
+
157
+ /* --jsx--css-clean-start-2--h4--font-size: 1.6rem; */
158
+ /* --jsx--css-clean-start-2--h4--line-height: 2rem; */
159
+
160
+ /* --jsx--css-clean-start-2--h5--font-size: 1.33rem; */
161
+ /* --jsx--css-clean-start-2--h5--line-height: 1.67rem; */
162
+
163
+ /* --jsx--css-clean-start-2--h6--font-size: 1rem; */
164
+ /* --jsx--css-clean-start-2--h6--line-height: 1.6rem; */
165
+
166
+
167
+
168
+ /* --jsx--css-clean-start-2--h1--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
169
+ /* --jsx--css-clean-start-2--h1--color: var(--jsx--css-clean-start-2--h--color); */
170
+ /* --jsx--css-clean-start-2--h1--margin: var(--jsx--css-clean-start-2--h--margin); */
171
+ /* --jsx--css-clean-start-2--h1--padding: var(--jsx--css-clean-start-2--h--padding); */
172
+
173
+ /* --jsx--css-clean-start-2--h2--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
174
+ /* --jsx--css-clean-start-2--h2--color: var(--jsx--css-clean-start-2--h--color); */
175
+ /* --jsx--css-clean-start-2--h2--margin: var(--jsx--css-clean-start-2--h--margin); */
176
+ /* --jsx--css-clean-start-2--h2--padding: var(--jsx--css-clean-start-2--h--padding); */
177
+
178
+ /* --jsx--css-clean-start-2--h3--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
179
+ /* --jsx--css-clean-start-2--h3--color: var(--jsx--css-clean-start-2--h--color); */
180
+ /* --jsx--css-clean-start-2--h3--margin: var(--jsx--css-clean-start-2--h--margin); */
181
+ /* --jsx--css-clean-start-2--h3--padding: var(--jsx--css-clean-start-2--h--padding); */
182
+
183
+ /* --jsx--css-clean-start-2--h4--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
184
+ /* --jsx--css-clean-start-2--h4--color: var(--jsx--css-clean-start-2--h--color); */
185
+ /* --jsx--css-clean-start-2--h4--margin: var(--jsx--css-clean-start-2--h--margin); */
186
+ /* --jsx--css-clean-start-2--h4--padding: var(--jsx--css-clean-start-2--h--padding); */
187
+
188
+ /* --jsx--css-clean-start-2--h5--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
189
+ /* --jsx--css-clean-start-2--h5--color: var(--jsx--css-clean-start-2--h--color); */
190
+ /* --jsx--css-clean-start-2--h5--margin: var(--jsx--css-clean-start-2--h--margin); */
191
+ /* --jsx--css-clean-start-2--h5--padding: var(--jsx--css-clean-start-2--h--padding); */
192
+
193
+ /* --jsx--css-clean-start-2--h6--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
194
+ /* --jsx--css-clean-start-2--h6--color: var(--jsx--css-clean-start-2--h--color); */
195
+ /* --jsx--css-clean-start-2--h6--margin: var(--jsx--css-clean-start-2--h--margin); */
196
+ /* --jsx--css-clean-start-2--h6--padding: var(--jsx--css-clean-start-2--h--padding); */
197
+
198
+
199
+
200
+ /** -------------------------------
201
+ hyperlnks text colors
202
+ */
203
+ /* --jsx--css-clean-start-2--anchor--color: navy; */
204
+ /* --jsx--css-clean-start-2--anchor-hover--color: blue; */
205
+
206
+ /* --jsx--css-clean-start-2--anchor-visited--color: grey; */
207
+ /* --jsx--css-clean-start-2--anchor-visited-hover--color: grey; */
208
+
209
+ /* --jsx--css-clean-start-2--anchor-active--color: darkblue; */
210
+ /* --jsx--css-clean-start-2--anchor-active-hover--color: blue; */
211
+
212
+
213
+
214
+ /** -------------------------------
215
+ hyperlnks are underlined, or they have been set other css text-decoration style
216
+ */
217
+ /* --jsx--css-clean-start-2--anchor--text-decoration: none; */
218
+ /* --jsx--css-clean-start-2--anchor-hover--text-decoration: underline; */
219
+
220
+ /* --jsx--css-clean-start-2--anchor-visited--text-decoration: none; */
221
+ /* --jsx--css-clean-start-2--anchor-visited-hover--text-decoration: underline; */
222
+
223
+ /* --jsx--css-clean-start-2--anchor-active--text-decoration: underline; */
224
+ /* --jsx--css-clean-start-2--anchor-active-hover--text-decoration: underline; */
225
+
226
+
227
+
228
+ /* --jsx--css-clean-start-2--thead--background-color: ghostwhite; */
229
+ /* --jsx--css-clean-start-2--tfoot--background-color: honeydew; */
230
+
231
+ }
232
+
233
+ }
234
+
235
+
package/MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_portrait__CssCleanStart_2__theme_base.css ADDED
@@ -0,0 +1,235 @@
1
+ /*
2
+
3
+ Responsive rules
4
+
5
+ These styles for a display size in this primary template for a site from scratch,
6
+ I guess, need first the adjustments for sizes,
7
+ when tested on several displays for higher quality of a site shown in a browser on a display.
8
+
9
+ That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
10
+
11
+ */
12
+ @media only screen and (min-width: 2px) and (max-width: 239px) and (min-height: 2px) and (max-height: 99999px) and (orientation: portrait) {
13
+
14
+ .jsx {
15
+ --theme_name: CssCleanStart_2__theme_base;
16
+ --theme_name__CssCleanStart_2: theme_base;
17
+
18
+ --responsive_size: responsive_size_d05_very_small_xxs_portrait;
19
+
20
+ --responsive_size__min-width: 2px;
21
+ --responsive_size__max-width: 239px;
22
+
23
+ --responsive_size__min-height: 2px;
24
+ --responsive_size__max-height: 99999px;
25
+
26
+
27
+
28
+ --responsive_size__CssCleanStart_2__theme_base: responsive_size_d05_very_small_xxs_portrait__CssCleanStart_2__theme_base;
29
+
30
+ --responsive_size__CssCleanStart_2__theme_base__min-width: 2px;
31
+ --responsive_size__CssCleanStart_2__theme_base__max-width: 239px;
32
+
33
+ --responsive_size__CssCleanStart_2__theme_base__min-height: 2px;
34
+ --responsive_size__CssCleanStart_2__theme_base__max-height: 99999px;
35
+
36
+
37
+
38
+
39
+
40
+ /** Clean Start Css Constants */
41
+ /** -------------------------------
42
+ this style sets rem size for the html page. 1rem = 16px
43
+ */
44
+ /* --jsx--css-clean-start-2--rem: 16px; */
45
+
46
+
47
+ /** -------------------------------
48
+ background styles of the html elem <body>, and, the direct anchester html elem <main>
49
+ */
50
+ /* --jsx--css-clean-start-2--body-tag--background: #eee; */
51
+ /* --jsx--css-clean-start-2--site--background: #fff; */
52
+
53
+
54
+
55
+ /** -------------------------------
56
+ width and height of the body elem
57
+ */
58
+ /* --jsx--css-clean-start-2--body-tag--width: 100%; */
59
+ /* --jsx--css-clean-start-2--body-tag--max-width: 100%; */
60
+ /* --jsx--css-clean-start-2--body-tag--min-width: 100%; */
61
+
62
+ /* --jsx--css-clean-start-2--body-tag--height: auto; */
63
+ /* --jsx--css-clean-start-2--body-tag--max-height: unset; */
64
+ /* --jsx--css-clean-start-2--body-tag--min-height: 100vh; */
65
+
66
+ /* --jsx--css-clean-start-2--body-tag--overflow-x: auto; */
67
+ /* --jsx--css-clean-start-2--body-tag--overflow-y: auto; */
68
+
69
+
70
+
71
+ /** -------------------------------
72
+ width and height of the site, normally positioned in the center of the browser's tab
73
+ */
74
+ /* --jsx--css-clean-start-2--site--height: fit-content; */
75
+ /* --jsx--css-clean-start-2--site--max-height: fit-content; */
76
+ /* --jsx--css-clean-start-2--site--min-height: 100vh; */
77
+
78
+ /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
79
+ /* --jsx--css-clean-start-2--site--overflow-y: visible; */
80
+
81
+ --jsx--css-clean-start-2--site--width: 100%;
82
+ /* --jsx--css-clean-start-2--site--max-width: 100%; */
83
+ --jsx--css-clean-start-2--site--min-width: 100%;
84
+
85
+
86
+
87
+ /** -------------------------------
88
+ padding and margin of the site
89
+ */
90
+ /* --jsx--css-clean-start-2--site--margin: 0 auto 0 auto; */
91
+
92
+ /* --jsx--css-clean-start-2--site--padding-top: 1rem; */
93
+ /* --jsx--css-clean-start-2--site--padding-left: 1rem; */
94
+ /* --jsx--css-clean-start-2--site--padding-right: 1rem; */
95
+ /* --jsx--css-clean-start-2--site--padding-bottom: 1rem; */
96
+ /* --jsx--css-clean-start-2--site--padding: var(--jsx--css-clean-start-2--site--padding-top) var(--jsx--css-clean-start-2--site--padding-left) var(--jsx--css-clean-start-2--site--padding-bottom) var(--jsx--css-clean-start-2--site--padding-right); */
97
+
98
+
99
+ /** -------------------------------
100
+ overflow styles
101
+ */
102
+ /* --jsx--css-clean-start-2--body-tag--overflow-x: hidden; */
103
+ /* --jsx--css-clean-start-2--site--overflow-y: visible; */
104
+
105
+
106
+
107
+ /** -------------------------------
108
+ html elems styles
109
+ */
110
+ /* --jsx--css-clean-start-2--all-tags--position: relative; */
111
+ /* --jsx--css-clean-start-2--all-tags--box-sizing: border-box; */
112
+
113
+ /* --jsx--css-clean-start-2--inline-tags--display: inline-block; */
114
+ /* --jsx--css-clean-start-2--block-tags--display: block; */
115
+ /* --jsx--css-clean-start-2--custom-tags--display: var(--jsx--css-clean-start-2--block-tags--display); */
116
+
117
+ /* --jsx--css-clean-start-2--all-tags--padding: 0 0 0 0; */
118
+ /* --jsx--css-clean-start-2--h--padding: 0 0 0 0; */
119
+
120
+ /* --jsx--css-clean-start-2--all-tags--margin: 0 0 0 0; */
121
+ /* --jsx--css-clean-start-2--h--margin: 0 0 0 0; */
122
+ /* --jsx--css-clean-start-2--p--margin: 0.9rem 0 0.9rem 0; */
123
+
124
+ /* --jsx--css-clean-start-2--all-tags--color: black; */
125
+
126
+ /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
127
+ /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
128
+
129
+ --jsx--css-clean-start-2--all-tags--font-size: 1rem;
130
+ --jsx--css-clean-start-2--all-tags--line-height: 1.29rem;
131
+
132
+ /* --jsx--css-clean-start-2--all-tags--border-color: green; */
133
+ /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */
134
+ /* --jsx--css-clean-start-2--all-tags--border-width: 0; */
135
+
136
+
137
+
138
+ /** -------------------------------
139
+ h1 til h6 styles
140
+ */
141
+ /* --jsx--css-clean-start-2--h--font-weight: 600; */
142
+ /* --jsx--css-clean-start-2--h--color: #626262; */
143
+ /* --jsx--css-clean-start-2--h--margin: 0 0 0 0; */
144
+ /* --jsx--css-clean-start-2--h--padding: 0 0 0 0; */
145
+
146
+
147
+
148
+ /* --jsx--css-clean-start-2--h1--font-size: 2.3rem; */
149
+ /* --jsx--css-clean-start-2--h1--line-height: 2.45rem; */
150
+
151
+ /* --jsx--css-clean-start-2--h2--font-size: 2.1rem; */
152
+ /* --jsx--css-clean-start-2--h2--line-height: 2.34rem; */
153
+
154
+ /* --jsx--css-clean-start-2--h3--font-size: 1.8rem; */
155
+ /* --jsx--css-clean-start-2--h3--line-height: 2.2rem; */
156
+
157
+ /* --jsx--css-clean-start-2--h4--font-size: 1.6rem; */
158
+ /* --jsx--css-clean-start-2--h4--line-height: 2rem; */
159
+
160
+ /* --jsx--css-clean-start-2--h5--font-size: 1.33rem; */
161
+ /* --jsx--css-clean-start-2--h5--line-height: 1.67rem; */
162
+
163
+ /* --jsx--css-clean-start-2--h6--font-size: 1rem; */
164
+ /* --jsx--css-clean-start-2--h6--line-height: 1.6rem; */
165
+
166
+
167
+
168
+ /* --jsx--css-clean-start-2--h1--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
169
+ /* --jsx--css-clean-start-2--h1--color: var(--jsx--css-clean-start-2--h--color); */
170
+ /* --jsx--css-clean-start-2--h1--margin: var(--jsx--css-clean-start-2--h--margin); */
171
+ /* --jsx--css-clean-start-2--h1--padding: var(--jsx--css-clean-start-2--h--padding); */
172
+
173
+ /* --jsx--css-clean-start-2--h2--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
174
+ /* --jsx--css-clean-start-2--h2--color: var(--jsx--css-clean-start-2--h--color); */
175
+ /* --jsx--css-clean-start-2--h2--margin: var(--jsx--css-clean-start-2--h--margin); */
176
+ /* --jsx--css-clean-start-2--h2--padding: var(--jsx--css-clean-start-2--h--padding); */
177
+
178
+ /* --jsx--css-clean-start-2--h3--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
179
+ /* --jsx--css-clean-start-2--h3--color: var(--jsx--css-clean-start-2--h--color); */
180
+ /* --jsx--css-clean-start-2--h3--margin: var(--jsx--css-clean-start-2--h--margin); */
181
+ /* --jsx--css-clean-start-2--h3--padding: var(--jsx--css-clean-start-2--h--padding); */
182
+
183
+ /* --jsx--css-clean-start-2--h4--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
184
+ /* --jsx--css-clean-start-2--h4--color: var(--jsx--css-clean-start-2--h--color); */
185
+ /* --jsx--css-clean-start-2--h4--margin: var(--jsx--css-clean-start-2--h--margin); */
186
+ /* --jsx--css-clean-start-2--h4--padding: var(--jsx--css-clean-start-2--h--padding); */
187
+
188
+ /* --jsx--css-clean-start-2--h5--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
189
+ /* --jsx--css-clean-start-2--h5--color: var(--jsx--css-clean-start-2--h--color); */
190
+ /* --jsx--css-clean-start-2--h5--margin: var(--jsx--css-clean-start-2--h--margin); */
191
+ /* --jsx--css-clean-start-2--h5--padding: var(--jsx--css-clean-start-2--h--padding); */
192
+
193
+ /* --jsx--css-clean-start-2--h6--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
194
+ /* --jsx--css-clean-start-2--h6--color: var(--jsx--css-clean-start-2--h--color); */
195
+ /* --jsx--css-clean-start-2--h6--margin: var(--jsx--css-clean-start-2--h--margin); */
196
+ /* --jsx--css-clean-start-2--h6--padding: var(--jsx--css-clean-start-2--h--padding); */
197
+
198
+
199
+
200
+ /** -------------------------------
201
+ hyperlnks text colors
202
+ */
203
+ /* --jsx--css-clean-start-2--anchor--color: navy; */
204
+ /* --jsx--css-clean-start-2--anchor-hover--color: blue; */
205
+
206
+ /* --jsx--css-clean-start-2--anchor-visited--color: grey; */
207
+ /* --jsx--css-clean-start-2--anchor-visited-hover--color: grey; */
208
+
209
+ /* --jsx--css-clean-start-2--anchor-active--color: darkblue; */
210
+ /* --jsx--css-clean-start-2--anchor-active-hover--color: blue; */
211
+
212
+
213
+
214
+ /** -------------------------------
215
+ hyperlnks are underlined, or they have been set other css text-decoration style
216
+ */
217
+ /* --jsx--css-clean-start-2--anchor--text-decoration: none; */
218
+ /* --jsx--css-clean-start-2--anchor-hover--text-decoration: underline; */
219
+
220
+ /* --jsx--css-clean-start-2--anchor-visited--text-decoration: none; */
221
+ /* --jsx--css-clean-start-2--anchor-visited-hover--text-decoration: underline; */
222
+
223
+ /* --jsx--css-clean-start-2--anchor-active--text-decoration: underline; */
224
+ /* --jsx--css-clean-start-2--anchor-active-hover--text-decoration: underline; */
225
+
226
+
227
+
228
+ /* --jsx--css-clean-start-2--thead--background-color: ghostwhite; */
229
+ /* --jsx--css-clean-start-2--tfoot--background-color: honeydew; */
230
+
231
+ }
232
+
233
+ }
234
+
235
+
package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base.css CHANGED
@@ -9,25 +9,29 @@ These styles for a display size in this primary template for a site from scratch
9
9
  That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
10
10
 
11
11
  */
12
- @media only screen and (min-width: 320px) and (max-width: 500px) and (orientation: landscape) {
12
+ @media only screen and (min-width: 240px) and (max-width: 99999px) and (min-height: 240px) and (max-height: 320px) and (orientation: landscape) {
13
13
 
14
14
  .jsx {
15
+ --theme_name: CssCleanStart_2__theme_base;
15
16
  --theme_name__CssCleanStart_2: theme_base;
16
- --responsive_size: responsive_size_e02_mobile_xs_landscape;
17
- --responsive_size__CssCleanStart_2__theme_base: responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base;
18
17
 
19
18
  --responsive_size: responsive_size_e02_mobile_xs_landscape;
20
19
 
21
- --responsive_size__min-width: 320px;
22
- --responsive_size__max-width: 500px;
20
+ --responsive_size__min-width: 240px;
21
+ --responsive_size__max-width: 99999px;
22
+
23
+ --responsive_size__min-height: 240px;
24
+ --responsive_size__max-height: 320px;
23
25
 
24
26
 
25
27
 
26
- --theme_name__CssCleanStart_2: theme_base;
27
28
  --responsive_size__CssCleanStart_2__theme_base: responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base;
28
29
 
29
- --responsive_size__CssCleanStart_2__theme_base__min-width: 320px;
30
- --responsive_size__CssCleanStart_2__theme_base__max-width: 500px;
30
+ --responsive_size__CssCleanStart_2__theme_base__min-width: 240px;
31
+ --responsive_size__CssCleanStart_2__theme_base__max-width: 99999px;
32
+
33
+ --responsive_size__CssCleanStart_2__theme_base__min-height: 240px;
34
+ --responsive_size__CssCleanStart_2__theme_base__max-height: 320px;
31
35
 
32
36
 
33
37
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
122
126
  /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
123
127
  /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
124
128
 
125
- /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
126
- /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
129
+ --jsx--css-clean-start-2--all-tags--font-size: 1rem;
130
+ --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
127
131
 
128
132
  /* --jsx--css-clean-start-2--all-tags--border-color: green; */
129
133
  /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */
package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_portrait__CssCleanStart_2__theme_base.css CHANGED
@@ -9,26 +9,30 @@ These styles for a display size in this primary template for a site from scratch
9
9
  That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
10
10
 
11
11
  */
12
- @media only screen and (min-width: 240px) and (max-width: 320px) and (orientation: portrait) {
12
+ @media only screen and (min-width: 240px) and (max-width: 320px) and (min-height: 240px) and (max-height: 99999px) and (orientation: portrait) {
13
13
 
14
14
  .jsx {
15
+ --theme_name: CssCleanStart_2__theme_base;
15
16
  --theme_name__CssCleanStart_2: theme_base;
16
- --responsive_size: responsive_size_e02_mobile_xs_portrait;
17
- --responsive_size__CssCleanStart_2__theme_base: responsive_size_e02_mobile_xs_portrait__CssCleanStart_2__theme_base;
18
17
 
19
18
  --responsive_size: responsive_size_e02_mobile_xs_portrait;
20
19
 
21
20
  --responsive_size__min-width: 240px;
22
21
  --responsive_size__max-width: 320px;
23
22
 
23
+ --responsive_size__min-height: 240px;
24
+ --responsive_size__max-height: 99999px;
25
+
24
26
 
25
27
 
26
- --theme_name__CssCleanStart_2: theme_base;
27
28
  --responsive_size__CssCleanStart_2__theme_base: responsive_size_e02_mobile_xs_portrait__CssCleanStart_2__theme_base;
28
29
 
29
30
  --responsive_size__CssCleanStart_2__theme_base__min-width: 240px;
30
31
  --responsive_size__CssCleanStart_2__theme_base__max-width: 320px;
31
32
 
33
+ --responsive_size__CssCleanStart_2__theme_base__min-height: 240px;
34
+ --responsive_size__CssCleanStart_2__theme_base__max-height: 99999px;
35
+
32
36
 
33
37
 
34
38
 
@@ -74,8 +78,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
74
78
  /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
75
79
  /* --jsx--css-clean-start-2--site--overflow-y: visible; */
76
80
 
77
- /* --jsx--css-clean-start-2--site--width: 70%; */
78
- /* --jsx--css-clean-start-2--site--max-width: 100%; */
81
+ --jsx--css-clean-start-2--site--width: 100%;
82
+ /* --jsx--css-clean-start-2--site--max-width: 100%; */
79
83
  --jsx--css-clean-start-2--site--min-width: 100%;
80
84
 
81
85
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
122
126
  /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
123
127
  /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
124
128
 
125
- /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
126
- /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
129
+ --jsx--css-clean-start-2--all-tags--font-size: 1rem;
130
+ --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
127
131
 
128
132
  /* --jsx--css-clean-start-2--all-tags--border-color: green; */
129
133
  /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */
package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_landscape__CssCleanStart_2__theme_base.css CHANGED
@@ -9,25 +9,29 @@ These styles for a display size in this primary template for a site from scratch
9
9
  That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
10
10
 
11
11
  */
12
- @media only screen and (min-width: 501px) and (max-width: 667px) and (orientation: landscape) {
12
+ @media only screen and (min-width: 321px) and (max-width: 99999px) and (min-height: 321px) and (max-height: 375px) and (orientation: landscape) {
13
13
 
14
14
  .jsx {
15
+ --theme_name: CssCleanStart_2__theme_base;
15
16
  --theme_name__CssCleanStart_2: theme_base;
16
- --responsive_size: responsive_size_e04_mobile_s_landscape;
17
- --responsive_size__CssCleanStart_2__theme_base: responsive_size_e04_mobile_s_landscape__CssCleanStart_2__theme_base;
18
17
 
19
18
  --responsive_size: responsive_size_e04_mobile_s_landscape;
20
19
 
21
- --responsive_size__min-width: 501px;
22
- --responsive_size__max-width: 667px;
20
+ --responsive_size__min-width: 321px;
21
+ --responsive_size__max-width: 99999px;
22
+
23
+ --responsive_size__min-height: 321px;
24
+ --responsive_size__max-height: 375px;
23
25
 
24
26
 
25
27
 
26
- --theme_name__CssCleanStart_2: theme_base;
27
28
  --responsive_size__CssCleanStart_2__theme_base: responsive_size_e04_mobile_s_landscape__CssCleanStart_2__theme_base;
28
29
 
29
- --responsive_size__CssCleanStart_2__theme_base__min-width: 501px;
30
- --responsive_size__CssCleanStart_2__theme_base__max-width: 667px;
30
+ --responsive_size__CssCleanStart_2__theme_base__min-width: 321px;
31
+ --responsive_size__CssCleanStart_2__theme_base__max-width: 99999px;
32
+
33
+ --responsive_size__CssCleanStart_2__theme_base__min-height: 321px;
34
+ --responsive_size__CssCleanStart_2__theme_base__max-height: 375px;
31
35
 
32
36
 
33
37
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
122
126
  /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
123
127
  /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
124
128
 
125
- /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
126
- /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
129
+ --jsx--css-clean-start-2--all-tags--font-size: 1rem;
130
+ --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
127
131
 
128
132
  /* --jsx--css-clean-start-2--all-tags--border-color: green; */
129
133
  /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */