npm - @jaisocx/css-code-snippet - Versions diffs - 1.3.7 → 1.3.9 - Mend

@jaisocx/css-code-snippet 1.3.7 → 1.3.9

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 (94) hide show

package/dev_css_code_snippet__preview.html CHANGED Viewed

@@ -1,260 +1,254 @@
 <!DOCTYPE html>
-<html lang="en" class="jsx theme_visible_height theme_darkmode">
+<html lang="en" class="jsx theme_visible_height theme_darkmode salad">
 <head>
-  <title>CssCodeSnippet</title>
+  <title> CssCodeSnippet </title>
-  <base href="./">
+  <base href="./" />
   <meta charset="utf-8" />
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <!--# FAVICON -->
-    <!-- <link
-      rel="icon"
-      type="image/x-icon"
-      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
-      href-fallback="favicon/Icon_Jaisocx.ico"
-      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
-    /> -->
+  <!--# FAVICON -->
+  <!--    <link-->
+  <!--      rel="icon"-->
+  <!--      type="image/x-icon"-->
+  <!--      href="https://sandbox.basetasks.site/cdn/www/media/images/favicon/Icon_Jaisocx.ico"-->
+  <!--      href-fallback="favicon/Icon_Jaisocx.ico"-->
+  <!--      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"-->
+  <!--    />-->
-    <link
-      rel="icon"
-      type="image/x-icon"
-      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
-      href-fallback="favicon/Icon_Sandbox_Brightday.ico"
-      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
-    />
+  <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
+  <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
+  <!-- <link
+    rel="stylesheet"
+    type="text/css"
+    charset="utf-8"
+    href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
+    href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
+    onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
+  /> -->
-    <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
-    <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
-    <!-- <link
+  <link
       rel="stylesheet"
       type="text/css"
       charset="utf-8"
-      href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
-      href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
+      href="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
+      href-fallback="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
       onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
-    /> -->
+  />
-    <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL  -->
-    <link
+  <!--# STYLES CssCodeSnippet and theme_base -->
+  <link
+      fetchpriority="medium"
       rel="stylesheet"
       type="text/css"
       charset="utf-8"
-      href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
-      href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
-      onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
-    />
+      href="MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css"
+  />
-    <!--# STYLES CssCodeSnippet and theme_base -->
-    <link
-        fetchpriority="medium"
-        rel="stylesheet"
-        type="text/css"
-        charset="utf-8"
-        href="MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css"
-    />
-    <link
+  <link
       fetchpriority="medium"
       rel="stylesheet"
       type="text/css"
       charset="utf-8"
       href="MediaAndStyles/CssCodeSnippet_main_relative.css"
