Updates

Author: a2rp

404.html

@@ -13,7 +13,7 @@
             href="https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap"
             rel="stylesheet"
         />
-      <script type="module" crossorigin src="/css-core-notes/assets/index-E8aWiKyr.js"></script>
+      <script type="module" crossorigin src="/css-core-notes/assets/index-AykKsmrq.js"></script>
       <link rel="stylesheet" crossorigin href="/css-core-notes/assets/index-A7CGImtt.css">
     </head>
 

assets/index-E8aWiKyr.js assets/index-AykKsmrq.jsassets/index-E8aWiKyr.js renamed to assets/index-AykKsmrq.js

@@ -248,6 +248,7 @@ Error generating stack: `+l.message+`
         /* padding: 60px 20px; */
         display: flex;
         justify-content: center;
+        margin-bottom: 50px;
     `,Content:ve.div`
         max-width: 1440px;
         width: 100%;
@@ -288,7 +289,7 @@ Error generating stack: `+l.message+`
             font-family: monospace;
             color: var(--color-text-primary);
         }
-    `},of=()=>{const o="2026-02-20T21:50:22.587Z",c=new Date(o).toLocaleString("en-US",{year:"numeric",month:"long",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});return r.jsx(Hp.Wrapper,{children:r.jsxs(Hp.Content,{children:[r.jsx("h2",{className:"heading",children:"About CSS"}),r.jsx("p",{children:"CSS stands for Cascading Style Sheets. It controls how HTML looks and feels on screen. CSS is responsible for layout, spacing, colors, typography, responsive behavior, and visual effects. HTML gives structure and meaning, while CSS gives presentation."}),r.jsx("p",{children:"The core power of CSS comes from the cascade. Multiple rules can apply to the same element, and the browser decides the final result using specificity, source order, and inheritance. Once you understand the cascade, layout systems like Flexbox and Grid become much easier and more predictable."}),r.jsx("p",{children:"The css-core-notes project is designed as a focused revision system. It keeps everything in one scrollable page with expandable topics, so you can revise quickly before interviews and also build a strong mental model of modern CSS."}),r.jsxs("div",{className:"meta",children:[r.jsx("span",{className:"metaLabel",children:"Last updated:"}),r.jsx("span",{className:"metaValue",children:c})]})]})})},af={Wrapper:ve.section`
+    `},of=()=>{const o="2026-02-21T06:42:58.503Z",c=new Date(o).toLocaleString("en-US",{year:"numeric",month:"long",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});return r.jsx(Hp.Wrapper,{children:r.jsxs(Hp.Content,{children:[r.jsx("h2",{className:"heading",children:"About CSS"}),r.jsx("p",{children:"CSS stands for Cascading Style Sheets. It controls how HTML looks and feels on screen. CSS is responsible for layout, spacing, colors, typography, responsive behavior, and visual effects. HTML gives structure and meaning, while CSS gives presentation."}),r.jsx("p",{children:"The core power of CSS comes from the cascade. Multiple rules can apply to the same element, and the browser decides the final result using specificity, source order, and inheritance. Once you understand the cascade, layout systems like Flexbox and Grid become much easier and more predictable."}),r.jsx("p",{children:"The css-core-notes project is designed as a focused revision system. It keeps everything in one scrollable page with expandable topics, so you can revise quickly before interviews and also build a strong mental model of modern CSS."}),r.jsxs("div",{className:"meta",children:[r.jsx("span",{className:"metaLabel",children:"Last updated:"}),r.jsx("span",{className:"metaValue",children:c})]})]})})},af={Wrapper:ve.section`
         width: 100%;
         margin-bottom: 5px;
         border: 1px solid var(--color-border);
