Switch to Feather Icons

static/css/base.css

@@ -24,7 +24,7 @@ nav {
   align-items: center;
 }
 
-.logo {
+.logo, .icon {
   filter: invert(1) hue-rotate(180deg);
 }
 
@@ -71,10 +71,6 @@ main {
   gap: 10px;
 }
 
-.post__meta .material-icons-outlined {
-  font-size: 1rem;
-}
-
 .pageSelector {
   display: flex;
   justify-content: space-between;
@@ -85,15 +81,12 @@ footer {
   display: flex;
   justify-content: center;
   flex-direction: row;
-  gap: 10px;
+  gap: 5rem;
+  margin: 2em 0;
 }
 
 @media only screen and (max-width: 812px) {
   section, header, main {
     margin: 0 !important;
   }
-  footer {
-    flex-direction: column;
-    text-align: center;
-  }
 }

static/css/comments.css

@@ -37,11 +37,11 @@
 }
 
 #comments__expandBtn ~ .comments__expandBtn__label > span::after {
-  content: "expand_more";
+  content: "⌄";
 }
 
 #comments__expandBtn:checked ~ .comments__expandBtn__label > span::after {
-  content: "expand_less";
+  content: "⌃";
 }
 
 #comments__expandBtn:checked ~ .comments {

static/css/privacy.css

@@ -14,8 +14,7 @@ ul {
 }
 
 .largeIcon {
-  font-size: 36px;
+  height: 36px;
-  color: #2b95f2;
 }
 
 .badgeWrapper {

static/fonts/css.css

@@ -0,0 +1 @@
+.gg-chevron-down{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs,1));width:22px;height:22px;border:2px solid transparent;border-radius:100px}.gg-chevron-down::after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-right:2px solid;transform:rotate(45deg);left:4px;top:2px}.gg-chevron-up{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs,1));width:22px;height:22px;border:2px solid transparent;border-radius:100px}.gg-chevron-up::after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-top:2px solid;border-right:2px solid;transform:rotate(-45deg);left:4px;bottom:2px}.gg-eye{position:relative;display:block;transform:scale(var(--ggs,1));width:24px;height:18px;border-bottom-right-radius:100px;border-bottom-left-radius:100px;overflow:hidden;box-sizing:border-box}.gg-eye::after,.gg-eye::before{content:"";display:block;border-radius:100px;position:absolute;box-sizing:border-box}.gg-eye::after{top:2px;box-shadow:inset 0 -8px 0 2px,inset 0 0 0 2px;width:24px;height:24px}.gg-eye::before{width:8px;height:8px;border:2px solid;bottom:4px;left:8px}

static/icons/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2b95f2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

static/icons/alert-triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2b95f2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

static/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2b95f2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

static/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

static/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>

static/icons/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>

static/icons/hash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>

static/icons/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>

static/icons/message-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>

static/icons/smartphone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>

static/icons/tool.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>

views/embed.hbs

@@ -4,7 +4,6 @@
 <head>
   {{> partials/head }}
 
-  <link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
   <link rel="stylesheet" href="/static/css/embed.css" />
 </head>
 
@@ -31,7 +30,7 @@
       </a>
       {{/if}}
       <div class="views">
-        <span class="material-icons-outlined" title="Views">visibility</span>
+        <img class="icon" src="/static/icons/eye.svg" alt="Views">
         <p>{{post.Views}}</p>
       </div>
     </div>

views/partials/comment.hbs

@@ -18,8 +18,8 @@
       <span class="comment__updatedDate">(deleted {{this.DeletedAt}})</span>
       {{/if}}
        | 
-      <span class="material-icons-outlined">thumb_up</span> {{this.Upvotes}}
+      <img class="icon" src="/static/icons/chevron-up.svg" alt="Likes"> {{this.Upvotes}}
-      <span class="material-icons-outlined">thumb_down</span> {{this.Downvotes}}
+      <img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes"> {{this.Downvotes}}
     </p>
   </div>
   <div class="replies">

views/partials/footer.hbs

@@ -1,10 +1,4 @@
-<br><br><br>
-
 <footer>
-  <a href="/privacy">
+  <a href="/privacy">Privacy</a>
-    <span class="material-icons-outlined">visibility</span> Privacy
+  <a href="https://codeberg.org/video-prize-ranch/rimgo" rel="noreferrer">Source Code</a>
-  </a>
-  <a href="https://codeberg.org/video-prize-ranch/rimgo" rel="noreferrer">
-    <span class="material-icons-outlined">code</span> Source Code
-  </a>
 </footer>

views/partials/head.hbs

@@ -12,5 +12,4 @@
 <meta name="msapplication-config" content="/static/favicon/browserconfig.xml">
 <meta name="theme-color" content="#ffffff">
 
-<link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
 <link rel="stylesheet" href="/static/css/base.css"/>

views/partials/post.hbs

@@ -11,20 +11,14 @@
     <p class="post__title">{{Title}}</p>
     <div class="post__meta">
       <p>
-        <span class="material-icons-outlined">
+        <img class="icon" src="/static/icons/chevron-up.svg" alt="Points">
-          arrow_upward
-        </span>
         {{Points}}
       </p>
       <p>
-        <span class="material-icons-outlined">
+        <img class="icon" src="/static/icons/message-square.svg" alt="Comments">
-          comment
-        </span>
         {{Comments}}
       <p>
-        <span class="material-icons-outlined">
+        <img class="icon" src="/static/icons/eye.svg" alt="Views">
-          visibility
-        </span>
         {{Views}}
       </p>
     </div>

