@jaisocx/css-clean-start-2 1.0.3 → 1.0.4

package/MediaAndStyles/CssCleanStart_2_main_Webpack.css

@@ -8,6 +8,12 @@
 @import url("@CssCleanStart_2_MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Webpack.css");
 
 
+
+/* layout theme */
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_visible_height/theme_visible_height.css");
+
+
+
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_presets.css");
 
 

package/MediaAndStyles/CssCleanStart_2_main_Webpack_min.css

@@ -9,6 +9,10 @@
 @import url("@CssCleanStart_2_MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Webpack_min.css");
 
 
+/* layout theme */
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_visible_height/theme_visible_height.css");
+
+
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_presets.css");
 
 

package/MediaAndStyles/CssCleanStart_2_main_relative.css

@@ -8,14 +8,24 @@
 @import url("./themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Relative.css");
 
 
+
+/* color themes */
 @import url("./themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css");
 @import url("./themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css");
 
 
+
+/* layout theme */
+@import url("./themes/theme_visible_height/theme_visible_height.css");
+
+
+
+/* example css code blocks */
 @import url("./CssCleanStart_2_presets.css");
 
 
-/* main css file, css logics with rules set via variables in the theme .css files imported above */
+
+/* the main css file, css logics with rules set via variables in the theme .css files imported above */
 @import url("./CssCleanStart_2_main.css");
 
 

package/MediaAndStyles/CssCleanStart_2_main_resolved.css

@@ -8125,6 +8125,46 @@
 
 
 
+.jsx.theme_visible_height {
+
+  --jsx--css-clean-start-2--body-tag--height: 100vh;
+  --jsx--css-clean-start-2--body-tag--max-height: 100vh;
+  --jsx--css-clean-start-2--body-tag--min-height: 100vh;
+
+  --jsx--css-clean-start-2--body-tag--overflow-y: hidden;
+
+
+
+  --jsx--css-clean-start-2--site--height: 100%;
+  --jsx--css-clean-start-2--site--max-height: 100%;
+  --jsx--css-clean-start-2--site--min-height: 100%;
+
+  --jsx--css-clean-start-2--site--overflow-y: hidden;
+
+}
+
+
+
+.jsx.theme_visible_height body main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+
+
+
+.jsx.theme_visible_height main.a-tag-in-main-tag {
+
+  flex-grow: 1;
+
+}
+
+
+
+
+
 
 .jsx.small {
   --jsx--css-clean-start-2--body-tag--height: 100vh;

package/MediaAndStyles/CssCleanStart_2_main_resolved_min.css

@@ -4072,6 +4072,46 @@
 
 
 
+.jsx.theme_visible_height {
+
+  --jsx--css-clean-start-2--body-tag--height: 100vh;
+  --jsx--css-clean-start-2--body-tag--max-height: 100vh;
+  --jsx--css-clean-start-2--body-tag--min-height: 100vh;
+
+  --jsx--css-clean-start-2--body-tag--overflow-y: hidden;
+
+
+
+  --jsx--css-clean-start-2--site--height: 100%;
+  --jsx--css-clean-start-2--site--max-height: 100%;
+  --jsx--css-clean-start-2--site--min-height: 100%;
+
+  --jsx--css-clean-start-2--site--overflow-y: hidden;
+
+}
+
+
+
+.jsx.theme_visible_height body main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+
+
+
+.jsx.theme_visible_height main.a-tag-in-main-tag {
+
+  flex-grow: 1;
+
+}
+
+
+
+
+
 
 .jsx.small {
   --jsx--css-clean-start-2--body-tag--height: 100vh;

package/MediaAndStyles/themes/theme_visible_height/theme_visible_height.css

@@ -0,0 +1,39 @@
+/* a layout theme */
+
+.jsx.theme_visible_height {
+
+  --jsx--css-clean-start-2--body-tag--height: 100vh;
+  --jsx--css-clean-start-2--body-tag--max-height: 100vh;
+  --jsx--css-clean-start-2--body-tag--min-height: 100vh;
+
+  --jsx--css-clean-start-2--body-tag--overflow-y: hidden;
+
+
+
+  --jsx--css-clean-start-2--site--height: 100%;
+  --jsx--css-clean-start-2--site--max-height: 100%;
+  --jsx--css-clean-start-2--site--min-height: 100%;
+
+  --jsx--css-clean-start-2--site--overflow-y: hidden;
+
+}
+
+
+
+.jsx.theme_visible_height body main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+
+
+/* example when this theme css class is set in the root html tag */
+.jsx.theme_visible_height main.a-tag-in-main-tag {
+
+  flex-grow: 1;
+
+}
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jaisocx/css-clean-start-2",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "author": "Jaisocx",
   "keywords": [
@@ -23,7 +23,7 @@
     "README.md"
   ],
   "optionalDependencies": {
-    "@jaisocx/responsive-sizes": "~1.2.2"
+    "@jaisocx/responsive-sizes": "~1.3.1"
   },
   "private": false,
   "publishConfig": {