Responsive Base CSS
/*
* Main CSS by Joshua Pekera
*/
/* Table of Content
==================================================
:: Global Site Styles
:: Header & Global Nav
:: Side Nav
:: Content Containers & Grids
:: Page Specific
:: Media Queries
:: Font-Face
*/
/* Global Site Styles
================================================== */
body {}
/* Links */
a {}
a:hover, a:focus {}
/* Headers */
h1, h2, h3 {}
h1 strong {}
h2 {}
h3 {}
h4 {}
p {}
/* Header & Global Nav
================================================== */
/* Header */
/* Global Nav */
/* Side Nav
================================================== */
/* Content Containers & Grids
================================================== */
/* Default display */
/* Main Content Area */
/* Grids */
/* Grid Lists */
/* Grid Columns */
/* Debug Output */
/* Page Specific Styles
================================================== */
/* Page Titles & Shapes
------------------------- */
/* Home Page
---------------- */
/* Blog Page
---------------- */
/* Work Page
---------------- */
/* Labs Page
---------------- */
/* Contact Page
---------------- */
/* Footer
================================================== */
/* Share Widgets
================================================== */
/* Facebook Responsive
-----------------------*/
.fb-comments,.fb_iframe_widget iframe[style],.fb_iframe_widget span[style] {
width:100%!important;
}
.fb-like {
margin-bottom:20px;
overflow:hidden;
float:left!important;
}
.fb-like span[style],.fb-like span iframe[style] {
width:90px!important;
}
/* Multimedia Elements
================================================== */
/* Responsive video embeds (must be wrapped container)
-------------------------------------------------------*/
.embed-container {
position:relative;
padding-bottom:56.25%;/*16/9 ratio*/
padding-top:0;
height:0;
overflow:hidden
}
.embed-container iframe,.embed-container object,.embed-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}
/* !Responsive Queries
================================================== */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Very small (Detailed) devices (mobile, less than 480) */
@media (max-width: @screen-xs-max) {
}// Close Query
/* === START HERE BY DEFAULT ==== */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
}// Close Query
/* Small devices (Detailed) (tablets, min 768px and max 991px) */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}// Close Query
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
}// Close Query
/* Small devices (Detailed) (desktop, min 992px and max 1199px) */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
}// Close Query
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
}// Close Query
/* !Special Media Queries
================================================== */
/* These are for very unique instances */
/* !iPads - portrait and landscape */
// ------------------------------------------------------
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}// Close Query
/* !iPads - landscape */
// ------------------------
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}// Close Query
/* !iPads - portrait */
// -----------------------
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}// Close Query
// This is a special
/* !XLarge Desktop - (non-standard query) */
// ----------------------------------------
@media (min-width: 1441px) and (max-width: 1919px) {
/* Styles */
}// Close Query
// This is a special
/* !XXLarge Desktop - (non-standard query) */
// ----------------------------------------
@media (min-width: 1920px) and (max-width: 2560px) {
/* Styles */
}// Close Query