feat: ionicons

lh1me · Jun 3, 2022 · 2f75129 · 2f75129
1 parent 9e0cbb4
commit 2f75129
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 73 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,4 +1,4 @@
-version: 1651727875408
+version: 1654266144177
 language: cn
 aomori_widgets:
   - toc

diff --git a/layout/_partial/article-index.ejs b/layout/_partial/article-index.ejs
@@ -41,13 +41,13 @@ class="article article-type-<%= post.layout %>"
     <div class="article-badge">
         <% if(post.sticky) { %>
         <div class="article-top">
-            <box-icon type='solid' name='to-top' color='#ffffff' size='xs'></box-icon>
+            <ion-icon name="arrow-up"></ion-icon>
         </div>
         <% } %>
         <% if(post.link_reprint) { %>
-            <div class="article-repost">
-                <box-icon name='repost' color='#ffffff' size='xs'></box-icon>
-            </div>
+        <div class="article-repost">
+            <ion-icon name="return-down-forward"></ion-icon>
+        </div>
         <% } %>
     </div>
 

diff --git a/layout/_partial/article-tweet.ejs b/layout/_partial/article-tweet.ejs
@@ -5,7 +5,7 @@
 
     <div class="article-tweet article-type-<%= post.layout %>-inner">
 
-        <box-icon class="article-tweet-quote" type='solid' name='quote-left' color="#CCC"></box-icon>
+        <ion-icon class="article-tweet-quote" name="<%= post.icon || 'balloon' %>"></ion-icon>
 
         <div class="article-tweet-content post-inner-html">
             <% if (post.excerpt){ %>
@@ -45,13 +45,13 @@
         <div class="article-badge">
             <% if(post.sticky) { %>
             <div class="article-top">
-                <box-icon type='solid' name='to-top' color='#ffffff' size='xs'></box-icon>
+                <ion-icon name="arrow-up"></ion-icon>
             </div>
             <% } %>
             <% if(post.link_reprint) { %>
-                <div class="article-repost">
-                    <box-icon name='repost' color='#ffffff' size='xs'></box-icon>
-                </div>
+            <div class="article-repost">
+                <ion-icon name="return-down-forward"></ion-icon>
+            </div>
             <% } %>
         </div>
 

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -77,11 +77,11 @@
         <div class="share-title"><%= __('share') %></div>
         <a class="share-item" target="_blank"
             href="https://twitter.com/share?text=<%- post.title %> - <%- config.title %>&url=<%- encodeURIComponent(post.permalink) %>">
-            <box-icon type='logo' name='twitter'></box-icon>
+            <ion-icon name="logo-twitter"></ion-icon>
         </a>
         <a class="share-item" target="_blank"
             href="https://www.facebook.com/sharer.php?title=<%- post.title %> - <%- config.title %>&u=<%- encodeURIComponent(post.permalink) %>">
-            <box-icon name='facebook-square' type='logo' ></box-icon>
+            <ion-icon name="logo-facebook"></ion-icon>
         </a>
         <!-- <a class="share-item" target="_blank"
             href="https://service.weibo.com/share/share.php?title=<%- post.title %> - <%- config.title %>&url=<%- post.permalink %>&pic=">

diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
@@ -14,6 +14,8 @@
 
 </footer>
 
+<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+
 <% if (config.aomori_gitalk){ %>
 <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
 <% } %>

diff --git a/layout/_partial/page/photography-item.ejs b/layout/_partial/page/photography-item.ejs
@@ -15,15 +15,15 @@
 
     <% if (item.place) { %>
     <div class="photography-item-place">
-        <box-icon color="#fff" size='xs' name='map' type='solid' ></box-icon>
+        <ion-icon name="location"></ion-icon>
         <span><%= item.place %></span>
     </div>
     <% } %>
 
     <% if (item.icon && item.icon.name) { %>
     <div class="photography-item-icon">
-        <% if (item.icon.url) { %><a target="_blank" href="<%- item.icon.url %>"><% } %> 
-            <box-icon size="xs" type='<%- item.icon.type %>' name='<%- item.icon.name %>'></box-icon>
+        <% if (item.icon.url) { %><a target="_blank" href="<%- item.icon.url %>"><% } %>
+            <ion-icon name="<%- item.icon.name %>"></ion-icon>
         <% if (item.icon.url) { %></a><% } %> 
     </div>
     <% } %>

diff --git a/layout/_partial/search.ejs b/layout/_partial/search.ejs
@@ -2,7 +2,7 @@
     <div class="has-icon-right">
         <input type="text" class="form-input" id="search" placeholder="SEARCH" autocomplete="off">
         <div class="form-icon">
-            <box-icon name='search' color="#3c4859"></box-icon>
+            <ion-icon name="search"></ion-icon>
         </div>
     </div>
     <div class="search-result" id="search-ps"></div>

diff --git a/layout/_partial/social.ejs b/layout/_partial/social.ejs
@@ -1,5 +1,5 @@
 <% for (var i in config.aomori_social){ %>
     <a class="social" target="_blank" href="<%- config.aomori_social[i].url %>">
-        <box-icon type='<%- config.aomori_social[i].type %>' name='<%- config.aomori_social[i].icon %>'></box-icon>
+        <ion-icon name="<%- config.aomori_social[i].icon %>"></ion-icon>
     </a>
 <% } %>
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "release": "standard-version -s"
   },
   "dependencies": {
-    "boxicons": "^2.1.2",
     "dayjs": "^1.11.2",
     "jquery": "^3.6.0",
     "jquery-viewer": "^1.0.1",

diff --git a/source/dist/custom.css b/source/dist/custom.css
diff --git a/source/dist/custom.js b/source/dist/custom.js
diff --git a/source/javascripts/app.js b/source/javascripts/app.js
@@ -1,4 +1,3 @@
-import 'boxicons'
 import 'viewerjs'
 import 'jquery-viewer'
 

diff --git a/source/stylesheets/style.scss b/source/stylesheets/style.scss
@@ -163,6 +163,7 @@ img:not([src]):not([srcset]) {
             display: flex;
 
             a {
+                font-size: 20px;
                 align-items: center;
                 display: flex;
                 fill: var(--color-type);
@@ -321,6 +322,11 @@ img:not([src]):not([srcset]) {
             width: 24px;
             height: 24px;
             right: 6px;
+            font-size: 20px;
+            color: var(--color-main);
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
 
         &-result {
@@ -511,10 +517,9 @@ img:not([src]):not([srcset]) {
                 text-align: center;
                 border-radius: 3px;
                 user-select: none;
-
-                box-icon {
-                    margin-top: 2px;
-                }
+                display: flex;
+                justify-content: center;
+                align-items: center;
             }
 
             .article-repost {
@@ -527,10 +532,9 @@ img:not([src]):not([srcset]) {
                 text-align: center;
                 border-radius: 3px;
                 user-select: none;
-
-                box-icon {
-                    margin-top: 2px;
-                }
+                display: flex;
+                justify-content: center;
+                align-items: center;
             }
         }
 
@@ -686,16 +690,16 @@ img:not([src]):not([srcset]) {
             }
 
             &-quote {
-                height: 50px;
+                color: #ccc;
                 left: 0;
                 position: absolute;
-                top: -5px;
-                width: 50px;
+                top: 0;
+                font-size: 50px;
                 transition: all .3s;
             }
 
             &-content {
-                padding: 0 0 10px 80px;
+                padding: 0 0 10px 70px;
 
                 p {
                     font-weight: 300;
@@ -712,7 +716,7 @@ img:not([src]):not([srcset]) {
 
             .article-footer {
                 justify-content: start;
-                padding-left: 70px;
+                padding-left: 60px;
             }
         }
 
@@ -930,6 +934,7 @@ img:not([src]):not([srcset]) {
                 margin-bottom: 10px;
                 transition: all 0.3s;
                 width: 2rem;
+                font-size: 20px;
 
                 &:hover {
                     fill: var(--color-light);