vue-wp/vue-theme/src/sss/variables.sss

@import './_ratios.sss'

$transition: 500ms

$min-width: 20em
$max-width: 74em

/* Circles for add page */
$radius: 2.5vw
$path: 4px

/* Proportion */
$base: 0.95em

$max-card-img-height: 420px
$card-line-clamp: 3

$ratio: $minor-third // $ratio = 1.2 from _ratios.sss

$ms-0: calc($base) // 0.95em
$ms--1: calc($ms-0 / $ratio) // 0.79
$ms--2: calc($ms--1 / $ratio) // 0.66
$ms--3: calc($ms--2 / $ratio) // 0.55
$ms--4: calc($ms--3 / $ratio) // 0.45
$ms--5: calc($ms--4 / $ratio) // 0.38
$ms--6: calc($ms--5 / $ratio) // 0.31
$ms--7: calc($ms--6 / $ratio) // 0.27

$ms-1: calc($ms-0 * $ratio) // 1.14
$ms-2: calc($ms-1 * $ratio) // 1.368
$ms-3: calc($ms-2 * $ratio) // 1.6416
$ms-4: calc($ms-3 * $ratio) // 1.9699
$ms-5: calc($ms-4 * $ratio) // 2.3639
$ms-6: calc($ms-5 * $ratio) // 2.8366
$ms-7: calc($ms-6 * $ratio) // 3.4040
$ms-8: calc($ms-7 * $ratio) // 4.0848
$ms-9: calc($ms-8 * $ratio) // 4.9018

/* Fonts */
$sans: 'Questrial', sans-serif
$serif: 'Hoefler Text', 'Crimson Text', serif
$mono: 'Roboto Mono', monospace

/* Screen Breaks */
$tiny: 375px
$small: 480px
$medium: 768px
$large: 960px
$extra-large: 1080px
$huge: 1200px
$ultra: 1440px