Clamp Wrapper


by Jeremy Caudle
code

Read about using clamp to make a more robust wrapper class and thought I'd try it out. I'm not quite sure how to provide a fallback for older browsers just yet, but I probably won't put this to use on a client's site unless I can provide one. Now will I use it on personal projects? I'll certainly consider it.

clamp()

View the code:

HTML and JS 
<section class="code-block wrapper">
            <h1>clamp()</h1>
        </section>
CSS 
section.code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                z-index: 1;
                padding: 1rem;
                margin: 1rem auto;
                background: linear-gradient(rgb(240, 222, 65), rgb(240, 179, 65));
                min-height: 50vh;
                display: grid;
                place-items: center;
                border-radius: 1rem;
                box-shadow: 0 1rem 1rem 1rem rgba(0, 0, 0, .1)
            }
            .wrapper {
                width: clamp(16rem, 85vw, 60rem);
                margin-left: auto;
                margin-right: auto;
                padding-left: 1rem;
                padding-right: 1rem;
            }
            section.code-block h1 {
                color: white;
                margin: 2rem auto;
                text-shadow: -3px 5px 5px rgba(0, 0, 0, .25);
            }

            @media (min-width: 30em) {

                section.code-block h1 {
                    font-size: 3rem;
                }

            }

            @media (min-width: 50em) and (max-width: 70em)  {

                section.code-block h1 {
                    font-size: 3.5rem;
                }

            }

            @media (min-width: 71em)  {

                section.code-block h1 {
                    font-size: 4rem;
                }

            }

Tags