@jaisocx/css-clean-start-2 1.0.0

package/MediaAndStyles/responsive_size_Constants.css

@@ -0,0 +1,137 @@
+.jsx {
+
+  /* mobile xs */
+  --responsive_size_e02_mobile_xs_portrait_min_width: 240px;
+  --responsive_size_e02_mobile_xs_portrait_max_width: 320px;
+
+  --responsive_size_e02_mobile_xs_landscape_min_width: 320px;
+  --responsive_size_e02_mobile_xs_landscape_max_width: 500px;
+
+
+
+  /* mobile s */
+  --responsive_size_e04_mobile_s_portrait_min_width: 321px;
+  --responsive_size_e04_mobile_s_portrait_max_width: 374px;
+
+  --responsive_size_e04_mobile_s_landscape_min_width: 501px;
+  --responsive_size_e04_mobile_s_landscape_max_width: 667px;
+
+
+
+  /* mobile sm */
+  --responsive_size_e06_mobile_sm_portrait_min_width: 375px;
+  --responsive_size_e06_mobile_sm_portrait_max_width: 430px;
+
+  --responsive_size_e06_mobile_sm_landscape_min_width: 668px;
+  --responsive_size_e06_mobile_sm_landscape_max_width: 736px;
+
+
+
+  /* mobile md */
+  --responsive_size_e08_mobile_md_portrait_min_width: 431px;
+  --responsive_size_e08_mobile_md_portrait_max_width: 480px;
+
+  --responsive_size_e08_mobile_md_landscape_min_width: 737px;
+  --responsive_size_e08_mobile_md_landscape_max_width: 812px;
+
+
+
+  /* tablet sm */
+  --responsive_size_h03_tablet_sm_portrait_min_width: 481px;
+  --responsive_size_h03_tablet_sm_portrait_max_width: 767px;
+
+  --responsive_size_h03_tablet_sm_landscape_min_width: 813px;
+  --responsive_size_h03_tablet_sm_landscape_max_width: 960px;
+
+
+
+  /* tablet md */
+  --responsive_size_h05_tablet_md_portrait_min_width: 768px;
+  --responsive_size_h05_tablet_md_portrait_max_width: 1024px;
+
+  --responsive_size_h05_tablet_md_landscape_min_width: 961px;
+  --responsive_size_h05_tablet_md_landscape_max_width: 1024px;
+
+
+
+  /* laptop sm */
+  --responsive_size_l03_laptop_sm_portrait_min_width: 1025px;
+  --responsive_size_l03_laptop_sm_portrait_max_width: 1080px;
+
+  --responsive_size_l03_laptop_sm_landscape_min_width: 1025px;
+  --responsive_size_l03_laptop_sm_landscape_max_width: 1279px;
+
+
+
+  /* laptop md */
+  --responsive_size_l05_laptop_md_portrait_min_width: 1081px;
+  --responsive_size_l05_laptop_md_portrait_max_width: 1200px;
+
+  --responsive_size_l05_laptop_md_landscape_min_width: 1280px;
+  --responsive_size_l05_laptop_md_landscape_max_width: 1439px;
+
+
+
+  /* laptop lg */
+  --responsive_size_l07_laptop_lg_portrait_min_width: 1201px;
+  --responsive_size_l07_laptop_lg_portrait_max_width: 1440px;
+
+  --responsive_size_l07_laptop_lg_landscape_min_width: 1440px;
+  --responsive_size_l07_laptop_lg_landscape_max_width: 1600px;
+
+
+
+  /* display xl */
+  --responsive_size_s02_display_xl_portrait_min_width: 1441px;
+  --responsive_size_s02_display_xl_portrait_max_width: 1600px;
+
+  --responsive_size_s02_display_xl_landscape_min_width: 1601px;
+  --responsive_size_s02_display_xl_landscape_max_width: 1920px;
+
+
+
+  /* display xxl */
+  --responsive_size_s04_display_xxl_portrait_min_width: 1601px;
+  --responsive_size_s04_display_xxl_portrait_max_width: 2160px;
+
+  --responsive_size_s04_display_xxl_landscape_min_width: 1921px;
+  --responsive_size_s04_display_xxl_landscape_max_width: 2560px;
+
+
+
+  /* display qhd */
+  --responsive_size_s08_display_qhd_portrait_min_width: 2161px;
+  --responsive_size_s08_display_qhd_portrait_max_width: 2160px;
+
+  --responsive_size_s08_display_qhd_landscape_min_width: 2561px;
+  --responsive_size_s08_display_qhd_landscape_max_width: 3840px;
+
+
+
+  /* tv 4k */
+  --responsive_size_t04_tv_4k_portrait_min_width: 2161px;
+  --responsive_size_t04_tv_4k_portrait_max_width: 4320px;
+
+  --responsive_size_t04_tv_4k_landscape_min_width: 3841px;
+  --responsive_size_t04_tv_4k_landscape_max_width: 7680px;
+
+
+
+  /* tv 8k */
+  --responsive_size_t08_tv_8k_portrait_min_width: 4321px;
+  --responsive_size_t08_tv_8k_portrait_max_width: 8640px;
+
+  --responsive_size_t08_tv_8k_landscape_min_width: 7681px;
+  --responsive_size_t08_tv_8k_landscape_max_width: 15360px;
+
+
+
+  /* tv 16k */
+  --responsive_size_t16_tv_16k_portrait_min_width: 8641px;
+  --responsive_size_t16_tv_16k_portrait_max_width: 9999px;
+
+  --responsive_size_t16_tv_16k_landscape_min_width: 15361px;
+  --responsive_size_t16_tv_16k_landscape_max_width: 25360px;
+
+}
+

