Refactoring Icons

kristofzerbe · Jul 28, 2024 · 87a9a40 · 87a9a40
1 parent 915411b
commit 87a9a40
Show file tree

Hide file tree

Showing 32 changed files with 107 additions and 6,112 deletions.
diff --git a/static/images/icons/circle-check.svg b/static/images/icons/circle-check.svg
diff --git a/static/images/icons/circle-exclamation.svg b/static/images/icons/circle-exclamation.svg
diff --git a/static/images/icons/circle-info.svg b/static/images/icons/circle-info.svg
diff --git a/static/images/icons/circle-question.svg b/static/images/icons/circle-question.svg
diff --git a/static/images/icons/circle-times.svg b/static/images/icons/circle-times.svg
diff --git a/static/images/trello/url-encoder-for-svg.png b/static/images/trello/url-encoder-for-svg.png
diff --git a/themes/landscape/layout/_partial/head.ejs b/themes/landscape/layout/_partial/head.ejs
@@ -311,8 +311,6 @@
   <link rel="preload" as="font" type="font/woff2" href="/css/fonts/sourcecodepro/WOFF2/TTF/SourceCodePro-Bold.ttf.woff2">
   <link rel="preload" as="font" type="font/woff2" href="/css/fonts/sourcecodepro/WOFF2/TTF/SourceCodePro-BoldIt.ttf.woff2">
 
