use proper symantic order with specified display order

creativecommons · May 30, 2024 · 4264f2f · 4264f2f
1 parent 62a416c
commit 4264f2f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git 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
@@ -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" %}