philomena/assets/css/common/measurements.css

$min-desktop-width: 1280px;
$max-phone-width: 700px;
$narrow-layout-width: 960px;
$medium-layout-width: $min-desktop-width;
$font-family-base: verdana, arial, helvetica, sans-serif;
$font-family-monospace: "Droid Sans Mono", monospace;
$font-family-heading: $font-family-base;

:root {
  /* Paddings */
  --padding-tiny: 0.3rem;
  --padding-small: 0.4rem;
  --padding-normal: 0.75rem;
  --padding-large: 1.5rem;

  /* Common line heights */
  --default-line-height: 1.15;
  --readable-line-height: 1.35rem;

  /* Header height */
  --block-header-height: 2rem;

  /* Navbar */
  --navbar-size: 4rem;
  --navbar-secondary-size: 2.5rem;
  --navbar-input-size: 2rem;
  --navbar-input-width: 18vw;
  --navbar-input-max-width: 22rem;

  /* Avatars */
  --avatar-navbar-size: 2.5rem;
  --avatar-small-size: 6rem;
  --avatar-large-size: 8rem;

  /* Buttons */
  --button-height: 2rem;
  --button-group-height: 2rem;
  --button-group-tall-height: 2.5rem;
  --button-group-small-height: 1.5rem;

  /* Checkboxes */
  --checkbox-width: 3rem;
  --checkbox-height: 1.5rem;
  --checkbox-border-width: 2px;

  /* Separators */
  --separator-vertical-size: 1.3em;

  /* Tags */
  --tag-height: 2em;
  --tag-border-width: 0;

  /* Homepage left column width on desktop */
  --column-left-width: 360px;

  /* Borders and rounding */
  --border-radius-outer: 0.35rem;
  --border-radius-inner: 0.25rem;
  --border-radius-tag: 0.2rem;
  --border-radius-avatar: 100%;
  --border-radius-checkbox: 1rem;

  /* Images and media */
  --media-container-width: 225px;
  --media-tiny-container-width: 50px;
  --media-small-container-width: 150px;
  --media-medium-container-width: 250px;
  --media-large-container-width: 500px;
  --media-full-container-width: 100%;
  --media-featured-width: 358px;
  --media-header-height: 2rem;
  --media-small-header-height: 1rem;

  /* Badges */
  --badge-small-size: 1.1rem;
  --badge-normal-size: 2rem;

  /* Counter badges (the "red notification badge") */
  --number-badge-size: 0.6rem;
  --number-badge-padding: 0.1rem;
  --number-badge-border: 2px;
  --number-badge-lower-offset: 0.7rem;
  --number-badge-upper-offset: 0.7rem;

  /* Fonts */
  --font-family: $font-family-base;
  --font-family-monospace: $font-family-monospace;
  --font-family-heading: $font-family-heading;
  --font-size: 14px;
  --font-tiny-size: 12px;
  --font-micro-size: 10px;
  --font-header-size: 16px;
  --font-icon-size: 2rem;
  --font-h1-size: 1.75rem;
  --font-h2-size: 1.5rem;
  --font-h3-size: 1.35rem;
  --font-h4-size: 1.2rem;
  --font-h5-size: 1.1rem;
  --font-h6-size: 1rem;

  /* Inputs */
  --input-text-height: 9rem;

  /* Layout sizes */
  --min-desktop-width: $min-desktop-width;
  --max-phone-width: $max-phone-width;
  --medium-layout-width: $medium-layout-width;
  --narrow-layout-width: $narrow-layout-width;

  /* Animations */
  --transition-animation-duration: 0.15s;
  --transition-long-animation-duration: 0.3s;
}