Proof of concept of SVG icons next to external header links (#163)

* Proof of concept of SVG icons next to external header links * Use launch icon
scientific-python · Mar 22, 2022 · b147a37 · b147a37
1 parent 475343a
commit b147a37
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 1 deletion.
diff --git a/static/images/icons/launch.svg → assets/icons/launch.svg b/static/images/icons/launch.svg → assets/icons/launch.svg
diff --git a/assets/theme-css/styles.css b/assets/theme-css/styles.css
@@ -309,6 +309,10 @@ svg.icon {
   vertical-align: middle;
 }
 
+.navbar svg.icon {
+  width: 1.5rem;
+}
+
 /* Icon size slightly enlargened for footer */
 #footer .social-media-icons {
   font-size: 1.5em;

diff --git a/doc/config.yaml b/doc/config.yaml
@@ -25,6 +25,7 @@ params:
       url: /getstarted/
     - title: Features
       url: /features/
+      is_external: true
     - title: Shortcodes
       url: /shortcodes/
   keyfeatures:

diff --git a/layouts/partials/navbar-clone.html b/layouts/partials/navbar-clone.html
@@ -12,7 +12,7 @@
       </a>
       {{- end}}
 
-      
+
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="cloned-navbar-menu">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
@@ -28,12 +28,14 @@
         <div class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link">
             {{ .title }}
+            {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
           </a>
 
           <div class="navbar-dropdown">
             {{- range .sublinks }}
             <a href="{{ .url }}" class="navbar-item">
               {{ .title }}
+              {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
             </a>
             {{- end }}
           </div>
@@ -42,11 +44,13 @@
         <a href="{{ .url }}" class="navbar-item">
           <span class="button signup-button rounded secondary-btn raised">
             {{ .title }}
+            {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
           </span>
         </a>
         {{- else }}
         <a href="{{ .url }}" class="navbar-item is-secondary">
           {{ .title }}
+          {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
         </a>
         {{- end }}
         {{- end }}

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -28,12 +28,14 @@
         <div class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link">
             {{ .title }}
+            {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
           </a>
 
           <div class="navbar-dropdown">
             {{- range .sublinks }}
             <a href="{{ .url }}" class="navbar-item">
               {{ .title }}
+              {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
             </a>
             {{- end }}
           </div>
@@ -42,11 +44,13 @@
         <a href="{{ .url }}" class="navbar-item">
           <span class="button signup-button rounded secondary-btn raised">
             {{ .title }}
+            {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
           </span>
         </a>
         {{- else }}
         <a href="{{ .url }}" class="navbar-item is-secondary">
           {{ .title }}
+          {{ if .is_external }}{{ partial "svg-icon" "launch" }}{{ end }}
         </a>
         {{- end }}
         {{- end }}