Vivid-Casper/assets/css/screen.css

/* Components - Groups of Patterns
/* ---------------------------------------------------------- */
@import "components/global.css";

body {
    background: #F4F8FB;
}

.img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-position: center center;
    background-size: cover;
}

.hidden {
    position: absolute;
    text-indent: -9999px;
    visibility: hidden;
}


/* Layout - Groups of Patterns
/* ---------------------------------------------------------- */

/* Full width page blocks */
.outer {
    position: relative;
    padding: 0 4vw;
}

/* Centered content container blocks */
.inner {
    margin: 0 auto;
    max-width: 1040px;
    width: 100%;
}

/* Usage:

<div class="outer">
    <div class="inner">
        Centered content
    </div>
</div>

*/

/* Special Template Styles
/* ---------------------------------------------------------- */

@media (min-width: 900px) {
    .home-template .post-feed,
    .tag-template .post-feed {
        margin-top: -100px;
    }
    .home-template .site-nav {
        position: relative;
        top: -70px;
        z-index: 300;
    }
}


/* Site Header
/* ---------------------------------------------------------- */

.site-header {
    position: relative;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #fff;
    background: color(var(--darkgrey) l(-15%)) no-repeat center center;
    background-size: cover;
}

.site-header:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: rgba(0,0,0,0.18);
}

.site-header:after {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 60px;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
}

.site-header.no-cover:before,
.site-header.no-cover:after {
    display: none;
}

.site-header-content {
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10vw 0;
    min-height: 200px;
    max-height: 450px;
    text-align: center;
}

.site-title {
    margin: 0;
    padding: 0;
    font-size: 3.8rem;
    font-weight: 700;
}

.site-logo {
    max-height: 45px;
}

.site-description {
    margin: 0;
    padding: 5px 0;
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    opacity: 0.8;
}


/* Site Navigation
/* ---------------------------------------------------------- */

.site-nav {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 40px;
    font-size: 1.3rem;
    overflow-y: hidden;
}

.site-nav-left {
    display: flex;
    align-items: center;
    margin-right: 10px;
    padding-bottom: 80px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
}

/* Site Nav Hack Explanation (above):

What's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them.

The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result.

*/

.site-nav-logo {
    flex-shrink: 0;
    display: block;
    margin-right: 24px;
}

.site-nav-logo img {
    display: block;
    height: 21px;
    width: auto;
}

.nav-menu ul {
    display: flex;
    margin: 0 0 0 -12px;
    padding: 0;
    list-style: none;
}

.nav-item {
    display: block;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.nav-item a {
    display: block;
    margin: 0;
    padding: 10px 12px;
    color: #fff;
    opacity: 0.8;
}

.nav-item a:hover {
    opacity: 1;
    text-decoration: none;
}

.site-nav-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
}

.social-links {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.social-links a:last-of-type {
    padding-right: 20px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px;
    color: #fff;
    opacity: 0.8;
}

.social-link:hover {
    opacity: 1;
}

.social-link svg {
    height: 1.8rem;
    fill: #fff;
}

.social-link-fb svg {
    height: 1.5rem;
}

.subscribe-button {
    display: block;
    padding: 4px 10px;
    border: #fff 1px solid;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1em;
    border-radius: 10px;
    opacity: 0.8;
}

.subscribe-button:hover {
    text-decoration: none;
    opacity: 1;
}

.rss-button {
    opacity: 0.8;
}

.rss-button:hover {
    opacity: 1;
}

.rss-button svg {
    height: 2.1rem;
    margin-bottom: 1px;
    fill: #fff;
}


/* Site Navigation
/* ---------------------------------------------------------- */

.post-feed {
    position: relative;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    padding: 30px 0 0 0;
}

.post-card {
    flex: 1 1 300px;
    order: unset;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    margin: 0 20px 40px;
    background: #fff center center;
    background-size: cover;
    box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.5s ease;
}

.post-card:hover {
    box-shadow: 0 0 1px rgba(39,44,49,0.10), 0 3px 16px rgba(39, 44, 49,0.07);
    transform: translate3D(0, -1px, 0);
    transition: all 0.3s ease;
}

.post-card-image-link {
    position: relative;
}

.post-card-image {
    width: auto;
    height: 200px;
    background: var(--lightgrey) no-repeat center center;
    background-size: cover;
}

.post-card-content-link {
    position: relative;
    display: block;
    padding: 25px 25px 0;
    color: var(--darkgrey);
}

.post-card-content-link:hover {
    text-decoration: none;
}

.post-card-tags {
    display: block;
    margin-bottom: 4px;
    color: var(--midgrey);
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.15em;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.post-card-title {
    margin-top: 0;
}

.post-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.post-card-excerpt {
    font-family: Georgia, serif;
}

.post-card-meta {
    padding: 0 25px 25px;
}

.author-profile-image {
    height: 25px;
    width: 25px;
    margin-right: 5px;
    border-radius: 100%;
}

.post-card-author {
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Special Styling for home page grid (below):

The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.

 */

@media (min-width: 795px) {

    .home-template .post-feed .post-card:nth-child(6n+1) {
        flex: 1 1 100%;
        flex-direction: row;
    }

    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
        flex: 1 1 auto;
    }

    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-image {
        width: 100%;
        height: 100%;
    }

    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-content {
        flex: 0 1 357px;
    }

    .home-template .post-feed .post-card:nth-child(6n+1) h2 {
        font-size: 2.6rem;
    }

    .home-template .post-feed .post-card:nth-child(6n+1) p {
        font-size: 1.8rem;
        line-height: 1.55em;
    }

    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
        padding: 30px 40px 0;
    }

    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
        padding: 0 40px 30px;
    }

    /* Special Styling for Subscribe box

    We've got a special subscribe box, this allows it to appear in the middle of the loop of posts without actually needing to interrupt the loop. Neat trickery courtesy of David Darnes.



    .post-card:nth-of-type(2),
    .post-card:nth-of-type(3) {
      order: -1;
    }

    */

}





