rye/krye.io

:root {
    --section-padding: 1em;
    --section-left-padding: var(--section-padding);
    --section-right-padding: var(--section-padding);

    --box-shadow-2: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    --box-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
    --box-shadow-4: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
    --box-shadow-6: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
    --box-shadow-8: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
    --box-shadow-16: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

html,
body {
    font-family: 'Fira Sans', sans-serif;
    color: var(--color-2);
}

header {
    display: grid;
    justify-content: center;
    align-content: center;
    height: 100vh;
    background-color: var(--color-primary-lighter);
    color: var(--color-primary-darker);
    text-align: center;
}

header > .name {
    font-family: 'Alfa Slab One', serif;
    font-size: 3.5em;
}

header > .name span.aux { color: var(--color-primary-dark); }

header > .tagline {
    font-family: 'Fira Sans', sans-serif;
    font-weight: bold;
    font-size: 1.5em;
}

header > .tagline > span.item.bigger + span.item:before { content: attr(data-separator) " "; }
header > .tagline > span.item.bigger { font-size: 1.25em; }

header > .tagline > span.item::after {
    font-size: var(--tagline-font-size);
    content: " " attr(data-separator);
}

header > .tagline > span:last-child:after,
header > .tagline > span.bigger:after {
    content: "";
}

@media screen and (max-width: 512px) {
    header > .name .aux {
        display: none;
    }

    header > .tagline {
        display: none;
    }
}

section {
    background-color: var(--section-bg-primary);
    align-items: center;
    justify-content: center;
}

#about .inner > p > b { color: var(--color-secondary-0-dark); }
#projects .inner > p > b { color: var(--color-secondary-1-dark); }

section:nth-of-type(2) {
    background-color: var(--section-bg-secondary);
}

.example {
    display: grid;
    margin: 1em 2em 1em 2em;
    font-size: 90%;
    box-shadow: var(--box-shadow-2);
    padding: 16pt;
    transition: box-shadow 0.125s ease-in-out;
    border-radius: 4pt;
    background-color: var(--section-bg-primary);
}

.example > * {
    margin-top: 0;
    margin-bottom: 0;
}

.example:hover {
    box-shadow: var(--box-shadow-8);
    transition: box-shadow 0.125s ease-in-out;
    z-index: 1;
}

.example p.description { font-style: italic; }

.example.e31 { grid-template-columns: 3fr 1fr; }
.example.e4 { grid-template-columns: 4fr; }
.example.e13 { grid-template-columns: 1fr 3fr; }

.example:first-of-type { margin-top: 2em; }
.example:last-of-type { margin-bottom: 2em; }
.example { grid-row-gap: 0em; grid-column-gap: 1em; }

.example > h1 { align-self: flex-end; }
.example > .text { align-self: flex-start; }

.example > .left { grid-column: 1; }
.example > .right { grid-column: 2; }

.example > h1 { display: flex; flex-direction: row; justify-content: space-between; }
.example > h1 > * { flex: 0 1 auto; }

.example > h1 > .links {
    font-weight: 500;
    color: var(--section-fg-primary-lighter);
}

.example > h1 > .links a { padding-right: 1em; }
.example > h1 > .links a:last-child { padding-right: 0; }

.example > .image {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-row: span 2;
}

.example > .text {
    display: flex;
    text-align: justify;
    flex-direction: column;
    justify-content: flex-start;
    grid-row: 2;
}

.example img {
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .example,
    .example.e31,
    .example.e4,
    .example.e13 {
        grid-template-columns: auto;
    }

    .example > h1 > .links {
        margin-right: 0;
    }

    .example > .image, img#aao-screenshot {
        display: none;
    }
}