package/MediaAndStyles/themes/theme_base/CssCleanStart_2_theme_base_main.css

@@ -0,0 +1,193 @@
+.jsx {
+  /** -------------------------------
+    this style sets rem size for the html page. 1rem = 16px
+  */
+  --jsx--css-clean-start-2--rem: 16px;
+
+
+  /** -------------------------------
+    background styles of the html elem <body>, and, the direct anchester html elem <main>
+  */
+  --jsx--css-clean-start-2--body-tag--background: #eee;
+  --jsx--css-clean-start-2--site--background: #fff;
+
+
+
+  /** -------------------------------
+    width and height of the body elem
+  */
+  --jsx--css-clean-start-2--body-tag--width: 100%;
+  --jsx--css-clean-start-2--body-tag--max-width: 100%;
+  --jsx--css-clean-start-2--body-tag--min-width: 100%;
+
+  --jsx--css-clean-start-2--body-tag--height: auto;
+  --jsx--css-clean-start-2--body-tag--max-height: unset;
+  --jsx--css-clean-start-2--body-tag--min-height: 100vh;
+
+  --jsx--css-clean-start-2--body-tag--overflow-x: auto;
+  --jsx--css-clean-start-2--body-tag--overflow-y: auto;
+
+
+
+  /** -------------------------------
+    width and height of the site, normally positioned in the center of the browser's tab
+  */
+  --jsx--css-clean-start-2--site--height: fit-content;
+  --jsx--css-clean-start-2--site--max-height: fit-content;
+  --jsx--css-clean-start-2--site--min-height: 100vh;
+
+  --jsx--css-clean-start-2--site--overflow-x: hidden;
+  --jsx--css-clean-start-2--site--overflow-y: visible;
+
+  --jsx--css-clean-start-2--site--width: 70%;
+  --jsx--css-clean-start-2--site--max-width: 100%;
+  --jsx--css-clean-start-2--site--min-width: 70%;
+
+
+
+  /** -------------------------------
+    padding and margin of the site
+  */
+  --jsx--css-clean-start-2--site--margin: 0 auto 0 auto;
+
+  --jsx--css-clean-start-2--site--padding-top: 1rem;
+  --jsx--css-clean-start-2--site--padding-left: 1rem;
+  --jsx--css-clean-start-2--site--padding-right: 1rem;
+  --jsx--css-clean-start-2--site--padding-bottom: 1rem;
+  --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);
+
+
+  /** -------------------------------
+    overflow styles
+  */
+  --jsx--css-clean-start-2--body-tag--overflow-x: hidden;
+  --jsx--css-clean-start-2--site--overflow-y: visible;
+
+
+
+  /** -------------------------------
+    html elems styles
+  */
+  --jsx--css-clean-start-2--all-tags--position: relative;
+  --jsx--css-clean-start-2--all-tags--box-sizing: border-box;
+
+  --jsx--css-clean-start-2--inline-tags--display: inline-block;
+  --jsx--css-clean-start-2--block-tags--display: block;
+  --jsx--css-clean-start-2--custom-tags--display: var(--jsx--css-clean-start-2--block-tags--display);
+
+  --jsx--css-clean-start-2--all-tags--padding: 0 0 0 0;
+  --jsx--css-clean-start-2--h--padding: 0 0 0 0;
+
+  --jsx--css-clean-start-2--all-tags--margin: 0 0 0 0;
+  --jsx--css-clean-start-2--h--margin: 0 0 0 0;
+  --jsx--css-clean-start-2--p--margin: 0.9rem 0 0.9rem 0;
+
+  --jsx--css-clean-start-2--all-tags--color: black;
+
+  --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif;
+  --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace;
+
+  --jsx--css-clean-start-2--all-tags--font-size: 0.85rem;
+  --jsx--css-clean-start-2--all-tags--line-height: 1rem;
+
+  --jsx--css-clean-start-2--all-tags--border-color: green;
+  --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--font-weight: 600;
+  --jsx--css-clean-start-2--h--color:       #626262;
+  --jsx--css-clean-start-2--h--margin:      0 0 0 0;
+  --jsx--css-clean-start-2--h--padding:     0 0 0 0;
+
+
+
+  --jsx--css-clean-start-2--h1--font-size: 2.3rem;
+  --jsx--css-clean-start-2--h1--line-height: 2.45rem;
+
+  --jsx--css-clean-start-2--h2--font-size: 2.1rem;
+  --jsx--css-clean-start-2--h2--line-height: 2.34rem;
+
+  --jsx--css-clean-start-2--h3--font-size: 1.8rem;
+  --jsx--css-clean-start-2--h3--line-height: 2.2rem;
+
+  --jsx--css-clean-start-2--h4--font-size: 1.6rem;
+  --jsx--css-clean-start-2--h4--line-height: 2rem;
+
+  --jsx--css-clean-start-2--h5--font-size: 1.33rem;
+  --jsx--css-clean-start-2--h5--line-height: 1.67rem;
+
+  --jsx--css-clean-start-2--h6--font-size: 1rem;
+  --jsx--css-clean-start-2--h6--line-height: 1.6rem;
+
+
+
+  --jsx--css-clean-start-2--h1--font-weight: var(--jsx--css-clean-start-2--h--font-weight);
+  --jsx--css-clean-start-2--h1--color:       var(--jsx--css-clean-start-2--h--color);
+  --jsx--css-clean-start-2--h1--margin:      var(--jsx--css-clean-start-2--h--margin);
+  --jsx--css-clean-start-2--h1--padding:     var(--jsx--css-clean-start-2--h--padding);
+
+  --jsx--css-clean-start-2--h2--font-weight: var(--jsx--css-clean-start-2--h--font-weight);
+  --jsx--css-clean-start-2--h2--color:       var(--jsx--css-clean-start-2--h--color);
+  --jsx--css-clean-start-2--h2--margin:      var(--jsx--css-clean-start-2--h--margin);
+  --jsx--css-clean-start-2--h2--padding:     var(--jsx--css-clean-start-2--h--padding);
+
+  --jsx--css-clean-start-2--h3--font-weight: var(--jsx--css-clean-start-2--h--font-weight);
+  --jsx--css-clean-start-2--h3--color:       var(--jsx--css-clean-start-2--h--color);
+  --jsx--css-clean-start-2--h3--margin:      var(--jsx--css-clean-start-2--h--margin);
+  --jsx--css-clean-start-2--h3--padding:     var(--jsx--css-clean-start-2--h--padding);
+
+  --jsx--css-clean-start-2--h4--font-weight: var(--jsx--css-clean-start-2--h--font-weight);
+  --jsx--css-clean-start-2--h4--color:       var(--jsx--css-clean-start-2--h--color);
+  --jsx--css-clean-start-2--h4--margin:      var(--jsx--css-clean-start-2--h--margin);
+  --jsx--css-clean-start-2--h4--padding:     var(--jsx--css-clean-start-2--h--padding);
+
+  --jsx--css-clean-start-2--h5--font-weight: var(--jsx--css-clean-start-2--h--font-weight);
+  --jsx--css-clean-start-2--h5--color:       var(--jsx--css-clean-start-2--h--color);
+  --jsx--css-clean-start-2--h5--margin:      var(--jsx--css-clean-start-2--h--margin);
+  --jsx--css-clean-start-2--h5--padding:     var(--jsx--css-clean-start-2--h--padding);
+
+  --jsx--css-clean-start-2--h6--font-weight: var(--jsx--css-clean-start-2--h--font-weight);
+  --jsx--css-clean-start-2--h6--color:       var(--jsx--css-clean-start-2--h--color);
+  --jsx--css-clean-start-2--h6--margin:      var(--jsx--css-clean-start-2--h--margin);
+  --jsx--css-clean-start-2--h6--padding:     var(--jsx--css-clean-start-2--h--padding);
+
+
+
+  /** -------------------------------
+    hyperlnks text colors
+  */
+  --jsx--css-clean-start-2--anchor--color: navy;
+  --jsx--css-clean-start-2--anchor-hover--color: blue;
+
+  --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: darkblue;
+  --jsx--css-clean-start-2--anchor-active-hover--color: blue;
+
+
+
+  /** -------------------------------
+    hyperlnks are underlined, or they have been set other css text-decoration style
+  */
+  --jsx--css-clean-start-2--anchor--text-decoration: none;
+  --jsx--css-clean-start-2--anchor-hover--text-decoration: underline;
+
+  --jsx--css-clean-start-2--anchor-visited--text-decoration: none;
+  --jsx--css-clean-start-2--anchor-visited-hover--text-decoration: underline;
+
+  --jsx--css-clean-start-2--anchor-active--text-decoration: underline;
+  --jsx--css-clean-start-2--anchor-active-hover--text-decoration: underline;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: ghostwhite;
+  --jsx--css-clean-start-2--tfoot--background-color: honeydew;
+
+}
+

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base.css

