bellmaker/dist/styles/3ca980df.main.less.css

Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints

html {
  font-size: 62.5%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow: -moz-scrollbars-vertical;
  overflow-x: hidden;
  overflow-y: scroll;
}
body {
  padding: 0;
  margin: 0;
  font-size: 100%;
  position: relative;
  text-rendering: optimizelegibility;
  font-size: 1em;
  line-height: 1;
  font-family: Helvetica, Arial, sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
body,
table,
td,
ul,
ol,
h1,
h2,
h3,
h4,
p,
img,
figure {
  margin: 0;
}
ul,
ol {
  padding-left: 0;
}
a:link,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
pre {
  overflow: auto;
}
code {
  white-space: pre-wrap;
}
pre > code {
  white-space: pre;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
.bellmaker_container {
  margin-right: auto;
  margin-left: auto;
}
.bellmaker_container:after {
  content: "";
  float: none;
  clear: both;
  display: block;
}
@media only screen and (min-width: 320px) {
  .bellmaker_container {
    width: 100%;
  }
}
@media only screen and (min-width: 480px) {
  .bellmaker_container {
    width: 100%;
  }
}
@media only screen and (min-width: 640px) {
  .bellmaker_container {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .bellmaker_container {
    width: 76.8rem;
  }
}
@media only screen and (min-width: 1024px) {
  .bellmaker_container {
    width: 96rem;
  }
}
@media only screen and (min-width: 1280px) {
  .bellmaker_container {
    width: 115.2rem;
  }
}
@media only screen and (min-width: 1440px) {
  .bellmaker_container {
    width: 134.4rem;
  }
}
[role="banner"],
[role="main"] {
  margin: 0 auto;
  overflow: auto;
  box-sizing: border-box;
}
[role="banner"] > h1 {
  padding: 2rem 2rem 0 2rem;
}
h1 {
  font-weight: normal;
}
@media only screen and (min-width: 320px) {
  h1 {
    font-size: 6rem;
    line-height: 6rem;
  }
}
@media only screen and (min-width: 480px) {
  h1 {
    font-size: 3rem;
    line-height: 4rem;
  }
}
ul {
  padding: 0 2rem 2rem 2rem;
}
ul ul {
  padding-bottom: 0;
  padding-left: 2rem;
}
p,
li {
  font-size: 1.4rem;
  line-height: 2rem;
}
p {
  padding: 0 2rem 2rem;
}
h2 {
  font-size: 2rem;
  line-height: 3rem;
  padding: 0 2rem;
}
[role="banner"] h2 {
  padding: 0 2rem 2rem;
  font-weight: normal;
}
h3 {
  font-size: 1.4rem;
  line-height: 2rem;
  padding: 0 2rem;
}
@media only screen and (min-width: 320px) {
  [role="banner"],
  [role="main"] {
    background-color: rgba(0, 0, 255, 0.1);
  }
}
@media only screen and (min-width: 480px) {
  [role="banner"],
  [role="main"] {
    background-color: rgba(0, 255, 255, 0.1);
  }
}
@media only screen and (min-width: 640px) {
  [role="banner"],
  [role="main"] {
    background-color: rgba(255, 0, 255, 0.1);
  }
}
@media only screen and (min-width: 768px) {
  [role="banner"],
  [role="main"] {
    background-color: rgba(0, 0, 255, 0.2);
  }
}
@media only screen and (min-width: 1024px) {
  [role="banner"],
  [role="main"] {
    background-color: rgba(0, 255, 255, 0.2);
  }
}
@media only screen and (min-width: 1280px) {
  [role="banner"],
  [role="main"] {
    background-color: rgba(255, 0, 255, 0.2);
  }
}
@media only screen and (min-width: 1440px) {
  [role="banner"],
  [role="main"] {
    background-color: rgba(255, 255, 0, 0.2);
  }
}
#basic_query:before {
  content: "Device-agnostic: ";
  font-weight: bold;
}
#basic_query:after {
  display: block;
}
@media only screen and (min-width: 320px) {
  #basic_query:after {
    content: "baseline - 100% liquid for screens at 320 to 480";
  }
}
@media only screen and (min-width: 480px) {
  #basic_query:after {
    content: "2x-small - 100% liquid for screens at 480 to 640";
  }
}
@media only screen and (min-width: 640px) {
  #basic_query:after {
    content: "x small - 100% liquid for screens at 480 to 768";
  }
}
@media only screen and (min-width: 768px) {
  #basic_query:after {
    content: "small - 768 pixels for screens at 768 to 1024";
  }
}
@media only screen and (min-width: 1024px) {
  #basic_query:after {
    content: "medium - 960 pixels for screens at 1024 to 1280";
  }
}
@media only screen and (min-width: 1280px) {
  #basic_query:after {
    content: "large - 1152 pixels for screens at 1280 to 1440";
  }
}
@media only screen and (min-width: 1440px) {
  #basic_query:after {
    content: "x-large - 1296 pixels for screens at 1440 and up";
  }
}
#device_sniffer:before {
  content: "Device-specific: ";
  font-weight: bold;
}
#device_sniffer:after {
  content: "none detected";
  display: block;
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 4/3) and (orientation : landscape) {
  #device_sniffer:after {
    content: "early iPad in landscape mode";
  }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 3/4) and (orientation : portrait) {
  #device_sniffer:after {
    content: "early iPad in portrait mode";
  }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 4/3) and (orientation : landscape) {
  #device_sniffer:after {
    content: "retina iPad in landscape mode";
  }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 3/4) and (orientation : portrait) {
  #device_sniffer:after {
    content: "retina iPad in portrait mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 3/2) and (orientation : landscape) {
  #device_sniffer:after {
    content: "early iPhone in landscape mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 2/3) and (orientation : portrait) {
  #device_sniffer:after {
    content: "early iPhone in portrait mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 3/2) and (orientation : landscape) {
  #device_sniffer:after {
    content: "iPhone 4(s) in landscape mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation : portrait) {
  #device_sniffer:after {
    content: "iPhone 4(s) in portrait mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 71/40) and (orientation : landscape) {
  #device_sniffer:after {
    content: "iPhone 5(s)(c) in landscape mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation : portrait) {
  #device_sniffer:after {
    content: "iPhone 5(s)(c) in portrait mode";
  }
}
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation : landscape) {
  #device_sniffer:after {
    content: "iPhone 6 Plus in landscape mode";
  }
}
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation : portrait) {
  #device_sniffer:after {
    content: "iPhone 6 Plus in portrait mode";
  }
}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (orientation : landscape) {
  #device_sniffer:after {
    content: "720p HD:2 in landscape mode";
  }
}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (orientation : portrait) {
  #device_sniffer:after {
    content: "720p HD:2 in portrait mode";
  }
}
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 667/375) and (orientation : landscape) {
  #device_sniffer:after {
    content: "iPhone 6 in landscape mode";
  }
}
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 375/667) and (orientation : portrait) {
  #device_sniffer:after {
    content: "iPhone 6 in portrait mode";
  }
}
@media only screen and (min-device-width : 384px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 5/3) and (orientation : landscape) {
  #device_sniffer:after {
    content: "15:9 HD:2 in landscape mode";
  }
}
@media only screen and (min-device-width : 384px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 3/5) and (orientation : portrait) {
  #device_sniffer:after {
    content: "768 HD:2 in portrait mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 533px) and (min-resolution: 2.4dppx) and (device-aspect-ratio: 533/320) and (orientation : landscape) {
  #device_sniffer:after {
    content: "768 HD:2.4 in landscape mode";
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 533px) and (min-resolution: 2.4dppx) and (device-aspect-ratio: 320/533) and (orientation : portrait) {
  #device_sniffer:after {
    content: "768 HD:2.4 in portrait mode";
  }
}
@media only screen and (min-device-width : 400px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 8/5) and (orientation : landscape) {
  #device_sniffer:after {
    content: "800 WXGA2 in landscape mode";
  }
}
@media only screen and (min-device-width : 400px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 5/8) and (orientation : portrait) {
  #device_sniffer:after {
    content: "800 WXGA2 in portrait mode";
  }
}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 3dppx) and (orientation : landscape) {
  #device_sniffer:after {
    content: "Full HD:3 in landscape mode";
  }
}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 3dppx) and (orientation : portrait) {
  #device_sniffer:after {
    content: "Full HD:3 in portrait mode";
  }
}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 4dppx) and (orientation : landscape) {
  #device_sniffer:after {
    content: "WQHD:4 in landscape mode: LG ";
  }
}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 4dppx) and (orientation : portrait) {
  #device_sniffer:after {
    content: "WQHD:4 in portrait mode";
  }
}
#aspect_ratio:before {
  content: "Aspect Ratio: ";
  font-weight: bold;
}
#aspect_ratio:after {
  content: "unable to detect";
  display: block;
}
@media only screen and (device-aspect-ratio: 4/3) and (orientation : landscape) {
  #aspect_ratio:after {
    content: "3:4 screen in landscape mode";
  }
}
@media only screen and (device-aspect-ratio: 3/4) and (orientation : portrait) {
  #aspect_ratio:after {
    content: "3:4 screen in portrait mode";
  }
}
@media only screen and (device-aspect-ratio: 3/2) and (orientation : landscape) {
  #aspect_ratio:after {
    content: "5:8 screen in landscape mode";
  }
}
@media only screen and (device-aspect-ratio: 2/3) and (orientation : portrait) {
  #aspect_ratio:after {
    content: "5:8 screen in portrait mode";
  }
}
@media only screen and (device-aspect-ratio: 5/3) and (orientation : landscape) {
  #aspect_ratio:after {
    content: "3:5 screen in landscape mode";
  }
}
@media only screen and (device-aspect-ratio: 3/5) and (orientation : portrait) {
  #aspect_ratio:after {
    content: "3:5 screen in portrait mode";
  }
}
@media only screen and (device-aspect-ratio: 3/2) and (orientation : landscape) {
  #aspect_ratio:after {
    content: "2:3 screen in landscape mode";
  }
}
@media only screen and (device-aspect-ratio: 2/3) and (orientation : portrait) {
  #aspect_ratio:after {
    content: "2:3 screen in portrait mode";
  }
}
@media only screen and (device-aspect-ratio: 16/9) {
  #aspect_ratio:after {
    content: "9:16 screen in landscape mode";
  }
}
@media only screen and (device-aspect-ratio: 9/16) {
  #aspect_ratio:after {
    content: "9:16 screen in portrait mode";
  }
}