layout emblems on home page using flexbox and display in monospace

mojavelinux · mojavelinux · commit 54a39975d43a · 2020-12-22T15:53:54.000-07:00
diff --git a/preview-src/home.adoc b/preview-src/home.adoc
@@ -25,7 +25,7 @@ Content for hero panel.
 
 Introduction of things.
 
-[.grid]
+[.grid.has-emblems]
 Thing A [.emblem]#Emblem#::
 Description of thing A.
 
diff --git a/src/css/home.css b/src/css/home.css
@@ -38,6 +38,7 @@
     grid-row: 1;
     font-style: normal;
     padding-right: 0;
+    word-wrap: normal;
   }
 
   .doc .grid dd {
@@ -46,14 +47,21 @@
   }
 }
 
+.doc .grid.has-emblems dt {
+  display: flex;
+}
+
 .doc .grid dt .emblem {
   color: var(--color-gray-50);
+  font-family: var(--monospace-font-family);
   font-weight: normal;
+  font-size: 0.95em;
+  letter-spacing: -0.025em;
 }
 
 .doc .grid dt .emblem::before {
   content: '//';
-  padding-right: 0.5ch;
+  padding: 0 0.5ch;
 }
 
 .doc .grid .ulist {

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@`
`38`	`38`	`grid-row: 1;`
`39`	`39`	`font-style: normal;`
`40`	`40`	`padding-right: 0;`
	`41`	`+ word-wrap: normal;`
`41`	`42`	`}`
`42`	`43`
`43`	`44`	`.doc .grid dd {`
`@@ -46,14 +47,21 @@`
`46`	`47`	`}`
`47`	`48`	`}`
`48`	`49`
	`50`	`+.doc .grid.has-emblems dt {`
	`51`	`+ display: flex;`
	`52`	`+}`
	`53`	`+`
`49`	`54`	`.doc .grid dt .emblem {`
`50`	`55`	`color: var(--color-gray-50);`
	`56`	`+ font-family: var(--monospace-font-family);`
`51`	`57`	`font-weight: normal;`
	`58`	`+ font-size: 0.95em;`
	`59`	`+ letter-spacing: -0.025em;`
`52`	`60`	`}`
`53`	`61`
`54`	`62`	`.doc .grid dt .emblem::before {`
`55`	`63`	`content: '//';`
`56`		`- padding-right: 0.5ch;`
	`64`	`+ padding: 0 0.5ch;`
`57`	`65`	`}`
`58`	`66`
`59`	`67`	`.doc .grid .ulist {`