Contents

// Default ratios between font sizes; used to maintain the type hierarchy.
// https://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4

$size5: 2.18em
$size4: 1.64em
$size3: 1.45em
$size2: 1.18em
$size1: 1em
$size0: 0.88em

$vertical-margin: 1.5em

// Colour settings

@use "sass:color"

$base-color: #313126
$tint: #EEEEC6
$border-color: #D7C28B
$link-color: #4786fd
$visited-link-color: color.adjust($link-color, $lightness: -5%)
$hover-link-color: color.adjust($link-color, $lightness: -15%)
$active-link-color: color.adjust($link-color, $lightness: -20%)
$nav-link-color: color.scale(color.adjust($link-color, $lightness: 10%), $saturation: -25%)
$meta-color: #87877D

@function empx($em, $base: 16px)
  @return calc($em / 1em) * $base

// Layout settings

$measure: empx(36em)
$gutter: empx(6em)
$sidebar-width: empx(14em)
$full-page-width: $measure + $gutter + $sidebar-width

$max-handheld-width: 400px
$min-medium-width: $measure + empx(1em)
$min-wide-width: $full-page-width + empx(4em)

// Mixin

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

=transition($definition)
  -moz-transition: $definition
  -o-transition: $definition
  -webkit-transition: $definition
  transition: $definition

=respond-to($media)
  @if $media == handhelds
    @media only screen and (max-width: $max-handheld-width)
      @content
  @else if $media == medium-screens
    @media only screen and (min-width: $min-medium-width)
      @content
  @else if $media == only-medium-screens
    @media only screen and (min-width: $min-medium-width) and (max-width: $min-wide-width - 1px)
      @content
  @else if $media == wide-screens
    @media only screen and (min-width: $min-wide-width)
      @content

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
nesta-0.18.0	views/mixins.sass
nesta-0.17.0	views/mixins.sass