Initial checkin of templ skeleton

HTML based on Jason Knight HTML template code

web/static/css/fonts.css

@@ -0,0 +1,51 @@
+@font-face {
+	font-display:swap;
+	font-family:"flowtext";
+	font-style:normal;
+	font-weight:normal;
+	src:
+		url("fonts/poppins-western.woff2") format("woff2"),
+		url("fonts/poppins-western.woff") format("woff");
+}
+
+@font-face {
+	font-display:swap;
+	font-family:"flowtext";
+	font-style:normal;
+	font-weight:bold;
+	src:
+		url("fonts/poppins-western-bold.woff2") format("woff2"),
+		url("fonts/poppins-western-bold.woff") format("woff");
+}
+
+@font-face {
+	font-display:swap;
+	font-family:interface;
+	font-style:normal;
+	font-weight:normal;
+	src:
+		url("fonts/interface-Regular.woff2") format("woff2"),
+		url("fonts/interface-Regular.woff") format("woff");
+}
+
+[class*="icon_"]:not(.iconAfter):before,
+[class*="icon_"].iconAfter:after {
+	content:var(--iconChar);
+	display:inline-block;
+	vertical-align:middle;
+	position:relative;
+	font-family:interface;
+	font-weight:normal;
+	line-height:1;
+}
+
+.icon_x             { --iconChar:"\E61B"; }
+.icon_close         { --iconChar:"\F00D"; }
+.icon_linkedIn      { --iconChar:"\F08C"; }
+.icon_facebook      { --iconChar:"\F09A"; }
+.icon_medium        { --iconChar:"\F23A"; }
+.icon_accessibility { --iconChar:"\F368"; }
+.icon_web           { --iconChar:"\F57D"; }
+.icon_efficiency    { --iconChar:"\F625"; }
+.icon_workplace     { --iconChar:"\F7D9"; }
+.icon_caratUp       { --iconChar:"\F102"; }

web/static/css/site.print.css

@@ -0,0 +1,138 @@
+.action,
+#backToTop,
+#mainMenu,
+.modal,
+.optional,
+#socialMedia {
+	display:none;
+}
+
+figure, blockquote {
+	padding:0;
+	margin:0;
+}
+
+body, button, input, table, textarea, select {
+	font-size:12pt;
+	line-height:1.75;
+	font-family:flowtext,sans-serif;
+}
+
+body {
+	max-width:7.5in;
+	margin:0 auto;
+}
+
+a {
+	color:#000;
+	text-decoration:none;
+}
+
+header {
+	margin-bottom:1rem;
+}
+
+p {
+	margin:0 0 1rem;
+}
+
+li {
+  margin-bottom:0.5rem;
+}
+
+h2 {
+	font-size:24pt;
+	font-weight:normal;
+	margin:0 0 0.5rem;
+}
+
+h1,
+.hero h2 {
+	margin:0;
+	line-height:1.2;
+}
+
+h3 {
+	font-size:16pt;
+	font-weight:normal;
+	margin:0;
+}
+
+main > section {
+	padding-bottom:1.75rem;
+}
+
+main > section header p {
+  font-size:14pt;
+}
+
+.hero header p {
+	margin-top:0;
+}
+
+.hasPlate,
+.cards {
+	display:flex;
+	flex-wrap:wrap;
+	justify-content:center;
+	gap:1rem 2rem;
+}
+
+.hasPlate > figure {
+	flex-grow:0;
+	width:min(12rem, 100%);
+	text-align:center;
+}
+
+.hasPlate > figure img {
+	width:100%;
+	height:auto;
+	border-radius:1rem;
+}
+
+.hasPlate > div {
+	width:1%;
+	flex-grow:1;
+}
+
+.cards > * {
+	width:calc(50% - 1rem);
+	break-inside:avoid;
+}
+
+.cards > * > *:last-child {
+  margin-bottom:0;
+  padding-bottom:0;
+}
+
+#whatIDo h3[class*="icon_"]:before {
+	font-size:36pt;
+	margin-right:0.5rem;
+}
+
+#testimonials figcaption {
+  font-size:14pt;
+  margin-bottom:0.5rem;
+}
+
+#testimonials figcaption img {
+  display:inline-block;
+  vertical-align:middle;
+  width:3rem;
+  height:3rem;
+  margin-right:0.25rem;
+  border-radius:50%;
+}
+
+#whatIDo ul,
+#testimonials blockquote {
+  font-size:10pt;
+}
+
+.note {
+  text-align:center;
+}
+
+#fauxBody > footer {
+  text-align:center;
+}