views/post.hbs

@@ -11,7 +11,6 @@
 
   {{> partials/head }}
 
-  <link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
   <link rel="stylesheet" href="/static/css/album.css" />
   <link rel="stylesheet" href="/static/css/comments.css" />
 
@@ -37,12 +36,18 @@
       {{/if}}
       <div class="imageMeta">
         <div class="imageMeta__item">
-          <span class="material-icons-outlined" title="Views">visibility</span>
+          <img class="icon" src="/static/icons/eye.svg" alt="Views">
           <p>{{post.Views}}</p>
         </div>
         {{#if post.SharedWithCommunity}}
-        <p><span class="material-icons-outlined" title="Likes">thumb_up</span> {{post.Upvotes}}</p>
+        <div class="imageMeta__item">
-        <p><span class="material-icons-outlined" title="Dislilkes">thumb_down</span> {{post.Downvotes}}</p>
+          <img class="icon" src="/static/icons/chevron-up.svg" alt="Likes">
+          <p>{{post.Upvotes}}</p>
+        </div>
+        <div class="imageMeta__item">
+          <img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes">
+          <p>{{post.Downvotes}}</p>
+        </div>
         {{/if}}
       </div>
     </div>
@@ -93,7 +98,7 @@
       <input id="comments__expandBtn" type="checkbox">
       <label class="comments__expandBtn__label" for="comments__expandBtn">
         <h3>Comments ({{post.Comments}})</h3>
-        <span class="comments__expandBtn__icon material-icons-outlined"></span>
+        <span class="comments__expandBtn__icon"></span>
       </label>
       <div class="comments">
         {{#each comments}}

views/privacy.hbs

@@ -28,9 +28,7 @@
     {{#if config.Privacy.not_collected}}
     <div class="badgeWrapper">
       <div class="badge">
-        <span class="material-icons-outlined largeIcon">
+        <img class="icon largeIcon" src="/static/icons/check-circle.svg" alt="">
-          check_circle
-        </span>
         <h3>Data Not Collected</h3>
         <p>The instance operator does not collect any data from this instance.</p>
       </div>
@@ -40,9 +38,7 @@
     {{#unless config.Privacy.set}}
     <div class="badgeWrapper">
       <div class="badge">
-        <span class="material-icons-outlined largeIcon">
+        <img class="icon largeIcon" src="/static/icons/alert-triangle.svg" alt="">
-          report_problem
-        </span>
         <h3>No Details Provided</h3>
         <p>The operator of this instance will be required to provide privacy details to be added to the instance list.
         </p>
@@ -52,33 +48,31 @@
     {{#unless config.Privacy.not_collected}}
     <div class="badgeWrapper">
       <div class="badge">
-        <span class="material-icons-outlined largeIcon">
+        <img class="icon largeIcon" src="/static/icons/alert-circle.svg" alt="">
-          error_outline
-        </span>
         <h3>Data Collected</h3>
         <p>The following data may be collected:</p>
         <ul>
           {{#if config.Privacy.ip}}
           <li>
-            <span class="material-icons-outlined">password</span>
+            <img class="icon" src="/static/icons/hash.svg" alt="">
             Internet address (IP Address)
           </li>
           {{/if}}
           {{#if config.Privacy.url}}
           <li>
-            <span class="material-icons-outlined">link</span>
+            <img class="icon" src="/static/icons/link.svg" alt="">
             Page viewed (Request URL)
           </li>
           {{/if}}
           {{#if config.Privacy.device}}
           <li>
-            <span class="material-icons-outlined">phonelink</span>
+            <img class="icon" src="/static/icons/smartphone.svg" alt="">
             Device Type (User agent)
           </li>
           {{/if}}
           {{#if config.Privacy.diagnostics}}
           <li>
-            <span class="material-icons-outlined">settings</span>
+            <img class="icon" src="/static/icons/tool.svg" alt="">
             Diagnostics
           </li>
           {{/if}}
@@ -95,21 +89,21 @@
       </p>
       <ul>
         <li>
-          <span class="material-icons-outlined">password</span>
+          <img class="icon" src="/static/icons/hash.svg" alt="">
           Internet address (IP Address) - This is an address that is given to your computer or internet connection.
           This can be used to find your city or region and internet provider but can change depending on your connection.
         </li>
         <li>
-          <span class="material-icons-outlined">link</span>
+          <img class="icon" src="/static/icons/link.svg" alt="">
           Page viewed (Request URL) - This is what page you are viewing. Searches are kept private.
         </li>
         <li>
-          <span class="material-icons-outlined">phonelink</span>
+          <img class="icon" src="/static/icons/smartphone.svg" alt="">
           Device Type (User agent) - This is what browser, device, and operating system you are using.
           Advanced users can change this with an extension or browser setting.
         </li>
         <li>
-          <span class="material-icons-outlined">settings</span>
+          <img class="icon" src="/static/icons/tool.svg" alt="">
           Diagnostics - When this data is only collected when there is an error or only a short amount of time while
           diagnosing an issue.
         </li>

views/tag.hbs

@@ -6,7 +6,6 @@
 
   {{> partials/head }}
 
-  <link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
   <link rel="stylesheet" href="/static/css/base.css" />
   <link rel="stylesheet" href="/static/css/tag.css" />
 </head>

views/user.hbs

@@ -6,7 +6,6 @@
 
   {{> partials/head }}
 
-  <link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
   <link rel="stylesheet" href="/static/css/user.css" />
 
 </head>