From 4264f2f33dde23c94c09cb2611fb0150c551588c Mon Sep 17 00:00:00 2001
From: Timid Robot Zehta <timid@creativecommons.org>
Date: Thu, 30 May 2024 09:08:09 -0700
Subject: [PATCH] use proper symantic order with specified display order

---
 cc_legal_tools/static/cc-legal-tools/base.css | 22 ++++++++++++-------
 .../includes/snippet/title_with_icons.html    | 20 +++++++++--------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/cc_legal_tools/static/cc-legal-tools/base.css b/cc_legal_tools/static/cc-legal-tools/base.css
index 6bf9609d..0edf1a10 100644
--- a/cc_legal_tools/static/cc-legal-tools/base.css
+++ b/cc_legal_tools/static/cc-legal-tools/base.css
@@ -54,33 +54,39 @@ div.masthead > nav.ancilliary-menu span.locale.icon-attach:before {
 /* header title */
 /* TODO: resolve with vocabulary-theme */
 .cc-legal-tools main > header {
-  align-items: center;  /* deed display: flex */
+  align-items: center;
+  /* (upstream vocabulary default-page class uses display: box) */
+  display: flex;
   padding: 3em 0;
 }
-.cc-legal-tools,.bidi-left main > header > span.tool-icons {
+.cc-legal-tools,.bidi-left main > header > span.alt-titles {
+  order: 1;
+}
+.cc-legal-tools,.bidi-left main > header > span.alt-titles > span.tool-icons {
   padding-right: 1em;
-  height: 2em;
 }
-.cc-legal-tools,.bidi-right main > header > span.tool-icons {
+.cc-legal-tools,.bidi-right main > header > span.alt-titles > span.tool-icons {
   padding-left: 1em;
 }
-.cc-legal-tools main > header > span.tool-icons > span.cc-icon > svg {
+main > header > span.alt-titles > span.tool-icons > span.cc-icon > svg {
   display: inline;
   height: 2em;
   width: 2em;
-  vertical-align: text-bottom;  /* legalcode display: block */
+  vertical-align: text-bottom;
 }
-.cc-legal-tools main > header > span.tool-identifier {
+.cc-legal-tools main > header > span.alt-titles > span.tool-identifier {
   font-family: 'Roboto Condensed';
+  font-size: 2.1em;
   font-style: normal;
   font-weight: 700;
-  font-size: 2.1em;
 }
 .cc-legal-tools main > header > h1 {
   margin: 0.2em 0;
+  order: 2;
 }
 .cc-legal-tools main > header > h2 {
   margin: 0;
+  order: 3;
 }
 
 
diff --git a/templates/includes/snippet/title_with_icons.html b/templates/includes/snippet/title_with_icons.html
index 36f68c63..804fa586 100644
--- a/templates/includes/snippet/title_with_icons.html
+++ b/templates/includes/snippet/title_with_icons.html
@@ -1,15 +1,17 @@
 {% load i18n %}
-<span class="tool-icons">
-  {% for code in tool.logos %}
-  <span class="cc-icon">
-    <svg viewBox="0 0 30 30">
-      <use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#{{ code }}"></use>
-    </svg>
+<h1>{{ tool_title }}</h1>
+<span class="alt-titles">
+  <span class="tool-icons">
+    {% for code in tool.logos %}
+    <span class="cc-icon">
+      <svg viewBox="0 0 30 30">
+        <use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#{{ code }}"></use>
+      </svg>
+    </span>
+    {% endfor %}
   </span>
-  {% endfor %}
+  <span class="tool-identifier">{{ tool.identifier }}</span>
 </span>
-<span class="tool-identifier">{{ tool.identifier }}</span>
-<h1>{{ tool_title }}</h2>
 <h2>
   {% if document_type == "deed" %}
     {% trans "Deed" %}