Improve footer

* Show underline when hovering over links * Change foreground color to have stronger contrast as per SymbiFlow#7 * Remove extraneous padding and nicely align left side with right side of footer * Add link to LICENSE in GitHub repo Signed-off-by: Daniel Lim Wee Soong <[email protected]>
daniellimws · Aug 14, 2020 · c075b94 · c075b94
1 parent 7156e43
commit c075b94
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 34 deletions.
diff --git a/example/conf.py b/example/conf.py
@@ -16,8 +16,8 @@
 
 
 project = 'SymbiFlow Theme'
-copyright = '2016, Masahiko Yasuda'
-author = 'Masahiko Yasuda'
+copyright = '2020, The SymbiFlow Authors'
+author = 'The SymbiFlow Authors'
 
 language = 'en'
 
@@ -76,7 +76,10 @@
     'show_drawer_title': True,
     # Render footer.
     # Values: True, False (Default: True)
-    'show_footer': True
+    'show_footer': True,
+
+    'hide_symbiflow_links': False,
+    'license_url': 'https://github.com/google/skywater-pdk/blob/master/LICENSE'
 }
 
 html_show_sourcelink = True

diff --git a/sphinx_symbiflow_theme/footer.html b/sphinx_symbiflow_theme/footer.html
@@ -1,39 +1,49 @@
 <footer class="mdl-mini-footer">
-    <div class="mdl-mini-footer__left-section">
-      <div class="mdl-logo">{{ project }}</div>
-      {% if not theme_hide_symbiflow_links|tobool %}
-        <div>
-          <ul>
-            <li>
-              <a href="https://symbiflow.github.io/" target="_blank">SymbiFlow</a>
-            </li>
-            <li>
-              <a href="https://lists.librecores.org/listinfo/symbiflow" target="_blank">Mailing List</a>
-            </li>
-            <li>
-              <a href="https://webchat.freenode.net/#symbiflow" target="_blank">IRC</a>
-            </li>
-            <li>
-              <a href="https://join.slack.com/t/symbiflow/shared_invite/enQtNTkyMjcyNTkzOTY4LTU0MzhmYWNjOGMyMTkyNjA0MmEyMWM5OWY3ZDg5MWQ3ODlmOWQwZjk2YzBmMDBjMzkzMzNjYjkwYjAxZTMyNjQ">Slack</a>
-            </li>
-          </ul>
-        </div>
-      {%- endif %}
+  <div class="mdl-mini-footer__left-section">
+    <div class="mdl-logo">{{ project }}</div>
+    <div>
+      <ul>
+        {% if not theme_hide_symbiflow_links|tobool %}
+        <li>
+          <a href="https://symbiflow.github.io/" target="_blank">SymbiFlow</a>
+        </li>
+        <li>
+          <a href="https://lists.librecores.org/listinfo/symbiflow" target="_blank">Mailing List</a>
+        </li>
+        <li>
+          <a href="https://webchat.freenode.net/#symbiflow" target="_blank">IRC</a>
+        </li>
+        <li>
+          <a href="https://join.slack.com/t/symbiflow/shared_invite/enQtNTkyMjcyNTkzOTY4LTU0MzhmYWNjOGMyMTkyNjA0MmEyMWM5OWY3ZDg5MWQ3ODlmOWQwZjk2YzBmMDBjMzkzMzNjYjkwYjAxZTMyNjQ"
+            target="_blank">Slack</a>
+        </li>
+        {%- endif %}
+        {%- if theme_license_url %}
+        <li>
+          <!-- <a href="https://github.com/SymbiFlow/sphinx_symbiflow_theme/blob/master/LICENSE" target="_blank"><img alt="License Badge" src="https://img.shields.io/github/license/SymbiFlow/symbiflow-arch-defs"/></a> -->
+          <a href="{{ theme_license_url }}" target="_blank">License</a>
+        </li>
+        {%- endif %}
+      </ul>
     </div>
+  </div>
 
-    <div class="mdl-mini-footer__right-section">
+  <div class="mdl-mini-footer__right-section">
     {%- if show_copyright %}
-      {%- if hasdoc('copyright') %}
-        <div>{% trans path=pathto('copyright'), copyright=copyright|e %}&copy; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}</div>
-      {%- else %}
-        <div>{% trans copyright=copyright|e %}&copy; Copyright {{ copyright }}.{% endtrans %}</div>
-      {%- endif %}
+    {%- if hasdoc('copyright') %}
+    <div>{% trans path=pathto('copyright'), copyright=copyright|e %}&copy; <a href="{{ path }}">Copyright</a>
+      {{ copyright }}.{% endtrans %}</div>
+    {%- else %}
+    <div>{% trans copyright=copyright|e %}&copy; Copyright {{ copyright }}.{% endtrans %}</div>
+    {%- endif %}
     {%- endif %}
     {%- if last_updated %}
-      <div>{% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}</div>
+    <div>{% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}</div>
     {%- endif %}
     {%- if show_sphinx %}
-      <div>{% trans sphinx_version=sphinx_version|e %}Generated by <a href="http://sphinx.pocoo.org/">Sphinx</a> {{ sphinx_version }} using <a href="https://github.com/SymbiFlow/sphinx_symbiflow_theme">sphinx_symbiflow_theme</a>.{% endtrans %}</div>
+    <div>{% trans sphinx_version=sphinx_version|e %}Generated by <a href="http://sphinx.pocoo.org/">Sphinx</a>
+      {{ sphinx_version }} using <a
+        href="https://github.com/SymbiFlow/sphinx_symbiflow_theme">sphinx_symbiflow_theme</a>.{% endtrans %}</div>
     {%- endif %}
-    </div>
+  </div>
 </footer>
diff --git a/sphinx_symbiflow_theme/static/sphinx_symbiflow_theme.css b/sphinx_symbiflow_theme/static/sphinx_symbiflow_theme.css
diff --git a/sphinx_symbiflow_theme/theme.conf b/sphinx_symbiflow_theme/theme.conf
@@ -21,3 +21,4 @@ show_drawer_title = True
 show_footer = True
 
 hide_symbiflow_links = False
+license_url = 
diff --git a/src/scss/footer/_footer.scss b/src/scss/footer/_footer.scss
@@ -4,29 +4,44 @@
 footer.mdl-mini-footer {
     background-color: #212121;
     padding: 16px 32px;
+    color: #bfbfbf;
 
     > div.mdl-mini-footer__left-section {
         display: flex;
         flex-direction: column;
+        align-self: center;
         .mdl-logo {
             font-size: 1.1rem;
+            line-height: 1.5rem;
+            margin-bottom: 4px;
         }
         ul {
             @extend .mdl-mini-footer__link-list;
+            li {
+                line-height: 1.5rem;
+            }
+        }
+
+        a:hover {
+            text-decoration: underline;
         }
     }
     > div.mdl-mini-footer__right-section {
         font-size: 0.9rem;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
-        padding-top:12px;
+        align-self: center;
 
         a {
             color: inherit;
             font-weight: bold;
             text-decoration: none;
         }
+
+        a:hover {
+            text-decoration: underline;
+        }
     }
     p.caption {
         display: none;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,3 +21,4 @@ show_drawer_title = True
		show_footer = True

		hide_symbiflow_links = False
		license_url =