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

package/MediaAndStyles/CssCleanStart_2_main_Webpack.css

@@ -8,9 +8,19 @@
 @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");
 
 
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css");
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css");
+
+
 /* main css file, css logics with rules set via variables in the theme .css files imported above */
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_main.css");
 

package/MediaAndStyles/CssCleanStart_2_main_Webpack_min.css

@@ -9,9 +9,17 @@
 @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");
 
 
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css");
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css");
+
+
 /* main css file, css logics with rules set via variables in the theme .css files imported above */
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_main.css");
 

package/MediaAndStyles/CssCleanStart_2_main_relative.css

@@ -8,10 +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;
@@ -8158,6 +8198,84 @@
 
 
 
+.jsx.theme_lightmode,
+.jsx .theme_lightmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #e0e9f4;
+  --jsx--css-clean-start-2--site--background: #fff;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #333;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #ddd;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #567;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: honeydew;
+  --jsx--css-clean-start-2--tfoot--background-color: cornsilk;
+
+}
+
+
+.jsx.theme_darkmode,
+.jsx .theme_darkmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #457;
+  --jsx--css-clean-start-2--site--background: #012;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #adf;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #fff;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #fff;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: #456;
+  --jsx--css-clean-start-2--tfoot--background-color: #456;
+
+}
+
+
 
 
 .jsx * {

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;
@@ -4105,6 +4145,84 @@
 
 
 
+.jsx.theme_lightmode,
+.jsx .theme_lightmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #e0e9f4;
+  --jsx--css-clean-start-2--site--background: #fff;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #333;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #ddd;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #567;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: honeydew;
+  --jsx--css-clean-start-2--tfoot--background-color: cornsilk;
+
+}
+
+
+.jsx.theme_darkmode,
+.jsx .theme_darkmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #457;
+  --jsx--css-clean-start-2--site--background: #012;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #adf;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #fff;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #fff;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: #456;
+  --jsx--css-clean-start-2--tfoot--background-color: #456;
+
+}
+
+
 
 
 .jsx * {

package/MediaAndStyles/themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css

@@ -0,0 +1,45 @@
+
+.jsx.theme_darkmode,
+.jsx .theme_darkmode {
+
+  /** -------------------------------
+    background styles of the html elem <body>, and, the direct anchester html elem <main>
+  */
+  --jsx--css-clean-start-2--body-tag--background: #457;
+  --jsx--css-clean-start-2--site--background: #012;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #adf;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #fff;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  /** -------------------------------
+    h1 til h6 styles
+  */
+  --jsx--css-clean-start-2--h--color:       #fff;
+
+
+
+  /** -------------------------------
+    hyperlnks text colors
+  */
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: #456;
+  --jsx--css-clean-start-2--tfoot--background-color: #456;
+
+}
+

package/MediaAndStyles/themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css

@@ -0,0 +1,45 @@
+
+.jsx.theme_lightmode,
+.jsx .theme_lightmode {
+
+  /** -------------------------------
+    background styles of the html elem <body>, and, the direct anchester html elem <main>
+  */
+  --jsx--css-clean-start-2--body-tag--background: #e0e9f4;
+  --jsx--css-clean-start-2--site--background: #fff;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #333;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #ddd;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  /** -------------------------------
+    h1 til h6 styles
+  */
+  --jsx--css-clean-start-2--h--color:       #567;
+
+
+
+  /** -------------------------------
+    hyperlnks text colors
+  */
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: honeydew;
+  --jsx--css-clean-start-2--tfoot--background-color: cornsilk;
+
+}
+

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/README.md

@@ -40,7 +40,7 @@ several .css files will be loaded with size of very few KB.
 
 ## Watch site in action
 
-[https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.html](https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.html)
+[https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.example.html](https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.example.html)
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jaisocx/css-clean-start-2",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "",
   "author": "Jaisocx",
   "keywords": [
@@ -8,23 +8,22 @@
     "styles"
   ],
   "files": [
-    "index.html",
+    "index.example.html",
     "responsive_sizes.html",
 
     "MediaAndStyles/*.css",
-    "MediaAndStyles/themes/",
-    "MediaAndStyles/fonts/",
+    "MediaAndStyles/themes",
+    "MediaAndStyles/fonts",
 
     "transpiled/CommonJS",
     "transpiled/ESNext",
-    "transpiled/Simple",
 
     "webpack.aliases.json",
 
     "README.md"
   ],
   "optionalDependencies": {
-    "@jaisocx/responsive-sizes": "~1.2.2"
+    "@jaisocx/responsive-sizes": "~1.3.1"
   },
   "private": false,
   "publishConfig": {