-  <link rel="preload" as="font" type="font/woff2" href="/css/fonts/forkawesome/forkawesome-webfont.woff2">
-
 <% if (!page.photograph) { %>
   <link rel="preload" as="image" type="image/jpeg" href="/images/hero.jpg" imagesrcset="/images/hero-mobile.jpg 480w, /images/hero-tablet.jpg 768w" id="img-preload">
   <link rel="preload" as="image" type="image/jpeg" href="/images/hero.jpg" imagesrcset="/images/hero-mobile.jpg 480w, /images/hero-tablet.jpg 768w" id="photo-preload">

diff --git a/themes/landscape/layout/_partial/header.ejs b/themes/landscape/layout/_partial/header.ejs
@@ -5,19 +5,19 @@
     <nav id="header-nav" role="navigation">
       <ul class="menu">
         <% 
-          for (var i in theme.nav_menu) {
-            //if (i === 'home') continue;
-            let tx = __(i);
-            let cl;
-            if (['search'].some(v => i.includes(v))) {
-              cl = " menu-item-icon";
+          for (var item in theme.nav_menu) {
+            //if (item === 'home') continue;
+            let itemText = __(item);
+            let itemClass;
+            if (['search'].some(v => item.includes(v))) {
+              itemClass = " menu-item-icon";
             }
-            if (i === 'slashes') tx = "/" + tx;
+            if (item === 'slashes') itemText = "/" + itemText;
         %>
-        <li class="menu-item<%= cl %>" id="nav-<%= i%>-link">
+        <li class="menu-item<%= itemClass %>" id="nav-<%= item %>-link">
           <a class="sub-nav-link"
-             href="<%- url_for(theme.nav_menu[i]) %>">
-              <span><%= tx %></span>
+             href="<%- url_for(theme.nav_menu[item]) %>">
+              <span><%= itemText %></span>
             </a>
         </li>
         <% 

diff --git a/themes/landscape/layout/_partial/photo-item.ejs b/themes/landscape/layout/_partial/photo-item.ejs
@@ -27,6 +27,11 @@
     <%  let syndication = item.meta?.custom?.links?.filter(l => l.url?.length > 0).map(s => ({ host: s.site, url: s.url })); %>
     <div class="card-links">
       <%- partial('_partial/post/syndication-links', { syndication: syndication, type: "photo", text: false }) %>
+      <% if (!item.meta?.latitude && !item.meta?.longitude) { %>
+      <span class="info-location">
+        <img src="/images/icons/location-none.svg" title="no location" />
+      </span>
+      <% } %>
     </div>
     <h3><a href="/<%= config.photo_dir %>/<%= item.key %>" class="h-link"><%- item.name %></a></h3>
   <% } else { %>

diff --git a/themes/landscape/source/css/_forkawesome.styl b/themes/landscape/source/css/_forkawesome.styl
diff --git a/themes/landscape/source/css/_pagefind.styl b/themes/landscape/source/css/_pagefind.styl
@@ -22,6 +22,10 @@ html[data-theme="dark"]
   --pagefind-ui-tag: dark-color-light
 
 /* OVERRIDES */
+.pagefind-ui__form:before
+  //see /images/icons/search.svg
+  mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 42 42' fill='%23000000'%3E%3Cpath d='M1,17.838c0,8.747,7.131,15.827,15.94,15.827c8.796,0,15.938-7.08,15.938-15.827S25.736,2,16.94,2C8.131,2,1,9.091,1,17.838 z M6.051,17.838c0-5.979,4.868-10.817,10.89-10.817c6.01,0,10.888,4.839,10.888,10.817c0,5.979-4.878,10.818-10.888,10.818 C10.919,28.656,6.051,23.816,6.051,17.838z M28.162,32.361l6.855,7.809c1.104,1.102,1.816,1.111,2.938,0l2.201-2.181 c1.082-1.081,1.149-1.778,0-2.921l-7.896-6.775L28.162,32.361z'/%3E%3C/svg%3E") !important; 
+
 .pagefind-ui__search-input  
   &:focus-visible
     outline: none

diff --git a/themes/landscape/source/css/_partial/alertbox.styl b/themes/landscape/source/css/_partial/alertbox.styl
@@ -78,37 +78,38 @@
 .alertbox::after 
   position: absolute
   display: block
-  top: -2px
+  top: -4px
   left: -14px
-  font-family: fa-icons
-  font-size: 28px
+  content: ""
+  background-repeat: no-repeat
+  background-position: 0 0
+  background-size: 26px
+  width: 26px
+  height: 26px
 
 .alertbox.alertbox-exclamation::after
-  color: rgb(255,204,0)
-  content: icon-exclamation-circle
+  //see /images/icons/circle-exclamation.svg + fill rgb-color
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 512 512' fill='rgb(255,204,0)'%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
 
 .alertbox.alertbox-question::after
-  color: rgb(221,0,255)
-  content: icon-question-circle
+  //see /images/icons/circle-question.svg + fill rgb-color
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 512 512' fill='rgb(221,0,255)'%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'/%3E%3C/svg%3E");
 
 .alertbox.alertbox-warning::after
-  color: rgb(226,37,0)
-  content: icon-times-circle
+  //see /images/icons/circle-times.svg + fill rgb-color
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 512 512' fill='rgb(226,37,0)'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E");
 
 .alertbox.alertbox-info::after
-  color: rgb(0,136,224)
-  content: icon-info-circle
+  //see /images/icons/circle-info.svg + fill rgb-color
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 512 512' fill='rgb(0,136,224)'%3E%3Cpath d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'/%3E%3C/svg%3E");
 
 .alertbox.alertbox-success::after
-  color: rgb(0,187,28)
-  content: icon-check-circle
+  //see /images/icons/circle-exclamation.svg + fill rgb-color
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 512 512' fill='rgb(0,187,28)'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
 
 .alertbox.alertbox-note::after
-  color: rgb(205,205,205)
-  content: icon-quote
-  font-size: 22px
-  top: -3px
-  left: -14px
+  //see /images/icons/quote.svg + fill rgb-color
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 24 24' fill='rgb(205,205,205)'%3E%3Cpath d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292zm-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292z'/%3E%3C/svg%3E");
 
 .alertbox * 
   margin: 0 !important

diff --git a/themes/landscape/source/css/_partial/article.styl b/themes/landscape/source/css/_partial/article.styl
@@ -194,20 +194,6 @@
 .article-photo.in-view
   @extend $inview-image-visible
 
-// .article-comment-link
-//   @extend $block-caption
-//   color: color-header
-//   /[data-theme="dark"] &
-//     color: dark-color-header
-//   float: left
-//   font-size: 12px
-//   &:before
-//     content: icon-comment
-//     font-family: fa-icons
-//     padding-right: 5px
-//   .hide
-//     display: none
-
 .article-category
   position: absolute
   right: 0
@@ -465,15 +451,19 @@
       /[data-theme="dark"] &
         background: dark-color-block  
     &:after
-      content: icon-quote
-      color: rgba(205,205,205,0.75)
-      position: absolute
       display: block
+      position: absolute
       top: -2px
       left: -12px
-      font-family: fa-icons
-      font-size: 22px
-      font-style: normal
+      display: inline-block
+      content: ""
+      background-repeat: no-repeat
+      background-position: 0 0
+      background-size: 24px
+      width: 24px
+      height: 24px
+      //see /images/icons/quote.svg + fill rgb-color
+      background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' viewBox='0 0 24 24' fill='rgba(205,205,205,0.75)'%3E%3Cpath d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292zm-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292z'/%3E%3C/svg%3E");
     & +
       cite
         display: block