@@ -0,0 +1,231 @@
+/*
+
+Responsive rules
+
+These styles for a display size in this primary template for a site from scratch,
+  I guess, need first the adjustments for sizes,
+  when tested on several displays for higher quality of a site shown in a browser on a display.
+
+That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
+
+*/
+@media only screen and (min-width: 320px) and (max-width: 500px) and (orientation: landscape) {
+
+  .jsx {
+    --theme_name__CssCleanStart_2: theme_base;
+    --responsive_size: responsive_size_e02_mobile_xs_landscape;
+    --responsive_size__CssCleanStart_2__theme_base: responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base;
+
+    --responsive_size: responsive_size_e02_mobile_xs_landscape;
+
+    --responsive_size__min-width: 320px;
+    --responsive_size__max-width: 500px;
+
+
+
+    --theme_name__CssCleanStart_2: theme_base;
+    --responsive_size__CssCleanStart_2__theme_base: responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-width: 320px;
+    --responsive_size__CssCleanStart_2__theme_base__max-width: 500px;
+
+
+
+
+
+    /** Clean Start Css Constants */
+    /** -------------------------------
+      this style sets rem size for the html page. 1rem = 16px
+    */
+    /* --jsx--css-clean-start-2--rem: 16px; */
+
+
+    /** -------------------------------
+      background styles of the html elem <body>, and, the direct anchester html elem <main>
+    */
+    /* --jsx--css-clean-start-2--body-tag--background: #eee; */
+    /* --jsx--css-clean-start-2--site--background: #fff; */
+
+
+
+    /** -------------------------------
+      width and height of the body elem
+    */
+    /* --jsx--css-clean-start-2--body-tag--width: 100%; */
+    /* --jsx--css-clean-start-2--body-tag--max-width: 100%; */
+    /* --jsx--css-clean-start-2--body-tag--min-width: 100%; */
+
+    /* --jsx--css-clean-start-2--body-tag--height: auto; */
+    /* --jsx--css-clean-start-2--body-tag--max-height: unset; */
+    /* --jsx--css-clean-start-2--body-tag--min-height: 100vh; */
+
+    /* --jsx--css-clean-start-2--body-tag--overflow-x: auto; */
+    /* --jsx--css-clean-start-2--body-tag--overflow-y: auto; */
+
+
+
+    /** -------------------------------
+      width and height of the site, normally positioned in the center of the browser's tab
+    */
+    /* --jsx--css-clean-start-2--site--height: fit-content; */
+    /* --jsx--css-clean-start-2--site--max-height: fit-content; */
+    /* --jsx--css-clean-start-2--site--min-height: 100vh; */
+
+    /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
+    /* --jsx--css-clean-start-2--site--overflow-y: visible; */
+
+    /* --jsx--css-clean-start-2--site--width: 70%; */
+    /* --jsx--css-clean-start-2--site--max-width: 100%; */
+    /* --jsx--css-clean-start-2--site--min-width: 70%; */
+
+
+
+    /** -------------------------------
+      padding and margin of the site
+    */
+    /* --jsx--css-clean-start-2--site--margin: 0 auto 0 auto; */
+
+    /* --jsx--css-clean-start-2--site--padding-top: 1rem; */
+    /* --jsx--css-clean-start-2--site--padding-left: 1rem; */
+    /* --jsx--css-clean-start-2--site--padding-right: 1rem; */
+    /* --jsx--css-clean-start-2--site--padding-bottom: 1rem; */
+    /* --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); */
+
+
+    /** -------------------------------
+      overflow styles
+    */
+    /* --jsx--css-clean-start-2--body-tag--overflow-x: hidden; */
+    /* --jsx--css-clean-start-2--site--overflow-y: visible; */
+
+
+
+    /** -------------------------------
+      html elems styles
+    */
+    /* --jsx--css-clean-start-2--all-tags--position: relative; */
+    /* --jsx--css-clean-start-2--all-tags--box-sizing: border-box; */
+
+    /* --jsx--css-clean-start-2--inline-tags--display: inline-block; */
+    /* --jsx--css-clean-start-2--block-tags--display: block; */
+    /* --jsx--css-clean-start-2--custom-tags--display: var(--jsx--css-clean-start-2--block-tags--display); */
+
+    /* --jsx--css-clean-start-2--all-tags--padding: 0 0 0 0; */
+    /* --jsx--css-clean-start-2--h--padding: 0 0 0 0; */
+
+    /* --jsx--css-clean-start-2--all-tags--margin: 0 0 0 0; */
+    /* --jsx--css-clean-start-2--h--margin: 0 0 0 0; */
+    /* --jsx--css-clean-start-2--p--margin: 0.9rem 0 0.9rem 0; */
+
+    /* --jsx--css-clean-start-2--all-tags--color: black; */
+
+    /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
+    /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
+
+    /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
+    /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
+
+    /* --jsx--css-clean-start-2--all-tags--border-color: green; */
+    /* --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--font-weight: 600; */
+    /* --jsx--css-clean-start-2--h--color:       #626262; */
+    /* --jsx--css-clean-start-2--h--margin:      0 0 0 0; */
+    /* --jsx--css-clean-start-2--h--padding:     0 0 0 0; */
+
+
+
+    /* --jsx--css-clean-start-2--h1--font-size: 2.3rem; */
+    /* --jsx--css-clean-start-2--h1--line-height: 2.45rem; */
+
+    /* --jsx--css-clean-start-2--h2--font-size: 2.1rem; */
+    /* --jsx--css-clean-start-2--h2--line-height: 2.34rem; */
+
+    /* --jsx--css-clean-start-2--h3--font-size: 1.8rem; */
+    /* --jsx--css-clean-start-2--h3--line-height: 2.2rem; */
+
+    /* --jsx--css-clean-start-2--h4--font-size: 1.6rem; */
+    /* --jsx--css-clean-start-2--h4--line-height: 2rem; */
+
+    /* --jsx--css-clean-start-2--h5--font-size: 1.33rem; */
+    /* --jsx--css-clean-start-2--h5--line-height: 1.67rem; */
+
+    /* --jsx--css-clean-start-2--h6--font-size: 1rem; */
+    /* --jsx--css-clean-start-2--h6--line-height: 1.6rem; */
+
+
+
+    /* --jsx--css-clean-start-2--h1--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h1--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h1--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h1--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h2--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h2--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h2--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h2--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h3--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h3--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h3--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h3--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h4--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h4--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h4--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h4--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h5--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h5--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h5--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h5--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h6--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h6--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h6--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h6--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+
+
+    /** -------------------------------
+      hyperlnks text colors
+    */
+    /* --jsx--css-clean-start-2--anchor--color: navy; */
+    /* --jsx--css-clean-start-2--anchor-hover--color: blue; */
+
+    /* --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: darkblue; */
+    /* --jsx--css-clean-start-2--anchor-active-hover--color: blue; */
+
+
+
+    /** -------------------------------
+      hyperlnks are underlined, or they have been set other css text-decoration style
+    */
+    /* --jsx--css-clean-start-2--anchor--text-decoration: none; */
+    /* --jsx--css-clean-start-2--anchor-hover--text-decoration: underline; */
+
+    /* --jsx--css-clean-start-2--anchor-visited--text-decoration: none; */
+    /* --jsx--css-clean-start-2--anchor-visited-hover--text-decoration: underline; */
+
+    /* --jsx--css-clean-start-2--anchor-active--text-decoration: underline; */
+    /* --jsx--css-clean-start-2--anchor-active-hover--text-decoration: underline; */
+
+
+
+    /* --jsx--css-clean-start-2--thead--background-color: ghostwhite; */
+    /* --jsx--css-clean-start-2--tfoot--background-color: honeydew; */
+
+  }
+
+}
+
+