Skip to content

Instantly share code, notes, and snippets.

@amit08255

amit08255/demo1.html

Created October 1, 2025 03:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save amit08255/1f39583228658e4ed8eceefcdba76657 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save amit08255/1f39583228658e4ed8eceefcdba76657 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. amit08255 created this gist Oct 1, 2025.
    256 changes: 256 additions & 0 deletions demo1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,256 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Advanced CSS Container Queries Demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
    body {
    background: #f6f7fb;
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 2rem;
    }
    .dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    }
    /*-------------------------------------------
    PANEL - Named Container (panel)
    --------------------------------------------*/
    .panel {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 16px #0001;
    padding: 1.5rem;
    container-type: inline-size;
    container-name: panel;
    resize: horizontal;
    min-width: 280px;
    max-width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: box-shadow 0.2s;
    }
    .panel:hover {
    box-shadow: 0 4px 32px #3366cc22;
    }
    .panel-title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
    }
    /*-------------------------------------------
    WIDGET - Nested Named Container (widget)
    --------------------------------------------*/
    .widget {
    background: #eaf0fa;
    border-radius: 0.8rem;
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    container-type: inline-size;
    container-name: widget;
    box-shadow: 0 1px 6px #b3c6ff12;
    min-width: 160px;
    transition: background 0.3s;
    }
    /*-------------------------------------------
    CARD - Inner Adaptive Element
    --------------------------------------------*/
    .card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.8rem 1rem;
    box-shadow: 0 1px 4px #b3c6ff22;
    transition: flex-direction 0.3s, background 0.3s;
    min-width: 0;
    }
    .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg,#b3c6ff,#fbc2eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    font-weight: bold;
    box-shadow: 0 1px 6px #b3c6ff22;
    flex-shrink: 0;
    transition: width 0.3s, height 0.3s, font-size 0.3s;
    }
    .card-content {
    flex: 1 1 auto;
    min-width: 0;
    }
    .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.3rem 0;
    }
    .card-desc {
    color: #667;
    font-size: 0.97rem;
    margin: 0;
    }
    /*-------------------------------------------
    Complex Container Queries
    --------------------------------------------*/
    /* 1. PANEL: Larger width, make title big and widget background lighter */
    @container panel (min-width: 600px) {
    .panel-title {
    font-size: 2.2rem;
    color: #2e51a2;
    }
    .widget {
    background: #f3f7fc;
    }
    }
    /* 2. WIDGET: Widget wide = card row layout, big icons */
    @container widget (min-width: 350px) {
    .card {
    flex-direction: row;
    }
    .card-icon {
    width: 64px;
    height: 64px;
    font-size: 2.5rem;
    }
    }
    /* 3. WIDGET: Widget narrow = card column layout, small icons */
    @container widget (max-width: 220px) {
    .card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    }
    .card-icon {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    }
    .card-content {
    text-align: left;
    }
    }
    /* 4. NESTED: Card background changes if panel is large AND widget is large */
    @container panel (min-width: 700px) {
    @container widget (min-width: 350px) {
    .card {
    background: #e4f9ec;
    }
    }
    }
    /* 5. CARD: Extra compact if panel is small and widget is small */
    @container panel (max-width: 400px) {
    @container widget (max-width: 220px) {
    .card {
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    }
    }
    }
    /* 6. STYLE-BASED Container Query: Widget theme */
    .widget[data-theme="warning"] {
    --icon-bg: linear-gradient(135deg,#ffb347,#ffcc80);
    --card-bg: #fff7e6;
    }
    @container style(--icon-bg: linear-gradient(135deg,#ffb347,#ffcc80)) {
    .card-icon {
    background: var(--icon-bg);
    }
    .card {
    background: var(--card-bg,#fff);
    }
    }
    /* 7. Container Query Units: Card title font scales with widget size */
    @container widget (min-width: 220px) {
    .card-title {
    font-size: clamp(1rem, 0.8rem + 1cqw, 2rem);
    }
    }
    /* 8. Fallback for browsers w/o container queries */
    @supports not (container-type: inline-size) {
    .panel-title { font-size: 1.4rem; }
    .widget { background: #eaf0fa; }
    .card { flex-direction: row; }
    .card-title { font-size: 1rem; }
    }
    </style>
    </head>
    <body>
    <h1>Advanced Container Queries Demo</h1>
    <p>Resize each panel horizontally to see nested, named, and style-based container queries in action.</p>
    <div class="dashboard">
    <div class="panel">
    <div class="panel-title">Personal Overview</div>
    <div class="widget">
    <div class="card">
    <div class="card-icon">👩‍💻</div>
    <div class="card-content">
    <div class="card-title">Coding Hours</div>
    <div class="card-desc">28 hours this week</div>
    </div>
    </div>
    <div class="card">
    <div class="card-icon">📚</div>
    <div class="card-content">
    <div class="card-title">Books Read</div>
    <div class="card-desc">3 finished this month</div>
    </div>
    </div>
    </div>
    </div>
    <div class="panel">
    <div class="panel-title">Team Stats</div>
    <div class="widget" data-theme="warning">
    <div class="card">
    <div class="card-icon">⚠️</div>
    <div class="card-content">
    <div class="card-title">Pending Reviews</div>
    <div class="card-desc">5 pull requests need review</div>
    </div>
    </div>
    <div class="card">
    <div class="card-icon">✅</div>
    <div class="card-content">
    <div class="card-title">Completed Tasks</div>
    <div class="card-desc">12 done this sprint</div>
    </div>
    </div>
    </div>
    </div>
    <div class="panel">
    <div class="panel-title">Project Health</div>
    <div class="widget">
    <div class="card">
    <div class="card-icon">🚦</div>
    <div class="card-content">
    <div class="card-title">Build Status</div>
    <div class="card-desc">All systems operational</div>
    </div>
    </div>
    <div class="card">
    <div class="card-icon">📈</div>
    <div class="card-content">
    <div class="card-title">Coverage</div>
    <div class="card-desc">98.2% unit tests passing</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>