Small improvements to mobile layout

brynne8 commented 8 months ago

.cta {
    display: flex;
}

.cta > .button {
    white-space: nowrap;
    padding: .8em min(1.8em, 5%);
}

@media only screen and (max-width: 600px) {
    .subnav > a:first-child {
        box-shadow: none;
        padding: 0;

        & > span {
            display: none;
        }

        &::before {
            content: '';
            display: block;
            width: 26px;
            height: 26px;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PHBhdGggZD0iTTQ2MS44MSw1My44MWE0LjQsNC40LDAsMCwwLTMuMy0zLjM5Yy01NC4zOC0xMy4zLTE4MCwzNC4wOS0yNDguMTMsMTAyLjE3YTI5NC45LDI5NC45LDAsMCwwLTMzLjA5LDM5LjA4Yy0yMS0xLjktNDItLjMtNTkuODgsNy41LTUwLjQ5LDIyLjItNjUuMTgsODAuMTgtNjkuMjgsMTA1LjA3YTksOSwwLDAsMCw5LjgsMTAuNGw4MS4wNy04LjlhMTgwLjI5LDE4MC4yOSwwLDAsMCwxLjEsMTguMywxOC4xNSwxOC4xNSwwLDAsMCw1LjMsMTEuMDlsMzEuMzksMzEuMzlhMTguMTUsMTguMTUsMCwwLDAsMTEuMSw1LjMsMTc5LjkxLDE3OS45MSwwLDAsMCwxOC4xOSwxLjFsLTguODksODFhOSw5LDAsMCwwLDEwLjM5LDkuNzljMjQuOS00LDgzLTE4LjY5LDEwNS4wNy02OS4xNyw3LjgtMTcuOSw5LjQtMzguNzksNy42LTU5LjY5YTI5My45MSwyOTMuOTEsMCwwLDAsMzkuMTktMzMuMDlDNDI3LjgyLDIzMy43Niw0NzQuOTEsMTEwLjksNDYxLjgxLDUzLjgxWk0yOTguNjYsMjEzLjY3YTQyLjcsNDIuNywwLDEsMSw2MC4zOCwwQTQyLjY1LDQyLjY1LDAsMCwxLDI5OC42NiwyMTMuNjdaIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MzJweCIvPjxwYXRoIGQ9Ik0xMDkuNjQsMzUyYTQ1LjA2LDQ1LjA2LDAsMCwwLTI2LjM1LDEyLjg0QzY1LjY3LDM4Mi41Miw2NCw0NDgsNjQsNDQ4czY1LjUyLTEuNjcsODMuMTUtMTkuMzFBNDQuNzMsNDQuNzMsMCwwLDAsMTYwLDQwMi4zMiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjMycHgiLz48L3N2Zz4=);
            background-size: contain;
        }
    }
}

Compare the screenshots:

First Image Second Image

tipiirai commented 8 months ago

Turning this into a pull request would be awesome. Now it's hard to see what gets added/removed/updated...

Thank you!

brynne8 commented 8 months ago

Turning this into a pull request would be awesome. Now it's hard to see what gets added/removed/updated...

Thank you!

I wanted to create a PR but I'm not familiar with the style syntax (stylus) in this repo. So I wrote the styles in standard CSS.

tipiirai commented 7 months ago

Fixed this with the above commit. Thanks for help!

nuejs / www

Small improvements to mobile layout #43