@@ -6449,4 +6450,4 @@ button:focus-visible {
   .title {
     font-weight: 900;
   }
-}`})]})]}),r.jsxs("div",{className:"footerNote",children:[r.jsx("div",{className:"footerTitle",children:"Quick takeaway"}),r.jsxs("ul",{className:"checks",children:[r.jsxs("li",{children:[r.jsx("span",{className:"checkDot"}),"Prefer container queries for component layouts"]}),r.jsxs("li",{children:[r.jsx("span",{className:"checkDot"}),"Use logical properties for RTL readiness"]}),r.jsxs("li",{children:[r.jsx("span",{className:"checkDot"}),"Use @layer to keep cascade predictable"]})]})]})]})]})},Qf=()=>r.jsxs(Hl.Wrapper,{children:[r.jsx(Hl.Header,{children:r.jsx(sf,{})}),r.jsxs(Hl.Main,{children:[r.jsxs("div",{className:"contentWrapper",children:[r.jsx(of,{}),r.jsx("h1",{className:"category",children:"CSS fundamentals"}),r.jsx(lf,{}),r.jsx("h1",{className:"category",children:"Ways to Apply css"}),r.jsx(df,{}),r.jsx("h1",{className:"category",children:"Selectors deep dive"}),r.jsx(uf,{}),r.jsx("h1",{className:"category",children:"Box model"}),r.jsx(xf,{}),r.jsx("h1",{className:"category",children:"Units and values"}),r.jsx(ff,{}),r.jsx("h1",{className:"category",children:"Colors and backgrounds"}),r.jsx(vf,{}),r.jsx("h1",{className:"category",children:"Typography"}),r.jsx(jf,{}),r.jsx("h1",{className:"category",children:"Display and visibility"}),r.jsx(bf,{}),r.jsx("h1",{className:"category",children:"Positioning"}),r.jsx(kf,{}),r.jsx("h1",{className:"category",children:"Flexbox"}),r.jsx(Cf,{}),r.jsx("h1",{className:"category",children:"CSS grid"}),r.jsx(zf,{}),r.jsx("h1",{className:"category",children:"Responsive design"}),r.jsx(Ef,{}),r.jsx("h1",{className:"category",children:"Transitions"}),r.jsx(_f,{}),r.jsx("h1",{className:"category",children:"Animations"}),r.jsx(Bf,{}),r.jsx("h1",{className:"category",children:"Advanced layout visual effects"}),r.jsx(Rf,{}),r.jsx("h1",{className:"category",children:"CSS variables"}),r.jsx(Ff,{}),r.jsx("h1",{className:"category",children:"CSS architecture"}),r.jsx(Af,{}),r.jsx("h1",{className:"category",children:"Performance best practices"}),r.jsx(Uf,{}),r.jsx("h1",{className:"category",children:"Accessibility in css"}),r.jsx($f,{}),r.jsx("h1",{className:"category",children:"Modern css features"}),r.jsx(Gf,{})]}),r.jsx("div",{className:"footerWrapper",children:r.jsx(tf,{})})]})]});Cx.createRoot(document.getElementById("root")).render(r.jsx(r.Fragment,{children:r.jsx(Qf,{})}));
+}`})]})]}),r.jsxs("div",{className:"footerNote",children:[r.jsx("div",{className:"footerTitle",children:"Quick takeaway"}),r.jsxs("ul",{className:"checks",children:[r.jsxs("li",{children:[r.jsx("span",{className:"checkDot"}),"Prefer container queries for component layouts"]}),r.jsxs("li",{children:[r.jsx("span",{className:"checkDot"}),"Use logical properties for RTL readiness"]}),r.jsxs("li",{children:[r.jsx("span",{className:"checkDot"}),"Use @layer to keep cascade predictable"]})]})]})]})]})},Qf=()=>r.jsxs(Hl.Wrapper,{children:[r.jsx(Hl.Header,{children:r.jsx(sf,{})}),r.jsxs(Hl.Main,{children:[r.jsxs("div",{className:"contentWrapper",children:[r.jsx(of,{}),r.jsx(lf,{}),r.jsx(df,{}),r.jsx(uf,{}),r.jsx(xf,{}),r.jsx(ff,{}),r.jsx(vf,{}),r.jsx(jf,{}),r.jsx(bf,{}),r.jsx(kf,{}),r.jsx(Cf,{}),r.jsx(zf,{}),r.jsx(Ef,{}),r.jsx(_f,{}),r.jsx(Bf,{}),r.jsx(Rf,{}),r.jsx(Ff,{}),r.jsx(Af,{}),r.jsx(Uf,{}),r.jsx($f,{}),r.jsx(Gf,{})]}),r.jsx("div",{className:"footerWrapper",children:r.jsx(tf,{})})]})]});Cx.createRoot(document.getElementById("root")).render(r.jsx(r.Fragment,{children:r.jsx(Qf,{})}));

index.html

@@ -13,7 +13,7 @@
             href="https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap"
             rel="stylesheet"
         />
-      <script type="module" crossorigin src="/css-core-notes/assets/index-E8aWiKyr.js"></script>
+      <script type="module" crossorigin src="/css-core-notes/assets/index-AykKsmrq.js"></script>
       <link rel="stylesheet" crossorigin href="/css-core-notes/assets/index-A7CGImtt.css">
     </head>