Simple Flexbox Header


by Jeremy Caudle
code

I did some practice with Flexbox on Treehouse today and thought I'd try reworking the practice that I followed. I made sure to make use of the supports feature query, and I tried nested media queries this time around. It looks like they worked!

View the code:

HTML and JS 
<header class="asite-header">
                <a class="logo-text" href="/"><span >Jeremy Caudle</span></a>
                <nav>
                    <ul class="top-nav">
                        <li><a href="../blog">Blog</a></li>
                        <li><a href="../journal">Journal</a></li>
                        <li><a href="../notes">Notes</a></li>
                        <li><a href="../links">Links</a></li>
                        <li><a href="../code">Code</a></li>
                    </ul>
                </nav>
            </header>
CSS 
.logo-text {
                display: inline-block;
                font-size: 2rem;
                text-decoration: none;
                font-style: oblique;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                padding: .25rem .5rem;
                font-weight: 600;
								color: slateblue;
								margin-top: 1rem;
            }

						.asite-header {
							margin: 2rem 0;
						}

            .asite-header, .top-nav {
                background-color: #cdcdcd;
            }

            .top-nav {
                    list-style-type: none;
                    text-decoration: none;
                    padding-left: 0;
                    line-height: 1.5;
                }

            .top-nav li {
                text-decoration: none;
                font-size: 1.2rem;
                padding: .4rem;
            }

            .top-nav a {
                    text-decoration: none;
                    color: #324d96;
                }

            @supports (display: flex) {

                .asite-header, .top-nav {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    justify-content: center;
                    align-content: center;
                }
                
                @media (min-width: 60ch) {
                    .top-nav {
                        flex-direction: row;
                        justify-content: space-around;
                    }

                    .top-nav li {
                        padding: 0;
                    }

                }

                @media (min-width: 60em) {
                    .asite-header, .top-nav {
                        flex-direction: row;
                        justify-content: space-between;
                    }
                    
										.logo {
											margin: 0;
										}
										
                    .top-nav li {
                        margin: 0 1rem;
                    }

                }

            }

Tags