#2: Tabula Rasa

<!DOCTYPE xhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Raleway:900|Muli:400,400i,700,700i" rel="stylesheet">
<link rel="icon" href="{Favicon}">
<title>Page #2: Tabula Rasa</title>

<style type="text/css">

:root {
    /* All colors can be changed right here! The variables are named after their properties, what you see is what you get. You can use hex codes, rgb/rgba, or hsl */
    --bg-top:#2d1920;
    --bg-bottom:#092121;
    --title:#51b5ac;
    --text-bg:rgba(255,255,255,0);
    --text:#eee;
    --text-accent:#ffa435;
    --border:#ea598e;
    --desc-border:#297a73;
}

a { transition:.2s all ease; }

body, html {
    padding:0;
    margin:0;
    position:absolute;
}

body {
    /*Fallback*/
    background-color:var(--bg-top);
    background-image:linear-gradient(to bottom right, var(--bg-top), var(--bg-bottom));
    background-attachment:fixed;
    font-family:'Muli', sans-serif;
    color:var(--text);
    width:100vw;
    height:100vh;
    font-size:.9em;
}

::selection {
    background:var(--text-accent);
    color:var(--bg-bottom);
}

::-moz-selection {
    background:var(--text-accent);
    color:var(--bg-bottom);
}

a {
    color:var(--text-accent);
    text-decoration:none;
}

a:hover {
    color:var(--text);
}

#title {
    color:var(--title);
    font-family:'Raleway', sans-serif;
    font-weight:bold;
    letter-spacing:1px;
    line-height:1em;
    text-transform:uppercase;
    margin:0 0 20px;
    box-sizing:border-box;
    text-align:right;
}

.linx, #description {
    background:var(--text-bg);
    padding:10px;
    margin:0;
    margin-bottom:10px;
    border-radius:calc(.5em + 10px);
    box-sizing:border-box;
    border:1px solid var(--border);
}

main {
    position:relative;
    margin:30px;
    /*Ensures the content doesn't expand indefinitely. Can you imagine lol*/
    max-width:500px;
}

/*Centers the content on wide screens*/
@media all and (min-width:560px) {
    main {
        margin:auto;
        top:45%;
        transform:translateY(-50%);
        transform-style:preserve-3d;
    }
}

.link-wrap.second {
    justify-content:initial;
}

.link-wrap {
    position:relative;
    margin:0 -5px;
    /*This is where the magic happens!*/
    display:flex;
    /*Ensures the elements display in a row and then wrap around to the next line if they run out of space*/
    flex-flow:row wrap;
}

.linx {
    margin:0 5px;
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:10px;
    line-height:1em;
}

.big.linx {
    /*Ensures the links conform to certain sizes even if theyre flexy. The min-max constraints let them expand if they need to but otherwise stay put*/
    min-width:calc(50% - 10px);
    max-width:calc(100% - 10px);
    flex-grow:5;
}

#description {
    margin:20px 0 30px;
    padding:15px;
    line-height:1.5em;
    border-color:var(--desc-border);
}

/*Causes the last navigation link in the top row to expand if there's leftover space*/
.first .linx:last-of-type { flex-grow:9; }

</style>
</head>

<body>

<main>

<h1 id="title">Page #2: Tabula Rasa</h1>
<nav class="link-wrap first">
    <a class="linx" href="/">Index</a>
    <a class="linx" href="/ask">Ask</a>
    <a class="linx" href="https://linthm.tumblr.com" title="Tabula Rasa &copy; Laighlin">Credit</a>
    <a class="linx" href="https://tumblr.com/dashboard">Dash</a>
</nav>
<aside id="description">
    You can put some custom text here if you'd like. Or delete this section entirely if you don't want it. Be my guest!
</aside>
<nav class="link-wrap second">
    <a class="big linx" href="/">Link 1</a>
    <a class="big linx" href="/">Link 2</a>
    <a class="big linx" href="/">Link 3</a>
    <a class="big linx" href="/">Link 4</a>
    <a class="big linx" href="/">Link 5</a>
    <a class="big linx" href="/">Link 6</a>
    <a class="big linx" href="/">Link 7</a>
</nav>

</main>

</body>
</html>