weblog/_sass/_sizefix.scss

// ========================================================
// Common media queries to adjust for different
// screen sizes and mobile devices.
// ========================================================

@media screen and (max-width: 1200px) {
    .post {
        padding:     10px 10px;
        font-size:   15px;
        line-height: 1.4;
    }

    .post article ul {
        padding-left: 25px;
    }

    blockquote {
        border-left:  3px solid rgb(214, 219, 223);
        padding-left: 5px;
        font-size:    14px;
    }

    pre, code {
        font-size: 12px;
    }
}

@media screen and (max-width: 995px) {
    .post-thumbnail {
        width:  200px;
        height: 120px;
    }

    .post-list-item h2 {
        font-size:     20px;
        margin-top:    5px;
        margin-bottom: 5px;
    }

    img + em             { font-size: 12px;  } /* Reduce font size of image captions */
    .post-list-item      { height:    148px; }
    .post-list-item span { font-size: 12px;  }
    .post-list-item-text { top:       2%;    }
}

@media screen and (min-width: 768px) {
    #markdown-toc { display: none; }
}

@media screen and (max-width: 768px) {
    .navbar-text { display: none; }
}

@media screen and (max-width: 767px) {
    #my-banner-container { display: none; }
}

@media screen and (max-width: 750px) {
    .footer-col-1,
    .footer-col-2 {
        float: none;
        width: auto;
        padding-left: 15px;
    }

    .post-list-header { font-size: 26px; }
}

@media screen and (max-width: 700px) {
    .post-thumbnail {
        width:  110px;
        height: 70px;
    }

    .post-thumbnail-image {
        border: 2px solid white;
    }

    .post-list-item h2 {
        font-size:     16px;
        margin-top:    5px;
        margin-bottom: 5px;
    }

    .post-list-item-text    { top:       3%;    }
    .post-list-item         { height:    100px; }
    .post-list-header       { font-size: 28px;  }
    .post-list-item span    { font-size: 10px;  }
    .navbar-brand           { font-size: 24px;  }
    .categories-list-header { font-size: 14px;  }
    .categories-list-item   { font-size: 14px;  }
    .my-badge               { font-size: 14px;  }
    .paginator              { font-size: 14px;  }
    .footer-col-wrapper     { font-size: 14px;  }
}

@media screen and (max-width: 570px) {
    img + em { font-size: 10px; } /* Reduce font size of image captions */
}

@media screen and (max-width: 550px) {
    #markdown-toc { padding-top: 30px; }
}

@media screen and (max-width: 500px) {
    .post-thumbnail {
        width:         115px;
        height:        80px;
        margin-top:    20px;
        margin-bottom: 20px;
    }

    .navbar-brand        { font-size: 22px;  }
    .post-list-item      { height:    145px; }
    .post-list-item-text { top:       4%;    }
    .post-list-header    { font-size: 24px;  }
}

@media screen and (max-width: 480px) {
    .navbar-brand     { font-size:    18px; }
    .post-list-header { font-size:    22px; }
    #site-logo-navbar { margin-right: 5px;  }
}

@media screen and (max-width: 425px) {
    .navbar-brand { font-size: 16px; }
}

@media screen and (max-width: 380px) {
    .navbar-brand     { font-size: 15px; }
    .footer-heading   { font-size: 20px; }
    .post-list-header { font-size: 20px; }

    /* iPhone and other Cells */
    .post-thumbnail {
        width:  100px;
        height: 70px;
    }

    .categories-list-header { font-size: 12px;  }
    .categories-list-item   { font-size: 12px;  }
}

@media screen and (max-width: 370px) {
    .navbar-brand     { font-size:    14px; }
    #site-logo-navbar { margin-right: 0;    }
}

@media screen and (max-width: 360px) {
    .navbar-brand     { font-size:    12px; }
    #site-logo-navbar { margin-right: 0;    }

    /* Galaxy S4 (360x640) */
    .post-thumbnail {
        width:  90px;
        height: 65px;
    }
}

@media screen and (max-width: 320px) {
    .post-list-item h2 { font-size: 14px; }

    /* Tiny phone, hide it. */
    .post-subheading { display: none; }

    /* Now that the subheading is hidden we can make the thumbnail slightly bigger */
    .post-thumbnail {
        width:         100px;
        height:        70px;
        margin-top:    10px;
        margin-bottom: 10px;
    }
}