Merge pull request #455 from creativecommons/page-title-clarification

App: improve clarity of legal tool title
creativecommons · Jun 4, 2024 · 2b01966 · 2b01966
2 parents 3bc446c + 4264f2f
commit 2b01966
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/cc_legal_tools/static/cc-legal-tools/base.css b/cc_legal_tools/static/cc-legal-tools/base.css
@@ -54,18 +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;
+  /* (upstream vocabulary default-page class uses display: box) */
+  display: flex;
   padding: 3em 0;
 }
-.cc-legal-tools main > header > span.tool-icons > span.cc-icon > svg {
+.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;
+}
+.cc-legal-tools,.bidi-right main > header > span.alt-titles > span.tool-icons {
+  padding-left: 1em;
+}
+main > header > span.alt-titles > span.tool-icons > span.cc-icon > svg {
   display: inline;
-  height: 4em;
-  width: 4em;
+  height: 2em;
+  width: 2em;
+  vertical-align: text-bottom;
+}
+.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;
 }
 .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/cc_legal_tools/static/cc-legal-tools/deed.css b/cc_legal_tools/static/cc-legal-tools/deed.css
@@ -3,6 +3,7 @@
   border-bottom: 5px solid var(--vocabulary-neutral-color-dark-gray);
   border-left: 5px solid var(--vocabulary-neutral-color-dark-gray);
   border-right: 5px solid var(--vocabulary-neutral-color-dark-gray);
+  margin-top: 2em;
   margin-left: -3em;
   margin-right: -3em;
   padding-left: 3em;

diff --git a/dev/stats.sh b/dev/stats.sh
@@ -55,7 +55,7 @@ error_exit() {
 
 header() {
     # Print 80 character wide black on white heading with time
-    printf "${E30}${E107} %-71s$(date '+%T') ${E0}\n" "${@}"
+    printf "${E30}${E107}# %-70s$(date '+%T') ${E0}\n" "${@}"
 }
 
 

diff --git a/templates/includes/snippet/title_with_icons.html b/templates/includes/snippet/title_with_icons.html
@@ -1,19 +1,22 @@
 {% 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>
-<h1>
+<h2>
   {% if document_type == "deed" %}
-    {{ tool.identifier }} {% trans "Deed" %}
+    {% trans "Deed" %}
   {% else %}
-    {{ tool.identifier }} {% trans "Legal Code" %}
+     {% trans "Legal Code" %}
   {% endif %}
-</h1>
-<h2>{{ tool_title }}</h2>
+</h2>
 {# vim: ft=jinja.html ts=2 sw=2 sts=2 sr et #}