web/static/css/site.screen.css

@@ -0,0 +1,763 @@
+:root {
+
+	--flowColor:#024;
+	--flowBg:#FFF;
+	--flowAltBg:#CDF;
+	--flowAltBorder:0.0625rem solid #04F;
+	--flowAnchorNormal:#04F;
+	--flowAnchorVisited:#000;
+	--flowAnchorHover:#069;
+	--flowMarker:#080;
+	
+	--flyoutColor:#36C;
+	--flyoutBgColor:#ACE;
+	
+	--chromeColor:#000;
+	--chromeBg:var(--flowBg);
+	--chromeAnchorNormal:var(--chromeColor);
+	--chromeAnchorVisited:var(--chromeColor);
+	--chromeAnchorHover:#369;
+	
+	--mainHeadingColor:#356;
+	
+	--modalOuterBg:#ACEC;
+	--modalOuterShadow:inset 0 0 16em #68A;
+	--modalInnerBg:#DEF;
+	--modalInputBg:#FFF;
+	--modalInputBorder:0.125rem solid #048;
+	--modalHeadingBg:#ACE;
+	--modalButtonColor:#FFF;
+	--modalButtonBg:#048;
+	--modalShadow:0.5rem 0.5rem 2rem #0247;
+	
+	--actionColor:#039;
+	--actionBg:#FFF;
+	--actionBorder:0.125rem solid var(--actionColor);
+	--actionHoverColor:#FFF;
+	--actionHoverBg:#05A;
+	
+	--heroColor:#FFF;
+	--heroBgColor:#05A;
+	--heroBg:linear-gradient(20deg, #05A, #012);
+	--heroTextShadow:
+		0 0 2rem #000,
+		0.25rem 0.25rem 1rem #000;
+	
+	--heroActionColor:#FFF;
+	--heroActionBg:transparent;
+	--heroActionHoverColor:#036;
+	--heroActionHoverBg:#8CF;
+
+	--borderColor:#048;
+	--standardBorder:0.125rem solid var(--borderColor);
+	
+	
+	--horzPad:clamp(0.5rem, 4vw, 2rem);
+	--vertPad:clamp(1rem, min(8vw, 10vh), 4rem);
+	--standardPad:var(--vertPad) var(--horzPad);
+	--chromePad:1rem var(--horzPad);
+	--heroPad:clamp(1rem, 3vh, 6rem) var(--horzPad);
+	
+}
+
+html,body,div,p,h1,h2,h3,h4,h5,h6,figure,
+ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
+table,tr,td,th,address,blockquote,img {
+	margin:0;
+	padding:0;
+}
+
+img, fieldset {
+	border:none;
+}
+
+blockquote, q {
+	quotes:none;
+}
+
+body *, *:after, *:before {
+	box-sizing:border-box;
+}
+
+legend {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	display:block;
+}
+
+button, label, summary {
+	cursor:pointer;
+}
+
+html, body {
+	height:100%;
+}
+
+body, button, input, table, textarea, select {
+	font-size:1rem;
+	line-height:1.75;
+	font-family:flowtext,sans-serif;
+	color:var(--flowColor);
+	background:var(--flowBg);
+}
+
+a {
+	color:var(--flowAnchorNormal);
+	transition:color 0.3s, background 0.3s, scale 0.3s;
+}
+
+a:visited {
+	color:var(--flowAnchorVisited);
+}
+
+a:active,
+a:focus,
+a:hover {
+	color:var(--flowAnchorHover);
+}
+
+input,
+select,
+textarea {
+	padding:0.25rem 0.5rem;
+}
+
+#fauxBody, 
+.modal,
+.modal > .modalClose {
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	overflow:auto;
+	scroll-behavior:smooth;
+}
+
+.modal,
+#top,
+.cards, 
+.hasPlate,
+#fauxBody > footer {
+	position:relative;
+	display:flex;
+	flex-wrap:wrap;
+	align-items:center;
+	justify-content:center;
+}
+
+.modalClose span,
+.mainMenuOpen span,
+#fauxBody > footer h2.optional {
+	position:fixed;
+	right:999em;
+	top:0;
+	opacity:0;
+}
+
+.modal {
+	left:-200vw;
+	background:var(--modalOuterBg);
+	box-shadow:var(--modalOuterShadow);
+	opacity:0;
+	transition:left 0s 0.5s, opacity 0.5s;
+}
+
+.modal:target {
+	left:0;
+	opacity:1;
+	transition:opacity 0.5s;
+}
+
+.modal > div {
+	/*
+		depth sort over outer .modalClose
+	*/
+	position:relative;
+	/*
+		if you don't auto margin, scrolling at small screen heights is messed.
+	*/
+	margin:auto 1rem;
+	overflow:hidden;
+	background:var(--modalInnerBg);
+	color:var(--flowColor);
+	box-shadow:var(--modalShadow);
+	border:var(--standardBorder);
+	border-radius:1rem;
+	scale:0;
+	transition:scale 0.5s;
+}
+	
+.modal:target > div {
+	scale:1;
+}
+
+.modal .modalClose,
+#mainMenu .modalClose {
+	position:absolute;
+	text-decoration:none;
+}
+
+.modal:target .modalClose {
+	display:block;
+}
+
+.modal > * > .modalClose,
+#mainMenu > * > .modalClose {
+	top:0.5rem;
+	right:1rem;
+	font-size:2rem;
+	line-height:1;
+	color:var(--flowColor);
+}
+
+.modal > * > .modalClose:focus,
+.modal > * > .modalClose:hover {
+	scale:1.2;
+}
+
+.modal h2 {
+	font-size:1.25rem;
+	padding:0.5rem 4rem 0.5rem 1rem;
+	margin-bottom:1rem;
+	background:var(--modalHeadingBg);
+	border-bottom:var(--standardBorder);
+}
+
+.modal h2 ~ * {
+	margin:1rem;
+}
+
+#top,
+#fauxBody > footer {
+	max-width:72rem;
+	margin:0 auto;
+	padding:var(--chromePad);
+	background:var(--chromeBgColor);
+	color:var(--chromeColor);
+}
+
+#fauxBody > footer {
+	z-index:800;
+}
+
+#fauxBody > footer p span {
+	display:inline-block;
+}
+
+#top {
+	justify-content:space-between;
+	gap:2rem;
+	z-index:900;
+}
+
+#top a,
+#fauxBody > footer a {
+	color:var(--chromeAnchorNormal);
+	text-decoration:none;
+}
+
+#top > a:first-child {
+	display:block;
+	overflow:hidden;
+	flex-grow:0;
+	font-size:0.875rem;
+	line-height:1.1;
+}
+
+h1 {
+	font-size:2rem;
+	text-transform:uppercase;
+	transform-origin:center left;
+	letter-spacing:0.125rem;
+	scale:1.15 1;
+	color:var(--mainHeadingColor);
+}
+
+#mainMenu {
+	flex-grow:1;
+	text-align:right;
+}
+
+#mainMenu li {
+	list-style:none;
+	display:inline;
+	margin-right:1.5rem;
+}
+
+#mainMenu li a {
+	display:inline-block;
+	font-size:1.125rem;
+}
+
+#mainMenu li a:focus,
+#mainMenu li a:hover,
+.socialMenu a:focus,
+.socialMenu a:hover,
+.mainMenuOpen:focus,
+.mainMenuOpen:hover {
+	color:var(--chromeAnchorHover);
+	scale:1.2;
+}
+
+#fauxBody > footer > section:first-child {
+	width:1%;
+	flex-grow:1;
+}
+
+.socialMenu {
+	list-style:none;
+	display:flex;
+	gap:1.5rem;
+}
+
+.socialMenu a {
+	position:relative;
+	display:block;
+}
+
+.socialMenu a:before {
+	font-size:2.5rem;
+	transition:color 0.3s, scale 0.3s;
+}
+
+.socialMenu a:focus:before,
+.socialMenu a:hover:before {
+	scale:1.375;
+}
+
+.socialMenu a span,
+#backToTop span {
+	position:absolute;
+	font-size:0.875rem;
+	color:var(--flyoutColor);
+	background:var(--flyoutBgColor);
+	border:0.125rem solid var(--flyoutColor);
+}
+
+.socialMenu a span {
+	bottom:3.5rem;
+	right:999em;
+	padding:0.25rem 0.75rem;
+	white-space:nowrap;
+	border-radius:1rem;
+	transition:right 0s 0.3s, opacity 0.3s;
+	opacity:0;
+}
+
+.socialMenu a span:after {
+	content:"";
+	position:absolute;
+	bottom:-0.5625rem;
+	right:1rem;
+	width:1rem;
+	height:1rem;
+	background:var(--flyoutBgColor);
+	border:solid var(--flyoutColor);
+	border-width:0 0.125rem 0.125rem 0;
+	rotate:45deg;
+}
+
+.socialMenu a:focus span,
+.socialMenu a:hover span {
+	right:-0.5rem;
+	opacity:1;
+	transition:opacity 0.3s;
+}
+
+main > section:not(.hero),
+.hero > div,
+.hasCards > header,
+.hasPlate {
+	max-width:56rem;
+	margin:0 auto;
+}
+
+main > section:not(.hero),
+.hero > div,
+.hasPlate {
+	padding:var(--standardPad);
+}
+
+.hasPlate {
+	padding-top:0;
+}
+
+main > section:not(.hero) {
+	border-bottom:var(--flowAltBorder);
+}
+
+main > section > header:not(.hasPlate) {
+	text-align:center;
+}
+
+main > section:not(.hero):nth-child(odd) {
+	background:var(--flowAltBg);
+}
+
+main h2 {
+	font-size:clamp(1.75rem, 5vw, 2.5rem);
+	font-weight:normal;
+}
+
+main h2 span {
+	display:inline-block; /* soft keep-together */
+}
+
+main h3 {
+	font-size:clamp(1.25rem, 3vw, 2rem);
+	font-weight:normal;
+}
+
+main p {
+	max-width:40em;
+	margin:1em 0;
+}
+
+main section > header p {
+	font-size:1.125rem;
+}
+
+main > section > header:not(.hasPlate) p {
+	margin:1em auto;
+}
+
+main > section.hasCards {
+	max-width:100%;
+}
+
+.cards, 
+.hasPlate {
+	gap:2rem;
+}
+
+.cards {
+	margin:2rem auto 0;
+	align-items:stretch;
+	gap:2rem 4rem;
+}
+
+#whatIDo .cards {
+	max-width:68em;
+}
+
+.cards > * {
+	flex-grow:1;
+	width:1%;
+	min-width:min(20rem, 100%);
+	max-width:24rem;
+}
+
+#whatIDo .cards > * {
+	min-width:min(24rem, 100%);
+	max-width:40rem;
+}
+
+.cards h3[class*="icon_"]:before {
+	font-size:4rem;
+	margin-right:1rem;
+}
+
+.cards li {
+	list-style:none;
+	position:Relative;
+	margin-bottom:0.5rem;
+	padding-left:2rem;
+}
+
+.cards li:before {
+	content:"\F058";
+	position:absolute;
+	top:0;
+	left:0.5rem;
+	color:var(--flowMarker);
+	font-family:interface;
+}
+
+.hasPlate > div {
+	flex-grow:1;
+	width:1%;
+	min-width:min(20rem, 100%);
+}
+
+.hasPlate.trailing > figure,
+.hasPlate.trailing > picture {
+	position:relative;
+	flex-grow:0;
+	width:30%;
+	max-width:16rem;
+	text-align:center;
+}
+
+figure img,
+figure picture {
+	width:100%;
+	height:auto;
+	border-radius:1rem;
+}
+
+.note {
+	text-align:center;
+}
+
+.action {
+	display:inline-block;
+	position:relative;
+	overflow:hidden;
+	margin-top:1rem;
+	z-index:1;
+	text-decoration:none;
+	padding:0.75rem 1.5rem;
+	color:var(--actionColor);
+	background:var(--actionBg);
+	border:var(--actionBorder);
+	border-radius:0.5em;
+	transition:color 0.3s, text-shadow 0.3s;
+}
+
+.action:focus,
+.action:hover {
+	color:var(--actionHoverColor);
+	text-shadow:none;
+}
+
+.action:after {
+	content:"";
+	position:absolute;
+	z-index:-1;
+	top:50%;
+	left:50%;
+	width:100%;
+	height:100%;
+	border-radius:0.5rem;
+	translate:-50% -50%;
+	scale:0;
+	opacity:0;
+	background:var(--actionHoverBg);
+	transition:scale 0.3s, opacity 0.3s;
+}
+
+.action:focus:after,
+.action:hover:after {
+	scale:1.1;
+	opacity:1;
+}
+
+.hero {
+	padding:var(--heroPad);
+	background-color:var(--heroBgColor);
+	color:var(--heroColor);
+	text-shadow:var(--heroTextShadow);
+}
+
+.hero .action {
+	color:var(--heroActionColor);
+	background:var(--heroActionBg);
+	border-color:var(--heroActionColor);
+}
+
+.hero .action:focus,
+.hero .action:hover {
+	color:var(--heroActionHoverColor);
+}
+
+.hero .action:after {
+	background:var(--heroActionHoverBg);
+}
+
+.hero header {
+	margin-bottom:1.5rem;
+	line-height:1.2;
+}
+
+.hero header p {
+	margin:0.25rem 0 1.5rem;
+	font-size:1.5rem;
+}
+
+#semanticEasy {
+	background-image:url(images/heroBg.avif), var(--heroBg);
+	background-position:center;
+	background-size:cover;
+}
+
+section:not(.hero) h2,
+section:not(.hero) h3 {
+	color:var(--mainHeadingColor);
+}
+
+#testimonials > header {
+	margin-bottom:var(--vertPad);
+}
+
+#testimonials > .cards {
+	max-width:76rem;
+	margin:0 auto;
+}
+
+#testimonials figcaption {
+	font-size:1.25rem;
+	font-style:italic;
+}
+
+#testimonials figcaption img {
+	display:inline-block;
+	vertical-align:middle;
+	width:4rem;
+	height:4rem;
+	margin-right:0.5rem;
+	border-radius:50%;
+}
+
+#backToTop {
+	display:block;
+	position:sticky;
+	z-index:600;
+	bottom:0;
+	width:2.5rem;
+	height:3.5rem;
+	padding-bottom:1rem;
+	margin:-3.5rem 1rem 0 auto;
+	opacity:0.6;
+	transition:opacity 0.3s;
+}
+
+#backToTop.hide {
+	opacity:0;
+}
+
+#backToTop:not(.hide):focus,
+#backToTop:not(.hide):hover {
+	opacity:1;
+}
+
+#backToTop span {
+	right:1.5rem;
+	top:0.25rem;
+	padding:0.125rem 2rem 0.125rem 1rem;
+	white-space:nowrap;
+	border-radius:1.5rem 0 0 1.5rem;
+	transform-origin:center right;
+	transition:scale 0.3s;
+	scale:0 1;
+}
+
+#backToTop:focus span,
+#backToTop:hover span {
+	scale:1;
+}
+
+#backToTop:after {
+	content:"\F102";
+	position:relative;
+	display:block;
+	width:2.5rem;
+	height:2.5rem;
+	text-align:center;
+	font-family:interface;
+	font-size:1.5rem;
+	line-height:2rem;
+	border:0.25rem solid var(--flyoutColor);
+	border-radius:50%;
+	background:var(--heroBgColor);
+	color:var(--heroColor);
+}
+
+@media (max-width:56rem) {
+
+	/*
+		It sucks to have to repeat all this,
+		one of the few cases where native mixins
+		would be a godsend.
+	*/
+
+	#mainMenu,
+	#mainMenu > .modalClose {
+		top:0;
+		left:0;
+		width:100%;
+		height:100%;
+		overflow:auto;
+		scroll-behavior:smooth;
+	}
+
+	#mainMenu {
+		position:fixed;
+		display:flex;
+		flex-wrap:wrap;
+		align-items:center;
+		justify-content:center;
+		left:-200vw;
+		background:var(--modalOuterBg);
+		box-shadow:var(--modalOuterShadow);
+		opacity:0;
+		transition:left 0s 0.5s, opacity 0.5s;
+	}
+
+	#mainMenu:target {
+		left:0;
+		opacity:1;
+		transition:opacity 0.5s;
+	}
+
+	#mainMenu > div {
+		position:relative;
+		margin:auto 1rem;
+		overflow:hidden;
+		background:var(--modalInnerBg);
+		color:var(--flowColor);
+		box-shadow:var(--modalShadow);
+		border:var(--standardBorder);
+		border-radius:1rem;
+		scale:0;
+		transition:scale 0.5s;
+	}
+		
+	#mainMenu:target > div {
+		scale:1;
+	}
+
+	#mainMenu:target .modalClose {
+		display:block;
+	}
+
+	#mainMenu > * > .modalClose:focus,
+	#mainMenu > * > .modalClose:hover {
+		scale:1.2;
+	}
+
+	#mainMenu > div:before {
+		content:attr(data-modalTitle);
+		display:block;
+		font-size:1.25rem;
+		padding:0.5rem 4rem 0.5rem 1rem;
+		margin-bottom:1rem;
+		background:var(--modalHeadingBg);
+		border-bottom:var(--standardBorder);
+	}
+
+	#mainMenu ul {
+		margin:1rem;
+	}
+	
+	#mainMenu li {
+		display:block;
+		text-align:center;
+		margin:0.5rem 0;
+	}
+	
+	.mainMenuOpen {
+		display:block;
+		width:2.5rem;
+		height:2rem;
+		background:linear-gradient(
+			#000 20%,
+			transparent 20% 40%,
+			#000 40% 60%,
+			transparent 60% 80%,
+			#000 80%
+		);
+	}
+	
+} /* max-width:56rem */