Use PST styling for spec meta styling (#576)

* Use PST styling for spec meta styling

* Remove more

Author: jarrodmillman

assets/css/custom.css

@@ -21,29 +21,6 @@ table.spec__table thead {
   text-decoration: none;
 }
 
-.spec-meta {
-  background-color: var(--pst-color-surface);
-  border: 1px solid var(--pst-color-border);
-  border-radius: 0.25rem;
-  line-height: 1.2em;
-  margin: 1.5em 0;
-  padding: 1rem;
-  display: inline-block;
-}
-
-.spec-meta table {
-  margin-bottom: 0;
-}
-
-.spec-meta .field {
-}
-
-.spec-meta .field-name {
-  white-space: nowrap;
-  font-weight: bold;
-  vertical-align: top;
-}
-
 .gallery {
   display: flex;
   flex-wrap: wrap;

layouts/partials/specs/author.html

@@ -1,31 +1,30 @@
 {{- $root := . -}}
-<div class="spec-meta">
-  <table>
+<div class="sd-card sd-mb-3 sd-shadow-sm">
+  <div class="sd-card-body">
     {{ $meta_fields := (slice "homepage" "repository" "pypi" "libraries-io" "license" "license-type") }}
+    <dl class="field-list">
     {{- range $attr := $meta_fields -}}
       {{ $val := index $.Params $attr }}
-      <tr class="field">
-        <td class="field-name">
-          {{ $attr | humanize }}:
-        </td>
-        <td class="field-value">
-          {{ $val | markdownify }}
-        </td>
-      </tr>
+      <dt class="field-odd">
+        {{ $attr | humanize }}:
+      </dt>
+      <dd class="field-odd">
+        {{ $val | markdownify }}
+      </dd>
     {{- end -}}
-  </table>
+    </dl>
+  </div>
 </div>
-
-<div class="endorsed-specs">
-  <h1>Endorsed SPECs</h1>
-  {{ $specs := where $.Site.Pages "Section" "specs" }}
+<div class="article-content">
+  <h2>Endorsed SPECs</h1>
+  {{- $specs := where $.Site.Pages "Section" "specs" -}}
   <ul class="endorsed-specs-list">
     {{- range $specs -}}
-      {{ if not (in (lower .Title) "meta") }}
-        {{ if in ( index .Params "endorsed-by" ) $root.File.BaseFileName }}
+      {{- if not (in (lower .Title) "meta") -}}
+        {{- if in ( index .Params "endorsed-by" ) $root.File.BaseFileName }}
           <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-        {{- end }}
-      {{- end }}
+        {{- end -}}
+      {{- end -}}
     {{- end -}}
   </ul>
 </div>

layouts/partials/specs/date.html

@@ -1,8 +1,10 @@
 {{ $page := . }}
 {{ $isSpec := eq (len (findRE "^spec-\\d*" .File.ContentBaseName)) 1 }}
-<div class="spec-meta">
-  <table>
+<div class="sd-card sd-mb-3 sd-shadow-sm">
+<div class="sd-card-body">
     {{ $meta_fields := (slice "author" "discussion" "history" "endorsed-by") }}
+    {{ $warn := "" }}
+    <dl class="field-list">
     {{- range $attr := $meta_fields -}}
       {{ $val := index $.Params $attr }}
       {{ $attr := strings.TrimPrefix "spec_" $attr }}
@@ -20,13 +22,12 @@
       {{- end -}}
       {{ $isSpecField := (in (slice "endorsed-by" "discussion" ) $attr) }}
       {{ if (or $isSpec (not $isSpecField)) }}
-        <tr class="field">
-          <td class="field-name">
-            {{ $attr | humanize }}:
-          </td>
+          <dt class="field-odd">
+            {{ $attr | humanize }}<span class="colon">:</span></dt>
+          </dt>
           {{- if (reflect.IsSlice $val) -}}
             {{ $len := len $val }}
-            <td class="field-value">
+            <dd class="field-odd">
             {{- range $idx, $el := $val }}
               {{ if eq $attr "endorsed-by" }}
                 <a href="{{ relref $.Page.CurrentSection (printf "core-projects/%s" $el) }}">{{ $el }}</a>
@@ -35,31 +36,26 @@
               {{- end -}}
               {{- if not (eq (add $idx 1) $len) -}},{{ end }}
             {{ end }}
-            </td>
+            </dd>
           {{- else }}
-            <td class="field-value">
+            <dd class="field-odd">
               {{ $val | markdownify }}
-            </td>
+            </dd>
           {{- end -}}
-        </tr>
-      {{/* add warning that this is a draft, i.e. has not been endorsed by 2 projects or more */}}
-      {{- if (and (eq $attr "endorsed-by") (lt (len (or $val "")) 2)) }}
-          {{/* add blank line */}}
-          <tr class="field">
-              <td class="field-name">&nbsp;</td>
-              <td class="field-value"></td>
-          </tr>
-          {{/* add warning */}}
-          <tr class="field" style="background-color:crimson;color:white;">
-            <td class="field-name">
-              &nbsp; WARNING:
-            </td>
-            <td class="field-value">
-              Draft document.
-            </td>
-          </div>
-      {{- end -}}
       {{- end -}}
+    {{/* add warning that this is a draft, i.e. has not been endorsed by 2 projects or more */}}
+    {{- if (and (eq $attr "endorsed-by") (lt (len (or $val "")) 2)) -}}
+        {{ $warn = "True" }}
+    {{- end -}}
     {{- end -}}
-  </table>
+    </dl>
+    {{- if $warn }}
+        <div class="admonition attention">
+          <div class="admonition-title">
+            Attention
+          </div>
+          <p>This is a draft document.</p>
+        </div>
+    {{- end -}}
+</div>
 </div>

layouts/partials/specs/project_meta.html

@@ -7,7 +7,7 @@ <h1>{{ .Title }}</h1>
     <h5 class="subtitle">{{ .Params.Subtitle }}</h5>
     {{ end }}
     {{ with partial "specs/meta.html" . -}}
-    <div class="post-meta">{{ . }}</div>
+      {{ . }}
     {{- end }}
 
     <div class="article-content">