{"idx":{"version":"2.3.5","fields":["title","contents"],"fieldVectors":[["title/01-breakpoints.html",[0,1.307]],["contents/01-breakpoints.html",[0,2.367,1,1.173,2,0.7,3,0.273,4,4.542,5,3.086,6,3.086,7,3.086,8,3.884,9,4.542,10,3.086,11,3.086,12,3.884,13,2.167,14,3.086,15,2.56,16,1.853,17,3.884,18,2.56,19,3.884,20,3.884,21,1.173,22,3.884,23,1.853]],["title/01-colors.html",[24,0.594]],["contents/01-colors.html",[1,1.349,2,0.805,3,0.296,18,3.186,24,1.134,25,2.418,26,4.835,27,3.064,28,4.835,29,3.064,30,4.835,31,3.064,32,4.835,33,3.064,34,4.835,35,2.003,36,3.841,37,3.064,38,4.835,39,3.064,40,4.835,41,3.064,42,3.064,43,3.548,44,2.068,45,3.064,46,3.064,47,3.064,48,3.064,49,2.366,50,3.064,51,3.064,52,3.064,53,3.064,54,2.852,55,2.852,56,3.064,57,3.064,58,3.064,59,3.59,60,3.064,61,3.064,62,3.064,63,3.59,64,3.443,65,3.064,66,3.064,67,3.064,68,3.59,69,3.064,70,3.064,71,3.064,72,3.064,73,3.064,74,3.443,75,3.064,76,3.064,77,3.064,78,3.064,79,3.59,80,3.064,81,3.064,82,3.064,83,3.064,84,3.443,85,3.064,86,3.064,87,3.064,88,3.064,89,3.59,90,3.064,91,3.064,92,3.064,93,3.064,94,3.12,95,3.59,96,3.699,97,3.59,98,2.852,99,2.852,100,1.691,101,1.691,102,1.691]],["title/01-typography.html",[103,2.74]],["contents/01-typography.html",[1,1.164,2,0.836,3,0.295,21,1.164,24,0.729,36,1.928,43,3.064,104,4.858,105,5.129,106,3.064,107,3.856,108,4.522,109,3.361,110,3.361,111,4.522,112,4.522,113,3.361,114,3.361,115,3.361,116,3.361,117,4.163,118,3.361,119,2.828,120,4.522,121,4.163,122,3.361,123,4.163,124,3.361,125,4.522,126,3.361,127,3.361,128,3.361,129,3.361,130,3.361,131,1.875,132,3.361,133,3.361,134,3.361,135,2.67,136,3.361,137,4.522,138,3.361,139,3.361,140,3.307,141,4.522,142,4.522,143,3.361,144,4.799,145,3.361,146,3.361,147,3.361,148,3.361,149,3.361,150,3.361,151,3.361,152,3.361,153,2.738,154,1.158,155,1.986,156,2.427,157,1.581,158,0.729,159,1.928,160,2.151,161,2.427,162,3.064,163,1.875,164,0.624,165,0.733,166,1.928,167,2.541,168,2.151,169,2.427,170,0.995,171,2.427,172,1.928,173,1.928,174,3.856,175,1.928]],["title/01-widths.html",[176,1.307]],["contents/01-widths.html",[2,0.882,18,2.454,155,2.335,158,1.061,176,2.51,177,4.729,178,2.454,179,2.42,180,3.723,181,4.429,182,4.729,183,3.723,184,2.958,185,4.729,186,3.723]],["title/01-z-index.html",[187,1.133,188,1.339]],["contents/01-z-index.html",[1,1.213,2,0.724,16,1.917,23,1.917,160,2.241,187,2.722,188,2.647,189,3.052,190,2.647,191,3.191,192,4.017,193,4.017,194,4.017,195,4.017]],["title/02-breakpoint.html",[0,1.307]],["contents/02-breakpoint.html",[0,2.482,1,1.526,3,0.234,154,1.853,158,0.842,165,1.173,170,1.862,196,0.999,197,1.6,198,3.086,199,2.167,200,2.167,201,2.56,202,2.993,203,3.884]],["title/02-color.html",[24,0.594]],["contents/02-color.html",[1,1.535,3,0.289,13,2.346,16,1.63,23,1.63,24,1.163,25,2.103,44,1.372,54,3.193,64,2.995,74,2.995,84,2.995,96,2.995,98,2.714,99,2.714,153,1.605,158,0.872,160,1.605,164,0.969,165,1.551,170,2.056,175,3.454,196,1.235,197,1.801,198,3.877,199,2.426,200,1.372,202,1.896,204,1.551,205,1.952,206,3.848,207,1.952,208,1.952,209,1.347,210,3.77,211,2.285,212,2.714,213,4.555,214,2.995,215,1.952,216,1.952,217,0.624,218,1.605,219,1.551,220,3.77,221,2.877,222,3.77,223,3.193,224,1.952,225,4.205,226,1.952,227,3.416,228,3.416,229,3.416,230,4.555,231,2.285,232,2.285,233,1.952,234,1.952,235,1.952,236,1.952,237,1.551,238,1.952,239,1.952,240,3.416,241,1.372,242,1.952]],["title/02-size.html",[157,1.123]],["contents/02-size.html",[3,0.273,16,2.051,23,2.051,119,2.685,153,2.685,157,1.973,158,1.134,163,2.533,164,0.999,165,1.537,166,3.607,167,1.984,168,1.68,170,1.861,172,3.734,173,2.392,196,1.168,197,1.748,201,1.984,209,1.298,217,0.653,223,3.414,232,2.392,243,4.541,244,3.941,245,3.085,246,2.392,247,2.392,248,3.011,249,3.883,250,3.607,251,2.392,252,3.011,253,3.011,254,3.011,255,4.541,256,3.011,257,3.011,258,3.883,259,3.011,260,3.883,261,3.883,262,3.011,263,1.984,264,1.68,265,3.011]],["title/02-z-index.html",[187,1.133,189,1.339]],["contents/02-z-index.html",[1,1.493,3,0.231,154,1.835,158,0.834,165,1.161,170,1.851,187,2.85,188,2.534,189,3.366,196,0.989,197,1.591,199,2.145,200,2.154,201,2.534,202,2.975,266,3.845,267,3.845]],["title/03-buttons.html",[218,1.528]],["contents/03-buttons.html",[2,0.625,3,0.318,11,1.206,14,0.7,15,0.581,21,1.046,24,1.133,25,2.006,35,2.444,44,0.42,49,0.581,55,1.206,101,1.206,106,0.7,119,1.494,131,1.494,153,0.492,154,1.58,157,1.358,158,0.718,163,0.492,164,0.852,165,0.458,167,1.566,168,2.223,176,1.716,178,1,179,1.278,196,0.891,197,0.535,200,0.724,204,0.7,206,1.588,209,0.809,211,1.206,212,0.7,214,1.206,217,0.805,218,2.947,219,2.128,241,1.771,268,1.518,269,0.881,270,0.881,271,3.301,272,1.999,273,3.595,274,0.881,275,1.518,276,3.224,277,0.881,278,3.82,279,1.22,280,2.283,281,1.22,282,1.28,283,2.928,284,1.42,285,0.581,286,1.999,287,0.881,288,0.881,289,1.518,290,0.881,291,1.518,292,0.881,293,1.653,294,2.752,295,0.881,296,2.376,297,1.518,298,0.881,299,4.421,300,0.881,301,2.376,302,1.999,303,0.881,304,0.881,305,0.881,306,0.881,307,2.631,308,0.881,309,1.749,310,1.999,311,0.881,312,1.929,313,0.881,314,0.881,315,0.881,316,0.881,317,0.881,318,0.881,319,0.881,320,0.7,321,0.881,322,0.881,323,1.518,324,0.881,325,0.881,326,2.376,327,1.518,328,0.881,329,0.881,330,0.7,331,0.881,332,0.581,333,0.881,334,0.7,335,0.881,336,0.881,337,0.881,338,0.881,339,4.823,340,1.999,341,1.206,342,0.881,343,0.881,344,0.881,345,1.518,346,4.759,347,3.136,348,2.928,349,1.518,350,2.376,351,1.848,352,1.566,353,1.518,354,1.518,355,3.596,356,3.596,357,1.325,358,1.566,359,2.679,360,1.134,361,2.626,362,1.325,363,1.887,364,1.566,365,1.566,366,2.326,367,2.326,368,2.326,369,2.326,370,2.066,371,2.376,372,1.765,373,2.283,374,1.588,375,2.376,376,3.312,377,2.128,378,1.518,379,3.711,380,1.518,381,0.881,382,0.881,383,0.881,384,0.881,385,0.7,386,0.881,387,0.881,388,0.881,389,2.326,390,0.7,391,0.881,392,0.881,393,0.881,394,0.881,395,0.881,396,0.881,397,0.881,398,0.881,399,1.588,400,2.752,401,0.881,402,1.999,403,1.929,404,1.887,405,4.9,406,4.458,407,0.881,408,0.7,409,0.7,410,0.881,411,0.7,412,1.588,413,0.881,414,0.881,415,0.881,416,0.881,417,2.376,418,1.518,419,1.518,420,1.518,421,1.518,422,1.518,423,1.518,424,1.518,425,1.518,426,1.518,427,1.518,428,1.518,429,1.518,430,1.518,431,0.881,432,0.881]],["title/03-colors.html",[24,0.594]],["contents/03-colors.html",[1,1.46,3,0.261,24,1.127,94,2.853,102,2.853,155,1.714,196,0.924,217,0.779,241,2.068,271,2.367,282,1.519,309,2.598,404,3.932,408,3.444,409,3.842,411,3.842,433,3.592,434,3.592,435,2.853,436,4.335,437,2.367,438,3.592,439,3.592,440,3.444,441,4.335,442,3.592,443,3.592]],["title/03-links.html",[264,1.528]],["contents/03-links.html",[2,0.644,3,0.313,13,1.478,21,1.078,24,1.164,25,1.478,35,1.991,44,1.703,49,3.061,154,1.264,160,2.41,164,0.682,165,0.8,179,1.926,196,0.918,209,0.8,217,0.937,250,2.105,263,2.846,264,2.848,273,3.884,278,3.77,279,1.258,280,2.352,281,1.258,282,1.078,284,1.463,293,1.703,309,1.478,357,1.478,358,1.746,360,1.264,362,1.478,366,2.105,367,2.105,368,2.105,369,2.105,373,2.352,412,2.105,437,2.846,444,2.65,445,4.644,446,2.65,447,2.65,448,2.65,449,2.65,450,2.65,451,2.65,452,3.57,453,3.57,454,2.352,455,2.65,456,3.57,457,2.65,458,2.65,459,2.65,460,2.105,461,2.105,462,2.105,463,2.65,464,2.65,465,2.65,466,2.65,467,2.65,468,2.65,469,2.65,470,2.65,471,2.65,472,2.65,473,2.65]],["title/03-lists.html",[332,1.805]],["contents/03-lists.html",[2,0.666,3,0.311,21,1.115,24,0.689,35,1.772,119,1.772,131,2.059,135,2.523,157,1.302,158,1.048,164,0.576,179,1.917,209,0.959,217,0.983,241,1.068,245,1.778,279,1.301,281,1.301,282,1.115,284,1.513,285,2.433,293,1.761,312,2.648,320,3.192,332,3.42,360,2.103,361,2.904,362,2.584,365,1.475,390,2.523,454,1.475,460,1.778,461,1.778,462,1.778,474,4.632,475,2.238,476,4.778,477,4.833,478,3.691,479,3.691,480,3.691,481,3.691,482,3.691,483,3.691,484,3.691,485,3.691,486,4.407,487,3.691,488,3.691,489,3.691,490,3.691,491,2.238,492,3.691,493,3.691,494,3.691,495,3.691,496,3.691,497,3.691,498,4.243,499,3.691,500,2.238,501,3.691,502,3.691,503,3.691,504,4.632,505,4.712,506,2.238,507,4.407,508,4.018,509,2.523,510,3.176,511,3.176,512,3.176,513,3.176,514,3.176,515,3.176,516,2.238,517,4.018,518,3.176,519,3.176,520,3.176,521,3.691,522,2.238,523,2.238,524,2.238]],["title/03-media-queries.html",[525,1.614,526,1.614]],["contents/03-media-queries.html",[0,1.734,2,0.738,3,0.319,5,2.161,6,2.161,7,2.161,10,2.161,21,1.235,158,0.947,164,1.123,176,2.406,178,3.272,190,2.394,196,1.123,197,1.441,200,1.952,209,0.822,217,1.036,231,2.161,244,3.614,246,3.614,279,1.441,281,1.441,282,1.235,284,1.677,285,2.877,309,2.282,357,2.77,358,3.36,403,2.696,525,3.718,526,3.614,527,4.916,528,5.043,529,2.721,530,3.633,531,3.633,532,3.633,533,2.721,534,2.721,535,2.721,536,2.721,537,2.721,538,2.161,539,2.721,540,2.721,541,2.721]],["title/03-positioning.html",[351,1.528]],["contents/03-positioning.html",[2,0.751,3,0.317,21,1.258,217,0.903,279,1.467,280,2.745,281,1.467,282,1.258,284,1.707,293,1.987,351,2.87,352,3.263,360,1.776,364,3.32,370,2.453,372,3.225,373,2.745,374,2.241,542,4.821,543,4.087,544,4.165,545,2.745,546,3.309,547,3.309,548,4.728,549,4.951,550,3.933,551,4.165,552,4.165,553,4.165,554,4.821,555,2.821,556,2.821]],["title/03-utilities.html",[557,1.805]],["contents/03-utilities.html",[2,0.82,3,0.315,16,1.365,21,1.373,23,1.365,100,2.272,155,0.924,157,1.825,158,0.869,159,2.702,163,1.596,164,0.498,168,2.648,170,1.172,176,2.424,179,0.924,190,1.276,196,0.966,199,1.596,209,0.585,217,0.986,218,2.095,237,3.77,241,2.264,247,1.539,271,2.934,276,2.272,279,1.528,281,1.602,282,1.373,284,1.863,293,2.169,294,2.272,307,2.272,312,2.241,330,2.272,351,2.095,352,1.276,357,1.081,360,1.365,361,2.934,362,2.095,363,2.984,364,1.276,365,1.885,370,1.885,372,2.763,377,1.539,385,1.539,389,1.539,399,1.539,400,3.809,403,3.128,454,2.763,509,1.539,538,2.702,543,2.272,545,1.276,546,1.539,547,2.702,550,3.726,558,4.006,559,1.937,560,2.86,561,1.937,562,2.86,563,1.937,564,1.937,565,1.937,566,1.937,567,1.937,568,1.937,569,1.937,570,1.937,571,1.937,572,3.756,573,1.937,574,1.937,575,1.937,576,1.937,577,2.86,578,1.937,579,2.86,580,1.937,581,1.937,582,1.937,583,2.86,584,2.86,585,3.401,586,2.984,587,2.86,588,1.937,589,3.401,590,2.86,591,1.937,592,1.937,593,1.937,594,1.937,595,1.937,596,1.937,597,1.937,598,4.193,599,2.86,600,1.937,601,1.937,602,1.937,603,1.937,604,1.937,605,1.937,606,1.937,607,1.937,608,1.937,609,1.937,610,1.937,611,1.937,612,4.006,613,1.937,614,1.937,615,1.937,616,1.937,617,1.937,618,1.937,619,3.401,620,1.937,621,1.937,622,1.937,623,1.937]],["title/index.html",[557,1.064,624,1.282,625,1.614]],["contents/index.html",[3,0.315,13,2.107,15,2.489,44,1.377,131,1.61,140,2.292,155,1.377,162,3.549,164,1.224,165,1.271,184,3.001,191,2.292,197,1.017,209,0.871,217,0.819,251,3.001,263,1.902,264,1.61,279,1.484,281,1.017,282,1.271,334,2.292,341,3.549,435,4.082,437,1.902,440,3.001,545,1.902,557,3.277,586,2.292,624,3.851,626,3.777,627,2.885,628,2.885,629,2.885,630,3.777,631,3.777,632,2.885,633,2.885,634,2.885,635,2.885,636,2.885,637,3.777,638,2.885,639,2.885,640,2.885,641,3.777,642,3.777,643,2.885,644,2.885,645,2.885,646,3.777,647,2.885,648,2.885,649,2.885,650,2.885,651,2.885,652,2.885,653,4.468,654,2.885,655,4.211,656,4.211,657,4.211,658,4.211,659,3.777,660,3.777,661,2.885,662,2.885,663,4.211,664,2.885,665,2.885,666,3.777,667,2.885,668,2.885,669,2.885]]],"invertedIndex":[["",{"_index":3,"title":{},"contents":{"01-breakpoints.html":{"position":[[38,1],[125,2]]},"01-colors.html":{"position":[[44,1],[171,2],[354,1],[481,2],[665,1],[792,2],[977,1],[1104,2],[1289,1],[1416,2],[1599,1],[1726,2],[1910,1],[2119,2]]},"01-typography.html":{"position":[[36,1],[65,1],[216,1],[218,2],[300,1],[484,1],[508,1],[800,1],[802,2],[1199,1],[1314,2]]},"02-breakpoint.html":{"position":[[63,1]]},"02-color.html":{"position":[[61,1],[495,1],[747,1],[998,1],[1249,1],[1501,1],[1751,1],[2014,1],[2213,1],[2501,1],[2701,1],[2983,1],[3359,1]]},"02-size.html":{"position":[[60,1],[411,1],[688,1],[1096,1]]},"02-z-index.html":{"position":[[51,1]]},"03-buttons.html":{"position":[[519,1],[568,1],[591,1],[647,1],[678,1],[723,1],[742,1],[771,1],[788,1],[833,1],[1487,1],[1619,1],[1651,1],[1727,1],[1776,1],[1845,1],[1873,1],[1891,1],[1917,1],[1986,1],[2379,1],[2412,1],[2439,1],[2499,1],[2640,1],[2804,1],[2837,1],[2866,1],[2889,1],[3030,1],[3541,1],[3586,1],[3620,1],[3733,1],[3825,1],[3985,1],[4051,1],[4062,3],[4066,1],[4100,1],[4113,1],[4140,1],[4181,1],[4214,1],[4230,1],[4257,1],[4290,1],[4400,1],[4429,1],[4847,1],[4892,1],[4905,1],[4956,1],[4958,1],[4992,1],[5105,1],[5197,1],[5357,1],[5423,1],[5434,3],[5438,1],[5472,1],[5485,1],[5512,1],[5553,1],[5586,1],[5602,1],[5629,1],[5662,1],[5772,1],[5801,1],[5932,1],[5965,1],[6003,1],[6036,1],[6124,1],[6173,1],[6208,1],[6253,1],[6281,1],[6325,1],[6354,1],[6983,1],[7037,1],[7067,1],[7147,1],[7170,1],[7242,1],[7287,1],[7320,1],[7377,1],[7395,1],[7419,1],[7452,1],[7482,1],[7500,1],[7604,2],[7684,1],[7810,1],[8260,2],[8376,1],[8422,1],[8457,1],[8525,1],[8581,1],[8630,3],[8771,1],[8799,1],[8827,1],[8882,1],[8915,1],[9050,1],[9068,1],[9097,1],[9130,1],[9200,1],[9218,1],[9328,2],[9408,1],[9733,1],[9779,1],[9792,1],[9845,1],[9847,1],[9882,1],[9950,1],[10006,1],[10055,3],[10196,1],[10224,1],[10252,1],[10307,1],[10340,1],[10475,1],[10493,1],[10522,1],[10555,1],[10625,1],[10643,1],[10676,1],[10709,1],[10787,1],[10816,1],[10855,1],[10884,1],[11024,2],[11104,1]]},"03-colors.html":{"position":[[290,1],[362,1]]},"03-links.html":{"position":[[288,1],[336,1],[353,1],[371,1],[383,1],[401,1],[420,1],[438,1],[449,1],[467,1],[1234,1],[1310,1],[1362,1],[1389,4],[1480,1],[1509,1],[1527,1],[1580,1],[1630,1],[1658,1],[1676,1]]},"03-lists.html":{"position":[[121,1],[144,1],[171,1],[214,1],[611,1],[647,1],[714,1],[757,1],[777,1],[797,1],[824,1],[851,4],[905,1],[1349,1],[1417,1],[1466,1],[1538,1],[1558,1],[1578,1],[1605,1],[1765,1],[1795,1],[1842,1],[1875,1],[1922,1]]},"03-media-queries.html":{"position":[[59,1],[166,1],[220,1],[238,1],[240,1],[262,1],[279,1],[324,1],[333,1],[351,1],[353,1],[504,1],[611,1],[665,1],[683,1],[685,1],[707,1],[724,1],[769,1],[778,1],[796,1],[798,1],[975,1],[1139,1],[1212,1],[1230,1],[1232,1],[1312,1],[1321,1],[1339,1],[1341,1]]},"03-positioning.html":{"position":[[151,1],[173,1],[203,1],[231,1],[251,1],[273,1],[303,1],[364,1],[609,1],[631,1],[663,1],[693,1],[713,1],[735,1],[767,1],[829,1],[1089,1],[1111,1],[1141,1],[1169,1],[1189,1],[1211,1],[1241,1],[1318,1]]},"03-utilities.html":{"position":[[69,1],[90,1],[115,1],[127,1],[163,1],[174,1],[176,2],[195,1],[213,1],[228,1],[527,1],[550,1],[577,1],[677,1],[1001,1],[1032,1],[1067,1],[1190,1],[1473,1],[1514,1],[1555,1],[1658,1],[1898,1],[1929,1],[1965,1],[2020,1],[2312,1],[2348,1],[2369,1],[2406,1],[2470,1],[2493,1],[2529,1],[2558,1],[2920,1],[2956,1],[2978,1],[3027,1],[3099,1],[3136,1],[3164,1],[3211,1]]},"index.html":{"position":[[780,1],[814,1],[830,1],[899,2],[918,1],[920,1],[960,1],[971,1],[1029,1],[1098,1],[1100,1],[1102,1],[1163,1],[1190,1],[1206,1],[1275,1],[1277,3],[1281,3],[1419,1],[1490,1]]}}}],["0",{"_index":361,"title":{},"contents":{"03-buttons.html":{"position":[[3889,2],[3900,1],[3935,2],[5261,2],[5272,1],[5307,2],[8618,2],[8669,2],[8713,2],[8721,2],[10043,2],[10094,2],[10138,2],[10146,2]]},"03-lists.html":{"position":[[199,2],[211,2],[742,2],[754,2],[1494,2],[1506,2]]},"03-utilities.html":{"position":[[1077,2],[1093,1],[1095,1],[1097,3],[1155,2],[1605,2],[2988,2],[3174,2]]}}}],["0.3",{"_index":367,"title":{},"contents":{"03-buttons.html":{"position":[[3954,4],[5326,4],[7129,4],[7224,4],[8740,4],[10165,4]]},"03-links.html":{"position":[[1462,4]]}}}],["0.3125em",{"_index":465,"title":{},"contents":{"03-links.html":{"position":[[1430,9]]}}}],["0.5em",{"_index":319,"title":{},"contents":{"03-buttons.html":{"position":[[2488,5]]}}}],["00bb",{"_index":459,"title":{},"contents":{"03-links.html":{"position":[[1271,8]]}}}],["00d7",{"_index":392,"title":{},"contents":{"03-buttons.html":{"position":[[7197,8]]}}}],["063709",{"_index":65,"title":{},"contents":{"01-colors.html":{"position":[[984,8],[1237,7]]}}}],["082449",{"_index":27,"title":{},"contents":{"01-colors.html":{"position":[[51,8],[304,7]]}}}],["0b5c10",{"_index":66,"title":{},"contents":{"01-colors.html":{"position":[[998,8],[1225,7]]}}}],["0c356b",{"_index":29,"title":{},"contents":{"01-colors.html":{"position":[[65,8],[292,7]]}}}],["0f8a15",{"_index":67,"title":{},"contents":{"01-colors.html":{"position":[[1012,8],[1213,7]]}}}],["1",{"_index":190,"title":{},"contents":{"01-z-index.html":{"position":[[40,3]]},"03-media-queries.html":{"position":[[443,1],[914,1]]},"03-utilities.html":{"position":[[124,2]]}}}],["1.5",{"_index":318,"title":{},"contents":{"03-buttons.html":{"position":[[2474,4]]}}}],["10",{"_index":275,"title":{},"contents":{"03-buttons.html":{"position":[[219,4],[1149,4]]}}}],["100",{"_index":18,"title":{},"contents":{"01-breakpoints.html":{"position":[[206,3]]},"01-colors.html":{"position":[[158,4],[204,3],[468,4],[513,3],[779,4],[825,3],[1091,4],[1137,3],[1403,4],[1449,3],[1713,4],[1758,3]]},"01-widths.html":{"position":[[39,5]]}}}],["100vw",{"_index":578,"title":{},"contents":{"03-utilities.html":{"position":[[670,6]]}}}],["104993",{"_index":31,"title":{},"contents":{"01-colors.html":{"position":[[79,8],[280,7]]}}}],["1050px",{"_index":180,"title":{},"contents":{"01-widths.html":{"position":[[120,7]]}}}],["10px",{"_index":350,"title":{},"contents":{"03-buttons.html":{"position":[[3685,5],[5057,5],[8499,5],[9924,5]]}}}],["1199px",{"_index":534,"title":{},"contents":{"03-media-queries.html":{"position":[[761,7]]}}}],["1200px",{"_index":10,"title":{},"contents":{"01-breakpoints.html":{"position":[[98,7]]},"03-media-queries.html":{"position":[[316,7]]}}}],["1560c1",{"_index":33,"title":{},"contents":{"01-colors.html":{"position":[[93,8],[268,7]]}}}],["15c11e",{"_index":68,"title":{},"contents":{"01-colors.html":{"position":[[1026,8],[1201,7],[2241,7]]}}}],["16",{"_index":159,"title":{},"contents":{"01-typography.html":{"position":[[1628,2]]},"03-utilities.html":{"position":[[3094,2],[3159,2],[3243,2]]}}}],["16:9",{"_index":618,"title":{},"contents":{"03-utilities.html":{"position":[[3075,4]]}}}],["1800px",{"_index":12,"title":{},"contents":{"01-breakpoints.html":{"position":[[118,6]]}}}],["1em",{"_index":320,"title":{},"contents":{"03-buttons.html":{"position":[[2494,4]]},"03-lists.html":{"position":[[792,4],[900,4],[1573,4],[1741,4]]}}}],["1px",{"_index":589,"title":{},"contents":{"03-utilities.html":{"position":[[1109,4],[1123,4],[1185,4]]}}}],["1rem",{"_index":390,"title":{},"contents":{"03-buttons.html":{"position":[[6592,4]]},"03-lists.html":{"position":[[880,5],[1721,5]]}}}],["2",{"_index":385,"title":{},"contents":{"03-buttons.html":{"position":[[6175,3]]},"03-utilities.html":{"position":[[2947,2]]}}}],["2.25rem",{"_index":317,"title":{},"contents":{"03-buttons.html":{"position":[[2452,8]]}}}],["200",{"_index":40,"title":{},"contents":{"01-colors.html":{"position":[[144,4],[216,3],[454,4],[525,3],[765,4],[837,3],[1077,4],[1149,3],[1389,4],[1461,3],[1699,4],[1770,3]]}}}],["200px",{"_index":568,"title":{},"contents":{"03-utilities.html":{"position":[[290,6]]}}}],["20px",{"_index":348,"title":{},"contents":{"03-buttons.html":{"position":[[3664,5],[3979,5],[5036,5],[5351,5],[8765,5],[10190,5]]}}}],["2192",{"_index":455,"title":{},"contents":{"03-links.html":{"position":[[635,7]]}}}],["24",{"_index":169,"title":{},"contents":{"01-typography.html":{"position":[[1788,2]]}}}],["27292b",{"_index":55,"title":{},"contents":{"01-colors.html":{"position":[[672,8],[925,7],[2326,7]]},"03-buttons.html":{"position":[[714,8],[824,8]]}}}],["28.125",{"_index":621,"title":{},"contents":{"03-utilities.html":{"position":[[3202,8]]}}}],["2f80e8",{"_index":35,"title":{},"contents":{"01-colors.html":{"position":[[107,8],[256,7],[2210,7]]},"03-buttons.html":{"position":[[611,8],[1702,8],[1718,8],[1796,8],[1823,8],[1937,8],[1964,8],[3845,8],[4420,8],[5217,8],[5792,8],[7179,8],[7386,8],[7491,8],[8601,8],[9059,8],[9209,8],[10026,8],[10484,8],[10634,8],[10807,8]]},"03-links.html":{"position":[[362,8],[392,8]]},"03-lists.html":{"position":[[833,8],[1614,8]]}}}],["2px",{"_index":302,"title":{},"contents":{"03-buttons.html":{"position":[[1692,3],[1813,3],[1954,3]]}}}],["3.125rem",{"_index":606,"title":{},"contents":{"03-utilities.html":{"position":[[2379,9]]}}}],["300",{"_index":38,"title":{},"contents":{"01-colors.html":{"position":[[130,4],[228,3],[440,4],[537,3],[751,4],[849,3],[1063,4],[1161,3],[1375,4],[1473,3],[1685,4],[1782,3]]}}}],["300px",{"_index":183,"title":{},"contents":{"01-widths.html":{"position":[[209,6]]}}}],["300px;\">click",{"_index":295,"title":{},"contents":{"03-buttons.html":{"position":[[862,20]]}}}],["class=\"clearfix",{"_index":566,"title":{},"contents":{"03-utilities.html":{"position":[[240,17]]}}}],["class=\"ful",{"_index":579,"title":{},"contents":{"03-utilities.html":{"position":[[689,11],[721,11]]}}}],["class=\"imag",{"_index":600,"title":{},"contents":{"03-utilities.html":{"position":[[2032,12]]}}}],["class=\"link",{"_index":472,"title":{},"contents":{"03-links.html":{"position":[[1695,11]]}}}],["class=\"list",{"_index":478,"title":{},"contents":{"03-lists.html":{"position":[[225,11],[916,11],[1933,11]]}}}],["class=\"ratio",{"_index":622,"title":{},"contents":{"03-utilities.html":{"position":[[3223,12]]}}}],["class=\"ratio\">read",{"_index":473,"title":{},"contents":{"03-links.html":{"position":[[1707,11]]}}}],["fancy:active:aft",{"_index":470,"title":{},"contents":{"03-links.html":{"position":[[1639,18]]}}}],["fancy:aft",{"_index":463,"title":{},"contents":{"03-links.html":{"position":[[1350,11]]}}}],["fancy:focus:aft",{"_index":467,"title":{},"contents":{"03-links.html":{"position":[[1536,18]]}}}],["fancy:hover:aft",{"_index":468,"title":{},"contents":{"03-links.html":{"position":[[1562,17]]}}}],["fancy:visited:aft",{"_index":466,"title":{},"contents":{"03-links.html":{"position":[[1489,19]]}}}],["fbdada",{"_index":92,"title":{},"contents":{"01-colors.html":{"position":[[1704,8],[1774,7]]}}}],["fbefdf",{"_index":52,"title":{},"contents":{"01-colors.html":{"position":[[459,8],[529,7]]}}}],["fbfbdf",{"_index":82,"title":{},"contents":{"01-colors.html":{"position":[[1394,8],[1465,7]]}}}],["featur",{"_index":630,"title":{},"contents":{"index.html":{"position":[[105,8],[220,8]]}}}],["fefafa",{"_index":93,"title":{},"contents":{"01-colors.html":{"position":[[1718,7],[1762,7]]}}}],["fefdfa",{"_index":53,"title":{},"contents":{"01-colors.html":{"position":[[473,7],[517,7]]}}}],["fefef6",{"_index":83,"title":{},"contents":{"01-colors.html":{"position":[[1408,7],[1453,7]]}}}],["fff",{"_index":286,"title":{},"contents":{"03-buttons.html":{"position":[[641,5],[1839,5],[1980,5]]}}}],["file",{"_index":667,"title":{},"contents":{"index.html":{"position":[[1329,5]]}}}],["fill",{"_index":441,"title":{},"contents":{"03-colors.html":{"position":[[316,5],[364,4]]}}}],["first",{"_index":234,"title":{},"contents":{"02-color.html":{"position":[[3013,5]]}}}],["fix",{"_index":576,"title":{},"contents":{"03-utilities.html":{"position":[[482,5]]}}}],["float",{"_index":509,"title":{},"contents":{"03-lists.html":{"position":[[856,6],[1697,6]]},"03-utilities.html":{"position":[[31,7]]}}}],["focu",{"_index":444,"title":{},"contents":{"03-links.html":{"position":[[37,6]]}}}],["focus",{"_index":586,"title":{},"contents":{"03-utilities.html":{"position":[[950,10],[1331,11],[1422,10],[1503,10]]},"index.html":{"position":[[196,7]]}}}],["focusable\">closeread",{"_index":451,"title":{},"contents":{"03-links.html":{"position":[[477,13]]}}}],["html",{"_index":293,"title":{},"contents":{"03-buttons.html":{"position":[[835,4],[1988,4],[2501,4],[2891,4],[4431,4],[6356,4],[7502,4],[9220,4],[10886,4]]},"03-links.html":{"position":[[469,4],[1678,4]]},"03-lists.html":{"position":[[216,4],[907,4],[1924,4]]},"03-positioning.html":{"position":[[366,4],[831,4],[1320,4]]},"03-utilities.html":{"position":[[230,4],[679,4],[1192,4],[1660,4],[2022,4],[2408,4],[2560,4],[3029,4],[3213,4]]}}}],["http://nicolasgallagher.com/micro",{"_index":570,"title":{},"contents":{"03-utilities.html":{"position":[[334,33]]}}}],["https://css",{"_index":247,"title":{},"contents":{"02-size.html":{"position":[[163,11]]},"03-utilities.html":{"position":[[762,11]]}}}],["https://github.com/minamarkham/sassi",{"_index":194,"title":{},"contents":{"01-z-index.html":{"position":[[100,36]]}}}],["https://github.com/thoughtbot/bourbon/blob/v4",{"_index":260,"title":{},"contents":{"02-size.html":{"position":[[861,45],[1194,45]]}}}],["https://medium.freecodecamp.com/th",{"_index":17,"title":{},"contents":{"01-breakpoints.html":{"position":[[170,35]]}}}],["https://www.w3.org/tr/wcag20",{"_index":227,"title":{},"contents":{"02-color.html":{"position":[[2794,28],[3147,28],[3632,28]]}}}],["icon",{"_index":442,"title":{},"contents":{"03-colors.html":{"position":[[357,4]]}}}],["id",{"_index":499,"title":{},"contents":{"03-lists.html":{"position":[[423,2],[1117,2],[2134,2]]}}}],["imag",{"_index":598,"title":{},"contents":{"03-utilities.html":{"position":[[1767,5],[1810,6],[1877,6],[1909,5],[1944,6],[2078,6]]}}}],["implement",{"_index":407,"title":{},"contents":{"03-buttons.html":{"position":[[7775,11]]}}}],["import",{"_index":666,"title":{},"contents":{"index.html":{"position":[[1285,6],[1335,7]]}}}],["includ",{"_index":282,"title":{},"contents":{"03-buttons.html":{"position":[[521,8],[1489,8],[2381,8],[2806,8],[3543,8],[4849,8],[4907,8],[6985,8],[7651,8],[8019,8],[8074,7],[8252,7],[8270,8],[8378,8],[9375,8],[9735,8],[9794,8],[11071,8]]},"03-colors.html":{"position":[[165,8],[237,8],[307,8],[349,7],[384,8],[424,7]]},"03-links.html":{"position":[[290,8],[1236,8]]},"03-lists.html":{"position":[[123,8],[613,8],[1351,8]]},"03-media-queries.html":{"position":[[183,8],[628,8],[1141,8]]},"03-positioning.html":{"position":[[205,8],[665,8],[1143,8]]},"03-utilities.html":{"position":[[71,8],[529,8],[1003,8],[1475,8],[1900,8],[2314,8],[2472,8],[2922,8],[3101,8]]},"index.html":{"position":[[300,8],[1421,8],[1455,8]]}}}],["includepath",{"_index":653,"title":{},"contents":{"index.html":{"position":[[731,13],[816,13],[1015,13],[1192,13]]}}}],["increas",{"_index":256,"title":{},"contents":{"02-size.html":{"position":[[657,9]]}}}],["increment",{"_index":523,"title":{},"contents":{"03-lists.html":{"position":[[1672,10]]}}}],["indec",{"_index":188,"title":{"01-z-index.html":{"position":[[2,7]]}},"contents":{"01-z-index.html":{"position":[[83,8]]},"02-z-index.html":{"position":[[135,8]]}}}],["indent",{"_index":353,"title":{},"contents":{"03-buttons.html":{"position":[[3716,7],[5088,7]]}}}],["index",{"_index":189,"title":{"02-z-index.html":{"position":[[2,5]]}},"contents":{"01-z-index.html":{"position":[[3,5],[23,6]]},"02-z-index.html":{"position":[[22,5],[60,7],[81,5],[102,5],[181,5],[244,5]]}}}],["inlin",{"_index":464,"title":{},"contents":{"03-links.html":{"position":[[1403,6]]}}}],["inspect($breakpoint",{"_index":203,"title":{},"contents":{"02-breakpoint.html":{"position":[[274,23]]}}}],["inspect($index",{"_index":267,"title":{},"contents":{"02-z-index.html":{"position":[[250,18]]}}}],["inspect($key",{"_index":208,"title":{},"contents":{"02-color.html":{"position":[[259,16]]}}}],["inspect($map",{"_index":207,"title":{},"contents":{"02-color.html":{"position":[[213,16]]}}}],["inspect($str",{"_index":325,"title":{},"contents":{"03-buttons.html":{"position":[[2715,19]]}}}],["inspir",{"_index":338,"title":{},"contents":{"03-buttons.html":{"position":[[3055,12]]}}}],["instal",{"_index":646,"title":{},"contents":{"index.html":{"position":[[553,12],[616,7]]}}}],["instead",{"_index":634,"title":{},"contents":{"index.html":{"position":[[229,7]]}}}],["interact",{"_index":342,"title":{},"contents":{"03-buttons.html":{"position":[[3137,11]]}}}],["ipsum",{"_index":480,"title":{},"contents":{"03-lists.html":{"position":[[255,5],[949,5],[1966,5]]}}}],["itc",{"_index":138,"title":{},"contents":{"01-typography.html":{"position":[[690,4],[1052,4]]}}}],["item",{"_index":544,"title":{},"contents":{"03-positioning.html":{"position":[[47,4],[505,4],[985,4]]}}}],["it’",{"_index":593,"title":{},"contents":{"03-utilities.html":{"position":[[1368,4]]}}}],["javascript",{"_index":341,"title":{},"contents":{"03-buttons.html":{"position":[[3126,10],[7761,10]]},"index.html":{"position":[[51,10],[161,10],[289,10],[530,10]]}}}],["keep",{"_index":191,"title":{},"contents":{"01-z-index.html":{"position":[[44,4]]},"index.html":{"position":[[187,4]]}}}],["key",{"_index":198,"title":{},"contents":{"02-breakpoint.html":{"position":[[109,4]]},"02-color.html":{"position":[[118,5],[144,3],[255,3],[504,5],[530,3],[756,5],[782,3],[1007,5],[1033,3],[1258,5],[1284,3],[1510,5],[1536,3],[1760,5],[1786,3]]}}}],["l",{"_index":125,"title":{},"contents":{"01-typography.html":{"position":[[565,3],[658,3],[781,3],[923,3],[1018,3],[1143,3]]}}}],["landscap",{"_index":7,"title":{},"contents":{"01-breakpoints.html":{"position":[[71,10]]},"03-media-queries.html":{"position":[[1200,11]]}}}],["left",{"_index":360,"title":{},"contents":{"03-buttons.html":{"position":[[3883,5],[5255,5],[8663,5],[10088,5]]},"03-links.html":{"position":[[1424,5]]},"03-lists.html":{"position":[[786,5],[863,5],[893,5],[1567,5],[1704,5],[1734,5]]},"03-positioning.html":{"position":[[769,5],[1243,5]]},"03-utilities.html":{"position":[[579,5],[597,5]]}}}],["length",{"_index":246,"title":{},"contents":{"02-size.html":{"position":[[41,7]]},"03-media-queries.html":{"position":[[87,6],[127,6],[532,6],[572,6],[1100,6]]}}}],["li",{"_index":507,"title":{},"contents":{"03-lists.html":{"position":[[774,2],[1220,5],[1232,5],[1555,2],[2237,5],[2249,5]]}}}],["li:befor",{"_index":508,"title":{},"contents":{"03-lists.html":{"position":[[814,9],[1595,9],[1785,9],[1865,9]]}}}],["li>aliquam",{"_index":487,"title":{},"contents":{"03-lists.html":{"position":[[312,11],[1006,11],[2023,11]]}}}],["li>cra",{"_index":501,"title":{},"contents":{"03-lists.html":{"position":[[438,8],[1132,8],[2149,8]]}}}],["li>lorem",{"_index":479,"title":{},"contents":{"03-lists.html":{"position":[[245,9],[939,9],[1956,9]]}}}],["li>nunc",{"_index":496,"title":{},"contents":{"03-lists.html":{"position":[[398,8],[1092,8],[2109,8]]}}}],["li>vestibulum",{"_index":492,"title":{},"contents":{"03-lists.html":{"position":[[356,14],[1050,14],[2067,14]]}}}],["li>vivamu",{"_index":511,"title":{},"contents":{"03-lists.html":{"position":[[1169,11],[2186,11]]}}}],["liber",{"_index":150,"title":{},"contents":{"01-typography.html":{"position":[[1269,11],[1441,11]]}}}],["light",{"_index":98,"title":{},"contents":{"01-colors.html":{"position":[[2065,6],[2084,6],[2302,5]]},"02-color.html":{"position":[[3423,7],[3445,5],[3463,5]]}}}],["lighten($background",{"_index":274,"title":{},"contents":{"03-buttons.html":{"position":[[198,20]]}}}],["limit",{"_index":582,"title":{},"contents":{"03-utilities.html":{"position":[[807,7]]}}}],["line",{"_index":167,"title":{},"contents":{"01-typography.html":{"position":[[1743,4],[1775,4],[1814,4]]},"02-size.html":{"position":[[387,4]]},"03-buttons.html":{"position":[[2200,5],[2234,4],[2282,4],[2461,4]]}}}],["link",{"_index":264,"title":{"03-links.html":{"position":[[0,5]]}},"contents":{"02-size.html":{"position":[[1031,6]]},"03-links.html":{"position":[[7,6],[526,6],[551,6],[576,5],[740,4],[802,4],[866,4],[926,4],[1221,5],[1343,5],[1482,5],[1529,5],[1555,5],[1632,5],[1744,6]]},"index.html":{"position":[[1413,5]]}}}],["link($color",{"_index":446,"title":{},"contents":{"03-links.html":{"position":[[299,11]]}}}],["link($cont",{"_index":458,"title":{},"contents":{"03-links.html":{"position":[[1256,14]]}}}],["link($primari",{"_index":668,"title":{},"contents":{"index.html":{"position":[[1430,14]]}}}],["link('\\u007",{"_index":669,"title":{},"contents":{"index.html":{"position":[[1475,14]]}}}],["linotyp",{"_index":122,"title":{},"contents":{"01-typography.html":{"position":[[520,10],[874,10]]}}}],["list",{"_index":332,"title":{"03-lists.html":{"position":[[0,5]]}},"contents":{"03-buttons.html":{"position":[[2970,4]]},"03-lists.html":{"position":[[7,4],[28,4],[109,5],[132,4],[159,5],[173,4],[596,5],[680,5],[696,5],[716,4],[759,5],[799,5],[1260,4],[1334,5],[1432,5],[1448,5],[1468,4],[1532,5],[1540,5],[1580,5],[1648,5],[1691,5],[1767,5],[1822,5],[1844,5],[1902,5],[2277,4]]}}}],["loader",{"_index":655,"title":{},"contents":{"index.html":{"position":[[772,7],[782,7],[796,8]]}}}],["loop",{"_index":433,"title":{},"contents":{"03-colors.html":{"position":[[40,7]]}}}],["lower",{"_index":517,"title":{},"contents":{"03-lists.html":{"position":[[1386,6],[1401,6],[1828,5],[1908,5]]}}}],["lumin",{"_index":222,"title":{},"contents":{"02-color.html":{"position":[[2636,11],[2662,9],[2775,10],[3231,11]]}}}],["main",{"_index":437,"title":{},"contents":{"03-colors.html":{"position":[[121,4]]},"03-links.html":{"position":[[735,4],[797,4],[861,4],[921,4]]},"index.html":{"position":[[1319,4]]}}}],["make",{"_index":545,"title":{},"contents":{"03-positioning.html":{"position":[[79,4],[537,4],[1017,4]]},"03-utilities.html":{"position":[[1821,5]]},"index.html":{"position":[[499,5]]}}}],["manag",{"_index":193,"title":{},"contents":{"01-z-index.html":{"position":[[67,8]]}}}],["map",{"_index":1,"title":{},"contents":{"01-breakpoints.html":{"position":[[13,5]]},"01-colors.html":{"position":[[16,5],[327,5],[637,5],[949,5],[1261,5],[1572,5],[1882,5]]},"01-typography.html":{"position":[[12,5],[465,5],[1176,5]]},"01-z-index.html":{"position":[[9,5]]},"02-breakpoint.html":{"position":[[47,4],[114,5],[133,5],[143,3],[237,4]]},"02-color.html":{"position":[[45,4],[70,5],[76,5],[86,3],[230,3],[285,8],[557,5],[579,5],[589,3],[809,5],[831,5],[841,3],[1060,5],[1081,5],[1091,3],[1311,5],[1333,5],[1343,3],[1563,5],[1585,5],[1595,3],[1813,5],[1834,5],[1844,3]]},"02-z-index.html":{"position":[[35,4],[108,5],[118,3],[218,4]]},"03-colors.html":{"position":[[69,4],[92,4],[111,5],[138,3]]}}}],["margin",{"_index":362,"title":{},"contents":{"03-buttons.html":{"position":[[3892,7],[5264,7],[8672,7],[10097,7]]},"03-links.html":{"position":[[1417,6]]},"03-lists.html":{"position":[[45,7],[191,7],[734,7],[779,6],[886,6],[1486,7],[1560,6],[1727,6]]},"03-utilities.html":{"position":[[590,6],[610,6],[1114,7],[1597,7]]}}}],["mauri",{"_index":489,"title":{},"contents":{"03-lists.html":{"position":[[334,6],[1028,6],[2045,6]]}}}],["max",{"_index":178,"title":{},"contents":{"01-widths.html":{"position":[[53,3]]},"03-buttons.html":{"position":[[3653,3],[5025,3]]},"03-media-queries.html":{"position":[[385,5],[400,3],[423,3],[558,4],[749,4],[882,3],[894,3],[1023,5],[1293,4],[1362,5]]}}}],["max(breakpoint(desktop",{"_index":533,"title":{},"contents":{"03-media-queries.html":{"position":[[640,24]]}}}],["maximum",{"_index":537,"title":{},"contents":{"03-media-queries.html":{"position":[[1042,7]]}}}],["meclick",{"_index":308,"title":{},"contents":{"03-buttons.html":{"position":[[2037,14]]}}}],["outline(2px",{"_index":300,"title":{},"contents":{"03-buttons.html":{"position":[[1505,11]]}}}],["outline:act",{"_index":306,"title":{},"contents":{"03-buttons.html":{"position":[[1902,14]]}}}],["outline:dis",{"_index":305,"title":{},"contents":{"03-buttons.html":{"position":[[1856,16]]}}}],["outline:focu",{"_index":303,"title":{},"contents":{"03-buttons.html":{"position":[[1738,14]]}}}],["outline:hov",{"_index":304,"title":{},"contents":{"03-buttons.html":{"position":[[1762,13]]}}}],["output",{"_index":638,"title":{},"contents":{"index.html":{"position":[[330,6]]}}}],["outputstyl",{"_index":661,"title":{},"contents":{"index.html":{"position":[[973,12]]}}}],["over",{"_index":637,"title":{},"contents":{"index.html":{"position":[[261,4],[270,5]]}}}],["overflow",{"_index":590,"title":{},"contents":{"03-utilities.html":{"position":[[1128,9],[1608,9]]}}}],["packag",{"_index":631,"title":{},"contents":{"index.html":{"position":[[119,7],[317,7]]}}}],["pad",{"_index":312,"title":{},"contents":{"03-buttons.html":{"position":[[2295,9],[2479,8],[3670,8],[5042,8],[8490,8],[9915,8]]},"03-lists.html":{"position":[[57,7],[202,8],[745,8],[1497,8]]},"03-utilities.html":{"position":[[1146,8],[3003,7],[3189,7]]}}}],["page",{"_index":185,"title":{},"contents":{"01-widths.html":{"position":[[263,5],[297,5],[346,4]]}}}],["palatino",{"_index":121,"title":{},"contents":{"01-typography.html":{"position":[[510,9],[531,9],[864,9],[885,11]]}}}],["palett",{"_index":95,"title":{},"contents":{"01-colors.html":{"position":[[1874,7],[1901,8],[2129,7]]}}}],["palladio",{"_index":123,"title":{},"contents":{"01-typography.html":{"position":[[541,9],[556,8],[897,11],[914,8]]}}}],["paramet",{"_index":196,"title":{},"contents":{"02-breakpoint.html":{"position":[[52,10]]},"02-color.html":{"position":[[50,10],[484,10],[736,10],[987,10],[1238,10],[1490,10],[1740,10],[2003,10],[2202,10],[2490,10],[2690,10],[2972,10],[3348,10]]},"02-size.html":{"position":[[49,10],[400,10],[677,10],[1085,10]]},"02-z-index.html":{"position":[[40,10]]},"03-buttons.html":{"position":[[63,10],[971,10],[2146,10],[2629,10],[3183,10],[4610,10],[6533,10],[7799,10],[9555,10]]},"03-colors.html":{"position":[[74,10]]},"03-links.html":{"position":[[70,10],[614,10]]},"03-media-queries.html":{"position":[[48,10],[493,10],[964,10],[1080,10]]},"03-utilities.html":{"position":[[2194,10],[2460,9],[2519,9],[2697,10]]}}}],["parameter\">click",{"_index":331,"title":{},"contents":{"03-buttons.html":{"position":[[2940,11]]}}}],["pipe(sass",{"_index":665,"title":{},"contents":{"index.html":{"position":[[1178,11]]}}}],["pixel",{"_index":172,"title":{},"contents":{"01-typography.html":{"position":[[1891,5]]},"02-size.html":{"position":[[622,5],[718,5],[778,5],[1064,5],[1126,5]]}}}],["plu",{"_index":405,"title":{},"contents":{"03-buttons.html":{"position":[[7703,4],[7733,4],[7856,4],[8365,4],[8387,4],[8446,4],[8536,4],[8563,4],[8782,4],[8838,4],[8865,4],[8926,4],[8959,4],[8993,4],[9026,4],[9079,4],[9141,4],[9175,4],[9269,4],[9436,4],[9470,4],[9536,4],[9722,4],[9744,4],[9803,4],[9871,4],[9961,4],[9988,4],[10207,4],[10263,4],[10290,4],[10351,4],[10384,4],[10418,4],[10451,4],[10504,4],[10566,4],[10600,4],[10654,4],[10720,4],[10758,4],[10827,4],[10935,4],[10954,4],[11131,4]]}}}],["portrait",{"_index":5,"title":{},"contents":{"01-breakpoints.html":{"position":[[47,9]]},"03-media-queries.html":{"position":[[1171,10]]}}}],["posit",{"_index":351,"title":{"03-positioning.html":{"position":[[0,11]]}},"contents":{"03-buttons.html":{"position":[[3691,9],[3908,9],[5063,9],[5280,9],[8505,9],[8686,9],[9930,9],[10111,9]]},"03-positioning.html":{"position":[[66,12],[99,9],[153,9],[253,9],[305,9],[524,12],[557,9],[611,9],[715,9],[780,9],[1004,12],[1037,9],[1091,9],[1191,9],[1254,9]]},"03-utilities.html":{"position":[[631,9],[1158,9],[1627,9],[1978,9]]}}}],["preview",{"_index":43,"title":{},"contents":{"01-colors.html":{"position":[[195,8],[504,8],[816,8],[1128,8],[1440,8],[1749,8],[2193,8]]},"01-typography.html":{"position":[[237,7],[816,7],[1332,7]]}}}],["primari",{"_index":25,"title":{},"contents":{"01-colors.html":{"position":[[0,8],[27,8],[174,7],[1912,8],[1928,8],[2202,7]]},"02-color.html":{"position":[[312,7],[441,7],[463,7],[563,8]]},"03-buttons.html":{"position":[[544,8],[1530,8],[1546,8],[1609,9],[3576,9],[4882,9],[7014,8],[8412,9],[9769,9],[9835,9]]},"03-links.html":{"position":[[311,8]]}}}],["produc",{"_index":324,"title":{},"contents":{"03-buttons.html":{"position":[[2699,8]]}}}],["project",{"_index":162,"title":{},"contents":{"01-typography.html":{"position":[[1679,8],[1834,8],[2016,8]]},"index.html":{"position":[[5,7],[95,9],[401,8],[592,7]]}}}],["pseudo",{"_index":453,"title":{},"contents":{"03-links.html":{"position":[[598,6],[678,6]]}}}],["pxval",{"_index":258,"title":{},"contents":{"02-size.html":{"position":[[697,7],[1105,7]]}}}],["queri",{"_index":526,"title":{"03-media-queries.html":{"position":[[6,7]]}},"contents":{"03-media-queries.html":{"position":[[41,6],[416,6],[484,8],[847,5],[955,8]]}}}],["quickli",{"_index":270,"title":{},"contents":{"03-buttons.html":{"position":[[43,7]]}}}],["radiu",{"_index":329,"title":{},"contents":{"03-buttons.html":{"position":[[2875,7]]}}}],["rang",{"_index":535,"title":{},"contents":{"03-media-queries.html":{"position":[[853,5]]}}}],["ratio",{"_index":237,"title":{},"contents":{"02-color.html":{"position":[[3109,5]]},"03-utilities.html":{"position":[[2632,7],[2654,7],[2676,5],[2735,6],[2802,6],[2907,5],[2913,6],[2971,6],[3080,5],[3086,6],[3151,6],[3236,5]]}}}],["ratio(16",{"_index":620,"title":{},"contents":{"03-utilities.html":{"position":[[3117,9]]}}}],["ratio(3",{"_index":615,"title":{},"contents":{"03-utilities.html":{"position":[[2938,8]]}}}],["reader",{"_index":400,"title":{},"contents":{"03-buttons.html":{"position":[[7579,6],[7627,6],[7667,6],[9302,6],[9351,6],[9391,6],[10998,6],[11047,6],[11087,6]]},"03-utilities.html":{"position":[[855,6],[929,8],[989,6],[1019,6],[1055,6],[1269,6],[1319,6],[1400,8],[1461,6],[1491,6],[1537,6],[1708,6],[1727,6]]}}}],["recreat",{"_index":635,"title":{},"contents":{"index.html":{"position":[[240,10]]}}}],["rect(0",{"_index":588,"title":{},"contents":{"03-utilities.html":{"position":[[1086,6]]}}}],["regular",{"_index":146,"title":{},"contents":{"01-typography.html":{"position":[[1235,8],[1400,9]]}}}],["rel",{"_index":352,"title":{},"contents":{"03-buttons.html":{"position":[[3701,9],[5073,9],[8515,9],[9940,9]]},"03-positioning.html":{"position":[[109,9],[163,9],[263,9],[567,9],[621,9],[725,9],[1047,9],[1101,9],[1201,9]]},"03-utilities.html":{"position":[[641,9]]}}}],["relat",{"_index":16,"title":{},"contents":{"01-breakpoints.html":{"position":[[162,7]]},"01-z-index.html":{"position":[[92,7]]},"02-color.html":{"position":[[2786,7],[3139,7],[3624,7]]},"02-size.html":{"position":[[155,7],[853,7],[1186,7]]},"03-utilities.html":{"position":[[326,7],[754,7]]}}}],["rem",{"_index":166,"title":{},"contents":{"01-typography.html":{"position":[[1731,5]]},"02-size.html":{"position":[[291,5],[1048,5],[1079,5],[1171,3]]}}}],["rem(50",{"_index":605,"title":{},"contents":{"03-utilities.html":{"position":[[2338,9]]}}}],["rem.scss",{"_index":265,"title":{},"contents":{"02-size.html":{"position":[[1287,8]]}}}],["remov",{"_index":245,"title":{},"contents":{"02-size.html":{"position":[[23,7],[108,6]]},"03-lists.html":{"position":[[20,7]]}}}],["repres",{"_index":171,"title":{},"contents":{"01-typography.html":{"position":[[1877,9]]}}}],["requir",{"_index":209,"title":{},"contents":{"02-color.html":{"position":[[656,8],[908,8],[1158,8],[1410,8],[1662,8],[1911,8],[3212,8],[3697,8]]},"02-size.html":{"position":[[565,8],[973,8],[1307,8]]},"03-buttons.html":{"position":[[895,8],[2064,8],[7752,8],[8286,8],[9420,8]]},"03-links.html":{"position":[[1728,8]]},"03-lists.html":{"position":[[1244,8],[2261,8]]},"03-media-queries.html":{"position":[[1343,8]]},"03-utilities.html":{"position":[[3256,8]]},"index.html":{"position":[[1403,9]]}}}],["reset",{"_index":474,"title":{},"contents":{"03-lists.html":{"position":[[12,7],[115,5],[137,6],[165,5],[237,7],[1265,7],[1517,6],[2282,7]]}}}],["return",{"_index":197,"title":{},"contents":{"02-breakpoint.html":{"position":[[65,6],[174,7]]},"02-color.html":{"position":[[63,6],[171,7],[497,6],[621,7],[749,6],[873,7],[1000,6],[1123,7],[1251,6],[1375,7],[1503,6],[1627,7],[1753,6],[1876,7],[2016,6],[2104,7],[2215,6],[2342,7],[2503,6],[2592,7],[2703,6],[2746,7],[2985,6],[3079,7],[3361,6],[3572,7]]},"02-size.html":{"position":[[62,6],[121,7],[413,6],[526,7],[690,6],[818,7],[1098,6],[1150,7]]},"02-z-index.html":{"position":[[53,6],[144,7]]},"03-buttons.html":{"position":[[2642,6],[7812,6]]},"03-media-queries.html":{"position":[[61,6],[506,6],[977,6]]},"index.html":{"position":[[1165,6]]}}}],["right",{"_index":365,"title":{},"contents":{"03-buttons.html":{"position":[[3928,6],[5300,6],[8706,6],[10131,6]]},"03-lists.html":{"position":[[1758,6]]},"03-utilities.html":{"position":[[617,6],[651,6]]}}}],["risu",{"_index":498,"title":{},"contents":{"03-lists.html":{"position":[[417,5],[1038,6],[1111,5],[2055,6],[2128,5]]}}}],["risus.closecloseexpandclick",{"_index":321,"title":{},"contents":{"03-buttons.html":{"position":[[2550,9]]}}}],["you’ll",{"_index":651,"title":{},"contents":{"index.html":{"position":[[677,6]]}}}],["z",{"_index":187,"title":{"01-z-index.html":{"position":[[0,1]]},"02-z-index.html":{"position":[[0,1]]}},"contents":{"01-z-index.html":{"position":[[0,2],[20,2],[81,1]]},"02-z-index.html":{"position":[[10,3],[20,1],[95,3],[99,2],[133,1],[179,1]]}}}],["zoom",{"_index":561,"title":{},"contents":{"03-utilities.html":{"position":[[117,6]]}}}]],"pipeline":["stemmer"]},"store":{"01-breakpoints.html":{"filename":"01-breakpoints.html","title":"Breakpoints","contents":"$breakpoints (Map) scss $breakpoints: ( tablet-portrait: 600px, tablet-landscape: 900px, desktop: 1200px, desktop-xl: 1800px ); Breakpoints - add more as needed. Related https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.or3duno2h [external]"},"01-colors.html":{"filename":"01-colors.html","title":"Colors","contents":"$primary-colors (Map) scss $primary-colors: ( 900: #082449, 800: #0c356b, 700: #104993, 600: #1560c1, 500: #2f80e8, 400: #75abef, 300: #b6d1f7, 200: #dfebfb, 100: #f6f9fe ); Primary colors Color Previews 100 #f6f9fe 200 #dfebfb 300 #b6d1f7 400 #75abef 500 #2f80e8 600 #1560c1 700 #104993 800 #0c356b 900 #082449 $accent-colors (Map) scss $accent-colors: ( 900: #492c08, 800: #6a410c, 700: #935a10, 600: #c17716, 500: #e8982f, 400: #f0ba75, 300: #f7d9b6, 200: #fbefdf, 100: #fefdfa ); Accent colors Color Previews 100 #fefdfa 200 #fbefdf 300 #f7d9b6 400 #f0ba75 500 #e8982f 600 #c17716 700 #935a10 800 #6a410c 900 #492c08 $neutral-colors (Map) scss $neutral-colors: ( 900: #27292b, 800: #383a3e, 700: #4e5156, 600: #666a70, 500: #868b92, 400: #b4b7bb, 300: #dadbdd, 200: #f2f2f3, 100: #fafafa ); Neutral colors Color Previews 100 #fafafa 200 #f2f2f3 300 #dadbdd 400 #b4b7bb 500 #868b92 600 #666a70 700 #4e5156 800 #383a3e 900 #27292b $success-colors (Map) scss $success-colors: ( 900: #063709, 800: #0b5c10, 700: #0f8a15, 600: #15c11e, 500: #30e83a, 400: #75f07c, 300: #b6f7b9, 200: #e2fce5, 100: #f6fef6 ); Success colors Color Previews 100 #f6fef6 200 #e2fce5 300 #b6f7b9 400 #75f07c 500 #30e83a 600 #15c11e 700 #0f8a15 800 #0b5c10 900 #063709 $warning-colors (Map) scss $warning-colors: ( 900: #404007, 800: #60600c, 700: #939311, 600: #c1c016, 500: #e8e830, 400: #f2f28c, 300: #f7f7ba, 200: #fbfbdf, 100: #fefef6 ); Warning colors Color Previews 100 #fefef6 200 #fbfbdf 300 #f7f7ba 400 #f2f28c 500 #e8e830 600 #c1c016 700 #939311 800 #60600c 900 #404007 $danger-colors (Map) scss $danger-colors: ( 900: #490808, 800: #6a0c0c, 700: #931010, 600: #c11514, 500: #e82f30, 400: #ef6c6c, 300: #f4999a, 200: #fbdada, 100: #fefafa ); Danger colors Color Previews 100 #fefafa 200 #fbdada 300 #f4999a 400 #ef6c6c 500 #e82f30 600 #c11514 700 #931010 800 #6a0c0c 900 #490808 $editor-palette (Map) scss $editor-palette: ( primary: $color-primary, accent: $color-accent, success: $color-success, warning: $color-warning, danger: $color-danger, gray-mid: $color-gray-mid, gray-light: $color-gray-light, gray-dark: $color-gray-dark ); Editor palette The colors available within the WordPress editor. Color Previews primary #2f80e8 accent #e8982f success #15c11e warning #e8e830 danger #e82f30 gray-mid #868b92 gray-light #fafafa gray-dark #27292b"},"01-typography.html":{"filename":"01-typography.html","title":"Typography","contents":"$sans-serif (Map) scss $sans-serif: ( name: 'Sans Serif', stack: ( -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' ) ); Sans Serif Font Preview Sans Serif (sans-serif) css font-family: 'Sans Serif', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; $serif (Map) scss $serif: ( name: 'Serif', stack: ( 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Georgia, serif ) ); Serif Font Preview Serif (serif) css font-family: 'Serif', 'Palatino Linotype', 'Palatino', 'Palladio', 'URW Palladio L', 'Book Antiqua', 'Baskerville', 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', 'Garamond', 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', 'Georgia', serif; $monospace (Map) scss $monospace: ( name: 'Monospace', stack: (SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace) ); Monospace Font Preview Monospace (monospace) css font-family: 'Monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace; $base-font-family (String) scss $base-font-family: $font-sans-serif; Set the body font family. $base-font-size (Number) scss $base-font-size: 16 !default; Set the base (root) font size for the project. This should be unitless! Used By @function rem() $base-line-height (Number) scss $base-line-height: 24 !default; Set the base line height for the project. This value should be unitless and represent the pixel equivalent. $base-font-weight ({Number|String}) scss $base-font-weight: 400 !default; Set the base font weight for the project."},"01-widths.html":{"filename":"01-widths.html","title":"Widths","contents":"$site-width (Number) scss $site-width: 100%; Set the max width of the site $content-width (Number) scss $content-width: 1050px; Set the width of the site’s content $sidebar-width (Number) scss $sidebar-width: 300px; Set the width of the site’s [optional] sidebar $page-content-width (Number) scss $page-content-width: 660px; Set the width of the page content"},"01-z-index.html":{"filename":"01-z-index.html","title":"Z Indeces","contents":"$z-index (Map) scss $z-index: (default: 1); Keep your sanity while managing your z-indeces. Related https://github.com/minamarkham/sassy-starter/blob/master/src/scss/utilities/_config.scss#L39 [external]"},"02-breakpoint.html":{"filename":"02-breakpoint.html","title":"Breakpoint","contents":"@function breakpoint() Get a breakpoint from a map. Parameters & Return $breakpoint: (String) The breakpoint key. $map: $breakpoints (Map) The map containing the breakpoint. @return (Number) The breakpoint value. @error Value passed for $map not found! @error No breakpoint #{inspect($breakpoint)} found!"},"02-color.html":{"filename":"02-color.html","title":"Color","contents":"@function color() Easily grab a color from a map. Parameters & Return $map: (Map) The map containing the color value. $key: (Number|String) The key for the desired value. @return (Color) The desired color. @error #{inspect($map)} map not found! @error No key #{inspect($key)} found in #{$map}! Used By @function primary-color() @function neutral-color() @function success-color() @function warning-color() @function danger-color() @function primary-color() Get a primary color value. Parameters & Return $key: (Number|String) The key for the desired value. $map: $primary-colors (Map) The map containing the color value. @return (Color) The desired color. Requires @function color() @function neutral-color() Get a neutral color value. Parameters & Return $key: (Number|String) The key for the desired value. $map: $neutral-colors (Map) The map containing the color value. @return (Color) The desired color. Requires @function color() @function neutral-color() Get a accent color value. Parameters & Return $key: (Number|String) The key for the desired value. $map: $accent-colors (Map) The map containing the color value. @return (Color) The desired color. Requires @function color() @function success-color() Get a success color value. Parameters & Return $key: (Number|String) The key for the desired value. $map: $success-colors (Map) The map containing the color value. @return (Color) The desired color. Requires @function color() @function warning-color() Get a warning color value. Parameters & Return $key: (Number|String) The key for the desired value. $map: $warning-colors (Map) The map containing the color value. @return (Color) The desired color. Requires @function color() @function danger-color() Get a danger color value. Parameters & Return $key: (Number|String) The key for the desired value. $map: $danger-colors (Map) The map containing the color value. @return (Color) The desired color. Requires @function color() @function tint() Tint a color (add white) by a specified amount. Parameters & Return $color: (Color) The color to tint. $amount: (Number) The amount of white to add. @return (Color) The tinted color. @function tone() Tone a color (add gray) by a specified amount. Parameters & Return $color: (Color) The color to tone. $amount: (Number) The amount of gray to add. $gray: #808080 (Color) The gray to mix. @return (Color) The toned color. Used By @mixin button() @mixin button-outline() @function shade() Shade a color (add black) by a specified amount. Parameters & Return $color: (Color) The color to shade. $amount: (Number) The amount of black to add. @return (Color) The shaded color. @function luminance() Calculate the luminance of a given color. Parameters & Return $color: (Color) The color to check. @return (Number) The color’s luminance. Related https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests [external] Used By @function calculate-contrast() @function calculate-contrast() Calculate the contrast between two colors. Parameters & Return $color1: (Color) The first color to check. $color2: (Color) The second color to check. @return (Number) The contrast ratio between the two colors. Related https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests [external] Requires @function luminance() Used By @function contrast() @function contrast() Chooses the color with the best contrast for the base. Parameters & Return $base-color: (Color) The color against which to check. $light: $text-default-light (Color) The light color against which to check. $dark: $text-default-dark (Color) The dark color against which to check. @return (Color) The color with the better contrast. Related https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests [external] Requires @function calculate-contrast()"},"02-size.html":{"filename":"02-size.html","title":"Size","contents":"@function strip-unit() Removes unit from length. Parameters & Return $number: (Number) Number from which to remove unit. @return (Number) Unitless number. Related https://css-tricks.com/snippets/sass/strip-unit-function/ [external] Used By @function unitless-calc() @function em() @function rem() @function unitless-calc() Get a unitless number from two numbers. Helpful for calculating line height. Parameters & Return $number: (Number) Numerator for calculation. $base: $base-font-size (Number) Denominator for calculation. @return (Number) Number without units. Requires @function strip-unit() @function em() Convert a pixel value to ems. Pass $base for increased accuracy. Parameters & Return $pxval: (Number) The pixel value to convert. $base: $base-font-size (Number) The pixel equivalent of ancestor font size. @return (Number) The em font size. Related https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/functions/_px-to-em.scss [external] Requires @function strip-unit() Used By @mixin decorative-link() @function rem() Convert a pixel value to rems. Parameters & Return $pxval: (Number) The pixel value to convert. @return (Number) The rem font size. Related https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/functions/_px-to-rem.scss [external] Requires @function strip-unit() $base-font-size (Number)"},"02-z-index.html":{"filename":"02-z-index.html","title":"Z Index","contents":"@function z() Get a z-index from a map. Parameters & Return $index: (String) The index to get. $z: $z-index (Map) The map containing z-indeces. @return (Number) The corresponding z-index value. @error Value passed for $map not found! @error No index #{inspect($index)} found!"},"03-buttons.html":{"filename":"03-buttons.html","title":"Buttons","contents":"@mixin button() Generate button variations quickly and easily. Parameters $background: (Color) The desired background color. $color: contrast($background) (Color) The text color. $background-hover: lighten($background, 10%) (Color) The hover background color. $color-hover: contrast($background-hover) (Color) The hover border (use shorthand). $background-active: $background-hover (Color) The active background. $color-active: contrast($background-active) (Color) The active border. Examples scss Sample Usage .button { @include button($color-primary, $color-white); } css compiled .button { background-color: #2f80e8; border: none; color: #fff; } .button:focus, .button:hover { background-color: #5d9ced; color: #27292b; } .button:disabled { background-color: #5485c3; } .button:active { background-color: #5d9ced; color: #27292b; } html Requires @function tone() @mixin button-outline() Generate outline buttons. Parameters $border: (String) The outline button’s border. $color: (Color) The button’s text color. $border-hover: $border (String) The hover border. $color-hover: darken($color, 10%) (Color) The hover text color. $background-hover: transparent (Color) The hover background color. $border-active: $border-hover (String) The active border. $color-active: $color-hover (Color) The active text color. $background-active: $background-hover (Color) The active background color. Examples scss Sample Usage .button--outline { @include button-outline(2px solid $color-primary, $color-primary, $color-hover: $color-white, $background-hover: $color-primary); } css compiled .button--outline { background-color: transparent; border: 2px solid #2f80e8; color: #2f80e8; } .button--outline:focus, .button--outline:hover { background-color: #2f80e8; border: 2px solid #2f80e8; color: #fff; } .button--outline:disabled { color: #5485c3; } .button--outline:active { background-color: #2f80e8; border: 2px solid #2f80e8; color: #fff; } html Requires @function tone() @mixin button-size() Create buttons of different sizes. Parameters $font-size: (Number) The button font size. $line-height: unitless-calc($base-line-height, $base-font-size) (Number) The text line height. $padding: (Number(s)) The space around text. Examples scss Sample Usage .button--xl { @include button-size(2.25rem); } css compiled .button--xl { font-size: 2.25rem; line-height: 1.5; padding: 0.5em 1em; } html @mixin button-style() Create different styles of button. Parameters & Return $string: 'rounded' (String) The type of button to produce. @error #{inspect($string)} button type does not exist! Examples scss Sample Usage .button--pill { @include button-style('pill'); } css compiled .button--pill { border-radius: 50px; } html To-do List Consider adding more button styles see Unicorn Buttons & these buttons are good inspiration. @mixin hamburger-button() Create a hamburger menu button. JavaScript interaction needs to be hooked up separately. Parameters $bar-color: (Color) The color of the hamburger bars. $bar-hover: (Color) The color of the bars when the button is hovered. $bar-height: (Number) The height of the bars. $bar-width: (Number) The width of the bars. $bar-selector: '.bars' (String) The selector used within the button to create the bars. Examples scss Sample Usage .button--hamburger { @include hamburger-button($color-primary); } css compiled .button--hamburger { background-color: transparent; max-width: 20px; padding: 7.5px 10px; position: relative; text-indent: -9999em; } .button--hamburger .bars, .button--hamburger .bars:after, .button--hamburger .bars:before { background-color: #2f80e8; display: block; height: 3px; left: 0; margin: 0 auto; position: absolute; right: 0; transition: all 0.3s ease-in-out; width: 20px; } .button--hamburger .bars:after, .button--hamburger .bars:before { content: ''; } .button--hamburger .bars:before { top: -6px; } .button--hamburger .bars { top: 50%; transform: translateY(-50%); } .button--hamburger .bars:after { bottom: -6px; } .button--hamburger:hover { background-color: transparent; } .button--hamburger:hover .bars, .button--hamburger:hover .bars:after, .button--hamburger:hover .bars:before { background-color: #2f80e8; } html @mixin hamburger-button-active() Transforms the hamburger button into an X. Parameters $bar-color: (Color) The active color of bars. $bar-height: (Number) The height of the bars. $bar-selector: '.bars' (String) The selector used within the button to create the bars. Examples scss Sample Usage .button--hamburger { @include hamburger-button($color-primary); &--is-active { @include hamburger-button-active($color-accent); } } css compiled .button--hamburger { background-color: transparent; max-width: 20px; padding: 7.5px 10px; position: relative; text-indent: -9999em; } .button--hamburger .bars, .button--hamburger .bars:after, .button--hamburger .bars:before { background-color: #2f80e8; display: block; height: 3px; left: 0; margin: 0 auto; position: absolute; right: 0; transition: all 0.3s ease-in-out; width: 20px; } .button--hamburger .bars:after, .button--hamburger .bars:before { content: ''; } .button--hamburger .bars:before { top: -6px; } .button--hamburger .bars { top: 50%; transform: translateY(-50%); } .button--hamburger .bars:after { bottom: -6px; } .button--hamburger:hover { background-color: transparent; } .button--hamburger:hover .bars, .button--hamburger:hover .bars:after, .button--hamburger:hover .bars:before { background-color: #2f80e8; } .button--hamburger--is-active:hover .bars, .button--hamburger--is-active:focus .bars, .button--hamburger--is-active:active .bars { background-color: transparent; } .button--hamburger--is-active .bars { background-color: transparent; } .button--hamburger--is-active .bars:after, .button--hamburger--is-active .bars:before { background-color: #e8982f; top: calc(50% - 3px / 2); transform: translateY(-50%); } .button--hamburger--is-active .bars:before { transform: rotate(45deg); } .button--hamburger--is-active .bars:after { transform: rotate(-45deg); } html @mixin close-button() Create a close button. Parameters $x-color: (Color) The desired X color. $x-size: 1rem (Number) The font-size of the X. $background: transparent (Color) The desired background color. $hover-x-color: $x-color (Color) The hover X color. $background-hover: $background (Color) The hover background color. $active-x-color: $hover-x-color (Color) The active X color. $active-background: $hover-background (Color) The active background. Examples scss Sample Usage .button--close { @include close-button($color-primary, transparent); } css compiled .button--close { background-color: transparent; transition: background-color 0.3s ease-in-out; } .button--close:after { color: #2f80e8; content: '\\00D7'; transition: color 0.3s ease-in-out; } .button--close:focus, .button--close:hover { background-color: transparent; } .button--close:focus:after, .button--close:hover:after { color: #2f80e8; } .button--close:active { background-color: transparent; } .button--close:active:after { color: #2f80e8; } html @mixin plus-minus-button() Creates a Plus-Minus button. Requires JavaScript be implemented separately. Parameters & Return $bar-color: (Color) The color of the plus-minus bars. $bar-height: (Number) The height of the bars. $bar-width: (Number) The width of the bars. $background: transparent (Color) The button background. $include-active: false (Boolean) Determines whether to include styling for the active state. Allows different classes or modifiers to be used. $active-selector: null (String) The name of the selector to trigger the active state. Can include &. @error $include-active requires $active-selector to be specified. Examples scss Sample Usage .button--plus-minus { @include plus-minus-button($color-primary); } css compiled .button--plus-minus { background-color: transparent; padding: 10px; position: relative; } .button--plus-minus:after, .button--plus-minus:before { background-color: #2f80e8; bottom: 0; content: ''; display: block; height: 3px; left: 0; margin: auto; position: absolute; right: 0; top: 0; transition: all 0.3s ease-in-out; width: 20px; } .button--plus-minus:after { transform: rotate(90deg); } .button--plus-minus:focus, .button--plus-minus:hover { background-color: transparent; } .button--plus-minus:focus:after, .button--plus-minus:focus:before, .button--plus-minus:hover:after, .button--plus-minus:hover:before { color: #2f80e8; } .button--plus-minus:active { background-color: transparent; } .button--plus-minus:active:after, .button--plus-minus:active:before { color: #2f80e8; } html Requires @mixin plus-minus-button-active() @mixin plus-minus-button-active() Styles the active (minus) state of the Plus-Minus button. Parameters $active-bar-color: (Color) The color of the minus. $active-background: transparent (Color) The button background color. Examples scss Sample Usage .button--plus-minus { @include plus-minus-button($color-primary); &--is-active { @include plus-minus-button-active($color-primary); } } css compiled .button--plus-minus { background-color: transparent; padding: 10px; position: relative; } .button--plus-minus:after, .button--plus-minus:before { background-color: #2f80e8; bottom: 0; content: ''; display: block; height: 3px; left: 0; margin: auto; position: absolute; right: 0; top: 0; transition: all 0.3s ease-in-out; width: 20px; } .button--plus-minus:after { transform: rotate(90deg); } .button--plus-minus:focus, .button--plus-minus:hover { background-color: transparent; } .button--plus-minus:focus:after, .button--plus-minus:focus:before, .button--plus-minus:hover:after, .button--plus-minus:hover:before { color: #2f80e8; } .button--plus-minus:active { background-color: transparent; } .button--plus-minus:active:after, .button--plus-minus:active:before { color: #2f80e8; } .button--plus-minus--is-active { background-color: transparent; } .button--plus-minus--is-active:after, .button--plus-minus--is-active:before { background-color: #2f80e8; } .button--plus-minus--is-active:after { transform: rotate(180deg); } html Used By @mixin plus-minus-button()"},"03-colors.html":{"filename":"03-colors.html","title":"Colors","contents":"@mixin colors() Create color classes by looping through a color Sass map. Parameters $color-map: $theme-colors (Map) The main theme color map (set in _config.scss). $include-bg: true (Boolean) Whether to create background-color classes. $include-text: true (Boolean) Whether to create text / color classes. $include-fill: false (Boolean) Whether to include icon / fill color classes. $include-wp: false (Boolean) Whether to include color classes for the WordPress editor."},"03-links.html":{"filename":"03-links.html","title":"Links","contents":"@mixin link() Add color for default, focus, hover, and active states. Parameters $color: (Color) The default color. $color-hover: (Color) The hover color. $color-active: $color-hover (Color) The active color. $color-visited: $color (Color) The visited color. Examples scss Sample Usage a { @include link($color-primary, $color-accent); } css compiled a { color: #2f80e8; } a:visited { color: #2f80e8; } a:focus, a:hover { color: #e8982f; } a:active { color: #e8982f; } html Read More Used By @mixin decorative-link() @mixin decorative-link() Create decorative links with the :after pseudo element. Parameters $content: '\\2192' (String) The content of the :after pseudo element. $color: currentColor (Color) The default main link color. $color-hover: currentColor (Color) The hover main link color. $color-active: $color-hover (Color) The active main link color. $color-visited: $color (Color) The visited main link color. $after-color: $color (Color) The :after default color. $after-color-hover: $after-color (Color) The hover :after color. $after-color-active: $after-color (Color) The active :after color. $after-color-visited: $after-color (Color) The visited :after color. Examples scss Sample Usage .link--fancy { @include decorative-link($content: '\\00BB', $after-color: $color-accent); } css compiled @charset \"UTF-8\"; .link--fancy:after { color: #e8982f; content: \"»\"; display: inline-block; margin-left: 0.3125em; transition: transform 0.3s ease-in-out; } .link--fancy:visited:after { color: #e8982f; } .link--fancy:focus:after, .link--fancy:hover:after { color: #e8982f; transform: translateX(0.625em); } .link--fancy:active:after { color: #e8982f; } html Read More Requires @mixin link() @function em()"},"03-lists.html":{"filename":"03-lists.html","title":"Lists","contents":"@mixin list-reset() Removes list delimiters, margin, and padding from ul or ol elements. Examples scss Usage .list-reset { @include list-reset; } css compiled .list-reset { list-style: none; margin: 0; padding: 0; } html
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Nunc dignissim risus id metus.
Cras ornare tristique elit.
Vivamus vestibulum ntulla nec ante.
Requires @mixin list-reset()"},"03-media-queries.html":{"filename":"03-media-queries.html","title":"Media Queries","contents":"@mixin mq-min() Create a min-width media query. Parameters & Return $min: (Number) The length to be used. @error $min is not a length unit. Example scss Usage .block { display: none; @include mq-min(breakpoint(desktop)) { display: block; } } css compiled .block { display: none; } @media only screen and (min-width: 1200px) { .block { display: block; } } Used By @mixin mq() @mixin mq-max() Create a max-width media query. max-width subtracts 1 unit to avoid conflicts with min-width queries. Parameters & Return $min: (Number) The length to be used. @error $max is not a length unit. Example scss Usage .block { display: none; @include mq-max(breakpoint(desktop)) { display: block; } } css compiled .block { display: none; } @media only screen and (max-width: 1199px) { .block { display: block; } } Used By @mixin mq() @mixin mq() Create a media query range (between min-width and max-width). max-width subtracts 1 unit to avoid conflicts with min-width queries. Parameters & Return $min: (Number) The minimum breakpoint. $max: (Number) The maximum breakpoint. @error One of the parameters is not a length unit. Example scss Usage .block { @include mq(breakpoint(tablet-portrait), breakpoint(tablet-landscape)) { display: block; } } css compiled @media only screen and (min-width: 600px) and (max-width: 899px) { .block { display: block; } } Requires @mixin mq-max() @mixin mq-min()"},"03-positioning.html":{"filename":"03-positioning.html","title":"Positioning","contents":"@mixin vertical-center() Vertically centers an item with absolute positioning. Make sure parent is position: relative. Examples scss Sample Usage .box { position: relative; } .box__item--vertical-center { @include vertical-center; } css compiled .box { position: relative; } .box__item--vertical-center { position: absolute; top: 50%; transform: translateY(-50%); } html
@mixin horizontal-center() Horizontally centers an item with absolute positioning. Make sure parent is position: relative. Examples scss Sample Usage .box { position: relative; } .box__item--horizontal-center { @include horizontal-center; } css compiled .box { position: relative; } .box__item--horizontal-center { left: 50%; position: absolute; transform: translateX(-50%); } html
@mixin absolute-center() Horizontally and vertically centers an item with absolute positioning. Make sure parent is position: relative. Examples scss Sample Usage .box { position: relative; } .box__item--absolute-center { @include absolute-center; } css compiled .box { position: relative; } .box__item--absolute-center { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } html
Related http://nicolasgallagher.com/micro-clearfix-hack/ [external] @mixin full-width() Extend an element to the edge of the viewport when the parent has a fixed width. Examples scss Usage .full-width { @include full-width; } css compiled .full-width { left: 50%; margin-left: -50vw; margin-right: -50vw; position: relative; right: 50%; width: 100vw; } html
Related https://css-tricks.com/full-width-containers-limited-width-parents/ [external] @mixin screen-reader-text() Visually hides text, but text is still available for screen readers. Text is not focusable. Examples scss Usage .screen-reader-text { @include screen-reader-text; } css compiled .screen-reader-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } html @mixin screen-reader-text-focusable() Visually hides text, but it’s still available for screen readers, and is still focusable. Examples scss Usage .screen-reader-text { @include screen-reader-text-focusable; } css compiled .screen-reader-text:focus { border: auto; clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } html @mixin image-as-background() Centers a background image, and makes sure it covers its container. Examples scss Usage .image-as-background { @include image-as-background } css compiled .image-as-background { background-position: center; background-size: cover; } html @mixin size() Declare the element height and width. Parameters $width: (Number) The element width. $height: $width (Number) The element height. Examples scss Usage .size { @include size(rem(150), rem(50)); } css compiled .size { height: 3.125rem; width: 9.375rem; } html scss Usage .size--one-parameter { @include size(50px); } css compiled .size--one-parameter { height: 50px; width: 50px; } html Used By @mixin aspect-ratio() @mixin aspect-ratio() Set an aspect ratio on an element. Parameters $width: (Number) The width ratio, this value should be unitless. $height: (Number) The height ratio, this value should be unitless. $el-width: (Number) The element width. Examples scss Usage for 3:2 ratio .ratio { @include aspect-ratio(3, 2, 50%); } css compiled .ratio { height: 0; width: 50%; padding-top: 33.33333%; } html scss Usage for 16:9 ratio .ratio--16-9 { @include aspect-ratio(16, 9, 50%); } css compiled .ratio--16-9 { height: 0; width: 50%; padding-top: 28.125%; } html Requires @mixin size()"},"index.html":{"filename":"index.html","title":"aurora-utilities Documentation","contents":"View Project View Source Aurora Utilities Sass and JavaScript utilities for all your front end projects. Features This package is collection of helpful Sass and JavaScript utilities that keep you focused on building new features instead of recreating the wheel over and over. The Sass and JavaScript included in this package only output what you use, so there is no need to worry adding bloat to your project. Sass Aurora Utilities comes bundled with a set of helpful Sass functions and mixins that makes writing styles a breeze. JavaScript Coming soon Installation Add Aurora Utilities as a project dependency: npm install --save-dev aurora-utilities Sass Usage For Sass use, you’ll need to add Aurora Utilities to your node-sass includePaths: Webpack example using sass-loader: { loader: 'sass-loader', options: { includePaths: [ 'node_modules/aurora-utilities/sass', 'node_modules/sanitize.scss' ], sourceMap: true } } Grunt example using grunt-sass: sass: { options: { outputStyle: 'expanded', sourceMap: true, includePaths: [ 'node_modules/aurora-utilities/sass', 'node_modules/sanitize.scss' ] } } Gulp example using gulp-sass: gulp.task('sass', function() { return gulp. .pipe(sass( { includePaths: [ 'node_modules/aurora-utilities/sass', 'node_modules/sanitize.scss' ] })) }); Import aurora-utilities into your main sass file: @import 'aurora-utilities'; Use the bundled functions and mixins as required: .link { @include link($primary, $accent); @include decorative-link('\\u007'); }"}}}