test_typography_custom_24.less

/**
 * Custom grid using magic number of 24.
 */
@import "src/less/typography-font-families.less";
@import "src/less/typography-defaults.less";

// Magic number and default fontsize, together makes up base lineheight
@magicNumber:  24px;
@fontSizeBody: 16px;

// Set font family to use
@fontFamilyHeadings:  @fontFamilyCambria;
@fontFamilyBody:      @fontFamilyCalibri;
@fontFamilyCode:      @fontFamilyCourier;

// Activate the grid base font
body {
    #desinax-hgrid.font(@fontSizeBody);
}

// Activate grid and affect all typographic elements
#desinax-hgrid.activateDefaultTypography();

// Show the grid
.hgrid .wrap {
    @gridImage: "../../img/magic-number-@{magicNumber}.png";
    #desinax-hgrid.showGrid(@gridImage);
}



// Just to make the example more visible
.meta {
    position: absolute;
    top: 0;
    color: #666;
}

.magic-number::after {
    content: "@{magicNumber}"
}

.base-fontsize::after {
    content: "@{fontSizeBody}"
}

html {
    background-color: #ccffdd;
}

.wrap {
    margin: 0 auto;
    max-width: 800px;
}