0-readme edit

<!-- components/0-readme/site-variables.php --> <div class="wm-ad-docs"> <p> A mixture of SASS variables, CSS variables, and <a href="https://sass-lang.com/documentation/values/maps" target="_blank">SASS maps</a> are used throughout the site. <br> View variables in the <a href="/atomic-docs/wm/atomic-core/?cat=3-variables">3-variables folder</a>. <br> Mixin and function information can be found in the <a href="/atomic-docs/wm/atomic-core/?cat=2-mixins-and-functions">2-mixins-and-functions</a> folder. </p> <h5>SASS variables and maps</h5> <dl> <dt>border variables</dt> <ul> <li>variables for the default border style</li> </ul> <dt>breakpoints map & variables</dt> <dd> <ul> <li><code>$breakpoints</code> map: list of the site's most used breakpoints</li> <li>user-friendly variables that utilize the breakpoint map to spell out which breakpoint it is (mobile, tablet, etc.)</li> </ul> </dd> <dt>color map, color theme maps, & variables</dt> <dd> <ul> <li>Sass variables of the W&M brand colors in equal light to dark values. This enables easy text contrast checks as the numbers have to be at least 400 apart to pass the check.</li> <li><code>$colors</code> map: uses the color variables and outputs colors using categories based on primary, secondary, etc.</li> <li>variables of colors for specific elements in the site</li> <li><code>$color-themes</code> map: lists colors for all elements in each theme.</li> <li><code>$button-color-themes</code> map: lists colors for all elements in each button theme.</li> </ul> </dd> <dt>html element style variables</dt> <dd> <ul> <li>variables for heading and listing font styles (should probably move this into the font file</li> </ul> </dd> <dt>font maps & variables</dt> <dd> <ul> <li>variables for default text size and line heights</li> <li><code>$fonts</code> map: contains the font families and font weights</li> </ul> </dd> <dt>spacing map & variables</dt> <dd> <ul> <li><code>$kspaces</code> (Karls' spaces) map: list of standard sizes used frequently in the site</li> <li>variables for various element margins</li> </ul> </dd> <dt>width & height variables</dt> <dd> <ul> <li>size variables for page structure elements (e.g. content are, page nav, etc.)</li> </ul> </dd> <dt>z-index variables</dt> <dd> <ul> <li>variables for things that use z-index. Not used as consistently as I would like.</li> </dl> <h5>SASS functions</h5> <dl> <dt>Colors</dt> <dd>outputs color from color map <code>var(--color-link-base)</code></dd> <dt>Fonts</dt> <dd>outputs font from font map <code>font(text-sans)</code></dd> <dt>px-to-rm</dt> <dd>converts pixels to rem <code>toRem(30)</code></dd> <dt>Spacing</dt> <dd>outputs value from spacing map: <code>kspace(sm)</code></dd> </dl> <h5>SASS mixins</h5> <dl> <dt>banner heights</dt> <dd>outputs heights for the various banner sizes using SASS variables; also outputs the banner gradient</dd> <dt>breakpoints</dt> <dd>outputs a media query using breakpoints map. Can be used anywhere in the style sheet (it does not need to go at the bottom, it can go in the element styles)</dd> <dt>button-styles</dt> <dd>outputs styles for the various buttons</dd> <dt></dt> <dd>[[ remove center center ]]</dd> <dt>color-theme</dt> <dd>outputs CSS variables for each color theme using the color theme maps</dd> <dt>fluid-anything</dt> <dd>outputs a fluid value (with limited success on min and max values)</dd> <dt>link-styles</dt> <dd>outputs the various link styles</dd> <dt>menu-open-closed-styles</dt> <dd>outputs the mega menu styles for the open/closed states</dd> <dt>right arrow</dt> <dd>outputs a customizable right arrow</dd> </dl> </div>