/* Single Post
/* ---------------------------------------------------------- */

.post-template .site-main,
.page-template .site-main {
    padding-bottom: 4vw;
    background: #fff;
}

.post-full {
    position: relative;
    z-index: 50;
}
/* ^ Required to make .post-full-content:before/after z-index stacking work */

.post-full-header {
    max-width: 1040px;
    margin: 0 auto;
    padding: 10vw 3vw 6vw;
    text-align: center;
}

.post-full-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--midgrey)
}

.post-full-meta-date {
    color: var(--blue);

}

.post-full-title {
    color: color(var(--darkgrey) l(-5%));
}

.date-divider {
    display: inline-block;
    margin: 0 6px 1px;
}

.post-full-image {
    height: 800px;
    margin: -5vw -10vw -165px;
    background: var(--lightgrey) center center;
    background-size: cover;
    border-radius: 5px;
}

@media (max-width: 1170px) {
    .post-full-image {
        height: 600px;
        margin: -5vw -4vw -100px;
        border-radius: 0;
    }
}

.post-full-content {
    position: relative;
    min-height: 230px;
    padding: 70px 100px 0;
    margin: 0 auto;
    font-size: 2.2rem;
    line-height: 1.6em;
    font-family: Georgia, serif;
    background: #fff;
}

@media (max-width: 1170px) {
    .post-full-content {
        padding: 5vw 7vw 0;
    }
}
@media (max-width: 800px) {
    .post-full-content {
        font-size: 1.9rem;
    }
}

.post-full-content:before {
    display: block;
    content: "";
    width: 20px;
    height: 200px;
    transform: rotate(-5deg);
    position: absolute;
    top: 15px;
    left: -5px;
    z-index: -1;
    background: rgba(39,44,49,0.15);
    filter: blur(5px);
}

.post-full-content:after {
    display: block;
    content: "";
    width: 20px;
    height: 200px;
    transform: rotate(5deg);
    position: absolute;
    top: 15px;
    right: -5px;
    z-index: -1;
    background: rgba(39,44,49,0.15);
    filter: blur(5px);
}

.no-image .post-full-content:before,
.no-image .post-full-content:after {
    display: none;
}

.kg-card-markdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
}

.post-full-content p,
.post-full-content ul,
.post-full-content ol,
.post-full-content dl,
.post-full-content pre,
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h5,
.post-full-content h6 {
    min-width: 100%;
}

.post-template .kg-card-markdown > p:first-child {
    font-size: 1.25em;
    line-height: 1.5em;
}

.post-full-content a {
    color: #000;
    box-shadow: var(--blue) 0 -1px 0 inset;
}

.post-full-content a:hover {
    color: var(--blue);
    text-decoration: none;
}

.post-full-content strong,
.post-full-content em {
    color: color(var(--darkgrey) l(-5%));
}

.post-full-content img {
    width: 100vw;
    max-width: 1040px;
    margin: 1.5em 0;
}

/*
If an image url has #full on the end, give it special wide styles.
Super neat trick courtesy of @JoelDrapper
*/
.post-full-content img[src$="#full"] {
    max-width: 100vw;
}

.post-full-content blockquote {
    margin: 0 0 1.5em 0;
    padding: 1.5em 0;
    border: 0;
    text-align: center;
    font-size: 3rem;
    line-height: 1.6em;
    color: var(--blue);
}

.post-full-content blockquote:before {
    content: open-quote;
}

