ds2-core/src/scss/scaffolding.scss

/*
 *    Variables
 */

$font-heading: elvetica, Arial, sans-serif;
$font-body: Helvetica, Arial, sans-serif;
$font-size: 14pt;

$tooltip-dark-allow: false;

// ----------------------------------------------------------

@use 'sass:math';


// We recommend explicitly using the underscore when referring to pattern scss 
// as you may have also created a version that compiles to css to display in 
// your pattern. 
@import "core";

@import "../pg/patterns/components/sticky-note-core/_sticky-note";
@import "../pg/patterns/components/tooltip-core/_tooltip";
@import "../pg/patterns/components/switch-core/_switch";

@import "../pg/patterns/layouts/breakpoints-core/_breakpoints";
@import "../pg/patterns/layouts/header-core/_header";
@import "../pg/patterns/layouts/tabs-core/_tabs"; 

@import "../pg/patterns/status-core/_status";

* {
	box-sizing: border-box;
}

html {
	font-family: $font-body;
	font-size: $font-size;
	@include break(-md) {
		font-size: calc($font-size + 2pt);
	}
}

@include core-colour-samples;

@include tooltip;
@include sticky-note;
@include status;

body {
	margin: 0;
	padding: 0;
	a.skip {
		position: absolute;
		left: -9999px;
	}

	.container {

		display: grid;
		grid-template-columns: auto repeat(2, 22rem) auto;
		margin: 0 auto;
		width: 100vw;

		@include header;

		nav {
			background-color: var(--colour-blue);
			grid-column: 2 / 4;
			display: none;

			ul {
				margin: 1rem 0;

				li {
					display: inline-block;
					margin-right: 1rem;
				}
			}
			a {
				color: var(--colour-white);
				text-decoration: none;
			}
			@include break(md-) {
				display: initial;
			}
		}


		p.deprecated-switch {
			grid-column: 2 / 4;
			grid-row: 3;
			text-align: right;
			@include switch;

		}
		main {
			display: block;
			grid-column: 1 / -1;
			grid-row: 4;
			padding: 0 1rem;

			@include break(-md) {
				grid-row: 3;
				padding: 0;
			}

			@supports(grid-area: auto) {
				display: grid;
				grid-template-columns: 1rem repeat(2, auto) 1rem;
				@include break(md-) {
					grid-template-columns: auto repeat(2, 22rem) auto;
				}
			}

			h1, h2, h3, h4, h5, h6 {
				grid-column: 2 / 4;
			}

			article {
				grid-column: 2 / 4;
				margin-top: 2rem;
				min-width: 0;

				&.status-deprecated {
					display: none;
				}

				@include tabs {
					pre {
						background-color: var(--colour-black-5);
						font-size: .8rem;
						code:not(.inline) {
							display: block;
							width: 100%;
						}
					}
				};
				p.switch {
					align-items: center;
					display: grid;
					grid-gap: .5rem;
					grid-template-columns: max-content auto;
					@include switch;
				}				
			}
		}
	}
}

// keep your prism modules
@import "../../node_modules/prismjs/themes/prism";
@import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
@import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";