-    />
+  />
-    <!-- <style>
-      /* .jsx {
+  <!-- <style>
+    /* .jsx {
-      }
+    }
-      .jsx .CssCodeSnippet {
+    .jsx .CssCodeSnippet {
-      } */
+    } */
-    </style> -->
+  </style> -->
-    <style>
+  <style>
-      .jsx {
-        --jsx--css-clean-start-2--site--padding: 2rem 0 0 0;
+    .jsx {
+      --jsx--css-clean-start-2--site--padding: 2rem 0 0 0;
-        --jsx--css-clean-start-2--h1--font-size: 1.05rem;
-        --jsx--css-clean-start-2--h2--font-size: 0.9rem;
-        --jsx--css-clean-start-2--h3--font-size: 0.83rem;
+      --jsx--css-clean-start-2--h1--font-size: 1.05rem;
+      --jsx--css-clean-start-2--h2--font-size: 0.9rem;
+      --jsx--css-clean-start-2--h3--font-size: 0.83rem;
-        --jsx--css-clean-start-2--h2--font-weight: 500;
+      --jsx--css-clean-start-2--h2--font-weight: 500;
-        --theme-button-width: fit-content;
-      }
+      --theme-button-width: fit-content;
+    }
-      .jsx themebuttons {
-        width: fit-content;
-        display: grid;
-        grid-auto-flow: column;
-        column-gap: 3rem;
-        margin: 0.9rem 0px 1.6rem 0px;
-      }
+    .jsx themebuttons {
+      width: fit-content;
+      display: grid;
+      grid-auto-flow: column;
+      column-gap: 3rem;
+      margin: 0.9rem 0px 1.6rem 0px;
+    }
-      .jsx themebuttons button {
-        width: var(--theme-button-width);
-      }
+    .jsx themebuttons button {
+      width: var(--theme-button-width);
+    }
-      .current::after {
-        content: "";
-        position: absolute;
-        bottom: -0.3rem;
-        left: 0;
-        width: 100%;
-        height: 0;
-        max-height: 0;
-        overflow-y: hidden;
-        border-bottom-width: 0.14rem;
-        border-bottom-style: solid;
-        border-bottom-color: var(--clean-start__text-color);
-      }
+    .current::after {
+      content: "";
+      position: absolute;
+      bottom: -0.3rem;
+      left: 0;
+      width: 100%;
+      height: 0;
+      max-height: 0;
+      overflow-y: hidden;
+      border-bottom-width: 0.14rem;
+      border-bottom-style: solid;
+      border-bottom-color: var(--clean-start__text-color);
+    }
-      .jsx button {
-        background-color: transparent;
-        text-align: left;
-      }
+    .jsx button {
+      background-color: transparent;
+      text-align: left;
+    }
-      #tooltip-button {
-        font-family: fantasy;
-      }
+    #tooltip-button {
+      font-family: fantasy;
+    }
-      .jsx.theme_visible_height body > main > content {
-        padding: 0 1rem 0 1rem;
+    .jsx.theme_visible_height body > main > content {
+      padding: 0 1rem 0 1rem;
-        overflow-y: hidden;
+      overflow-y: hidden;
-        min-height: unset;
-        height: unset;
+      min-height: unset;
+      height: unset;
-        flex-grow: 1;
-        flex-shrink: 1;
+      flex-grow: 1;
+      flex-shrink: 1;
-        display: flex;
-        flex-direction: column;
-        flex-basis: auto;
-        justify-content: stretch;
-        align-items: stretch;
-      }
+      display: flex;
+      flex-direction: column;
+      flex-basis: auto;
+      justify-content: stretch;
+      align-items: stretch;
+    }
-      .jsx.theme_visible_height > body > main > content > * {
-        flex-grow:       0;
-        flex-shrink:     1;
-      }
+    .jsx.theme_visible_height > body > main > content > * {
+      flex-grow:       0;
+      flex-shrink:     1;
+    }
-      .jsx.theme_visible_height .CodeSnippetHolder {
-        --code-snippet-tool--overflow-y: auto;
-        --code-snippet-tool--height: unset;
+    .jsx.theme_visible_height .CodeSnippetHolder {
+      --code-snippet-tool--overflow-y: auto;
+      --code-snippet-tool--height: unset;
-        min-height: 0;
-        max-height: unset;
-        height: unset;
+      min-height: 0;
+      max-height: unset;
+      height: unset;
-        flex-grow: 1;
-        flex-shrink: 1;
-      }
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
-      .jsx.theme_visible_height > body > main > page_signed {
-        flex-shrink:     1;
+    .jsx.theme_visible_height > body > main > page_signed {
+      flex-shrink:     1;
-        display:         flex;
-        flex-direction:  row;
-        justify-content: flex-start;
-        align-items:     center;
+      display:         flex;
+      flex-direction:  row;
+      justify-content: flex-start;
+      align-items:     center;
-        padding:    2rem 0 0 0;
+      padding:    2rem 0 0 0;
-        height:     6rem;
-        min-height: 6rem;
-        max-height: 6rem;
-        width:      100%;
-      }
+      height:     6rem;
+      min-height: 6rem;
+      max-height: 6rem;
+      width:      100%;
+    }
-      .jsx.theme_visible_height > body > main > page_signed text {
-        display:         flex;
-        flex-direction:  row;
-        justify-content: flex-start;
-        align-items:     center;
+    .jsx.theme_visible_height > body > main > page_signed text {
+      display:         flex;
+      flex-direction:  row;
+      justify-content: flex-start;
+      align-items:     center;
-        height:     100%;
-        min-height: 100%;
-        max-height: 100%;
+      height:     100%;
+      min-height: 100%;
+      max-height: 100%;
-        width:      100%;
+      width:      100%;
-        padding:    0 1rem 0 1rem;
+      padding:    0 1rem 0 1rem;
-        color:            whitesmoke;
-        background-color: green;
-      }
+      color:            var(--code-snippet--text-color);
+      background-color: var(--code-snippet-tool--border-color);
+    }
-    </style>
+  </style>
-    <style>
+  <style>
-      .jsx .CodeSnippetHolder#code-snippet-example,
-      .jsx .CodeSnippetHolder#code-snippet-example-thin {
-        /* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
-        on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
-        --lines-numbers--content: var(--lines-numbers--content--99);
-        --lines-number: 29;
-      }
+    .jsx .CodeSnippetHolder#code-snippet-example,
+    .jsx .CodeSnippetHolder#code-snippet-example-thin {
+      /* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
+      on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
+      --lines-numbers--content: var(--lines-numbers--content--99);
+      --lines-number: 29;
+    }
-      .jsx .CodeSnippetHolder#code-snippet-example {
-        --code-snippet-tool--width: fit-content;
-        --code-snippet-tool--overflow-y: auto;
-      }
+    .jsx .CodeSnippetHolder#code-snippet-example {
+      --code-snippet-tool--width: fit-content;
+      --code-snippet-tool--overflow-y: auto;
+    }
-      .jsx .CodeSnippetHolder#code-snippet-example-thin {
-        --code-snippet-tool--width:  28rem;
-        --code-snippet-tool--height: 22rem;
-        --code-snippet-tool--overflow-y: auto;
-      }
+    .jsx .CodeSnippetHolder#code-snippet-example-thin {
+      --code-snippet-tool--width:  28rem;
+      --code-snippet-tool--height: 22rem;
+      --code-snippet-tool--overflow-y: auto;
+    }
+  </style>
-    </style>
+</head>
-  </head>
+<body>
-  <body>
+<main>
-    <main>
+  <content>
-      <content>
+    <h1> Css Code Snippet </h1>
+    <h2> @jaisocx/css-code-snippet </h2>
+    <h3> dev_css_code_snippet__preview.html </h3>
-        <h1>Css Code Snippet</h1>
-        <h2>@jaisocx/css-code-snippet</h2>
-        <h3> dev_css_code_snippet__preview.html </h3>
-        <description>Css sites tool rendering code blocks with numbered code rows</description>
+    <description> Css sites tool rendering code blocks with numbered code rows </description>
-        <ThemeButtons>
-          <button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
-          <button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
-        </ThemeButtons>
+    <ThemeButtons>
+      <button id="button-turn-on-base" data-theme=""> Base </button>
+      <button id="button-turn-on-daymode" data-theme="theme_lightmode"> Day Mode </button>
+      <button id="button-turn-on-nightmode" data-theme="theme_darkmode"> Night Mode </button>
+    </ThemeButtons>
-        <CodeSnippetHolder id="code-snippet-example" class="CodeSnippetHolder little salad">
+    <CodeSnippetHolder id="code-snippet-example" class="CodeSnippetHolder little salad">
           <pre class="CodeSnippetArea">
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
@@ -286,105 +280,106 @@ describe('AppComponent', () => {
   });
 });
           </pre>
-        </CodeSnippetHolder>
+    </CodeSnippetHolder>
-      </content>
+  </content>
-      <page_signed>
-        <text>CSS Code Snippet 1.2.7 2025</text>
-      </page_signed>
+  <page_signed>
+    <text> CSS Code Snippet 1.3.7 2026 </text>
+  </page_signed>
-    </main>
+</main>
-  </body>
+</body>
-  <script>
+<script>
-    let currentButtonNodeClicked = null;
+  let currentButtonNodeClicked = null;
-    let cssClassesNames = [
-      "jsx",
-      "theme_visible_height"
-    ];
+  let cssClassesNames = [
+    "jsx",
+    "theme_visible_height",
+    "salad"
+  ];
-    // declaring the function, this is used in the event handler of the theme turning button when clicked on this button.
-    function turnOnTheme ( buttonNodeClicked ) {
+  // declaring the function, this is used in the event handler of the theme turning button when clicked on this button.
+  function turnOnTheme ( buttonNodeClicked ) {
-      if ( currentButtonNodeClicked !==  null ) {
-        currentButtonNodeClicked.classList.remove( "current" );
-      }
-      const htmlNode = document.getElementsByTagName("html")[0];
-      const htmlNodeClassList = htmlNode.classList;
+    if ( currentButtonNodeClicked !==  null ) {
+      currentButtonNodeClicked.classList.remove( "current" );
+    }
-      const themeCssClassPrefix = "theme";
+    const htmlNode = document.getElementsByTagName("html")[0];
+    const htmlNodeClassList = htmlNode.classList;
-      htmlNodeClassList.forEach (
-        (cssClassName) => {
-          if ( cssClassesNames.includes( cssClassName ) ) {
-            return;
-          }
+    const themeCssClassPrefix = "theme";
-          if ( cssClassName.startsWith( themeCssClassPrefix ) === true ) {
-            htmlNodeClassList.remove( cssClassName );
-          }
+    htmlNodeClassList.forEach (
+      (cssClassName) => {
+        if ( cssClassesNames.includes( cssClassName ) ) {
+          return;
         }
-      );
-      const themeName = buttonNodeClicked.dataset.theme;
-      if ( themeName && ( themeName.length !== 0 ) ) {
-        htmlNode.classList.add( themeName );
+        if ( cssClassName.startsWith( themeCssClassPrefix ) === true ) {
+          htmlNodeClassList.remove( cssClassName );
+        }
       }
+    );
-      currentButtonNodeClicked = buttonNodeClicked;
-      currentButtonNodeClicked.classList.add( "current" );
+    const themeName = buttonNodeClicked.dataset.theme;
+    if ( themeName && ( themeName.length !== 0 ) ) {
+      htmlNode.classList.add( themeName );
     }
-    // declaring the function, this adds to buttons the event handler to turn on the theme.
-    // this function is invoked when the site loads in the browser,
-    // in the event handler for the event DOMContentLoaded
-    function addThemeButtonsEventHandlers() {
+    currentButtonNodeClicked = buttonNodeClicked;
+    currentButtonNodeClicked.classList.add( "current" );
-      const buttonsIDs = [
-//        "button-turn-on-base-theme",
-        "button-turn-on-daymode",
-        "button-turn-on-nightmode"
-      ];
+  }
-      for ( let buttonId of buttonsIDs ) {
+  // declaring the function, this adds to buttons the event handler to turn on the theme.
+  // this function is invoked when the site loads in the browser,
+  // in the event handler for the event DOMContentLoaded
+  function addThemeButtonsEventHandlers() {
-        let buttonNode = document.getElementById( buttonId );
+    const buttonsIDs = [
+      "button-turn-on-base",
+      "button-turn-on-daymode",
+      "button-turn-on-nightmode"
+    ];
-        buttonNode.addEventListener (
-          "click",
-          (evt) => {
-            let buttonNodeClicked = evt.target;
-            turnOnTheme ( buttonNodeClicked );
-          }
-        );
+    for ( let buttonId of buttonsIDs ) {
+      let buttonNode = document.getElementById( buttonId );
+      buttonNode.addEventListener (
+        "click",
+        (evt) => {
+          let buttonNodeClicked = evt.target;
+          turnOnTheme ( buttonNodeClicked );
+        }
+      );
-      }
     }
+  }
-    // DOCUMENT ONLOAD, INVOKES THE FUNCTION TO PRELOAD THEME FONTS
-    document.addEventListener('DOMContentLoaded', () => {
+  // DOCUMENT ONLOAD, INVOKES THE FUNCTION TO PRELOAD THEME FONTS
+  document.addEventListener('DOMContentLoaded', () => {
-      // adding to buttons the event handler to turn on the theme.
-      addThemeButtonsEventHandlers();
+    // adding to buttons the event handler to turn on the theme.
+    addThemeButtonsEventHandlers();
-    });
+  });
-  </script>
+</script>
 </html>