.post-full-content blockquote p {
    margin: 0;
}

@media (min-width: 1000px) {
    .post-full-content blockquote {
        width: 100vw;
        max-width: 1060px;
    }
}

.post-full-content blockquote + blockquote {
    padding-top: 0;
}

.post-full-content code {
    padding: 0 5px 2px;
    font-size: 0.8em;
    line-height: 1em;
    font-weight: 400!important;
    background: var(--whitegrey);
    border-radius: 3px;
}

.post-full-content pre {
    margin: 1.5em 0 3em;
    padding: 20px;
    border: color(var(--darkgrey) l(-10%)) 1px solid;
    font-size: 1.4rem;
    line-height: 1.5em;
    color: var(--whitegrey);
    background: color(var(--darkgrey) l(-3%));
    border-radius: 5px;
    overflow-x: auto;
    max-width: 100%;
}

.post-full-content pre code {
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
}

.post-full-content .fluid-width-video-wrapper {
    margin: 1.5em 0 3em;
}

.post-full-content hr:after {
    display: block;
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -10px;
    height: 30px;
    width: 1px;
    background: color(var(--lightgrey) l(+10%));
    box-shadow: #fff 0 0 0 5px;
    transform: rotate(45deg);
}

.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h5,
.post-full-content h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    color: color(var(--darkgrey) l(-5%));
}

.post-full-content h1 {
    font-size: 5rem;
}
@media (max-width: 500px) {
    .post-full-content h1 {
        font-size: 2.2rem;
    }
}

.post-full-content h2 {
    font-size: 3.5rem;
}
@media (max-width: 500px) {
    .post-full-content h2 {
        font-size: 2.9rem;
    }
}

.post-full-content h3 {
    font-size: 2.5rem;
}
@media (max-width: 500px) {
    .post-full-content h3 {
        font-size: 2rem;
    }
}

.post-full-content h4 {
    font-size: 1.6rem;
}

.post-full-content h5 {
    font-size: 1.4rem;
}

.post-full-content h6 {
    font-size: 1.4rem;
}


/* Subscribe Form
/* ---------------------------------------------------------- */

.subscribe-form {
    margin: 1.5em 0;
    padding: 6.5vw 7vw 7vw;
    border: color(var(--whitegrey) l(+2%)) 1px solid;
    text-align: center;
    background: color(var(--whitegrey) l(+4%));
    border-radius: 7px;
}

.subscribe-form-title {
    margin: 0 0 3px 0;
    padding: 0;
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--darkgrey)
}

.subscribe-form p {
    margin-bottom: 1em;
    font-size: 2.2rem;
    line-height: 1.55em;
    letter-spacing: 0.2px;
    color: var(--midgrey);
}

.subscribe-form form {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 420px;
    margin: 0 auto;
}

.subscribe-form .form-group {
    flex-grow: 1;
}

.subscribe-email {
    display: block;
    padding: 10px;
    width: 100%;
    border: color(var(--lightgrey) l(+7%)) 1px solid;
    color: var(--midgrey);
    font-size: 1.8rem;
    line-height: 1em;
    font-weight: normal;
    user-select: text;
    border-radius: 5px;
    transition: border-color 0.15s linear;

    -webkit-appearance: none;
}

.subscribe-email:focus {
    outline: 0;
    border-color: color(var(--lightgrey) l(-2%));
}

.subscribe-form button {
    display: inline-block;
    outline: none;
    margin: 0 0 0 10px;
    padding: 0 20px;
    height: 41px;
    font-size: 1.5rem;
    line-height: 37px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
    text-align: center;
    border-radius: 5px;
    background: linear-gradient(
    color(var(--blue) whiteness(+7%)),
    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
    color(var(--blue) lightness(-4%) saturation(-10%))
    );
    box-shadow: 0 0 0 1px inset rgba(0,0,0,0.14);

    -webkit-font-smoothing: subpixel-antialiased;
}

.subscribe-form button:active,
.subscribe-form button:focus {
    background: color(var(--blue) lightness(-9%) saturation(-10%));
}


/* Post Footer
/* ---------------------------------------------------------- */

.post-full-footer {
    display: flex;
    justify-content: space-between;
    max-width: 840px;
    margin: 0 auto;
    padding: 3vw 0 6vw 0;
}

.author-card {
    display: flex;
    align-items: center;
}

.author-card-image {
    height: 60px;
    width: 60px;
    margin-right: 10px;
}

.author-card-content h4 {
    margin: 0;
    padding: 0;
    font-size: 2rem;
}

.author-card-content h4 a {
    color: var(--darkgrey);
    font-weight: 700;
}

.author-card-content h4 a:hover {
    text-decoration: none;
}

