From 5b8c2bbae057f4c8e90fdddb41e3cbfc347572ed Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 17 Nov 2014 16:16:17 -0500 Subject: [PATCH] Adds global header sizes for h1-h6, reorganizes site.variables based around work in site ui docs --- src/definitions/globals/site.less | 31 ++- src/themes/default/globals/site.variables | 260 +++++++++++++--------- 2 files changed, 176 insertions(+), 115 deletions(-) diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less index e87742f5f..174b79fa9 100755 --- a/src/definitions/globals/site.less +++ b/src/definitions/globals/site.less @@ -51,9 +51,8 @@ body { font-smoothing: @fontSmoothing; } - /******************************* - Text + Headers *******************************/ h1, @@ -61,11 +60,36 @@ h2, h3, h4, h5 { + line-height: @headerLineHeight; margin: @headerMargin; padding: 0em; } +h1 { + min-height: 1rem; + font-size: @h1; +} +h2 { + font-size: @h2; +} +h3 { + font-size: @h3; +} +h4 { + font-size: @h4; +} +h5 { + font-size: @h5; +} + + +/******************************* + Text +*******************************/ + p { + font-size: @paragraphFontSize; + line-height: @paragraphLineHeight; margin: @paragraphMargin; } p:first-child { @@ -87,7 +111,6 @@ a:hover { color: @linkHoverColor; } - /******************************* Highlighting *******************************/ @@ -106,6 +129,6 @@ a:hover { } .loadFonts() when (@importGoogleFonts) { - @import (css) 'http://fonts.googleapis.com/css?family=@{googleFontFamily}'; + @import (css) 'http://fonts.googleapis.com/css?family=@{googleFontRequest}'; } .loadUIOverrides(); \ No newline at end of file diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index d5db1a4a0..67b350334 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -13,22 +13,36 @@ @importGoogleFonts : true; @googleFontName : 'Lato'; @googleFontSizes : '400,700,400italic,700italic'; -@googleFontFamily : '@{googleFontName}:@{googleFontSizes}'; +@googleFontRequest : '@{googleFontName}:@{googleFontSizes}'; /*------------------- Base Sizes --------------------*/ -@emSize : 14px; -@fontSize : 14px; +@emSize : 14px; +@fontSize : 14px; + +/*-------------- + Page Heading +---------------*/ + +@headerLineHeight : 1.33em; + +@h1 : 2rem; +@h2 : 1.714rem; +@h3 : 1.28rem; +@h4 : 1.071rem; +@h5 : 1rem; /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ +@black : #1B1C1D; @blue : #3B83C0; @green : #5BBD72; +@grey : #CCCCCC; @orange : #E07B53; @pink : #D9499A; @purple : #564F8A; @@ -36,28 +50,57 @@ @teal : #00B5AD; @yellow : #F2C61F; -@black : #1B1C1D; -@grey : #CCCCCC; +/*--- Light Colors ---*/ +@lightBlack : #333333; +@lightBlue : #54C8FF; +@lightGreen : #2ECC40; +@lightOrange : #FF851B; +@lightPink : #FF8EDF; +@lightPurple : #CDC6FF; +@lightRed : #FF695E; +@lightTeal : #6DFFFF; +@lightYellow : #FFE21F; + +/*--- Neutrals ---*/ +@fullBlack : #000000; +@darkGrey : #AAAAAA; +@lightGrey : #DCDDDE; +@offWhite : #FAFAFA; +@darkWhite : #F0F0F0; @white : #FFFFFF; -/*--- Brand Colors ---*/ +/*------------------- + Brand Colors +--------------------*/ + @primaryColor : @blue; @secondaryColor : @black; +@lightPrimaryColor : @lightBlue; +@lightSecondaryColor : @lightBlack; /*------------------- Sizes --------------------*/ /* Exact pixel values @ 14px em */ -@mini : 0.7142rem; -@tiny : 0.8571rem; -@small : 0.9285rem; -@medium : 1rem; -@large : 1.1428rem; -@big : 1.2857rem; -@huge : 1.4285rem; -@massive : 1.7142rem; +@mini : 0.7142rem; +@tiny : 0.8571rem; +@small : 0.9285rem; +@medium : 1rem; +@large : 1.1428rem; +@big : 1.2857rem; +@huge : 1.4285rem; +@massive : 1.7142rem; + +@relativeMini : 0.7142em; +@relativeTiny : 0.8571em; +@relativeSmall : 0.9285em; +@relativeMedium : 1em; +@relativeLarge : 1.1428em; +@relativeBig : 1.2857em; +@relativeHuge : 1.4285em; +@relativeMassive : 1.7142em; /*------------------- Page @@ -66,50 +109,31 @@ @pageBackground : #F7F7F7; @pageOverflowX : hidden; -@fontSize : 14px; @lineHeight : 1.33; @textColor : rgba(0, 0, 0, 0.8); -@headerMargin : 1em 0em 1rem; -@paragraphMargin : 0em 0em 1em; - -@linkColor : #009FDA; -@linkUnderline : none; -@linkHoverColor : lighten( @linkColor, 5); - -@highlightBackground : rgba(255, 255, 160, 0.4); -@highlightColor : @textColor; - /*------------------- - Background Colors + Paragraph --------------------*/ -@subtleTransparentBlack : rgba(0, 0, 0, 0.03); -@transparentBlack : rgba(0, 0, 0, 0.05); -@strongTransparentBlack : rgba(0, 0, 0, 0.10); - -@subtleTransparentWhite : rgba(255, 255, 255, 0.02); -@transparentWhite : rgba(255, 255, 255, 0.05); -@strongTransparentWhite : rgba(255, 255, 255, 0.07); +@paragraphMargin : 0em 0em 1em; +@paragraphLineHeight : @lineHeight; +@paragraphFontSize : @fontSize; /*------------------- - Extra Colors + Links --------------------*/ -/*--- Light Colors ---*/ +@linkColor : #009FDA; +@linkUnderline : none; +@linkHoverColor : lighten(@linkColor, 5); -@lightBlack: : #CCCCCC; -@lightBlue : #54C8FF; -@lightGreen : #2ECC40; -@lightOrange : #FF851B; -@lightPink : #FF8EDF; -@lightPurple : #CDC6FF; -@lightRed : #FF695E; -@lightTeal : #6DFFFF; -@lightYellow : #FFE21F; +/*------------------- + Highlighted Text +--------------------*/ -@lightPrimaryColor : @lightBlue; -@lightSecondaryColor : @lightBlack; +@highlightBackground : rgba(255, 255, 160, 0.4); +@highlightColor : @textColor; /*------------------- Loader @@ -119,25 +143,10 @@ @loaderLineWidth: 0.2em; @loaderFillColor: rgba(0, 0, 0, 0.1); @loaderLineColor: @darkGrey; + @invertedLoaderFillColor: rgba(255, 255, 255, 0.15); @invertedLoaderLineColor: @white; -/*------------------- - Accents ---------------------*/ - -/* 4px @ default em */ -@relativeBorderRadius: 0.2857em; -@absoluteBorderRadius: 0.2857rem; -@defaultBorderRadius: @absoluteBorderRadius; - -/* Used for differentiating neutrals */ -@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); - -/* Used for differentiating layers */ -@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); - - /*------------------- Grid --------------------*/ @@ -154,6 +163,33 @@ @largeMonitorBreakpoint : 1400px; @widescreenMonitorBreakpoint : 1920px; +/*------------------- + Alpha Colors +--------------------*/ + +@subtleTransparentBlack : rgba(0, 0, 0, 0.03); +@transparentBlack : rgba(0, 0, 0, 0.05); +@strongTransparentBlack : rgba(0, 0, 0, 0.10); + +@subtleTransparentWhite : rgba(255, 255, 255, 0.02); +@transparentWhite : rgba(255, 255, 255, 0.05); +@strongTransparentWhite : rgba(255, 255, 255, 0.07); + +/*------------------- + Accents +--------------------*/ + +/* 4px @ default em */ +@relativeBorderRadius: 0.2857em; +@absoluteBorderRadius: 0.2857rem; +@defaultBorderRadius: @absoluteBorderRadius; + +/* Differentiating Neutrals */ +@subtleGradient: linear-gradient(transparent, @transparentBlack); + +/* Differentiating Layers */ +@subtleShadow: 0px 1px 2px 0 @transparentBlack; + /******************************* Power-User @@ -163,6 +199,7 @@ Paths --------------------*/ +/* For source, automatically modified in gulp for dist */ @imagePath : "../../themes/default/assets/images"; @fontPath : "../../themes/default/assets/fonts"; @@ -179,13 +216,9 @@ @defaultEasing: ease; -/*--- Neutrals ---*/ -@fullBlack : #000000; -@lightBlack : #333333; -@darkGrey : #AAAAAA; -@lightGrey : #DCDDDE; -@offWhite : #FAFAFA; -@darkWhite : #F0F0F0; +/*------------------- + All Colors +--------------------*/ /*--- Colored Backgrounds ---*/ @blueBackground : #DFF0FF; @@ -316,6 +349,12 @@ Derived Values --------------------*/ +/* Header Spacing */ +@headerLineHeightOffset : (@lineHeight - 1em) / 2; +@headerTopMargin : ~"calc(2rem - "@lineHeightOffset~")"; +@headerBottomMargin : 1rem; +@headerMargin : @headerTopMargin 0em @headerBottomMargin; + /* Makes sure padded grid can fit at 320px */ @pageMinWidth : (320px - (@fontSize * 3)); @@ -391,52 +430,51 @@ --------------------*/ /*--- Colors ---*/ -@primaryColorHover : lighten( @primaryColor, 3); -@secondaryColorHover : lighten( @secondaryColor, 3); - -@blueHover : lighten( @blue, 3); -@greenHover : lighten( @green, 3); -@orangeHover : lighten( @orange, 3); -@pinkHover : lighten( @pink, 3); -@purpleHover : lighten( @purple, 3); -@redHover : lighten( @red, 3); -@tealHover : lighten( @teal, 3); -@yellowHover : lighten( @yellow, 3); - -@lightBlueHover : lighten( @lightBlue, 3); -@lightGreenHover : lighten( @lightGreen, 3); -@lightOrangeHover : lighten( @lightOrange, 3); -@lightPinkHover : lighten( @lightPink, 3); -@lightPurpleHover : lighten( @lightPurple, 3); -@lightRedHover : lighten( @lightRed, 3); -@lightTealHover : lighten( @lightTeal, 3); -@lightYellowHover : lighten( @lightYellow, 3); +@primaryColorHover : lighten(@primaryColor, 3); +@secondaryColorHover : lighten(@secondaryColor, 3); + +@blueHover : lighten(@blue, 3); +@greenHover : lighten(@green, 3); +@orangeHover : lighten(@orange, 3); +@pinkHover : lighten(@pink, 3); +@purpleHover : lighten(@purple, 3); +@redHover : lighten(@red, 3); +@tealHover : lighten(@teal, 3); +@yellowHover : lighten(@yellow, 3); + +@lightBlueHover : lighten(@lightBlue, 3); +@lightGreenHover : lighten(@lightGreen, 3); +@lightOrangeHover : lighten(@lightOrange, 3); +@lightPinkHover : lighten(@lightPink, 3); +@lightPurpleHover : lighten(@lightPurple, 3); +@lightRedHover : lighten(@lightRed, 3); +@lightTealHover : lighten(@lightTeal, 3); +@lightYellowHover : lighten(@lightYellow, 3); /*--- Emotive ---*/ -@positiveColorHover : lighten( @positiveColor, 3); -@negativeColorHover : lighten( @negativeColor, 3); +@positiveColorHover : lighten(@positiveColor, 3); +@negativeColorHover : lighten(@negativeColor, 3); /*--- Neutrals ---*/ -@fullBlackHover : lighten( @fullBlack, 3); -@blackHover : lighten( @black, 3); -@lightBlackHover : lighten( @lightBlack, 3); - -@lightGreyHover : lighten( @lightGrey, 3); -@greyHover : lighten( @grey, 3); -@darkGreyHover : lighten( @darkGrey, 3); - -@whiteHover : lighten( @white, 3); -@offWhiteHover : lighten( @offWhite, 3); -@darkWhiteHover : lighten( @darkWhite, 3); - -@facebookHoverColor : lighten( @facebookColor, 3); -@twitterHoverColor : lighten( @twitterColor, 3); -@googlePlusHoverColor : lighten( @googlePlusColor, 3); -@linkedInHoverColor : lighten( @linkedInColor, 3); -@youtubeHoverColor : lighten( @youtubeColor, 3); -@instagramHoverColor : lighten( @instagramColor, 3); -@pinterestHoverColor : lighten( @pinterestColor, 3); -@vkHoverColor : lighten( @vkColor, 3); +@fullBlackHover : lighten(@fullBlack, 3); +@blackHover : @black; + +@lightGreyHover : lighten(@lightGrey, 3); +@greyHover : lighten(@grey, 3); +@darkGreyHover : lighten(@darkGrey, 3); + +@whiteHover : lighten(@white, 3); +@offWhiteHover : lighten(@offWhite, 3); +@darkWhiteHover : lighten(@darkWhite, 3); + +@facebookHoverColor : lighten(@facebookColor, 3); +@twitterHoverColor : lighten(@twitterColor, 3); +@googlePlusHoverColor : lighten(@googlePlusColor, 3); +@linkedInHoverColor : lighten(@linkedInColor, 3); +@youtubeHoverColor : lighten(@youtubeColor, 3); +@instagramHoverColor : lighten(@instagramColor, 3); +@pinterestHoverColor : lighten(@pinterestColor, 3); +@vkHoverColor : lighten(@vkColor, 3); /*-------------------