initial support for glosses

assets/css/site.css

@@ -824,6 +824,7 @@ h2 + p:first-letter {
 }
 
 body {counter-reset: h2}
+body {counter-reset: glossN}
 h2 {counter-reset: h3}
 h3 {counter-reset: h4}
 h4 {counter-reset: h5}
@@ -875,6 +876,48 @@ details {
   text-decoration-color: red;
 }
 
+.glosscontainer {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-template-areas:
+    "glossnumber gloss";
+}
+
+.gloss {
+  display: grid;
+  grid-template-columns: 1fr;
+  /*grid-template-rows: repeat(3, 1fr);*/
+  gap: 0px 0px;
+  grid-template-areas:
+    "glosstop"
+    "glossmiddle"
+    "glossbottom";
+  grid-area: gloss;
+}
+.glosstop { grid-area: glosstop; }
+.glossbottom { grid-area: glossbottom; }
+.glossmiddle { grid-area: glossmiddle; }
+.glossnumber { 
+  grid-area: glossnumber; 
+}
+.glossnumber::before {
+  counter-increment: glossN;
+  content: "(" counter(glossN) ")";
+  padding-right: 0.3rem;
+}
+
+.glosswords {
+  display: inline-block;
+  margin-left: -0.3rem;
+}
+
+.glossword {
+  margin-left: 0.3rem; 
+  margin-right: 0.5rem; 
+}
+
 @media (max-width: 767px) {
   html {
     box-sizing: border-box;

layouts/shortcodes/gloss.html

@@ -0,0 +1,28 @@
+<div class="glosscontainer">
+    <div class="gloss">
+        {{- range $g := split .Inner "\n" -}}
+            {{- if hasPrefix $g "{t}" -}}
+                <div class="glosstop">
+                    {{- substr $g 3 -}}
+                </div>
+            {{- else if hasPrefix $g "{m}" -}}
+                <div class="glossmiddle">
+                    {{- range (split (substr $g 3) "|") -}}
+                        {{- with . -}}
+                            <div class="glosswords">
+                                {{- range (split . "," ) -}}
+                                    <div class="glossword">{{- . -}}</div>
+                                {{- end -}}
+                            </div>
+                        {{- end -}}
+                    {{- end -}}
+                </div>
+            {{- else if hasPrefix $g "{b}" -}}
+                <div class="glossbottom">
+                    {{- substr $g 3 -}}
+                </div>
+            {{- end -}}
+        {{- end -}}
+    </div>
+    <div class="glossnumber"></div>
+</div>