.author-card-content p {
    margin: 0;
    color: var(--midgrey);
}


/* Comments
/* ---------------------------------------------------------- */

.post-full-comments {
    max-width: 840px;
    margin: 0 auto;
}


/* Related posts
/* ---------------------------------------------------------- */

.read-next-feed {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    padding: 30px 0 0 0;
}

.read-next-card {
    position: relative;
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    margin: 0 15px 30px;
    padding: 25px;
    color: #fff;
    background: var(--darkgrey) center center;
    background-size: cover;
    box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
    border-radius: 5px;
    overflow: hidden;
}

.read-next-card:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(0,40,60,0.60) 0%,rgba(0,20,40,0.50) 100%);
    border-radius: 5px;
    backdrop-filter: blur(2px);
}

.read-next-card-header {
    position: relative;
    z-index: 50;
    text-align: center;
}

.read-next-card-header-title {
    padding: 10px 20px;
    margin: 0;
    font-size: 3rem;
    line-height: 1.2em;
    font-weight: 200;
    letter-spacing: 1px;
    color: #fff;
}

.read-next-card-content {
    flex-grow: 1;
    display: flex;
    position: relative;
    z-index: 50;
    font-size: 1.7rem;
}

.read-next-card-content a {
    color: #fff;
}

.read-next-card-content ol {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: 0 0 0 2em;
}

.read-next-card-content li {
    padding-left: 5px;
    margin: 20px 0;
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 200;
}

.read-next-card-content li a {
    display: inline-block;
    vertical-align: top;
    font-size: 1.6rem;
    font-weight: 500;
}


/* Site Footer
/* ---------------------------------------------------------- */

.site-footer {
    position: relative;
    padding-top: 20px;
    padding-bottom: 60px;
    color: #fff;
    background: color(var(--darkgrey) l(-15%));
}

.site-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.7);
    font-size: 1.3rem;
}

.site-footer-content a {
    color: rgba(255,255,255,0.7);;
}

.site-footer-content a:hover {
    color: rgba(255,255,255,1);
    text-decoration: none;
}

.site-footer-nav {
    display: flex;
}

.site-footer-nav a {
    position: relative;
    margin-left: 20px;
}

.site-footer-nav a:before {
    content: "";
    display: block;
    height: 2px;
    width: 2px;
    position: absolute;
    top: 11px;
    left: -11px;
    border-radius: 100%;
    background: #fff;
}

.site-footer-nav a:first-of-type:before {
    display: none;
}






/* ==========================================================================
   Floating Header
   ========================================================================== */

.floating-header {
    visibility: hidden;
    display: flex;
    align-items: center;
    position: fixed;
    height: 48px;
    border-bottom: rgba(0,0,0,0.06) 1px solid;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.95);
    transform: translate3d(0, -120%, 0);
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

.floating-active {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1);
}

.floating-header-logo {
    margin: 0 0 0 15px;
    font-size: 1.5rem;
    line-height: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-header-logo a {
    display: flex;
    align-items: center;
    color: var(--darkgrey);
    font-weight: 700;
    line-height: 1em;
}

.floating-header-logo a:hover {
    text-decoration: none;
}

.floating-header-logo img {
    max-height: 20px;
    margin-right: 10px;
}

.floating-header-divider {
    margin: 0 5px;
    line-height: 1em;
}

.floating-header-title {
    flex: 1;
    margin: 0;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.3em;
    color: #2e2e2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-header-share {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 2%;
    font-size: 1.3rem;
    line-height: 1;
}

.floating-header-share a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-header-share svg {
    fill: #fff;
    height: 16px;
    width: auto;
}

.floating-header-share-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: rgba(0,0,0,0.7);
    font-weight: 500;
}

.floating-header-share-label svg {
    width: 18px;
    height: 18px;
    margin: 0 5px 0 10px;
    stroke: rgba(0,0,0,0.7);
    transform: rotate(90deg);
}

.floating-header-share-tw,
.floating-header-share-fb {
    display: block;
    width: 48px;
    height: 48px;
    line-height: 45px;
    align-items: center;
    text-align: center;
    color: #fff;
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

.floating-header-share-tw {
    background: #33b1ff;
}

.floating-header-share-fb {
    background: #005e99;
}

@media (max-width: 900px) {
    .floating-header { height: 40px; }
    .floating-header-share-tw,
    .floating-header-share-fb {
        height: 40px;
        width: 40px;
        line-height: 38px;
    }
}

@media (max-width: 800px) {
    .floating-header-logo { margin-left: 10px; }
    .floating-header-logo a { color: #2e2e2e; }
    .floating-header-title,
    .floating-header-divider { visibility: hidden; }
}

@media (max-width: 450px) {
    .floating-header-share-label { display: none; }
}